@charset "UTF-8";

/* ==========================================================================
   Шрифты — со своего домена, не с Google CDN.
   Внешний CDN отдаёт IP каждого посетителя за границу, а политика сайта
   заявляет, что трансграничной передачи нет. Плюс минус два TLS-соединения
   на старте и −285 КБ: здесь только те начертания и символы, что реально
   на странице (кириллица, латиница, цифры, ₽ и типографика).
   Oswald и Golos Text, лицензия SIL Open Font License 1.1.
   Пересобрать после появления редких символов:
     fonttools varLib.instancer <var>.ttf wght=600 -o tmp.ttf
     fonttools subset tmp.ttf --unicodes=... --flavor=woff2
   ========================================================================== */

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/golos-text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/golos-text-500.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/golos-text-600.woff2") format("woff2");
}

/* ==========================================================================
   ЗАЩИТА НЕБА МОСКВЫ — Swiss/International
   Токены → компоненты. В разметке только переменные, ни одного literal-цвета.
   ========================================================================== */

:root {
  /* ---- цвет ---- */
  --ground:        #ffffff;
  --surface:       #f4f4f2;   /* тёплый серый, не чистый */
  --surface-2:     #ececeA;
  --dark:          #14181d;   /* графит «ночное небо» */
  --dark-2:        #1c2229;
  --ink:           #0d0d0d;
  --ink-2:         #4a4a4a;
  --ink-3:         #6e6e6e;
  --on-dark:       #f2f2f0;
  --on-dark-2:     #a8adb4;
  --line:          #d8d8d4;
  --line-strong:   #0d0d0d;
  --line-dark:     #2b323b;
  --accent:        #c8102e;   /* только то, на что нажимают */
  --accent-hover:  #a60d26;
  --ok:            #1f6b3f;

  /* ---- отступы: четырёхкратная сетка ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;   --s-10: 64px;  --s-11: 80px; --s-12: 96px;
  --s-13: 128px; --s-14: 160px;

  /* ---- кегли ---- */
  --t-hero:    clamp(2.375rem, 6vw, 5.5rem);
  --t-section: clamp(1.625rem, 4vw, 3rem);
  --t-sub:     clamp(1.125rem, 2.2vw, 1.5rem);
  --t-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;
  --t-num:     clamp(1.75rem, 3.2vw, 2.5rem);

  /* ---- прочее ---- */
  --radius:  4px;
  --radius-0: 0px;
  --wrap:    1240px;
  --hdr:     69px;   /* min-height шапки + её нижняя граница */
  --fast:    140ms;
  --mid:     200ms;
  --ease:    cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

/* Липкая шапка не должна накрывать заголовок секции при переходе по якорю */
:target,
section[id],
#quiz { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: Oswald, "Arial Narrow", "Golos Text", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.05;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: #fff; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  z-index: 100;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Шапка
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
  border-bottom: 1px solid var(--line-dark);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: Oswald, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--on-dark-2); font-weight: 500; }

.nav {
  display: flex;
  gap: var(--s-6);
  margin-left: auto;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: var(--t-small);
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) ease-out, border-color var(--fast) ease-out;
}
.nav a:hover { color: var(--on-dark); border-bottom-color: var(--accent); }
.nav a.is-active { color: var(--on-dark); border-bottom-color: var(--accent); }

/* Мессенджер в шапке — кнопка, но контурная: заливная остаётся одна,
   на главном действии. Прижата к правому краю вместо прежнего телефона. */
.hdr__msg {
  margin-left: auto;
  white-space: nowrap;
  /* Мессенджер — вспомогательный канал: та же форма, но приглушённее заявки */
  color: var(--on-dark-2);
  border-color: var(--line-dark);
}
.hdr__msg:hover { color: var(--on-dark); border-color: var(--on-dark-2); }
.hdr__msg svg { flex: none; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  width: 44px;
  height: 44px;
  margin-left: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: Oswald, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) ease-out, border-color var(--fast) ease-out,
              color var(--fast) ease-out;
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark-2);
}
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: 0.8125rem; }
.btn--wide { width: 100%; }

/* ==========================================================================
   Первый экран
   ========================================================================== */

