/* =============================================================================
   landing.css — дизайн-система публичного лендинга id.szbi.ru
   -----------------------------------------------------------------------------
   ЧТО ЭТО. Перенос дизайн-системы лендинга НОК (C:\GOOD-ID-donor\nok\landing.html,
   инлайновый <style>) в отдельный файл нашего проекта.

   КОНТРАКТ ФАЙЛА
   1. Файл САМОДОСТАТОЧЕН. Лендинг задуман как standalone-страница (как login.html
      и register.html): свой <head>, своя шапка .lnav, свой подвал .lfooter.
      Достаточно подключить ОДИН этот файл — nok.css и id.css лендингу не нужны.
      Требуется только: <body class="l-body">.
   2. Всё, что здесь есть, живёт под классом .l-body или под собственными
      префиксами (.lnav-, .hero-, .section-, .how-, .prob-, .feat-, .exam-,
      .norm-, .cmp-, .price-, .faq-, .final-, .lfooter-). Классы кабинета
      (.nos-*, .id-*) не трогаются — файл можно подключить и рядом с ними
      (см. блок «Совместимость с base.html» в самом конце).
   3. Никаких внешних ресурсов: CSP проекта (app/main.py, CONTENT_SECURITY_POLICY)
      даёт font-src 'self' data: и default-src 'self'. Montserrat лежит локально
      в /static/fonts/ — @font-face ниже. Google Fonts осознанно выброшены.
   4. У body НЕТ overflow-x: hidden. У донора он был и МАСКИРОВАЛ переполнение
      (блок демо-телефонов .duo — 708px фиксированной ширины). Проверять прокрутку
      только так: window.scrollTo(500,0); window.scrollX  → должно быть 0.
   5. Цены в разметку руками не писать — только из Jinja-глобалей plans/plan_cards.
      Здесь только оформление ценовых карточек, ни одного числа.
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   1. ШРИФТ — Montserrat, локально
   Переменный шрифт (ось wght 700–900), SIL OFL 1.1 (лицензия: fonts/OFL.txt).
   Три подмножества с unicode-range: браузер скачивает ТОЛЬКО то, что реально
   встретилось на странице. latin-ext тянется лишь если появится ₽ или похожий
   символ — в обычной вёрстке не запрашивается вовсе.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-cyrillic-700-900.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 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-700-900.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 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext-700-900.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;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ТОКЕНЫ
   Палитра лендинга. ВНИМАНИЕ: это НЕ палитра кабинета (--id-blue #1B3A5C,
   --id-green #5ea13d в id.css). Две разные системы, смешивать нельзя.
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body {
  /* Тёмно-синий каркас */
  --l-navy-950: #001b3d;
  --l-navy-900: #003b7a;
  --l-navy-700: #0a4fa6;
  --l-navy-600: #1a3a6b;

  /* Синий акцент */
  --l-blue-700: #1d4ed8;
  --l-blue-500: #3b82f6;
  --l-blue-200: #93c5fd;

  /* Фиолетовый маркер секций */
  --l-violet: #4b509e;

  /* Оранжевый CTA и золото заголовка */
  --l-orange: #f97316;
  --l-red: #ef4444;
  --l-gold: #fbbf24;

  /* Текст */
  --l-ink: #0f172a;
  --l-body-text: #1e293b;
  --l-list: #334155;
  --l-para: #475569;
  --l-sub: #64748b;
  --l-faint: #94a3b8;

  /* Фоны и линии */
  --l-white: #fff;
  --l-bg-1: #f8fafc;
  --l-bg-2: #f0f4fa;
  --l-bg-3: #f1f5f9;
  --l-line: #e2e8f0;
  --l-footer: #0a0f1a;

  /* Семантика */
  --l-ok: #16a34a;
  --l-no: #dc2626;
  --l-warn: #d97706;

  /* Градиенты */
  --l-grad-hero: linear-gradient(145deg, #001b3d 0%, #003b7a 40%, #0a4fa6 70%, #1a3a6b 100%);
  --l-grad-cta: linear-gradient(135deg, #f97316, #ef4444);
  --l-grad-gold: linear-gradient(135deg, #fbbf24, #f97316);
  --l-grad-blue: linear-gradient(135deg, #003b7a, #1d4ed8);

  /* Тени */
  --l-sh-cta: 0 8px 30px rgba(249, 115, 22, 0.45);
  --l-sh-cta-hover: 0 12px 40px rgba(249, 115, 22, 0.55);
  --l-sh-card-hover: 0 20px 60px rgba(0, 0, 0, 0.1);

  /* Метрика */
  --l-nav-h: 64px;
  /* РОВНО высота шапки, без «воздуха». Лишние пиксели сверху показывали не
     пустоту, а хвост предыдущей секции: после перехода по «Как это работает»
     под шапкой торчала синяя полоска от первого экрана, и переход выглядел
     сбитым. Свой отступ у секции уже есть (.section padding-top), он и даёт
     воздух над заголовком. */
  --l-anchor-offset: var(--l-nav-h);
  --l-max: 1100px;
  --l-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --l-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. БАЗА / RESET
   Reset намеренно ограничен потомками .l-body: файл не должен ломать кабинет,
   если его подключат рядом с nok.css. У донора reset был объявлен ДВАЖДЫ
   (строки 47 и 352) — здесь один раз.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

.l-body,
.l-body *,
.l-body *::before,
.l-body *::after {
  box-sizing: border-box;
}

.l-body {
  margin: 0;
  padding: 0;
  font-family: var(--l-font-body);
  font-size: 16px;
  color: var(--l-body-text);
  background: var(--l-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden НЕ ставим — см. п.4 контракта файла */
}

/*  СБРОС — через :where(), и это принципиально.
    Запись «.l-body p» даёт специфичность класс+тег, то есть ВЫШЕ одиночного
    класса. Из-за этого сброс молча побеждал оформление компонентов: у плашки
    в первом экране обнулялся отступ, и она слипалась со стат-карточками;
    у кнопки согласия и у ссылок в шапке надпись перекрашивалась в тёмный
    и пропадала на тёмном фоне. Три разных дефекта с одной причиной.
    :where() обнуляет специфичность целиком: сброс по-прежнему приводит в
    порядок элементы без классов, но любое правило компонента его перебивает. */
:where(.l-body) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}

:where(.l-body) :where(a) {
  text-decoration: none;
  color: inherit;
}

:where(.l-body) :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

:where(.l-body) :where(button) {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Длинные русские слова («Исполнительная», «освидетельствования») на 320px
   рвут строку и дают горизонтальную прокрутку — переносим по буквам. */
:where(.l-body) :where(h1, h2, h3, h4) {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Дети grid по умолчанию min-width:auto и распирают сетку содержимым.
   Это вторая по частоте причина горизонтальной прокрутки. */
.l-body .hero-stats > *,
.l-body .how-steps > *,
.l-body .prob-grid > *,
.l-body .feat-grid > *,
.l-body .exam-grid > *,
.l-body .exam-pills > *,
.l-body .norm-grid > *,
.l-body .price-grid > * {
  min-width: 0;
}

/* Якоря не должны уезжать под фиксированную шапку.
   Меню base.html ведёт на /#features с других страниц — offset обязателен. */
.l-body section[id],
.l-body [id].l-anchor {
  scroll-margin-top: var(--l-anchor-offset);
}

.l-body .text-center {
  text-align: center;
}

.l-body .l-nowrap {
  white-space: nowrap;
}

.l-body .l-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. ШАПКА (.lnav) — фиксированная, с размытием
   ═══════════════════════════════════════════════════════════════════════════ */

.lnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 27, 61, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Класс вешает JS при scrollY > 80 (вместо правки style.background напрямую) */
.lnav.scrolled {
  background: rgba(0, 27, 61, 0.98);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.lnav-inner {
  max-width: var(--l-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  height: var(--l-nav-h);
}

/* Логотип уступает место первым: при нехватке ширины сжимается он, а не меню.
   Без min-width:0 flex-элемент не сжимается ниже своего содержимого и выдавливает
   ссылки за правый край — на .lnav это не даёт прокрутки страницы (элемент
   position:fixed не участвует в scrollWidth), зато молча срезает кнопку действия. */
.lnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.lnav-logo > span {
  min-width: 0;
}

.lnav-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--l-grad-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
  flex-shrink: 0;
}
.lnav-mark svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.lnav-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Счётчик присутствия в подписи шапки. Ширина числа зарезервирована, иначе
   при пересчёте (раз в 45 с) подпись дёргалась бы на несколько пикселей. */
.lnav-online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
.lnav-online b {
  color: #4ade80;
  font-weight: 600;
  min-width: 14px;
  text-align: right;
}
.lnav-online-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: lnavOnlineDot 1.6s ease-in-out infinite;
}
@keyframes lnavOnlineDot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65); }
  70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/* Мигание — декоративное: при системной настройке «меньше движения» гасим. */
@media (prefers-reduced-motion: reduce) {
  .lnav-online-dot { animation: none; }
}

.lnav-sub {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.lnav-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.lnav-link:hover,
.lnav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.lnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--l-grad-cta);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 22px;
  border: none;
  border-radius: 9px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lnav-btn:hover,
.lnav-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
  color: #fff;
}

/* Бургер */
.lnav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.lnav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.lnav-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.lnav-burger.open span:nth-child(2) {
  opacity: 0;
}
.lnav-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Мобильное меню — отдельный блок сразу после </nav> */
.lnav-mobile {
  display: none;
  position: fixed;
  top: var(--l-nav-h);
  left: 0;
  right: 0;
  background: rgba(0, 27, 61, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 16px 24px;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  max-height: calc(100vh - var(--l-nav-h));
  overflow-y: auto;
}
.lnav-mobile.open {
  display: flex;
}
.lnav-mobile a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lnav-mobile a:last-child {
  border-bottom: none;
}
.lnav-mobile .lnav-btn {
  margin-top: 10px;
  justify-content: center;
  border-bottom: none;
}

/* Меню не должно уметь упираться в кнопку действия ни при какой ширине.
   Ссылки поэтому получают право сжиматься по месту, а не только менять размер
   по брейкпоинту: при нехватке ширины ужимаются горизонтальные отступы, но
   текст остаётся целым (white-space:nowrap выше по файлу). */
.lnav-links {
  flex-shrink: 1;
  min-width: 0;
}
.lnav-link {
  padding-inline: clamp(6px, 0.9vw, 14px);
}
/* Кнопка действия ужимается последней и никогда не режется. */
.lnav-btn {
  flex-shrink: 0;
}

/* Промежуточный диапазон: меню ещё десктопное, но 1100px-контейнера уже мало.
   Замерено в браузере: при пяти пунктах, кнопке действия и двухстрочном
   логотипе на 1024px правый край меню уезжал на 1054px. Диапазон доведён до
   1280px: на 1200-1280 при системном масштабе 125% запаса тоже не оставалось. */
@media (min-width: 901px) and (max-width: 1280px) {
  .lnav-link {
    padding: 8px 9px;
    font-size: 13px;
  }
  .lnav-btn {
    padding: 9px 16px;
    font-size: 13px;
  }
  .lnav-name {
    font-size: 14px;
  }
  .lnav-mark {
    width: 38px;
    height: 38px;
  }
}

/* Брейкпоинт меню поднят с донорских 640px до 900px:
   у нас пять пунктов (Возможности, Как это работает, Тарифы, Справочник, Войти)
   плюс кнопка действия — в 1100px-контейнер на 700–900px они не влезают. */
@media (max-width: 900px) {
  .lnav-links {
    display: none;
  }
  .lnav-burger {
    display: flex;
  }
}

/* На узких экранах логотип поджимается, чтобы название сервиса помещалось
   целиком, а не обрезалось многоточием (замерено: на 360px при 15px/700
   «Исполнительная документация» не влезала рядом с бургером). */
@media (max-width: 480px) {
  .lnav-inner {
    padding: 0 16px;
    gap: 8px;
  }
  .lnav-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .lnav-mark svg {
    width: 20px;
    height: 20px;
  }
  .lnav-name {
    font-size: 13px;
  }
  .lnav-sub {
    font-size: 10px;
  }
  .lnav-mobile {
    padding: 14px 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. ГЕРОЙ
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  /* Шаг сетки первого экрана. ОДНО значение и для кнопок, и для плиток:
     когда они расходились (16 против 12), стык кнопок не совпадал со стыком
     плиток 2|3 — ряды выглядели съехавшими. Медиазапросы меняют только эту
     переменную. */
  --l-hero-gap: 16px;
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* без учёта адресной строки: герой не скачет на мобильном */
  background: var(--l-grad-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--l-nav-h) + 36px) 24px 60px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Плашка нормативов */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--l-blue-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
  max-width: 100%;
  position: relative;
  animation: l-fade-down 0.6s ease;
}
.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: l-pulse 2s infinite;
}

/* Заголовок. Нижняя граница clamp снижена с донорских 36px до 28px:
   «Исполнительная» на 320px при 36px/900 выходит за экран. */
.hero h1 {
  font-family: var(--l-font-display);
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  /* Ширина в ПИКСЕЛЯХ, не в em: при em предел зависит от кегля заголовка,
     и любая правка кегля молча меняла место переноса. */
  max-width: 1000px;
  position: relative;
  animation: l-fade-up 0.7s ease;
}
.hero h1 .accent {
  /* Золотая часть — отдельная строка меньшим кеглем: это обещание сервиса,
     а не его название, и в размер белой строки она не помещается. */
  display: block;
  font-size: clamp(17px, 2.6vw, 32px);
  line-height: 1.2;
  margin-top: 12px;
  margin-inline: auto;
  background: var(--l-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--l-gold); /* запасной вариант, если background-clip недоступен */
}

.hero-sub {
  font-size: clamp(15px, 2.5vw, 20px);
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto 28px;
  position: relative;
  animation: l-fade-up 0.8s ease;
}
.hero-sub strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Кнопки героя */
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
  position: relative;
  animation: l-fade-up 0.9s ease;
}
/* Кнопки выровнены по блоку плиток под ними: контейнер той же ширины (800px),
   каждая кнопка — ровно половина. Левая приходится на плитки 1-2, правая на
   3-4, и первый экран собирается по одной вертикали вместо трёх разных.

   Заодно кнопки стали одного размера между собой: раньше отличались и кегль
   (16 против 15), и поля (36 против 28) — пара читалась как случайная.
   Различает их вид (заливка против обводки), а не габарит. */
.hero-cta {
  /* Сетка, а не flex: две колонки 1fr дают РОВНО половины независимо от
     полей и кегля внутри кнопок. На flex ширины разъезжались (399 и 385). */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--l-hero-gap);
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
}
.btn-hero-main,
.btn-hero-sec {
  min-width: 0;
  font-size: 16px;
  padding: 16px 24px;
  line-height: 1.2;
}
.btn-hero-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--l-grad-cta);
  color: #fff;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--l-sh-cta);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-main:hover,
