/* Consolidated design deltas: v0.5 + footer v20 + contacts v1/v3 + screenshot hotfix.
   Order and computed behavior preserved; dead overrides removed. */

/* ═══════════════════════════════════════════════════════
   v0.5 delta — fixed glass header, nav, subnav, CTA, footer
   Подключить ПОСЛЕ components.css. Новых компонентов вне ТЗ нет.
   Новых токенов не требует: tint и blur выражены существующими токенами.
   ═══════════════════════════════════════════════════════ */

/* ── Fixed glass-header ────────────────────────────────
   База без backdrop-filter полностью непрозрачна.
   Не используем ::before с z-index:-1: backdrop-filter создаёт stacking
   context, и отрицательный слой может уйти за фон самого header. Фон и blur
   ставятся на header напрямую — pointer-events остаются у контента. */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  isolation: isolate;
  --section-bg: var(--clr-surface);
  background: var(--section-bg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    --section-bg: color-mix(in srgb, var(--clr-surface) 86%, transparent);
    background: var(--section-bg);
    -webkit-backdrop-filter: blur(var(--sp-3));
    backdrop-filter: blur(var(--sp-3));
  }
}

/* Fixed-header выводится из потока: offset ровно здесь, не на body. */
.main { padding-block-start: var(--header-h); }

/* Структура desktop-header и dropdown. Разметка — nav > ul > li > a + ul. */
.header__logo {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--sp-10) + var(--sp-1));
}
.header__logo svg { display: block; width: auto; height: var(--sp-8); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.nav__item { position: relative; }
.nav__sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--z-sticky);
  min-width: 16rem;
  padding: var(--sp-2);
  visibility: hidden;
  --section-bg: var(--clr-surface);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { visibility: visible; }
.nav__sub-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--sp-10) + var(--sp-1));
  padding-inline: var(--sp-3);
}
.nav__sub-link::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: 0;
  height: var(--bw-1);
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__sub-link:hover::after,
.nav__sub-link:focus-visible::after,
.nav__sub-link[aria-current="page"]::after { transform: scaleX(1); }

/* Родитель сохраняет линию, пока открыт dropdown — hover или keyboard focus. */
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after { transform: scaleX(1); }

/* Desktop actions: телефон + theme-toggle. */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header__phone {
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-3);
  color: var(--clr-primary);
  font-weight: var(--fw-semi);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-full);
}
.header__phone svg {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bw-1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header__phone:hover { background: var(--clr-primary-a10); }
.header__phone-number { white-space: nowrap; }
.theme-toggle {
  min-width: calc(var(--sp-10) + var(--sp-1));
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: inline-grid;
  place-items: center;
}

/* ── Меню: линия из центра, без layout-сдвига ───────── */
.nav__link {
  position: relative;
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--bw-1);
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ── Sub-nav glass + pill ───────────────────────────── */
.subnav {
  --section-bg: var(--clr-surface);
  background: var(--section-bg);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .subnav {
    --section-bg: color-mix(in srgb, var(--clr-surface) 86%, transparent);
    background: var(--section-bg);
    -webkit-backdrop-filter: blur(var(--sp-3));
    backdrop-filter: blur(var(--sp-3));
  }
}
/* ── CTA-banner — перед футером на внутренних страницах */
.cta-banner {
  --section-bg: var(--clr-brand);
  background: var(--section-bg);
  color: var(--clr-on-brand);
  /* Было sp-10 (40px) — своё значение, не связанное с ритмом секций: после
     7046495 баннер оказался уже секций на 24px (13 носителей). Теперь берёт
     --section-py, как .section, поэтому расходиться больше не может. */
  padding-block: var(--section-py);
}
.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.cta-banner__title { color: var(--clr-on-brand); }
.cta-banner__text { color: var(--clr-on-brand); }
.cta-banner__btn { flex-shrink: 0; }

@media (max-width: 1024px) {
  .header__phone-number { display: none; }
  .header__phone {
    min-width: calc(var(--sp-10) + var(--sp-1));
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  .cta-banner__inner { align-items: stretch; flex-direction: column; }
  .cta-banner__btn { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .nav__sub-link::after { transition: none; }
}

/* ── Theme-toggle icons ───────────────────────────────
   Один partial используется в header и footer. Иконки наследуют currentColor;
   состояние сообщает aria-pressed кнопки, SVG скрыты от AT. */
.theme-toggle__icon {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bw-1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }

/* ── Subnav v0.5: компактная строка + Figma-line ──────
   Pill снят: 44px внутри строки раздувал высоту, разделители уходили с baseline.
   Тап-цель ссылки остаётся ≥44px; aria-current — источник состояния. */
.subnav__inner {
  align-items: center;
  gap: var(--sp-2);
  min-height: calc(var(--sp-12) + var(--sp-2));
  padding-block: 0;
  font-size: var(--fs-base);
}
.subnav__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: calc(var(--sp-12) + var(--sp-2));
}
.subnav__crumb a,
.subnav__crumb [aria-current="page"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
}
/* Ссылки — тап-цели 44px; текущий span — маркер, не контрол,
   поэтому не раздувает строку min-height. */
.subnav__crumb a { min-height: calc(var(--sp-10) + var(--sp-1)); }
.subnav__crumb [aria-current="page"] { min-height: calc(var(--sp-10) + var(--sp-1)); }
.subnav__crumb a::after,
.subnav__crumb [aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--bw-1);
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.subnav__crumb [aria-current="page"]::after {
  inset-inline: 0;
  inset-block-end: 0;
  border-radius: var(--radius-full);
  animation: figma-marker-in var(--dur-base) var(--ease-out) both;
}
.subnav__crumb a:hover::after,
.subnav__crumb a:focus-visible::after,
.subnav__crumb [aria-current="page"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .subnav__crumb a::after,
  .subnav__crumb [aria-current="page"]::after { transition: none; }
}

/* Якорь реквизитов — div, поэтому .section[id] из layout.css его не охватывает. */
#requisites { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }


/* Feedback 2026-08-16: breadcrumbs Figma marker + unified footer + brand card.
   Подключить после v05-delta.css. Новых токенов нет. */

/* Текущая страница: короткий Figma-marker, не text underline. */
@keyframes figma-marker-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 4 смысловые группы: Бренд · Услуги · Компания · Документы.
   v21 (Freony 4009030, вариант 2): четыре РАВНЫЕ доли. При container 1200 и
   gap --sp-8 это 276px на колонку — все 13 подписей меню влезают в одну строку
   (самая длинная «Юридическое сопровождение» ≈194px), поэтому услуги идут
   ОДНИМ столбцом: в подколонке 126px они бы переносились. */
.footer__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.footer__group { align-self: start; min-width: 0; }
.footer__title {
  min-height: calc(var(--sp-8) + var(--sp-2));
  margin-block-end: var(--sp-3);
  display: flex;
  align-items: center;
  font-family: var(--ff-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.footer__link {
  /* display ОБЯЗАТЕЛЕН: без него min-height и width: fit-content (стр. 650)
     не применяются — на inline-элементе оба свойства инертны. Из-за этого
     пункты меню подвала не были выровнены по вертикали, а тап-цель 44px
     существовала только на бумаге (замер: 198 носителей на 19 страницах).
     inline-flex + align-items: center — тот же приём, что у рабочего
     .footer__brand-logo (site.css:313-317), а не новое решение. */
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--sp-10) + var(--sp-1));
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* Бренд-плашка: логотип + описание + ряд 44×44 действий. */
.footer__brand-card {
  padding: var(--sp-5);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-lg);
  background: var(--clr-primary-a10);
}
.footer__brand-logo {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--sp-10) + var(--sp-1));
  margin-block-end: var(--sp-3);
}
.footer__brand-logo svg { width: auto; height: var(--sp-8); }
/* Слоган в бренд-плашке (Freony 4035147): «как в шапке» — типографика
   .header__slogan (components.css), но цвет — как остальной текст плашки
   (--clr-text, не текст-3 шапки): подвал чаще над видеофоном/тёмной темой,
   дескрипторное затухание там не проходит по контрасту. nowrap снят ВСЕГДА,
   не только на мобильном: колонка карточки ~240px уже десктопа, слоган
   с letter-spacing в неё целиком не помещается — перенос по словам
   «ПОДДЕРЖКА. / УВЕРЕННОСТЬ. / РОСТ.» держит смысловую разбивку точек. */
