/* Гарнитуры сайта по брендбуку KPGIS 2.0: Montserrat — заголовки и цены, Inter — текст и
   интерфейс. Подключены прямо здесь, а не через общий fonts.css: тому нужны Carlito и IBM Plex
   Mono для листа КП, а на сайте они только задерживали бы отрисовку. Файлы лежат у нас, с чужого
   CDN ничего не тянем. */
/* Гарнитуры сайта по брендбуку KPGIS 2.0: Montserrat (600/700/800) — заголовки и цены,
   Inter (400/500/600) — текст и интерфейс. Подключены прямо здесь, а не через общий fonts.css:
   тому нужны Carlito и IBM Plex Mono для листа КП, а на сайте они только задержали бы отрисовку.
   Файлы лежат у нас — с чужого CDN не тянем ничего. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/montserrat-cyrillic-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/montserrat-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ld-blue: #1851A7;           /* Кобальт — кнопки и ссылки, то, на что можно нажать */
  --ld-blue-d: #123F83;         /* он же темнее — наведение и нажатие */
  --ld-blue-l: #EAF2FD;         /* Инфо-фон — подложки подсказок и плиток */
  --ld-blank: #102B52;          /* Бланк — заголовки, тёмные секции, подвал */
  --ld-build: #0B79E4;          /* Сборка — значки, графики, кольцо фокуса */
  --ld-gis: #2DA1FF;            /* GIS — акцент на тёмном фоне и в логотипе */
  --ld-sheet: #6FBCFD;          /* Лист — иллюстрации */
  /* «зелёный» остался именем переменной, но это цвет успеха из брендбука: галочки, статус
     «отправлено», подтверждения. На белом даёт 5,2:1 — читается */
  --ld-green: #127A4A;
  --ld-green-t: #127A4A;
  --ld-green-l: #E7F3EC;
  --ld-gold: #9A5B00;           /* Внимание */
  --ld-ink: #0B1A30;            /* Чернила — основной текст, 17,4:1 на белом */
  --ld-mute: #5B6B82;           /* Графит — вторичный текст, 5,4:1 */
  --ld-line: #D9E2EE;           /* Линия — рамки карточек и разделители */
  --ld-line-2: #BFCEE3;         /* Линия поярче — рамки карточек-цифр, чтобы плашка читалась на светлом фоне */
  --ld-soft: #F4F7FB;           /* Бумага — фон секций */
  --ld-r: 16px;                 /* скругление карточки */
  --ld-r-control: 12px;         /* кнопка и поле */
  --ld-tap: 44px;               /* минимальная высота того, во что попадают пальцем */
  --ld-shadow: 0 8px 24px rgba(16, 43, 82, .10);
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* прилипшая шапка не должна закрывать якорь и элемент, на который увели фокус клавишей Tab */
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  /* по брендбуку: Inter — текст и интерфейс, Montserrat — заголовки и цены (правило ниже) */
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--ld-ink);
  background: #fff;
  font-size: 17px;              /* основной текст 17/26, на телефоне 16/24 */
  line-height: 1.53;
  -webkit-text-size-adjust: 100%;
}
/* Заголовки и цены — Montserrat. Пишем строчными, как требует брендбук: без капса. */
h1, h2, h3, h4, .ld-h1, .ld-h2, .ld-price-num, .ld-num {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  color: var(--ld-blank);
  letter-spacing: -0.01em;
}
h1, .ld-h1 { font-size: 48px; line-height: 56px; font-weight: 800; }
h2, .ld-h2 { font-size: 32px; line-height: 40px; font-weight: 700; }
h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
@media (max-width: 720px) {
  body { font-size: 16px; line-height: 1.5; }
  h1, .ld-h1 { font-size: 32px; line-height: 40px; }
  h2, .ld-h2 { font-size: 26px; line-height: 34px; }
}
img { max-width: 100%; }
a { color: var(--ld-blue); }
/* ── фокус с клавиатуры ── */
/* без этого правила фокус рисовался браузерным пунктиром, а на синих кнопках его попросту
   не было видно: пройти сайт с клавиатуры было нельзя */
:focus-visible {
  outline: 3px solid #0B63C5;
  outline-offset: 2px;
  border-radius: 6px;
}
.ld-cta :focus-visible, .ld-btn-main:focus-visible { outline-color: #0B63C5; box-shadow: 0 0 0 3px #fff; }
.ld-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ld-blue); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
  text-decoration: none; font-weight: 700;
}
.ld-skip:focus { left: 0; }
/* текст только для чтения с экрана: нужен там, где надпись прячется вёрсткой,
   а название элемента остаться обязано */
.ld-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 14px; }
h1 { font-size: 42px; letter-spacing: -0.5px; }
h2 { font-size: 31px; letter-spacing: -0.3px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 12px; }
.ld-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
/* ── шапка ── */
.ld-top { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--ld-line); backdrop-filter: blur(6px); }
.ld-top-in { display: flex; align-items: center; gap: 16px; min-height: 66px; flex-wrap: wrap; }
.ld-logo { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.15; font-weight: 700; color: var(--ld-ink); text-decoration: none; padding: 4px 0; }
.ld-logo-short { display: none; }
/* логотип брендбука: высота 40 px в шапке, охранное поле — не меньше высоты буквы «K» (32 px),
   поэтому меню начинается не ближе этого отступа */
