/* ============================================================
   Лендинг-опт «Везём ёлку» - стили
   Направление (утв. §6.1): гамма C - зелёный акцент, светлый фон;
   стиль «Киношный» - тёмный полноэкранный hero на фото собственника,
   ниже светлые деловые секции. Скролл-анимации на чистом JS.
   Мобайл-first. Шрифт заголовков - Oswald (локально в assets/).
   ============================================================ */

/* --- Oswald (узкий гротеск), локальные woff2, cyrillic + latin --- */
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/oswald-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/oswald-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/oswald-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/oswald-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/oswald-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/oswald-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Nunito (мягкий округлый гротеск) для бренд-надписи, локально --- */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/nunito-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/nunito-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/nunito-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/nunito-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Палитра гаммы C - зелёный акцент, светлый деловой фон.
     Выведена из фото: хвоя, шалфейные панели стен, тёплый корпусный свет. */
  --fir-900:  #0A1E15;   /* самый глубокий фон / hero-scrim / подвал */
  --fir-800:  #0E2A1E;   /* тёмные секции */
  --green:    #157A46;   /* основной зелёный акцент, CTA */
  --green-600:#12603A;   /* тёмный зелёный (полоса, ховеры) */
  --green-400:#31A96A;   /* яркий зелёный (счётчики на полосе) */
  --green-050:#E9F1EA;   /* светлая зелёная плашка */
  --paper:    #F5F4EE;   /* тёплый светлый фон деловых секций */
  --sage:     #E4E9DC;   /* шалфейный тон стен - вторичный фон */
  --line:     #DEE1D4;   /* границы на светлом */
  --ink:      #13231A;   /* текст на светлом */
  --ink-soft: #51604F;   /* вторичный текст на светлом */
  --cream:    #F3F5EE;   /* текст на тёмном */
  --cream-dim:#C3D0C1;   /* вторичный текст на тёмном */
  --danger:   #B23A2B;

  --font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", "Segoe UI", sans-serif;
  --font-brand: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --wrap-hero: 1600px;
  --radius: 16px;
  --shadow-card: 0 26px 64px -30px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* --- Утилиты --- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 1rem;
}
.eyebrow--light { color: var(--green-400); }

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(21, 122, 70, .8);
}
.btn--primary:hover { background: var(--green-600); transform: translateY(-2px); }
.btn--lg { padding: 1.15rem 2.1rem; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green-400);
  outline-offset: 2px;
}

.phone-link {
  color: var(--green); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.phone-link:hover { text-decoration: underline; }

/* --- Скролл-анимация появления (JS добавляет .is-in) --- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   БЛОК 1 - HERO (киношный, на весь экран)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.6rem;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -8% 0;
  height: 116%;
  background: #0A1E15 url("assets/hero-owner.jpg") center 30% / cover no-repeat;
  z-index: -2;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,22,15,.95) 0%, rgba(8,22,15,.88) 34%, rgba(8,22,15,.52) 50%, rgba(8,22,15,.28) 66%, rgba(8,22,15,.42) 100%),
    linear-gradient(180deg, rgba(8,22,15,.5) 0%, transparent 20% 60%, rgba(8,22,15,.85) 100%);
}

/* Шапка */
.topbar {
  width: 100%;
  max-width: var(--wrap-hero);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--cream);
}
.brand__chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: .34rem .5rem;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  flex-shrink: 0;
}
.brand__chip img { height: 30px; width: auto; display: block; }
/* Полный логотип-картинка (санки + надпись) только в шапке hero - крупнее.
   Юр-страницы (.legal-top) используют прежний значок 30px, их не трогаем. */
.topbar .brand__chip img { height: 56px; }
.brand__name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .005em;
  line-height: 1;
}
.topcall {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  color: var(--cream);
  line-height: 1.2;
}
.topcall__prompt { font-size: .92rem; color: var(--cream-dim); }
.topcall__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 5vw, 1.95rem);
  letter-spacing: .01em;
  white-space: nowrap;
}
.topcall:hover .topcall__num { color: var(--green-400); }