.hero {
  background: var(--dark);
  color: var(--on-dark);
  padding: var(--s-7) 0 var(--s-8);
  border-bottom: 1px solid var(--line-dark);
  /* Ровно один экран: контент по центру оставшейся высоты.
     svh — чтобы адресная строка мобильного браузера не срезала низ. */
  min-height: calc(100vh - var(--hdr));
  min-height: calc(100svh - var(--hdr));
  display: flex;
  align-items: center;
}
.hero > .wrap { width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s-9);
  align-items: center;
}

.label {
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border: 1px solid currentColor;
  color: var(--on-dark-2);
}
.label--live { color: var(--on-dark); border-color: var(--accent); }
.label--live::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  margin-right: var(--s-2);
  vertical-align: 1px;
}

.hero h1 {
  font-size: var(--t-hero);
  margin: var(--s-4) 0 0;
  color: #fff;
  /* Две строки: «Контракт на СВО» и «БПЛА и ПВО». Балансировку строк отключаем —
     она разбивала заголовок на три. */
  max-width: 16ch;
  text-wrap: normal;
}

.hero__lead {
  font-size: var(--t-lead);
  color: var(--on-dark-2);
  max-width: 52ch;
  margin-top: var(--s-4);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--s-5);
  border: 1px solid var(--line-dark);
}
.stat {
  padding: var(--s-3) var(--s-5);
  border-right: 1px solid var(--line-dark);
}
.stat:last-child { border-right: 0; }
.stat__k {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: var(--s-1);
}
.stat__v {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.disclaimer {
  font-size: var(--t-small);
  color: var(--on-dark-2);
  margin-top: var(--s-3);
  max-width: 56ch;
}
.disclaimer--light { color: var(--ink-3); }

/* ==========================================================================
   Квиз
   ========================================================================== */

.quiz {
  background: var(--ground);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s-6);
}

.quiz__lead {
  font-family: Oswald, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.quiz__note {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: var(--s-2) 0 var(--s-5);
}

.quiz__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.quiz__bar {
  height: 3px;
  background: var(--line);
  margin: var(--s-3) 0 var(--s-6);
}
.quiz__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0.166);
  transform-origin: left center;
  background: var(--accent);
  transition: transform var(--mid) var(--ease);
}

.quiz__q {
  font-size: 1.375rem;
  margin-bottom: var(--s-2);
}
.quiz__hint {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}

.quiz__opts { display: grid; gap: var(--s-2); }

.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) ease-out, background var(--fast) ease-out;
}
.opt:hover { border-color: var(--ink); background: var(--surface); }
.opt::after {
  content: "→";
  color: var(--ink-3);
  flex: none;
}

.quiz__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-5);
  gap: var(--s-3);
}

.link-back {
  background: none;
  border: 0;
  padding: var(--s-2) 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-back:hover { color: var(--ink); }

/* поля */
.field { display: block; margin-bottom: var(--s-4); }
.field__label {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--fast) ease-out;
}
.field__input:hover { border-color: var(--ink-3); }
.field__input:focus { border-color: var(--ink); outline-offset: 1px; }
.field__input[aria-invalid="true"] { border-color: var(--accent); }

.field__err {
  display: none;
  font-size: var(--t-small);
  color: var(--accent);
  margin-top: var(--s-2);
}
.field__err[data-show="1"] { display: block; }

.consent {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: var(--s-4);
}
.consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent a {
  color: var(--ink);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-1) 0;
}

/* успех */
.done { text-align: center; padding: var(--s-6) 0; }
.done__mark {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-5);
  border: 2px solid var(--ok);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ok);
}
.done__title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.375rem;
  margin-bottom: var(--s-3);
}
.done p { color: var(--ink-2); font-size: var(--t-small); }

/* «не отправилось» — заявка не теряется, человеку дают путь короче формы */
.fail { padding: var(--s-6) 0; }
.fail__title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.125rem;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.fail p { color: var(--ink-2); font-size: var(--t-small); margin-bottom: var(--s-4); }
.fail .btn + .btn { margin-top: var(--s-2); }

/* Фокус на блок-статус переносим для скринридера — рамка вокруг него читается
   как ошибка ввода, поэтому её убираем; на кнопках внутри фокус остаётся. */
.done:focus, .fail:focus { outline: none; }

