/* ===========================================================
   Аренда Плюс — выездные мастер-классы. Блоки.
   Токены и каркас — base.css. Мобильные правила — только
   в @media в конце файла, не вперемешку.
   Кнопки-<button> писать через .mkl-root: сброс
   .mkl-root button{background:none;border:0} специфичнее
   одиночного класса и иначе гасит заливку.
   =========================================================== */

/* ─────────────── 01 · ПЕРВЫЙ ЭКРАН ───────────────
   Хиро и доказательства живут на одной серой плашке: без неё
   в скруглениях баннера просвечивал белый. */
.mkl-top{
  background:var(--mkl-surface-page);
  border-radius:0 0 32px 32px;
  overflow:hidden;
}

.mkl-hero{
  position:relative;
  background:var(--mkl-ink);
  color:#fff;
  border-radius:0 0 32px 32px;
  overflow:hidden;
}
.mkl-root .mkl-hero__bg{
  position:absolute;inset:0;
  object-fit:cover;width:100%;height:100%;
  object-position:60% 50%;
  opacity:.7;
}
.mkl-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(49,45,43,.94) 0%,rgba(49,45,43,.86) 38%,rgba(49,45,43,.5) 70%,rgba(49,45,43,.3) 100%);
}
.mkl-hero__inner{position:relative;padding:88px 0 88px;max-width:860px}
.mkl-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;line-height:18px;font-weight:var(--mkl-fw-medium);
  padding:6px 12px;border-radius:var(--mkl-radius-pill);
  background:rgba(255,255,255,.12);color:#fff;margin-bottom:20px;
}
/* Заголовок первого экрана — одна фраза, но в h1 уходит только ключевая
   часть: продолжение лежит соседним абзацем и выведено inline, поэтому
   визуально это по-прежнему один заголовок в одну строку. */
.mkl-hero__title{
  font-family:var(--mkl-font-head);
  font-size:40px;line-height:48px;font-weight:var(--mkl-fw-medium);
  letter-spacing:-.02em;color:#fff;margin-bottom:20px;
}
.mkl-hero h1,
.mkl-hero__claim{display:inline;font:inherit;letter-spacing:inherit;color:inherit;margin:0}
.mkl-hero__hl{color:var(--mkl-accent)}
.mkl-hero__sub{font-size:18px;line-height:28px;color:rgba(255,255,255,.78);max-width:640px}
.mkl-proof{padding:28px 0 36px}
.mkl-proof__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.mkl-proof__item{position:relative;padding-top:16px}
.mkl-proof__item::before{
  content:'';position:absolute;left:0;top:0;
  width:28px;height:3px;border-radius:2px;background:var(--mkl-accent);
}
.mkl-proof__item b{
  display:block;font-family:var(--mkl-font-head);
  font-size:16px;line-height:22px;font-weight:var(--mkl-fw-medium);
  color:var(--mkl-ink);margin-bottom:4px;
}
/* Серый, но не .5 от чернил: на #F6F6F6 это уходит за границу
   читаемости. .62 даёт визуально тот же приглушённый тон и ~5:1. */