/* Тело hero */
.hero__body {
  width: 100%;
  max-width: var(--wrap-hero);
  margin-inline: auto;
  flex: 1;
  display: grid;
  gap: 1.6rem;
  align-content: center;
  padding: 2.2rem 0 1.4rem;
  min-width: 0;
}
.hero__offer { min-width: 0; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.15rem, 8.5vw, 4rem);
  /* Чуть больше межстрочного - иначе точки над Ё/Й слипаются с верхней строкой
     (Фаза 5a-правка). Мобильный @media задаёт свой line-height - не трогаем. */
  line-height: 1.12;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
  /* Длиннее строка = меньше переносов (правка заказчика 5a). Мобильный @media
     не трогаем - там свой размер. */
  max-width: 17em;
}
.hero__title-big {
  display: block;
  color: var(--green-400);
  font-weight: 700;
  font-size: 1.32em;
  letter-spacing: .01em;
}
.hero__title-big [data-cfg] { white-space: nowrap; }

/* Подзаголовок-оффер hero (Фаза 5a): виден на v-a/v-b/v-c.
   Мобилка (< 620px) - подача Фазы 5b, тут подзаголовок скрыт (display:none),
   мобильные @media не трогаются. Видимые стили - с 620px (см. ниже). */
.hero__sub { display: none; }

.hero__form { min-width: 0; }

/* CTA-кнопка hero (видна только на мобиле - см. media ниже) */
.hero__cta { display: none; }

/* Подпись руководителя */
.owner-note {
  width: 100%;
  max-width: var(--wrap-hero);
  margin-inline: auto;
  border-left: 3px solid var(--green-400);
  padding: .3rem 0 .3rem 1rem;
  font-size: .95rem;
  color: var(--cream-dim);
}
.owner-note figcaption { max-width: 42em; }
.owner-note strong { color: var(--cream); font-weight: 700; }

/* ============================================================
   КАРТОЧКА ЛИДА (переиспользуемая: hero, модалка, финал)
   ============================================================ */
.lead-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.45rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  min-width: 0;
}
.lead-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.55rem;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 .55rem;
  color: var(--fir-900);
}
.lead-card__note {
  margin: 0 0 1.15rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

.lead-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .38rem; min-width: 0; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.req { color: var(--danger); }
.opt { color: #9aa39c; font-weight: 400; font-size: .78rem; }

.field input[type="tel"],
.field input[type="text"] {
  width: 100%;
  font: inherit;
  padding: .82rem .9rem;
  border: 1px solid #d3d8d0;
  border-radius: 10px;
  background: #fbfbf9;
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(21, 122, 70, .18);
  outline: none;
}
.field input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(178, 58, 43, .16);
}
.field__err { margin: 0; font-size: .8rem; color: var(--danger); font-weight: 600; }

/* Способ связи - радио-чипы */
.contact { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .45rem; }
.contact legend { padding: 0; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.contact__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact__opt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid #d3d8d0;
  border-radius: 999px;
  background: #fbfbf9;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.contact__opt input { accent-color: var(--green); margin: 0; cursor: pointer; }
.contact__opt:has(input:checked) {
  border-color: var(--green);
  background: var(--green-050);
  color: var(--green-600);
  font-weight: 600;
}
.contact__opt input:focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; }

/* Honeypot - скрыт от людей, доступен ботам (они читают DOM, а не картинку).
   display:none, а не вынос за экран: автозаполнение браузера в отрисованные
   за экраном поля пишет, а в display:none - нет. */
.hp { display: none; }

/* Чекбокс согласия */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
}
.consent input {
  width: 1.15rem; height: 1.15rem;
  margin: .12rem 0 0;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.consent__text a { color: var(--green); font-weight: 600; text-underline-offset: 2px; }

.lead-form__ok {
  margin: 0;
  padding: .95rem 1rem;
  background: var(--green-050);
  border: 1px solid #bcdcc0;
  border-radius: 10px;
  color: #1c5a34;
  font-weight: 600;
}

/* ============================================================
   ПОЛОСА-РАЗДЕЛИТЕЛЬ - зелёная, счётчики + Дед Мороз
   ============================================================ */
.strip {
  background: linear-gradient(120deg, var(--green-600), var(--green));
  color: #fff;
  padding: 1.9rem 1.25rem;
}
.approve {
  margin: 0 auto;
  max-width: 44rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.approve__tag {
  width: 96px;
  height: auto;
  border-radius: 10px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
  flex-shrink: 0;
}
.approve__text {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  line-height: 1.16;
  letter-spacing: .02em;
}

/* ============================================================
   БЛОК 2 - СТАРТОВЫЙ НАБОР (крупно, акцентный)
   ============================================================ */
.package {
  background: var(--paper);
  padding: 3.5rem 1.25rem;
}
.package__card {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
  align-items: center;
  background: linear-gradient(155deg, var(--fir-800), var(--fir-900));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-card);
  color: var(--cream);
}
.package__body { min-width: 0; }
.badge {
  display: inline-block;
  background: var(--green-050);
  color: var(--green-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.package__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.06;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  color: #fff;
}
.package__text { margin: 0; color: var(--cream-dim); font-size: 1.05rem; }

.package__price {
  display: grid;
  gap: .1rem;
  margin: 1.6rem 0;
  padding: 1.15rem 1.4rem;
  background: rgba(21, 122, 70, .18);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
}
.package__price-label {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-400); font-weight: 700;
}
.package__price-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 700;
  color: var(--green-400);
  line-height: 1.02;
}