.footer__slogan {
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  line-height: 1.35;
  margin-inline-start: var(--sp-3);
}
.footer__brand-text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--clr-text);
}
.footer__socials {
  margin-block-start: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer__social-link {
  width: calc(var(--sp-10) + var(--sp-1));
  height: calc(var(--sp-10) + var(--sp-1));
  display: grid;
  place-items: center;
  color: var(--clr-primary);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-md);
}
.footer__social-link:hover { background: var(--clr-primary-a10); }
.footer__social-icon {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bw-1);
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  /* v21: услуги больше НЕ занимают всю полосу — список стал одноколоночным,
     span оставлял половину ряда пустой. Раскладка: бренд, затем
     Услуги|Компания, затем Документы. */
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .subnav__crumb [aria-current="page"]::after { animation: none; }
}


/* Contacts page — подключить после footer-subnav-v20.css. */
.page-nav {
  --section-bg: var(--clr-surface);
  position: relative;
  background: var(--section-bg);
  border-block-end: var(--bw-1) solid var(--clr-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-nav {
    --section-bg: color-mix(in srgb, var(--clr-surface) 86%, transparent);
    background: var(--section-bg);
    -webkit-backdrop-filter: blur(var(--sp-3));
    backdrop-filter: blur(var(--sp-3));
  }
}
.page-nav__inner {
  min-height: calc(var(--sp-12) + var(--sp-2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.page-nav__list {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.page-nav__link {
  position: relative;
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.page-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--bw-1);
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.page-nav__link:hover::after,
.page-nav__link:focus-visible::after { transform: scaleX(1); }

.contact-card__value {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  overflow-wrap: anywhere;
}
.requisites-list {
  display: grid;
  grid-template-columns: minmax(8rem, .5fr) minmax(0, 1.5fr);
  gap: var(--sp-3) var(--sp-6);
  max-width: 48rem;
}
.requisites-list dt { color: var(--clr-text-3); }
.requisites-list dd { min-width: 0; overflow-wrap: anywhere; }

#contacts-cards,
#form,
#requisites { scroll-margin-top: calc(var(--header-h) + var(--sp-12) + var(--sp-4)); }

@media (max-width: 768px) {
  .page-nav__inner { align-items: stretch; flex-direction: column; padding-block: var(--sp-2); }
  .page-nav__list {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .requisites-list { grid-template-columns: 1fr; gap: var(--sp-1); }
  .requisites-list dd + dt { margin-block-start: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .page-nav__link::after { transition: none; }
}

/* Добавить к contacts-v1.css. Существующие field/input правила живут в base.css. */
#form .form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 48rem;
}
.form-status:empty { display: none; }
.form-status--visible {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-on-disabled);
  background: var(--clr-disabled-bg);
  border: var(--bw-1) solid var(--clr-on-disabled);
  border-radius: var(--radius-md);
}


/* Contacts v3 — подключить после contacts-v1.css. */
.page-hero__badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-8);
  margin-block-end: var(--sp-4);
  padding-inline: var(--sp-3);
  color: var(--clr-brand);
  border: var(--bw-1) solid var(--clr-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
}
.page-hero__lead {
  max-width: 46rem;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
}

/* ── Услуги: верхняя часть с видеофоном (Freony 4006747: пространство под
   шапкой делится надвое, верхняя — текст + видеофон, текст поднят выше).
   Паттерн .section--video тарифных дословно; отличия этого контекста:
   (1) фолбэк нейтральный --clr-video-fallback, не брендовая синева;
   (2) у ролика day-night есть ЧИСТО БЕЛЫЕ кадры (max luma 255/255, день) —
   белый текст по scrim .42 даёт CR ~2.9, поэтому ВСЕ элементы текста несут
   СОБСТВЕННЫЕ подложки, прецеденты media-overview: h1 — тёмная плашка
   заголовка (CR 12.2), lead + нарратив — светлая surface-панель с обычными
   темами-цветами текста (media-overview__group, color-mix surface 96%).
   Scrim остаётся лёгким и нейтральным — палитра ролика проходит насквозь.
   (3) «Поднять выше»: верхний padding sp-8 вместо sp-12 у .page-hero, и
   нарратив больше не отбивается padding'ом отдельной секции (было ~128px
   двойной отбивки между hero и нарративом). */
.services-hero {
  --section-bg: var(--clr-video-fallback);
  padding-block-start: var(--sp-8);
}
.services-hero .page-hero__title {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-on-video);
  background: var(--clr-video-heading-bg);
  border-radius: var(--radius-md);
}
.services-hero .page-hero__lead,
.services-hero .service-narrative {
  --section-bg: color-mix(in srgb, var(--clr-surface) 96%, var(--clr-bg));
  padding: var(--sp-5) var(--sp-6);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.services-hero .service-narrative { margin-block-start: var(--sp-6); }

.contacts-section {
  --section-bg: var(--clr-bg);
  padding-block: var(--section-py);
  background: var(--section-bg);
}
.contacts-section .contacts-layout > * > .section {
  padding-block: 0;
  background: transparent;
}
.contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap: var(--sp-10);
  align-items: start;
}
.contacts-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
}
.contacts-layout__aside { min-width: 0; }
.contacts-layout__aside #form { padding-block: var(--sp-6) var(--sp-10); }
.contact-form-card {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--page-nav-h, 3.25rem) + var(--sp-4));
  padding: var(--sp-6);
  --section-bg: var(--clr-surface);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.contact-form-card__lead {
  margin-block: var(--sp-2) var(--sp-6);
  color: var(--clr-text-3);
}

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact-card {
  display: grid;
  grid-template-columns: calc(var(--sp-10) + var(--sp-1)) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.contact-card__icon {
  width: calc(var(--sp-10) + var(--sp-1));
  height: calc(var(--sp-10) + var(--sp-1));
  display: grid;
  place-items: center;
  color: var(--clr-primary);
  background: var(--clr-primary-a10);
  border-radius: var(--radius-md);
}
.contact-card__icon svg {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bw-1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card__title {
  margin-block-end: var(--sp-1);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--clr-text);
}
.contact-card__note {
  margin-block-start: var(--sp-1);
  color: var(--clr-text-3);
  font-size: var(--fs-sm);
}

.contact-form-card .form { max-width: none; }
.contact-form__service { width: 100%; }
.contact-form__consent {
  /* Теперь НЕ div, а label (логика образца Freony 4035574): обнимает чекбокс
     и текст — клик в любом месте строки переключает согласие. Ссылки внутри
     лейбла клик не перехватывают чекбоксом (интерактивные потомки глотают
     клик), курсор указателя — сигнал кликабельности всей строки. */
  display: grid;
  grid-template-columns: var(--sp-5) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.contact-form__consent input {
  width: var(--sp-5);
  height: var(--sp-5);
  margin-block-start: var(--sp-1);
  accent-color: var(--clr-primary);
}
/* Необязательное согласие на рассылку (образец Freony 4036330): пометка
   «(необязательно)» — em из образца, приглушена, курсив эмфазы сохранён. */
.contact-form__consent--optional em { color: var(--clr-text-3); }

@media (max-width: 1024px) {
  .contacts-layout { grid-template-columns: 1fr; }
  .contact-form-card { position: static; }
  .contacts-layout__aside #form { padding-block: var(--section-py); }
}
@media (max-width: 768px) {
  .contacts-layout { gap: var(--sp-6); }
  .contact-form-card { padding: var(--sp-4); }
}


/* Contacts visual gate — fixes proven by real browser render. */

/* Contact media-object becomes a real surface card. */
.contact-card {
  --section-bg: var(--clr-surface);
  padding: var(--sp-5);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Requisites is a surface panel inside the shared contacts background. */
#requisites {
  --section-bg: var(--clr-surface);
  padding: var(--sp-6);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-border);
  border-radius: var(--radius-lg);
}

/* Active anchor: short Figma marker, not full-width underline. */
.page-nav__link[aria-current="location"]::after {
  inset-inline: 22%;
  border-radius: var(--radius-full);
  transform: scaleX(1);
}

/* Contacts: page-nav занимает отдельную полосу — верхний ритм hero не дублируем. */
.page-nav + .page-hero { padding-block-start: var(--sp-4); }

/* ── Footer: живые правила v0.5, потерянные при консолидации (восстановлены по e8ecedf) ── */
.footer__services { min-width: 0; }
/* Ритм пунктов меню — ОДНО правило на все три списка (Freony 4008061).
   До этого шаг задавался тремя разными механизмами и расходился: services-list
   grid без row-gap (44px), .footer__list flex + gap --sp-2 (52px),
   documents-list вообще без правил (22-36px). Шаг несёт min-height ссылки
   (.footer__link, 44px = тап-цель), поэтому row-gap здесь строго 0:
   любой зазор сверх него снова разведёт колонки. */
.footer__services-list,
.footer__company .footer__list,
.footer__documents-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
  font-size: var(--fs-sm);
}
.footer__legal {
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer__theme-toggle {
  min-width: calc(var(--sp-10) + var(--sp-1));
  min-height: calc(var(--sp-10) + var(--sp-1));
  display: inline-grid;
  place-items: center;
}
.footer__list a,
.footer__link {
  position: relative;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}
.footer__list a::after,
.footer__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--bw-1);
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer__list a:hover::after,
.footer__list a:focus-visible::after,
.footer__link:hover::after,
.footer__link:focus-visible::after,
.footer__link[aria-current="page"]::after { transform: scaleX(1); }
/* v21: мобильного разворота services-list больше нет — список одноколоночный
   на всех ширинах, правило было бы пустым. */
@media (prefers-reduced-motion: reduce) {
  .footer__list a::after,
  .footer__link::after { transition: none; }
}

/* Pricing video overview — merge into site.css after gate. */
.media-overview {
  --section-bg: var(--clr-video-fallback); /* нейтральный фолбэк-фон без синевы */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--section-bg);
}
.media-overview__video,
.media-overview__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.media-overview__video {
  z-index: -2;
  object-fit: cover;
  /* Без brightness/saturate — палитра ролика не искажается; текст лежит
     на собственных непрозрачных подложках (заголовок + карточки). */
}
/* Нейтральный (без hue) скрим — сохраняет родную палитру ролика, только
   слегка притемняет. НЕ является WCAG-подложкой текста (текст на своих
   собственных подложках ниже). Синева бренда убрана. */
