/* Cobiz — публичный лендинг (pages/welcome/welcome.html).
   Верстается 1:1 по Figma (файл kjcnN2Gxb4Bp6FtAjiQTtM, фрейм "01 · Лендинг",
   node 2968:918). Палитра/шрифт сняты из дизайн-контекста узлов при сборке
   (codex/rules.txt — hex тут не совпадает с --ui-* токенами внутреннего
   приложения, это отдельная, маркетинговая поверхность продукта).
   Классы — только в файле, подключённом на самом лендинге, наружу не текут. */

.cobiz-landing {
  --ll-text: #212529;
  --ll-text-2: #686868;
  --ll-text-3: #949494;
  --ll-border: #e0e0e0;
  --ll-panel: #f3f3f3;
  --ll-primary: #1072ef;
  --ll-primary-12: rgba(16, 114, 239, 0.12);
  --ll-white: #ffffff;
  --ll-navy: #042145;
  --ll-whatsapp: #25d366;
  --ll-error: #e02626;
  /* Добавлен для страницы входа (node 2968:1106 и соседние WhatsApp-состояния):
     положительные сообщения под полем (аккаунт найден / ссылка отправлена). */
  --ll-success: #16ac4d;
  --ll-container: 1216px;
  font-family: var(--ui-font-display, 'Manrope'), var(--ui-font, sans-serif);
  color: var(--ll-text);
  background: var(--ll-white);
  /* базовый Manrope/P/Regular из макета: 16px / 1.48 */
  font-size: 16px;
  line-height: 1.48;
}

.cobiz-landing * {
  box-sizing: border-box;
}

/* Легаси custom_elements.css:173 держит "html, body { height: 100% }" ради
   других full-height раскладок приложения (сам блок не трогаем, он им нужен).
   На длинном лендинге это ломало position:sticky у шапки: containing block
   для sticky — это padding box РОДИТЕЛЯ (у шапки родитель — body), а он был
   жёстко обрезан до высоты вьюпорта, хотя контент (9500px+) визуально
   переполнял его через overflow:visible. Шапка липла только в пределах
   первого экрана и дальше просто уезжала вместе со страницей (проверено:
   getBoundingClientRect().top начинал уходить в минус ровно на границе
   viewport-height). Сбрасываем высоту только для лендинга. */
body.cobiz-landing {
  height: auto;
}

/* Тот же легаси-файл глобально прячет нативный скроллбар (custom_elements.css:245+:
   ::-webkit-scrollbar{display:none} и *{scrollbar-width:none}) — это сделано для
   внутренних панелей приложения со своим кастомным скроллбаром
   (.fvc_horizontal_scrollbar). На публичном лендинге своего скроллбара нет,
   а без нативного пропадает визуальная подсказка "где я на странице" и пропадает
   layout shift-защита (появление/исчезание скроллбара на разных страницах).
   <html> получает класс "cobiz-landing-html" только в pages/welcome/welcome.html —
   возвращаем скроллбар точечно, не трогая легаси-правило. */
html.cobiz-landing-html {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

html.cobiz-landing-html::-webkit-scrollbar,
html.cobiz-landing-html body::-webkit-scrollbar {
  display: block;
  width: 12px;
}

html.cobiz-landing-html::-webkit-scrollbar-track {
  background: var(--ll-panel);
}

html.cobiz-landing-html::-webkit-scrollbar-thumb {
  background: var(--ll-border);
  border-radius: 999px;
  border: 3px solid var(--ll-panel);
}

/* :hover ниже и по всему файлу обёрнут в (hover: hover) and (pointer: fine) —
   на тач-экранах браузер эмулирует :hover по долгому тапу/зажатию (например
   при скролле пальцем по карточке), и состояние потом "залипает" до
   следующего тапа в другое место — на мобиле это выглядит как случайное
   выделение элементов при обычной прокрутке. Медиа-условие пускает hover
   только туда, где есть настоящее устройство указания (мышь/трекпад). */
@media (hover: hover) and (pointer: fine) {
  html.cobiz-landing-html::-webkit-scrollbar-thumb:hover {
    background: var(--ll-text-3);
  }
}

.cobiz-landing__container {
  width: 100%;
  /* Контент в Figma — 1216px РОВНО (карточки 4×286+3×24=1216 без запаса),
     safe zone по 20px с каждой стороны. box-sizing: border-box, поэтому
     паддинги входят в max-width: 1216 + 2×20 = 1256. */
  max-width: calc(var(--ll-container) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

.cobiz-landing a {
  text-decoration: none;
  color: inherit;
}

.cobiz-landing img,
.cobiz-landing svg {
  max-width: 100%;
  display: block;
}

/* Лендинг намеренно НЕ носит класс .public-site: в том легаси-наборе
   (custom_elements.css:11234+) есть правила на голые h1..h6/p/a со специфичностью
   «класс+тег» — они перебивали покомпонентные значения макета (слетал margin у h1,
   tertiary-цвет подписей и т.п.), потому что у наших классов специфичность ниже.
   Сам набор не трогаем — он ещё нужен privacy/terms и страницам входа; просто не
   подключаем его к лендингу. Единственное, что оттуда реально использовалось здесь —
   плавающая кнопка WhatsApp, поэтому переносим её стили в этот файл. */
.cobiz-landing .whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1060;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ll-whatsapp);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cobiz-landing .whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

.cobiz-landing .whatsapp-fab:focus {
  background-color: #20bf5b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* :hover — только для устройств с реальным курсором (mouse/trackpad).
   Без (hover: hover) на тач-экранах тап по FAB "залипал" в hover-состоянии
   до следующего тапа где-то ещё — на телефоне у элемента нет курсора,
   который бы "ушёл" и снял :hover сам собой. См. общее правило ниже
   (§ мобильный hover) — тот же приём применён по всему файлу. */
@media (hover: hover) and (pointer: fine) {
  .cobiz-landing .whatsapp-fab:hover {
    background-color: #20bf5b;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
  }
}

/* Секция сама по себе БЕЗ вертикального паддинга — весь ритм страницы через
   margin у конкретных секций (см. блок ниже). Раньше здесь стоял общий
   padding: 80px 0 "про запас", и он тихо складывался с margin на соседних
   секциях (сверху 80 + margin-top следующей = зазор больше заданного,
   иногда на десятки px, воспроизвести точные значения из Figma было
   невозможно, не отключив его). */
.cobiz-landing__section {
  padding: 0;
}

/* Цветные секции (Зарплата/Финансы/Как начать) держат собственные 112px
   сверху и снизу ВНУТРИ заливки — это единственный настоящий "padding"
   на странице, весь остальной ритм — через margin. */
.cobiz-landing__section--tint {
  background: var(--ll-primary-12);
  padding: 112px 0;
}

/* Межсекционные зазоры сняты геометрически с Figma (2968:918: разница между
   bottom предыдущего фрейма и top следующего) — Герой→Заказ-наряды 140,
   Заказ-наряды→Зарплата 128, Зарплата→Склад 128, Склад→Финансы 128,
   Финансы→Подходит для 140, Подходит для→Отзывы 140, Отзывы→Как начать 140,
   Как начать→Тарифы 140, Тарифы→FAQ 140, FAQ→Контакты 140,
   Контакты→Подвал 112. Каждый зазор задан РОВНО один раз (margin-top у
   следующей секции), чтобы не удваивался с чужим padding/margin. */
#feature-order {
  margin-top: 140px;
}

#feature-salary {
  margin-top: 128px;
}

#feature-warehouse {
  margin-top: 128px;
}

#feature-finance {
  margin-top: 128px;
}

.ll-industries {
  margin-top: 140px;
}

#pricing {
  margin-top: 140px;
}

#faq {
  margin-top: 140px;
}

#contact {
  margin-top: 140px;
}

.cobiz-landing__title {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 48px;
  line-height: 1.16;
  color: var(--ll-text);
  margin: 0;
}

.cobiz-landing__eyebrow {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  margin: 12px 0 0;
}

.cobiz-landing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 16px;
  background: var(--ll-primary);
  color: var(--ll-white) !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .cobiz-landing__btn:hover {
    background: #1262c8;
    color: var(--ll-white) !important;
  }
}

.cobiz-landing__btn:active {
  background: #0d4ea0;
  color: var(--ll-white) !important;
}

.cobiz-landing__btn--whatsapp {
  background: var(--ll-whatsapp);
}

@media (hover: hover) and (pointer: fine) {
  .cobiz-landing__btn--whatsapp:hover {
    background: #20bf5b;
  }
}