.package__media { margin: 0; }
.package__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .65);
}

/* ============================================================
   БЛОК 3 - УСЛОВИЯ / ПРЕИМУЩЕСТВА
   ============================================================ */
.benefits {
  background: var(--sage);
  color: var(--ink);
  padding: 4rem 1.25rem;
}
.benefits__wrap { max-width: var(--wrap); margin: 0 auto; }
.benefits__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5.5vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 2.2rem;
  max-width: 18em;
  color: var(--fir-900);
}
.benefits__grid {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.benefit {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem;
}
.benefit__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.16rem;
  letter-spacing: .01em;
  margin: 0 0 .55rem;
  color: var(--fir-900);
}
.benefit p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* Плашка про сервис */
.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  background: linear-gradient(120deg, var(--fir-800), var(--green-600));
  color: var(--cream);
  border-radius: 16px;
  padding: 1.6rem 1.6rem;
}
.service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: var(--green-400);
}
.service__icon svg { width: 24px; height: 24px; }
.service__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.22rem;
  margin: .1rem 0 .5rem;
  color: #fff;
}
.service__text p { margin: 0; color: var(--cream-dim); font-size: .98rem; }

/* ============================================================
   БЛОК 4 - ШИРОКИЙ АССОРТИМЕНТ (фото целиком)
   ============================================================ */
.range {
  background: var(--paper);
  padding: 4rem 1.25rem;
}
.range__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 2rem; }
.range__head { text-align: center; }
.range__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: .01em;
  margin: 0 0 .7rem;
  color: var(--fir-900);
}
.range__lead {
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  color: var(--ink);
  margin: 0 0 .3rem;
  font-weight: 600;
}
.range__sub {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green);
  font-size: 1.05rem;
  margin: 0;
}
.range__media {
  margin: 0;
  background: var(--sage);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}
/* Ассортимент показываем ЦЕЛИКОМ - не обрезаем */
.range__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* ============================================================
   БЛОК 5 - ПРЕМИАЛЬНОЕ КАЧЕСТВО
   ============================================================ */
.quality {
  background: var(--fir-900);
  color: var(--cream);
  padding: 4rem 1.25rem;
}
.quality__wrap { max-width: var(--wrap); margin: 0 auto; }
.quality__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5.5vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 2rem;
  max-width: 16em;
  color: #fff;
}
.quality__grid { display: grid; gap: 1.2rem; align-items: start; }
.quality__item { margin: 0; }
/* Фото качества показываем ЦЕЛИКОМ и вписываем в экран - не обрезаем */
.quality__item img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0C1C14;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   БЛОК 6 - ФИНАЛЬНАЯ ФОРМА
   ============================================================ */