.mkl-proof__item span{
  display:block;font-size:14px;line-height:20px;color:rgba(49,45,43,.62);
}
.mkl-hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.mkl-root .mkl-hero__acts .mkl-btn--ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.3);
}
.mkl-root .mkl-hero__acts .mkl-btn--ghost:hover{border-color:#fff;color:#fff}

/* ─────────────── 02 · ЛИД-АБЗАЦ ───────────────
   Первый текстовый блок в DOM. Плитки категорий выше него
   быть не должно: робот берёт первый связный текст в сниппет. */
.mkl-leadblock{padding:40px 0 8px}
.mkl-leadblock p{font-size:18px;line-height:28px;max-width:860px;color:var(--mkl-ink)}
.mkl-leadblock p + p{margin-top:16px}
.mkl-intro{max-width:860px;margin-top:8px}
.mkl-intro{font-size:18px;line-height:28px;color:var(--mkl-text-secondary)}
.mkl-intro + .mkl-intro{margin-top:14px}

/* ─────────────── 03 · КАЛЬКУЛЯТОР ───────────────
   Ответ сверху во всю ширину, ввод под ним, одна геометрия на десктоп
   и мобильный. Раньше ответ стоял справа: на мобильном правая колонка
   становится нижней, и число уезжало на два экрана от чипов —
   человек тапал и не видел отклика. */

/* Десктоп — две колонки в один ряд: слева ввод, справа результат.
   Обе полосы по отдельности наполовину пустые, а вместе занимают
   две ширины экрана.
   В РАЗМЕТКЕ результат идёт ПЕРВЫМ и трогать этот порядок нельзя:
   на мобильном колонки схлопываются в одну, и результат обязан
   оказаться над вводом. Иначе между чипом и суммой снова окажется
   полтора экрана, человек тапнет и не увидит отклика. Поэтому
   местами их меняет grid-column, а не порядок узлов. */
.mkl-calc{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:16px;align-items:start;
}
.mkl-calc__out{grid-column:2}
.mkl-calc__form{grid-column:1;grid-row:1}

/* ── карточка ответа ── */
.mkl-calc__out{
  background:var(--mkl-ink);color:#fff;
  border-radius:var(--mkl-radius-lg);padding:28px;
  position:sticky;top:96px;
}
.mkl-calc__answer{
  font-family:var(--mkl-font-head);
  font-size:24px;line-height:32px;font-weight:var(--mkl-fw-medium);
  letter-spacing:-.01em;
}
.mkl-calc__answer b{color:var(--mkl-accent-soft);font-weight:var(--mkl-fw-medium)}
.mkl-calc__why{
  margin-top:10px;font-size:15px;line-height:22px;color:rgba(255,255,255,.6);
  max-width:620px;
}

.mkl-calc__total{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
}
.mkl-calc__total-sum{
  font-family:var(--mkl-font-head);
  font-size:40px;line-height:48px;font-weight:var(--mkl-fw-medium);
  font-variant-numeric:tabular-nums;
}
.mkl-calc__total-per{font-size:16px;line-height:24px;color:rgba(255,255,255,.7)}
.mkl-calc__total-per span{color:rgba(255,255,255,.4)}

/* подсказка про лишний час — не текст, а действие: она несёт главную мысль
   страницы и срабатывает примерно в четверти расчётов */
.mkl-root .mkl-calc__tip{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:10px 16px;border-radius:var(--mkl-radius-pill);
  background:rgba(254,93,38,.18);border:1px solid rgba(254,93,38,.34);
  color:#fff;font-size:14px;line-height:20px;text-align:left;cursor:pointer;
  transition:background-color var(--mkl-transition);
}
.mkl-root .mkl-calc__tip:hover{background:rgba(254,93,38,.3)}

.mkl-calc__breakdown{margin-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.mkl-root .mkl-calc__breakdown summary{
  padding:14px 0 0;font-size:14px;line-height:20px;color:rgba(255,255,255,.6);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
}
.mkl-calc__breakdown summary::-webkit-details-marker{display:none}
.mkl-calc__breakdown summary::after{
  content:'';width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;
}
.mkl-calc__breakdown[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.mkl-calc__breakdown summary:hover{color:#fff}
.mkl-calc__rows{margin-top:8px}
.mkl-calc__rows li{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14px;line-height:20px;
}
.mkl-calc__rows li:last-child{border-bottom:0}
.mkl-calc__row-name{font-weight:var(--mkl-fw-medium)}
.mkl-calc__row-meta{grid-column:1;font-size:12px;color:rgba(255,255,255,.4)}
.mkl-calc__row-sum{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.mkl-calc__rows li.mkl-calc__row--minus .mkl-calc__row-sum{color:var(--mkl-success)}

.mkl-calc__acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.mkl-root .mkl-calc__acts .mkl-btn--ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.3);
}
.mkl-root .mkl-calc__acts .mkl-btn--ghost:hover{border-color:#fff;color:#fff}
.mkl-calc__note{margin-top:16px;font-size:12px;line-height:18px;color:rgba(255,255,255,.4)}

/* ── ввод: три ряда «подпись — чипы» ── */
.mkl-calc__form{
  background:var(--mkl-surface-card);border:var(--mkl-border);
  border-radius:var(--mkl-radius-lg);padding:20px 24px;
}
.mkl-row{
  display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;
  padding:12px 0;
}
.mkl-row:has(.mkl-row__hint){grid-template-columns:1fr;gap:10px;align-items:start}
.mkl-row + .mkl-row{border-top:1px solid var(--mkl-border-soft)}
.mkl-row--themes{grid-template-columns:1fr;gap:10px;align-items:start}
.mkl-row__hint{
  display:block;margin-top:2px;font-size:12px;line-height:16px;
  font-weight:400;color:var(--mkl-text-muted);
}
.mkl-row__label{
  font-size:14px;line-height:20px;font-weight:var(--mkl-fw-medium);
  color:var(--mkl-text-secondary);
}
.mkl-chips{display:flex;gap:8px;flex-wrap:wrap}
.mkl-root .mkl-chip{
  height:46px;padding:0 18px;border-radius:var(--mkl-radius-pill);
  border:1px solid var(--mkl-border-color);background:var(--mkl-surface-card);
  font-size:14px;line-height:20px;color:var(--mkl-ink);cursor:pointer;
  transition:border-color var(--mkl-transition),background-color var(--mkl-transition),
    color var(--mkl-transition);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.mkl-root .mkl-chip:hover{border-color:var(--mkl-accent)}
.mkl-root .mkl-chip.mkl-on{background:var(--mkl-ink);border-color:var(--mkl-ink);color:#fff}
.mkl-chip small{font-size:12px;opacity:.55}
.mkl-root .mkl-chip--input{
  width:82px;padding:0 12px;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* Тема в две строки: название и под ним пропускная способность словами.
   «50 чел./час» одной строкой не читалось — непонятно, к чему число. */
.mkl-root .mkl-chip--two{
  height:auto;padding:8px 18px;flex-direction:column;
  align-items:flex-start;gap:1px;text-align:left;
}
.mkl-chip__name{font-size:14px;line-height:20px;font-weight:var(--mkl-fw-medium)}
.mkl-chip__cap{font-size:12px;line-height:16px;color:var(--mkl-text-secondary)}
.mkl-root .mkl-chip--two.mkl-on .mkl-chip__cap{color:rgba(255,255,255,.6)}
.mkl-root .mkl-chip[hidden]{display:none}
.mkl-root .mkl-chip--input::placeholder{color:var(--mkl-text-muted)}
.mkl-root .mkl-chip--input:focus{outline:0;border-color:var(--mkl-accent);box-shadow:var(--mkl-shadow-focus)}
.mkl-chip--input::-webkit-outer-spin-button,
.mkl-chip--input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mkl-check{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}

/* ── «Уточнить» ── */
.mkl-more{margin-top:8px;border-top:1px solid var(--mkl-border-soft)}
.mkl-root .mkl-more > summary{
  padding:16px 0 4px;font-size:14px;line-height:20px;color:var(--mkl-accent);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
}
.mkl-more > summary::-webkit-details-marker{display:none}
.mkl-more > summary::after{
  content:'';width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;
}
.mkl-more[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.mkl-more__body{padding-top:4px}

/* ─────────────── 04 · ИЗ ЧЕГО СКЛАДЫВАЕТСЯ СМЕТА ───────────────
   Пять карточек вместо двух списков: строки прайса читаются
   поштучно, а не как договор мелким шрифтом. */

/* ─────────────── 04 · СВОЁ БЮРО ─────────────── */
.mkl-byuro{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--mkl-space-10);align-items:center;
}
.mkl-root .mkl-byuro__video{
  width:100%;height:auto;display:block;border-radius:var(--mkl-radius-lg);
  background:var(--mkl-surface-placeholder);
}
.mkl-byuro__text .mkl-intro{max-width:none}
.mkl-tocalc--left{justify-content:flex-start;margin-top:var(--mkl-space-6)}

/* ─────────────── 05 · КАТАЛОГ ─────────────── */
.mkl-cat__filters{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.mkl-cat__fgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mkl-cat__fgroup > span{font-size:13px;color:var(--mkl-text-secondary)}
.mkl-cat__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mkl-grid-gap);
}
.mkl-cat__grid > :nth-child(n+13){display:none}
/* :not([hidden]) — отбор прячет чужие карточки атрибутом, и без этой оговорки
   «Показать все» возвращало их обратно на экран */
.mkl-cat__grid.mkl-full > :nth-child(n+13):not([hidden]){display:flex}

.mkl-tile{
  display:flex;flex-direction:column;
  border:var(--mkl-border);border-radius:var(--mkl-radius-lg);
  overflow:hidden;background:var(--mkl-surface-card);
  transition:box-shadow var(--mkl-transition),border-color var(--mkl-transition);
}
.mkl-tile:hover{box-shadow:var(--mkl-shadow-hover);border-color:transparent}
.mkl-root .mkl-tile__img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;background:var(--mkl-surface-placeholder)}
.mkl-tile__body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.mkl-tile__name{font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium)}
.mkl-tile__price{
  font-size:16px;line-height:24px;font-weight:var(--mkl-fw-semibold);
  color:var(--mkl-accent-hover);
}
.mkl-tile__price small{font-weight:400;color:var(--mkl-text-muted);font-size:13px}
.mkl-tile__meta{font-size:13px;line-height:18px;color:var(--mkl-text-secondary);margin-top:auto}
.mkl-cat__more,
.mkl-tocalc{display:flex;justify-content:center;gap:var(--mkl-space-3);flex-wrap:wrap;margin-top:24px}

/* ─────────────── 06 · ЧТО ДЕЛАЕМ МЫ / ЧТО ОТ ВАС ─────────────── */
.mkl-scope__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mkl-scope__col{
  border-radius:var(--mkl-radius-lg);padding:24px;border:var(--mkl-border);
}
.mkl-section--dark .mkl-scope__col{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
}
.mkl-section--dark .mkl-scope__col--we{
  background:var(--mkl-accent);border-color:transparent;
}
.mkl-section--dark .mkl-list li::before{border-color:#fff}
.mkl-scope__col--we{background:var(--mkl-accent-tint);border-color:transparent}
.mkl-scope__col h3{font-family:var(--mkl-font-head);font-size:20px;line-height:28px;font-weight:var(--mkl-fw-semibold);margin-bottom:16px}
.mkl-list li{
  position:relative;padding-left:26px;font-size:15px;line-height:24px;
}
.mkl-list li + li{margin-top:10px}
.mkl-list li::before{
  content:'';position:absolute;left:0;top:9px;width:14px;height:6px;
  border-left:2px solid var(--mkl-accent);border-bottom:2px solid var(--mkl-accent);
  transform:rotate(-45deg);border-radius:1px;
}

/* ─────────────── 06a · ПРИВЕЗЁМ ВСЁ ─────────────── */
.mkl-kit__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mkl-grid-gap)}
.mkl-root .mkl-kit__item{
  display:flex;flex-direction:column;padding:20px;color:var(--mkl-ink);
  background:var(--mkl-surface-card);border:var(--mkl-border);border-radius:var(--mkl-radius-lg);
  transition:box-shadow var(--mkl-transition),border-color var(--mkl-transition);
}
.mkl-root .mkl-kit__item:hover{box-shadow:var(--mkl-shadow-hover);border-color:transparent}
.mkl-kit__item:hover b{color:var(--mkl-accent-hover)}
.mkl-kit__ico,
.mkl-docs__ico{
  width:40px;height:40px;border-radius:var(--mkl-radius-md);
  background:var(--mkl-accent-tint);color:var(--mkl-accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.mkl-kit__ico svg,
.mkl-docs__ico svg{width:22px;height:22px}
.mkl-kit__item b{font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium);margin-bottom:6px}
.mkl-kit__item span:last-child{font-size:14px;line-height:20px;color:var(--mkl-text-secondary)}

/* ─────────────── 07 · ПРОПУСКНАЯ СПОСОБНОСТЬ ─────────────── */
.mkl-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mkl-table th,.mkl-table td{
  text-align:left;padding:14px 12px;border-bottom:1px solid var(--mkl-border-color);
  font-size:15px;line-height:22px;
}
.mkl-table th{
  font-size:13px;line-height:18px;font-weight:var(--mkl-fw-medium);
  color:var(--mkl-text-secondary);border-bottom-width:1px;
}
.mkl-table td:first-child{font-weight:var(--mkl-fw-medium);width:24%}
/* Отступ справа у колонки с полоской: цифра стоит сразу за полоской и
   при полной длине наезжала на соседнюю колонку. Полоски считают
   проценты от суженного бокса, так что пропорции не едут. */
.mkl-table td:nth-child(2){width:36%;padding-right:68px}
.mkl-table td.mkl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Полоска делает пятикратный разброс видимым без чтения цифр —
   ради этого разброса вся страница и затевалась. */
.mkl-flow{display:flex;align-items:center;gap:10px}
.mkl-flow__line{
  height:8px;border-radius:var(--mkl-radius-pill);
  background:var(--mkl-accent);flex:none;min-width:8px;
}
.mkl-flow__val{font-variant-numeric:tabular-nums;white-space:nowrap}
.mkl-table tr:hover td{background:var(--mkl-surface-sunken)}
.mkl-table__wrap{overflow-x:auto}


/* ─────────────── 08 · ФОРМАТЫ ВЖИВУЮ ───────────────
   Единственный блок, где фотография ведёт, а текст идёт следом.
   Две плитки из шести — широкие: ритм внутри сетки, чтобы шесть
   одинаковых прямоугольников не читались как ещё одна таблица. */
.mkl-live{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--mkl-grid-gap);
}
/* Подпись стоит ПОД фотографией, а не поверх: в узкой плитке текст
   поверх кадра закрывал сам кадр и читался плохо на светлых снимках. */
.mkl-live__item{
  margin:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--mkl-radius-lg);
  background:var(--mkl-surface-card);border:var(--mkl-border);
  transition:box-shadow var(--mkl-transition),border-color var(--mkl-transition);
}
.mkl-live__item:hover{box-shadow:var(--mkl-shadow-hover);border-color:transparent}
.mkl-live__item--wide{grid-column:span 2}
/* Высота кадра одна на весь ряд: у широкой плитки пропорция 8/3 давала
   лишние несколько пикселей, и низ фотографий в ряду не совпадал. */
.mkl-root .mkl-live__item img{
  width:100%;height:clamp(170px,17.6vw,236px);object-fit:cover;
  background:var(--mkl-surface-placeholder);
}
.mkl-live__item figcaption{padding:16px 18px 18px}
.mkl-live__item figcaption b{
  display:block;font-family:var(--mkl-font-head);
  font-size:17px;line-height:24px;font-weight:var(--mkl-fw-medium);
  color:var(--mkl-ink);margin-bottom:6px;
}
.mkl-live__item figcaption span{
  font-size:14px;line-height:20px;color:var(--mkl-text-secondary);
}

/* ─────────────── РАЗБИВКА С ФОРМОЙ ───────────────
   Кадр во всю ширину, затемнение по всему кадру и форма прямо на нём.
   Конвенция кейтеринга: там же живут поля .mkl-field__control. */
.mkl-band{position:relative;height:56vh;min-height:470px;overflow:hidden;background:var(--mkl-ink)}
.mkl-root .mkl-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mkl-band::after{content:"";position:absolute;inset:0;background:var(--mkl-scrim)}
.mkl-band__in{
  position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;
  justify-content:space-between;gap:var(--mkl-space-8);padding-bottom:var(--mkl-space-10);
}
.mkl-band__text{color:#fff;max-width:620px}
.mkl-band__title{
  font-family:var(--mkl-font-head);font-size:32px;line-height:40px;
  font-weight:var(--mkl-fw-medium);letter-spacing:-.02em;
}
.mkl-band__text p{font-size:17px;line-height:26px;color:rgba(255,255,255,.8);margin-top:var(--mkl-space-3)}
.mkl-band__form,
.mkl-band__done{
  flex:0 0 340px;padding:var(--mkl-space-5);border-radius:var(--mkl-radius-lg);
  background:rgba(49,45,43,.82);backdrop-filter:blur(10px);color:#fff;
}
.mkl-band__form{display:flex;flex-direction:column;gap:var(--mkl-space-2)}
.mkl-band__form-t{font-size:15px;line-height:22px;font-weight:var(--mkl-fw-medium);margin-bottom:var(--mkl-space-1)}
.mkl-band__form .mkl-field__control{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.mkl-band__form .mkl-field__control::placeholder{color:rgba(255,255,255,.45)}
.mkl-band__form .mkl-field__control:focus{background:rgba(255,255,255,.12);border-color:var(--mkl-accent)}
.mkl-band__form .mkl-field__control.mkl-bad{border-color:var(--mkl-error)}
/* иконка календаря у поля даты рисуется тёмной — на тёмной форме её
   не видно, поэтому инвертируем */
.mkl-band__form input[type="date"]::-webkit-calendar-picker-indicator,
.mkl-final__form input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
.mkl-band__done{display:flex;gap:var(--mkl-space-3);align-items:flex-start;font-size:14px;line-height:20px;color:rgba(255,255,255,.75)}
.mkl-band__done b{display:block;font-size:16px;line-height:24px;color:#fff;font-weight:var(--mkl-fw-medium);margin-bottom:2px}
.mkl-band__done-ico{
  flex:0 0 auto;width:28px;height:28px;border-radius:var(--mkl-radius-full);
  background:var(--mkl-success);display:flex;align-items:center;justify-content:center;
}
.mkl-band__done-ico svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ─────────────── ЛЕНТА КАДРОВ ───────────────
   Высота у всех кадров одна, ширина своя — вертикальные снимки не режем.
   Лента живёт внутри контейнера: иначе полоса прокрутки тянулась во всю
   ширину экрана, а кадры начинались по сетке макета. */
.mkl-strip{
  display:flex;gap:var(--mkl-grid-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;cursor:grab;
  scrollbar-color:var(--mkl-border-color) transparent;
  padding-bottom:var(--mkl-space-4);
}
.mkl-root .mkl-strip img{
  flex:0 0 auto;height:360px;width:auto;max-width:none;
  border-radius:var(--mkl-radius-lg);
  background:var(--mkl-surface-placeholder);
}
/* тянем ленту левой кнопкой: курсор и запрет выделения — половина ощущения */
.mkl-strip.mkl-drag{cursor:grabbing}
.mkl-root .mkl-strip img{cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.mkl-strip::-webkit-scrollbar{height:6px}
.mkl-strip::-webkit-scrollbar-track{background:transparent}
.mkl-strip::-webkit-scrollbar-thumb{background:var(--mkl-border-color);border-radius:var(--mkl-radius-pill)}
.mkl-strip::-webkit-scrollbar-thumb:hover{background:var(--mkl-accent-soft)}

/* ─────────────── ПОПАП КАДРА ─────────────── */
.mkl-lb{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,17,.93);padding:48px;
}
.mkl-root .mkl-lb__img{
  max-width:calc(100% - 120px);max-height:100%;width:auto;height:auto;
  border-radius:var(--mkl-radius-md);cursor:default;
}
.mkl-root .mkl-lb button{position:absolute;color:#fff;padding:0}
.mkl-lb__close{top:16px;right:20px;width:44px;height:44px}
.mkl-lb__close::before,
.mkl-lb__close::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;background:currentColor}
.mkl-lb__close::before{transform:rotate(45deg)}
.mkl-lb__close::after{transform:rotate(-45deg)}
.mkl-lb__nav{
  top:50%;margin-top:-22px;width:44px;height:44px;border-radius:var(--mkl-radius-full);
  background:rgba(255,255,255,.12);transition:background var(--mkl-transition);
}
.mkl-lb__nav:hover{background:rgba(255,255,255,.22)}
.mkl-lb__nav::before{
  content:"";position:absolute;top:15px;width:12px;height:12px;
  border-left:2px solid currentColor;border-top:2px solid currentColor;
}
.mkl-lb__nav--prev{left:16px}
.mkl-lb__nav--prev::before{left:17px;transform:rotate(-45deg)}
.mkl-lb__nav--next{right:16px}
.mkl-lb__nav--next::before{left:12px;transform:rotate(135deg)}

/* ─────────────── 09 · КЕЙСЫ ─────────────── */
.mkl-cases__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;gap:var(--mkl-grid-gap);
}
.mkl-case{
  display:grid;grid-template-columns:200px 1fr;gap:20px;
  border:var(--mkl-border);border-radius:var(--mkl-radius-lg);
  overflow:hidden;background:var(--mkl-surface-card);
}
.mkl-root .mkl-case__img{width:100%;height:100%;object-fit:cover;min-height:180px}
.mkl-case__body{padding:20px 20px 20px 0;display:flex;flex-direction:column;gap:10px}
.mkl-case__name{
  font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium);
  min-height:48px;
}
.mkl-case__nums{display:flex;gap:20px;flex-wrap:wrap;margin-top:auto}
.mkl-case__num b{display:block;font-size:18px;line-height:26px;font-weight:var(--mkl-fw-medium)}
.mkl-case__num span{font-size:12px;line-height:16px;color:var(--mkl-text-secondary)}

/* ─────────────── 10 · СВОЯ ПЛОЩАДКА ─────────────── */
.mkl-venue{background:var(--mkl-ink);color:#fff;border-radius:var(--mkl-radius-lg)}
.mkl-venue__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mkl-grid-gap);margin-top:24px}
.mkl-venue__item{
  padding:20px;border-radius:var(--mkl-radius-md);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
}
.mkl-venue__item b{display:block;font-size:16px;line-height:24px;margin-bottom:6px}
.mkl-venue__item span{font-size:14px;line-height:20px;color:rgba(255,255,255,.6)}
.mkl-venue__cap{
  display:inline-block;margin-bottom:10px;padding:4px 10px;
  border-radius:var(--mkl-radius-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:var(--mkl-accent-soft);
  font-size:13px;font-weight:var(--mkl-fw-medium);
}

/* ─────────────── 11 · ДЛЯ БУХГАЛТЕРИИ ─────────────── */
.mkl-docs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mkl-grid-gap)}
.mkl-docs__item{
  padding:20px;border:var(--mkl-border);border-radius:var(--mkl-radius-md);
  background:var(--mkl-surface-card);
}
.mkl-docs__item b{display:block;font-size:16px;line-height:24px;margin-bottom:6px}
.mkl-docs__item span{font-size:14px;line-height:20px;color:var(--mkl-text-secondary)}
/* иконка тоже span, и правило выше её перекрашивало */
.mkl-docs__item .mkl-docs__ico{color:var(--mkl-accent)}

/* ─────────────── 13 · КАК ПРОХОДИТ ─────────────── */
.mkl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mkl-grid-gap)}
.mkl-step__n{
  width:36px;height:36px;border-radius:var(--mkl-radius-full);
  background:var(--mkl-accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:var(--mkl-fw-medium);margin-bottom:12px;
}
.mkl-step b{display:block;font-size:16px;line-height:24px;margin-bottom:6px}
.mkl-step span{font-size:14px;line-height:20px;color:var(--mkl-text-secondary)}

/* ─────────────── 16 · FAQ ─────────────── */
.mkl-faq{display:flex;flex-direction:column}
.mkl-faq__item{border-bottom:1px solid var(--mkl-border-color)}
.mkl-root .mkl-faq__item summary{
  list-style:none;cursor:pointer;position:relative;padding:20px 40px 20px 0;
  font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium);
}
.mkl-faq__item summary::-webkit-details-marker{display:none}
.mkl-faq__item summary:hover{color:var(--mkl-accent)}
.mkl-faq__item summary::after{
  content:"";position:absolute;right:8px;top:28px;width:8px;height:8px;
  border-right:2px solid var(--mkl-text-secondary);border-bottom:2px solid var(--mkl-text-secondary);
  transform:rotate(45deg);transition:transform var(--mkl-transition);
}
.mkl-faq__item[open] summary::after{transform:rotate(-135deg);top:32px}
.mkl-faq__a{padding:0 40px 20px 0}
.mkl-faq__a p{font-size:15px;line-height:23px;color:var(--mkl-text-secondary)}

