/* ============================================================
   FUNNEL — экраны воронки (шаг 2: вопрос + подробности)
   ============================================================

   Отдельный файл, а не секция main.css: на шагах воронки сайтовая
   шапка и футер выключены (см. block site_chrome / site_footer),
   экран живёт по своим правилам и не должен зависеть от порядка
   правил общей таблицы. Подключается только там, где нужен.

   Геометрия снята с макета Figma (step2.png / step2_context.png,
   390 px). Всё, что от макета, — в локальных переменных ниже:
   правка одного экрана не расходится по файлу.

   Цвета — только через семантические алиасы и alpha-каналы примитивов
   (--rgb-*). Литеральных hex здесь нет и быть не должно.
   ============================================================ */

.funnel {
  --funnel-gutter: var(--layout-gutter);
  --funnel-radius-card: 20px;      /* карточка вопроса */
  --funnel-radius-tile: 16px;      /* строка «Добавить подробности», варианты */
  --funnel-radius-cta: 14px;
  --funnel-radius-chip: 10px;
  --funnel-radius-box: 6px;        /* чекбокс согласия */
  --funnel-line: 23px;             /* интерлиньяж текста экрана */

  max-width: var(--layout-viewport);
  margin: 0 auto;
  padding: 12px var(--funnel-gutter) 28px;
}

/* Экран тарифов — тот же шаг воронки, но раскладке нужен разворот:
   лестница из трёх колонок в меру 390 px не помещается. */
.funnel--wide { max-width: 760px; }

/* Надзаголовок экрана вопроса — деталь десктопного макета F01. На мобиле
   его роль уже играет название расклада в полосе шага, и второй раз
   повторять его над заголовком незачем. */
.funnel-eyebrow { display: none; }

/* Сравнение путей и карточка принципа — блоки десктопного макета F02.
   Мобильный экран глубины не переверстывался (мобильных макетов воронки
   в экспорте нет), поэтому до 901px их просто нет. */
.choice-compare,
.choice-principle { display: none; }

/* Служебные экраны воронки (ожидание, сбой, «проверьте почту»): одна
   карточка по центру экрана. Раньше они рендерились с сайтовой шапкой
   и старым индикатором шага и выпадали из воронки. */
.funnel--center {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding-bottom: 48px;
}
.funnel--center .waiting-card { margin-bottom: 0; }


/* ============================================================
   ЭКРАН ВОРОНКИ
   ============================================================
   Обёртка вокруг полосы шага и колонки экрана. Полоса лежит вне
   колонки: меры у экранов разные (430…1180 px), и шапка, сидя внутри,
   съезжала бы на каждом шаге. Колонка забирает остаток высоты —
   экраны с центрированием (сплит, тарифы, ответ) считают его от
   обёртки, а не от вьюпорта. */
.funnel-screen {
  --funnel-gutter: var(--layout-gutter);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.funnel-screen > .funnel {
  flex: 1 1 auto;
  /* Ширину задаём явно: у колонок экранов `margin: 0 auto`, а флекс-элемент
     с автополями сжимается по содержимому вместо растяжки по обёртке. */
  width: 100%;
  /* Верхний отступ экрана отдан полосе — иначе он повторится под ней. */
  padding-top: 0;
}


/* ============================================================
   ШАПКА ВОРОНКИ
   ============================================================
   Одна геометрия на всех экранах воронки и на листе уточнений: поле
   берётся от экрана (на десктопе --funnel-pad, иначе поле страницы),
   поэтому левая линия «×» и правая линия знака бренда не сдвигаются
   от шага к шагу. */
.funnel-head {
  flex: none;
  padding: 12px var(--funnel-pad, var(--funnel-gutter)) 0;
}
@media (min-width: 601px) and (max-width: 900px) {
  .funnel-head { padding-top: 24px; }
}

.funnel-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
}

/* Иконка ровно там, где в макете, а тач-цель — 44 px через ::after:
   раздувать сам бокс нельзя, он сдвинет заголовок. */
.funnel-bar-nav {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  color: var(--text-primary);
}
.funnel-bar-nav::after {
  content: '';
  position: absolute;
  inset: -16px;
}
.funnel-bar-nav--back { width: 6px; height: 10px; }
.funnel-bar-nav svg { width: 100%; height: 100%; }
.funnel-bar-nav:hover { color: var(--accent-selected); }

.funnel-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-bar-logo {
  flex: none;
  display: block;
  line-height: 0;
}
.funnel-bar-logo img {
  width: 46px;
  height: auto;
}
/* Вордмарк — только десктопная форма знака (см. тир 901+). */
.funnel-bar-mark { display: none; }


/* Десктоп: полоса идёт край в край, как шапка оформления заказа.
   Поле — от обёртки экрана, поэтому на всех шагах одна величина. */
@media (min-width: 901px) {
  .funnel-screen,
  .funnel-sheet { --funnel-pad: clamp(48px, 5vw, 128px); }

  /* Раскладка макетов F01–F07: слева «‹» и вордмарк, справа этап,
     под ними — шкала во всю ширину полосы. Полоса собрана сеткой,
     потому что этап живёт в другом блоке разметки (.funnel-progress):
     display: contents отдаёт его строки прямо в эту сетку. */
  .funnel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-top: 16px;
    border-bottom: 0;
  }
  .funnel-head .funnel-bar { grid-column: 1; grid-row: 1; }
  .funnel-head .funnel-progress { display: contents; }
  .funnel-head .funnel-progress-label {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    gap: 6px;
  }
  /* Точка-разделитель, как в макете: «ЭТАП 2 ИЗ 3 · ГЛУБИНА». */
  .funnel-head .funnel-progress-name::before { content: '· '; }
  .funnel-head .funnel-progress-track {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 1px;
    margin-top: 14px;
    border-radius: 0;
    background: var(--border-hairline);
  }

  /* Название расклада на десктопе уходит из полосы: в макете его место
     занимает вордмарк, а сам расклад назван надзаголовком экрана
     (.funnel-eyebrow). Глаз тоже не рисуется — знак текстовый. */
  .funnel-bar-title { display: none; }
  .funnel-bar-logo img { display: none; }
  .funnel-bar-mark {
    display: block;
    margin-left: 28px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-lh);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-selected);
  }
}


/* ============================================================
   ПРОГРЕСС
   ============================================================ */
.funnel-progress { margin-top: 12px; }

.funnel-progress-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.funnel-progress-count { color: var(--color-gold-600); }
.funnel-progress-name { color: var(--color-gold-400); }

.funnel-progress-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  overflow: hidden;
}
.funnel-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-selected);
}
/* Экран без номера этапа (тарифы, ответ): дорожка пустая — считать
   нечего, но черта под полосой шага держит ту же геометрию. */
.funnel-progress--stage .funnel-progress-track { background: var(--border-hairline); }

.funnel-progress-fill[data-step="1"] { width: 33.33%; }
.funnel-progress-fill[data-step="2"] { width: 66.66%; }
.funnel-progress-fill[data-step="3"] { width: 100%; }


/* ============================================================
   ЗАГОЛОВОК ЭКРАНА
   ============================================================ */