.media-overview__shade {
  z-index: -1;
  background: var(--clr-video-scrim-pricing);
}
.media-overview__content {
  position: relative;
  z-index: 1;
}
/* У видео есть почти белые кадры (max luminance .99), а нейтральный scrim
   намеренно лёгкий (палитра не искажается). Поэтому весь текст лежит на
   собственной непрозрачной/почти непрозрачной подложке (см. ниже). */
.media-overview__heading {
  display: inline-block;
  margin-block-end: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-on-video);
  background: var(--clr-video-heading-bg); /* нейтральная подложка заголовка над видео, без синевы; белый текст CR 12.2 */
  border-radius: var(--radius-md);
}
.media-overview__group {
  --section-bg: color-mix(in srgb, var(--clr-surface) 96%, var(--clr-bg));
  padding: var(--sp-6);
  background: var(--section-bg);
  color: var(--clr-text);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.media-overview__group + .media-overview__group { margin-block-start: var(--sp-6); }
.media-overview__group h3 { color: var(--clr-brand); margin-block-end: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  .media-overview__video { display: none; }
  .media-overview__shade { background: var(--clr-video-fallback); }
}

.media-overview__group .media-overview__text { margin-block-end: var(--sp-4); }
.section__action { margin-block-start: var(--sp-10); }
/* Заголовок секции: класс использовался в 5 шаблонах (21 раз), но НЕ имел ни
   одного объявления — universal reset снимал margin, и 40px-заголовок вплотную
   упирался в предыдущий блок (замер: 0px на index/services/about/contacts и
   страницах услуг). Отбивка --sp-6 как у .service-narrative — соседи ниже уже
   дают 24px, поэтому ритм становится симметричным. */
/* Отбивка СНИЗУ шла не от заголовка, а от соседей: .service-scope /
   .service-narrative и др. несут свой margin-block-start. Где следующий блок
   его НЕ несёт, зазор был 0 — замер: index «Услуги»/«Тарифы» вплотную к
   .grid--3, contacts «Реквизиты» вплотную к .requisites-list. Своя отбивка
   снимает зависимость от соседа, а где сосед её уже даёт — margin'ы
   collapse'ятся в те же 24px (сверено на 10 страницах × 1440/375). */
.section__title { margin-block: var(--sp-6); }
/* Когда заголовок открывает секцию, ВЕРХНИЙ отступ осиротевший и складывается с
   padding'ом секции — тот же краевой случай, что у .service-narrative. */
.section__title:first-child { margin-block-start: 0; }

/* Видео-фон секции (за плашками тарифов — самая большая секция страницы).
   Видео cover за контентом, затемняющий слой для читаемости section-level
   текста; карточки — непрозрачные surface, читаемы поверх видео. */
.section--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --section-bg: var(--clr-brand);
}
.section__video,
.section__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.section__video {
  z-index: -2;
  object-fit: cover;
  /* Без brightness/tone-фильтра — палитра ролика не искажается.
     Единственное затемнение — нейтральный scrim ниже. */
}
/* Единственный нейтральный (без hue) затемняющий слой — сохраняет родную
   палитру ролика (никаких brightness/tone фильтров на видео), только
   притемняет для читаемости. Плотность 60% гарантирует AA для белого
   section-level текста над самым ярким кадром (замерено worst-case CR 5.74).
   Синева бренда убрана — палитра исходников проходит насквозь. */