/* ловушка для ботов: видна только автоматике */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Предварительный итог квиза
   ========================================================================== */

.res {
  border-top: 1px solid var(--line-strong);
  margin-bottom: var(--s-5);
}
.res li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.res__k { font-size: var(--t-small); color: var(--ink-2); }
.res__v {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.res__notes { margin-bottom: var(--s-5); }
.res__notes li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.res__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 10px; height: 1px;
  background: var(--accent);
}
.res__notes li[hidden] { display: none; }

.res__stop {
  font-size: 0.9375rem;
  color: var(--ink-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
  margin-bottom: var(--s-4);
}

/* выбранный ранее вариант виден при возврате назад */
.opt[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--surface);
}
.opt[aria-pressed="true"]::after { content: "✓"; color: var(--ok); }

/* ==========================================================================
   Секции
   ========================================================================== */

.sec { padding: var(--s-12) 0; border-bottom: 1px solid var(--line); }
.sec--surface { background: var(--surface); }
.sec--dark { background: var(--dark); color: var(--on-dark); border-bottom-color: var(--line-dark); }

.sec__head { margin-bottom: var(--s-9); max-width: 62ch; }
.sec__label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.sec--dark .sec__label { color: var(--on-dark-2); }
.sec h2 { font-size: var(--t-section); }
.sec__sub {
  font-size: var(--t-lead);
  color: var(--ink-2);
  margin-top: var(--s-4);
}
.sec--dark .sec__sub { color: var(--on-dark-2); }

/* ==========================================================================
   «Это не мобилизация» — три колонки
   ========================================================================== */

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-strong);
}
.col {
  padding: var(--s-8) var(--s-7);
  border-right: 1px solid var(--line);
}
.col:last-child { border-right: 0; }
.col__icon { color: var(--accent); margin-bottom: var(--s-5); display: block; }
.col h3 { font-size: 1.125rem; margin-bottom: var(--s-3); }
.col p { color: var(--ink-2); font-size: var(--t-small); }

/* ==========================================================================
   Таблица дохода
   ========================================================================== */

.pay { border: 1px solid var(--line-strong); background: var(--ground); }

.pay__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;
  gap: var(--s-6);
  padding: var(--s-7);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.pay__row:last-of-type { border-bottom: 0; }

.pay__head {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  background: var(--surface);
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}