.final {
  background: linear-gradient(160deg, var(--fir-800), var(--fir-900));
  color: var(--cream);
  padding: 4rem 1.25rem;
}
.final__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: 2.2rem;
  align-items: center;
}
.final__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.06;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  color: #fff;
}
.final__sub { color: var(--cream-dim); font-size: 1.06rem; margin: 0 0 1.2rem; max-width: 32em; }
.final__call { color: var(--cream-dim); margin: 0; }
.final__call .phone-link { color: var(--green-400); }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot {
  background: #06140D;
  color: var(--cream-dim);
  padding: 2.4rem 1.25rem;
}
.foot__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; gap: .4rem; }
.foot__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  font-size: 1.15rem;
  margin: 0;
}
.foot__tagline { margin: 0; font-size: .95rem; }
.foot__call { margin: .4rem 0 0; }
.foot__call .phone-link { color: var(--green-400); }
.foot__legal { margin: .5rem 0 0; font-size: .88rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.foot__legal a { color: var(--cream-dim); text-underline-offset: 2px; }

/* ============================================================
   МОДАЛКА
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 13, .72);
  backdrop-filter: blur(2px);
  animation: fade .2s var(--ease);
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100svh - 2.5rem);
  overflow-y: auto;
  animation: pop .24s var(--ease);
}
.lead-card--modal { border: 1px solid var(--line); }
.modal__close {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 44px; height: 44px;              /* тач-цель >=44px */
  display: grid; place-items: center;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.modal__close svg { width: 20px; height: 20px; }
.modal__close:hover { background: var(--paper); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* --- Мобильный hero (только узкие экраны): топбар в одну строку,
       собственника видно (скрим светлее), форма компактнее --- */
@media (max-width: 619px) {
  /* Hero на весь экран: фото идёт до конца экрана, плашка Деда Мороза -
     уже после первого экрана. Оффер+кнопка стоят на ~70% высоты,
     ниже кнопки открывается фото (низ не обрезаем). */
  .hero { padding: .8rem .85rem 1rem; }

  /* Шапка: лого + номер на ОДНОЙ строке, не переносим.
     Размеры на clamp - чтобы строка влезала и на узких (360px). */
  .topbar { flex-wrap: nowrap; gap: .5rem; }
  .brand { gap: .38rem; min-width: 0; }
  .brand__chip { padding: .22rem .34rem; flex-shrink: 0; }
  .topbar .brand__chip img { height: 34px; }   /* полный логотип-квадрат (Фаза 5a): не 20px, иначе нечитаемо */
  /* .brand__name в hero больше нет (лого с текстом одной картинкой), но правило
     оставляем - его используют юр-страницы (privacy/consent) в своей шапке. */
  .brand__name { font-size: clamp(.92rem, 3.3vw, 1.2rem); white-space: nowrap; }
  .topcall { flex-shrink: 0; }
  .topcall__prompt { display: none; }          /* убираем подпись, чтобы номер встал в строку с лого */
  /* Номер в шапке крупнее (правка заказчика 2026-07-27: было мелко).
     Верхняя граница clamp держит строку «лого + номер» в одну линию на 320px. */
  .topcall__num { font-size: clamp(1.08rem, 4.6vw, 1.5rem); white-space: nowrap; }

  /* Фон-фото собственника: верх кадра (пустая стена) обрезан зумом,
     голова поднята почти под шапку (пометка-стрелка заказчика).
     Скрим задан ниже (верх светлее - там лицо). */
  .hero__bg {
    inset: 0; height: 100%;
    background-size: auto 118%;
    background-position: 50% 30%;   /* голова целиком ниже линии шапки, ёлки по бокам видны */
  }

  /* Мобайл: форму в hero прячем - её открывает кнопка (модалка).
     Композиция: сверху открыто лицо собственника, оффер по середине
     (закрывает пиджак, не лицо), кнопка внизу на месте убранной подписи. */
  .hero__form { display: none; }
  .owner-note { display: none; }
  .hero__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: .9rem 0 26svh;   /* под кнопкой открыто фото до конца экрана */
  }

  /* Оффер: только сам оффер (строка «производитель…» убрана),
     прижат вниз - сверху остаётся открытое лицо собственника */
  .hero__offer {
    margin: auto 0 0;                   /* всё свободное место - над оффером */
    background: linear-gradient(180deg, rgba(6,16,11,.8), rgba(6,16,11,.62));
    border-radius: 14px;
    padding: .9rem 1rem 1rem;
    box-shadow: 0 18px 40px -26px rgba(0,0,0,.8);
  }
  .hero__offer .eyebrow { display: none; }
  .hero__title {
    font-size: clamp(1.7rem, 7vw, 2.45rem);
    line-height: 1.02;
    text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6);
    margin: 0;
  }
  .hero__title-big { font-size: 1.24em; }

  /* CTA-кнопка вместо формы - сразу под оффером. Тач-цель >=44px (Правка 5c-1). */
  .hero__cta { display: block; }
  .hero__cta .btn { width: 100%; min-height: 48px; }

  /* Правка 5c-1: кнопка hero видна ВСЕГДА, без скролла, и cookie-баннер её не
     перекрывает. hero - на один экран (min-height:100svh); пока показан cookie-
     баннер (html.cookie-open), резервируем внизу hero место под него, чтобы
     прижатая к низу кнопка поднялась НАД баннером. --cookie-h выставляет
     script.js по реальной высоте баннера (фолбэк 172px). box-sizing:border-box:
     padding-bottom ужимает контент-зону -> flex-end контент (кнопка) уходит выше
     баннера в A/B; в C слайдер (flex:1) ужимается и поднимает оффер+кнопку. */
  html.cookie-open .hero { padding-bottom: calc(var(--cookie-h, 172px) + .7rem); }

  /* Скрим: верх светлее (там лицо), низ чуть темнее под кнопку */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8,22,15,.72) 0%,
        rgba(8,22,15,.26) 14%,
        rgba(8,22,15,.10) 42%,
        rgba(8,22,15,.14) 72%,
        rgba(8,22,15,.55) 100%);
  }

  /* ---------- Концепт Б «Киношный минимал» (Фаза 5b, выбор заказчика 2026-07-19)
     Варианты A и B (фото-hero). Убираем аляповатое тёмное окно-плашку: фото
     открыто во весь экран, текст лежит прямо на киношном градиенте в нижней
     трети. Всё scoped на html:not(.v-c) - вариант C сохраняет свою витрину и
     тёмную плашку (правила ниже по файлу), эти строки его не трогают. ---------- */
  html:not(.v-c) .hero__bg {
    background-size: auto 120%;
    background-position: 50% 24%;   /* лицо открыто под шапкой, тело уходит под текст */
  }
  /* Градиент: верх лёгкий (лицо на светлой стене читается), низ густой еловый под текст */
  html:not(.v-c) .hero__scrim {
    background: linear-gradient(180deg,
      rgba(8,22,15,.30) 0%,
      rgba(8,22,15,.04) 17%,
      rgba(8,22,15,.05) 38%,
      rgba(8,22,15,.58) 64%,
      rgba(8,22,15,.92) 100%);
  }
  /* Контент прижат в нижнюю треть, тёмное окно снято - текст прямо на градиенте */
  html:not(.v-c) .hero__body {
    justify-content: flex-end;
    gap: .8rem;
    padding: .9rem 0 1.5rem;
  }
  html:not(.v-c) .hero__offer {
    margin: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Eyebrow «производитель… опт для бизнеса» на мобиле держим скрытым (базовое
     правило выше): переносится в 2 строки и добавляет плотности, а заказчик её
     на мобиле уже убирал (Фаза 2.3). Заголовок сам говорит «…российского
     производства», контекст не теряется. Вернуть - снять display:none выше. */
  html:not(.v-c) .hero__title {
    font-size: clamp(1.55rem, 6.4vw, 2.25rem);
    line-height: 1.07;
  }
  /* Подзаголовок «отгрузка со склада» показываем - в концепте Б есть воздух под него */
  html:not(.v-c) .hero__sub {
    display: block;
    margin: .75rem 0 0;
    max-width: 34ch;
    font-size: .9rem;
    line-height: 1.4;
    color: #E7EFE4;
    border-left: 3px solid var(--green-400);
    padding-left: .75rem;
    text-shadow: 0 1px 10px rgba(0,0,0,.72);
  }
  /* Вариант B: оффер-заголовок длиннее A (текст «от боли») - кегль меньше,
     чтобы уместился в нижней трети над кнопкой и не наезжал на лицо. */
  html.v-b .hero__title { font-size: clamp(1.2rem, 4.7vw, 1.55rem); }
  html.v-b .hero__sub { display: none; }   /* у B длинный заголовок - подзаголовок прячем, чтобы не переполнять */
}