.btn-hero-main:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--l-sh-cta-hover);
  color: #fff;
}
.btn-hero-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-hero-sec:hover,
.btn-hero-sec:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.btn-hero-main svg,
.btn-hero-sec svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Стеклянные плитки со статистикой */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--l-hero-gap);
  max-width: 800px;
  width: 100%;
  position: relative;
}
/* Плитки без цифр (правка заказчика 18.08). Выравнивание — ПО ВЕРХУ:
   при вертикальном центрировании плитки с разным числом строк начинали
   текст на разной высоте и ряд читался неровным. Заголовок — отдельной
   строкой, текст под ним слева: центрированный мелкий абзац в четыре
   строки читается плохо. */
.hero-stat {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px 18px;
  text-align: left;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.2s;
}
.hero-stat:hover {
  transform: translateY(-4px);
}
.hero-stat-num {
  font-family: var(--l-font-display);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.hero-stat-label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0;
  line-height: 1.5;
}
.hero-stat-label b {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.35;
}

/* Доверительная плашка под плитками (у донора была инлайном) */
.l-body .hero-trust {
  margin-top: 18px;
  max-width: 720px;
  width: 100%;
  position: relative;
  /*  БЕЗ фона, рамки и радиуса — намеренно.
      С ними плашка повторяла оформление стат-карточек (у карточек фон белый
      с прозрачностью 0.08 и рамка 0.12, здесь было 0.06 и 0.1 — глаз этой
      разницы не видит) и читалась как пятая карточка, растянутая на всю
      ширину: блоки выглядели склеенными, сколько ни увеличивай отступ.
      По смыслу это подпись к цифрам выше, поэтому она и оформлена подписью. */
  padding: 0 12px;
  font-family: var(--l-font-display);
  font-size: clamp(13px, 1.7vw, 15.5px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
}

/* Первый экран обязан помещаться целиком: заголовок, подзаголовок, кнопки,
   плитки и строка под ними. На ноутбучных экранах нижняя строка обрезалась —
   поджимаем заголовок и вертикальные отступы, а не режем содержимое. */
@media (max-height: 1000px) {
  .hero { padding-top: calc(var(--l-nav-h) + 20px); padding-bottom: 32px; }
  .hero h1 { font-size: clamp(25px, 3.6vw, 40px); margin-bottom: 12px; }
  .hero-sub { margin-bottom: 22px; }
  .hero { --l-hero-gap: 12px; }
  .hero-cta { margin-bottom: 26px; }
  .hero-stat { padding: 14px 12px; }
  .hero-trust { margin-top: 14px; }
}

/* Вторая ступень — низкие окна ноутбуков (1366x768 даёт ~640 px высоты):
   при простом уменьшении отступов плитки всё равно уезжали за край. Здесь
   уменьшается сам масштаб первого экрана — кегль заголовка, подзаголовка
   и плиток. Ниже этого порога помещать всё уже нечем. */
@media (max-height: 820px) {
  .hero { padding-top: calc(var(--l-nav-h) + 12px); padding-bottom: 24px; }
  .hero h1 { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 10px; }
  .hero-sub { font-size: clamp(14px, 1.5vw, 16px); margin-bottom: 18px; }
  .hero-cta { margin-bottom: 20px; }
  .btn-hero-main, .btn-hero-sec { padding: 13px 20px; font-size: 15px; }
  .hero-stat { padding: 11px 10px; }
  .hero-stat-num { font-size: clamp(22px, 3vw, 28px); }
  .hero-trust { margin-top: 12px; font-size: 13px; }
  .exam-pill { margin-bottom: 14px; }
}

/* Третья ступень первого экрана — окна ниже 700 px (1366x768 после панелей
   браузера). Строка «Каждая форма ИД взята из норматива» — ответ на главное
   возражение, она обязана читаться без прокрутки, поэтому здесь ужимается
   всё остальное: заголовок, подзаголовок, кнопки и плитки. */
@media (max-height: 700px) {
  .hero { padding-top: calc(var(--l-nav-h) + 8px); padding-bottom: 18px; }
  .hero h1 { font-size: clamp(22px, 2.9vw, 32px); margin-bottom: 8px; }
  .hero h1 .accent { font-size: clamp(16px, 2.1vw, 24px); margin-top: 8px; }
  .hero-sub { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
  .hero { --l-hero-gap: 10px; }
  .hero-cta { margin-bottom: 14px; }
  .btn-hero-main, .btn-hero-sec { padding: 11px 16px; font-size: 14px; }
  .hero-stat { padding: 8px 8px; }
  .hero-stat-num { font-size: clamp(18px, 2.4vw, 22px); }
  .hero-stat-label { font-size: 10.5px; line-height: 1.3; }
  .hero-trust { margin-top: 10px; font-size: 12px; line-height: 1.4; }
  .exam-pill { margin-bottom: 10px; padding: 5px 12px; font-size: 10px; }
}

@media (max-width: 640px) {
  .hero {
    /* На низких экранах 100vh + плашка + h1 + 4 плитки не помещаются:
       фиксированная высота начинает резать контент. Отпускаем. */
    min-height: 0;
    padding: calc(var(--l-nav-h) + 28px) 20px 48px;
  }
  .hero { --l-hero-gap: 12px; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Телефон: кнопки столбиком во всю ширину. */
  .hero-cta {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. АНИМАЦИИ И ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   .visible вешает IntersectionObserver (threshold 0.1, rootMargin 0 0 -40px 0)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes l-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes l-fade-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes l-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
/* Шестая задержка добавлена: карточек возможностей по ТЗ шесть,
   у донора задержек было пять и последняя карточка появлялась без лесенки. */
.reveal-delay-6 { transition-delay: 0.6s; }

/* Страховка: если JS не выполнился, контент всё равно виден. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .l-body *,
  .l-body *::before,
  .l-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. ПАТТЕРН СЕКЦИИ
   маркер → заголовок → полоска → подзаголовок
   ═══════════════════════════════════════════════════════════════════════════ */

.section {
  padding: 80px 24px;
}
.section-tight {
  padding-top: 40px;
}
.section-flush {
  padding-top: 0;
}

.section-inner {
  max-width: var(--l-max);
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l-violet);
  margin-bottom: 14px;
}

.section-h {
  font-family: var(--l-font-display);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 900;
  color: var(--l-ink);
  line-height: 1.2;
  margin-bottom: 6px;
}

.section-line {
  width: 60px;
  height: 4px;
  background: var(--l-violet);
  margin: 20px auto 18px;
  border-radius: 2px;
}
/* Дефект референса: .section-line всегда центрируется через margin:auto,
   поэтому в левосторонних блоках (тёмная секция) полоска висела по центру
   колонки. Для таких блоков — этот вариант. */
.section-line-left {
  margin: 20px 0 18px;
}

.section-sub {
  font-size: 16px;
  color: var(--l-sub);
  max-width: 600px;
  line-height: 1.6;
}
.text-center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .section {
    padding: 56px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. «КАК ЭТО РАБОТАЕТ» — 4 шага с соединительной линией
   ═══════════════════════════════════════════════════════════════════════════ */

.how {
  background: var(--l-bg-1);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.how-steps::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #10b981);
  z-index: 0;
}

.how-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.how-step-num {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.how-step-num svg {
  width: 34px;
  height: 34px;
}
.how-step:nth-child(1) .how-step-num { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.how-step:nth-child(2) .how-step-num { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.how-step:nth-child(3) .how-step-num { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.how-step:nth-child(4) .how-step-num { background: linear-gradient(135deg, #10b981, #059669); }

.how-step h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--l-ink);
  margin-bottom: 10px;
}
.how-step p {
  font-size: 16px;
  color: var(--l-para);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .how-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .how-steps::before {
    display: none;
  }
}
@media (max-width: 480px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
  .how-step {
    padding: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. БОЛЕВЫЕ КАРТОЧКИ (красная гамма)
   ═══════════════════════════════════════════════════════════════════════════ */

.problems {
  background: var(--l-white);
}

.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.prob-card {
  border: 2px solid #fee2e2;
  background: #fff7f7;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.prob-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f97316);
}
.prob-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.prob-icon svg {
  width: 26px;
  height: 26px;
}
.prob-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #991b1b;
  margin-bottom: 8px;
  text-align: center;
}
.prob-card p {
  font-size: 15px;
  color: #7f1d1d;
  line-height: 1.6;
  opacity: 0.85;
  text-align: center;
}

@media (max-width: 768px) {
  .prob-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. КАРТОЧКИ ВОЗМОЖНОСТЕЙ — 6 пастельных градиентов
   ВНИМАНИЕ: классы f1…f6 задают И фон карточки, И фон иконки. Порядок карточек
   в разметке жёстко привязан к номеру класса — перестановка ломает палитру.
   ═══════════════════════════════════════════════════════════════════════════ */

.features {
  background: var(--l-white);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.feat-card {
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--l-line);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--l-sh-card-hover);
  border-color: transparent;
}

.feat-card.f1 { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.feat-card.f2 { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.feat-card.f3 { background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%); }
.feat-card.f4 { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); }
.feat-card.f5 { background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%); }
.feat-card.f6 { background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%); }

.feat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-icon svg {
  width: 27px;
  height: 27px;
}
.f1 .feat-icon { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.f2 .feat-icon { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.f3 .feat-icon { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.f4 .feat-icon { background: rgba(234, 88, 12, 0.15); color: #c2410c; }
.f5 .feat-icon { background: rgba(14, 165, 233, 0.15); color: #0369a1; }
.f6 .feat-icon { background: rgba(202, 138, 4, 0.15); color: #a16207; }

.feat-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--l-ink);
  margin-bottom: 10px;
}
.feat-card p {
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.7;
}
.feat-badge {
  display: inline-block;
  margin: 14px auto 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--l-list);
  padding: 5px 12px;
}

@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
  .feat-card {
    padding: 26px 22px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. ТЁМНАЯ СЕКЦИЯ — «Что такое исполнительная документация»
   ═══════════════════════════════════════════════════════════════════════════ */

.exam-section {
  background: linear-gradient(135deg, #001b3d 0%, #003b7a 100%);
  color: #fff;
}
.exam-inner {
  max-width: var(--l-max);
  margin: 0 auto;
  padding: 80px 24px;
}
.exam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.exam-left .section-tag { color: var(--l-blue-200); }
.exam-left .section-h { color: #fff; }
.exam-left .section-line { background: var(--l-blue-200); }
.exam-left .section-sub { color: rgba(255, 255, 255, 0.65); }
.exam-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.75;
}
.exam-left p + p {
  margin-top: 14px;
}
.exam-left a {
  color: var(--l-blue-200);
  text-decoration: underline;
}

.exam-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.exam-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.exam-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #4ade80;
}

.exam-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exam-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.exam-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.exam-card-icon svg {
  width: 22px;
  height: 22px;
}
.exam-card:nth-child(1) .exam-card-icon { background: rgba(59, 130, 246, 0.25); }
.exam-card:nth-child(2) .exam-card-icon { background: rgba(139, 92, 246, 0.25); }
.exam-card:nth-child(3) .exam-card-icon { background: rgba(16, 185, 129, 0.25); }
.exam-card:nth-child(4) .exam-card-icon { background: rgba(249, 115, 22, 0.25); }
.exam-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.exam-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .exam-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .exam-inner {
    padding: 56px 20px;
  }
}
@media (max-width: 420px) {
  .exam-pills {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. НОРМАТИВНАЯ БАЗА / СОСТАВ КОМПЛЕКТА
   Сетка донорских отзывов (.testi-grid/.testi-card) переиспользована под
   честный блок: отзывов у нас нет и выдумывать их нельзя.
   Звёзды и курсив (.testi-stars / font-style:italic) намеренно НЕ перенесены —
   курсив читается как цитата человека.
   ═══════════════════════════════════════════════════════════════════════════ */

.norms {
  background: var(--l-bg-1);
}

.norm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.norm-card {
  background: var(--l-white);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--l-line);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.norm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.norm-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--l-bg-3);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--l-violet);
  margin-bottom: 14px;
}
.norm-doc svg {
  width: 14px;
  height: 14px;
}
.norm-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--l-ink);
  line-height: 1.35;
  margin-bottom: 10px;
}
.norm-card p {
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.7;
}
.norm-list {
  list-style: none;
  margin-top: 14px;
  padding: 0;
}
.norm-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 15px;
  color: var(--l-list);
  line-height: 1.5;
}
.norm-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--l-ok);
  border-bottom: 2px solid var(--l-ok);
  transform: rotate(-45deg);
}
.norm-note {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  color: var(--l-faint);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .norm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .norm-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. СРАВНЕНИЕ — вручную в Word против сервиса
   У донора таблица не была обёрнута ничем прокручиваемым и на узких экранах
   переполняла страницу (маскировалось body{overflow-x:hidden}).
   Здесь обязательна обёртка .cmp-wrap — тот же приём, что .id-table-wrap.
   Второе (карточное) представление тех же данных НЕ переносится: дубль контента.
   ═══════════════════════════════════════════════════════════════════════════ */

.compare {
  background: var(--l-white);
}

.cmp-wrap {
  max-width: 900px;
  margin: 48px auto 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
}
.cmp-table th {
  padding: 16px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.cmp-table th:first-child {
  width: 44%;
}
.cmp-table th:not(:first-child) {
  text-align: center;
  width: 28%;
}
.cmp-th-us {
  background: var(--l-grad-blue);
  color: #fff;
  border-radius: 12px 12px 0 0;
}
.cmp-th-them {
  background: var(--l-bg-3);
  color: var(--l-sub);
  border-radius: 12px 12px 0 0;
}
.cmp-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--l-bg-3);
  font-size: 14px;
  color: var(--l-list);
}
.cmp-table td:not(:first-child) {
  text-align: center;
}
.cmp-table tr:nth-child(even) td {
  background: var(--l-bg-1);
}
.cmp-feat-name {
  font-weight: 600;
  color: var(--l-ink);
}
.cmp-us-col {
  background: rgba(0, 59, 122, 0.04) !important;
  font-weight: 700;
}
.cmp-yes {
  color: var(--l-ok);
}
.cmp-no {
  color: var(--l-no);
}
.cmp-partial {
  color: var(--l-warn);
  font-size: 13px;
  font-weight: 600;
}
.cmp-yes svg,
.cmp-no svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .cmp-table {
    font-size: 12px;
  }
  .cmp-table td,
  .cmp-table th {
    padding: 10px 10px;
    font-size: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. ТАРИФЫ
   Суммы — только из plans/plan_cards. В CSS ни одного числа цены.
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  /* Блок тарифов — экран выбора: карточка целиком, ВМЕСТЕ С КНОПКОЙ, должна
     попадать в поле зрения. Раньше кнопка «Оформить» срезалась нижним краем.
     Место отыграно НЕ сжатием карточек (внутри им нужен воздух, иначе цена и
     список слипаются), а заголовочной частью: над карточками стояли подряд
     заголовок, подзаголовок и зелёная полоса с отступами по 40 px. */
  padding-top: 36px;
  padding-bottom: 48px;
}
.pricing .section-sub { margin-bottom: 0; }
/* Полоска-разделитель между заголовком и подзаголовком: в блоке выбора она
   декоративная, а её отступы стоили 42 px высоты — ровно того места, которого
   не хватало кнопкам «Оформить». */
.pricing .section-line { margin: 10px auto 12px; }
/* Зелёная полоса встаёт В ОДНУ строку: при ширине 960 px текст переносился
   на вторую и полоса занимала 92 px вместо 50. Шире экран — шире полоса. */
.pricing .price-free-bar { max-width: 1180px; margin-top: 20px; padding: 12px 22px; }
.pricing .price-grid { margin-top: 20px; }

/* Внутри карточки воздух СОХРАНЁН: поджат только кегль цены — 48 px на трёх
   карточках в ряд смотрелись тяжеловесно и съедали высоту без пользы. */
.pricing .price-value { font-size: clamp(30px, 6vw, 42px); margin: 12px 0 4px; }
.pricing .price-period { margin-bottom: 22px; min-height: 0; }

/* Ноутбучные экраны (1366×768 и подобные): в поле зрения помещается заметно
   меньше, поэтому заголовочная часть поджимается ещё, а карточки — нет. */
@media (max-height: 900px) {
  .pricing { padding-top: 24px; padding-bottom: 36px; }
  .pricing .section-line { margin: 8px auto 10px; }
  .pricing .price-free-bar { margin-top: 14px; padding: 10px 18px; }
  .pricing .price-grid { margin-top: 14px; }
  .pricing .price-value { margin-top: 8px; }
  .pricing .price-list { margin-bottom: 20px; }
  .pricing .price-card { padding: 28px 24px; }
}

/* Полоса «Пробуйте бесплатно, карта не нужна» */
/* Ноутбуки 1366x768 и 1440x810: под шапкой остаётся 640-760 px, и одной
   заголовочной части уже не хватает — режется кнопка «Оформить», то есть ровно
   то, ради чего блок существует. Здесь ужимается и карточка, но по частям,
   которые ничего не значат: пустой ход у цены, поля и промежутки списка.
   Сам список условий и кнопка остаются в полном размере. */
@media (max-height: 800px) {
  .pricing { padding-top: 18px; padding-bottom: 28px; }
  .pricing .section-tag { margin-bottom: 6px; }
  .pricing .section-line { display: none; }
  .pricing .section-sub { font-size: 14.5px; line-height: 1.45; }
  .pricing .price-free-bar { margin-top: 10px; padding: 8px 16px; font-size: 14px; }
  .pricing .price-free-bar b { font-size: 14.5px; }
  .pricing .price-free-bar span { font-size: 14px; }
  .pricing .price-grid { margin-top: 10px; gap: 18px; }
  .pricing .price-card { padding: 20px 20px; }
  .pricing .price-name { margin-bottom: 4px; }
  .pricing .price-value { font-size: clamp(26px, 5vw, 34px); margin: 6px 0 2px; }
  .pricing .price-period { margin-bottom: 12px; }
  .pricing .price-list { margin-bottom: 14px; }
  .pricing .price-list li { padding: 7px 0; }
}

/* Совсем низкие окна: зелёная полоса уходит совсем — то же самое сказано
   в подзаголовке секции, а 50 px решают, видна кнопка или нет. */
@media (max-height: 700px) {
  .pricing .price-free-bar { display: none; }
  .pricing .section-sub { margin-bottom: 0; }
  .pricing { padding-top: 12px; }
  .pricing .price-card { padding: 14px 16px; }
  .pricing .price-list li { padding: 5px 0; }
  .pricing .price-period { margin-bottom: 8px; }
  /* Бейдж «Самый популярный» висит на 14 px выше карточки. При зазоре 10 px он
     садился прямо на вторую строку подзаголовка — поэтому здесь зазор ЕДИНСТВЕННОЕ
     место, которое не ужимается, а наоборот растёт. */
  .pricing .price-grid { margin-top: 24px; }
}

/* Телефон: карточки идут столбиком, и первая обязана помещаться на экран
   целиком вместе с кнопкой — иначе выбор тарифа выглядит обрезанным ещё
   до того, как человек до него долистал. Ужимается обвязка (полоса, поля),
   а не список условий. */
@media (max-width: 640px) {
  .pricing { padding-top: 28px; padding-bottom: 36px; }
  .pricing .section-sub { font-size: 15px; }
  .pricing .price-free-bar { margin-top: 16px; padding: 12px 16px; gap: 6px; }
  .pricing .price-free-bar b { font-size: 15px; }
  .pricing .price-free-bar span { font-size: 13.5px; line-height: 1.4; }
  .pricing .price-grid { margin-top: 16px; gap: 16px; }
  .pricing .price-card { padding: 22px 20px; }
  .pricing .price-value { margin: 8px 0 2px; }
  .pricing .price-period { margin-bottom: 14px; }
  .pricing .price-list { margin-bottom: 16px; }
  .pricing .price-list li { padding: 7px 0; }
}

.price-free-bar {
  max-width: 960px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px 24px;
  text-align: center;
}
.price-free-bar svg {
  width: 20px;
  height: 20px;
  color: var(--l-ok);
  flex-shrink: 0;
}
.price-free-bar b {
  color: #14532d;
  font-size: 16px;
  font-weight: 800;
}
.price-free-bar span {
  color: #166534;
  font-size: 15px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 40px auto 0;
  align-items: stretch;
}

.price-card {
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  border: 2px solid var(--l-line);
  background: var(--l-white);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--l-sh-card-hover);
}
.price-card.popular {
  border-color: var(--l-navy-900);
  box-shadow: 0 8px 40px rgba(0, 59, 122, 0.2);
}

.price-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--l-grad-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 20px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.price-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--l-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.price-value {
  font-family: var(--l-font-display);
  /* clamp вместо жёстких 48px: «46 900 ₽» в карточке ~300px на экране 360px
     впритык и переносится на вторую строку. */
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 900;
  color: var(--l-ink);
  line-height: 1;
  margin: 16px 0 4px;
  white-space: nowrap;
  letter-spacing: -1px;
}
.price-value small {
  /* Намеренно системный шрифт, а не Montserrat: во-первых, вес 500 лежит вне
     объявленного диапазона 700–900 переменного шрифта и был бы прижат к 700;
     во-вторых, ₽ (U+20BD) сидит в подмножестве latin-ext — из-за одного знака
     рубля браузер тянул бы лишний файл шрифта. */
  font-family: var(--l-font-body);
  font-size: 0.42em;
  font-weight: 500;
  color: var(--l-faint);
  letter-spacing: 0;
}
.price-period {
  font-size: 14px;
  color: var(--l-faint);
  margin-bottom: 28px;
  min-height: 20px;
}

.price-list {
  list-style: none;
  text-align: left;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}
.price-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--l-bg-3);
  font-size: 15px;
  color: var(--l-list);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.price-list li:last-child {
  border-bottom: none;
}
.price-list li.off {
  color: var(--l-faint);
}
.price-check,
.price-cross {
  flex-shrink: 0;
  margin-top: 3px;
  width: 15px;
  height: 15px;
}
.price-check {
  color: var(--l-ok);
}
.price-cross {
  color: #cbd5e1;
}

.price-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  margin-top: auto;
}
.price-btn-outline {
  background: var(--l-white);
  color: var(--l-navy-900);
  border: 2px solid var(--l-navy-900);
  padding: 12px;
}
.price-btn-outline:hover {
  background: var(--l-navy-900);
  color: #fff;
}
.price-btn-main {
  background: var(--l-grad-blue);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 59, 122, 0.35);
}
.price-btn-main:hover {
  box-shadow: 0 10px 30px rgba(0, 59, 122, 0.45);
  transform: translateY(-1px);
  color: #fff;
}
.price-btn-orange {
  background: var(--l-grad-cta);
  color: #fff;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.price-btn-orange:hover {
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
  color: #fff;
}

.price-guarantee {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--l-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.6;
}
.price-guarantee svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--l-navy-900);
}