.section__shade {
  z-index: -1;
  background: var(--clr-video-scrim-detail);
}
.section--video > .container { position: relative; z-index: 1; }
/* Section-level текст/кнопка поверх видео — белый в обеих темах на
   СОБСТВЕННОЙ непрозрачной подложке (--clr-video-panel), поэтому AA держится
   независимо от плотности scrim и яркости кадра (scrim теперь лёгкий .42). */
.section--video .section__subtitle,
.section--video .meta,
.section--video .section__action .btn--ghost {
  color: var(--clr-on-video);
}
/* Непрозрачная подложка под section-текстом над видео. */
.section--video .section__subtitle,
.section--video .meta {
  background: var(--clr-video-panel);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
}
/* Кнопка «Все группы тарифов» над видео — на своей непрозрачной подложке:
   заливка + белый текст/рамка дают AA независимо от кадра (белый CR 14.7). */
.section--video .section__action .btn--ghost {
  background: var(--clr-video-panel);
  border-color: var(--clr-on-video);
}
@media (prefers-reduced-motion: reduce) {
  .section__video { display: none; }
  /* Нейтральный тёмный фон вместо ролика — тоже без синевы. */
  .section__shade { background: var(--clr-video-fallback); }
}

/* ── Услуги: раскрытие оффера + ключевые преимущества ──────
   Два блока единого шаблона /services/ (внутри .service-page, после __body).
   Токены, обе темы. Классы — контракт из service.njk (Engineer). */