.funnel-title {
  margin: 26px 0 0;
  font-family: var(--font-editorial);
  font-size: var(--type-display-screen-size);
  line-height: var(--type-display-screen-lh);
  font-weight: 400;
  letter-spacing: -0.005em;
  /* Мера уже колонки: перенос там же, где в макете, и строка не
     растягивается на всю ширину на широком вьюпорте. */
  max-width: 7.6em;
  color: var(--text-primary);
  text-shadow: 0 2px 24px var(--scrim);
}

.funnel-lede {
  margin: 9px 0 0;
  max-width: 22em;
  font-size: var(--type-body-medium-size);
  line-height: var(--funnel-line);
  color: var(--text-primary);
  text-shadow: 0 2px 18px var(--scrim);
}


/* ============================================================
   КАРТОЧКА ВОПРОСА — главный материал экрана
   ============================================================ */
.funnel-form { margin: 0; }

/* Оформление карточки перешло на само поле — здесь остались отбивка и
   область видимости токенов. flow-root: слот подписи задан отступом
   .q-field, а у карточки паддинга нет — иначе отступ схлопнулся бы наружу. */
.q-card {
  margin-top: 19px;
  display: flow-root;

  /* Геометрия поля и плавающей подписи в одном месте: тиры ниже меняют
     только эти значения, раскладка считается от них. */
  --q-field-pad-y: 18px;
  --q-field-pad-x: 18px;
  --q-field-size: var(--type-body-medium-size);
  --q-field-line: var(--funnel-line);
  --q-label-lift: 42px;      /* на сколько подпись уходит вверх из поля */
  --q-label-shift: 18px;     /* и влево — вровень с краем поля */
}

/* Обёртка поля — система координат для подписи. Верхний отступ и есть слот,
   в который она поднимается: сама подпись абсолютная и места не занимает. */
.q-field {
  position: relative;
  margin-top: calc(var(--q-label-lift) - var(--q-field-pad-y) - 1px);
}

/* Поле и есть главный материал экрана: рамка, скругление и заливка с макета
   висят на нём самом. Высоту держит оно же (min-height). */
.q-card textarea {
  display: block;
  width: 100%;
  min-height: 126px;
  max-height: 240px;
  padding: var(--q-field-pad-y) var(--q-field-pad-x)
           calc(var(--q-field-pad-y) + var(--type-caption-lh)) var(--q-field-pad-x);
  border: 1px solid var(--accent-selected);
  border-radius: var(--funnel-radius-card);
  /* Заливка ярче к центру — так снято с макета; собрана из канала
     примитива, а не из литерала. */
  background: radial-gradient(
    120% 120% at 50% 50%,
    rgb(var(--rgb-gold-500) / 0.40),
    rgb(var(--rgb-gold-500) / 0.30)
  );
  resize: none;
  overflow-y: auto;
  font-family: inherit;
  font-size: var(--q-field-size);
  line-height: var(--q-field-line);
  color: var(--text-primary);
}
.q-card textarea:focus {
  outline: none;
  border-color: var(--accent-selected);
  box-shadow: 0 0 0 1px var(--accent-selected);
}

/* Подпись поверх первой строки поля: пока пусто и нет фокуса — она и есть
   плейсхолдер (у самого textarea плейсхолдер в один пробел, иначе
   :placeholder-shown не отличит пустое поле). В фокусе и на заполненном
   поле уходит вверх, ужимается до кэпшена и берёт акцентный цвет. */
.q-card-label {
  position: absolute;
  top: calc(var(--q-field-pad-y) + 1px);
  left: calc(var(--q-field-pad-x) + 1px);
  transform-origin: left top;
  transition: transform 0.2s ease, color 0.2s ease;
  pointer-events: none;               /* клик по подписи проходит в поле */
  font-size: var(--q-field-size);
  line-height: var(--q-field-line);
  font-weight: 400;
  text-transform: uppercase;
  /* На золотой плашке --text-secondary местами проваливается ниже 4.5:1
     (заливка полупрозрачная, под ней светлые места кадра) — ступень выше. */
  color: var(--color-bone-900);
}
.q-card textarea:focus ~ .q-card-label,
.q-card textarea:not(:placeholder-shown) ~ .q-card-label {
  transform: translate(calc(-1 * var(--q-label-shift)), calc(-1 * var(--q-label-lift))) scale(0.75);
  color: var(--accent-selected);
}

/* Подсказка стоит под карточкой — это комментарий к полю, не его содержимое. */
.q-card-hint {
  margin: 12px 2px 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: 400;
  color: var(--color-bone-900);
}
/* Счётчик стоит в нижнем правом углу поля. Чтобы текст под него не заезжал,
   низ поля отбит на строку счётчика — она и есть его полоса. */
.q-field .funnel-counter {
  position: absolute;
  right: calc(var(--q-field-pad-x) + 1px);
  bottom: calc(var(--q-field-pad-y) + 1px);
  pointer-events: none;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-variant-numeric: tabular-nums;   /* цифры не пляшут при наборе */
  color: var(--color-bone-900);
}


/* ============================================================
   ГОТОВЫЕ ВОПРОСЫ — горизонтальная лента чипсов
   ============================================================ */
.funnel-examples { margin-top: 30px; }

.funnel-examples-label {
  margin: 0 0 9px;
  font-size: var(--type-label-large-size);
  font-weight: 400;
  line-height: var(--type-label-large-lh);
  color: var(--text-primary);
}

/* Лента подрезается гаттером, но скроллится во всю ширину экрана —
   иначе последний чипс упирается в поле и не читается как «есть ещё». */
.funnel-chips {
  display: flex;
  gap: 8px;
  /* Поля по вертикали — под тач-зону чипа (.funnel-chip::after выходит
     за него на 7px). Без них псевдослой торчал из бокса прокрутки, и
     `overflow-x: auto` (который делает вторую ось auto) давал ряду
     лишнюю вертикальную прокрутку. Отрицательный margin возвращает
     ряд на прежнее место в потоке. */
  margin: -7px calc(-1 * var(--funnel-gutter));
  padding: 7px var(--funnel-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.funnel-chips::-webkit-scrollbar { display: none; }

/* Своя полоса прокрутки: системная у ленты оверлейная и в покое не видна,
   а «есть ещё вопросы» должно читаться сразу. Класс вешает step2.js —
   без скрипта полосы просто нет, лента остаётся листаемой. */
.funnel-chips-wrap { position: relative; }
.funnel-chips-rail {
  position: absolute;
  display: none;
  border-radius: var(--radius-pill);
  background: var(--color-alpha-bone-08);
  /* Лента на мобилке уходит под края экрана, а полоса держится колонки. */
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
}
.funnel-chips-wrap.is-scrollable .funnel-chips-rail { display: block; }
.funnel-chips-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-selected);
}

.funnel-chip {
  position: relative;
  flex: none;
  padding: 0 16px;
  height: 30px;
  min-height: 30px;
  border: 0;
  border-radius: var(--funnel-radius-chip);
  background: var(--color-alpha-bone-08);
  font-family: inherit;
  font-size: var(--type-label-large-size);
  font-weight: 400;
  line-height: 30px;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.funnel-chip::after { content: ''; position: absolute; inset: -7px 0; }
.funnel-chip:hover { background: var(--color-alpha-gold-12); }


/* ============================================================
   СТРОКА «ДОБАВИТЬ ПОДРОБНОСТИ»
   ============================================================ */
.funnel-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 41px;
  padding: 12px;
  border: 0;
  border-radius: var(--funnel-radius-tile);
  background: var(--color-alpha-bone-08);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.funnel-more:hover { background: var(--color-alpha-bone-12); }

.funnel-more-icon {
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--accent-selected);
}
.funnel-more-icon svg { width: 100%; height: 100%; }