/* Строка для организаций (счёт и закрывающие документы) */
.price-corp {
  max-width: 960px;
  margin: 24px auto 0;
  background: var(--l-white);
  border: 1px solid var(--l-line);
  border-radius: 16px;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.price-corp-text {
  flex: 1;
  min-width: 240px;
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.6;
}
.price-corp-text b {
  display: block;
  color: var(--l-ink);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}
.price-corp-link {
  color: var(--l-navy-900);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 59, 122, 0.35);
}

@media (max-width: 900px) {
  .price-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. ВОПРОСЫ И ОТВЕТЫ — аккордеон
   Реализация ОДНА: класс .open на .faq-item вешает JS лендинга.
   У донора аккордеон был сделан дважды (Alpine + голый JS) и обработчики
   дрались за один и тот же класс. Alpine здесь не нужен.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq {
  background: var(--l-white);
}

.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--l-line);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--l-ink);
  line-height: 1.45;
  transition: color 0.2s;
}
.faq-q:hover,
.faq-q:focus-visible {
  color: var(--l-navy-900);
}
.faq-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--l-bg-3);
  color: var(--l-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.2s, color 0.2s;
}
.faq-chevron svg {
  width: 14px;
  height: 14px;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--l-navy-900);
  color: #fff;
}
.faq-a {
  padding: 0 0 20px;
  font-size: 16px;
  color: var(--l-para);
  line-height: 1.8;
  display: none;
  max-width: 62ch;
}
.faq-item.open .faq-a {
  display: block;
}
.faq-a a {
  color: var(--l-navy-900);
  text-decoration: underline;
}
.faq-a p + p {
  margin-top: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. ФИНАЛЬНЫЙ ПРИЗЫВ
   ═══════════════════════════════════════════════════════════════════════════ */

.final-cta {
  background: linear-gradient(135deg, #001b3d 0%, #003b7a 50%, #0a4fa6 100%);
  text-align: center;
  padding: 96px 24px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59, 130, 246, 0.15), transparent);
  pointer-events: none;
}
.final-cta h2 {
  font-family: var(--l-font-display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  /* Без ограничения ширины заголовок на 1920px растягивается от края до края
     и выпадает из ритма 1100px-контейнера остальных секций. */
  max-width: 900px;
  margin: 0 auto 16px;
  position: relative;
}
.final-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 40px;
  position: relative;
  max-width: 520px;
  line-height: 1.7;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--l-grad-cta);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  padding: 18px 48px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  box-shadow: 0 8px 40px rgba(249, 115, 22, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
/*  Размер стрелки задаём явно. Без этого правила у значка нет ни width,
    ни height (в разметке только viewBox), и браузер растягивает его до
    размера по умолчанию: стрелка выходила больше самой надписи, отжимала
    текст и рвала «Начать бесплатно» на две строки.
    nowrap — чтобы надпись в кнопке действия не переносилась в принципе. */
.final-cta-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.final-cta-btn {
  white-space: nowrap;
}
.final-cta-btn:hover,
.final-cta-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 60px rgba(249, 115, 22, 0.6);
  color: #fff;
}
.final-note {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-top: 16px;
  position: relative;
}