.service-page__offer,
.service-page__advantages { margin-block-start: var(--sp-10); }
.service-page__subheading { margin-block-end: var(--sp-4); }
/* Лид-абзац раскрытия оффера чуть крупнее — связка с Hero. */
.service-page__text > p:first-child { font-size: var(--fs-lg); }

/* Буллиты преимуществ: висячая SVG-галка (та же иконка, что у тарифов),
   текст не заезжает под маркер; role="list" обязателен (base снял маркеры). */
.service-page__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 70ch;
}
.service-page__list li {
  position: relative;
  padding-inline-start: var(--sp-8);
}
.service-page__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .28em;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--clr-primary);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
/* TODO-плашка: контент не пришёл — визуально помечаем как заглушку,
   а не как готовый текст (тот же приём, что у пустого прайса тарифов). */
.service-page__todo {
  color: var(--clr-text-3);
  font-style: italic;
}

/* ── Rich-страница услуги (page{} в контенте) ──────────────
   Блоки: lead, «почему» (reasons), пакеты (packages), trust-note,
   related-links. Классы — контракт с Engineer (service.njk, IF
   service.page). Токены, обе темы; карточки наследуют --clr-surface,
   тёмная тема переопределяет surface/border/primary автоматически. */
.service-page__lead { font-size: var(--fs-lg); max-width: 65ch; color: var(--clr-text-2); }

.service-reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-block-start: var(--sp-6);
}
.service-reason,
.service-package {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.service-reason__title,
.service-trust__title { margin-block-end: var(--sp-2); }

.service-packages {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-block-start: var(--sp-6);
}
.service-package {
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.service-package__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.service-package__n {
  flex: none;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--clr-primary);
}
.service-package__audience { margin-block-end: var(--sp-4); color: var(--clr-text-2); }
.service-package__feat--emphasis { font-weight: 600; color: var(--clr-text); }
.service-package__result,
.service-package__note,
.service-trust__text { color: var(--clr-text-2); }
.service-package__result,
.service-package__note {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--clr-primary-a20);
}
.service-package__cta { margin-block-start: var(--sp-5); }

.service-trust {
  margin-block-start: var(--sp-10);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--clr-primary-a10);
}

/* Кросс-ссылки живут внутри trust-плашки, под текстом (правка Freony
   3779602): отделяем тонкой линией, отступ меньше standalone-варианта. */
.service-related {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--clr-primary-a20);
}
.service-related__item { position: relative; padding-inline-start: var(--sp-6); color: var(--clr-text-2); }
.service-related__item::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
  color: var(--clr-primary);
}
/* Ссылка внутри trust-плашки: оливковая с подчёркиванием — читается как
   ссылка на фоне primary-a10, AA держит (см. замер в хэндофе). */
.service-related__item a {
  color: var(--clr-primary);
  text-decoration: underline;
}
.service-related__item a:hover { color: var(--clr-primary-hover); }

/* Кнопка «Посмотреть тарифы» на rich-странице шла впритык к trust-плашке
   (после удаления «Готовы обсудить задачу?») и левым краем — на краю
   блока, а контент плашки отступает внутрь на padding sp-6. Задаём тот
   же вертикальный ритм + выравниваем левый край с контент-колонкой
   плашки (правки Freony 3780380 / PM 3781397). Скоуп — только rich
   (.container > __cta), фолбэк 5 услуг не затрагиваем. */
.container > .service-page__cta {
  margin-block-start: var(--sp-10);
  padding-inline-start: var(--sp-6);
}

/* ── Юр.сопровождение: доп. блоки page{} (контракт TL task #12) ──
   Переиспользуют токены и карточный вид rich-страницы. Классы:
   .service-scope (capabilities[] и formats[]), .service-sla,
   .service-final-cta. Токены, обе темы, mobile. */