.funnel-more-title {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: var(--type-label-large-size);
  line-height: 24px;
  font-weight: 500;
  color: var(--text-primary);
}
.funnel-more-sub {
  display: block;
  margin: 0;
  font-size: var(--type-body-small-size);
  line-height: 21px;
  color: var(--text-muted);
}
/* Отметка, что уточнения уже заполнены. */
.funnel-more-sub[data-filled] { color: var(--color-gold-400); }


/* ============================================================
   СОГЛАСИЕ
   ============================================================ */
.funnel-consent { margin-top: 22px; }

.funnel-consent-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 4px;
  cursor: pointer;
}

/* Свой квадрат вместо системного: нативный чекбокс невозможно привести
   к макету кроссбраузерно. Сам input остаётся в потоке (не display:none),
   иначе required-валидация браузера не покажет подсказку. */
.funnel-consent-row input[type="checkbox"] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--color-bone-500);
  border-radius: var(--funnel-radius-box);
  background: transparent;
  cursor: pointer;
}
.funnel-consent-row input[type="checkbox"]:checked {
  border-color: var(--accent-selected);
  background-color: var(--accent-selected);
  /* Галка — фоновым SVG: ::before на appearance:none чекбоксе
     не отрисовывается в Safari. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070807' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.funnel-consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.funnel-consent-text {
  font-size: var(--type-label-small-size);
  line-height: 18px;
  color: var(--text-primary);
}
.funnel-consent-text a {
  color: var(--color-gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   ГЛАВНОЕ ДЕЙСТВИЕ
   ============================================================ */
.funnel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--control-large);
  margin-top: 33px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--funnel-radius-cta);
  background: var(--accent-selected);
  font-family: inherit;
  font-size: var(--type-body-medium-size);
  font-weight: 500;
  color: var(--text-on-selected);
  cursor: pointer;
  transition: background .15s ease;
}
.funnel-cta:hover { background: var(--accent-selected-hover); }
.funnel-cta:disabled { opacity: .5; cursor: not-allowed; }

/* Сброс уточнений — вторичное действие рядом с основным: текстовая кнопка,
   чтобы не спорить по весу с «Сохранить контекст». */
.funnel-sheet-reset {
  background: none;
  border: none;
  padding: 0 4px;
  color: var(--text-secondary);
  font-family: var(--font-functional);
  font-size: var(--type-label-large-size);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.funnel-sheet-reset:hover { color: var(--text-primary); }
.funnel-sheet-reset:disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: none;
}
.funnel-cta-price { font-weight: 700; }

/* Единственная purchase-CTA остаётся берри — роль цвета важнее экрана. */
.funnel-cta--purchase {
  background: var(--accent-purchase);
  color: var(--text-on-purchase);
}
.funnel-cta--purchase:hover { background: var(--accent-purchase-hover); }

.funnel-note {
  margin: 16px 0 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-muted);
}


/* ============================================================
   ЭКРАН ВЫБОРА ГЛУБИНЫ (макет step2_choice.png)
   ============================================================
   Раскладка на снимке — не картинка в потоке, а фон экрана
   (сцена three-cards, см. asset-map): текст лежит прямо на нём,
   как в Figma. В потоке остаётся только пустой блок .choice-art —
   он держит под снимком воздух, чтобы подпись и кнопки не
   наезжали на карты. */
.choice-art {
  position: relative;
  /* Высота — доля вьюпорта, а не константа: на низких экранах полоса
     сжимается вместе с ним, вместо того чтобы уводить кнопки за сгиб. */
  height: clamp(110px, 24vh, 240px);
}

/* Кадр привязан к самой полосе, а не к верху экрана: на узком экране
   заголовок занимает четыре строки вместо трёх, и снимок, отсчитанный
   от верха, уезжал под текст. Слой шире полосы — шёлк и ветки выходят
   за её края, карты остаются внутри, как в макете.
   z-index: -1 — иначе позиционированный слой закрыл бы текст над ним. */
.choice-art::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  /* На мобиле кадр в ширину экрана, дальше не растёт: на планшете колонка
     фиксируется в 430 px, а кадр во всю ширину вьюпорта подминал бы её. */
  width: min(100vw, 520px);
  aspect-ratio: 1000 / 1014;
  transform: translate(-50%, -50%);
  /* Тонировка кадра идёт своим слоем поверх снимка: общий слой страницы
     (body::after) сюда не достаёт — полоса лежит в другом контексте
     наложения. Уровень тот же, --photo-tint, чтобы экран не выбивался
     из остальной воронки. */
  background-image:
    linear-gradient(var(--photo-tint), var(--photo-tint)),
    var(--scene-src);
  background-image:
    linear-gradient(var(--photo-tint), var(--photo-tint)),
    var(--scene);
  background-repeat: no-repeat;
  background-position: var(--bg-position, 50% 50%);
  background-size: cover;
  pointer-events: none;
}

/* Общий кадр шага 2 на этом экране не нужен: композицию несёт полоса. */
body:has(.choice-page)::before { display: none; }

/* Заголовок экрана идёт во всю меру колонки: три строки макета, а не
   четыре — на этом экране под ним стоит снимок, лишняя строка съедает
   кадр и уводит вторую кнопку за сгиб. */
.choice-page .funnel-title { max-width: none; }

/* Своего скрима у экрана больше нет: общий слой (main.css) стал ровной
   тонировкой, и гасить кадр по высоте не нужно — карты на этом экране
   видны так же, как подпись и кнопки под ними. */

.choice-note {
  margin: 24px 0 0;
  text-align: center;
  font-size: var(--type-body-medium-size);
  line-height: var(--funnel-line);
  color: var(--text-primary);
  text-shadow: 0 2px 18px var(--scrim);
}

.choice-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 0;
}
.choice-actions .funnel-cta { margin-top: 0; }

/* Планшет: колонка уже не равна экрану (430 px), и растягивать кадр по
   вьюпорту нельзя — карты уезжают вниз. Держим тот же размер, что на
   мобиле (118% от 390), края снимка и так уходят в цвет страницы. */