@media (min-width: 620px) {
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .quality__grid { grid-template-columns: 1fr 1fr; align-items: start; }

  /* Вариант B (оффер «от боли») - текст длиннее, чем в A: на десктопе/планшете
     заметно уменьшаем кегль заголовка, иначе он огромный и нечитаемый (Фаза 5a).
     Мобильный @media (< 620px) не трогаем - там свой размер (5b). */
  html.v-b .hero__title { font-size: clamp(1.5rem, 3.1vw, 2.35rem); max-width: 26em; }

  /* Подзаголовок-оффер hero виден с планшета/десктопа (Фаза 5a).
     Зелёный акцент-полоска слева, светлый текст, читаемость на фото. */
  .hero__sub {
    display: block;
    margin: 1rem 0 0;
    max-width: 34ch;
    font-size: clamp(1rem, 1.15vw, 1.16rem);
    line-height: 1.42;
    color: #EAF1E6;
    border-left: 3px solid var(--green-400);
    padding-left: .8rem;
    text-shadow: 0 1px 12px rgba(0,0,0,.62);
  }
}

@media (min-width: 900px) {
  .hero { padding: 1.6rem 2.2rem 2rem; }
  .hero__body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px);
    gap: 3rem;
    align-items: center;
    padding: 2rem 0;
  }
  .hero__form { justify-self: end; width: 100%; }

  .strip { padding: 2.4rem 2.2rem; }
  .approve__tag { width: 122px; }
  .approve { gap: 1.6rem; }

  .package { padding: 5rem 2.2rem; }
  .package__card { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding: 2.8rem 3rem; }

  .benefits { padding: 5.5rem 2.2rem; }
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
  .service { grid-column: 1 / -1; padding: 1.9rem 2.2rem; }

  .range { padding: 5.5rem 2.2rem; }
  .quality { padding: 5.5rem 2.2rem; }

  .final { padding: 5.5rem 2.2rem; }
  .final__wrap { grid-template-columns: 1.05fr minmax(0, 440px); gap: 3.4rem; }
  .final__form { justify-self: end; width: 100%; }
}