/* Тематические блоки «Что берём на себя» и «Форматы»: одноколоночный
   стек карточек с прозой (в отличие от reasons 2×2 — текст длиннее). */
.service-scope {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-block-start: var(--sp-6);
}
.service-scope__item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.service-scope__title { margin-block-end: var(--sp-2); }
.service-scope__text { color: var(--clr-text-2); }
/* Инлайн-ссылка внутри карточки (напр. «Открытие бизнеса» в «Корпоративных»). */
.service-scope__link {
  display: inline-block;
  margin-block-start: var(--sp-3);
  color: var(--clr-primary);
  text-decoration: underline;
}
.service-scope__link:hover { color: var(--clr-primary-hover); }

/* «Сколько ждать ответа»: семантический dl — ситуация (dt) → срок (dd). */
.service-sla {
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}
.service-sla__row {
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--clr-primary-a20);
}
.service-sla dt { font-weight: 600; color: var(--clr-text); }
.service-sla dd { margin: 0; color: var(--clr-text-2); }
/* responseNote «Каждая задача фиксируется…» — отдельная строка под SLA. */
.service-sla__note { margin-block-start: var(--sp-5); color: var(--clr-text-2); font-style: italic; }

/* Финальный оффер: заголовок + текст + одна кнопка. Отдельный блок,
   не переиспользует tariff-CTA бухстраницы. */
.service-final-cta {
  margin-block-start: var(--sp-10);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  background: var(--clr-primary-a10);
}
.service-final-cta__title { margin-block-end: var(--sp-2); }
.service-final-cta__text { margin-block-end: var(--sp-5); color: var(--clr-text-2); max-width: 60ch; }
/* Text-only вариант плашки (empty state блога, task #18): без кнопки
   нижний отступ текста осиротевший и ломает симметрию padding'а
   (32px сверху против 52px снизу). Обнуляем, когда текст — последний
   элемент; на плашках С кнопкой правило не срабатывает. */
.service-final-cta__text:last-child { margin-block-end: 0; }

/* ── Комплексное + Налоговый консалтинг: доп. блоки (контракт TL task #13) ──
   .service-hero-cta (кнопка под lead), .service-narrative (абзацная проза),
   .service-inline-list (плотные перечни, flex-wrap, CSS-разделитель).
   Токены, обе темы, mobile. */

/* Кнопка сразу после lead, до контента (heroCta). */
.service-hero-cta { margin-block-start: var(--sp-6); }

/* Абзацная проза (narrativeSections «Проблема, которую это решает»). */
.service-narrative { margin-block-start: var(--sp-6); }
/* Отступ выше нужен только для отбивки от предыдущего блока. Когда
   narrative открывает секцию (empty state блога, task #18), он
   осиротевший и складывается с padding'ом секции: 120px вместо 96px,
   как на остальных страницах. */
.service-narrative:first-child { margin-block-start: 0; }
.service-narrative__text {
  max-width: 65ch;
  color: var(--clr-text-2);
}
.service-narrative__text + .service-narrative__text { margin-block-start: var(--sp-4); }

/* Плотные перечни (listSections): flex-wrap, каждый пункт — читаемый
   текст с ведущим маркером «·» (не в данных, presentation-only).
   Ведущий маркер вместо разделителя между — не даёт «висячих» точек
   на переносах строк при разной длине пунктов. list-style снимаем
   явно: ul без role="list" сохранил бы дефолтные буллеты. */
.service-inline-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-6);
  max-width: 80ch;
}
.service-inline-list__item {
  position: relative;
  padding-inline-start: var(--sp-4);
  color: var(--clr-text-2);
}
.service-inline-list__item::before {
  content: "\00B7";
  position: absolute;
  inset-inline-start: 0;
  color: var(--clr-primary);
  font-weight: 700;
}
.service-inline-list__note { margin-block-start: var(--sp-4); color: var(--clr-text-2); }

/* Нумерованные результаты «Что получаете» (outcomes, контракт TL task #15).
   Семантика — нативный <ol>, нумерация из порядка; CSS только стилизует
   маркер (оливковый, как package__n). Числа в данных не храним. */