@media (min-width: 601px) {
  body:has(.choice-page)::before {
    background-size: 460px auto;
    /* Кадр уже не во всю ширину — растворяем его края, иначе на светлом
       крае шёлка виден прямоугольник картинки. Радиусы в пикселях: маска
       должна совпасть с кадром (460 × 816 от точки 90px), а проценты здесь
       считаются от вьюпорта и промахиваются мимо. */
    -webkit-mask-image: radial-gradient(250px 430px at 50% 498px, #000 74%, transparent 100%);
    mask-image: radial-gradient(250px 430px at 50% 498px, #000 74%, transparent 100%);
  }
}

/* Низкие экраны (iPhone SE/8 и подобные): обе кнопки — смысл экрана,
   они должны быть видны без прокрутки. Ужимаем полосу под снимок и
   отступы, кадр поднимаем следом. */
@media (max-height: 720px) {
  .choice-art { height: 96px; }
  .choice-note { margin-top: 16px; }
  .choice-actions { margin-top: 14px; }
  body:has(.choice-page)::before { background-position: center 40px; }
}


/* ============================================================
   СЛУЖЕБНЫЕ БЛОКИ — в макете их нет, но флоу без них не работает:
   ошибки формы, email бесплатного расклада, капча, стоп-приём заказов.
   Оформлены языком макета: тёмная плашка, золотой акцент.
   ============================================================ */
.funnel-messages {
  margin-top: 20px;
  padding: 14px 16px;
  list-style: none;
  border: 1px solid var(--status-error-border);
  border-radius: var(--funnel-radius-tile);
  background: var(--status-error-bg);
  color: var(--status-error-text);
  font-size: var(--type-body-medium-size);
  line-height: var(--type-body-medium-lh);
}
.funnel-messages li + li { margin-top: 6px; }

.funnel-notice {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--funnel-radius-tile);
  background: var(--color-alpha-bone-08);
  font-size: var(--type-body-medium-size);
  line-height: var(--type-body-medium-lh);
  color: var(--text-primary);
}
.funnel-notice strong { display: block; margin-bottom: 4px; }

.funnel-field { margin-top: 20px; }
.funnel-field-label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--type-label-small-size);
  line-height: var(--type-label-small-lh);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gold-400);
}
.funnel-field input[type="email"] {
  width: 100%;
  height: var(--control-default);
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--funnel-radius-tile);
  background: var(--color-alpha-bone-08);
  font-family: inherit;
  font-size: var(--type-body-large-size);
  color: var(--text-primary);
}
.funnel-field input[type="email"]::placeholder { color: var(--text-muted); }
.funnel-field input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-selected);
}
.funnel-field-hint {
  margin: 8px 0 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-muted);
}

.funnel-captcha { margin-top: 20px; }

/* Таймер «карта дня уже взята» — вместо кнопки. */
.funnel-timer {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--funnel-radius-tile);
  background: var(--color-alpha-bone-08);
  text-align: center;
}
.funnel-timer-label {
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-secondary);
}
.funnel-timer-clock {
  margin: 8px 0 4px;
  font-family: var(--font-editorial);
  font-size: var(--type-display-price-size);
  line-height: var(--type-display-price-lh);
  font-variant-numeric: tabular-nums;
  color: var(--accent-selected);
}
.funnel-timer-hint {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
}


/* ============================================================
   ЭКРАН УТОЧНЕНИЙ — лист поверх шага 2
   ============================================================
   Не отдельный URL: значения уезжают той же формой, что и вопрос,
   поэтому это слой над экраном, а не переход. */
.funnel-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.funnel-sheet[hidden] { display: none; }

/* Лист не закрашивает экран собственным фоном, а прячет содержимое шага:
   атмосферный снимок страницы (body::before) должен остаться на месте —
   так на макете. */
body.funnel-sheet-open .funnel-screen > * { visibility: hidden; }
body.funnel-sheet-open .funnel-sheet { visibility: visible; }

/* Полоса листа стоит вне колонки — как на экранах воронки, поэтому
   поле страницы нужно и самому листу. */
.funnel-sheet { --funnel-gutter: var(--layout-gutter); }

.funnel-sheet-inner {
  max-width: var(--layout-viewport);
  margin: 0 auto;
  padding: 0 var(--funnel-gutter) 28px;
}

.funnel-sheet .funnel-title { margin-top: 26px; }

/* Заметка — вторичный материал: нейтральная плашка, не золото. */
.note-card {
  margin-top: 24px;
  padding: 12px 18px;
  border: 1px solid rgb(var(--rgb-bone-1000) / 0.18);
  border-radius: var(--funnel-radius-card);
  background: var(--color-alpha-bone-12);
}
.note-card-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-muted);
}
.note-card textarea {
  display: block;
  width: 100%;
  min-height: var(--funnel-line);
  max-height: 180px;
  padding: 0;
  border: 0;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: var(--type-body-medium-size);
  line-height: var(--funnel-line);
  color: var(--text-primary);
}
.note-card textarea::placeholder { color: var(--text-muted); }
.note-card textarea:focus { outline: none; }
.note-card-counter {
  display: block;
  margin-top: 10px;
  font-size: var(--type-label-small-size);
  line-height: var(--type-label-small-lh);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.funnel-group { margin-top: 34px; }
.funnel-group-label {
  margin: 0 0 11px;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.funnel-options { display: grid; gap: 9px; }
.funnel-options--grid { grid-template-columns: 1fr 1fr; }

/* Вариант — label вокруг radio: клик по всей плитке, состояние держит
   :has(:checked), без JS. */
.funnel-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--funnel-radius-tile);
  background: var(--color-alpha-bone-08);
  font-size: var(--type-body-medium-size);
  line-height: 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.funnel-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.funnel-option-text { flex: 1 1 auto; }

.funnel-option-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 11px;
  height: 11px;
  border: 1px solid var(--color-bone-500);
  border-radius: 50%;
  color: var(--accent-selected);
}
.funnel-option-mark svg { width: 11px; height: 11px; opacity: 0; }

.funnel-option:has(input:checked) {
  border-color: rgb(var(--rgb-gold-500) / 0.55);
  background: var(--color-alpha-gold-12);
}
.funnel-option:has(input:checked) .funnel-option-mark {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}
.funnel-option:has(input:checked) .funnel-option-mark svg { opacity: 1; }
.funnel-option:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.funnel-sheet .funnel-cta { margin-top: 53px; }


/* ============================================================
   ПЛАНШЕТ
   ============================================================ */
@media (min-width: 601px) {
  .funnel:not(.funnel--wide),
  .funnel-sheet-inner { max-width: 430px; }

  .funnel,
  .funnel-sheet-inner { padding-top: 24px; }

  /* Выход ленты за поле осмыслен только когда колонка равна экрану.
     Дальше колонка фиксирована, края экрана рядом нет и листать мышью
     нечего — чипсы переносятся, последний не обрезается. Стопка растёт
     вниз, поэтому держим её в трёх рядах, остальное — под прокрутку. */
  .funnel-chips {
    margin: -7px 0;
    padding: 7px 0;
    flex-wrap: wrap;
    row-gap: 8px;
    max-height: 138px;                      /* 3 ряда по 36 + отбивки */
    overflow-x: hidden;
    overflow-y: auto;
  }
  .funnel-chips-rail {
    left: auto;
    bottom: 0;
    top: 0;
    right: -12px;
    width: 3px;
    height: auto;
  }
  .funnel-chips-thumb { top: 0; left: 0; width: 100%; height: auto; }
}


/* ============================================================
   ДЕСКТОП — не растянутая мобилка, а своя раскладка
   ============================================================

   Макета десктопа нет. Раскладка выведена из двух ограничений:

   1. Мера строки. Колонка 430 px даёт ~48 знаков — мобильная мера
      на большом экране, из-за неё страница и читается как телефон.
      Норма для десктопа 65–75 знаков, отсюда колонка 600 px.

   2. Композиция. Шапка и прогресс уходят во всю ширину отдельной
      полосой (шаг оформления виден сразу), ниже — форма слева и
      снимок панелью справа. Согласие и кнопка встают в один ряд,
      кнопка по правому краю колонки: на десктопе действие ищут
      справа внизу блока, а не во всю ширину экрана.

   Обёртки .funnel-head / .funnel-body / .funnel-col / .funnel-actions
   на мобиле — обычные блоки и на вёрстку макета не влияют.
   ============================================================ */