/* ============================================================
   А/Б-ВАРИАНТЫ HERO (Фаза 2.4, план §6.2)
   Вариант A - контроль: правила выше НЕ тронуты. Всё новое живёт
   только под html.v-c и классами .c-* (вариант B меняет лишь текст
   оффера через config.js, стилей ему не нужно).
   ============================================================ */

/* Элементы варианта C в A и B не существуют визуально */
.c-bgwrap, .c-stage { display: none; }

/* --- Вариант C «живой шоурум»: слева оффер+форма на «дышащем» фоне,
       справа кадр-витрина сам перелистывает линейку елей --- */
html.v-c .hero__bg,
html.v-c .hero__scrim,
html.v-c .owner-note { display: none; }
html.v-c .hero { background: var(--fir-900); }

/* «Дышащий» фон: размытая копия активного слайда, кроссфейд синхронно
   с витриной + затемнение слева под текст и форму */
html.v-c .c-bgwrap {
  display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.c-bg {
  position: absolute; inset: -6%;
  background: #0A1E15 center / cover no-repeat;
  filter: blur(26px) brightness(.5) saturate(1.15);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.c-bg.is-on { opacity: 1; }
html.v-c .c-bgwrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(8,20,14,.9) 0%, rgba(8,20,14,.78) 30%, rgba(8,20,14,.55) 44%,
    rgba(8,20,14,.15) 60%, rgba(8,20,14,0) 75%);
}