.service-outcomes__intro { margin-block-start: var(--sp-6); color: var(--clr-text-2); max-width: 65ch; }
.service-outcomes {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.service-outcomes__item::marker {
  color: var(--clr-primary);
  font-weight: 700;
}
.service-outcomes__title { margin-block-end: var(--sp-1); }
.service-outcomes__text { color: var(--clr-text-2); }
.service-outcomes__note { margin-block-start: var(--sp-5); color: var(--clr-text-2); }

@media (max-width: 640px) {
  .service-reasons { grid-template-columns: 1fr; }
  .service-package,
  .service-scope__item,
  .service-final-cta { padding: var(--sp-6); }
}

/* ══ Rich-text: тело статьи и страниц политик (task #18 backlog) ══
   Проблема: universal reset `*{margin:0}` обнуляет отступы у p/h2/h3/ul/ol,
   а `a{color:inherit;text-decoration:none}` делает контентные ссылки
   неотличимыми от текста. Разметка приходит из markdown, классы на
   элементы навесить нельзя — поэтому стилизуем потомков одной обёртки.
   Применяется в layouts/post.njk и на трёх страницах политик (вместо
   мёртвого .prose). Токены, обе темы, читаемая мера строки. */
.rich-text { max-width: 68ch; margin-block-start: var(--sp-6); }
/* Обёртка открывает секцию (страницы политик) — отбивка не нужна:
   тот же краевой случай, что у .service-narrative. */
.rich-text:first-child { margin-block-start: 0; }
.rich-text > * + * { margin-block-start: var(--sp-4); }
.rich-text > * + :is(h2, h3, h4) { margin-block-start: var(--sp-8); }
.rich-text :is(h2, h3, h4) + * { margin-block-start: var(--sp-3); }
.rich-text :is(ul, ol) { padding-inline-start: var(--sp-6); }
.rich-text li + li { margin-block-start: var(--sp-2); }
/* Контентная ссылка — по конвенции проекта (.service-scope__link,
   .service-related__item a): цвет + подчёркивание, не только цвет. */
.rich-text a {
  color: var(--clr-primary);
  text-decoration: underline;
}

/* ══ Главная: договор как доказательство совместной работы ══ */
.home-hero {
  /* min-height: min(42rem, 100svh - header) СНЯТ (Freony 4035811, стрелка на
     пустоту над заголовком). Он держал блок ровно 672px, а контента в нём 316,
     и остаток делился поровну: 184px сверху и 171 снизу — втрое больше
     межсекционного ритма. Высоту теперь задаёт --section-py, как у всех
     секций (.home-hero несёт класс .section): 64+316+64 = 444px на 1440,
     40+…+40 на 375. Та же логика, что в 7046495 — величина из одного токена. */
  --section-bg: var(--clr-brand);
  display: grid;
  align-items: center;
  background: var(--section-bg);
  color: var(--clr-on-brand);
}
.home-hero__inner { display: grid; justify-items: start; gap: var(--sp-5); }
.home-hero__title { max-width: 15ch; color: var(--clr-on-brand); }
.home-hero__lead { max-width: 55ch; font-size: var(--fs-lg); }
.home-contract__list { display: grid; gap: var(--sp-4); }
.home-contract__item {
  --section-bg: var(--clr-surface);
  background: var(--section-bg);
  border: var(--bw-1) solid var(--clr-control-border);
  border-radius: var(--radius-md);
  overflow: clip;
}
.home-contract__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-5);
  color: var(--clr-brand);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.home-contract__summary::marker { content: ""; }
.home-contract__number { line-height: 1.6; color: var(--clr-primary); }
.home-contract__analysis {
  padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--sp-10));
  color: var(--clr-text-2);
}
.home-contract__price {
  margin-block-start: var(--sp-3);
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--clr-primary);
  color: var(--clr-text);
}
.home-contract__note {
  margin-block-start: var(--sp-8);
  max-width: 60ch;
  font-weight: var(--fw-semi);
}
/* Видео-фон блока «Сам договор» (Freony 4006084, паттерн .section--video
   тарифных — переиспользован дословно: видео cover без фильтров, единственное
   затемнение нейтральный scrim, палитра ролика проходит насквозь).
   Отличия от тарифных: (1) фолбэк-фон НЕ брендовая синева, а нейтральный
   --clr-video-fallback — «сохраните палитру фона»; (2) заголовок и примечание
   — section-level текст над видео, у ролика есть почти белые кадры (max luma
   244/255, окна), поэтому им СОБСТВЕННАЯ подложка --clr-video-heading-bg
   (прецедент media-overview__heading, белый CR 12.2), а не голый белый по
   scrim. Карточки-пункты непрозрачные (--clr-surface) — читаемы независимо
   от кадра, как тарифные. reduced-motion — общий правило .section__video. */
.home-contract.section--video { --section-bg: var(--clr-video-fallback); }
.home-contract.section--video .section__head h2 {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-on-video);
  background: var(--clr-video-heading-bg);
  border-radius: var(--radius-md);
}
.home-contract.section--video .home-contract__note {
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-on-video);
  background: var(--clr-video-heading-bg);
  border-radius: var(--radius-md);
  width: fit-content;
}

.home-case {
  --section-bg: var(--clr-surface);
  padding: var(--sp-6);
  background: var(--section-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.home-case__value { margin-block-end: var(--sp-4); color: var(--clr-primary); font-weight: var(--fw-semi); }
.home-case__title { margin-block-end: var(--sp-3); }
.home-case__text { color: var(--clr-text-2); }

.home-difference { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-10); }
.home-difference__body { max-width: 65ch; color: var(--clr-text-2); }
.home-difference__body p + p { margin-block-start: var(--sp-5); }

.home-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.home-services a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 3px solid var(--clr-primary);
  background: var(--clr-bg-2);
  font-weight: var(--fw-semi);
}
.home-services a:hover { background: var(--clr-primary-a10); }
.home-services__note { margin-block-start: var(--sp-6); color: var(--clr-text-2); }

.home-pricing { --section-bg: var(--clr-brand); color: var(--clr-on-brand); }
.home-pricing__inner { display: grid; gap: var(--sp-6); }
.home-pricing h2 { color: var(--clr-on-brand); }
.home-pricing__list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); }
.home-pricing__list li { position: relative; padding-inline-start: var(--sp-5); }
.home-pricing__list li::before { content: "·"; position: absolute; inset-inline-start: 0; font-weight: var(--fw-bold); }

.home-final { --section-bg: var(--clr-bg-2); }
.home-final__inner { display: grid; justify-items: start; gap: var(--sp-5); max-width: 62rem; }
.home-final__inner > p { max-width: 65ch; }
.home-final__note { font-weight: var(--fw-semi); }