.funnel-art { display: none; }

@media (min-width: 901px) {
  /* Снимок уезжает в правую панель, общий фоновый слой страницы
     (main.css, body:has(.step2-page)) на этом экране лишний.
     Экран вскрытия карт (.funnel--wide) остаётся на нём. */
  body.funnel-page:has(.funnel--split)::before,
  body.funnel-page:has(.funnel--split)::after { display: none; }

  /* Специфичность на уровне планшетного `.funnel:not(.funnel--wide)`:
     иначе max-width 430 из него зажимает сетку. */
  .funnel.funnel--split {
    /* Мера строки дальше 640 не идёт; остаток ширины забирает панель-снимок
       (--funnel-art), а поле колонки приходит от обёртки экрана — той же
       величиной, что у полосы шага, поэтому левая линия экрана общая. */
    --funnel-measure: 640px;
    --funnel-art: 42%;

    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
  }

  .funnel-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--funnel-art);
    align-items: center;
    /* safe — чтобы длинная форма не срезалась сверху при центрировании */
    align-items: safe center;
  }

  /* Колонка прижата к левому полю, а не центрирована в половине:
     её левый край совпадает с краем шапки. */
  .funnel-col {
    width: 100%;
    max-width: calc(var(--funnel-measure) + 2 * var(--funnel-pad));
    margin: 0;
    padding: 32px var(--funnel-pad);
  }

  .funnel-art {
    display: block;
    align-self: stretch;
    position: relative;
    background-color: var(--surface-page);
    /* Панель узкая и во всю высоту — здесь нужен вертикальный кадр
       (--scene), а не горизонтальный: сцену задаёт класс на <body>. */
    background-image: var(--scene-src);
    background-image: var(--scene);
    background-repeat: no-repeat;
    background-position: var(--bg-position, 50% 50%);
    background-size: cover;
  }
  /* Панель — кадр, а не растворение: тонировка та же, что на остальных экранах. */
  .funnel-art::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Ровная тонировка вместо растяжки в цвет колонки: снимок в панели
       живёт по тем же правилам, что и на остальных экранах воронки —
       кадр виден целиком, поверх один слой цвета страницы (см.
       --photo-tint). Стык с колонкой теперь читается краем панели,
       а не размывается: так и в макете. Зерна нет — полосить нечему. */
    background-color: var(--photo-tint);
  }


  /* ---------- Типографика ----------
     Мобильные кегли в колонке 600 px читаются мелко: поднимаем на
     ступень по шкале. Ореол под текстом больше не нужен — текст
     лежит на чистом фоне, а не на снимке. */
  .funnel-title {
    margin-top: 0;
    font-size: var(--type-display-funnel-size);
    line-height: var(--type-display-funnel-lh);
    max-width: 11em;
  }
  .funnel-title,
  .funnel-lede { text-shadow: none; }
  .funnel-lede {
    margin-top: 12px;
    max-width: none;
    font-size: var(--type-body-large-size);
    line-height: var(--type-body-large-lh);
  }

  .q-card {
    margin-top: 24px;
    --q-field-size: var(--type-body-large-size);
    --q-field-line: var(--type-body-large-lh);
    --q-label-lift: 45px;
  }
  .q-card textarea {
    min-height: 134px;                      /* три строки — поле читается как «расскажите» */
  }
  .q-card-hint { font-size: var(--type-body-small-size); }

  .funnel-examples { margin-top: 20px; }
  .funnel-examples-label { font-size: var(--type-body-medium-size); }
  .funnel-chip {
    height: 36px;
    min-height: 36px;
    line-height: 36px;
    font-size: var(--type-body-medium-size);
  }

  .funnel-more { margin-top: 20px; padding: 14px 16px; }
  .funnel-more-title { font-size: var(--type-body-medium-size); }
  .funnel-more-sub { font-size: var(--type-body-small-size); }

  .note-card textarea,
  .funnel-option { font-size: var(--type-body-medium-size); }
  .note-card textarea { line-height: var(--type-body-large-lh); }
  .funnel-consent-text { font-size: var(--type-body-small-size); }


  /* ---------- Строка действия ----------
     Согласие слева, кнопка справа по краю колонки. Кнопка по контенту,
     а не во всю ширину: во всю ширину — мобильный приём. */
  .funnel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-hairline);
  }
  .funnel-actions--end { justify-content: flex-end; }
  .funnel-actions .funnel-consent { margin-top: 0; max-width: 34em; }
  .funnel-actions .funnel-cta {
    flex: none;
    width: auto;
    min-width: 240px;
    margin-top: 0;
    padding: 0 40px;
    font-size: var(--type-body-large-size);
  }
  .funnel-note {
    max-width: 44em;
    margin-top: 12px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-lh);
  }


  /* ---------- Экран уточнений ----------
     Лист занимает всю ширину и работает как рабочая поверхность:
     заметка слева, группы справа — вместо длинной стопки. */
  .funnel-sheet {
    background: var(--surface-page);
    animation: funnel-sheet-in .22s cubic-bezier(.16, 1, .3, 1) both;
  }
  .funnel-sheet-inner {
    max-width: none;
    padding: 0;
  }
  .funnel-sheet-col {
    width: 100%;
    max-width: 1180px;
    /* Колонка листа центрируется сама: у .funnel-sheet-inner на этом
       вьюпорте меры нет, и без margin лист прижимался к левому краю. */
    margin-inline: auto;
    padding: 32px var(--funnel-pad);
  }
  .funnel-sheet-body {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
    margin-top: 28px;
  }
  .funnel-sheet-body .note-card { margin-top: 0; }
  .funnel-sheet-body .note-card textarea { min-height: 104px; }
  .funnel-sheet-body .funnel-group:first-child { margin-top: 0; }
  .funnel-sheet .funnel-cta { margin-top: 0; }

  /* ---------- Экран выбора глубины ----------
     Раскладка тут не фон страницы, а панель справа (как на step2):
     кадр 389 px шириной на весь десктопный экран не тянется. Слева —
     обычная колонка, поэтому резервировать высоту под снимок не нужно. */
  body:has(.choice-page)::before,
  body:has(.choice-page)::after { display: none; }

  /* Кадра здесь больше нет: сцена приходит из класса на <body>,
     общего для мобильной полосы и десктопной панели. */
  .choice-art { height: 0; }
  .choice-art::after { display: none; }
  .choice-note {
    text-align: left;
    text-shadow: none;
    font-size: var(--type-body-large-size);
    line-height: var(--type-body-large-lh);
  }
  .choice-actions {
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-hairline);
  }
  .choice-actions .funnel-cta {
    flex: 0 1 auto;
    width: auto;
    min-width: 240px;
    padding: 0 32px;
    font-size: var(--type-body-large-size);
  }

  /* Лист рисует свой фон, снимок под ним не нужен. */
  body.funnel-sheet-open .funnel-art { visibility: hidden; }


  /* ---------- Экран вопроса: композиция макета F01 ----------
     Кадр во всю ширину, слева текст на чистой зоне сцены, справа форма
     карточкой. Это не то же самое, что панель-снимок соседних экранов:
     здесь снимок — подложка всего экрана, поэтому фоновые слои страницы
     возвращаются (правило выше их гасит для .funnel--split). */
  body.funnel-page:has(.funnel--panel)::before,
  body.funnel-page:has(.funnel--panel)::after { display: block; }
  .funnel--panel .funnel-art { display: none; }

  .funnel--panel .funnel-body { grid-template-columns: minmax(0, 1fr); }
  .funnel--panel .funnel-col {
    max-width: calc(1240px + 2 * var(--funnel-pad));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: clamp(40px, 5vw, 88px);
    /* start, а не center: в макете заголовок и верх карточки стоят на
       одной линии, при центрировании текст уезжал к середине снимка. */
    align-items: start;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .funnel-eyebrow {
    display: block;
    margin: 0 0 18px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-lh);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-selected);
  }
  .funnel--panel .funnel-title { max-width: 9em; }
  .funnel--panel .funnel-lede { max-width: 26em; }

  /* Форма — плотная карточка поверх снимка: скрим держит контраст полей,
     иначе плейсхолдеры ложатся на светлые складки шёлка. */
  .funnel--panel .funnel-form {
    margin: 0;
    padding: 30px 34px;
    border: 1px solid var(--color-alpha-gold-24);
    border-radius: var(--radius-card);
    background: var(--scrim);
  }
  /* В панели вопрос идёт первым блоком — верхняя отбивка не нужна. */
  .funnel--panel .funnel-form .q-card { margin-top: 0; }
  .funnel--panel .funnel-form .funnel-examples { margin-top: 20px; }
  .funnel--panel .funnel-form .funnel-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-hairline);
    gap: 20px;
  }
  /* В карточке шириной 560 строка согласия ломалась на три строки:
     кнопке достаточно 200, остаток отдаём тексту. */
  .funnel--panel .funnel-form .funnel-actions .funnel-cta {
    min-width: 200px;
    padding: 0 28px;
  }


  /* ---------- Экран глубины: композиция макета F02 ----------
     Слева — вопрос выбора и два пути, справа карточкой — принцип
     расклада с составом полного разбора. Панель-снимок здесь тоже
     не нужна: кадр идёт во всю ширину (см. .funnel--panel выше). */
  body:has(.choice-page)::before,
  body:has(.choice-page)::after { display: block; }

  .choice-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
    padding: 18px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    background: var(--scrim-soft);
  }
  .choice-compare-card {
    padding: 20px;
    border: 1px solid var(--border-strong);
    border-radius: var(--funnel-radius-card);
  }
  .choice-compare-label {
    margin: 0 0 14px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-lh);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-selected);
  }
  .choice-compare-title {
    margin: 0 0 16px;
    font-size: var(--type-heading-h2-size);
    line-height: var(--type-heading-h2-lh);
    font-weight: 500;
  }
  .choice-compare-meta,
  .choice-compare-body {
    margin: 0;
    font-size: var(--type-body-small-size);
    line-height: var(--type-body-small-lh);
    color: var(--text-secondary);
  }
  .choice-compare-body { margin-top: 4px; color: var(--text-muted); }

  .choice-principle {
    display: block;
    padding: 34px 36px;
    border: 1px solid var(--color-alpha-gold-24);
    border-radius: var(--radius-card);
    background: var(--scrim);
  }
  .choice-principle-title {
    margin: 0 0 22px;
    font-family: var(--font-editorial);
    font-weight: 400;
    font-size: var(--type-display-card-size);
    line-height: var(--type-display-card-lh);
  }
  .choice-principle-body {
    margin: 0;
    font-size: var(--type-body-medium-size);
    line-height: var(--type-body-medium-lh);
    color: var(--text-secondary);
  }
  .choice-principle-facts {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--border-hairline);
  }
  .choice-principle-facts-label {
    margin: 0 0 14px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-lh);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* Числа тарифа — золотом: это состав того, что человек выбирает. */
  .choice-principle-facts div {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    color: var(--accent-selected);
    font-size: var(--type-body-medium-size);
    line-height: var(--type-body-medium-lh);
  }
  .choice-principle-facts dt { font-variant-numeric: tabular-nums; }
  .choice-principle-facts dd { margin: 0; }

  /* Кадр здесь во всю ширину: правила планшетного тира (масштаб 460 px
     и радиальная маска под мобильную полосу) сцену бы обрезали. */
  body:has(.choice-page)::before {
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Сцена three-cards светлее прочих: рубашки занимают весь кадр и бликуют
     золотом ровно там, где идёт текст. Тонировку берём глубже штатной
     (--photo-tint 0.60) — в макете кадр тоже уведён почти в фон. */
  body:has(.choice-page)::after {
    background-color: rgb(var(--rgb-surface-page) / 0.80);
  }

  /* Подпись «выберите глубину…» и черта над кнопками — из мобильной
     раскладки: там кнопки шли сразу за снимком и нуждались в пояснении.
     На десктопе выбор объясняют сами карточки сравнения (макет F02). */
  .choice-page .choice-note { display: none; }

  /* Кнопки экрана глубины стоят под колонкой выбора, а не во всю ширину
     сетки: правая карточка — справка, а не часть действия. */
  .choice-page .choice-actions {
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
  }
}


