/* Национальная программа реновации окон — клиентская посадочная страница.
   Знаки программы — синий #003595 и красный #f70000; ведёт их тёплая бумага,
   чтобы страница читалась как бытовая, а не как интерфейс. */

:root {
  --blue: #004acc;
  --blue-700: #003ba3;
  --blue-200: #a8c4f2;
  --blue-050: #e6effc;
  --red: #e11b12;
  --red-soft: #ffeaea;

  /* фирменные цвета партнёров, взяты из их логотипов */
  --veka: #0669b1;
  --sibur: #008c95;

  /* растяжка героя: приглушённый синий → розовый */
  --tint-blue: #89a1cc;
  --tint-rose: #ffbdbd;

  --ink: #201819;
  --muted: #6b5b5c;
  --line: #f0dcdc;
  /* одна высота на все переключатели и поля формы */
  --control-h: 52px;
  /* одна высота всем чипам: выбор системы, тип изделия, конструкция, сторона,
     заполнение, пакеты. До этого их было четыре — 48, 49, 53 и 66 */
  --chip-h: 56px;
  /* минимальная цель для пальца: ниже этого промахиваются */
  --touch-min: 48px;

  /* Слои состояний. Непрозрачность накладки поверх элемента — приём из
     Material, значения выверены на контрастность; цвет берём свой.
     Так состояние читается одинаково у кнопки, карточки и строки пакета. */
  --state-hover: 0.05;
  --state-pressed: 0.09;

  /* Высоты. Раньше двенадцать теней стояли поштучно и на глаз; теперь три
     ступени: лежит на поверхности, приподнят, оторван. */
  --elevation-1: 0 1px 2px rgba(92, 48, 48, 0.06);
  --elevation-2: 0 10px 30px -20px rgba(92, 48, 48, 0.35);
  --elevation-3: 0 20px 44px -28px rgba(92, 48, 48, 0.45);
  --paper: #fffcfc;
  --rose: #fff3f3;
  --rose-deep: #ffbdbd;

  --body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --display: var(--body);

  --wrap: 1160px;
  --radius: 10px;
  --radius-lg: 18px;
  /* Псевдонимы к ступеням высоты: смысл задаётся уровнем, а не числами */
  --shadow: var(--elevation-3);
  --shadow-soft: var(--elevation-2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Резиновую оттяжку на iOS Safari закрашивает фон канвы, а не наш элемент:
     фиксированное и липкое содержимое за пределами экрана там просто не
     рисуется. Цвет канвы берётся с body, html держим тем же на случай, если
     фон body когда-нибудь перекроют. */
  background: var(--paper);
}

body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Зерно бумаги: снимает «экранную» гладкость, не читается как узор.
   Именно absolute, а не fixed: фиксированный слой на весь вьюпорт заставляет
   Safari на iOS 26 рисовать страницу под статус-баром, выше липкой шапки.
   Найдено перебором 05.09.2026: из всей страницы виноват был только он. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--display);
  text-wrap: balance;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

.wrap {
  width: min(var(--wrap), calc(100% - 48px));
  margin: 0 auto;
}

/* ——— Шапка ——— */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 12px max(24px, calc((100vw - var(--wrap)) / 2));
  /* Непрозрачная намеренно. Стекло на iPhone читалось плохо: сквозь шапку
     просвечивал текст, а сверху по нему ещё шли часы и значки статус-бара. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.brand img {
  display: block;
  width: 172px;
  height: auto;
}

.partners {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

/* Второй «этаж» шапки, только для узкого экрана (см. адаптив ниже). */
.brandbar {
  display: none;
  align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Три знака в ряд при полной высоте не помещались на 390 px: «СИБУР»
   обрезался. Здесь они ниже, чем в широкой шапке. */
.brandbar .partner-logo {
  height: 20px;
}

.brandbar .partner-logo--sm {
  height: 17px;
}

.partner-logo {
  display: block;
  height: 24px;
  width: auto;
  opacity: 0.9;
}

/* у «Оконного континента» знак выше базовых линий надписи,
   поэтому однострочные соседи оптически перевешивают при равной высоте */
.partner-logo--sm {
  height: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* В шапке и ссылки, и кнопка «Заказать бесплатный замер»: она открывает
   форму, поэтому это button, а не ссылка, — но выглядеть должна так же. */
.nav a,
.nav button {
  font-size: 14px;
  padding: 0 13px;
}

.nav a,
.nav button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease-out;
}

.btn:active {
  transform: scale(0.975);
}

/* Запертая кнопка должна и выглядеть запертой: пока согласия нет,
   отправлять нечего, и человек должен видеть это до нажатия, а не после.
   Оттенок синий, а не серо-розовый: это та же кнопка в ожидании, а не
   ошибка и не запрет. */
.btn:disabled {
  background: var(--blue-050);
  border-color: transparent;
  color: var(--blue-200);
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--blue-050);
  color: var(--blue-200);
}

.btn:disabled:active {
  transform: none;
}

.nav a,
.nav button {
  color: var(--muted);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
  background: var(--rose);
}

.nav .nav-cta {
  color: var(--paper);
  background: var(--blue);
}

/* На узком экране кнопка ужимает логотип, а слово «заказать» ничего не
   добавляет: и так понятно, что по кнопке заказывают. */
.nav-cta-short {
  display: none;
}

@media (max-width: 700px) {
  .nav-cta-full {
    display: none;
  }

  .nav-cta-short {
    display: inline;
  }
}

.nav .nav-cta:hover {
  background: var(--blue-700);
  color: var(--paper);
}

/* Основной номер. Под подмену коллтрекингом: текст и ссылка меняются
   скриптом, поэтому ширину не фиксируем — подменённый номер может быть
   другой длины. */
.phone-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* На широком экране номер написан словами, трубка не нужна. */
.phone-icon {
  display: none;
}

/* В шапке номер читают и набирают — это второй по важности элемент после
   кнопки. Поэтому крупнее соседей и синим: серым он терялся между логотипами
   партнёров и кнопкой. В подвале размер прежний, там своя иерархия. */
.nav .phone-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
}

.nav .phone-main:hover {
  color: var(--blue-700);
}

.phone-main:hover {
  color: var(--blue);
}

.footer-phone .phone-main {
  color: var(--paper);
}

.footer-phone .phone-main:hover {
  color: var(--rose-deep);
}

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

.btn-primary {
  background: var(--blue);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--blue-700);
}



.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper);
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--rose);
}

.btn-lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 600;
}