@media (max-width: 640px) {
  .final-cta {
    padding: 64px 20px;
  }
  .final-cta-btn {
    width: 100%;
    padding: 18px 24px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. ПОДВАЛ
   ═══════════════════════════════════════════════════════════════════════════ */

.lfooter {
  background: var(--l-footer);
  color: rgba(255, 255, 255, 0.5);
  padding: 40px 24px 32px;
  text-align: center;
}
.lfooter-top {
  display: flex;
  justify-content: center;
  gap: 12px 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lfooter-link {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  transition: color 0.2s;
}
.lfooter-link:hover,
.lfooter-link:focus-visible {
  color: rgba(255, 255, 255, 0.85);
}
.lfooter-sep {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  margin-top: 4px;
}
.lfooter-contacts {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.lfooter-contacts a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}
.lfooter-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. COOKIE-БАННЕР И КНОПКА «НАВЕРХ»
   На standalone-лендинге они не подтянутся из base.html — разметку надо
   продублировать в шаблоне, оформление берётся отсюда.
   Значения 1:1 с base.html, чтобы баннер выглядел одинаково на всех страницах.
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body #cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  padding: 20px 24px;
  border-top: 1px solid var(--l-line);
}
.l-body #cookie-banner.show {
  display: block;
}
.cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  min-width: 260px;
}
.cookie-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--l-ink);
  margin-bottom: 4px;
}
.cookie-text p {
  font-size: 13px;
  color: var(--l-para);
  line-height: 1.5;
}
.cookie-text a {
  color: var(--l-navy-900);
  text-decoration: underline;
}
/* Кнопка согласия — тем же оранжевым градиентом, что и остальные кнопки действия.
   Тёмно-синяя заливка сливалась с шапкой и читалась плохо.
   Селектор с .l-body обязателен: правило сброса `.l-body button { color: inherit }`
   специфичнее одиночного класса и иначе перекрашивает надпись в тёмный. */