.cobiz-landing__btn--whatsapp:active {
  background: #1ba851;
}

/* ---------- Шапка ---------- */

.ll-header {
  /* fixed, а не sticky: со sticky смена padding (20px → 12px) на скролле
     меняла высоту шапки ПРЯМО В ПОТОКЕ и контент под ней подпрыгивал на
     разницу. fixed всегда вне потока — под неё держит отступ сама секция
     .ll-hero (padding-top: 200px), скачков нет ни в каком состоянии. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--ll-border);
  background: var(--ll-white);
  z-index: 200;
  box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0);
  transition: box-shadow 150ms ease-out;
}

/* Компактное состояние при скролле (JS вешает класс, см. document_ready
   welcome.html): паддинг 20px → 12px и появляется тень-подсказка "шапка
   поверх контента". При возврате к самому верху страницы класс снимается —
   шапка возвращается к дефолту. */
.ll-header.is-scrolled {
  box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.08);
}

.ll-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* только по вертикали: шорткат padding затирал горизонтальную safe zone
     контейнера (0 20px) и шапка прилипала к краям окна */
  padding-top: 20px;
  padding-bottom: 20px;
  transition: padding 150ms ease-out;
}

.ll-header.is-scrolled .ll-header__inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ll-header__left {
  display: flex;
  align-items: center;
  gap: 52px;
  min-width: 0;
}

.ll-header__logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.ll-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.ll-header__nav a {
  font-size: 16px;
  color: var(--ll-text);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .ll-header__nav a:hover {
    border-bottom-color: var(--ll-text);
    cursor: pointer;
  }
}

.ll-header__right {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}

/* Language switch (2930:2262): контейнер 99×40, паддинг 4, подложка-пилюля
   45×32 ездит с left:4 (RU) на left:50 (KZ) — переносим сдвиг на transform. */
.ll-lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 40px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ll-panel);
}

.ll-lang-switch__pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 45px;
  height: 32px;
  border-radius: 999px;
  background: var(--ll-primary-12);
  transition: transform 100ms ease-out;
}

.ll-lang-switch.is-kz .ll-lang-switch__pill {
  transform: translateX(46px);
}

.ll-lang-switch__btn {
  position: relative;
  z-index: 1;
  width: 45px;
  border: none;
  background: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  cursor: pointer;
  transition: color 100ms ease-out;
}

.ll-lang-switch__btn.is-active {
  color: var(--ll-primary);
}

.ll-header__login {
  font-size: 16px;
  color: var(--ll-text);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .ll-header__login:hover {
    border-bottom-color: var(--ll-text);
    cursor: pointer;
  }
}

.ll-header__cta {
  padding: 12px 24px;
  font-size: 16px;
}

.ll-header__burger {
  display: none;
  border: none;
  background: none;
  padding: 8px;
  cursor: pointer;
}

/* ---------- Герой ---------- */

/* Якорь "Возможности" в шапке/меню (href="#features") ведёт на блок
   "С какой задачей вам помочь?" (.ll-quick), а не на самый верх Героя — но
   этот блок стоит вплотную к предыдущему без собственного отступа, и без
   scroll-margin-top фиксированная шапка (position:fixed) перекрывала бы его
   заголовок при переходе по якорю. Отступ = высота шапки + немного воздуха. */
/* Якорные цели навигации шапки (Возможности/Отзывы/Тарифы/Вопросы) — без
   scroll-margin-top переход по ссылке прятал верх секции под фиксированной
   шапкой (измерено: .ll-header реальная высота 88.67px, не 72 — секции
   #review/#pricing/#faq вообще не имели scroll-margin-top и после перехода
   стояли на 26px от верха, то есть ~62px их верхушки были под шапкой).
   108px = высота шапки + ~20px воздуха, тот же расчёт, что уже был у
   #features. */
#features,
#review,
#pricing,
#faq {
  scroll-margin-top: 108px;
}

.ll-hero {
  /* Шапка теперь position:fixed (снята из нормального потока), поэтому секция
     сама держит для неё отступ сверху. По Figma (2968:919→2968:920): высота
     шапки 88px + зазор 128px до Героя = 216px. Снизу паддинга больше нет —
     он тихо складывался с margin-top у #feature-order (96+140=236 вместо 140). */
  padding: 216px 0 0;
}

.ll-hero__top {
  display: flex;
  align-items: center;
  gap: 60px;
  /* зазор до "С какой задачей вам помочь?" внутри Героя, по Figma (gap
     между Frame 256 и Текст внутри фрейма "Герой") */
  margin-bottom: 128px;
}

.ll-hero__copy {
  flex: 0 0 596px;
  max-width: 596px;
}

.ll-hero__title {
  font-weight: 800;
  font-size: 60px;
  line-height: 1.14;
  margin: 0 0 16px;
}

.ll-hero__lead {
  font-size: 16px;
  line-height: 1.48;
  max-width: 540px;
  margin: 0 0 24px;
}

.ll-hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ll-hero__cta-note {
  font-size: 16px;
  color: var(--ll-text-3);
  margin: 0;
}

/* Герой-визуал = Frame 186 (2968:929), 560×460. Собран из трёх отдельных
   ассетов без запечённых теней, тени — в CSS:
     Frame 187 (3035:2054)  — фото, основа, position: relative;
     Frame 190 2 (2968:931) — плашка «Заказ №1043», абсолют left -24 / top 24, 225×68;
     Frame 191 1 (2968:930) — плашка «Зарплата за март», абсолют right 54 / bottom -24, 251×68.
   Раньше тут лежал один флэттированный PNG — в него входили и тени, из-за чего
   картинка была крупнее своего содержимого и уезжала. */
.ll-hero__media {
  position: relative;
  flex: 0 0 560px;
  width: 560px;
  max-width: 100%;
  aspect-ratio: 560 / 460;
}

.ll-hero__photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
}

/* кроп фото 1:1 из макета (Frame 187) */
.ll-hero__photo img {
  position: absolute;
  width: 147.17%;
  height: 100%;
  left: -37.32%;
  top: 0;
  max-width: none;
  object-fit: cover;
}

.ll-hero__badge {
  position: absolute;
  /* обе плашки строго 68px высотой (в макете 225×68 и 251×68) */
  height: 68px;
  /* Раньше скругление было запечено в сам PNG (без возможности поменять) —
     теперь ассеты выгружены с острыми углами, радиус только CSS: 16px. */
  border-radius: 16px;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
}

/* Ширина НЕ фиксируется — только height:68px, ширина тянется по реальной
   пропорции ассета (auto). Раньше здесь был ещё и фиксированный width под
   размеры из дизайн-кода, но он не совпадал 1:1 с фактическим кадрированием
   исходных PNG и растягивал картинку. плашки поменяны местами относительно
   исходного макета (по правке заказчика): «Зарплата» — сверху слева,
   «Заказ» — снизу справа */
.ll-hero__badge--salary {
  left: -24px;
  top: 24px;
}

.ll-hero__badge--order {
  right: 54px;
  bottom: -24px;
}

/* ---------- «С какой задачей вам помочь?» ---------- */

.ll-quick {
  text-align: center;
}

.ll-quick__head {
  max-width: 802px;
  margin: 0 auto 52px;
}

.ll-quick__head p {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--ll-text);
}