.pay__name { font-weight: 600; }
.pay__sum {
  font-family: Oswald, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay__how { color: var(--ink-2); font-size: var(--t-small); }

.pay__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-7);
  background: var(--dark);
  color: var(--on-dark);
}
.pay__total-k {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  font-weight: 600;
}
.pay__total-v {
  font-family: Oswald, sans-serif;
  font-size: var(--t-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}

/* Ссылка на первоисточник и дата актуальности — самый весомый приём
   цитируемости в ИИ-поиске: ответ со ссылкой на источник охотнее цитируют. */
.note--src {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.note--src a { color: var(--ink-2); text-underline-offset: 3px; }
.note--src a:hover { color: var(--ink); }

.note {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-top: var(--s-5);
  max-width: 78ch;
  padding-left: var(--s-4);
  border-left: 2px solid var(--line);
}

/* Разбор суммы: главное возражение ниши — «цифра из рекламы недостижима».
   Отвечаем двумя колонками в том же ключе, что и «Берём / Не берём». */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.split__box {
  border: 1px solid var(--line-strong);
  background: var(--ground);
  padding: var(--s-7);
}
.split__box--var { border-color: var(--line); background: var(--surface); }
.split__box h3 {
  font-size: 1.125rem;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.split__sum {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: var(--t-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
/* Тот же кегль, что и у суммы слева: разницу несёт цвет, а не новый размер */
.split__box--var .split__sum { color: var(--ink-3); }
.split__unit {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s-2);
}
.split__box p {
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* ==========================================================================
   Карточки: смена, льготы
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
}
.card__icon { color: var(--accent); margin-bottom: var(--s-4); display: block; }
/* Карточка без иконки — заголовок не должен висеть в воздухе */
.card h3:first-child { margin-top: 0; }
.card h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.card p { color: var(--ink-2); font-size: var(--t-small); }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.tile {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.tile:nth-child(3n) { border-right: 0; }
.tile:nth-last-child(-n+3) { border-bottom: 0; }
.tile__icon {
  color: var(--ink-3);
  flex: none;
  /* высота строки текста рядом — так иконка встаёт по центру первой строки */
  height: 1.5em;
  display: flex;
  align-items: center;
}
.tile > div { min-width: 0; }
.tile b { display: block; font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.tile span { color: var(--ink-2); font-size: var(--t-small); }

/* ==========================================================================
   Берём / не берём
   ========================================================================== */

.take {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.take__box {
  border: 1px solid var(--line-strong);
  padding: var(--s-7);
  background: var(--ground);
}
.take__box--no { border-color: var(--line); background: var(--surface); }
.take__box h3 {
  font-size: 1.125rem;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.take li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-size: 0.9375rem;
  align-items: flex-start;
}
.take li svg { flex: none; align-self: flex-start; height: 1.5em; }
.take__box--yes svg { color: var(--ok); }
.take__box--no svg { color: var(--ink-3); }
.take__box--no li { color: var(--ink-2); }

/* ==========================================================================
   Выплаты по регионам
   Сетка на общей рамке: человек ищет свой город глазами, поэтому названия
   идут первыми, а сумма — крупным числом того же кегля, что и в таблице дохода.
   ========================================================================== */

.geo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-strong);
}
.geo__card {
  padding: var(--s-6) var(--s-6) var(--s-7);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.geo__card:nth-child(4n) { border-right: 0; }
.geo__card:nth-last-child(-n+2) { border-bottom: 0; }

/* Название региона — служебная строка над цифрой, а не заголовок наравне с ней:
   в карточке одна главная величина, всё остальное её поясняет. */
.geo__card h3 {
  font-family: "Golos Text", sans-serif;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
  min-height: 2.4em;
}
.geo__sum {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.05;
}
.geo__label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s-2);
}

/* Шкала вместо фотографии региона: показывает, насколько выплата близка
   к максимуму по стране. Ноль килобайт и прямо отвечает на «где больше». */
.geo__bar {
  display: block;
  height: 3px;
  margin-top: var(--s-4);
  background: var(--surface-2);
}
.geo__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Доход за год — вторая по важности цифра, поэтому идёт сразу под шкалой
   и набран текстом, а не отделяется ещё одной линией: линий в карточке
   и так три, они спорили с границами сетки. */
.geo__year {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: var(--s-3);
}
.geo__year b { font-weight: 600; color: var(--ink); }

/* Города — самое тихое в карточке: подсказка «мой ли это регион» */
.geo__sub {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: var(--s-4);
  min-height: 3.2em;
}

/* ==========================================================================
   Страницы регионов: крошки, шапка документа, список ссылок
   ========================================================================== */

.crumbs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  color: var(--ink-3);
}
.crumbs li + li::before { content: "→"; margin-right: var(--s-2); color: var(--ink-3); }
.crumbs a {
  color: var(--ink-2);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

.doc-hero {
  padding: var(--s-10) 0 var(--s-11);
  min-height: 0;
  display: block;
  /* Фон — уже имеющийся снимок техники, один на все страницы: он кэшируется
     после первого захода и не тянет за собой 13 новых файлов и 13 атрибуций.
     Фотографии городов эту задачу не решают: регион выбирают по сумме. */
  background-color: var(--dark);
  background-image:
    linear-gradient(100deg, rgba(20,24,29,.94) 0%, rgba(20,24,29,.86) 45%, rgba(20,24,29,.66) 100%),
    url("../img/sky-radar.jpg");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}
@media (max-width: 860px) {
  .doc-hero {
    background-image: linear-gradient(180deg, rgba(20,24,29,.94), rgba(20,24,29,.86)), url("../img/sky-radar.jpg");
  }
}
@media (prefers-reduced-motion: reduce) {
  .doc-hero { background-image: none; }
}
.doc-hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: var(--s-4); }
.doc-hero .sec__sub { max-width: 62ch; }
.doc-hero .hero__cta { margin-top: var(--s-7); }

/* Список регионов — навигация, а не текст: колонка в 72ch оставляла треть
   экрана пустой. Раскладываем на всю ширину в две колонки. */
.linklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-10);
  border-top: 1px solid var(--line-strong);
}
.linklist li { border-bottom: 1px solid var(--line); min-width: 0; }
.linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) 0;
  text-decoration: none;
  transition: color var(--fast) ease-out;
}
.linklist a::after { content: "→"; color: var(--ink-3); }
.linklist a:hover { color: var(--accent); }