/* ─────────────── 17 · ПЕРЕЛИНКОВКА ─────────────── */
.mkl-tags{display:flex;gap:10px;flex-wrap:wrap}
.mkl-tags a{
  display:inline-flex;height:44px;align-items:center;padding:0 20px;
  border-radius:var(--mkl-radius-pill);
  border:1px solid var(--mkl-accent-soft);background:var(--mkl-accent-tint);
  color:var(--mkl-accent-hover);
  font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium);
}
.mkl-tags a:hover{border-color:var(--mkl-accent);background:var(--mkl-accent);color:#fff}
/* первая пилюля ведёт во весь каталог — её видно сразу */
.mkl-root .mkl-tags__all{background:var(--mkl-accent);border-color:var(--mkl-accent);color:#fff}
.mkl-root .mkl-tags__all:hover{background:var(--mkl-accent-hover);border-color:var(--mkl-accent-hover)}

/* ─────────────── 18 · ФИНАЛЬНАЯ ФОРМА ─────────────── */
.mkl-final__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:var(--mkl-space-10);align-items:start;
}
.mkl-final__facts{display:flex;flex-direction:column;gap:var(--mkl-space-4);margin-top:var(--mkl-space-8)}
.mkl-final__facts li{display:flex;align-items:baseline;gap:var(--mkl-space-3)}
.mkl-final__facts b{
  font-size:20px;line-height:28px;font-weight:var(--mkl-fw-medium);color:var(--mkl-accent);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.mkl-final__facts span{font-size:14px;line-height:21px;color:rgba(255,255,255,.65)}
.mkl-final__text .mkl-intro{color:rgba(255,255,255,.6)}
.mkl-final__contacts{
  margin-top:var(--mkl-space-8);padding-top:var(--mkl-space-6);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:15px;line-height:24px;color:rgba(255,255,255,.7);
}
.mkl-final__contacts a{color:#fff;font-weight:var(--mkl-fw-medium)}
.mkl-final__form{
  background:rgba(255,255,255,.06);padding:var(--mkl-space-6);border-radius:var(--mkl-radius-lg);
  display:flex;flex-direction:column;gap:var(--mkl-space-4);
}
.mkl-final__form .mkl-field__label{color:rgba(255,255,255,.55)}
.mkl-final__form .mkl-field__control{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.mkl-final__form .mkl-field__control::placeholder{color:rgba(255,255,255,.35)}
.mkl-final__form .mkl-field__control:focus{border-color:var(--mkl-accent);background:rgba(255,255,255,.12)}
.mkl-final__micro{font-size:12px;line-height:17px;color:rgba(255,255,255,.45)}
/* Успех должен читаться сразу: галочка, зелёная рамка, крупный заголовок. */
.mkl-final__done{
  grid-column:1 / -1;display:flex;gap:var(--mkl-space-4);align-items:flex-start;
  padding:var(--mkl-space-6);border-radius:var(--mkl-radius-lg);
  background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.5);
  font-size:15px;line-height:23px;color:rgba(255,255,255,.75);
}
.mkl-final__done b{
  display:block;font-family:var(--mkl-font-head);font-size:22px;line-height:30px;
  font-weight:var(--mkl-fw-medium);color:#fff;margin-bottom:4px;
}
.mkl-final__done-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:var(--mkl-radius-full);
  background:var(--mkl-success);display:flex;align-items:center;justify-content:center;
}
.mkl-final__done-ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mkl-form__err{font-size:13px;line-height:18px;color:var(--mkl-error)}
.mkl-band__form .mkl-form__err,
.mkl-final__form .mkl-form__err{color:#FF9B84}
.mkl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ─────────────── 19 · ЛИПКАЯ ПАНЕЛЬ (мобильная) ─────────────── */

/* ─────────────── ОБЩЕЕ ─────────────── */
.mkl-note{
  font-size:13px;line-height:20px;color:var(--mkl-text-secondary);margin-top:16px;
}
.mkl-note--foot{text-align:center;padding:var(--mkl-space-6) 0 var(--mkl-space-4);margin-top:0}
.mkl-badge{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--mkl-radius-pill);background:var(--mkl-accent-tint);
  color:var(--mkl-accent-hover);font-size:12px;font-weight:var(--mkl-fw-medium);
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНЫЕ. Отдельно, не вперемешку с десктопом.
   53 % трафика, и они конвертят в 1,7 раза хуже.
   ══════════════════════════════════════════════════════════ */
@media (max-width:991px){
  .mkl-calc{grid-template-columns:1fr}
  .mkl-calc__out{grid-column:1;grid-row:1;position:static}
  .mkl-calc__form{grid-column:1;grid-row:2}
  .mkl-scope__grid,.mkl-cases__grid{grid-template-columns:1fr}
  .mkl-cat__grid{grid-template-columns:repeat(3,1fr)}
  .mkl-cat__grid > :nth-child(n+10){display:none}
  .mkl-cat__grid.mkl-full > :nth-child(n+10):not([hidden]){display:flex}
  .mkl-live{grid-template-columns:repeat(2,1fr)}
  .mkl-live__item--wide{grid-column:span 2}
  .mkl-root .mkl-live__item img{height:auto;aspect-ratio:4/3}
  .mkl-root .mkl-live__item--wide img{aspect-ratio:8/3}
  .mkl-venue__grid,.mkl-docs__grid,.mkl-kit__grid{grid-template-columns:repeat(2,1fr)}
  .mkl-steps{grid-template-columns:repeat(2,1fr)}
  .mkl-final__grid{grid-template-columns:1fr;gap:var(--mkl-space-6)}
}

@media (max-width:768px){
  .mkl-byuro{grid-template-columns:1fr;gap:var(--mkl-space-5)}
  .mkl-root .mkl-strip img{height:240px}
  .mkl-lb{padding:12px}
  .mkl-root .mkl-lb__img{max-width:100%}
  .mkl-lb__nav{width:36px;height:36px;margin-top:-18px;background:rgba(255,255,255,.2)}
  .mkl-lb__nav--prev{left:6px}
  .mkl-lb__nav--prev::before{left:13px;top:11px}
  .mkl-lb__nav--next{right:6px}
  .mkl-lb__nav--next::before{left:9px;top:11px}
  .mkl-band{height:auto;min-height:0}
  .mkl-root .mkl-band img{position:relative;height:auto;aspect-ratio:4/3}
  .mkl-band::after{height:auto;bottom:auto;aspect-ratio:4/3}
  .mkl-band__in{
    position:static;flex-direction:column;align-items:stretch;
    gap:var(--mkl-space-4);padding:var(--mkl-space-5) var(--mkl-container-pad);
  }
  .mkl-band__title{font-size:24px;line-height:32px}
  .mkl-band__text p{font-size:15px;line-height:22px;margin-top:var(--mkl-space-2)}
  .mkl-band__form,.mkl-band__done{flex:1 1 auto;background:rgba(255,255,255,.08);backdrop-filter:none}
  /* Бюджет первого экрана на телефоне жёсткий: из ~660 px вьюпорта
     сайтовая шапка забирает около 102, нижняя панель 64, хлебные крошки
     ещё 40. Нам остаётся примерно 430 px, и в них должны поместиться
     заголовок, строка с цифрой и одно действие. Поэтому здесь режется
     всё, что на десктопе помогает, а тут выталкивает кнопку за сгиб. */
  .mkl-hero{border-radius:0 0 24px 24px}
  .mkl-root .mkl-hero__bg{opacity:.5;object-position:60% 50%}
  .mkl-hero__scrim{background:linear-gradient(to top,rgba(49,45,43,.95) 30%,rgba(49,45,43,.8) 70%,rgba(49,45,43,.7) 100%)}
  .mkl-hero__inner{padding:24px 0 28px}
  .mkl-hero__eyebrow{display:none}
  .mkl-hero__title{font-size:24px;line-height:32px;margin-bottom:12px}
  .mkl-hero__sub{font-size:15px;line-height:22px}
      .mkl-hero__acts{flex-direction:column;align-items:stretch;gap:10px;margin-top:16px}
  .mkl-hero__acts .mkl-btn{width:100%}
  /* телефон в первом экране — текстовой ссылкой, не второй кнопкой:
     две одинаковые кнопки подряд спорят друг с другом */
  .mkl-root .mkl-hero__acts .mkl-btn--ghost{
    height:auto;padding:4px 0;border:0;background:none;
    text-decoration:underline;text-underline-offset:3px;
    color:rgba(255,255,255,.8);font-size:15px;
  }
      
  /* на 390 px колонка подписи съедает треть ширины, и чипы начинают
     переноситься по два в ряд. Кладём подпись над ними. */
  .mkl-row{grid-template-columns:1fr;gap:8px;padding:10px 0}
  .mkl-row__label{font-size:13px}
  .mkl-calc__out{padding:20px}
  .mkl-calc__answer{font-size:21px;line-height:28px}
  .mkl-calc__total-sum{font-size:32px;line-height:40px}
  .mkl-calc__total{gap:8px}
  .mkl-calc__acts{flex-direction:column;align-items:stretch}
  .mkl-calc__acts .mkl-btn{width:100%}
  .mkl-calc__form{padding:12px 16px}
  /* доказательства в колонку: три в ряд на 390 px не читаются */
  .mkl-top{border-radius:0 0 24px 24px}
  .mkl-proof{padding:20px 0 28px}
  .mkl-proof__item{padding-top:12px}
  .mkl-proof__grid{grid-template-columns:1fr;gap:16px}
  .mkl-proof__item{position:relative;padding-top:16px}
.mkl-proof__item::before{
  content:'';position:absolute;left:0;top:0;
  width:28px;height:3px;border-radius:2px;background:var(--mkl-accent);
}
.mkl-proof__item b{font-size:15px;line-height:22px;margin-bottom:2px}
  .mkl-proof__item span{font-size:14px;line-height:20px}
  .mkl-hero__inner{padding:40px 0 44px}
  .mkl-hero__acts{margin-top:24px}
  .mkl-section{padding:var(--mkl-section-y-mob) 0}
  .mkl-section__title{font-size:24px;line-height:32px}
  .mkl-intro{font-size:16px;line-height:24px}

  /* калькулятор: ни одного поля с клавиатурой в основном пути —
     только пресеты тапами. Ручной ввод спрятан под ссылку. */
  .mkl-calc__form{padding:16px}
  .mkl-calc__out{padding:20px}
  .mkl-calc__total-sum{font-size:28px;line-height:36px}
  .mkl-chips{gap:6px}
  .mkl-root .mkl-chip{height:42px;padding:0 14px;font-size:14px}
  .mkl-root .mkl-chip--two{height:auto;padding:7px 12px}
  .mkl-chip__name{font-size:13px;line-height:18px}
  .mkl-chip__cap{font-size:11px;line-height:15px}

  /* сколько карточек видно, на телефоне решает скрипт: сначала три,
     дальше по пять за нажатие */
  .mkl-cat__grid{grid-template-columns:1fr}
  /* потолки в 12 и 9 карточек с широких экранов здесь мешают: сколько
     показано, считает скрипт */
  .mkl-cat__grid > :nth-child(n+10):not([hidden]):not(.mkl-hide){display:flex}
  .mkl-cat__grid > .mkl-hide{display:none}
  .mkl-cat__filters{
    margin-inline:calc(var(--mkl-container-pad) * -1);
    padding-inline:var(--mkl-container-pad);
    overflow-x:auto;flex-wrap:nowrap;
  }
  .mkl-cat__fgroup{flex-wrap:nowrap}

  .mkl-case{grid-template-columns:1fr}
  .mkl-root .mkl-case__img{min-height:180px;max-height:220px}
  .mkl-case__body{padding:16px}

  /* ── Слайдеры вместо колонок ───────────────────────────────────
     В одну колонку плитки растягивали страницу на несколько экранов:
     до кейсов и бухгалтерии просто не доезжали. Едем вбок, карточка
     занимает 82 % ширины — видно, что следующая рядом. */
  .mkl-kit__grid,
  .mkl-live,
  .mkl-cases__grid,
  .mkl-docs__grid,
  .mkl-steps,
  .mkl-venue__grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--mkl-grid-gap);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mkl-kit__grid::-webkit-scrollbar,
  .mkl-live::-webkit-scrollbar,
  .mkl-cases__grid::-webkit-scrollbar,
  .mkl-docs__grid::-webkit-scrollbar,
  .mkl-steps::-webkit-scrollbar,
  .mkl-venue__grid::-webkit-scrollbar{display:none}
  .mkl-kit__grid > *,
  .mkl-live > *,
  .mkl-cases__grid > *,
  .mkl-docs__grid > *,
  .mkl-steps > *,
  .mkl-venue__grid > *{flex:0 0 82%;scroll-snap-align:start}
  /* эти четыре лежат прямо в контейнере — пускаем ленту до края экрана */
  .mkl-kit__grid,
  .mkl-live,
  .mkl-cases__grid,
  .mkl-docs__grid,
  .mkl-steps{
    margin-inline:calc(var(--mkl-container-pad) * -1);
    padding:0 var(--mkl-container-pad) 4px;
    /* без этого прилипание съедает левый отступ: карточка встаёт вплотную к краю */
    scroll-padding-inline:var(--mkl-container-pad);
  }
  .mkl-live__item{min-height:0}
  .mkl-root .mkl-live__item--wide img{aspect-ratio:4/3}
  .mkl-step{padding-right:4px}

  /* темы — три ряда вбок: одиннадцать чипов в столбик занимали пол-экрана */
  .mkl-chips[data-calc="themes"]{
    display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
    grid-template-rows:repeat(3,auto);gap:8px;
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    padding-bottom:4px;
  }
  .mkl-chips[data-calc="themes"]::-webkit-scrollbar{display:none}
  .mkl-chips[data-calc="themes"] > *{scroll-snap-align:start}

  /* перелинковка — два ряда вбок */
  .mkl-tags{
    display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
    grid-template-rows:repeat(2,auto);gap:8px;
    overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--mkl-container-pad) * -1);
    padding:0 var(--mkl-container-pad) 4px;
  }
  .mkl-tags::-webkit-scrollbar{display:none}

  /* таблица пропускной способности: на 390 px она не читается даже
     с прокруткой вбок — на телефоне её нет */
  #mkl-throughput{display:none}

  /* факты в финале: на узком экране подпись уезжала лесенкой вправо */
  .mkl-final__facts li{flex-direction:column;gap:2px}
  .mkl-final__form{padding:var(--mkl-space-5)}

}