/* ============================================================
   ЭКРАН ТАРИФОВ В ВОРОНКЕ (макет step2_tariffs.png)
   ============================================================
   Лестница тарифов (общий партиал с paywall) — три колонки,
   в меру шага воронки они не помещаются: даём экрану свою ширину.
   Сами карточки тарифа живут в main.css: компонент общий с paywall. */
.tariffs-page.funnel--wide { max-width: 1040px; }
.tariffs-page .funnel-title,
.tariffs-page .funnel-lede { max-width: none; }
.tariffs-page .tariff-ladder { margin-top: 28px; }
.tariffs-page .tariff-ladder-lead { display: none; }

/* Надзаголовок, который виден на любой ширине. На большинстве экранов
   его роль играет название расклада в полосе шага (потому .funnel-eyebrow
   до 901px скрыт), но на тарифах и экране ответа полоса занята другим:
   стадией оплаты (F05) и названием тарифа (F06). */
.funnel-eyebrow--always {
  display: block;
  margin: 16px 0 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-selected);
}


/* ============================================================
   ВСКРЫТИЕ КАРТ (макеты 3reveals / 5reveals / 7reveals / 1revealed)
   ============================================================

   На экране одна карта — та, которую открывают сейчас; остальные
   лежат под ней колодой и выглядывают рубашками. Церемония одной
   карты: переворот → карта видна → уезжает за колоду. Темп задаёт
   --reveal-rate: reveal.js ставит множитель < 1 для режима «открыть
   оставшиеся», и одна переменная ускоряет весь сценарий разом —
   длительности анимаций тут и таймеры в JS считаются от одних чисел.
   ============================================================ */
.reveal-page {
  --reveal-rate: 1;
  --reveal-flip: 700ms;
  --reveal-tuck: 520ms;
  text-align: center;
}