/* Карточка региона как ссылка: вся площадь — цель, не только надпись.
   Колонка с прижатой к низу ссылкой — иначе «Условия в регионе» встаёт
   на разной высоте у карточек с подписью про доход за год и без неё. */
.geo__card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) ease-out;
}
.geo__card--link:hover { background: var(--surface); }
.geo__card--link .geo__sub,
.geo__card--link .geo__year { margin-bottom: var(--s-4); }
.geo__go {
  display: block;
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--accent);
}

/* ==========================================================================
   Шаги
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--line-strong);
}
.step {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
  border-right: 1px solid var(--line);
}
/* Крайние колонки выравниваются по краям контейнера, внутренние — дышат по обе стороны линии */
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step__n {
  font-family: Oswald, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--s-4);
}
.step h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.step p { font-size: var(--t-small); color: var(--ink-2); }
.step__when {
  display: block;
  /* Срок прижат к низу: описания шагов разной длины, и без этого подписи
     «15 минут до звонка» и «1–3 дня» вставали на разной высоте. */
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Форма заявки
   ========================================================================== */

.apply__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--s-10);
  align-items: start;
}

.apply__box {
  background: var(--ground);
  color: var(--ink);
  padding: var(--s-8);
  border-radius: var(--radius);
}

.msgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color var(--fast) ease-out, color var(--fast) ease-out;
}
.msg:hover { border-color: var(--ink); color: var(--ink); }
.msgs--one { grid-template-columns: 1fr; }

.trust { margin-top: var(--s-8); }
.trust li {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  align-items: flex-start;
}
.trust li:last-child { border-bottom: 0; }
.trust svg { color: var(--on-dark); flex: none; align-self: flex-start; height: 1.5em; }
.trust b { color: var(--on-dark); font-weight: 600; }

/* ==========================================================================
   Вопросы
   ========================================================================== */

/* Восемь вопросов в одну колонку — простыня на полтора экрана. В две колонки
   виден весь список сразу, а открытый ответ не сдвигает соседнюю колонку. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-10);
  align-items: start;
  border-top: 1px solid var(--line-strong);
}
.faq details {
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-7) 0;
  cursor: pointer;
  font-family: Oswald, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--accent);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq__a {
  padding: 0 var(--s-11) var(--s-6) 0;
  color: var(--ink-2);
  max-width: 76ch;
}

/* ==========================================================================
   Подвал
   ========================================================================== */

.ftr {
  background: var(--dark);
  color: var(--on-dark-2);
  padding: var(--s-11) 0 var(--s-9);
  font-size: var(--t-small);
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--line-dark);
}
.ftr h3 {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--on-dark);
  margin-bottom: var(--s-4);
}
.ftr a { color: var(--on-dark-2); text-decoration: none; }
/* Телефон в подвале — цель для пальца, а не строчка текста */
.ftr a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ftr a:hover { color: var(--on-dark); text-decoration: underline; }
.ftr li { padding: 0; }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__legal { padding-top: var(--s-6); line-height: 1.6; }
.ftr__credits { font-size: 0.75rem; color: var(--ink-3); }
.ftr__credits a {
  color: var(--on-dark-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) 0;
}
.ftr__legal p + p { margin-top: var(--s-3); }
.todo {
  color: var(--accent);
  border: 1px dashed var(--accent);
  padding: var(--s-1) var(--s-2);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Липкая панель на мобильном
   ========================================================================== */

.dock {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--dark);
  border-top: 1px solid var(--line-dark);
  padding: var(--s-3);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  gap: var(--s-2);
}
.dock .btn { flex: 1; min-height: 52px; white-space: nowrap; }
/* На узком телефоне подписи не должны переноситься: иначе панель вырастает
   вдвое и съедает первый экран. */
@media (max-width: 380px) {
  .dock .btn { font-size: 0.75rem; padding-left: var(--s-2); padding-right: var(--s-2); letter-spacing: 0; }
}