.ll-quick__grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.ll-quick-card {
  width: 286px;
  padding: 20px;
  border-radius: 16px;
  background: var(--ll-panel);
  border: 1px solid var(--ll-border);
  text-align: left;
  display: flex;
  flex-direction: column;
  /* по макету отступы РАЗНЫЕ: 20px между иконкой и текстом (внутри __body)
     и 28px между текстом и «Как решаем» */
  gap: 28px;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.ll-quick-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ll-quick-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Component 6 (2876:2813): hover/active инвертируют карточку целиком в синий,
   текст и иконка становятся белыми — не просто фон меняется.
   :hover-часть вынесена в (hover: hover) and (pointer: fine) — на тач-экране
   этот же эффект уже даёт :active (ниже), а голый :hover на мобиле залипал
   после обычного тапа/скролла по карточке. */
@media (hover: hover) and (pointer: fine) {
  .ll-quick-card:hover {
    background: var(--ll-primary);
    border-color: var(--ll-primary);
  }

  .ll-quick-card:hover .ll-quick-card__title,
  .ll-quick-card:hover .ll-quick-card__text,
  .ll-quick-card:hover .ll-quick-card__more {
    color: var(--ll-white);
  }

  .ll-quick-card:hover .ll-quick-card__icon {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .ll-quick-card:hover .ll-quick-card__icon svg,
  .ll-quick-card:hover .ll-quick-card__more svg {
    filter: brightness(0) invert(1);
  }
}

.ll-quick-card:active {
  background: #1262c8;
  border-color: #1262c8;
}

.ll-quick-card:active .ll-quick-card__title,
.ll-quick-card:active .ll-quick-card__text,
.ll-quick-card:active .ll-quick-card__more {
  color: var(--ll-white);
}

.ll-quick-card:active .ll-quick-card__icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
}

.ll-quick-card:active .ll-quick-card__icon svg,
.ll-quick-card:active .ll-quick-card__more svg {
  filter: brightness(0) invert(1);
}

.ll-quick-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(16, 114, 239, 0.08);
  border: 1px solid rgba(16, 114, 239, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.ll-quick-card__icon svg {
  transition: filter 200ms ease-out;
  width: 32px;
  height: 32px;
}

.ll-quick-card__title {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  color: var(--ll-text);
  transition: color 200ms ease-out;
}

.ll-quick-card__text {
  font-size: 16px;
  line-height: 1.48;
  margin: 0;
  color: var(--ll-text);
  transition: color 200ms ease-out;
}

/* сначала текст, потом стрелка (margin-top:auto держит низ карточек на одной
   линии, если у соседа текст переносится на лишнюю строку) */
.ll-quick-card__more {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text);
  transition: color 200ms ease-out;
}

/* в покое стрелка смотрит вверх-направо (↗), на hover доворачивается вправо (→),
   сама при этом не смещается */
.ll-quick-card__more svg {
  width: 20px;
  height: 20px;
  transition: transform 200ms ease-out, filter 200ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ll-quick-card:hover .ll-quick-card__more svg {
    transform: rotate(45deg);
  }
}

.ll-quick-card:active .ll-quick-card__more svg {
  transform: rotate(45deg);
}

/* ---------- Секции «Заказ-наряды / Зарплата / Склад / Финансы» ---------- */

.ll-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.ll-feature--reverse {
  flex-direction: row-reverse;
}

/* У первого и последнего блока это НЕ отступ между текстом и картинкой —
   это отступ у самой картинки до КРАЯ секции (у Заказ-нарядов — 80px справа
   от изображения, у Финансов — 44px слева от изображения). Технически это
   padding на строке (сжимает то, что space-between может растянуть под
   картинку), а не gap между детьми: с строки с justify-content:space-between
   и двумя детьми фиксированной ширины сам gap растягивается на всё
   оставшееся место и игнорируется — так тут и было, пока стоял gap.
   Зарплату/Склад не трогаем — там картинка обычным space-between стоит
   вровень с краем секции. */
#feature-order .ll-feature {
  padding-right: 80px;
}

#feature-finance .ll-feature--reverse {
  padding-left: 44px;
}

/* Раньше тут был ещё flex gap:32px поверх собственных margin-bottom заголовка
   и списка (16px у каждого) — отступы СКЛАДЫВАЛИСЬ (32+16=48px), а не
   выглядели как заданные в макете 16/16/32. Управляем расстоянием только
   через margin-bottom конкретных элементов, gap на контейнере убран. */
.ll-feature__copy {
  flex: 0 0 596px;
  max-width: 596px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ll-feature__title {
  font-weight: 800;
  font-size: 48px;
  line-height: 1.16;
  margin: 0 0 16px;
}

.ll-feature__list {
  list-style: decimal;
  margin: 0 0 16px;
  padding-left: 24px;
  max-width: 493px;
}

.ll-feature__list li {
  font-size: 16px;
  line-height: 1.48;
  margin-bottom: 4px;
}

.ll-feature__summary {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  max-width: 493px;
  margin: 0 0 32px;
}

/* Зарплата и Склад не несут кнопку "Попробовать бесплатно" после summary
   (только Заказ-наряды и Финансы её показывают, см. welcome.html) - без
   кнопки нижний margin summary превращался в пустой хвост под текстом,
   .ll-feature__copy - flex column без gap, так что этот margin ничем не
   гасился. */
#feature-salary .ll-feature__summary,
#feature-warehouse .ll-feature__summary {
  margin-bottom: 0;
}

/* Визуалы 4 блоков собраны так же, как герой: отдельные слои-ассеты (image fill
   из Figma, 3–4.7x нативного размера — качество нормальное и на телефонах) с
   абсолютным позиционированием, тень — не запечённая в PNG, а через CSS
   box-shadow: 0 0 28px 0 rgba(0,0,0,.08), как в исходных карточках героя.
   Раньше был один флэттированный скриншот на секцию — плашки в нём резались
   по краю кадра неаккуратно на маленьких экранах и грузился web-запрос лишним
   весом целой сцены вместо переиспользуемых мелких PNG. */
.ll-feature__visual {
  position: relative;
  flex: 0 0 auto;
}

/* 3-уровневая шкала скруглений по размеру слоя (радиус больше не запечён в
   PNG — ассеты выгружены заново с острыми углами): 32px — самый крупный слой
   композиции, 16px — средний, 8px — маленькие бейджи/плашки. По умолчанию
   у .ll-feature__visual-badge — средний (16px), крупный и мелкий слои
   переопределяют явно у конкретных модификаторов ниже. */
.ll-feature__visual-badge {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

/* Заказ-наряды (2968:943): карточка заказа 400×452 (растр 1600×1808, 4x) + бейдж "Все заказы в одном списке" 290×40.
   Позиции — в % от контейнера (не px), а сам контейнер держит aspect-ratio:
   так вся композиция пропорционально масштабируется на любой ширине экрана,
   а не только на дизайн-ширине 400px (важно для телефонов). */
.ll-feature__visual--order {
  width: 400px;
  max-width: 100%;
  aspect-ratio: 400 / 452;
}
.ll-feature__visual--order .ll-feature__visual-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
}
.ll-feature__visual--order .ll-feature__visual-badge {
  left: 22.5%;
  top: -7.08%;
  width: 72.5%;
  height: 8.85%;
  border-radius: 8px;
}

/* Зарплата (2968:947): один расчётный лист 517×397, без дополнительных плашек */
.ll-feature__visual--salary {
  width: 517px;
  max-width: 100%;
}
.ll-feature__visual--salary img {
  display: block;
  width: 100%;
  aspect-ratio: 517 / 397;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
}

/* Склад (2968:951): фото стеллажей 463×380 + карточка остатков 331×320 + бейдж списания 254×60 */
.ll-feature__visual--warehouse {
  width: 575px;
  max-width: 100%;
  aspect-ratio: 575 / 492;
}
.ll-feature__visual--warehouse .ll-feature__visual-photo {
  position: absolute;
  left: 19.48%;
  top: 6.5%;
  width: 80.52%;
  height: 77.24%;
  border-radius: 32px;
  object-fit: cover;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
}
.ll-feature__visual--warehouse .ll-feature__visual-badge--card {
  left: 0;
  top: 34.96%;
  width: 57.57%;
  height: 65.04%;
}
.ll-feature__visual--warehouse .ll-feature__visual-badge--tag {
  left: 50.26%;
  top: 0;
  width: 44.17%;
  height: 12.2%;
  border-radius: 8px;
}

/* Финансы (2968:956): график расходов 474×235 + карточка прибыли 271×176 + мини-график 236×150 */
.ll-feature__visual--finance {
  width: 519px;
  max-width: 100%;
  aspect-ratio: 519 / 512;
}
.ll-feature__visual--finance .ll-feature__visual-badge--chart {
  left: 8.67%;
  top: 27.15%;
  width: 91.33%;
  height: 45.9%;
  /* у "Финансов" все 3 слоя — единое скругление 16px (не по тирам, как в
     Складе/Заказ-нарядах) */
  border-radius: 16px;
}
.ll-feature__visual--finance .ll-feature__visual-badge--card1 {
  left: 42.78%;
  top: 0;
  width: 52.21%;
  height: 34.38%;
}
.ll-feature__visual--finance .ll-feature__visual-badge--card2 {
  left: 0;
  top: 70.7%;
  width: 45.47%;
  height: 29.3%;
}

/* ---------- Подходит для + статистика ---------- */

.ll-industries {
  text-align: center;
}

.ll-industries__title {
  margin-bottom: 52px;
}

.ll-industries__grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.ll-industry-card {
  position: relative;
  width: 286px;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ll-panel);
  text-align: left;
}

.ll-industry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ll-industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.48));
}

.ll-industry-card__label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1;
  font-weight: 800;
  font-size: 24px;
  color: var(--ll-white);
  margin: 0;
}