.reveal-title {
  margin: 16px auto 0;
  max-width: none;
}
.reveal-lede {
  margin: 10px auto 0;
  max-width: 24em;
}

.reveal-now { margin-top: 14px; }
.reveal-counter {
  margin: 0;
  font-size: var(--type-body-medium-size);
  line-height: var(--funnel-line);
  color: var(--color-gold-400);
  text-shadow: 0 2px 18px var(--scrim);
}
.reveal-position {
  margin: 2px 0 0;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--type-display-card-size);
  line-height: var(--type-display-card-lh);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 24px var(--scrim);
}

/* Сцена: высота — доля вьюпорта, ширина карты считается от неё через
   aspect-ratio. Так карта не выталкивает кнопку за сгиб на низких экранах. */
.reveal-stage {
  position: relative;
  height: clamp(230px, 34vh, 380px);
  margin-top: 14px;
}

.reveal-card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 6 / 11;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* Глубина в колоде: 0 — верхняя карта, дальше рубашки выглядывают
     из-под неё (значение ставит reveal.js). */
  transform:
    translateX(-50%)
    translateY(calc(var(--depth, 0) * -14px))
    scale(calc(1 - var(--depth, 0) * 0.05));
  z-index: calc(10 - var(--depth, 0));
  transition:
    transform calc(var(--reveal-tuck) * var(--reveal-rate)) cubic-bezier(.22, .61, .36, 1),
    opacity calc(var(--reveal-tuck) * var(--reveal-rate)) ease;
}
.reveal-card:disabled { cursor: default; }
.reveal-card:not(:disabled):hover .reveal-flip { transform: translateY(-6px); }
.reveal-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: var(--radius-control); }

/* Открытая карта уходит за колоду — «наверх и вглубь»: следующая
   рубашка оказывается сверху сама, без перестановки в DOM. */
.reveal-card.is-tucked {
  transform: translateX(-50%) translateY(-46px) scale(0.82);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.reveal-flip {
  display: block;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transition: transform .3s ease;
}
.reveal-flip-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform calc(var(--reveal-flip) * var(--reveal-rate)) cubic-bezier(.2, .7, .2, 1);
}
.reveal-card.is-open .reveal-flip-inner { transform: rotateY(180deg); }

.reveal-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 22px 46px -20px var(--scrim);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.reveal-face picture { display: block; width: 100%; height: 100%; }
.reveal-face img,
.reveal-face svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Лицо карты изначально отвёрнуто — видно после поворота на 180°. */
.reveal-face-front { transform: rotateY(180deg); }
/* Перевёрнутая карта: разворачиваем само изображение «вверх ногами». */
.reveal-card.reversed .reveal-face-front img { transform: rotate(180deg); }

/* Имя карты появляется, когда она открыта; место под него держим всегда,
   иначе колода дёргается в момент подписи. */
.reveal-card-name {
  min-height: 40px;
  margin: 10px 0 0;
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-lh);
  color: var(--text-primary);
}
.reveal-card-direction {
  display: block;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-secondary);
}

/* Шкала карт: пройденные — галочкой, текущая — заливкой. */
.reveal-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.reveal-dot { display: flex; align-items: center; }
.reveal-dot + .reveal-dot::before {
  content: '';
  width: clamp(12px, 6vw, 34px);
  height: 1px;
  background: var(--color-gold-700);
}
.reveal-dot-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-gold-700);
  border-radius: 50%;
  font-size: var(--type-label-small-size);
  font-weight: 600;
  color: var(--color-gold-400);
}
.reveal-dot.is-current .reveal-dot-mark,
.reveal-dot.is-done .reveal-dot-mark {
  border-color: var(--accent-selected);
  background: var(--accent-selected);
  color: var(--text-on-selected);
}
.reveal-dot-check { display: none; width: 15px; height: 15px; }
.reveal-dot.is-done .reveal-dot-num { display: none; }
.reveal-dot.is-done .reveal-dot-check { display: block; }

.reveal-actions { margin-top: 16px; }
.reveal-actions[hidden] { display: none; }
.reveal-actions .funnel-cta { margin-top: 0; }
.reveal-tap-hint {
  margin: 8px 0 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-secondary);
}
.reveal-auto {
  margin-top: 4px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--type-body-medium-size);
  color: var(--color-gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.reveal-auto:hover { color: var(--accent-selected-hover); }
.reveal-auto[hidden] { display: none; }

.reveal-cta { margin-top: 22px; }
.reveal-cta[hidden] { display: none; }
.reveal-cta .funnel-cta { margin-top: 0; }
.reveal-note,
.reveal-generating {
  margin: 12px 0 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-lh);
  color: var(--text-secondary);
}
.reveal-generating[hidden] { display: none; }

/* Низкие экраны: карта уступает место кнопке — она смысл экрана. */
@media (max-height: 760px) {
  .reveal-title { margin-top: 14px; }
  .reveal-now { margin-top: 14px; }
  .reveal-stage { height: clamp(200px, 32vh, 320px); }
  .reveal-actions { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .reveal-flip,
  .reveal-flip-inner { transition: none; }
}

@media (min-width: 901px) {
  /* Десктопное `.funnel-title { margin-top: 0 }` рассчитано на сплит, где
     заголовок стоит в колонке под полосой шага. Здесь полоса — часть той же
     колонки, и заголовку нужен воздух. */
  .tariffs-page .funnel-title { margin-top: 26px; }

  /* Экран стоит по центру вьюпорта, а не висит под шапкой: лестница — весь
     смысл шага, и на высоком мониторе пустота под ней уводит взгляд вниз,
     где ничего нет. Шапка остаётся сверху, а блок «плашка → сноска»
     центрируется в остатке автополями. */
  .tariffs-page.funnel--wide {
    display: flex;
    flex-direction: column;
  }
  /* Блок держится верха полосы шага, как в макете F05: центрировать его
     по остатку высоты нельзя — на высоком мониторе заголовок отрывался
     от шапки, а лестница уезжала к нижнему краю. */
  .tariffs-page .funnel-eyebrow--always { margin-top: 40px; }
  /* Заголовок ложится в две строки макета, а не тянется через весь экран. */
  .tariffs-page .funnel-title { max-width: 12em; }
  .tariffs-page .funnel-lede { max-width: 34em; }
  .tariffs-page .tariff-ladder-fine { margin-bottom: auto; }
}

/* Широкий монитор: лестнице тесно в мере, снятой с планшета — колонки
   тарифов растут вместе с экраном, но не больше меры чтения. */
@media (min-width: 1440px) {
  .tariffs-page.funnel--wide { max-width: 1180px; }
  .tariffs-page .tariff-ladder { max-width: 1120px; }
}

@keyframes funnel-sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-sheet { animation: none; }
  .q-card-label { transition: none; }
}

/* Сверхширокий экран: колонка держит меру строки и дальше не растёт,
   поэтому лишняя ширина копится пустотой между текстом и панелью.
   Отдаём её снимку — композиция остаётся из двух частей, а не из двух
   частей и провала посередине. */
@media (min-width: 1600px) {
  .funnel.funnel--split { --funnel-art: 48%; }
}