@media (max-width: 768px) {
  /* .home-hero { min-height: auto } снят вместе с самим min-height выше:
     сбрасывать нечего, правило стало пустым. */
  .home-contract__analysis { padding-inline: var(--sp-5); }
  .home-difference { grid-template-columns: 1fr; gap: var(--sp-5); }
  .home-services { grid-template-columns: 1fr; }
  .home-pricing__list { flex-direction: column; gap: var(--sp-3); }
}
.rich-text a:hover { color: var(--clr-primary-hover); }
.rich-text :is(strong, b) { font-weight: var(--fw-bold); }
/* Таблицы: в base.css есть только border-collapse, поэтому без рамок,
   padding'а и выделения шапки они выходят слипшимся текстом. */
.rich-text table { width: 100%; font-size: var(--fs-sm); }
.rich-text :is(th, td) {
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  text-align: start;
  vertical-align: top;
}
.rich-text th { background: var(--clr-bg-2); font-weight: var(--fw-bold); }
.rich-text blockquote {
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--clr-primary);
  color: var(--clr-text-2);
}

/* ── Шапка страницы статьи ──
   .post__title и .post__meta не имели объявлений: h1 из-за universal
   reset стоял вплотную к мете (замер 0px), а мета набиралась основным
   текстом 16px/--clr-text — то есть по весу равнялась телу статьи.
   Язык не изобретаем: отбивка h1→подзаголовок берётся из hero
   (.page-hero__lead, --sp-4), мета — из .meta / .post-card__meta
   (--fs-sm + --clr-text-3). Мера заголовка — как у лида hero. */
.post__title { max-width: 46rem; }
.post__meta {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--clr-text-3);
}

/* ── Видеофон подвала (task #19, v3) ──
   Контракт Freony: текст ПРЯМО над видео, отдельный нейтральный слой-бленда с
   регулируемой прозрачностью, без плашек, без цветокоррекции, без затемнения.
   Бленда нейтральная (чистый чёрный, без сдвига hue/saturation) и минимальная:
   читаемость добирают ЛОКАЛЬНЫЕ тени под глифами, поэтому кадр почти не тронут.
   Прозрачность настраивается ОДНИМ токеном --footer-blend-opacity. ── */
.footer--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --footer-blend-opacity: .40;
  --section-bg: var(--clr-video-fallback);
}
.footer__video,
.footer__blend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer__video { z-index: -2; object-fit: cover; object-position: center; }
.footer__blend { z-index: -1; background: #000; opacity: var(--footer-blend-opacity); }
.footer--video > .container { position: relative; z-index: 1; }
/* Текст светлый в ОБЕИХ темах: над слабой блендой светлый кадр остаётся светлым,
   и родной тёмный текст светлой темы утонул бы в тенях. */
.footer--video :is(.footer__link, .footer__title, .footer__requisites,
                   .footer__brand-text, .footer__slogan, .footer__theme-toggle) {
  color: var(--clr-on-video);
  text-shadow: var(--footer-glyph-shadow);
}
/* SVG тень НЕ берёт: text-shadow на них не действует, нужен drop-shadow.
   Это логотип, иконки телефона/почты и иконки переключателя тем. */
.footer--video :is(.footer__brand-logo svg, .footer__social-icon, .theme-toggle__icon) {
  filter: var(--footer-svg-shadow);
}
/* Подчёркивание ссылки — псевдоэлемент с ФОНОМ --clr-primary, а не текст:
   тень текста его не покрывает, и над блендой .40 он даёт CR 1.00 (не видно
   вовсе). Переводим на цвет текста + своя тень: белое даёт 3.25 (порог
   не-текста 3:1). Появляется на hover/focus/current. */
.footer--video .footer__link::after {
  background: var(--clr-on-video);
  box-shadow: var(--footer-glyph-shadow);
}
/* Рамки тень не берут вообще — только цвет, поэтому ПОЛУПРОЗРАЧНЫЕ здесь
   не годятся: белое с alpha композитится со светлым кадром и садится ниже
   порога 3:1 для не-текста. Замер по всем 20 кадрам ролика: .55 давало
   3.73 desktop, но 2.48 на 375; .35 — 2.06 и 1.76. Непрозрачный
   --clr-on-video: 8.09/4.41 и 5.55/4.01 — проходит с запасом. */
.footer--video .footer__social-link { border-color: var(--clr-on-video); }
.footer--video .footer__brand-card {
  background: transparent;
  border-color: var(--clr-on-video);
  /* Логотип и иконки — инлайн-SVG на var(--clr-brand)/var(--clr-primary), это
     цвета ТЕМЫ: в светлой над затемнённым кадром CR 1.05 и 2.06. Оба
     -on-video токена калибровались на НЕПРОЗРАЧНОЙ плашке v2 (#141414,
     CR 6.03) — v3 её сняла, и над блендой они дают 2.32 логотип / 1.90
     иконка, FAIL 3:1. Осветление с сохранением тона доходит только до
     3.04/2.67 (замер), поэтому здесь цвет текста: 4.95 и 4.35. */
  --clr-brand: var(--clr-on-video);
  --clr-primary: var(--clr-on-video);
}
/* Фокус-рамка тень не наследует: --clr-primary над видео даёт CR 1.10 в светлой. */
.footer--video :is(a, button):focus-visible { outline-color: var(--clr-on-video); }
@media (prefers-reduced-motion: reduce) {
  .footer__video { display: none; }
  .footer__blend { background: var(--clr-video-fallback); opacity: 1; }
}