/* ==========================================================================
   Низкие экраны: ужимаем первый экран, чтобы кнопка не ушла за сгиб.
   Значения — из шкалы отступов, без промежуточных vh-величин.
   ========================================================================== */

@media (max-height: 820px) and (min-width: 861px) {
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero h1 { margin-top: var(--s-3); font-size: clamp(2rem, 5.4vw, 4.75rem); }
  .hero__lead { margin-top: var(--s-3); }
  .stats { margin-top: var(--s-5); }
  .hero__cta { margin-top: var(--s-5); }
  .stat { padding: var(--s-3) var(--s-5) var(--s-4); }
}

@media (max-height: 700px) and (min-width: 861px) {
  .hero { padding: var(--s-6) 0 var(--s-6); }
  .hero h1 { font-size: clamp(1.875rem, 4.4vw, 3.5rem); }
  .stats { margin-top: var(--s-4); }
  .hero__cta { margin-top: var(--s-4); }
  .disclaimer { margin-top: var(--s-2); }
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1024px) {
  .hero {
    min-height: 0;
    align-items: stretch;
    padding: var(--s-8) 0 var(--s-9);
  }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .apply__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  /* Форма выше текста: тап по «Оставить заявку» приводит к полям, а не к заголовку */
  .apply__grid > :first-child { order: 2; }
  .apply__box { order: 1; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .geo { grid-template-columns: repeat(2, 1fr); }
  .geo__card:nth-child(4n) { border-right: 1px solid var(--line); }
  .geo__card:nth-child(2n) { border-right: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { border-bottom: 1px solid var(--line); padding: var(--s-7) var(--s-6); }
  .step:nth-child(odd) { padding-left: 0; }
  .step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .step:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  .hero {
    padding: var(--s-6) 0 var(--s-7);
    min-height: calc(100svh - var(--hdr) - 84px);
  }
  .hero__cta { margin-top: var(--s-4); }
  .hero__cta .btn--ghost { display: none; }
  .hero__cta .btn { width: 100%; }
  .stats { margin-top: var(--s-6); }
  .stat { padding: var(--s-3) var(--s-4) var(--s-4); }
  .hero__lead { margin-top: var(--s-3); }
  /* На телефоне первый экран несут заголовок, цифры и кнопка: уточняющую часть
     вводного абзаца убираем — она повторяется в блоке регионов ниже. */
  .lead__tail { display: none; }
  /* Заголовок на телефоне занимает три строки — компенсируем ритмом вокруг него */
  .hero h1 { margin-top: var(--s-2); }
  .hero .label--live { padding: var(--s-1) var(--s-2); }
  .stat { padding: var(--s-2) var(--s-3); }
  .hero .disclaimer { font-size: 0.8125rem; margin-top: var(--s-2); }

  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0;
    padding: var(--s-4) var(--s-5);
    background: var(--dark);
    border-bottom: 1px solid var(--line-dark);
  }
  .burger { display: flex; }
  .hdr__tel { display: none; }
  .hdr .btn { display: none; }
  .cols3 { grid-template-columns: 1fr; }
  .col { border-right: 0; border-bottom: 1px solid var(--line); }
  .col:last-child { border-bottom: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile:nth-child(3n) { border-right: 1px solid var(--line); }
  .tile:nth-child(2n) { border-right: 0; }
  .tile:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .tile:nth-last-child(-n+2) { border-bottom: 0; }
  .take { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .linklist { column-gap: var(--s-7); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .pay__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .pay__head { display: none; }
  .pay__sum { font-size: 1.5rem; }
  .dock { display: flex; }
  body { padding-bottom: 84px; }
  .sec { padding: var(--s-10) 0; }
  .hero { padding: var(--s-9) 0 var(--s-10); }
  .faq { grid-template-columns: 1fr; }
  .faq__a { padding-right: var(--s-6); }
}

/* Невысокий телефон (SE и подобные): первый экран должен уместиться над липкой
   панелью, поэтому ужимаем кегли и ритм — сокращать сам текст не нужно. */
/* Экран вроде 320×568: убираем плашку «Набор открыт» — это украшение,
   а место нужно кнопке и строке «это консультация, а не повестка». */
@media (max-width: 860px) and (max-height: 600px) {
  .hero { padding: var(--s-4) 0; }
  .hero__lead { display: none; }
  .hero .label--live { display: none; }
  .hero h1 { margin-top: 0; }
}

/* Совсем невысокий экран (360×640 и подобные): уточнение в лиде уступает место
   кнопке — эти же факты есть в плашках рядом и в секции «Это не мобилизация». */
@media (max-width: 860px) and (max-height: 660px) {
  .lead__tail { display: none; }
  .hero .label--live { display: none; }
  .hero h1 { margin-top: 0; }
  .stat__v { font-size: 1rem; }
  .stat { padding: var(--s-2) var(--s-3); }

}

@media (max-width: 860px) and (max-height: 700px) {
  .hero { padding: var(--s-4) 0 var(--s-5); }
  .lead__tail { display: none; }
  .hero h1 { font-size: 1.75rem; margin-top: var(--s-3); }
  .hero__lead { font-size: 0.9375rem; margin-top: var(--s-3); }
  .stats { margin-top: var(--s-4); }
  .stat { padding: var(--s-2) var(--s-3) var(--s-3); }
  .stat__v { font-size: 1.0625rem; }
  .stat__k { margin-bottom: var(--s-1); }
  .hero__cta { margin-top: var(--s-4); }
  .hero .disclaimer { margin-top: var(--s-2); font-size: 0.75rem; }
  .hero__lead { font-size: 0.875rem; }
}

/* Узкий телефон: в строку помещается меньше знаков, поэтому заголовок мельче —
   иначе он занимает три строки и выдавливает кнопку за сгиб. */
@media (max-width: 380px) {
  .hero h1 { font-size: 2rem; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile { border-right: 0 !important; padding: var(--s-4) var(--s-5); }
  .tile:not(:last-child) { border-bottom: 1px solid var(--line) !important; }
  .tile:last-child { border-bottom: 0 !important; }
  .geo { grid-template-columns: 1fr; }
  .geo__card { border-right: 0 !important; }
  .geo__card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .geo__card:last-child { border-bottom: 0; }
  .geo__card h3 { min-height: 0; }
  .linklist { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; padding-left: 0; padding-right: 0; }
  .msgs { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .apply__box { padding: var(--s-5); }
  .quiz { padding: var(--s-5); }
}

/* ==========================================================================
   Фоновые изображения
   Фото: StockSnap, лицензия CC0 (public domain, атрибуция не требуется)
   Техника: Vitaly Kuzmin, Wikimedia Commons, CC BY-SA 4.0
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--dark);
  background-image:
    linear-gradient(180deg, rgba(20,24,29,.94) 0%, rgba(20,24,29,.80) 45%, rgba(20,24,29,.62) 100%),
    url("../img/hero-night.jpg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}

/* Заявка — техника ПВО, сильно приглушённая: читаемость формы важнее картинки */
.sec--dark#apply {
  background-color: var(--dark);
  background-image:
    linear-gradient(100deg, rgba(20,24,29,.96) 0%, rgba(20,24,29,.90) 40%, rgba(20,24,29,.74) 100%),
    url("../img/tech.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* На мобильном фон легче: экономим трафик и не мешаем чтению */
@media (max-width: 860px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(20,24,29,.95) 0%, rgba(20,24,29,.82) 100%),
      url("../img/hero-night.jpg");
    background-position: center top;
  }
  .sec--dark#apply { background-image: none; }
}

/* Секция «Как устроена смена» — радар на ночном небе (сгенерировано ИИ) */
.sec#work {
  position: relative;
  background-color: var(--dark);
  background-image:
    linear-gradient(180deg, rgba(20,24,29,.93) 0%, rgba(20,24,29,.86) 60%, rgba(20,24,29,.78) 100%),
    url("../img/radar.jpg");
  background-size: cover;
  background-position: center 40%;
  color: var(--on-dark);
  border-bottom-color: var(--line-dark);
}
.sec#work .sec__label { color: var(--on-dark-2); }
.sec#work .sec__sub { color: var(--on-dark-2); }
.sec#work .card {
  background: rgba(20,24,29,.72);
  border-color: var(--line-dark);
  backdrop-filter: blur(2px);
}
.sec#work .card h3 { color: var(--on-dark); }
.sec#work .card p { color: var(--on-dark-2); }

@media (max-width: 860px) {
  .sec#work { background-image: linear-gradient(180deg, rgba(20,24,29,.95), rgba(20,24,29,.9)), url("../img/radar.jpg"); }
}

/* Тем, кто просил меньше движения и оформления, — плоский фон */
@media (prefers-reduced-motion: reduce) {
  .hero, .sec--dark#apply, .sec#work { background-image: none; }
}

/* ==========================================================================
   Уважение к настройкам движения
   ========================================================================== */

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

@media print {
  .hdr, .dock, .quiz, .msgs, .modal, .cookie { display: none; }
  body { color: #000; background: #fff; }
}


/* ==========================================================================
   Модальное окно с анкетой
   Открывается только там, где квиза не видно на экране: с середины страницы
   и на телефоне. Если анкета и так перед глазами — окно не мешает.
   ========================================================================== */

.modal {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.modal::backdrop {
  background: rgba(13, 13, 13, .74);
}
.modal__slot {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius);
  background: var(--ground);
}
.modal__form { padding: var(--s-7) var(--s-6) var(--s-6); }
.modal__title {
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.modal__sub {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin: var(--s-3) 0 var(--s-6);
}

.modal__close {
  position: absolute;
  top: calc(-1 * var(--s-3) - 44px);
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--on-dark-2);
  border-radius: var(--radius);
  color: var(--on-dark);
  cursor: pointer;
  transition: border-color var(--fast) ease-out, background var(--fast) ease-out;
}
.modal__close:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }

/* На узком экране кнопка не помещается над окном — уводим её внутрь угла */
/* Только когда по высоте тесно: по ширине кнопка помещается над окном даже на телефоне */
@media (max-height: 700px) {
  .modal__close {
    top: var(--s-2);
    right: var(--s-2);
    border-color: var(--line);
    color: var(--ink-3);
    background: var(--ground);
  }
  .modal__close:hover { border-color: var(--ink); background: var(--surface); }
  .modal__form { padding-top: var(--s-9); }
}

/* ==========================================================================
   Обратный звонок
   Плавающая кнопка живёт над липкой панелью на телефоне и левее уведомления
   о cookie на десктопе — иначе они перекрывают друг друга.
   ========================================================================== */

.callback__fab {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 75;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-family: Oswald, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(13, 13, 13, .28);
  transition: background var(--fast) ease-out;
}
.callback__fab:hover { background: var(--accent-hover); }
.callback__fab svg { flex: none; }

/* Пока висит уведомление о cookie, кнопка поднимается над ним.
   Класс вешает скрипт: :has поддерживают не все браузеры, а промах здесь
   означает перекрытую кнопку. */
body.has-cookie .callback__fab { bottom: calc(var(--s-5) + 108px); }

@media (max-width: 860px) {
  .callback__fab {
    right: var(--s-3);
    bottom: calc(84px + var(--s-3));
    padding: var(--s-3) var(--s-4);
    font-size: 0.8125rem;
  }
  body.has-cookie .callback__fab { bottom: calc(84px + 108px); }
}

@media (max-width: 380px) {
  .callback__fab span { display: none; }
  .callback__fab { padding: var(--s-3); border-radius: 50%; min-width: 52px; justify-content: center; }
}

@media print { .callback__fab { display: none; } }

/* ==========================================================================
   Уведомление о cookie
   ========================================================================== */

.cookie {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  left: auto;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  width: min(420px, calc(100vw - 40px));
  padding: var(--s-3) var(--s-4);
  line-height: 1.45;
  background: var(--dark);
  color: var(--on-dark-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  font-size: var(--t-small);
}
.cookie p { flex: 1 1 auto; margin: 0; font-size: 0.8125rem; }
.cookie .btn { min-height: 44px; padding: var(--s-2) var(--s-4); }
.cookie a {
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cookie .btn { flex: none; }
.cookie[hidden] { display: none; }

@media (max-width: 860px) {
  .cookie {
    bottom: 92px;
    right: var(--s-3);
    left: var(--s-3);
    width: auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
  }
  .cookie p { font-size: 0.75rem; }
  .cookie .btn { flex: none; min-height: 44px; font-size: 0.75rem; padding: var(--s-2) var(--s-3); }
}