/* Кадр-витрина: слайды (кропы реальных фото), подпись типа елей, прогресс */
.c-slide {
  position: absolute; inset: 0;
  /* Ёлку показываем ЦЕЛИКОМ (contain), не режем сверху/снизу. Заливку по краям
     даёт просвечивающий размытый «дышащий» фон (c-bg) - слайд прозрачный.
     Раньше был auto 154% (зум с обрезкой + мыло от апскейла). */
  background: transparent center no-repeat;
  background-size: contain;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.4s var(--ease), transform 6.5s var(--ease);
}
.c-slide.is-on { opacity: 1; transform: scale(1); }
html.v-c .c-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,30,21,.55) 0%, rgba(10,30,21,.08) 16%, transparent 30%),
    linear-gradient(180deg, rgba(10,30,21,.34) 0%, transparent 20% 58%, rgba(10,30,21,.85) 100%);
}
.c-stage__meta {
  position: absolute; left: 2rem; right: 2rem; bottom: 1.5rem; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.c-stage__label { margin: 0; flex: 1 1 auto; min-width: 0; }
.c-stage__dots { flex-shrink: 0; }
.c-stage__kind {
  display: block;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1.05; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.c-stage__sub {
  display: block; font-size: .92rem; color: #DFE8DC; margin-top: .3rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  white-space: normal;   /* подпись показываем целиком, при нехватке места переносим */
}
.c-stage__dots { display: flex; gap: .45rem; padding-bottom: .5rem; }
.c-stage__dots i {
  width: 30px; height: 3px; border-radius: 2px;
  background: rgba(243,245,238,.3); transition: background .4s;
}
.c-stage__dots i.is-on { background: var(--green-400); }

/* Десктоп C: витрина занимает правые 56% экрана во всю высоту,
   телефон шапки остаётся справа сверху (поверх фото) */
@media (min-width: 900px) {
  html.v-c .c-stage {
    display: block; position: absolute; top: 0; right: 0; bottom: 0;
    width: 54%; overflow: hidden;
  }
  html.v-c .topbar { position: relative; z-index: 2; }
  html.v-c .topcall__num,
  html.v-c .topcall__prompt { text-shadow: 0 1px 12px rgba(0,0,0,.7); }
  html.v-c .hero__body {
    display: flex; flex-direction: column; justify-content: center;
    /* Прижать оффер и форму к ЛЕВОМУ краю панели (Правка 5c-3). Базовое десктоп-
       правило .hero__body задаёт align-items:center - во флекс-колонке C это
       центрировало форму по горизонтали (уже левого края оффера). Возвращаем
       левую линию: левый край формы = левый край заголовка/подзаголовка. */
    align-items: flex-start;
    width: 46%; max-width: none; margin: 0; padding-right: 2.5rem;
    gap: 1.2rem;
  }
  /* Оффер шире (длиннее строка - правка заказчика), форма уже и компактнее. */
  html.v-c .hero__offer { max-width: 640px; width: 100%; }
  html.v-c .hero__form { max-width: 460px; width: 100%; }
  html.v-c .hero__title { font-size: clamp(1.75rem, 2.2vw, 2.6rem); margin-bottom: 0; max-width: 20em; }
  /* Компактный подзаголовок в C: панель узкая, умещаемся вместе с формой. */
  html.v-c .hero__sub { margin-top: .65rem; font-size: 1rem; }

  /* Компактная форма C (правка заказчика - была великовата): меньше паддинги,
     кегль заголовка/подписи, отступы полей и инпутов. Имя+телефон в строку. */
  html.v-c .hero__form .lead-card { padding: 1rem 1.05rem .95rem; }
  html.v-c .hero__form .lead-card__title { font-size: 1.12rem; margin-bottom: .35rem; }
  html.v-c .hero__form .lead-card__note { margin-bottom: .7rem; font-size: .85rem; }
  html.v-c .hero__form .lead-form { grid-template-columns: 1fr 1fr; gap: .65rem; }
  html.v-c .hero__form .lead-form > * { grid-column: 1 / -1; }
  html.v-c .hero__form .lead-form > .field { grid-column: auto; }
  html.v-c .hero__form .lead-form > .contact { grid-column: 1 / -1; }
  html.v-c .hero__form .field label { font-size: .76rem; }
  html.v-c .hero__form input[type="text"],
  html.v-c .hero__form input[type="tel"] { padding: .5rem .65rem; font-size: .9rem; }
  html.v-c .hero__form .btn { padding: .7rem 1rem; font-size: .95rem; }
  html.v-c .hero__form .consent { font-size: .78rem; }
}

/* Мобайл/планшет C: витрина сверху (46-48svh, во всю ширину),
   шапка поверх фото, ниже оффер и кнопка/форма на дышащем фоне */
@media (max-width: 899px) {
  html.v-c .c-stage {
    display: block; position: relative;
    height: 46svh; overflow: hidden;
    margin: -1.1rem -1.25rem 0;   /* full-bleed за паддинги hero */
  }
  html.v-c .topbar {
    position: absolute; top: .9rem; left: 1.25rem; right: 1.25rem;
    z-index: 3; margin: 0; width: auto;
  }
  html.v-c .topcall__num { text-shadow: 0 1px 10px rgba(0,0,0,.75); }
  html.v-c .c-stage__meta { left: 1.25rem; right: 1.25rem; bottom: 1rem; }
  html.v-c .c-stage__kind { font-size: 1.3rem; }
  html.v-c .c-slide { background-size: auto 128%; }
}
@media (max-width: 619px) {
  /* Правка 5c-2: фото-слайдер ТЯНЕТСЯ и заполняет всё место над оффером, а
     карточка «оффер+кнопка» встаёт к низу экрана - на тот же уровень, что в A/B
     (пустоты снизу больше нет). .hero - флекс-колонка (min-height:100svh);
     слайдер flex:1 забирает весь свободный запас, оффер+кнопка (flex:0 0 auto)
     садятся под ним у нижнего края. Раньше слайдер был фикс. 48svh, а тело с
     flex:1 (из базового правила) центрировалось - оставалась пустота снизу. */
  html.v-c .c-stage {
    flex: 1 1 auto; height: auto; min-height: 40svh;
    margin: -.8rem -.85rem 0;
  }
  html.v-c .topbar { left: .85rem; right: .85rem; }
  html.v-c .c-stage__meta { left: .85rem; right: .85rem; }
  /* Тело - естественной высоты у низа (не растягивается), тёмная плашка A
     остаётся - читаемость на дышащем фоне */
  html.v-c .hero__body { flex: 0 0 auto; padding: 1rem 0 1.2rem; gap: 1rem; }
  html.v-c .hero__offer { margin: 0; }
}

/* ============================================================
   Доступность: уважать reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; }
  .hero__bg { transform: none !important; }
  .c-bg, .c-slide { transition: none; transform: none; }
  .cookie { animation: none; }
}

/* ============================================================
   COOKIE-БАННЕР (Фаза 4a.2)
   Фиксирован снизу, вне hero - виден на всех вариантах (v-a/v-b/v-c).
   Гамма лендинга (тёмный еловый фон, зелёный CTA). Ниже модалки (z 50).
   ============================================================ */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: .95rem 1.1rem;
  background: var(--fir-900);
  color: var(--cream);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -16px 44px -22px rgba(0, 0, 0, .8);
  animation: cookie-up .32s var(--ease);
}
.cookie[hidden] { display: none; }
.cookie__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.6rem;
}
.cookie__text {
  margin: 0;
  flex: 1 1 340px;
  min-width: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--cream-dim);
}
.cookie__text a {
  color: var(--green-400);
  font-weight: 600;
  text-underline-offset: 2px;
}
.cookie__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Тач-цели кнопок >=44px */
.cookie .btn {
  padding: .72rem 1.4rem;
  font-size: .92rem;
  min-height: 44px;
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 2px solid rgba(255, 255, 255, .4);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .75);
  transform: translateY(-2px);
}
@keyframes cookie-up { from { transform: translateY(100%); } to { transform: none; } }