/* ——— Герой ——— */

.hero {
  position: relative;
  padding: 88px 0 72px;
  overflow: hidden;
  background: linear-gradient(160deg, #dde4f3 0%, #f6eef2 44%, var(--paper) 76%);
  border-bottom: 1px solid var(--line);
}

/* Тёплое пятно света вместо узоров и сеток */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(52% 58% at 84% 4%, rgba(255, 189, 189, 0.62), transparent 68%),
    radial-gradient(46% 54% at 4% 2%, rgba(137, 161, 204, 0.5), transparent 70%);
}



.hero-inner {
  position: relative;
  z-index: 2;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge-mark {
  width: 14px;
  height: 14px;
  background: var(--red);
  box-shadow: 5px 5px 0 0 var(--blue);
  margin-right: 5px;
}

h1 {
  margin: 26px 0 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 56px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.hero-facts dt {
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--blue);
}

.hero-facts dd {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--muted);
  max-width: 30ch;
}

/* ——— Секции ——— */

.section {
  padding: 84px 0;
}

.section-soft {
  position: relative;
  /* clip, а не hidden: hidden делает секцию контейнером прокрутки, и липкая
     колонка с ценой перестаёт липнуть — она «липнет» к секции, то есть никак.
     Клипать тут по сути нечего (у пятен ::before inset: 0), но намерение
     сохраняем. */
  overflow: clip;
  background: linear-gradient(160deg, #dde4f3 0%, #f6eef2 44%, var(--paper) 76%);
  border-block: 1px solid var(--line);
}

/* те же пятна, что в герое, но сдержаннее — герой остаётся главным */
.section-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 52% at 88% 2%, rgba(255, 189, 189, 0.42), transparent 68%),
    radial-gradient(40% 46% at 2% 0%, rgba(137, 161, 204, 0.34), transparent 70%);
}

.section-soft > .wrap {
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 44px;
}