.ll-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.ll-stat {
  width: 286px;
  text-align: center;
}

.ll-stat__value {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.16;
  margin: 0 0 8px;
}

.ll-stat__label {
  font-size: 16px;
  color: var(--ll-text-2);
  margin: 0;
}

.ll-stat-divider {
  width: 1px;
  height: 144px;
  background: var(--ll-border);
  flex-shrink: 0;
}

/* ---------- Отзывы ---------- */

.ll-reviews {
  text-align: center;
  /* до и после — по 140px (Подходит для→Отзывы и Отзывы→Как начать в Figma) */
  margin-top: 140px;
  margin-bottom: 140px;
}

.ll-reviews__title {
  margin-bottom: 52px;
}

.ll-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.ll-carousel__nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ll-panel);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .ll-carousel__nav:hover:not(:disabled) {
    background: var(--ll-border);
  }
}

.ll-carousel__nav:disabled {
  cursor: default;
  opacity: 0.5;
}

.ll-carousel__viewport {
  max-width: 644px;
  overflow: hidden;
  /* pan-y — браузер отдаёт горизонтальный жест JS (свайп/драг карусели),
     вертикальный скролл страницы через этот элемент по-прежнему работает
     нативно, без conflict с Pointer Events обработчиком. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.ll-carousel__viewport:active {
  cursor: grabbing;
}

/* Отступ МЕЖДУ карточками-слайдами внутри трека (не только снаружи, между
   стрелками и вьюпортом). JS считает шаг сдвига в px, а не в %, — учитывает
   и ширину слайда, и этот gap, иначе при переключении слайд уезжал бы на
   ширину card + gap, а translateX двигал бы только на ширину card. */
.ll-carousel__track {
  gap: 80px;
}

.ll-review-card {
  background: var(--ll-panel);
  border: 1px solid var(--ll-border);
  border-radius: 16px;
  padding: 32px 32px 40px;
  text-align: left;
}

/* name/stars/company — flex-соседи с управляемым порядком (.order), а не
   вложенность name+stars внутри отдельного __head — так порядок можно менять
   под мобиле чистым CSS (см. медиа-запрос), не трогая разметку. На десктопе
   flex-wrap заставляет company переноситься на свою строку (flex-basis:100%,
   тот же приём, что и у карусели/её стрелок), name+stars остаются в первой
   строке space-between — визуально то же, что раньше давал __head. */
.ll-review-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 8px;
}

.ll-review-card__name {
  order: 1;
  font-weight: 800;
  font-size: 24px;
  margin: 0;
}

.ll-review-card__stars {
  order: 2;
}

.ll-review-card__stars svg {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.ll-review-card__company {
  order: 3;
  flex-basis: 100%;
  font-weight: 700;
  font-size: 16px;
  color: var(--ll-text-2);
  margin: 0 0 24px;
}

.ll-review-card__text {
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Как начать ---------- */

/* Grid, а не flex: кнопка "Попробовать бесплатно" — отдельный третий
   элемент (не вложен в .ll-start__copy), чтобы на мобиле её можно было
   переставить ПОСЛЕ .ll-start__steps чистым CSS (order/grid-area), не трогая
   разметку под каждый брейкпоинт. На десктопе она садится под описанием в
   левой колонке (area "button" под "copy"), .ll-start__steps растягивается
   на обе строки в правой колонке. */
.ll-start {
  display: grid;
  grid-template-columns: 493px 1fr;
  grid-template-areas: "copy steps" "button steps";
  column-gap: 103px;
  row-gap: 32px;
  align-items: start;
}

.ll-start__copy {
  grid-area: copy;
  max-width: 493px;
}

.ll-start__copy p {
  font-size: 16px;
  color: var(--ll-text-2);
  /* без нижнего margin — зазор до кнопки теперь даёт row-gap:32px грида
     (кнопка больше не следующий элемент ВНУТРИ .ll-start__copy) */
  margin: 16px 0 0;
}

.ll-start__btn {
  grid-area: button;
  /* грид по умолчанию растягивает элементы на всю ширину ячейки (justify-
     items:stretch) — без этого кнопка стала бы во всю колонку 493px вместо
     компактной по контенту, как раньше (была inline-flex внутри обычного
     block-потока .ll-start__copy, где так не тянуло). */
  justify-self: start;
}

.ll-start__steps {
  grid-area: steps;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ll-start-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ll-white);
  border-radius: 16px;
  padding: 20px 24px;
}

.ll-start-step__num {
  /* это <p> — без явного сброса браузер добавляет дефолтный margin: 1em
     (52px при font-size:52px) сверху и снизу, из-за чего номер уезжал
     вниз относительно соседнего текста (у него margin:0 уже был) */
  margin: 0;
  font-weight: 600;
  font-size: 52px;
  color: var(--ll-primary);
  line-height: 1;
  flex-shrink: 0;
}

.ll-start-step__text {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Тарифы ---------- */

.ll-pricing__title {
  text-align: center;
  margin-bottom: 52px;
}

.ll-pricing__grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.ll-pricing-card {
  width: 389px;
  border: 1px solid var(--ll-border);
  border-radius: 32px;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: linear-gradient(180deg, rgba(16, 114, 239, 0.08) 0%, rgba(255, 255, 255, 0.08) 60.5%, rgba(255, 255, 255, 0.08) 100%);
}

.ll-pricing-card--accent {
  background: linear-gradient(180deg, rgba(252, 203, 88, 0.08) 0%, rgba(255, 255, 255, 0.08) 60.5%, rgba(255, 255, 255, 0.08) 100%);
}

.ll-pricing-card__name {
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 6px;
}

.ll-pricing-card__seats {
  font-size: 16px;
  color: var(--ll-text-3);
  margin: 0 0 20px;
}

.ll-pricing-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ll-pricing-card__price-label {
  font-weight: 600;
  font-size: 20px;
}

.ll-pricing-card__price-value {
  font-weight: 800;
  font-size: 32px;
  white-space: nowrap;
}

.ll-pricing-card__divider {
  height: 1px;
  background: var(--ll-border);
}

.ll-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ll-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.ll-pricing-card__features svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ll-pricing-card .cobiz-landing__btn {
  width: 100%;
  margin-top: auto;
}

/* ---------- FAQ ---------- */

.ll-faq {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.ll-faq__title {
  flex: 0 0 493px;
  max-width: 493px;
  position: sticky;
  top: 96px;
}

.ll-faq__list {
  flex: 1 1 auto;
  max-width: 683px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 12px;
}

.ll-faq-item {
  border-bottom: 1px solid var(--ll-border);
  padding-bottom: 24px;
}

.ll-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ll-faq-item__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.32;
  color: var(--ll-text);
}

.ll-faq-item__q svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  /* Базовая иконка (icon-arrow-up.html) сама смотрит вверх — это ЗАКРЫТОЕ
     состояние ("можно раскрыть, разверни вниз"), поэтому переворачиваем её
     вниз по умолчанию, а открытое возвращаем к natural "вверх" (Правка №23:
     владелец уточнил направление — было наоборот). */
  transform: scaleY(-1);
}

.ll-faq-item[open] .ll-faq-item__q svg {
  transform: none;
}

.ll-faq-item__a {
  font-size: 16px;
  line-height: 1.48;
  margin: 12px 0 0;
}

/* Ссылка на демо-регистрацию внутри ответа "Можно попробовать без
   регистрации?" — первая ссылка в тексте FAQ-ответа, своего стиля раньше
   не было ни у одного пункта. */
.ll-faq-item__a a {
  color: var(--ll-primary);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ll-faq-item__a a:hover {
    border-bottom-color: var(--ll-primary);
  }
}

/* нативный <details>/<summary> маркер убираем — стрелку рисует своя иконка */
.ll-faq-item__q::-webkit-details-marker {
  display: none;
}
.ll-faq-item > summary.ll-faq-item__q {
  list-style: none;
}

/* ---------- Контакты («Остались вопросы?») ---------- */

.ll-contact {
  background: var(--ll-primary-12);
  border-radius: 64px;
  padding: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ll-contact__copy {
  padding-top: 40px;
  max-width: 333px;
}

.ll-contact__copy p {
  font-size: 16px;
  color: var(--ll-text-2);
  margin: 12px 0 0;
}

.ll-contact__form {
  background: var(--ll-white);
  border-radius: 32px;
  padding: 24px;
  width: 100%;
  max-width: 511px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ll-contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ll-contact__field label {
  /* Bootstrap (bootstrap.min.css, подключён в <head>) даёт голому label
     margin-bottom: .5rem = 8px по умолчанию — складывалось с gap:8px у
     .ll-contact__field и расстояние до поля становилось вдвое больше. */
  margin: 0;
  font-weight: 600;
  font-size: 20px;
}

.ll-contact__field input,
.ll-contact__field textarea {
  border: 1px solid var(--ll-border);
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ll-text);
  width: 100%;
  outline: none;
  transition: border-color 150ms ease-out;
}

.ll-contact__field input::placeholder,
.ll-contact__field textarea::placeholder {
  color: var(--ll-text-3);
}

.ll-contact__field input:focus,
.ll-contact__field textarea:focus {
  border-color: var(--ll-primary);
}

.ll-contact__field textarea {
  min-height: 142px;
  resize: vertical;
}

/* ---------- Подвал ---------- */

.ll-footer {
  background: var(--ll-navy);
  color: var(--ll-white);
  /* margin — реальный белый зазор ДО подвала (между #contact и .ll-footer,
     раньше был 0 — контакты пропустила в прошлый раз). padding — отдельно,
     это уже внутренний отступ ВНУТРИ самой тёмной заливки, тот же паттерн,
     что у цветных секций (низ 32px под копирайтом не трогаем). */
  margin-top: 112px;
  padding: 112px 0 32px;
}

.ll-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 80px;
}

.ll-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
  flex: 0 0 320px;
}