/* На узких экранах (360/390/414) - кнопки во всю ширину, в строку */
@media (max-width: 560px) {
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   ЮР-СТРАНИЦЫ: privacy.html / consent.html
   Тот же шрифт/палитра, что у лендинга (гамма C). Читаемая колонка.
   ============================================================ */
.legal-page { background: var(--paper); }

/* Шапка юр-страницы - фирменная зелёная полоса */
.legal-top {
  background: var(--green-600);
  color: var(--cream);
  padding: .9rem 1.25rem;
}
.legal-top__wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.legal-top .brand { color: var(--cream); }
.legal-top__call {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream);
}
.legal-top__call:hover { color: #fff; }

.legal {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.2rem 1.25rem 4rem;
}
.legal__back {
  display: inline-block;
  margin-bottom: 1.3rem;
  color: var(--green);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
.legal__back:hover { text-decoration: underline; }
.legal__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--fir-900);
  margin: .2rem 0 .5rem;
}
.legal__meta { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.6rem; }

/* Callout «черновик к юристу» и служебные врезки */
.legal__note {
  background: var(--green-050);
  border: 1px solid #bcdcc0;
  border-left: 4px solid var(--green);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  color: #1c5a34;
  font-size: .92rem;
  margin: 0 0 2rem;
}
.legal__callout {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-400);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 1.4rem 0 0;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.28rem;
  letter-spacing: .01em;
  color: var(--fir-900);
  margin: 2rem 0 .7rem;
}
.legal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--fir-900);
  margin: 1.5rem 0 .5rem;
}
.legal p { color: var(--ink); font-size: 1rem; line-height: 1.65; margin: 0 0 1rem; }
.legal ul { padding-left: 1.2rem; margin: .4rem 0 1.1rem; }
.legal li { color: var(--ink); font-size: 1rem; line-height: 1.6; margin: .35rem 0; }
.legal a { color: var(--green); font-weight: 600; }
.legal strong { color: var(--fir-900); }

@media (min-width: 620px) {
  .legal-top { padding: 1rem 2rem; }
  .legal { padding: 3rem 2rem 5rem; }
}