.section-head h2 {
  font-size: clamp(27px, 3.2vw, 38px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-lead {
  margin-top: 16px;
  text-wrap: pretty;
  color: var(--muted);
  font-size: 17px;
}

/* ——— Два продукта ——— */

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.product {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.product-stage {
  display: flex;
  justify-content: center;
  padding: 40px 24px 32px;
}

.stage-frame {
  position: relative;
  height: clamp(340px, 42vw, 600px);
  aspect-ratio: 875 / 1580;
  container-type: inline-size;
}

.stage-frame img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 26px 34px rgba(92, 48, 48, 0.2));
}

/* Стекло в PNG прозрачное — надпись видно сквозь него.
   ponytail: рамка вписана в 20/17% отступы, там стекло у всех четырёх ракурсов. */
.glass {
  position: absolute;
  z-index: 1;
  inset: 18% 21%; /* уточняется под ракурс ниже */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.product-name {
  font-size: 14cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.product-tagline {
  margin-top: 5cqw;
  font-size: 5.4cqw;
  line-height: 1.3;
  font-weight: 500;
}

.product-sys {
  margin-top: 6cqw;
  padding-top: 4.5cqw;
  font-size: 4cqw;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Стекло смещено под ракурс: у «L» оно правее, у «R» — левее. */
.product--euro .glass {
  inset: 18% 19% 18% 23%;
}

.product--bravo .glass {
  inset: 18% 23% 18% 19%;
}

/* «Евро» — светлое стекло */
.product--euro .product-stage {
  background:
    radial-gradient(70% 55% at 60% 12%, rgba(255, 240, 240, 0.8), transparent 70%),
    linear-gradient(168deg, #ffd3d3 8%, var(--rose-deep) 100%);
}

.product--euro .product-name {
  color: var(--ink);
}

.product--euro .product-tagline {
  color: var(--muted);
}

.product--euro .product-sys {
  color: var(--muted);
  border-top: 1px solid rgba(31, 26, 21, 0.18);
}

/* «Браво» — глубокое стекло */
.product--bravo .product-stage {
  background:
    radial-gradient(65% 50% at 62% 10%, rgba(140, 180, 255, 0.45), transparent 70%),
    linear-gradient(168deg, var(--blue) 8%, #00297a 100%);
}

.product--bravo .product-name {
  color: var(--paper);
}

.product--bravo .product-tagline {
  color: var(--blue-200);
}

.product--bravo .product-sys {
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  padding: 28px 28px 30px;
  border-top: 1px solid var(--line);
}

.specs {
  margin: 0;
  display: grid;
  gap: 0;
}

.specs > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.specs > div:last-child {
  border-bottom: 0;
}

.specs dt {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.specs dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.product-body .btn {
  align-self: flex-start;
}

.product-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
}

.product-body > .btn {
  margin-top: auto;
}

/* align-self у кнопок формы перебивает выравнивание блока — задаём явно,
   иначе кнопка «Браво» цепляется за верх знака VEKA */
.product-actions .btn {
  align-self: flex-end;
}

.veka-warranty {
  height: 72px;
  width: auto;
  flex: none;
}

/* ——— Что входит ——— */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  border-color: #edc4c4;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 15px;
  color: var(--muted);
}

/* Карточка рассрочки была во всю ширину двух колонок и на фоне остальных
   выглядела вдвое тяжелее, хотя рассказывает не больше их. Ставим в общий
   ряд; логотипы платёжных партнёров при этом переносятся в две строки. */
.card--wide {
  grid-column: auto;
}

/* Четыре логотипа в узкой карточке в строку не помещаются: их суммарная
   ширина 321 при 323 доступных, на зазоры не остаётся ничего, и последний
   уходил на вторую строку сиротой. Уменьшать марки партнёров нельзя — они и
   так мелкие. Сетка 2×2 читается как решение, а не как перенос. */
.pay-logos {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  align-items: center;
  gap: 16px 24px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pay-logo {
  width: auto;
}

.pay-logo--halva {
  height: 24px;
}

.pay-logo--split {
  height: 24px;
}

.pay-logo--vanta {
  height: 13px;
}

.pay-logo--poscredit {
  height: 17px;
}

/* ——— Этапы ——— */

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line);
}

.step {
  position: relative;
  counter-increment: step;
  padding: 34px 22px 8px 0;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: -12px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
}

.step:last-child::before {
  background: var(--red);
}

.step-time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

.step h3 {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

/* ——— Форма ——— */

/* Форма — не карточка, а сетка из карточек-шагов: подложка теперь у каждого
   шага, иначе получалась бы карточка внутри карточки. Слева шаги, справа
   стоимость; на узком экране правая колонка становится подвалом. */
/* `hidden` обязан прятать. У .upgrade и ещё нескольких блоков есть
   собственный display, а он бьёт браузерное правило для [hidden] по
   специфичности: карточка оставалась в потоке во всю величину и просто
   уезжала за край прокручиваемой ленты. На глухом окне до «Взломостойкости»
   можно было домотать и выбрать её — цены у неё нет, итог не менялся. */
[hidden] {
  display: none !important;
}

.order-form {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.calc-step {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}

/* Шапка шага — она же переключатель. Пальцу нужна вся строка целиком,
   поэтому цель по высоте не меньше --touch-min, а не размер стрелки. */
.calc-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch-min);
  padding: 13px 24px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.calc-step-head::-webkit-details-marker {
  display: none;
}

.calc-step-head--static {
  cursor: default;
}

.calc-step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Заголовок и выбранное значение читаются одной строкой: «Конструкция:
   створка + глухая». Раньше значение стояло у правого края и выглядело
   служебной пометкой, а это ответ человека. */
.calc-step-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.calc-step-title {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  /* заголовок не переносим: место уступает значение справа, у него многоточие */
  white-space: nowrap;
}

/* Выбранное значение видно и в свёрнутом, и в раскрытом виде: свёрнутый шаг
   иначе нечитаем, а раскрытый теряет итог, стоит уехать вниз по длинной ленте. */
.calc-step-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  /* цветом как заголовок: это ответ человека, а не служебная подпись */
  color: var(--ink);
}

.calc-step-title:has(+ .calc-step-value:not(:empty))::after {
  content: ':';
}

.calc-step-caret {
  flex: 0 0 auto;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.calc-step[open] > .calc-step-head .calc-step-caret {
  transform: translateY(2px) rotate(-135deg);
}

/* Заголовок шага уже назвал группу — повторять его легендой незачем. Но из
   разметки не убираем: легенда связывает fieldset для скринридера. */
.legend-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-step-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 2px 24px 24px;
}

.calc-step-head:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  /* fieldset по умолчанию несжимаем: браузер ставит ему min-width: min-content,
     и содержимое распирает колонку вместо того, чтобы прокручиваться */
  min-width: 0;
}

.field legend,
.field-label {
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}

/* Группы чипов рядом на одной горизонтали, разделённые вертикальной линией:
   «Дверь» и «Заполнение», «Конфигурация блока» и «Сторона окна». На узком
   экране встают друг под друга — там разделитель не нужен и не рисуется,
   иначе он повисал бы сбоку у перенесённой группы. */
.chip-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.chip-groups > .field {
  min-width: 0;
  /* группа рядом с более высокой соседкой растягивается по ней — но её
     содержимое должно остаться прижатым к верху и своей высоты, иначе
     чипы вытягиваются вслед за колонкой */
  justify-content: flex-start;
  align-content: flex-start;
}

.chip-groups > .field > * {
  flex: 0 0 auto;
}

@media (min-width: 861px) {
  .chip-groups {
    flex-direction: row;
    gap: 16px;
  }

  .chip-groups > .field {
    flex: 1 1 0;
  }

  /* Сторона и заполнение — это два узких чипа, им ширина по содержимому.
     С равной долей они забирали половину строки, а лента конструкций
     сжималась так, что схемы обрезались в щепки. */
  .chip-groups > .side-field {
    flex: 0 0 auto;
  }

  .chip-groups > .field + .field {
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }
}

/* Ряд чипов. По умолчанию каждый живёт по своему содержимому — так они
   помещаются, если места мало, и ряд превращается в прокручиваемую ленту.
   Если же ряд влезает целиком, скрипт ставит is-even, и ширина делится
   поровну. Одним CSS так не выразить: надо знать, влезло или нет. */
.choices,
.side-switch {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.choices::-webkit-scrollbar,
.side-switch::-webkit-scrollbar {
  display: none;
}

.choices > *,
.side-switch > * {
  flex: 0 0 auto;
}

.choices.is-even > *,
.side-switch.is-even > * {
  flex: 1 1 0;
  min-width: 0;
}



.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Подпись блока читается в порядке того, что человек видит: окно слева —
   «Две створки + Дверь», окно справа — «Дверь + Две створки». Тем же
   приёмом, что уже зеркалит схему: выбор стороны — CSS-состояние формы. */
.side-order--right {
  display: none;
}

.calc:has(#win-right:checked) .side-order--left {
  display: none;
}

.calc:has(#win-right:checked) .side-order--right {
  display: inline;
}

/* Схемы блоков нарисованы окном слева. Когда выбрано «Окно справа», зеркалим:
   иначе рисунок спорит с подписью — «Дверь + Одна створка» при окне,
   нарисованном слева. Карточку «Другое» не трогаем: там знак вопроса. */
.calc:has(#win-right:checked) .scheme[class*="scheme--blk-"] {
  transform: scaleX(-1);
}

/* Шаг размера кнопками: родные стрелки у number мелкие, показываются не
   везде, а на телефоне их нет совсем. Ставим свои — половина высоты поля
   каждая, целыми пикселями. */
.size-field {
  position: relative;
  display: block;
}

.size-field input {
  padding-right: 34px;
}

.size-field input::-webkit-outer-spin-button,
.size-field input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.size-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.size-step {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  width: 30px;
  border-left: 1px solid var(--line);
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.size-step-btn {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.size-step-btn + .size-step-btn {
  border-top: 1px solid var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .size-step-btn:hover {
    background: var(--blue-050);
    color: var(--blue);
  }
}

.size-step-btn:active {
  background: var(--blue-050);
  color: var(--blue);
}

.size-step-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* ——— Чипы ———
   Четыре вида выбора — система, тип изделия, конструкция, сторона и
   заполнение, пакеты — раньше были четырьмя разными компонентами с четырьмя
   высотами. Вид у них теперь общий, различается только раскладка ряда. */
.choice-body,
.config-body,
.options-row .upgrade-body,
.side {
  display: flex;
  align-items: center;
  /* высоту не тянем по родителю: в группе рядом с более высокой соседкой
     чипы вырастали до 61 px. Ровняет их сам ряд — align-items: stretch */
  min-height: var(--chip-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.choice-body {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  padding: 6px 13px;
  /* во всю высоту метки: у «Евро» подпись длиннее и переносится на вторую
     строку, и без этого его рамка становилась выше соседней */
  height: 100%;
}

.choice-body b {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.choice-body small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

/* ——— Калькулятор окна ——— */

.configs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.config {
  position: relative;
  display: block;
  cursor: pointer;
}

.config input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.config-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Рама — рамка бокса, а не растягиваемая графика: при любой пропорции
   её толщина одинакова по всем сторонам. Импосты — border секций.
   Тянутся только знаки открывания, их штрих защищён non-scaling-stroke. */
/* Схема — один SVG с целыми координатами. Раньше это была конструкция из
   вложенных элементов с рамками и aspect-ratio: ширина выходила дробной
   (38.857 px при высоте 34), доли частей — тем более, и браузер округлял их
   по-разному при каждой перерисовке. Достаточно было навести курсор, чтобы
   геометрия поехала. SVG масштабируется целиком и не пересчитывается. */
.scheme {
  display: block;
  /* 28 — единственная высота в рабочем диапазоне, при которой ширина всех
     схем выходит целой: viewBox у них 56 в высоту, а 28/56 = ровно половина.
     При 34 ширина была 38.857, карточка получала дробный размер, соседи —
     дробные позиции, и на экране с двойной плотностью перерисовка при
     наведении читалась как дрожание. */
  /* размеры заданы атрибутами в самом SVG — CSS их не пересчитывает */
  flex: none;
  color: var(--ink);
  overflow: visible;
}




.scheme--other {
  align-items: center;
  justify-content: center;
}



/* базовая пропорция схемы — самый ходовой размер конфигурации */
.scheme--window-tiltturn-blind {
  aspect-ratio: 1300 / 1500;
}

.scheme--window-blind {
  aspect-ratio: 850 / 1400;
}

.scheme--window-tiltturn {
  aspect-ratio: 850 / 1400;
}

.scheme--window-turn-tiltturn {
  aspect-ratio: 1450 / 1400;
}

.scheme--window-blind-tiltturn-blind {
  aspect-ratio: 2100 / 1450;
}

/* Красная, а не синяя: синей была и неактивная кнопка под ней, и две
   плашки сливались в одну. Отступ снизу — по той же причине. */
.calc-discount {
  margin: 10px 0 16px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--red-soft);
  color: var(--red);
  font-size: 14px;
  line-height: 1.4;
}

.calc-discount b {
  font-weight: 700;
  white-space: nowrap;
}

/* цены нет — обещать скидку не на что */
.receipt:has(.calc-total-after:not([hidden])) .calc-discount {
  display: none;
}

/* Подсказка к заблокированной кнопке: видна, только пока согласие не
   отмечено. На предстартовом созвоне заявку не смогли отправить именно
   потому, что нажатие по заблокированной кнопке ничего не объясняет. */
.consent-hint {
  display: none;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

form:has([name="consent_pd"]:not(:checked)) .consent-hint {
  display: block;
}

.is-sent .consent-hint {
  display: none !important;
}

/* ——— Типы изделия ——— */

/* Группы третьего шага показываются по выбранному типу изделия. Правило
   съел я сам, вычищая мёртвые .sizes: оно стояло с ними в одном списке
   селекторов, и калькулятор стал показывать конфигурации окна, блока и
   двери разом. */
.for-window,
.for-balcony,
.for-door {
  display: none;
}

.calc:has(#kind-window:checked) .for-window,
.calc:has(#kind-balcony:checked) .for-balcony,
.calc:has(#kind-door:checked) .for-door {
  display: flex;
}

.choices--kinds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ——— Балконный блок: окно стоит на парапете, дверь во всю высоту ——— */




/* стык рам — одна линия, а не две */

.scheme--blk-tiltturn-blind-door-turn {
  aspect-ratio: 1850 / 2150;
}



.scheme--blk-tiltturn-door-turn {
  aspect-ratio: 1550 / 2150;
}



.scheme--blk-blind-door-tiltturn {
  aspect-ratio: 1850 / 2150;
}



.scheme--blk-blind-door-turn {
  aspect-ratio: 1500 / 2250;
}



/* Сторона окна — компактный сегмент рядом с конфигурацией:
   выбор влияет только на зеркало схемы, не на состав и цену. */


.side {
  position: relative;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

/* подпись заполнения читается так же, как названия конструкций слева:
   это соседние группы одной строки, разнобой в них сразу заметен */
.side span {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  font-weight: 600;
  color: var(--ink);
}

.side input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.side-icon {
  width: 18px;
  height: 16px;
  flex: none;
}

.side:hover {
  color: var(--ink);
}

.side:has(input:checked) {
  background: var(--blue-050);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.side:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}


/* ——— Балконная дверь ——— */

.scheme--door-one {
  aspect-ratio: 700 / 2150;
}

.scheme--door-two {
  aspect-ratio: 1600 / 2200;
}




.field--size .for-balcony {
  display: none;
}

.calc:has(#kind-balcony:checked) .field--size .for-balcony {
  display: block;
}

/* Ряд проёма — тоже flex, а не block: правило выше красит все .for-balcony
   внутри размеров одним display, а этому ряду нужна раскладка в строку. */
.calc:has(#kind-balcony:checked) .field--size .size-inputs--total {
  display: flex;
}

/* У блока четыре числа: сначала проём, потом оконная часть. Отбивка между
   парами, чтобы четыре одинаковых поля не сливались в одну кучу. */
.size-inputs--total {
  margin-bottom: 14px;
}

.configs--door {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* матовое стекло в нижней части полотна: не глухая вставка, поэтому
   заливка светлее и без сплошной границы сверху */

.size-inputs {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.size-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.size-input span {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.size-input input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 12px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  -moz-appearance: textfield;
}

.size-input input::-webkit-outer-spin-button,
.size-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.size-input input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: transparent;
}

.size-x {
  padding-bottom: 12px;
  color: var(--muted);
}


/* предупреждения ядра: изделие сделаем, но вне гарантийных пределов */
.calc-warning {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--rose);
  border-radius: 10px;
}

/* «Лайт» добавляется поверх выбранного пакета, поэтому отделён от списка */
.upgrade--lite {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.config-body b {
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.005em;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.choice-body small {
  font-size: 11.5px;
  line-height: 1.3;
}

.configs .config-body small {
  display: none;
}

.config-body small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.config:hover .config-body {
  border-color: var(--blue-200);
}

.config input:checked ~ .config-body {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  background: var(--blue-050);
}

.config input:focus-visible ~ .config-body {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}




.chip-body {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}




.calc-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.calc-note {
  margin-top: -6px;
}

/* Согласие — обязательное поле, а не примечание: чекбокс и текст в одну
   строку, ссылки открываются отдельной вкладкой, чтобы не терять заполненное. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}

.consent input {
  flex: none;
  /* и на контейнере, и на самом поле: у чекбокса своя базовая линия, и при
     переносе текста на вторую строку он уезжал вниз вслед за ней */
  align-self: flex-start;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--blue);
}

.consent a {
  color: var(--blue);
}

.form-error {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #cd2324;
}



/* Короткая форма замера: то же окно, что у подсказок, но уже — читать тут
   нечего, надо ввести телефон и уйти. */
.measure {
  width: min(420px, calc(100vw - 32px));
}

.measure-form {
  padding: 18px 20px 22px;
}

.measure-lead {
  margin: 0 0 16px;
  color: var(--muted);
}

.measure-form .btn {
  width: 100%;
  margin-top: 16px;
}

/* Невидимая капча показывает маленький щит в углу — место под него нужно
   только чтобы виджету было куда отрисоваться. */
.captcha-slot {
  margin-top: 8px;
}

.choice:hover .choice-body {
  border-color: var(--blue-200);
}

.choice input:checked ~ .choice-body {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  background: var(--blue-050);
}

.choice input:focus-visible ~ .choice-body {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Правило про текстовые поля формы. :not() обязателен: без него оно ловило и
   чекбокс согласия — min-height: 52px перебивал его размер, и вместо галки
   получался квадрат в половину строки. */
.order-form select,
.order-form input:not([type="checkbox"]):not([type="radio"]),
.measure-form input:not([type="checkbox"]):not([type="radio"]),
.quiz-contact input {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* нативный select не тянется по min-height — рисуем свой контрол */
.order-form select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 62px;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b5b5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
}

.order-form select:focus,
.order-form input:focus,
.quiz-contact input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.order-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* колонка — элемент грида, а у него min-width: auto: без этой строки она
     не сжимается уже своего содержимого. На телефоне форму распирало до
     559 px при экране 375, и правый край — «Браво», высота, кнопка —
     оказывался за обрезом, причём без прокрутки. Та же ловушка, что у
     fieldset выше, только у грида. */
  min-width: 0;
}

/* Правая колонка короче левой, поэтому внизу справа оставалась пустота, а
   цена уезжала вместе со скроллом. Закрепляем: результат выбора остаётся
   перед глазами, пока человек перебирает конфигурации. */
@media (min-width: 861px) {
  .order-col--result {
    position: sticky;
    top: 96px;
  }
}

/* опции — надстройка над «Браво», до его выбора их нет */
.field--options {
  display: none;
}

.calc:has(#product-bravo:checked) .field--options {
  display: flex;
}

/* Улучшения читаются как надбавка к базе: знак «плюс», своя подложка,
   место под цену — когда придёт прайс, «цена по расчёту» станет суммой. */
.field--options {
  gap: 10px;
}

.upgrades {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upgrade {
  position: relative;
  display: block;
  cursor: pointer;
}

.upgrade input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upgrade-body {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-sign {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue);
}


.upgrade-text b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.upgrade-text small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.upgrade:hover .upgrade-body {
  border-color: var(--blue-200);
}

.upgrade input:checked ~ .upgrade-body {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  background: var(--blue-050);
}

/* «Без улучшений» ничего не добавляет в заказ — отмечаем нейтрально,
   голубым подсвечиваются только реальные надбавки */
.upgrade input#opt-base:checked ~ .upgrade-body {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--paper);
}

.upgrade input:focus-visible ~ .upgrade-body {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.order-form .btn {
  justify-self: start;
}

/* Опции — надстройка над «Браво»; при «Евро» список неактивен.
   ponytail: выбранная опция при переключении на «Евро» остаётся отмеченной — сбрасывать на бэкенде. */
/* точка-переключатель */
/* ——— Итог калькулятора ——— */

/* Состав заказа читается чеком: строки того, что выбрано, и итог под ними.
   Подложки и рамки у итога больше нет — она делала из суммы поле ввода,
   хотя это результат. Отделяет итог линия, как в бумажном чеке. */
.receipt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.receipt-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.receipt-lines:empty {
  display: none;
}

.receipt-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.receipt-line span:first-child {
  color: var(--muted);
}

.receipt-line b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.calc-total-label {
  font-size: 15px;
  font-weight: 600;
}

.calc-total-after {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  text-align: right;
}

.calc-total-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ——— Липкая полоса с выбором и ценой ——— */

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  /* полоса висит над содержимым, но не отрывается от него */
  box-shadow: 0 -10px 30px -22px rgba(92, 48, 48, 0.5);
}

/* Оговорка к цене видна и в полосе: цена в ней живёт сама по себе, без
   формы вокруг, и «примерная» должно стоять рядом с числом. Мелко и в один
   абзац — это сноска, а не текст для чтения. */
.sticky-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}

.sticky-bar[hidden] {
  display: none;
}

.sticky-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.sticky-summary {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* цена в полосе — тот же размер, что в форме: одно число, одно место */
.sticky-price[hidden] {
  display: none;
}

@media (max-width: 380px) {
  .configs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sticky-inner {
    justify-content: space-between;
  }

  .sticky-actions {
    flex: 1;
    gap: 12px;
  }

  .sticky-actions .btn {
    flex: 1;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.note-mark {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
  color: var(--muted);
}

.calc-note .note-mark {
  margin-left: 0;
  margin-right: 2px;
}

.sticky-price {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .configs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sticky-inner {
    gap: 12px;
  }

  .sticky-summary {
    display: none;
  }

  .sticky-actions {
    flex: 1;
    justify-content: space-between;
  }
}

/* ——— Участники ——— */

.participants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.participant {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 2px solid #d8d5d3;
}

.participant-logo {
  display: flex;
  align-items: center;
  height: 40px;
}

.participant-logo img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.participant-logo--square img {
  max-height: 46px;
  max-width: 46px;
}

.participant p {
  font-size: 15px;
  color: var(--muted);
}

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

.footer {
  padding: 32px 0;
  background: #201819;
  color: rgba(255, 252, 252, 0.78);
  font-size: 14px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.footer-note {
  color: rgba(255, 252, 252, 0.5);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.footer-legal a {
  color: rgba(255, 252, 252, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal a:hover {
  color: var(--paper);
}

/* Юридическая страница: длинный текст из вики. Ширина уже основной, чтобы
   строка не растягивалась на весь экран и читалась. */
.legal {
  padding: 32px 0 64px;
}

.legal .wrap {
  width: min(760px, calc(100% - 48px));
}

.legal h1 {
  margin: 0 0 24px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.2;
}

.legal-body h2,
.legal-body h3 {
  margin: 28px 0 8px;
  font-size: 19px;
  line-height: 1.3;
}

.legal-body p,
.legal-body li {
  margin: 0 0 10px;
  color: var(--ink);
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.legal-body a {
  color: var(--blue);
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
}

.legal-body td,
.legal-body th {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-away {
  color: var(--muted);
}

/* ——— Модалка диагностики (CSS :target) ——— */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal:target {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(32, 24, 25, 0.5);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 34px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  /* модальное окно — самый верхний слой, ступень выше третьей */
  box-shadow: 0 30px 70px -20px rgba(32, 24, 25, 0.5);
}

.modal-card h2 {
  font-size: 26px;
  line-height: 1.15;
  padding-right: 40px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
}

.quiz-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 22px;
}

.quiz-card fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz-card legend {
  padding: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-card fieldset label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  cursor: pointer;
}

.quiz-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--blue);
}

.quiz-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-card .btn {
  align-self: flex-start;
}

/* ——— Появление при загрузке ——— */

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  .hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-inner > *:nth-child(2) { animation-delay: 0.12s; }
  .hero-inner > *:nth-child(3) { animation-delay: 0.2s; }
  .hero-inner > *:nth-child(4) { animation-delay: 0.28s; }
  .hero-inner > *:nth-child(5) { animation-delay: 0.36s; }

}

@media (prefers-reduced-transparency: reduce) {
  .modal-overlay {
    backdrop-filter: none;
    background: rgba(32, 24, 25, 0.72);
  }

  body::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #554647;
    --line: #d9b6b6;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

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

/* Ниже этой ширины знаки партнёров перестают помещаться рядом с логотипом,
   трубкой и кнопкой: их сумма 836 px, а места остаётся 877. Порог посчитан
   по ширинам самих элементов, а не подобран — при 899 запас уже нулевой. */
@media (max-width: 940px) {
  .partners {
    display: none;
  }

  /* и переезжают во второй «этаж» шапки — не липкий, уезжает при прокрутке */
  .brandbar {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 4vw, 18px);
  }
}

@media (max-width: 1080px) {
  /* На узком экране в шапке помещаются только логотип, трубка и кнопка:
     номер словами вытеснял логотип. Сам номер остаётся в разметке —
     спрятан визуально, иначе коллтрекингу нечего было бы подменять. */
  .nav .phone-icon {
    display: block;
  }

  .nav .phone-number {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav .phone-main {
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    border-radius: 50%;
    color: var(--blue);
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* В столбик шкала идёт вертикально: линия слева, номера на ней */
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    border-top: 0;
  }

  .step {
    padding: 0 12px 36px 30px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .step:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
  }

  .step::before {
    top: 0;
    left: -12px;
  }

  .participants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body {
    font-size: 16px;
  }

  .topbar {
    min-height: 66px;
    padding: 10px 20px;
  }

  .brand img {
    width: 148px;
  }

  .hero {
    padding: 56px 0 48px;
  }



  .section {
    padding: 56px 0;
  }

  .hero-facts {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products {
    grid-template-columns: 1fr;
  }

  .product-stage {
    padding: 26px 16px 22px;
  }

  .stage-frame {
    height: auto;
    width: min(240px, 66%);
  }

  /* окно уменьшилось — надпись на стекле подрастает относительно него */
  .product-name {
    font-size: 15cqw;
  }

  .product-tagline {
    font-size: 6cqw;
  }

  .product-sys {
    font-size: 4.4cqw;
  }

  .product-body {
    padding: 24px 22px 26px;
  }

  .card--wide {
    grid-column: auto;
  }

  .order-form {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .configs {
    /* карточка сжалась до 127 px — три помещаются и на 420 px, это экономит
       целый ряд там, где формы и так на несколько экранов */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .wrap {
    width: calc(100% - 36px);
  }

  .cards,
  .steps {
    grid-template-columns: 1fr;
  }

  /* «Балконный блок» и «Балконная дверь» не влезают в треть узкого экрана */
  .choices--kinds {
    grid-template-columns: 1fr;
  }

  .participants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .participant-logo {
    height: 32px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .specs > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ─── Отклик и статус расчёта ───────────────────────────────────────────
   Цена — единственный результат этой формы, поэтому она должна вести себя
   как живая величина: реагировать на нажатие сразу, показывать, что идёт
   пересчёт, и отмечать момент, когда число сменилось. */

/* Нажатие видно мгновенно, а не после отпускания */
.choice-body,
.config-body,
.upgrade-body,
.side {
  transition: border-color 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease-out;
}

.choice:active .choice-body,
.config:active .config-body,
.upgrade:active .upgrade-body,
.side:active {
  transform: scale(0.985);
}

.btn:active {
  transform: scale(0.985);
}

/* Пока ядро считает, цена приглушается: видно, что число сейчас неверное,
   но старое остаётся на месте — прыжка в пустоту нет */
.calc-total-value,
.sticky-price {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.calc.is-calculating .calc-total-value,
body.is-calc-pending .sticky-bar .sticky-price {
  opacity: 0.35;
}

/* Расчёт затянулся (класс вешается через 250 мс): приглушённого числа мало —
   на медленной сети человек читает его как новую цену и думает, что
   переключение ничего не дало. Убираем число совсем и пишем, что считаем. */
.calc-total-pending,
.sticky-pending {
  display: none;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.calc.is-slow .calc-total-value,
.calc.is-slow .calc-total-after,
body.is-calc-slow .sticky-bar .sticky-price {
  display: none;
}

/* Суммы в чеке над кнопкой — то же самое число, просто мельче: пока идёт
   расчёт, они тоже врут. Прячем цифры, строки оставляем на месте. */
.calc.is-slow .receipt-line b {
  visibility: hidden;
}

/* Высоту держим ту же, что у числа (30px), иначе блок скачет на каждый расчёт */
.calc.is-slow .calc-total-pending {
  display: block;
  font-size: 30px;
  letter-spacing: -0.02em;
}

body.is-calc-slow .sticky-bar .sticky-pending {
  display: inline;
  font-size: 19px;
}

.calc.is-calculating .calc-total {
  position: relative;
  overflow: hidden;
}

/* Тонкая полоска бежит по блоку цены — статус, а не спиннер поверх контента */
.calc.is-calculating .calc-total::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 38%;
  background: var(--blue);
  border-radius: 2px;
  animation: price-progress 0.9s ease-in-out infinite;
}

@keyframes price-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* Новое число подъезжает снизу — момент смены заметен без вспышки.
   Прозрачность в анимации НЕ трогаем: если кадры не проиграются (вкладка в
   фоне, экономия батареи), элемент застрянет в первом кадре — и цена просто
   исчезнет. Двигаем только transform, он безопаснее. */
@keyframes price-in {
  from { transform: translateY(0.2em); }
  to   { transform: translateY(0); }
}

.calc-total-value.is-fresh,
.sticky-price.is-fresh {
  animation: price-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .choice:active .choice-body,
  .config:active .config-body,
  .upgrade:active .upgrade-body,
  .side:active,
  .btn:active {
    transform: none;
  }

  .calc.is-calculating .calc-total::after {
    animation: none;
    width: 100%;
    opacity: 0.35;
  }

  .calc-total-value.is-fresh,
  .sticky-price.is-fresh {
    animation: none;
  }
}

/* ─── Система состояний ─────────────────────────────────────────────────
   Один слой на все интерактивные поверхности: наведение и нажатие видны
   одинаково у кнопки выбора, карточки конфигурации и строки пакета.
   Слой лежит поверх фона, но под текстом, и наследует скругление. */
.choice-body,
.config-body,
.upgrade-body,
.chip-body {
  position: relative;
  isolation: isolate;
}

.choice-body::before,
.config-body::before,
.upgrade-body::before,
.chip-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--blue);
  opacity: 0;
  transition: opacity 0.14s ease;
  /* слой живёт отдельно: без этого смена его прозрачности заставляет
     перерисовать и рамку карточки, а на дробной позиции сглаживание
     пересчитывается иначе — край едва заметно дёргается */
  will-change: opacity;
}

/* Наведение — только там, где есть настоящий курсор: на тачскрине hover
   залипает после касания и элемент остаётся подсвеченным. */
@media (hover: hover) and (pointer: fine) {
  .choice:hover .choice-body::before,
  .config:hover .config-body::before,
  .upgrade:hover .upgrade-body::before {
    opacity: var(--state-hover);
  }
}

.choice:active .choice-body::before,
.config:active .config-body::before,
.upgrade:active .upgrade-body::before {
  opacity: var(--state-pressed);
}

/* Недоступный вариант: приглушён и не реагирует. Пригодится, когда ядро
   скажет, что конфигурация недоступна системе (supported: false). */
.choice input:disabled ~ .choice-body,
.config input:disabled ~ .config-body,
.upgrade input:disabled ~ .upgrade-body {
  opacity: 0.38;
  cursor: not-allowed;
}

.choice input:disabled ~ .choice-body::before,
.config input:disabled ~ .config-body::before,
.upgrade input:disabled ~ .upgrade-body::before {
  opacity: 0;
}

/* Цель касания: правило, а не совпадение. У чипов своя высота, и она больше
   минимальной цели — раньше это правило стояло позже общего и сбивало все
   чипы обратно к 48 px. */
.choice-body,
.config-body,
.upgrade-body,
.side {
  min-height: var(--chip-h);
}

.btn {
  min-height: var(--touch-min);
}

/* ─── Лента конфигураций: выбранная развёрнута, остальные сжаты ──────────
   Шесть равных карточек занимали три ряда. Здесь развёрнута только та, что
   выбрана: она несёт схему и название. Остальные ужаты до значка с короткой
   подписью — их видно все сразу, а не по две, как в обычной карусели.
   Один ряд вместо трёх, и на десктопе тоже: листать нечего, всё помещается. */
.configs {
  display: flex;
  grid-template-columns: none;
  /* без явной ширины flex-контейнер растягивается по содержимому и вылезает
     за колонку — overflow тогда нечего обрезать */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* палец ведёт ленту только по горизонтали: иначе диагональный жест
     тянет и страницу, и ленту одновременно */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.configs::-webkit-scrollbar {
  display: none;
}

.configs .config {
  /* лента прокручивается вбок, а не ужимается: сдвинуть блок пальцем —
     привычное действие, и схемы не превращаются в нечитаемые полоски.
     Невыбранная карточка при этом остаётся значком: подпись в ряду всё
     равно не прочитать, а рисунок узнаётся сразу. */
  flex: 0 0 auto;
  scroll-snap-align: center;
  /* Карточка стоит на дробной позиции по вертикали (её задают высоты текста
     выше по форме), и при двойной плотности рамка ложится между физическими
     пикселями. Своя плоскость растеризации фиксирует сглаживание: перекраска
     при наведении больше не пересчитывает края. */
  transform: translateZ(0);
}

.configs .config:has(input:checked) {
  max-width: 100%;
}

/* Сжатая карточка: значок сверху, подпись под ним мелко и в две строки */
.configs .config-body {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  overflow: hidden;
}

/* В сжатой карточке остаётся только схема: подпись там всё равно не
   прочитать, а рисунок узнаётся сразу. Название видно у выбранной. */
.configs .config-body b,
.configs .config-body small {
  display: none;
}

.configs .config .scheme {
  flex: none;
}

/* Выбранная — разворачивается в строку: схема крупнее, название полное */
.configs .config:has(input:checked) .config-body {
  justify-content: flex-start;
  padding: 8px 12px;
  text-align: left;
}

.configs .config:has(input:checked) .config-body b {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
}





/* ─── Пакеты лентой, «Лайт» отдельным чипом ─────────────────────────────
   Пакеты стоят под выбором системы: они к ней и относятся, показываются
   только для «Браво». Семь строк во всю ширину занимали полколонки —
   свернули в ленту чипов. Описание убрано: в ряду его не прочитать, а
   название и цена решают выбор.

   «Взломостойкость Лайт» вынесена вправо отдельным чипом: она единственная
   складывается с остальными, поэтому стоит не в ряду, а рядом с ним. */
.options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.options-row .upgrades {
  display: flex;
  /* базовое правило раскладывает пакеты столбиком — в ряду нужен поворот */
  flex-direction: row;
  flex: 1 1 auto;
  flex-basis: 100%;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.options-row .upgrades::-webkit-scrollbar {
  display: none;
}

/* ─── Лента пакетов: прокрутка вбок ──────────────────────────────────────
   Раньше лента ужималась, лишь бы поместиться целиком в одну ширину. На
   телефоне сдвинуть блок пальцем — привычное действие, поэтому чипы стоят
   каждый в свою ширину, а лента прокручивается. Невыбранный чип при этом
   остаётся значком: восемь названий подряд никто читать не станет. */
.options-row .upgrade {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* своя плоскость растеризации: иначе при дробной ширине перекраска на
     наведении пересчитывает края и рамка дрожит — как было у схем */
  transform: translateZ(0);
}

.options-row .upgrade-body {
  justify-content: center;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

/* Невыбранный чип — один значок: восемь названий подряд читать никто не
   станет, а значок держит ленту короткой. Название разворачивается у того,
   что выбран. */
.options-row .upgrade .upgrade-text {
  display: none;
}

/* Недоступный чип остаётся на месте бледным: если его убирать, ряд
   пересобирается и соседи прыгают под курсором. Правило общее — им живут и
   неприменимые пакеты, и матовое заполнение у штульповой двери. */
.is-off {
  opacity: 0.35;
  pointer-events: none;
}

.options-row .upgrade:has(input:checked) {
  max-width: 100%;
}

.options-row .upgrade:has(input:checked) .upgrade-body {
  justify-content: flex-start;
  padding: 8px 12px;
  overflow: visible;
}

.options-row .upgrade:has(input:checked) .upgrade-text {
  display: block;
}


/* Значок пакета живёт в том же языке, что схемы конструкций: линия,
   currentColor, целые размеры. 22 при сетке 24 — чтобы ширина осталась
   целой и рамка не ложилась между физическими пикселями. */
.pack-icon {
  flex: none;
  color: var(--ink);
}

/* в ряду читают название и цену; пояснение и плюс только мешают */
.options-row .upgrade small,
.options-row .upgrade .upgrade-sign {
  display: none;
}

.options-row .upgrade b {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}



/* «Лайт» не уезжает вместе с лентой — он всегда на виду */
/* «Лайт» складывается с любым пакетом, поэтому это отдельная группа рядом,
   а не ещё один чип в ленте. На узком экране группы встают друг под друга —
   там разделитель горизонтальный, как у остальных пар групп.

   Линия живёт на ленте, а не на метке «Лайт»: метке для линии пришлось бы
   растянуться во всю строку, и тогда нажатие на пустое место справа от чипа
   выбирало бы его. Кликается ровно то, что видно. */
.options-row .upgrades {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.options-row .upgrade--lite {
  flex: 0 0 auto;
  width: fit-content;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
}

@media (min-width: 861px) {
  .options-row {
    flex-wrap: nowrap;
    gap: 16px;
  }

  .options-row .upgrades {
    flex: 1 1 0;
    flex-basis: 0;
    border-bottom: 0;
    padding-bottom: 2px;
  }

  .options-row .upgrade--lite {
    padding: 0 0 0 16px;
    border-left: 1px solid var(--line);
  }
}

.options-row .upgrade--lite b {
  font-size: 12px;
}

/* ——— Подсказки к пакетам ——— */

/* «?» на чипе. У невыбранного чипа его нет: там и текста не видно, одна
   иконка, и кнопка рядом с ней читалась бы как вторая иконка. */
.help-btn {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font: 600 13px/1 var(--body);
  cursor: pointer;
}

.help-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* Тело чипа — сетка «иконка | плюс | текст». Кнопка встаёт четвёртой
   колонкой и только у выбранного чипа: у невыбранного видна одна иконка,
   и «?» рядом с ней читался бы как вторая иконка. */
.choice-body .help-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}

.upgrade .help-btn {
  display: none;
  align-self: center;
}

.upgrade input:checked ~ .upgrade-body {
  grid-template-columns: 20px auto minmax(0, 1fr) auto;
}

.upgrade input:checked ~ .upgrade-body .help-btn {
  display: block;
}

.hints {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}

.hints::backdrop {
  background: rgba(32, 24, 25, 0.5);
}

.hints-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}

.hints-title {
  margin: 0;
  font-size: 19px;
}

.hints-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rose);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Ради этого и затевалось окно: всё читается подряд, без роста ленты чипов. */
/* Две группы в одном окне: сначала системы, потом пакеты. Заголовок нужен,
   иначе карточки читаются как один ряд равнозначных вещей, а это не так. */
.hints-group {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hints-group:first-child {
  margin-top: 4px;
}

.hints-list {
  max-height: min(calc(80vh - 66px), 574px);
  padding: 4px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hint {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.hint:last-child {
  border-bottom: 0;
}

.hint-name {
  margin: 0 0 4px;
  font-size: 16px;
}

.hint-text {
  color: var(--muted);
}

/* Прочитал — тут же и выбрал. Кнопка неяркая: окно про чтение, а не про
   продажу, и восемь синих кнопок подряд перетянули бы на себя всё внимание. */
.hint-pick {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font: 600 14px/1 var(--body);
  cursor: pointer;
}

.hint-pick:hover {
  background: var(--blue);
  color: #fff;
}

/* Пакет, с чипа которого пришли: подсветка гаснет не сама, а при закрытии —
   иначе читатель не понимает, куда его промотало. */
.hint.is-target .hint-name {
  color: var(--blue);
}

@media (max-width: 560px) {
  .hints {
    width: 100%;
    max-width: none;
    max-height: 88vh;
    margin: auto auto 0;
    border-radius: 18px 18px 0 0;
  }

  /* Две группы в одном окне: сначала системы, потом пакеты. Заголовок нужен,
   иначе карточки читаются как один ряд равнозначных вещей, а это не так. */
.hints-group {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hints-group:first-child {
  margin-top: 4px;
}

.hints-list {
    max-height: calc(88vh - 66px);
  }
}

/* После отправки форма превращается в благодарность: полей и кнопки больше
   нет, чтобы не выглядело, будто можно отправить ещё раз. В окнах вместо
   отправки остаётся «Закрыть», на странице — только сообщение. */
.form-done,
[data-close] {
  display: none;
}

.is-sent .measure-lead,
.is-sent .field,
.is-sent .quiz-contact,
.is-sent fieldset,
.is-sent .consent,
.is-sent [data-form-error],
.is-sent button[type="submit"] {
  display: none;
}

/* Подтверждение — самое важное на экране в эту секунду, а выглядело как
   обычный абзац: владелец понял, что заявка ушла, только по исчезнувшей
   кнопке. Отдельная плашка со знаком, на цвет системы. */
.is-sent .form-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--blue-050);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-700);
}

.is-sent .form-done::before {
  content: "✓";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--paper);
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}

.is-sent [data-close] {
  display: inline-flex;
}