.ld-logo-img { display: block; height: 40px; width: auto; object-fit: contain; flex-shrink: 0; }
.ld-logo picture { display: block; flex-shrink: 0; }
.ld-logo + .ld-menu-btn, .ld-logo + .ld-nav { margin-left: 32px; }
/* подвал на Бланке: белый вариант логотипа */
.ld-logo-foot { display: block; }
.ld-logo-img-foot { display: block; height: 44px; width: auto; }
.ld-nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.ld-nav > a, .ld-drop-top { display: inline-flex; align-items: center; color: var(--ld-ink); text-decoration: none; font-size: 15px; white-space: nowrap; min-height: var(--ld-tap); padding: 6px 0; border-bottom: 2px solid transparent; }
.ld-nav > a:hover, .ld-drop-top:hover { color: var(--ld-blue); }
.ld-nav .on { color: var(--ld-blue); border-bottom-color: var(--ld-blue); font-weight: 700; }
.ld-drop { position: relative; display: flex; }
.ld-drop-top::after { content: '▾'; margin-left: 5px; font-size: 11px; }
.ld-drop-box { position: absolute; top: 100%; left: -14px; min-width: 330px; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); box-shadow: var(--ld-shadow); padding: 8px; display: none; }
.ld-drop:hover .ld-drop-box, .ld-drop:focus-within .ld-drop-box { display: block; }
.ld-drop-box a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ld-ink); }
.ld-drop-box a:hover { background: var(--ld-blue-l); }
.ld-drop-box b { display: block; font-size: 15px; }
.ld-drop-box span { display: block; font-size: 14px; color: var(--ld-mute); }
.ld-top-cta { display: flex; gap: 8px; }
.ld-menu-btn { display: none; font: inherit; }
/* крестик нужен только выдвижной панели на узком экране */
.ld-nav-close { display: none; }
.ld-menu-word { margin-left: 7px; font-size: 15px; font-weight: 700; }
/* ── кнопки ── */
/* кнопка по брендбуку: высота 44 (промо 52, кабинет 36), скругление 12, кольцо фокуса 3 px Сборка */
.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ld-tap); padding: 11px 20px; border-radius: var(--ld-r-control); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: 'Inter', 'Segoe UI', sans-serif; }
.ld-btn-main { background: var(--ld-blue); color: #fff; }
.ld-btn-main:hover { background: var(--ld-blue-d); }
/* «зелёная» кнопка осталась в разметке с прежних времён; по брендбуку действие несёт Кобальт,
   поэтому она красится так же, а зелёный остаётся только признаком успеха */
.ld-btn-green { background: var(--ld-blue); color: #fff; }
.ld-btn-green:hover { background: var(--ld-blue-d); }
.ld-btn-ghost { border-color: var(--ld-line); color: var(--ld-blue); background: #fff; }
.ld-btn-ghost:hover { border-color: var(--ld-blue); }
/* значок у «Войти» — только на телефоне, там вместо слова (см. медиазапрос ниже) */
.ld-login .ic { display: none; }
.ld-btn-lg { padding: 14px 26px; font-size: 16px; }
.ld-btn-wide { width: 100%; margin-top: auto; }
.ld-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.ld-btns-center { justify-content: center; }
/* ── хлебные крошки ── */
.ld-crumbs { background: var(--ld-soft); border-bottom: 1px solid var(--ld-line); font-size: 14.5px; color: var(--ld-mute); }
.ld-crumbs .ld-wrap { padding-top: 0; padding-bottom: 0; }
.ld-crumbs a { display: inline-block; min-height: var(--ld-tap); line-height: var(--ld-tap); padding: 0 2px; color: var(--ld-mute); text-decoration: none; }
.ld-crumbs a:hover { color: var(--ld-blue); text-decoration: underline; }
/* разделитель скрыт от чтения с экрана, но всё равно держим контраст: светло-серый «›»
   на светлом фоне не читался и попадал в замечания проверок доступности */
.ld-crumbs span { margin: 0 6px; color: var(--ld-mute); }
.ld-crumbs b { color: var(--ld-ink); font-weight: 700; }
/* ── первый экран ── */
.ld-hero { padding: 54px 0 46px; background: linear-gradient(180deg, #F3F8FD 0%, #fff 55%, #fff 100%); }
.ld-hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.ld-hero-shot { margin-top: 34px; }
/* надстрочник по брендбуку: 600, 12, разрядка, заглавными — над заголовком первого экрана.
   Раньше это был зелёный чип, но зелёный в палитре остался только за успехом. */
.ld-tag { display: inline-block; color: var(--ld-blue); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.ld-lead { font-size: 18.5px; color: var(--ld-mute); max-width: 640px; }
.ld-note { font-size: 14.5px; color: var(--ld-mute); }
.ld-hero-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ld-hero-facts li { background: #fff; border: 1px solid var(--ld-line-2); border-radius: var(--ld-r); padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(16, 32, 56, .05); }
.ld-hero-facts b { display: block; color: var(--ld-blue); font-size: 21px; }
.ld-hero-facts span { font-size: 14px; color: var(--ld-mute); }
/* ── страничный заголовок раздела ── */
.ld-head { padding: 46px 0 34px; background: linear-gradient(180deg, #F3F8FD 0%, #fff 100%); }
.ld-head h1 { font-size: 36px; max-width: 900px; }
.ld-head p { font-size: 18px; color: var(--ld-mute); max-width: 860px; }
/* ── секции ── */
.ld-sec { padding: 54px 0; }
/* после заголовка раздела первый экран идёт ближе: иначе между ними висит пустая полоса */
.ld-head + .ld-sec { padding-top: 26px; }
.ld-sec-alt { background: var(--ld-soft); }
.ld-sec-h { max-width: 860px; margin-bottom: 26px; }
.ld-sec-h p { font-size: 17px; color: var(--ld-mute); margin: 0; }
section[id] { scroll-margin-top: 78px; }
/* Ячейки сетки по умолчанию не ужимаются уже своего содержимого (min-width: auto).
   Из-за этого одна широкая таблица внутри колонки распирала всю страницу — на телефоне
   появлялась горизонтальная прокрутка. Разрешаем колонкам сжиматься. */
.ld-hero-in > *, .ld-split > *, .ld-cards > *, .ld-doc-in > *, .ld-plans > *,
.ld-nums > *, .ld-steps > *, .ld-next > *, .ld-contact-in > * { min-width: 0; }
/* ── карточки ── */
.ld-cards { display: grid; gap: 18px; }
.ld-c2 { grid-template-columns: repeat(2, 1fr); }
.ld-c3 { grid-template-columns: repeat(3, 1fr); }
.ld-c4 { grid-template-columns: repeat(4, 1fr); }
/* карточка брендбука: белая, рамка Линия, скругление 16, без тени — тень только при наведении */
.ld-card { background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 24px 22px; display: flex; flex-direction: column; }
.ld-card:hover { box-shadow: var(--ld-shadow); }
.ld-card h3, .ld-card h4 { color: var(--ld-ink); }
.ld-card p { color: var(--ld-mute); font-size: 15.5px; margin: 0 0 10px; }
.ld-card p:last-child { margin-bottom: 0; }
.ld-card-link { display: inline-flex; align-items: center; margin-top: auto; min-height: var(--ld-tap); padding-top: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.ld-card-link:hover { text-decoration: underline; }
.ld-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ld-blue-l); color: var(--ld-blue); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 12px; }
.ld-ico-green { background: var(--ld-green-l); color: var(--ld-green); }
.ld-ico .ic { width: 24px; height: 24px; }
.ld-menu-btn .ic { width: 20px; height: 20px; }
/* ── чередующиеся экраны ── */
.ld-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 40px 0; border-top: 1px solid var(--ld-line); }
.ld-split:first-of-type { border-top: 0; }
.ld-split-rev .ld-split-media { order: -1; }
.ld-split h2 { font-size: 27px; }
.ld-split p { color: var(--ld-mute); font-size: 16px; }
.ld-split-media { background: var(--ld-soft); border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 22px; }
/* ── списки ── */
.ld-list { margin: 0 0 12px; padding-left: 22px; color: var(--ld-mute); font-size: 16px; }
.ld-list li { margin-bottom: 7px; }
.ld-list b { color: var(--ld-ink); }
.ld-list-2 { columns: 2; column-gap: 30px; }
.ld-check { list-style: none; margin: 0 0 12px; padding: 0; color: var(--ld-mute); font-size: 16px; }
.ld-check li { position: relative; padding: 4px 0 4px 28px; }
.ld-check li::before { content: '✓'; position: absolute; left: 0; top: 4px; color: var(--ld-green-t); font-weight: 700; }
.ld-check b { color: var(--ld-ink); }
/* ── цифры ── */
.ld-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ld-nums div { background: #fff; border: 1px solid var(--ld-line-2); border-radius: var(--ld-r); padding: 20px; text-align: center;
  box-shadow: 0 1px 2px rgba(16, 32, 56, .05); }
.ld-nums b { display: block; font-size: 30px; color: var(--ld-blue); }
.ld-nums span { font-size: 15px; color: var(--ld-mute); }
/* ── шаги ── */
.ld-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ld-steps li { counter-increment: st; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 20px; }
.ld-steps li::before { content: counter(st); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ld-green-t); color: #fff; font-weight: 700; margin-bottom: 12px; }
.ld-steps h3 { font-size: 18px; }
.ld-steps p { font-size: 15.5px; color: var(--ld-mute); margin: 0; }
/* ── UTM ── */
.ld-code { display: block; background: #fff; border: 1px solid var(--ld-line); border-radius: 10px; padding: 14px; font-size: 13.5px; line-height: 1.7; word-break: break-all; color: var(--ld-ink); }
.ld-code b { color: var(--ld-blue); }
.ld-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); overflow: hidden; font-size: 15px; }
.ld-table th, .ld-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ld-line); vertical-align: top; }
.ld-table th { background: var(--ld-blue-l); color: var(--ld-blue); font-size: 14px; }
.ld-table tr:last-child td { border-bottom: 0; }
.ld-table td:first-child { white-space: nowrap; font-weight: 700; }
/* ── тарифы ── */
/* Тарифов стало пять: раскладка считает, сколько карточек влезает по ширине, а не рисует
   жёсткие три колонки. На 1200 px это три в ряд и две во втором, на широком экране — все пять. */
/* Три колонки: пять тарифов и конструктор своего тарифа встают ровно 3 + 3. В одну строку
   по пять карточки выходили слишком узкими — подписи полей обрезались. */
.ld-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  align-items: stretch; }
@media (max-width: 1000px) { .ld-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ld-plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 22px 16px; position: relative; }
.ld-plan-pick { border-color: var(--ld-blue); box-shadow: var(--ld-shadow); }
/* чип «Чаще всего выбирают» — Инфо-фон и Кобальт, скругление чипа 999 (брендбук, «Статусы · чипы») */
.ld-plan-badge { position: absolute; top: -14px; left: 22px; background: var(--ld-blue-l); color: var(--ld-blue);
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid #CFE0F8; }
/* цена — Montserrat 800, как в брендбуке (40/48), цветом Бланк: цена не кнопка и синим не красится */
.ld-plan-price { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 40px; line-height: 48px;
  font-weight: 800; color: var(--ld-blank); margin-bottom: 8px; letter-spacing: -0.02em; }
.ld-plan-price span { font-size: 15px; font-weight: 400; color: var(--ld-mute); }
/* «Бесплатно» и «Цена по запросу» стоят на месте цены, поэтому и выглядеть должны ценой,
   а не серой сноской: правило .ld-plan-price span перебивало их стиль */
/* «от 30 000 ₽/мес, по запросу» в узкой колонке занимало три строки и задирало высоту ряда */
.ld-plan-price .ld-plan-ask { font-size: 21px; line-height: 28px; font-weight: 800; color: var(--ld-blank); }
.ld-plan-price .ld-plan-free { font-size: 34px; font-weight: 800; color: var(--ld-blank); }
.ld-plan-hint { font-size: 15.5px; color: var(--ld-mute); }
/* Три одинаковых поля во всех тарифах: сотрудники, каталог, КП в месяц. Раньше лимиты жили
   в общем списке вперемешку с функциями, карточки выходили разной длины и читались по-разному. */
.ld-plan-nums { display: grid; gap: 8px; margin: 14px 0 12px; }
/* Поле в две строки: подпись сверху, значение под ней. На узкой карточке в одну строку
   «подпись + счётчик» не помещались и обрезались многоточием; в трёх колонках места хватает,
   поэтому там поле снова горизонтальное — так карточка короче. */
.ld-num { display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-width: 0; padding: 7px 10px 8px; border: 1px solid #E6EDF6;
  border-radius: 12px; background: #FAFCFF; }
.ld-num-k { font-size: 12.5px; color: var(--ld-mute); }
@media (min-width: 1001px) {
  .ld-num { flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 46px; padding: 4px 6px 4px 12px; }
  .ld-num-k { font-size: 14px; }
  .ld-num .ld-step { flex: none; }
  .ld-num .ld-step output { flex: none; min-width: 42px; }
  .ld-num-sel { width: auto; max-width: 60%; }
}
/* «без ограничений» длиннее числа: даём ему свой размер, чтобы строка не ломалась пополам */
.ld-num-v { font-weight: 700; color: var(--ld-ink); font-size: 16px; white-space: nowrap; }
.ld-num-v.ld-num-unlim { font-size: 14px; letter-spacing: -0.01em; }
.ld-num-sel { min-height: 34px; width: 100%; border: 1px solid #D5DDE8; border-radius: 10px;
  background: #fff; color: var(--ld-ink); font: inherit; font-size: 14px; font-weight: 600; padding: 0 6px; }
/* счётчик на всю ширину поля: минус слева, плюс справа, число по центру */
.ld-num .ld-step { border-color: #D5DDE8; display: flex; justify-content: space-between; }
.ld-num .ld-step-btn { width: 34px; height: 32px; border-radius: 10px; }
.ld-num .ld-step output { flex: 1; min-width: 0; font-size: 15px; }

.ld-plan-list { list-style: none; margin: 4px 0 18px; padding: 0; font-size: 15px; color: var(--ld-mute); }
.ld-plan-list li { padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid #F0F4F8; }
.ld-plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ld-green-t); font-weight: 700; }
.ld-plan-list b { color: var(--ld-ink); }
.ld-plan-note { font-size: 14px; color: var(--ld-mute); text-align: center; margin: 8px 0 0; }
/* калькулятор мест и КП в карточке тарифа: число из лимита заменяет счётчик с кнопками */
.ld-plan-list li:has(.ld-step) { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ld-plan-list li:has(.ld-step) > b { display: none; }
.ld-step { display: inline-flex; align-items: center; border: 1px solid #D5DDE8; border-radius: 12px; background: #fff; }
.ld-step-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ld-blue); cursor: pointer;
               display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.ld-step-btn:hover:not(:disabled) { background: #EEF3FA; }
.ld-step-btn:disabled { color: #B5C0CE; cursor: default; }
.ld-step-btn:focus-visible { outline: 2px solid var(--ld-blue); outline-offset: 1px; }
.ld-step output { min-width: 56px; text-align: center; font-weight: 700; color: var(--ld-ink); font-variant-numeric: tabular-nums; }
.ld-plan-extra { font-size: 13.5px; color: var(--ld-mute); background: #F4F7FB; border-radius: 10px; padding: 6px 10px; margin: -2px 0 8px; }
/* карточка «Свой тариф»: галочки-допы и пунктирная рамка — она не пакет, а калькулятор */
.ld-custom-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 28px; align-items: center; margin-top: 26px; padding: 24px; background: #F4F7FB;
  border-radius: var(--ld-r); }
.ld-custom-text h3 { font-size: 22px; margin: 0 0 10px; }
.ld-custom-text p { margin: 0 0 10px; color: var(--ld-mute); }
.ld-plan-custom { border-style: dashed; border-color: #C6D4E6; }
@media (max-width: 860px) { .ld-custom-wrap { grid-template-columns: 1fr; padding: 18px; } }
.ld-plan-extras li { padding-left: 0; }
.ld-plan-extras li::before { content: none; }
.ld-plan-extras label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.35; }
.ld-plan-extras input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ld-blue); flex: none; }
.ld-plan-extras b { margin-left: auto; white-space: nowrap; color: var(--ld-ink); }
.ld-plan-calc-note { margin-top: 14px; }
.ld-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ld-addon { background: #fff; border: 1px solid #E3E9F1; border-radius: 18px; padding: 22px; }
.ld-addon .ic { color: var(--ld-blue); margin-bottom: 10px; }
.ld-addon h3 { margin: 0 0 6px; }
.ld-addon-price { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-size: 26px; font-weight: 800;
  color: var(--ld-blank); margin-bottom: 8px; }
.ld-addon-price span { font-size: 14px; font-weight: 400; color: var(--ld-mute); }
.ld-addon p { color: var(--ld-mute); font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .ld-addons { grid-template-columns: 1fr; } }
.ld-terms ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; padding: 0; }
.ld-terms li { display: flex; gap: 8px; align-items: baseline; background: #fff; border: 1px solid var(--ld-line); border-radius: 10px; padding: 11px 16px; font-size: 15.5px; }
/* размер скидки — акцент, а значит синий: зелёный по брендбуку означает успех, а не выгоду */
.ld-terms li span { color: var(--ld-blue); font-weight: 600; }
/* ── вопросы ── */
.ld-faq { display: grid; gap: 10px; }
.ld-faq details { background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 4px 18px 14px; }
.ld-faq details:not([open]) { padding-bottom: 4px; }
.ld-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ld-ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ld-tap); padding: 6px 0; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: '+'; color: var(--ld-blue); font-size: 22px; line-height: 1; }
.ld-faq details[open] summary::after { content: '−'; }
.ld-faq p { margin: 6px 0 0; color: var(--ld-mute); font-size: 16px; }
/* ── врезки ── */
.ld-panel { background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 22px; }
.ld-panel-blue { background: var(--ld-blue-l); border-color: #CFE0F2; }
.ld-panel-green { background: var(--ld-green-l); border-color: #C9E9D9; }
.ld-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ld-next a { display: block; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 18px; text-decoration: none; color: var(--ld-ink); }
.ld-next a:hover { box-shadow: var(--ld-shadow); }
.ld-next b { display: block; color: var(--ld-blue); margin-bottom: 4px; }
.ld-next span { font-size: 15px; color: var(--ld-mute); }
/* ── инструкции: слева список тем, справа сам текст ── */
.ld-doc-in { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
.ld-doc-nav { position: sticky; top: 86px; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 16px; }
.ld-doc-nav h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--ld-mute); margin-bottom: 8px; }
.ld-doc-nav a { display: flex; align-items: center; min-height: var(--ld-tap); padding: 7px 10px; margin: 0 -6px; border-radius: 9px; color: var(--ld-ink); text-decoration: none; font-size: 15.5px; }
.ld-doc-nav a:hover { background: var(--ld-soft); }
.ld-doc-nav a.on { background: var(--ld-blue-l); color: var(--ld-blue); font-weight: 700; }
.ld-doc-help { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ld-line); font-size: 15px; color: var(--ld-mute); }
.ld-doc-help p { margin: 4px 0 0; }
/* ссылка внутри подсказки — часть текста, а не пункт списка слева */
.ld-doc-help a { display: inline; padding: 0; margin: 0; color: var(--ld-blue); }
.ld-doc-help a:hover { background: none; text-decoration: underline; }
.ld-doc-body { max-width: 800px; }
.ld-doc-body h2 { font-size: 25px; margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid var(--ld-line); scroll-margin-top: 82px; }
.ld-doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ld-doc-body p, .ld-doc-body li { font-size: 16px; }
.ld-doc-body p { color: var(--ld-mute); }
.ld-doc-body code { background: var(--ld-soft); border: 1px solid var(--ld-line); border-radius: 6px; padding: 1px 6px; font-size: 14px; }
.ld-doc-body .ld-table { margin: 6px 0 14px; }
.ld-steps-v { counter-reset: sv; list-style: none; margin: 0 0 16px; padding: 0; }
.ld-steps-v li { counter-increment: sv; position: relative; padding: 0 0 14px 44px; color: var(--ld-mute); }
.ld-steps-v li::before { content: counter(sv); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ld-blue); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ld-steps-v li b { color: var(--ld-ink); }
.ld-steps-v .ld-list { margin-top: 6px; }
.ld-tip { background: var(--ld-blue-l); border-left: 4px solid var(--ld-blue); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; font-size: 16px; color: var(--ld-mute); }
.ld-tip b { color: var(--ld-ink); }
.ld-tip-green { background: var(--ld-green-l); border-left-color: var(--ld-green-t); }
.ld-doc-next { display: flex; gap: 14px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--ld-line); flex-wrap: wrap; }
.ld-doc-next a { flex: 1 1 240px; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 14px 16px; text-decoration: none; color: var(--ld-ink); }
.ld-doc-next a:hover { box-shadow: var(--ld-shadow); }
.ld-doc-next span { display: block; font-size: 14px; color: var(--ld-mute); }
.ld-doc-next b { color: var(--ld-blue); }
.ld-doc-next-r { text-align: right; }
/* ── призыв и подвал ── */
/* тёмные секции — на Бланке: по брендбуку это ~20% площади страницы */
/* Блок с призывом и подвал раньше были одного цвета (Бланк) и сливались в одну тёмную
   полосу: непонятно, где заканчивается предложение попробовать и начинается навигация.
   Здесь Кобальт — соседний цвет брендбука, граница между блоками видна сама собой. */
.ld-cta { padding: 56px 0; background: var(--ld-blue); color: #fff; text-align: center; }
.ld-cta h2 { color: #fff; }
.ld-cta p { color: #DCE8FA; max-width: 700px; margin: 0 auto; }
.ld-cta .ld-btn-main { background: #fff; color: var(--ld-blue); }
.ld-cta .ld-btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.ld-cta-note { font-size: 15px; color: #9FB5D4; margin-top: 4px; }
/* подвал на Бланке — как на развороте «Секции сайта» */
.ld-foot { padding: 48px 0 28px; background: var(--ld-blank); color: #C9D8EC; }
.ld-foot a { color: #C9D8EC; }
.ld-foot a:hover { color: #fff; }
/* заголовки колонок: h3 внутри подвала. Без этого правила они красились общим цветом
   заголовков (Бланк) и пропадали на Бланке-фоне */
.ld-foot h3, .ld-foot h4, .ld-foot strong, .ld-foot b { color: #fff; }
.ld-foot h3 { font-size: 15px; line-height: 22px; font-weight: 700; margin: 0 0 14px; }
.ld-foot p { color: #9FB5D4; }
.ld-foot-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.ld-foot-col h3 { font-size: 16px; margin-bottom: 8px; }
/* подвал теперь на Бланке: тексты и ссылки светлые. Графит (#5B6B82) на этом фоне давал 2,6:1 —
   читать было нельзя. Светло-голубой даёт 8,3:1, приглушённый — 5,3:1. */
/* На мыши ссылке подвала не нужна цель в 44 px: с ней подвал вытягивался на два экрана.
   Там, где нет мыши (палец) или экран узкий, полный размер цели возвращается — правило
   ниже. Ориентируемся и на hover, и на ширину: узкое окно на ноутбуке тоже бывает. */
.ld-foot-col a { display: flex; align-items: center; min-height: 30px; color: #C9D8EC;
  text-decoration: none; font-size: 14.5px; padding: 1px 0; }
@media (hover: none), (max-width: 1000px) {
  .ld-foot-col a { min-height: var(--ld-tap); }
}
.ld-foot-col a:hover { color: #fff; text-decoration: underline; }
.ld-foot-about p { font-size: 15px; color: #9FB5D4; margin: 12px 0 6px; }
.ld-foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #9FB5D4; }
.ld-foot-bottom a { color: #C9D8EC; }
/* строка про хранение данных: тише реквизитов, но остаётся читаемой (5,3:1 на Бланке) */
.ld-foot-law { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 13px; }

/* Уведомление о cookie: полоса внизу окна, не перекрывает содержимое и не требует выбора,
   потому что сервис ставит только техническую куку. */
.ld-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex;
  align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  max-width: var(--b-container); margin: 0 auto; padding: 14px 18px; border-radius: var(--ld-r);
  background: #fff; border: 1px solid var(--ld-line); box-shadow: var(--b-shadow-m); }
/* display: flex сильнее атрибута hidden, поэтому прячем явно: иначе кнопка «Понятно» ничего не меняет */
.ld-cookie[hidden] { display: none; }
.ld-cookie p { margin: 0; font-size: 14px; color: var(--ld-mute); max-width: 70ch; line-height: 1.5; }
.ld-cookie a { color: var(--ld-blue); }
.ld-cookie .ld-btn { flex: none; }
@media (max-width: 600px) {
  .ld-cookie { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; }
  .ld-cookie .ld-btn { width: 100%; }
}
/* ── узкий десктоп ── */
@media (min-width: 1001px) {
  .ld-top-in { flex-wrap: nowrap; }
}
@media (min-width: 1001px) and (max-width: 1330px) {
  .ld-logo-full { display: none; }
  .ld-logo-short { display: inline; }
  .ld-nav { gap: 13px; }
  .ld-nav > a, .ld-drop-top { font-size: 13.5px; }
  .ld-top-cta .ld-btn { padding: 9px 12px; font-size: 13px; }
}
/* ── планшет ── */
@media (max-width: 1000px) {
  .ld-hero-in, .ld-split { grid-template-columns: 1fr; }
  .ld-split-rev .ld-split-media { order: 0; }
  .ld-c3, .ld-c4, .ld-steps, .ld-nums, .ld-next { grid-template-columns: repeat(2, 1fr); }
  /* на узком экране список инструкций идёт над текстом и не прилипает */
  .ld-doc-in { grid-template-columns: 1fr; }
  .ld-doc-nav { position: static; }
  .ld-plans { grid-template-columns: 1fr; }
  .ld-foot-in { grid-template-columns: 1fr 1fr; }
  /* Меню — панель поверх страницы у правого края. Раскрытое прямо в шапке, оно на узком экране
     вылезало за край: подписи обрезались, а страница получала прокрутку вбок.
     backdrop-filter у шапки здесь выключен намеренно: он делает шапку системой отсчёта для
     position: fixed, и панель оказывалась запертой в её 74 пикселях высоты. */
  .ld-top { backdrop-filter: none; }
  .ld-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(84vw, 320px);
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    padding: 56px 18px calc(18px + env(safe-area-inset-bottom)); background: #fff;
    border-left: 1px solid var(--ld-line); box-shadow: -14px 0 34px rgba(16, 32, 56, .18);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
  .ld-nav-open { transform: none; visibility: visible; }
  .ld-nav-back { position: fixed; inset: 0; z-index: 59; background: rgba(16, 32, 56, .42); border: 0; }
  .ld-nav-lock { overflow: hidden; }
  .ld-nav-close { position: absolute; top: 10px; right: 12px; width: var(--ld-tap); height: var(--ld-tap);
    display: inline-flex; align-items: center; justify-content: center; background: none; border: 0;
    color: var(--ld-mute); cursor: pointer; }
  .ld-nav-close .ic { width: 20px; height: 20px; }
  .ld-menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-width: var(--ld-tap); min-height: var(--ld-tap); padding: 0 14px; background: #fff; border: 1px solid var(--ld-line); border-radius: 10px; color: var(--ld-blue); font-size: 18px; cursor: pointer; }
  .ld-nav > a, .ld-nav .ld-drop-top { width: 100%; border-bottom: 1px solid var(--ld-line); }
  .ld-drop, .ld-drop-box { position: static; width: 100%; }
  .ld-drop { display: block; }
  .ld-drop-box { display: block; border: 0; box-shadow: none; padding: 0 0 0 10px; min-width: 0; background: transparent; }
  .ld-drop-box a { min-height: var(--ld-tap); display: flex; flex-direction: column; justify-content: center;
    border-bottom: 1px solid var(--ld-line); border-radius: 0; padding: 10px 0 10px 12px; }
  /* подпункты — подчинённые: раньше они были жирнее и крупнее самих разделов */
  .ld-drop-box b { font-weight: 400; font-size: 15px; color: var(--ld-ink); }
  .ld-drop-box span { display: none; }
  .ld-drop-top { font-weight: 700; }
  .ld-drop-top::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-nav { transition: none; }
}
/* ── телефон ── */
@media (max-width: 680px) {
  h1 { font-size: 29px; }
  h2 { font-size: 24px; }
  .ld-head h1 { font-size: 27px; }
  .ld-lead, .ld-head p { font-size: 16.5px; }
  .ld-sec-h p { font-size: 15.5px; }
  .ld-hero { padding: 36px 0 30px; }
  .ld-head { padding: 30px 0 24px; }
  .ld-sec { padding: 36px 0; }
  .ld-c2, .ld-c3, .ld-c4, .ld-steps, .ld-next { grid-template-columns: 1fr; }
  /* цифры «Что получает компания» — в два столбца, как цифры первого экрана */
  .ld-nums { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ld-nums div { padding: 14px 10px; }
  .ld-nums b { font-size: 24px; }
  .ld-list-2 { columns: 1; }
  .ld-foot-in { grid-template-columns: 1fr; }
  /* шапка телефона — одной строкой: логотип, кнопка целевого действия, меню.
     С переносом она занимала два ряда и съедала треть первого экрана. */
  /* «Войти» — значком: текстом шапка не помещалась в строку, а прятать вход совсем нельзя —
     вернувшийся клиент искал его и не находил */
  .ld-top-cta { display: flex; gap: 6px; }
  .ld-top-cta .ld-login { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
  .ld-login-word { display: none; }
  .ld-login .ic { display: inline-block; width: 20px; height: 20px; }
  .ld-top-in { flex-wrap: nowrap; gap: 8px; min-height: 58px; }
  .ld-logo { min-width: 0; gap: 8px; }
  .ld-logo-full { display: none; }
  .ld-logo-short { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-top-cta { margin-left: auto; flex-shrink: 0; }
  .ld-top-cta .ld-btn { padding: 8px 12px; font-size: 14px; min-height: 40px; white-space: nowrap; }
  .ld-menu-btn { margin-left: 0; padding: 0 12px; min-height: 40px; flex-shrink: 0; order: 3; }
  /* отступ «после логотипа» — для компьютера; на телефоне он отнимал 32 px, и логотип сжимался */
  .ld-logo + .ld-menu-btn { margin-left: 0; }
  .ld-logo { flex-shrink: 0; }
  .ld-menu-word { display: none; }
  /* цифры первого экрана — в два столбца: столбиком четыре карточки занимали целый экран */
  .ld-hero-facts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ld-hero-facts li { padding: 10px 12px; }
  .ld-hero-facts b { font-size: 20px; }
  .ld-hero-facts span { font-size: 13.5px; line-height: 1.35; }
  .ld-btns .ld-btn { width: 100%; }
  .ld-btn-lg { padding: 13px 18px; font-size: 16px; }
  .ld-plan-price { font-size: 28px; }
  .ld-table { display: block; overflow-x: auto; }
  /* на узком экране первая колонка переносится: запрет переноса делал таблицу шире экрана */
  .ld-table td:first-child { white-space: normal; }
  /* на телефоне основной текст не должен быть мельче 16px: иначе Safari увеличивает
     страницу при фокусе в поле, а читать со среднего расстояния тяжело */
  .ld-card p, .ld-plan-list, .ld-plan-hint, .ld-steps p, .ld-next span, .ld-doc-help,
  .ld-check, .ld-list, .ld-faq p, .ld-nums span, .ld-foot-col a, .ld-foot-about p { font-size: 16px; }
  .ld-note, .ld-foot-bottom, .ld-plan-note, .ld-doc-next span { font-size: 14.5px; }
}
/* совсем узкий экран: на название бренда в шапке места нет, остаётся знак «КП».
   Полное название всё равно есть в первом экране и в подвале. */
@media (max-width: 460px) {
  .ld-logo-short { display: none; }
}
/* ── снимки экрана ──────────────────────────────────────────────────────────
   Размеры у <img> заданы в разметке, поэтому место под картинку занято до её
   загрузки и страница не прыгает (нулевой CLS). Ниже первого экрана всё
   грузится лениво. */
.ld-fig { margin: 0 0 20px; }
.ld-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ld-line); border-radius: 12px;
  box-shadow: var(--ld-shadow); background: #fff;
}
.ld-fig-zoom { display: block; cursor: zoom-in; border-radius: 12px; }
.ld-fig figcaption { margin-top: 10px; font-size: 15px; color: var(--ld-mute); }
.ld-fig-hero { margin-bottom: 0; }
.ld-fig-hero img { border-radius: 14px; }
/* кадры отдельных блоков листа: у них своя рамка в самом снимке, лишняя не нужна */
.ld-fig-plain img { box-shadow: none; }
.ld-doc-body .ld-fig { margin: 16px 0 22px; }
.ld-doc-body .ld-fig figcaption { font-size: 15px; }

/* витрина шаблонов КП: карточка = превью листа + название + когда брать */
.ld-tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ld-tpl { background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r);
  padding: 16px; display: flex; flex-direction: column; }
.ld-tpl .ld-fig { margin: 0 0 14px; }
.ld-tpl .ld-fig img { border-radius: 8px; }
.ld-tpl h3 { font-size: 17px; margin: 0 0 8px; }
.ld-tpl p { margin: 0 0 10px; font-size: 15px; color: var(--ld-mute); }
.ld-tpl-when { margin-top: auto !important; font-size: 14px !important; }
.ld-tpl-when b { color: var(--ld-ink); }
@media (max-width: 1100px) { .ld-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ld-tpl-grid { grid-template-columns: 1fr; gap: 18px; } }

/* обучающие ролики: тот же вид, что у снимков экрана, чтобы страница не рябила */
.ld-video { margin: 0 0 22px; }
.ld-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border: 1px solid var(--ld-line); border-radius: 12px;
  box-shadow: var(--ld-shadow); background: #0B1A30;
}
.ld-video figcaption { margin-top: 10px; font-size: 15px; color: var(--ld-mute); }
.ld-video figcaption b { color: var(--ld-ink); font-weight: 600; }
.ld-video-note { display: block; margin-top: 2px; font-size: 13px; }
.ld-doc-body .ld-video { margin: 16px 0 24px; }
/* обзорная страница: ролики в две колонки, на телефоне — в одну */
.ld-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* ролик и текст рядом — на странице помощи */
.ld-video-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px; align-items: center; margin-top: 22px; }
.ld-video-lead h3 { margin: 0 0 8px; }
.ld-video-lead .ld-video { margin: 0; }
@media (max-width: 760px) {
  .ld-video-grid { grid-template-columns: 1fr; gap: 20px; }
  .ld-video-lead { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 680px) {
  .ld-fig figcaption, .ld-doc-body .ld-fig figcaption { font-size: 15px; }
}
/* ── форма заявки ── */
.ld-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--ld-line); border-radius: var(--ld-r); padding: 22px; }
.ld-field { display: grid; gap: 5px; }
.ld-field > label { font-size: 15px; font-weight: 700; color: var(--ld-ink); }
.ld-field input, .ld-field textarea, .ld-field select {
  font: inherit; font-size: 16px; color: var(--ld-ink); background: #fff;
  border: 1px solid #C8D3E0; border-radius: 10px; padding: 11px 13px; min-height: var(--ld-tap); width: 100%;
}
.ld-field textarea { min-height: 110px; resize: vertical; }
.ld-field input:focus, .ld-field textarea:focus, .ld-field select:focus { border-color: var(--ld-blue); }
.ld-hint { font-size: 14px; color: var(--ld-mute); }
.ld-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ld-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ld-mute); }
.ld-consent input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
.ld-alert { background: var(--ld-green-l); border: 1px solid #C9E9D9; border-left: 4px solid var(--ld-green-t); border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
.ld-alert h2 { font-size: 20px; margin-bottom: 6px; color: var(--ld-green-t); }
.ld-alert p { margin: 0; color: var(--ld-ink); }
/* ── контакты ── */
.ld-contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.ld-req { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.ld-req li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--ld-line); }
.ld-req b { min-width: 168px; color: var(--ld-mute); font-weight: 400; }
.ld-req span { color: var(--ld-ink); font-weight: 700; }
.ld-req li:last-child { border-bottom: 0; }
/* ── правовые и текстовые страницы ── */
.ld-prose { max-width: 800px; }
.ld-prose h2 { font-size: 24px; margin: 30px 0 10px; }
.ld-prose h3 { font-size: 18px; margin: 20px 0 8px; }
.ld-prose p, .ld-prose li { font-size: 16px; color: var(--ld-mute); }
.ld-prose b { color: var(--ld-ink); }
.ld-prose ul, .ld-prose ol { padding-left: 22px; }
.ld-prose li { margin-bottom: 6px; }
.ld-updated { font-size: 14.5px; color: var(--ld-mute); }
/* ── страница «не найдено» ── */
.ld-404 { padding: 60px 0 30px; text-align: center; }
.ld-404 .ld-code-big { font-size: 64px; font-weight: 800; color: var(--ld-blue); line-height: 1; margin-bottom: 8px; }
.ld-404 p { font-size: 17px; color: var(--ld-mute); max-width: 620px; margin: 0 auto 8px; }
@media (max-width: 1000px) {
  .ld-contact-in { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ld-404 { padding: 40px 0 20px; }
  .ld-404 .ld-code-big { font-size: 48px; }
  .ld-req b { min-width: 0; }
}

/* инструкция: узкий снимок (меню, панель) слева, текст справа; на телефоне — одно под другим */
.ld-doc-side { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 8px 0 18px; }
.ld-doc-side .ld-fig { margin: 0; }
@media (max-width: 700px) {
  .ld-doc-side { grid-template-columns: minmax(0, 1fr); }
  .ld-doc-side .ld-fig { max-width: 260px; }
}
.ld-sec-h-gap { margin-top: 44px; }

/* Телефон: кнопки шапки и калькулятора тарифов — не меньше 44 × 44 px (аудит tools/touch_audit.py) */
@media (max-width: 600px) {
  .ld-top .ld-btn, .ld-menu-btn, .ld-login { min-height: 44px !important; }
  .ld-logo { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  .ld-step-btn { width: 44px !important; height: 44px !important; min-width: 44px; }
}

/* шапка сайта липнет к верху: поле формы, к которому прокручивает браузер (клавиатура, якорь), — ниже неё */
html { scroll-padding-top: 84px; }