.l-body .cookie-accept {
  background: var(--l-grad-cta);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.l-body .cookie-accept:hover,
.l-body .cookie-accept:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.42);
}
.cookie-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--l-faint);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
}

.l-scroll-top {
  position: fixed;
  bottom: 90px;
  left: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--l-line);
  background: rgba(255, 255, 255, 0.95);
  color: var(--l-navy-900);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.l-scroll-top.show {
  display: flex;
}
.l-scroll-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  /* На телефоне баннер про cookie не должен съедать первый экран: в полном виде
     он закрывал половину героя вместе с кнопкой действия. Ужимаем отступы и
     кегль, кнопку возвращаем в строку — блок занимает около четверти высоты. */
  .l-body #cookie-banner {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 42vh;
    overflow-y: auto;
  }
  /* Текст занимает всю строку, кнопка уходит под него: если пустить их в одну
     строку, кнопка отбирает ширину и текст переносится по два слова. */
  .cookie-inner {
    gap: 8px;
    align-items: stretch;
    flex-direction: column;
  }
  .cookie-text {
    min-width: 0;
    flex: none;
    padding-right: 28px; /* место под крестик закрытия */
  }
  .cookie-text b {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .cookie-text p {
    font-size: 12px;
    line-height: 1.4;
  }
  .cookie-accept {
    width: 100%;
    flex: none;
    padding: 11px 18px;
    font-size: 13px;
  }
  .cookie-close {
    position: absolute;
    top: 8px;
    right: 10px;
  }
  /* На телефоне карточки идут во всю ширину, и круглая кнопка «наверх»
     ложилась прямо на «Оформить» — то есть перекрывала кнопку оплаты.
     Прокрутка пальцем на телефоне и так быстрая, поэтому кнопка убирается. */
  .l-scroll-top,
  .l-scroll-top.show {
    display: none;
  }
}