/* ============================================================
   ДЕСКТОП — НИЗКИЕ ЭКРАНЫ (ноутбуки 1280×800, 1366×768)
   ============================================================
   Вертикаль ноутбука меньше, чем у «настольных» 900+, а шаг воронки —
   один экран с одним действием: если кнопка уходит за сгиб, человек её
   просто не видит. Кегли и материалы не меняем — ужимаем только воздух
   между блоками и поля, заголовок опускаем на ступень шкалы.
   ============================================================ */
@media (min-width: 901px) and (max-height: 860px) {
  .funnel--split .funnel-col { padding-top: 18px; padding-bottom: 18px; }
  .funnel-head { padding-top: 12px; }
  .funnel-head .funnel-progress { margin-top: 10px; }

  .funnel--split .funnel-title {
    font-size: var(--type-display-screen-size);
    line-height: var(--type-display-screen-lh);
  }
  .funnel--split .funnel-lede { margin-top: 8px; }

  .funnel--split .q-card {
    margin-top: 16px;
    --q-field-pad-y: 14px;
    --q-field-pad-x: 16px;
    --q-label-lift: 41px;
    --q-label-shift: 16px;
  }
  .funnel--split .q-card textarea { min-height: 104px; }
  .funnel--split .q-card-hint { margin-top: 8px; }

  .funnel--split .funnel-examples { margin-top: 14px; }
  .funnel--split .funnel-examples-label { margin-bottom: 7px; }
  .funnel--split .funnel-chips { max-height: 126px; }   /* 3 ряда по 32 */
  .funnel--split .funnel-chip {
    height: 32px;
    min-height: 32px;
    line-height: 32px;
  }

  .funnel--split .funnel-more { margin-top: 14px; padding: 11px 16px; }
  .funnel--split .funnel-actions { margin-top: 16px; padding-top: 14px; }
  .funnel--split .funnel-note { margin-top: 8px; }

  /* Экран выбора глубины: тот же приём, только блоков меньше. */
  .choice-page .choice-compare { margin-top: 22px; padding: 14px; }
  .choice-page .choice-actions { margin-top: 18px; }

  /* Экран тарифов: три колонки и так высокие, кнопки ступеней должны
     остаться на виду вместе с ценами. */
  /* Воздух под полосой шага даёт сама полоса — своего отступа экрану не нужно. */
  .tariffs-page.funnel { padding-top: 0; padding-bottom: 16px; }
  .tariffs-page .funnel-eyebrow--always { margin-top: 10px; }
  .tariffs-page .funnel-title {
    margin-top: 14px;
    font-size: var(--type-display-screen-size);
    line-height: var(--type-display-screen-lh);
  }
  .tariffs-page .funnel-lede { margin-top: 8px; }
  .tariffs-page .tariff-ladder { margin-top: 18px; }
  .tariffs-page .tariff-col { padding: 16px; }
  .tariffs-page .tariff-flags { margin-bottom: 10px; }
  .tariffs-page .tariff-head { margin-bottom: 10px; }
  .tariffs-page .tariff-icon { width: 52px; height: 52px; }
  .tariffs-page .tariff-icon img { width: 36px; height: 36px; }
  .tariffs-page .tariff-meta { margin-bottom: 10px; padding-bottom: 10px; }
  .tariffs-page .tariff-bullets-label { margin-bottom: 7px; }
  .tariffs-page .tariff-bullets { margin-bottom: 12px; }
  .tariffs-page .tariff-bullets li { margin-bottom: 6px; }
  .tariffs-page .tariff-select-btn { padding: 11px 16px; }
  .tariffs-page .tariff-ladder-fine { margin-top: 10px; }
}

/* ============================================================
   ВСКРЫТИЕ КАРТ — ДЕСКТОП
   ============================================================
   Точка внимания остаётся одна — открываемая карта, но на широком
   экране она не обязана делить вертикаль с текстом: колода уходит
   в правую колонку и растёт по высоте экрана, а всё, что о ней
   рассказывают (счётчик, позиция, шкала, кнопка), встаёт слева
   отдельным столбцом. Вертикали хватает — карта крупнее мобильной
   вдвое, кнопка остаётся над сгибом.

   Раскладка сделана сеткой с явной расстановкой: разметка вскрытия
   общая с мобильной, обёрток под колонки в ней нет.
   ============================================================ */
@media (min-width: 901px) {
  .funnel.reveal-screen { max-width: 560px; padding-bottom: 40px; }

  .reveal-title {
    margin-top: 18px;
    font-size: var(--type-display-funnel-size);
    line-height: var(--type-display-funnel-lh);
  }
  .reveal-lede { font-size: var(--type-body-large-size); line-height: var(--type-body-large-lh); }
  /* Потолок ниже мобильной доли вьюпорта: на десктопе экран шире, чем выше,
     и карта в 46vh уводит кнопку за сгиб. */
  .reveal-stage { height: clamp(260px, 34vh, 380px); }
  .reveal-actions .funnel-cta,
  .reveal-cta .funnel-cta { width: 100%; }
}

@media (min-width: 1024px) {
  .funnel.reveal-screen {
    --reveal-aside: clamp(280px, 26vw, 360px);
    --reveal-gap: 64px;
    /* Поле шире мобильного: на 1024 px колонка иначе упирается в края экрана. */
    --funnel-gutter: clamp(28px, 3vw, 48px);

    display: flex;
    flex-direction: column;
    max-width: 1040px;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Текст идёт обычной колонкой по левому полю, колода вынута из потока
     в правую полосу. Не сетка из двух колонок: карта выше текста, и в
     сетке её высота растянула бы строки — текст расползся бы пустотами.
     Композиция стоит по центру экрана, а не липнет к шапке: под ней
     пусто — это последний шаг, дальше листать нечего. */
  .reveal-page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    flex: 1 1 auto;
    padding-right: calc(var(--reveal-aside) + var(--reveal-gap));
    text-align: left;
  }

  .reveal-title { margin: 0; max-width: 12em; }
  .reveal-lede  { margin: 14px 0 0; max-width: 30em; }
  .reveal-now   { margin-top: 28px; }
  .reveal-dots  { justify-content: flex-start; margin-top: 22px; }
  .reveal-actions { margin-top: 28px; }
  .reveal-cta     { margin-top: 28px; }

  .reveal-counter { font-size: var(--type-body-large-size); }
  .reveal-position { margin-top: 6px; }

  /* Колода с подписью — правая полоса во всю высоту экрана, карта по
     центру: она якорь экрана, а не строка в потоке. */
  .reveal-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--reveal-aside);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  /* Высота колоды с усадкой: на низком экране карта уменьшается, а не
     вылезает за полосу. */
  .reveal-stage {
    flex: 0 1 clamp(360px, 56vh, 500px);
    height: auto;
    min-height: 240px;
    margin-top: 0;
  }
  .reveal-card-name { margin-top: 18px; }

  /* Кнопка по содержимому: во всю колонку — мобильный приём (ср. .funnel-actions). */
  .reveal-actions .funnel-cta,
  .reveal-cta .funnel-cta {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 300px;
    padding: 0 40px;
    font-size: var(--type-body-large-size);
  }
  .reveal-tap-hint,
  .reveal-auto { margin-left: 0; }
  .reveal-auto { display: block; }
  .reveal-note,
  .reveal-generating { max-width: 34em; }
}