.ll-footer__logo {
  height: 44px;
  width: 172px;
}

.ll-footer__legal-name {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.ll-footer__bin {
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}

.ll-footer__columns {
  display: flex;
  gap: 128px;
  flex-wrap: wrap;
}

.ll-footer__col {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ll-footer__block-title {
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 8px;
}

.ll-footer__block-value {
  font-weight: 600;
  font-size: 24px;
  margin: 0;
}

.ll-footer__block-hint {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 4px 0 0;
}

/* тот же hover-паттерн, что у .ll-header__nav a и .ll-footer__links a —
   но раньше был навешан только на служебные ссылки внизу подвала, телефон/
   почта его не получали вообще */
.ll-footer__phone,
.ll-footer__email {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ll-footer__phone:hover,
  .ll-footer__email:hover {
    border-bottom-color: var(--ll-white);
  }
}

.ll-footer__phone,
.ll-footer__email {
  font-size: 20px;
  color: var(--ll-white);
}

.ll-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 20px;
  margin-top: 8px;
  /* подчёркивание тут не подходит — блок из иконки и текста, полоска под
     иконкой смотрится странно. Вместо этого лёгкое затемнение всего блока */
  transition: opacity 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ll-footer__whatsapp:hover {
    opacity: 0.72;
  }
}

.ll-footer__whatsapp svg {
  width: 28px;
  height: 28px;
}

.ll-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}