/* Совсем узкие экраны: текст согласия ужимаем до сути, подробности остаются
   по ссылке на политику. */
@media (max-width: 400px) {
  .cookie-text p {
    font-size: 11.5px;
  }
  .l-body #cookie-banner {
    max-height: 38vh;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. ФОКУС (доступность)
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body a:focus-visible,
.l-body button:focus-visible {
  outline: 2px solid var(--l-orange);
  outline-offset: 3px;
}
.hero a:focus-visible,
.hero button:focus-visible,
.lnav a:focus-visible,
.lnav button:focus-visible,
.final-cta a:focus-visible,
.final-cta button:focus-visible {
  outline-color: var(--l-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. ПЕЧАТЬ
   Лендинг печатают редко, но пусть не съедает тонер градиентами.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .lnav,
  .lnav-mobile,
  .l-scroll-top,
  #cookie-banner,
  .hero-grid {
    display: none !important;
  }
  .l-body {
    background: #fff;
  }
  .hero,
  .final-cta,
  .exam-section {
    background: #fff !important;
    color: #000 !important;
    min-height: 0 !important;
    padding: 24px 0 !important;
  }
  .hero h1,
  .hero-sub,
  .final-cta h2,
  .final-cta p,
  .exam-card h4,
  .exam-card p,
  .exam-pill {
    color: #000 !important;
  }
  .hero h1 .accent {
    -webkit-text-fill-color: #000;
    color: #000;
  }
  /* transition обязателен: без него браузер печатает блок в середине
     перехода 0→1 и на бумаге получается полупрозрачный текст.
     Блоки ниже первого экрана вообще не получают .visible — только это
     правило делает их видимыми при печати. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section {
    padding: 24px 0 !important;
    break-inside: avoid;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. СОВМЕСТИМОСТЬ С base.html (страховка)
   Основной путь — standalone-лендинг без base.html.
   Если лендинг всё-таки оставят на {% extends "base.html" %}, .nos-content
   (max-width:1100px + padding) не даст секциям растянуться на всю ширину,
   а .nos-header встанет над героем. Блок ниже снимает ограничения контейнера
   и прячет шапку/подвал кабинета — но только когда .nos-content реально есть
   на странице, поэтому standalone-вариант он не задевает.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports selector(:has(*)) {
  .l-body:has(.nos-content) .nos-content,
  .l-body:has(.nos-content) .nos-content-wide,
  .l-body:has(.nos-content) .nos-content-narrow {
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .l-body:has(.nos-content) .nos-header,
  .l-body:has(.nos-content) .nos-footer,
  .l-body:has(.nos-content) .nos-mobile-nav {
    display: none;
  }
}