.ll-footer__copyright {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.ll-footer__links {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ll-footer__links a {
  font-weight: 600;
  font-size: 16px;
  /* та же схема, что у .ll-header__nav a: подложка-бордер прозрачная в
     покое, красится на hover — не text-decoration, чтобы линия шла вплотную
     под текстом с тем же отступом, а не через дефолтный underline браузера */
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ll-footer__links a:hover {
    border-bottom-color: var(--ll-white);
  }
}

/* <picture> для индустрий (десктоп/мобайл разный кроп) — сам тег picture по
   умолчанию inline и не растягивается на размеры .ll-industry-card. */
.ll-industry-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ================= Планшетный диапазон (768–1279.98px) =================
   Figma не даёт под него отдельного макета (только 360 и 1440, см. ниже) —
   но десктопная сетка в этом диапазоне реально ЛОМАЛАСЬ: у Героя, у 4 блоков
   фич (Заказ-наряды/Зарплата/Склад/Финансы), у "Как начать" (грид) и у FAQ
   ключевые колонки держат фиксированную ширину (596/560/493px) через
   flex-shrink:0 (или жёсткий grid-track 493px) — сжаться НИ ПРИ КАКОЙ ширине
   контейнера меньше 1280px они не могут. Обычный ряд (Заказ-наряды/Герой) от
   этого вылезал вправо (пустое место/горизонтальный скролл справа — ровно то,
   что видно в проде на iPad/ноутбучных 1024-1240px), row-reverse ряд
   (Зарплата/Финансы) вылезал ВЛЕВО за нулевую координату (не видно на глаз,
   но диагностика подтверждает), а "Как начать"/FAQ переставали помещаться
   ближе к нижней границе диапазона (~800px).

   ВАЖНО: это НЕ мобильная раскладка и не должно ею становиться. Секции
   остаются ДВУХколоночными, как на десктопе (≥1280px) — просто сжимаемыми.
   Правки ниже только включают flex-shrink/сужение grid-колонки там, где он
   был явно выключен, и слегка уменьшают gap/padding, чтобы отдать сжатию
   лишний воздух. Шрифты, картинки, направление рядов (в т.ч. row-reverse у
   Зарплаты/Финансов) — не трогаются. Однострочная стек-раскладка (колонкой)
   остаётся приёмом ТОЛЬКО мобильного блока ниже, начинающегося с 767.98px.

   Шапка здесь НЕ трогается вообще (по прямому решению владельца) — остаётся
   как на десктопе без единой правки вплоть до 767.98px, и только там разом
   переключается на бургер-меню (см. мобильный блок ниже). Никакого
   промежуточного сжатия текста/паддингов для неё в этом диапазоне нет. */
@media (max-width: 1279.98px) {
  /* Герой и колонка не переходят в один столбец (это мобильный приём, он
     начинается только с 767.98px, ниже) - строка остаётся строкой, просто
     .ll-hero__copy/.ll-hero__media получают возможность сжиматься (были
     flex-shrink:0 - жёсткая заготовка под ровно 596/560px, сжаться не могли
     вообще). flex-shrink переопределяется ОТДЕЛЬНО от шорткаста flex,
     остальные его части (grow:0, basis:596px/560px) не трогаем - basis
     остаётся "предпочтительным" размером, к которому строка стремится,
     сжатие включается только когда двум колонкам реально не хватает места. */
  .ll-hero__top {
    gap: 40px;
  }
  .ll-hero__copy,
  .ll-hero__media {
    flex-shrink: 1;
    min-width: 0;
  }

  .ll-feature,
  .ll-feature--reverse {
    gap: 40px;
  }

  /* см. тот же комментарий про safe zone в мобильном блоке ниже: обнулять
     эту сторону в 0 нельзя - это та же нода, что несёт базовый padding:0 20px
     контейнера, обнуление стирает safe zone целиком с одной стороны. На
     десктопе тут было 80/44px "про запас" под свободное место от
     space-between - в сжатом ряду это место съедает сама верстка сжатия,
     запас не нужен. */
  #feature-order .ll-feature {
    padding-right: 20px;
  }
  #feature-finance .ll-feature--reverse {
    padding-left: 20px;
  }

  .ll-feature__copy,
  .ll-feature__visual {
    flex-shrink: 1;
    min-width: 0;
  }

  /* ---------- Как начать ---------- */
  /* Тот же баг, но через CSS Grid — колонка "493px 1fr" не сжимается ниже
     493px (фикс-трек), а у голого "1fr" свой скрытый минимум
     (min-width:auto = min-content содержимого шагов) - та же причина, что
     уже чинили у .ll-stat на мобиле (см. комментарий там). minmax() снимает
     оба ограничения разом: левая колонка сжимается до 240px вместо жёстких
     493, правая (minmax(0,1fr), а не голый 1fr) сжимается ниже своего
     контента, не блокируя строку. Раскладка copy/steps/button остаётся
     ДВУХколоночной, как на десктопе - grid-template-areas не трогаем. */
  .ll-start {
    grid-template-columns: minmax(240px, 493px) minmax(0, 1fr);
    column-gap: 40px;
  }

  /* ---------- FAQ ---------- */
  /* .ll-faq__title - тот же flex-shrink:0 на фиксированных 493px, что и у
     копии Героя/блоков фич выше - тот же приём чинит: строка (заголовок
     слева, список вопросов справа) остаётся строкой, просто сжимаемой. */
  .ll-faq__title {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ================= Сжатие вместо переноса: 1024–1279.98px =================
   .ll-quick-card / .ll-industry-card / .ll-contact__form сегодня в flex-wrap
   рядах с фиксированной шириной (286px у карточек, max-width:511px у формы).
   С flex-wrap:wrap браузер решает, переносить строку или нет, ДО того, как
   считает сжатие — то есть при любой нехватке места ряд сразу переносится,
   сжатие (даже разрешённое flex-shrink) внутри непереносящейся строки не
   пробуется вовсе. Просили другое поведение: от 1280 до 1024px карточки/форма
   сжимаются в ОДНУ строку, перенос — только ниже 1024px (там уже включается
   штатный flex-wrap:wrap, его не трогаем, он и так корректно работал). Приём
   один и тот же везде: временно forcing flex-wrap:nowrap + разрешить сжатие
   на этом отрезке; вне него (десктоп ≥1280 и ≤1023.98) ряды не тронуты. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ll-quick__grid {
    flex-wrap: nowrap;
  }
  .ll-quick-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .ll-industries__grid {
    flex-wrap: nowrap;
  }
  .ll-industry-card {
    width: auto;
    height: auto;
    /* высота была жёсткой (420px) под ширину 286px - тот же исходный кроп
       286/420, просто теперь ширина плавает, а не запечённое число. */
    aspect-ratio: 286 / 420;
    flex: 1 1 0;
    min-width: 0;
  }

  /* .ll-contact сам - flex-wrap:wrap ряд (копия + форма); .ll-contact__form
     держит width:100% - это ПРАВИЛЬНО для перенесённого (wrap) состояния,
     где форма одна на своей строке и должна тянуться на всю ширину, но то
     же значение ломает совместное сжатие в общей строке (100% пытается
     занять всю строку целиком, а не поделить её с копией) - на этом отрезке
     возвращаем её к обычному предпочтительному размеру (max-width:511px,
     тот же, что и так был потолком) и включаем сжатие. */
  .ll-contact {
    flex-wrap: nowrap;
  }
  .ll-contact__copy {
    flex-shrink: 1;
    min-width: 0;
  }
  .ll-contact__form {
    width: auto;
    flex: 0 1 511px;
    min-width: 0;
  }
}

/* ================= Адаптив =================
   ОДИН брейкпоинт: 767.98px. Figma даёт только два состояния — 360px
   (мобайл, тянется резиново вверх до этой границы) и 1440px (десктоп).
   Планшетного промежуточного шага нет в дизайне (см. блок 768-1279.98
   выше — он чинит только геометрию, не переезжает на мобильную
   типографику/кропы) — эта часть остаётся как была. */

@media (max-width: 767.98px) {
  /* ---------- Общее ---------- */

  .cobiz-landing__container {
    padding: 0 20px;
  }

  /* "Mobile/H2" из Figma — один токен на ВСЕ заголовки секций (Подходит для /
     Отзывы / Как начать / Тарифы / FAQ / Остались вопросы), кроме героя и
     заголовков внутри блоков фич — у них свои классы, см. ниже. */
  .cobiz-landing__title {
    font-size: 28px;
    line-height: 1.16;
  }

  /* На мобиле CTA-кнопка везде на всю ширину: герой, блоки фич, "как начать",
     тарифы (там это уже было отдельным правилом), WhatsApp-кнопка контактов. */
  .cobiz-landing__btn {
    width: 100%;
  }

  /* Цветные секции (Зарплата/Финансы/Как начать/Контакты) на мобиле держат
     60px сверху/снизу вместо десктопных 112px. */
  .cobiz-landing__section--tint {
    padding: 60px 0;
  }

  /* Плавающая WhatsApp-кнопка — тот же safe zone 20px по бокам, что и у
     остального контента (десктопные 24px тут ни на что не завязаны, просто
     унаследованы). Снизу — тоже 20px база + запас под home indicator
     (тот же приём, что и в .ll-mobile-menu__body). Селектор с префиксом
     .cobiz-landing — иначе проигрывает по специфичности базовому правилу
     .cobiz-landing .whatsapp-fab (0,2,0 > 0,1,0), которое всегда бы
     побеждало независимо от порядка в файле/медиа-запроса. */
  .cobiz-landing .whatsapp-fab {
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Шапка ---------- */

  /* Фиксированный размер — НЕ уменьшается на скролле. Было 10px (подобрано
     под высоту lang-switch, 40px) — после того как lang-switch убрали
     (Правка №19), с тем же 10px шапка визуально "похудела": самым высоким
     элементом остался только лого/текст-ссылка, и 10px сверху/снизу стали
     смотреться слишком тонко. Поднято до 16px. Тень при скролле остаётся
     (правило .ll-header.is-scrolled{box-shadow:...} безусловное, вне
     медиа-запроса — здесь только гасим компактный padding из десктопного
     поведения). */
  .ll-header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .ll-header.is-scrolled .ll-header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Лого в шапке на мобиле меньше десктопного (2981:3255: 109×28, не 32) */
  .ll-header__logo {
    height: 28px;
  }

  .ll-header__nav {
    display: none;
  }

  .ll-header__right {
    gap: 16px;
  }

  .ll-header__cta {
    display: none;
  }

  /* «Войти» на мобиле - слева от бургера, простой текст 16px, как в шапке
     регистрации (signup_page.css); CTA «Попробовать бесплатно» - только в меню.
     Решение владельца 2026-10-12. Отступ до бургера - gap 16px у .ll-header__right. */
  .ll-header__login {
    display: inline-block;
    font-size: 16px;
  }

  .ll-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Иконка в Figma (2981:3266) обёрнута в контейнер 28×28, хотя сам SVG
     нарисован во viewBox 24×24 (собственные width/height атрибуты файла) —
     без этого переопределения иконка рендерилась мельче макета (24px). */
  .ll-header__burger svg {
    width: 28px;
    height: 28px;
  }

  /* ---------- Мобильное меню (M02 · Меню, 2997:2599 / 2999:2996) ----------
     Полноэкранный оверлей ПОВЕРХ ВСЕЙ страницы (в т.ч. шапки) со своей копией
     шапки внутри (.ll-mobile-menu__top: лого + lang-switch + крестик) —
     Bootstrap уже даёт .collapse{display:none} и .collapse.show{display:
     block}, здесь меняем display на flex для колоночной раскладки и
     позиционируем как отдельный полноэкранный слой. */
  /* Блокировка скролла фоновой страницы, пока открыто меню — класс вешает JS
     на show.bs.collapse/hidden.bs.collapse (welcome.html). Сам оверлей не
     запрещает скролл страницы ПОД собой (position:fixed этого не делает
     само по себе, особенно на инерционном тач-скролле iOS). */
  body.cobiz-landing.ll-menu-open {
    overflow: hidden;
  }

  .ll-mobile-menu.show {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    /* 100vh на Android Chrome считается по высоте окна БЕЗ адресной панели
       (максимальный возможный viewport) и не пересчитывается, когда панель
       появляется обратно — низ меню (кнопки "Войти"/"Попробовать бесплатно")
       уезжал за нижний край видимой области. 100dvh — динамическая единица,
       следует за РЕАЛЬНЫМ видимым viewport и на показ/скрытие адресной панели
       реагирует сама. vh оставлен строкой выше как фолбэк для браузеров без
       поддержки dvh (в них вторая строка просто игнорируется). */
    height: 100vh;
    height: 100dvh;
    background: var(--ll-white);
    /* выше плавающей WhatsApp-кнопки (z-index:1060, см. .whatsapp-fab) —
       иначе она просвечивает поверх нижней CTA-кнопки открытого меню */
    z-index: 1070;
    overflow-y: auto;
  }

  /* Bootstrap collapse по умолчанию анимирует высоту ~0.35s при закрытии
     (класс .collapsing на время перехода) — для полноэкранного оверлея это
     смотрелось как "зависание": меню странно схлопывалось, а переход по
     разделу ощутимо запаздывал относительно десктопа, где клик по тем же
     пунктам работает мгновенно (обычный переход по якорю). Глушим переход
     здесь — закрытие/открытие происходит без анимации, как на десктопе.
     ВАЖНО: .collapsing обязан остаться display:none (не просто "без
     transition") — .show это единственный класс, дающий position:fixed;
     без него на миг .collapsing превращался в обычный блочный элемент ПРЯМО
     В ПОТОКЕ документа (между <header> и <main>) и добавлял ~800px высоты
     ровно в момент вызова scrollIntoView — итоговый скролл считался по
     этой искажённой на миг раскладке и промахивался на сотни px мимо цели
     (поймано на прогоне: клик "Возможности" на мобиле улетал на -720px
     дальше цели). */
  .ll-mobile-menu.collapsing {
    transition: none;
    display: none;
  }

  .ll-mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* та же правка, что и у .ll-header__inner (Правка №20) — было 10px,
       подобрано под lang-switch (40px), которого здесь больше нет */
    padding: 16px 20px;
    border-bottom: 1px solid var(--ll-border);
  }

  .ll-mobile-menu__logo {
    height: 28px;
    /* без явного width:auto высота менялась (32px→28px), а ширина оставалась
       на интринсик-значении SVG (125px) — лого визуально растягивалось.
       width:auto пересчитывает ширину по реальной пропорции файла (125/32). */
    width: auto;
  }

  .ll-mobile-menu__top-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ll-mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .ll-mobile-menu__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    /* сверху 40px (2999:3004 в Figma), по бокам 20px, снизу — 20px + запас
       под системный home indicator/жестовую полосу (env safe-area), чтобы
       кнопка "Попробовать бесплатно" не пряталась под неё на iPhone. */
    padding: 40px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .ll-mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ll-mobile-menu__nav a {
    font-size: 20px;
    line-height: 1.4;
    color: var(--ll-text);
  }

  .ll-mobile-menu__divider {
    height: 1px;
    width: 100%;
    background: var(--ll-border);
  }

  .ll-mobile-menu__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .ll-mobile-menu__login {
    font-size: 20px;
    line-height: 1.4;
    color: var(--ll-text);
    text-align: center;
  }

  /* ---------- Герой ---------- */

  .ll-hero {
    /* высота шапки на мобиле 60px + 80px зазор (2981:3270 → 2981:3379 в Figma) */
    padding: 140px 0 0;
  }

  .ll-hero__top {
    flex-direction: column;
    gap: 80px;
  }

  .ll-hero__copy {
    max-width: 100%;
    flex-basis: auto;
    align-items: center;
    text-align: center;
  }

  .ll-hero__title {
    font-size: 32px;
    line-height: 1.24;
    margin-bottom: 12px;
  }

  .ll-hero__lead {
    max-width: 100%;
    text-align: center;
  }

  .ll-hero__cta-group {
    align-items: center;
    width: 100%;
  }

  /* Тот же слоистый визуал, что на десктопе (фото + 2 плашки, ассеты те же
     экспортированные части) — на мобиле только другой размер и позиции
     плашек, без отдельного флэттенного изображения. */
  .ll-hero__media {
    flex: 0 0 auto;
    /* На всю ширину safe zone, без потолка в 320px — на экранах шире 360px
       (390/414/430...) картинка должна тянуться вместе с контентом, а не
       упираться в фиксированный потолок с пустотами по бокам. */
    width: 100%;
    height: auto;
    /* пропорция сохранена как на десктопе (560/460 ≈ 320/262) */
    aspect-ratio: 320 / 262;
    margin: 0 auto;
  }

  .ll-hero__photo {
    border-radius: 16px;
  }

  .ll-hero__badge {
    height: 60px;
    border-radius: 12px;
  }

  .ll-hero__badge--salary {
    left: 12px;
    top: -28px;
    right: auto;
    bottom: auto;
  }

  .ll-hero__badge--order {
    right: 20px;
    bottom: -20px;
    left: auto;
    top: auto;
  }

  /* тот же расчёт, что и на десктопе (§ выше) — высота мобильной шапки
     измерена в 61px, 80px = высота + запас; тот же scroll-margin-top нужен
     и для scrollIntoView() из JS мобильного меню (он его учитывает) */
  #features,
  #review,
  #pricing,
  #faq {
    scroll-margin-top: 80px;
  }

  /* ---------- «С какой задачей вам помочь?» ---------- */

  .ll-quick__head {
    margin-bottom: 32px;
  }

  .ll-quick__grid {
    flex-direction: column;
    gap: 20px;
  }

  .ll-quick-card {
    width: 100%;
    max-width: 480px;
    gap: 24px;
  }

  .ll-quick-card__body {
    gap: 16px;
  }

  .ll-quick-card__info {
    gap: 4px;
  }

  /* ---------- Блоки фич (Заказ-наряды / Зарплата / Склад / Финансы) ---------- */

  .ll-feature,
  .ll-feature--reverse {
    flex-direction: column;
    gap: 0;
  }

  /* Десктопные #feature-order .ll-feature{padding-right:80px} и
     #feature-finance .ll-feature--reverse{padding-left:44px} (выше по файлу,
     держат отступ картинки от края СТРОКИ при flex+space-between) — эта же
     нода несёт класс .cobiz-landing__container с базовым padding:0 20px
     (safe zone), а более специфичный #id .class перебивает ТОЛЬКО ту
     сторону, что задаёт. На мобиле колонка уже не space-between, этот
     отступ не нужен — но обнулять его в 0 нельзя (грабля: так гасится ТА ЖЕ
     сторона safe zone, order/finance теряли боковой отступ целиком с одной
     стороны). Возвращаем именно к 20px — как у остальных трёх сторон. */
  #feature-order .ll-feature {
    padding-right: 20px;
  }
  #feature-finance .ll-feature--reverse {
    padding-left: 20px;
  }

  .ll-feature__copy {
    max-width: 100%;
    flex-basis: auto;
  }

  .ll-feature__title {
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 12px;
  }

  .ll-feature__list {
    max-width: 100%;
    margin-bottom: 12px;
  }

  .ll-feature__summary {
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
    margin-bottom: 24px;
  }

  #feature-salary .ll-feature__summary,
  #feature-warehouse .ll-feature__summary {
    margin-bottom: 0;
  }

  /* зазор копия → визуал у каждого блока свой (снят геометрически с
     мобильного фрейма, как и на десктопе) */
  #feature-order .ll-feature__copy {
    margin-bottom: 60px;
  }

  #feature-salary .ll-feature__copy,
  #feature-warehouse .ll-feature__copy,
  #feature-finance .ll-feature__copy {
    margin-bottom: 40px;
  }

  /* межблочные зазоры (снято с общего mobile-фрейма: Навигатор задач → Заказ-наряды
     108, дальше между блоками фич по 80, Финансы → Подходит для тоже 80) */
  #feature-order {
    margin-top: 108px;
  }

  #feature-salary,
  #feature-warehouse,
  #feature-finance {
    margin-top: 80px;
  }

  .ll-industries {
    margin-top: 80px;
  }

  #pricing {
    margin-top: 80px;
  }

  .ll-reviews {
    margin-top: 108px;
    margin-bottom: 108px;
  }

  #faq {
    margin-top: 108px;
  }

  #contact {
    margin-top: 108px;
  }

  /* Мобиле переиспользует ТЕ ЖЕ ассеты/слои, что и десктоп — никакой отдельной
     "мобильной" картинки. Меняются только размер контейнера и проценты
     позиций бейджей (сняты геометрически с мобильного фрейма Figma); тот же
     приём "контейнер с aspect-ratio + абсолютные слои в процентах", просто
     другие числа — владелец явно попросил не плодить параллельный набор
     изображений под каждый брейкпоинт, когда можно пересобрать те же части. */
  .ll-feature__visual--order,
  .ll-feature__visual--salary,
  .ll-feature__visual--warehouse,
  .ll-feature__visual--finance {
    /* На всю ширину safe zone, без потолка 320px — тот же принцип, что и у
       героя выше: на экранах шире 360px картинка должна тянуться вместе с
       контентом. Пропорции держат сами контейнеры (aspect-ratio ниже), а не
       фиксированная ширина. */
    width: 100%;
    margin: 0 auto;
  }

  .ll-feature__visual--order {
    aspect-ratio: 320 / 362;
  }
  .ll-feature__visual--order .ll-feature__visual-badge {
    left: 17.19%;
    top: -5.52%;
    width: 79.06%;
    height: 9.67%;
  }

  /* БЕЗ фиксированной height:246px — при её сочетании с шириной шире 320px
     (см. выше) картинка (реальные пропорции файла 2160×1656 ≈ 30:23) при
     таком же аспекте оказывалась ВЫШЕ контейнера, вылезала за его рамки, и
     видимый отступ до следующего блока схлопывался (проверено: на 418px
     контейнер меньше самой картинки). Высота у этого блока и не нужна была
     отдельно — здесь единственный слой без абсолютных детей, `img{height:
     auto}` (десктопное правило, не переопределено) сам держит пропорцию
     ровно как на десктопе, просто в более узкой колонке. */
  .ll-feature__visual--salary img {
    /* по замечанию владельца — 16px вместо десктопных 32px */
    border-radius: 16px;
  }

  .ll-feature__visual--warehouse {
    aspect-ratio: 1 / 1;
  }
  .ll-feature__visual--warehouse .ll-feature__visual-photo {
    left: 18.75%;
    top: 5.63%;
    width: 81.25%;
    height: 66.88%;
    /* мобильный слой площе десктопного (16 вместо 32) — сверено с Figma */
    border-radius: 16px;
  }
  .ll-feature__visual--warehouse .ll-feature__visual-badge--card {
    left: 0;
    top: 30.63%;
    width: 71.25%;
    height: 69.38%;
  }
  .ll-feature__visual--warehouse .ll-feature__visual-badge--tag {
    left: 33.13%;
    top: 0;
    width: 63.13%;
    height: 15%;
  }

  .ll-feature__visual--finance {
    aspect-ratio: 320 / 371;
  }
  .ll-feature__visual--finance .ll-feature__visual-badge--chart {
    left: 6.25%;
    top: 26.95%;
    width: 93.75%;
    height: 39.62%;
  }
  .ll-feature__visual--finance .ll-feature__visual-badge--card1 {
    left: 35%;
    top: 0;
    width: 60%;
    height: 33.42%;
  }
  .ll-feature__visual--finance .ll-feature__visual-badge--card2 {
    left: 0;
    top: 64.69%;
    width: 65%;
    height: 35.31%;
  }

  /* ---------- Подходит для + статистика ---------- */

  .ll-industries__title {
    margin-bottom: 32px;
  }

  .ll-industries__grid {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }

  .ll-industry-card {
    width: 100%;
    max-width: 480px;
    height: 252px;
  }

  .ll-industry-card__label {
    left: 20px;
    bottom: 20px;
  }

  .ll-stat__value {
    font-size: 32px;
    line-height: 1.24;
  }

  /* Мобильная раскладка статистики — НЕ простой column-stack: первые два
     стата стоят в ряд с вертикальным разделителем, третий — по центру во
     всю ширину под горизонтальным разделителем (снято геометрически с
     Figma). Раскладываем через grid по существующей разметке (nth-child),
     без правки HTML. */
  .ll-stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    row-gap: 24px;
    /* было 0 — цифры упирались прямо в разделитель без зазора */
    column-gap: 10px;
  }

  /* Десктопное .ll-stat{width:286px} (для старой flex-строки с 3 статами)
     здесь ломает сетку: даже в колонке "1fr" grid-item с явным width НЕ
     сжимается ниже этого значения (по умолчанию min-width:auto = его
     собственная явная ширина) — 286+1+286=573px раздувало .ll-stats далеко
     за пределы 320px контейнера (реальный баг с прошлого прогона: шапка
     "466.4px вместо всего экрана" — это была не шапка, а горизонтальный
     скролл всей страницы из-за этой раздутой строки статистики). Явно
     сбрасываем ширину и даём min-width:0, чтобы 1fr-колонки могли сжиматься. */
  .ll-stat {
    width: auto;
    min-width: 0;
  }

  .ll-stat:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .ll-stat-divider:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    width: 1px;
    height: auto;
    align-self: stretch;
  }

  .ll-stat:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .ll-stat-divider:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 1px;
  }

  .ll-stat:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }

  /* ---------- Отзывы ---------- */

  .ll-review-card {
    padding: 20px 20px 24px;
  }

  /* Мобильный порядок — name → company → stars (Figma 2981:3669/3672), НЕ
     name+stars в одну строку, как на десктопе. Разметка теперь плоская
     (.ll-review-card__top: name/stars/company — flex-соседи), поэтому
     порядок просто переставляется через order, без изменения HTML. */
  .ll-review-card__top {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
  }

  .ll-review-card__company {
    order: 2;
    flex-basis: auto;
    margin: 0;
  }

  .ll-review-card__stars {
    order: 3;
    /* 8px (row-gap) + 4px = 12px до company, как в Figma; ещё 12px ниже —
       до текста отзыва */
    margin-top: 4px;
    margin-bottom: 12px;
  }

  .ll-review-card__text {
    font-size: 16px;
  }

  .ll-carousel__viewport {
    max-width: 100%;
  }

  /* Стрелки на мобиле не по бокам вьюпорта, а в ряд под карточкой. Вьюпорт
     принудительно переносится на свою строку через flex-basis:100% (classic
     flex-wrap trick) — без правки разметки (viewport остаётся первым в DOM
     между кнопками, только визуально переставляется через order). Grid тут
     не подходит: явная ширина колонок под кнопки (44px) схлопывала и
     растянутый на них же вьюпорт до тех же 44+44+gap px. */
  .ll-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    row-gap: 24px;
  }

  .ll-carousel__viewport {
    order: 1;
    flex: 1 1 100%;
    max-width: 100%;
  }

  .ll-carousel__nav {
    order: 2;
  }

  /* ---------- Как начать ---------- */

  /* Одна колонка: copy → steps → button (кнопка теперь отдельный грид-
     элемент, стоит физически ПОСЛЕ .ll-start__steps в разметке — просто
     остаётся последней в потоке, area переопределять не нужно). */
  .ll-start {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "steps" "button";
    row-gap: 24px;
    column-gap: 0;
  }

  .ll-start__copy {
    max-width: 100%;
  }

  .ll-start__copy p {
    margin: 12px 0 0;
  }

  .ll-start__steps {
    gap: 16px;
  }

  .ll-start__btn {
    /* 24px (row-gap) + 8px = 32px до кнопки, как просили — row-gap единый
       на весь грид, точечная добавка только здесь */
    margin-top: 8px;
    /* на десктопе justify-self:start (кнопка по контенту) — на мобиле
       возвращаем растяжение на всю ширину колонки, иначе унаследованное
       start обнулит эффект от .cobiz-landing__btn{width:100%} */
    justify-self: stretch;
  }

  .ll-start-step {
    padding: 16px;
    gap: 16px;
  }

  .ll-start-step__text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.48;
  }

  /* ---------- FAQ ---------- */

  .ll-faq {
    flex-direction: column;
    gap: 24px;
  }

  .ll-faq__title {
    position: static;
    max-width: 100%;
    flex-basis: auto;
  }

  .ll-faq__list {
    max-width: 100%;
  }

  .ll-faq-item__q {
    font-size: 20px;
    line-height: 1.4;
  }

  /* ---------- Контакты («Остались вопросы?») ---------- */

  #contact .cobiz-landing__container {
    max-width: 100%;
    padding: 0;
  }

  .ll-contact {
    flex-direction: column;
    border-radius: 0;
    padding: 60px 20px;
    gap: 40px;
  }

  .ll-contact__copy {
    padding-top: 0;
    max-width: 100%;
  }

  .ll-contact__form {
    /* та же логика, что и у .ll-pricing-card — не по макету (там 20px со
       всех сторон), но так правильнее, по прямому решению владельца */
    padding: 24px 16px 16px 16px;
    gap: 20px;
    max-width: 100%;
  }

  .ll-contact__field label {
    font-size: 16px;
  }

  /* ---------- Тарифы ---------- */

  .ll-pricing__title {
    margin-bottom: 32px;
  }

  .ll-pricing-card {
    width: 100%;
    max-width: 480px;
    /* не по макету (там 28/20/20), но так правильнее — по прямому решению
       владельца */
    padding: 24px 16px 16px 16px;
  }

  /* ---------- Подвал ---------- */

  .ll-footer {
    /* на мобиле "Контакты" (тинт) и подвал (тёмный) стоят впритык — светлого
     зазора между ними в Figma нет, весь воздух даёт padding-top подвала. */
    margin-top: 0;
    padding: 60px 0 24px;
  }

  .ll-footer__top {
    flex-direction: column;
    /* brand → columns и (внутри columns) col → col — везде 40px */
    gap: 40px;
    padding-bottom: 40px;
  }

  .ll-footer__columns {
    flex-direction: column;
    gap: 40px;
  }

  .ll-footer__col,
  .ll-footer__brand {
    width: 100%;
    max-width: 320px;
    flex-basis: auto;
  }

  .ll-footer__col {
    /* Телефон/E-mail/WhatsApp (и График/Адрес) — 24px вместо десктопных 32px */
    gap: 24px;
  }

  .ll-footer__whatsapp {
    /* десктопное margin-top:8px складывалось с gap:24px колонки (24+8=32) —
       на мобиле весь зазор уже даёт gap, свой margin тут не нужен */
    margin-top: 0;
  }

  .ll-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-top: none;
    padding-top: 0;
  }

  /* Порядок в DOM — copyright, затем links (десктопная space-between строка:
     copyright слева, links справа) — на мобиле нужен обратный визуальный
     порядок (сначала ссылки, копирайт последним), меняем через order, не
     трогая разметку. */
  .ll-footer__links {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ll-footer__links a {
    font-size: 16px;
  }

  .ll-footer__copyright {
    order: 2;
    width: 100%;
    text-align: center;
  }
}