/* screens.css — дополнения по экранам.
   Фундамент (T01) сюда почти ничего не кладёт: экраны появляются в тасках
   02–07, каждый дописывает только свой блок и только через токены tokens.css.
   Порядок блоков — порядок потока: hero, looks, question, interlude,
   cases, result, offer, try-on. */

/* ── Экран вопроса ─────────────────────────────────────────────────
   Колонка: навигационный ряд → полоса → вопрос → подсказка → карточки.
   Ритм из DESIGN.md: 8px внутри группы, 12–18px между группами,
   18px под полосой прогресса. Действие — только у множественного
   вопроса: одиночный уходит сам. */

.question > .progress {
  margin-top: var(--space-md);
}

.question__title {
  margin-top: var(--space-lg);
}

.question__help {
  margin-top: var(--space-sm);
  color: var(--field-text-muted);
}

.question__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Вопросы с фото: миниатюра кадрирована 4:5, как и все снимки образов. */
.question--photo .option-card__thumb {
  height: auto;
  aspect-ratio: 4 / 5;
}

/* «Начать заново» видно только на продолженном прохождении. Призрачная
   кнопка: тише всего на экране, но с полноценной целью нажатия. Общий вид —
   `.restart-link` (используется здесь и на герое); отличается только отступ
   сверху, он вынесен модификатором `--question`/`--hero`. */
.restart-link {
  align-self: flex-start;
  min-height: var(--tap-min);
  padding: var(--space-sm) 0;
  border: 0;
  background: none;
  color: var(--field-text-muted);
  font-family: var(--font-text);
  font-size: var(--type-sub-size);
  line-height: var(--type-sub-line);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion-surface);
}

@media (hover: hover) and (pointer: fine) {
  :where(body.pointer-live) .restart-link:hover {
    color: var(--field-text);
  }
}

.restart-link--question {
  margin-top: var(--space-xl);
}

/* ── Первый экран ──────────────────────────────────────────────────
   Композиция по образцу https://donskih.com/make-up (мобильная версия,
   замеры — тикет 02): кремовый верх с заголовком → оксбладовая карточка
   во всю ширину → вырезанная фигура выходит за верхний ВЕРХНИЙ край
   карточки — голова и волосы на кремовом, тело внутри карточки. Внутри
   карточки снизу — наш призыв и белая кнопка-пилюля. Берём композицию, не их
   контент: своя типографика (Oswald капсом, слово в лаке), свой призыв,
   без цен и «доступа через приложение» (DESIGN.md → Signature devices,
   PRODUCT.md). Цвет карточки и её скругление — токены, не их #930F1E. */

/* Кнопка теперь обычная, внутри карточки, а не в липкой зоне понизу
   экрана — этот экран её не резервирует. */
.hero {
  padding-bottom: var(--space-xl);
}

.hero__title {
  margin: 0;
}

.hero__title-line {
  display: block;
}

.hero__promise {
  margin: var(--space-lg) 0 0;
  color: var(--field-text);
}

/* Те же четыре слова, что раньше стояли выносками на кисти, — настоящим текстом. */
.hero__parts {
  margin: var(--space-md) 0 0;
  color: var(--field-text-muted);
}

/* Та же призрачная кнопка, что на экране вопроса (`.restart-link` выше в
   этом файле) — здесь только отступ сверху, он меньше, чем у вопроса.
   Живёт в кремовом вступлении, не в карточке: раньше её держали перед
   фигурой из-за липкой зоны действия понизу экрана — той зоны здесь больше
   нет (кнопка теперь обычная, внутри карточки), но место не изменилось —
   так восстановление прохождения остаётся первым действием на экране. */
.restart-link--hero {
  margin-top: var(--space-lg);
}

/* Сцена: карточка и фигура делят одну область — фигура поверх карточки,
   с бо́льшей высотой, поэтому её верх выступает над карточкой на кремовое
   поле. `--hero-figure-h`/`--hero-card-h` (tokens.css) держат высоты
   пропорциональными на любой ширине — не два независимых размера, которые
   на какой-то ширине разъедутся. `.bleed`: карточка идёт во всю ширину
   экрана, как и другие полноширинные элементы системы (DESIGN.md → Layout). */
.hero__stage {
  position: relative;
  height: var(--hero-figure-h);
  /* Только верхнее поле: короткая запись `margin` обнуляла бы боковые
     отрицательные поля из `.bleed` (base.css), и полноширинная карточка
     уезжала бы за правый край экрана ровно на величину поля колонки. */
  margin-top: var(--space-2xl);
}

/* Три слоя друг на друге в порядке рисования (все `position: absolute`
   внутри `.hero__stage`, без z-index — позже в DOM значит выше): сперва
   оксбладовый прямоугольник, поверх него фигура (тело перекрывает карточку,
   голова выходит над ней на кремовое), и сверху текст с кнопкой — иначе
   подол платья на кадре, доходящий почти до низа карточки, оказался бы
   выше кнопки и перекрыл её. Три слоя, а не один `<div>` с содержимым:
   иначе фигуру некуда вставить между фоном карточки и её текстом. */
.hero__card {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--hero-card-h);
  border-radius: var(--radius-xl);
  background: var(--field-bg);
}

/* Фигура: центр по ширине сцены, низ вровень с низом карточки (замер
   эталона: 681.4px у обоих — не совпадение, а как задумана композиция),
   верх — там, где кончается её собственная высота, то есть над карточкой.
   Без рамки, без тени: альфа-канал уже несёт силуэт. `pointer-events: none`
   — иначе прозрачные поля кадра над кнопкой перехватывали бы клик по ней. */
.hero__figure {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hero__cta {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--hero-card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-xl) var(--space-xl);
  text-align: center;
}

.hero__cta-copy {
  margin: 0 0 var(--space-lg);
  color: var(--field-text);
}

/* Кнопка внутри карточки — обычная (не липкая зона понизу экрана: та
   существует ради экранов без своего места для кнопки, а здесь оно есть,
   в самой карточке) и единственная громкая кнопка на этом экране. Форма —
   пилюля, как в эталоне; всё остальное — тот же `.btn-primary`, что и
   везде в системе, включая инверсию цвета на оксбладовом поле. */
.hero__cta-button {
  border-radius: var(--radius-pill);
}

/* Без hover-масштаба, который был здесь раньше (DESIGN.md → Motion, 1.02
   за 700мс): `.hero__figure` теперь `pointer-events: none` (см. выше) —
   клик должен доставаться кнопке под фигурой, а не самой картинке, и
   заодно она не может ловить наведение для :hover. */
.hero__photo {
  width: auto;
  height: var(--hero-figure-h);
  max-width: 100%;
}

/* ── Экран выбора образа ───────────────────────────────────────────
   Это вопрос 1 из 18: нав-ряд, полоса прогресса, заголовок, подсказка,
   карточки и восстановление рисует общий рендерер question.js (у одного
   вопроса — один рендерер, `.question`/`.question__*` из его блока выше).
   Здесь — только то, что принадлежит этому экрану: приём «torn strip»,
   вставленный между подсказкой и карточками. Фотография проступает
   вертикальной полосой в `--strip-width` (42%) ширины колонки между
   панелью с текстом и узкой панелью у правого края — как будто страницу
   держат открытой. Кадр лежит под всей плашкой во всю её ширину, а
   панели его закрывают. */

.looks__strip {
  position: relative;
  display: grid;
  /* Полоса остаётся вертикальной и там, где текста в панели мало:
     половина колонки — нижняя граница её высоты. */
  min-height: calc(var(--column) / 2);
  /* Поля колонки внутри плашки: колонки сетки считаются от ширины
     колонки, а не от полного вылета, — полоса ровно 42% колонки. */
  grid-template-columns: 1fr var(--strip-width) var(--space-2xl);
  margin-top: var(--space-lg);
  margin-inline: var(--bleed);
  padding-inline: var(--gutter);
  overflow: hidden;
}

.looks__strip-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  /* Класс общий с прежним приёмом «torn strip» на экране выбора образа
     (см. `looks.js` — там его больше нет, торн-полосу сняли раньше, ещё
     до вырезанных фигур этого таска). Сейчас его использует только
     `result.js` для фото выбранного образа; кроп по вертикали — 20%
     сверху, под лица образов в этой галерее. */
  object-position: 45% 20%;
}

/* Панели непрозрачны и дотягиваются до краёв экрана — между ними и
   остаётся полоса фотографии. */
.looks__panel {
  position: relative;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  margin-left: var(--bleed);
  padding: var(--space-xl) var(--space-base) var(--space-xl) var(--gutter);
  background: var(--field-bg);
}

.looks__edge {
  position: relative;
  grid-column: 3;
  margin-right: var(--bleed);
  background: var(--field-bg);
}

.looks__note {
  margin: 0;
  color: var(--field-text-muted);
}

/* Обёртка вокруг каждой карточки образа (`screens/looks.js`): карточка
   выбора и кнопка-лупа — соседние элементы внутри неё, а не вложенные
   друг в друга (`<button>` внутри `<button>` — невалидный HTML), поэтому
   клик по лупе никогда не всплывает в обработчик выбора. Сама обёртка —
   обычный блочный `<div>`, без своих отступов и рамки: она в точности
   повторяет прямоугольник `.option-card` внутри, только даёт лупе точку
   отсчёта для абсолютного позиционирования. */
.look-card {
  position: relative;
}

/* Лупа стоит на нижнем правом углу миниатюры — `--look-card-zoom-top` и
   `--look-card-zoom-left` (tokens.css) выводят его из паддинга карточки
   и размера миниатюры, поэтому угол совпадает и на узкой ширине, где
   миниатюра меньше (`--thumb-size-narrow`). Плашка тёмная и непрозрачная
   независимо от текущего поля — она лежит на фотографии произвольной
   яркости, а не на грунте экрана: тот же приём читаемости, что и у
   `.panel-frosted`/`--panel-frosted-bg-fallback` (components.css). */
.look-card__zoom {
  position: absolute;
  top: var(--look-card-zoom-top);
  left: var(--look-card-zoom-left);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--panel-frosted-bg-fallback);
  color: var(--color-text-on-oxblood);
  transition: background-color var(--motion-surface), transform var(--motion-press);
}

@media (hover: hover) and (pointer: fine) {
  :where(body.pointer-live) .look-card__zoom:hover {
    background: var(--color-oxblood);
  }
}

.look-card__zoom:active {
  transform: scale(var(--motion-press-scale));
}

.look-card__zoom-icon {
  width: var(--space-lg);
  height: var(--space-lg);
}

/* ── Вставка между этапами ───────────────────────────────────────
   Оксбладовое поле во всю ширину: сверху фигура без фона, своя для
   каждого этапа, ниже текст на сплошном поле — не поверх фигуры, лицо
   всегда видно целиком. Между блоками 34px (DESIGN.md, «Rhythm»). Сами
   штрих и обводка живут в components.css: рисуются 620 мс, обводка
   на 180 мс позже, при отключённой анимации — нарисованы сразу. */

/* Как у героя: липкой зоны понизу экрана здесь нет — кнопка живёт внутри
   плашки, — поэтому нижний отступ обычный, а не под высоту той зоны
   (`.screen` в base.css резервирует её всем экранам). */
.interlude {
  padding-bottom: var(--space-xl);
  /* Когда остаток высоты упирается в потолок сцены (высокий экран,
     короткая поддержка), лишнее уходит в зазор над сценой, а не под неё:
     плашка всегда стоит на низу экрана, как на первом. */
  justify-content: space-between;
}

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

   Высота — по остатку экрана, не по ширине: исходный кадр
   вертикальный и узкий (силуэт в рост), см. `.hero__figure` в этом же
   файле для того же приёма. На обычных и высоких экранах она вольна занимать заметную
   долю вьюпорта (30dvh) — под текстом всегда остаётся много места, и
   зазоры вокруг текста держат общий ритм DESIGN.md (34px между блоками).
   Низкие экраны (`@media (max-height: 720px)` ниже) — отдельный расчёт:
   там той же доле высоты и тем же зазорам не хватает места, чтобы под
   самым длинным из четырёх абзацев (fallback этапа «Техника», 5 строк)
   осталась зона действия, а не обрезанный текст под её градиентом —
   обрезка и была причиной этой правки (см. CLAUDE.md → «Грабли»). Общее
   правило на все высоты не годится: то, что чинит 320×568, на 768×1024
   оставляет от фигуры едва заметный силуэт в море пустого поля — поэтому
   сниженные значения живут только внутри медиа-запроса, а не в общем
   правиле. Если на ещё более длинном будущем тексте на низком экране
   всё же не хватит — прокрутка не баг: `.screen`-паддинг снизу
   (`base.css`) уже держит нужный отступ, так что после неё текст не
   остаётся под кнопкой ни на одной ширине. */
/* Сцена забирает весь остаток высоты экрана под текстом (`flex: 1`), а не
   держит свой рост: длина поддержки гуляет от двух строк до пяти, и при
   фиксированной высоте между текстом и плашкой оставалась дыра в треть
   экрана на коротком тексте. Границы остатка — двумя токенами: ниже
   минимума фигура перестаёт читаться, выше потолка (планшет, высокий
   экран) разрастается на весь экран.

   Только верхнее поле, не короткая запись `margin`: она обнулила бы
   боковые отрицательные поля из `.bleed` (см. `.hero__stage` выше). */
.interlude__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--interlude-figure-h-min);
  max-height: var(--interlude-figure-h-max);
  margin-top: var(--space-2xl);
}

.interlude__card {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--hero-card-ratio) * 100%);
  border-radius: var(--radius-xl);
  background: var(--field-bg);
}

/* `pointer-events: none` — прозрачные поля кадра лежат поверх кнопки,
   и без этого они перехватывали бы клик по ней (та же причина, что у
   `.hero__figure`). */
.interlude__figure {
  position: absolute;
  /* Все четыре стороны, а не только низ: рост фигуры задан в процентах
     от сцены, а процент от родителя высотой `auto` не разрешается. */
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.interlude__photo {
  width: auto;
  height: 100%;
  max-width: 100%;
}

.interlude__cta {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--hero-card-ratio) * 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--space-xl) var(--space-xl);
}

.interlude__cta-button {
  border-radius: var(--radius-pill);
}

.interlude__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Низкие экраны: жмётся только текст. Рост сцены не трогаем — она берёт
   остаток высоты сама, а границы остатка заданы в долях вьюпорта. */
@media (max-height: 720px) {
  .interlude__text {
    gap: var(--space-md);
  }

  .interlude__stage {
    margin-top: var(--space-lg);
  }
}

.interlude__index,
.interlude__insight,
.interlude__body {
  margin: 0;
}

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

/* Каждая пометка получает свою строку: один SVG-путь, растянутый на
   многострочную фразу, перестаёт читаться как рукотворный штрих. Ширина
   по содержимому — чтобы штрих кончался там же, где кончается фраза.
   Кегль свой (`--type-insight-size`), мельче вопроса: обводке нужен
   зазор до букв. Он один на обе строки — зачёркнутую и обведённую.
   Зазор между строками меньше, чем между блоками текста, — иначе две
   половины одной мысли рассыпались бы на два отдельных утверждения. */
.interlude__insight {
  font-size: var(--type-insight-size);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-wrap: break-word;
}

.interlude__insight .marker-mark {
  display: block;
  width: fit-content;
  max-width: 100%;
}

/* ── Кейсы учениц ────────────────────────────────────────────────
   Чернильное поле. Каждый кейс — карточка с 1px границей: пара «до/после»
   4:5 с видимыми подписями, имя, цитата и результат — там, где он есть. */

.cases__eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--field-text-muted);
}

.cases__title {
  margin: 0 0 var(--space-md);
}

.cases__lead {
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
  color: var(--field-text-muted);
}

.cases__hint {
  margin: 0 0 var(--space-base);
  line-height: 1.3;
  color: var(--field-text-muted);
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.case {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-base);
  border: var(--hairline) solid var(--field-line);
  border-radius: var(--radius-md);
  background: var(--field-surface);
}

.case__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

/* Остальные снимки кейса и галерея участниц: колонки набираются по ширине,
   поэтому семь работ не превращаются в семь полос на узком экране. */
.case__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-sm);
}

.case__shot {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}

.case__frame {
  overflow: hidden;
  border: var(--hairline) solid var(--field-line);
  border-radius: var(--radius-sm);
}

.case__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

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

.case__name {
  margin: var(--space-sm) 0 0;
}

.case__count,
.case__outcome,
.case__extra,
.case__quote-line {
  margin: 0;
}

/* Цитата отбивается линейкой, а не кавычками: текст не трогаем вовсе. */
.case__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding-left: var(--space-md);
  border-left: var(--stroke) solid var(--field-line-strong);
}

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

/* Редакционная сноска: там, где исходная фраза оборвана, это видно. */
.case__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--field-line);
  color: var(--field-text-muted);
}

.case__note-label {
  color: var(--field-text-muted);
}
/* ── Экран результата ────────────────────────────────────────────
   Костяное поле: та же грамматика компонентов, что и на остальных
   экранах, — меняются только грунт, текст и границы (DESIGN.md,
   «The result screen switches to the bone field»). Торн-полоса в шапке —
   `.looks__strip` / `.looks__panel` / `.looks__edge` из блока «Экран
   выбора образа» выше: тот же приём на двух экранах, а не двойник под
   новым именем (DESIGN.md, «Used for the look-selection screen and the
   result hero»). Здесь — только то, что у результата своё: подводка под
   заголовком, до трёх техник большими номерами и косметичка рядами. */

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

.result__pitch {
  margin-top: var(--space-sm);
}

.result__meta {
  margin-top: var(--space-sm);
  color: var(--field-text-muted);
}

.result__gaps {
  margin-top: var(--space-2xl);
}

.result__gaps-note {
  color: var(--field-text-muted);
}

.result__gaps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

.result__gap {
  display: flex;
  align-items: baseline;
  gap: var(--space-base);
}

/* Большой номер — часть диагностики, не декоративный счётчик: `<ol>`
   уже объявляет порядковое место каждого пункта голосом, поэтому сама
   цифра `aria-hidden`. */
.result__gap-index {
  flex: none;
  min-width: 1.6em;
  color: var(--field-line-strong);
}

.result__gap-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.result__kit {
  margin-top: var(--space-2xl);
}

.result__kit-title {
  margin-bottom: var(--space-sm);
}

.result__kit-status {
  color: var(--field-text-muted);
}

.result__kit-group + .result__kit-group {
  margin-top: var(--space-xl);
}

.result__kit-stage {
  color: var(--field-text-muted);
  padding-bottom: var(--space-xs);
  border-bottom: var(--hairline) solid var(--field-line);
}

/* Ряды каталога — просто строки, не ссылки: наружные ссылки уехали в
   Telegram (см. `screens/result.js` → `productRow`). Вместе с ними ушли
   наведение с подъёмом ряда и сдвиг текста на 7px из DESIGN.md — они
   обещали переход, которого больше нет. Осталась разлиновка: список из
   двух-трёх десятков позиций читается по строкам, а не сплошняком. */
.result__kit-row {
  padding: var(--space-sm) 0;
  border-bottom: var(--hairline) solid var(--field-line);
}

.result__kit-row:last-child {
  border-bottom: 0;
}

.result__kit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Счёт позиций — та самая причина уйти за списком в Telegram. */
.result__kit-count {
  margin: 0 0 var(--space-base);
  color: var(--field-text-muted);
}

.result__kit-brand {
  color: var(--field-text-muted);
}

.result__kit-shade {
  color: var(--field-text-muted);
}

.result__kit-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  align-items: flex-start;
}

.result__kit-error-text {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--field-text);
}

.result__kit-error-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-error);
}

.result__kit-error .btn-primary {
  align-self: stretch;
}


/* Примерка перед косметичкой. Оба изображения на одном полотне. */
.tryon { display: flex; flex-direction: column; gap: var(--space-lg); padding-bottom: var(--space-2xl); }
.tryon__stage { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--field-raise); }
.tryon__preview { display: block; width: 100%; height: var(--tryon-height); object-fit: contain; }
.tryon__controls { display: flex; flex-direction: column; gap: var(--space-md); }
.tryon__file { position: absolute; width: var(--hairline); height: var(--hairline); opacity: 0; }
.tryon__upload { display: flex; justify-content: center; align-items: center; min-height: var(--tap-min); padding: var(--space-md); border: var(--hairline) solid var(--field-line-strong); border-radius: var(--radius-pill); cursor: pointer; }
.tryon__file:focus-visible + .tryon__upload { outline: var(--focus-width) solid var(--field-focus); outline-offset: var(--focus-offset); }
.tryon__file:disabled + .tryon__upload { opacity: var(--tryon-disabled); cursor: default; }
.tryon__consent { display: flex; align-items: flex-start; gap: var(--space-md); padding-block: var(--space-sm); }
.tryon__consent input { flex-shrink: 0; width: var(--checkbox-size); height: var(--checkbox-size); accent-color: var(--color-oxblood); }
.tryon__status:empty { display: none; }
.tryon__skip { background: transparent; color: var(--field-text); box-shadow: none; border: var(--hairline) solid var(--field-line-strong); }
.tryon__compare { position: relative; height: var(--tryon-height); overflow: hidden; }
.tryon__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.tryon__before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.tryon__labels { position: absolute; inset: var(--space-base) var(--space-base) auto; display: flex; justify-content: space-between; pointer-events: none; }
.tryon__labels span { background: var(--lightbox-control-bg); color: var(--lightbox-control-fg); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); }
.tryon__divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: var(--stroke); background: var(--color-bone-surface); transform: translateX(-50%); pointer-events: none; }
.tryon__handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-pill); background: var(--color-bone-surface); color: var(--color-oxblood); box-shadow: var(--tryon-handle-shadow); }
.tryon__handle svg { width: var(--space-xl); height: var(--space-xl); }
.tryon__range { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.tryon__compare:has(.tryon__range:focus-visible) { outline: var(--focus-width) solid var(--field-focus); outline-offset: calc(-1 * var(--focus-width)); }

.tryon__canvas { position: absolute; inset: 0; }
.tryon__canvas .tryon__image { object-fit: cover; }
.tryon__waiting { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-md); padding: var(--space-xl); color: var(--color-text-on-oxblood); background: var(--tryon-overlay); text-align: center; overflow-y: auto; }
.tryon__waiting-insight { min-height: var(--tryon-insight-height); display: flex; flex-direction: column; gap: var(--space-md); justify-content: center; }
.tryon__spinner { width: var(--space-2xl); height: var(--space-2xl); flex-shrink: 0; border: var(--stroke) solid var(--color-text-on-oxblood-muted); border-top-color: var(--color-text-on-oxblood); border-radius: var(--radius-pill); animation: tryon-spin var(--tryon-spinner-duration) linear infinite; }
@keyframes tryon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tryon__spinner { animation: none; } }

.tryon__adjust { padding-block: var(--space-sm); }
.tryon__adjust summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; text-decoration: underline; }
.tryon__adjust-control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-base); min-height: var(--tap-min); }
.tryon__adjust-control input { width: 55%; accent-color: var(--color-oxblood); }

.tryon__controls[hidden] { display: none; }
.tryon__waiting .t-sub { color: var(--color-text-on-oxblood-muted); }
.tryon__waiting { justify-content: safe center; }

/* Компактная косметичка и персональный старт. */
.result__kit-group + .result__kit-group { margin-top: 0; }
.result__kit-stage { cursor: pointer; padding-block: var(--space-base); min-height: var(--tap-min); margin: 0; }
.result__kit-group { border-bottom: var(--hairline) solid var(--field-line); }
.result__kit-link { display: inline-block; padding-block: var(--space-md); min-height: var(--tap-min); color: var(--field-text); text-underline-offset: var(--space-xs); }
.offer { padding-bottom: var(--space-3xl); }
.checkout { width: calc(100% - var(--gutter) * 2); max-width: var(--column); max-height: calc(100svh - var(--gutter) * 2); margin: auto; padding: var(--space-xl); border: 0; border-radius: var(--radius-xl); background: var(--field-bg); color: var(--field-text); overflow-y: auto; overscroll-behavior: contain; }
.checkout::backdrop { background: var(--tryon-overlay); }
.checkout__close { display: block; margin-left: auto; padding: var(--space-sm); min-height: var(--tap-min); background: transparent; border: 0; color: inherit; cursor: pointer; }
.checkout__form { display: grid; gap: var(--space-base); }
.checkout__form p { margin: 0; }
.checkout__email { display: block; width: 100%; margin-top: var(--space-sm); padding: var(--space-md); min-height: var(--tap-min); font: inherit; font-size: var(--space-base); border: var(--hairline) solid var(--field-line-strong); border-radius: var(--radius-sm); background: var(--field-surface); color: var(--field-text); }
.checkout__cards { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-base); }
.checkout__choice { display: flex; align-items: center; min-height: var(--tap-min); gap: var(--space-sm); }
.checkout__consent { display: flex; align-items: flex-start; gap: var(--space-md); }
.checkout__consent input { flex-shrink: 0; width: var(--checkbox-size); height: var(--checkbox-size); }
.checkout a { color: inherit; text-decoration: underline; }
.checkout .t-sub { color: var(--field-text-muted); }
.checkout__status:empty { display: none; }
body:has(.checkout[open]) { overflow: hidden; }

/* Light app presentation, adapted from donskih.com. */
.text-action {
  appearance: none; border: 0; background: none; color: var(--field-text);
  padding: var(--space-sm) 0; min-height: var(--tap-min); font: inherit;
  font-size: var(--type-sub-size); text-decoration: underline;
  text-underline-offset: var(--space-xs); cursor: pointer; width: fit-content;
}
.text-action:hover { color: var(--color-lacquer); }
.text-action:disabled { color: var(--field-text-muted); cursor: default; text-decoration: none; }
.result__hero { display: flex; flex-direction: column; gap: var(--space-xl); }
.result__heading { display: grid; gap: var(--space-sm); }
.result__portrait { display: block; width: 100%; height: auto; max-height: var(--result-portrait-height); object-fit: contain; object-position: center; }
.result__save {
  display: flex; align-items: center; gap: var(--space-md); width: 100%;
  margin-top: var(--space-xl); padding: var(--space-base); min-height: var(--tap-min);
  border: var(--hairline) solid var(--field-line); border-radius: var(--radius-md);
  background: var(--field-surface); color: var(--color-oxblood);
  font: inherit; text-align: left; cursor: pointer;
}
.result__save svg { width: var(--space-xl); height: var(--space-xl); flex-shrink: 0; }
.result__save-copy { display: grid; gap: var(--space-xs); }
.result__save-label { font-size: var(--type-body-size); font-weight: var(--type-title-weight); line-height: var(--type-title-line); }
.result__save-hint { font-size: var(--type-sub-size); line-height: var(--type-body-line); color: var(--field-text-muted); }
@media (hover: hover) and (pointer: fine) {
  .result__save:hover { background: var(--color-bone-hover); border-color: var(--field-line-strong); }
}
.result__save:disabled { opacity: var(--disabled-opacity, .6); cursor: wait; }
.result__save + .result__kit-status:not(:empty) { margin-top: var(--space-sm); }
.result__kit-status:empty { display: none; }
.offer { max-width: var(--offer-width); }
.offer__intro { margin-block: var(--space-xl) var(--space-3xl); max-width: var(--offer-copy-width); }
.offer__title { margin: 0; font-size: var(--offer-heading-size); line-height: 1.08; text-wrap: balance; }
.offer__title .accent { display: block; }
.offer__lead { margin-block: var(--space-lg) var(--space-xl); max-width: var(--offer-copy-width); }
.offer__intro .btn-primary { max-width: var(--column); box-shadow: none; }
.offer__section-title { font-family: var(--font-display); font-size: var(--type-question-size); font-weight: var(--type-question-weight); line-height: var(--type-question-line); margin: 0; text-wrap: balance; }
.offer__body { margin-top: var(--space-base); color: var(--field-text-muted); }
.offer__inside { display: grid; gap: var(--space-2xl); align-items: center; }
.offer__inside-copy { grid-row: 2; }
.offer__demo { grid-row: 1; width: var(--offer-video-width); max-width: 100%; justify-self: center; }
.offer__video { aspect-ratio: 300 / 637; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-card); }
.offer__video-play { position: relative; display: block; padding: 0; border: 0; width: 100%; height: 100%; background: var(--color-card); cursor: pointer; }
.offer__video-play img { width: 100%; height: 100%; object-fit: contain; }
.offer__video-label { position: absolute; bottom: var(--space-xl); left: var(--space-base); right: var(--space-base); padding: var(--space-base) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-lacquer); color: var(--color-text-on-oxblood); font-family: var(--font-text); font-size: var(--type-sub-size); font-weight: 600; }
.offer__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.offer__video-link { display: block; text-align: center; color: var(--field-text-muted); padding-block: var(--space-md); text-underline-offset: var(--space-xs); }
.offer__features { margin: var(--space-xl) 0 0; }
.offer__features > div { border-top: var(--hairline) solid var(--field-line); padding-block: var(--space-lg); }
.offer__features dd { margin: var(--space-sm) 0 0; color: var(--field-text-muted); }
.offer__practice, .offer__proof, .offer__plans { margin-top: var(--space-4xl); }
.offer__practice { max-width: var(--offer-copy-width); }
.offer__personal { margin-top: var(--space-lg); border-block: var(--hairline) solid var(--field-line); }
.offer__personal summary, .offer__other-plans summary, .offer__quote summary { padding-block: var(--space-base); min-height: var(--tap-min); cursor: pointer; }
.offer__steps { margin: 0 0 var(--space-xl); padding-left: var(--space-lg); }
.offer__steps li + li { margin-top: var(--space-xl); }
.offer__steps p { margin-top: var(--space-sm); color: var(--field-text-muted); }
.offer__stories { position: relative; display: flex; gap: var(--space-lg); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-bone-line) transparent; margin-top: var(--space-xl); padding-bottom: var(--space-base); }
.offer__proof { max-width: var(--offer-copy-width); width: 100%; align-self: center; }
.offer__story { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.offer__comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-base); }
.offer__comparison figure { margin: 0; min-width: 0; }
.offer__comparison img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; display: block; border-radius: var(--radius-sm); }
.offer__comparison figcaption { padding-top: var(--space-sm); color: var(--field-text-muted); }
.offer__story-summary { margin-top: var(--space-sm); }
.offer__quote blockquote { margin: 0 0 var(--space-base); padding: 0; color: var(--field-text-muted); white-space: pre-line; }
.offer__story-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-base); }
.offer__story-controls span { color: var(--field-text-muted); font-variant-numeric: tabular-nums; }
.offer__plans { scroll-margin-top: calc(var(--header-h) + var(--space-xl)); max-width: var(--offer-copy-width); width: 100%; align-self: center; }
.offer__plans-title { font-size: var(--type-question-size); margin-bottom: var(--space-xl); }
.offer__plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.offer__plan { display: flex; flex-direction: column; gap: var(--space-base); padding: var(--space-xl); background: var(--color-bone-surface); border-radius: var(--radius-lg); }
.offer__plan .btn-primary { box-shadow: none; }
.offer__plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.offer__plan-price { margin: 0; font-variant-numeric: tabular-nums; }
.offer__plan-period, .offer__plan-note { color: var(--field-text-muted); }
.offer__plan-note { margin: 0; }
.offer__inclusions { padding-left: var(--space-lg); margin: 0; }
.offer__inclusions li + li { margin-top: var(--space-sm); }
.offer__other-plans { margin-top: var(--space-xl); }
.offer__handoff { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--hairline) solid var(--field-line); }
.offer__support { display: block; width: fit-content; color: var(--field-text-muted); padding-block: var(--space-md); text-underline-offset: var(--space-xs); }
@media (min-width: 700px) {
  .offer__intro { margin-block: var(--space-2xl) var(--space-4xl); }
  .offer__inside { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .offer__inside-copy { grid-column: 2; grid-row: 1; }
  .offer__demo { grid-column: 1; grid-row: 1; }

}

/* The exported website uses its own viewport, fonts, spacing and scroll animations. */
body:has(.offer--site) { overflow: hidden; }
body:has(.offer--site) > .brand-header { display: none; }
.screen.offer--site { position: relative; display: block; max-width: none; width: 100%; height: 100dvh; min-height: 0; padding: 0; margin: 0; animation: none; }
.offer__site-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--color-bone-surface); }
.offer__site-loading { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; padding: var(--space-xl); gap: var(--space-base); background: var(--color-bone-surface); }
.offer__site-loading[hidden] { display: none; }

/* Upload affordance and result gallery use the quiz's existing visual controls. */
.tryon__empty { min-height:var(--tryon-height); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-lg); padding:var(--space-xl); text-align:center; color:var(--field-text-muted); cursor:pointer; }
.tryon__empty > .t-body { max-width:240px; }
.tryon__empty-icon { display:block; width:56px; height:56px; color:var(--field-text-muted); }
.tryon__empty-icon svg { display:block; width:100%; height:100%; }
.result__media { position:relative; align-self:center; max-width:100%; width:fit-content; overflow:hidden; border-radius:var(--radius-lg); }
.result__media .result__portrait { width:auto; max-width:100%; border-radius:var(--radius-lg); }
.result__zoom { top:auto; left:auto; bottom:12px; right:12px; }

/* Each student's two photos share one draggable before/after frame. */
.case-compare { touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; position:relative; width:100%; aspect-ratio:3 / 4; overflow:hidden; border-radius:var(--radius-md); background:var(--field-raise); isolation:isolate; }
.case-compare__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; pointer-events:none; user-select:none; }
.case-compare__image--before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.case-compare__labels { position:absolute; inset:var(--space-md) var(--space-md) auto; display:flex; justify-content:space-between; pointer-events:none; }
.case-compare__labels span { padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm); background:var(--field-surface); color:var(--field-text); }
.case-compare__divider { position:absolute; top:0; bottom:0; left:var(--split); width:2px; transform:translateX(-50%); background:var(--color-bone-surface); pointer-events:none; }
.case-compare__handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--tap-min); height:var(--tap-min); display:grid; place-items:center; border-radius:50%; background:var(--color-bone-surface); color:var(--color-lacquer); box-shadow:0 2px 8px #0003; }
.case-compare__handle svg { width:24px; height:24px; }
.case-compare__range { position:absolute; top:50%; left:var(--split); transform:translate(-50%,-50%); width:56px; height:56px; margin:0; opacity:0; cursor:ew-resize; touch-action:none; -webkit-tap-highlight-color:transparent; }
.case-compare:has(.case-compare__range:focus-visible) { outline:var(--focus-width) solid var(--field-focus); outline-offset:var(--focus-offset); }
.cases .case__name { margin:0; }

/* Measured per-photo placement keeps the head scale and eye line consistent. */
.case-compare__layer { position:absolute; inset:0; overflow:hidden; }
.case-compare__layer--before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.case-compare__layer .case-compare__image--before { clip-path:none; }
.case-compare__image--aligned { inset:auto; height:auto; max-width:none; object-fit:fill; transform-origin:0 0; }

/* Paid try-on and a separate, switchable trial offer. */
@font-face{font-family:'Quiz Manrope';src:url('/app-offer/fonts/payment-manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Quiz Alistair';src:url('/app-offer/fonts/alistair-signature.ttf') format('truetype');font-weight:400;font-display:swap}
.screen.offer-switch{max-width:none;padding:0;margin:0;width:100%}
.tryon__pricing{color:var(--color-oxblood);margin-block:var(--space-sm)}
.tryon__looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);border:0;padding:0;min-width:0;margin:var(--space-sm) 0}
.tryon__looks[hidden]{display:none}
.tryon__looks legend{margin-bottom:var(--space-sm)}
.tryon__look{position:relative;cursor:pointer;min-width:0;padding:var(--space-xs);border:2px solid transparent;border-radius:var(--radius-sm)}
.tryon__look:has(:checked){border-color:var(--color-oxblood)}
.tryon__look img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 25%;border-radius:var(--radius-sm);margin-bottom:var(--space-xs)}
.tryon__look input{position:absolute;top:var(--space-sm);left:var(--space-sm);accent-color:var(--color-oxblood)}
.tryon__look span{display:block;font-size:12px;line-height:1.2}
.commerce-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:var(--space-xl);border:0;border-radius:var(--radius-lg);background:var(--color-card);color:var(--color-text);margin:auto;font-family:'Quiz Manrope',sans-serif;overflow:auto}
.commerce-dialog::backdrop{background:rgba(0,0,0,.5)}
.commerce-dialog h2{margin-block:var(--space-lg) var(--space-sm);font-family:inherit;text-transform:none;letter-spacing:-.02em;font-weight:400}
.commerce-price{font-size:32px;margin-block:var(--space-sm) var(--space-lg)}
.commerce-form{display:grid;gap:var(--space-base)}
.commerce-form input[type=email]{display:block;width:100%;font:inherit;padding:var(--space-base);margin-top:var(--space-sm);border:1px solid var(--color-line);border-radius:var(--radius-sm)}
.commerce-form [hidden]{display:none}
.commerce-consent{display:flex;align-items:flex-start;gap:var(--space-sm);line-height:1.3}
.commerce-consent[hidden]{display:none}
.commerce-consent input{flex:0 0 18px;width:18px;height:18px;accent-color:var(--color-oxblood);margin:2px 0 0}
.screen.trial-offer{font-family:'Quiz Manrope',sans-serif;max-width:600px;margin:auto;padding:var(--space-xl);background:var(--color-card);color:var(--color-text);text-align:center}
.trial-offer p{line-height:1.3}
.trial-offer__eyebrow{font-size:13px;color:var(--color-oxblood);margin:var(--space-xl) 0 var(--space-base)}
.trial-offer__title{font:400 clamp(30px,8.7vw,50px)/.98 'Quiz Manrope',sans-serif;letter-spacing:-.055em;margin:0 0 var(--space-lg);text-transform:none}
.trial-offer__title span,.trial-offer__title em{display:block}
.trial-offer__title em{font:400 clamp(48px,13vw,76px)/.64 'Quiz Alistair',cursive;letter-spacing:0;color:var(--color-oxblood);margin:.14em -.1em .18em}
.trial-offer__intro{font-size:clamp(15px,4vw,19px);max-width:440px;margin:0 auto}
.trial-offer__hero{height:340px;position:relative;margin:var(--space-xl) calc(-1 * var(--space-xl)) 0;overflow:hidden}
.trial-offer__hero::before{content:'';position:absolute;inset:30% 0 0;background:var(--color-oxblood);border-radius:var(--radius-lg)}
.trial-offer__hero img{position:relative;display:block;height:100%;width:100%;object-fit:contain;object-position:50% 100%}
.trial-offer__details{padding-top:var(--space-xl)}
.trial-offer h2{font-size:25px;font-weight:400;line-height:1.1;letter-spacing:-.035em;margin-bottom:var(--space-base)}
.trial-offer__looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-base);margin-top:var(--space-lg)}
.trial-offer__looks figure{margin:0}
.trial-offer__looks img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center 25%;border-radius:var(--radius-sm)}
.trial-offer__looks figcaption{font-size:13px;line-height:1.2;padding-top:var(--space-sm)}
.trial-offer__payment{margin-top:var(--space-2xl);padding-top:var(--space-base);border-top:1px solid var(--color-line)}
.trial-offer .trial-offer__price{font-size:56px;margin:0}
.trial-offer__period{margin-top:var(--space-sm)}
.trial-offer__payment ul{list-style:none;padding:0;margin:var(--space-lg) 0}
.trial-offer__payment li{padding:var(--space-sm);border-bottom:1px solid var(--color-line);font-size:15px}
.trial-offer__payment .commerce-consent{margin-bottom:var(--space-base);text-align:left}
.trial-offer__payment>.t-sub{margin-top:var(--space-base)}
.trial-offer__app-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-base);margin-top:var(--space-lg)}

.trial-offer__jump{margin-top:var(--space-lg);width:100%}
.trial-offer__payment{scroll-margin-top:var(--space-xl)}

/* Try-on payment: compact consent and an accessible corner close control. */
.commerce-dialog{position:fixed;inset:0;overscroll-behavior:contain}
html:has(.commerce-dialog[open]),body:has(.commerce-dialog[open]){overflow-y:hidden}
.commerce-dialog .commerce-consent{text-align:left}
.commerce-dialog__close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;padding:10px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.commerce-dialog__close svg{width:24px;height:24px}
.commerce-dialog__close:focus-visible{outline:2px solid var(--color-oxblood);outline-offset:1px}
.commerce-dialog h2{padding-right:24px}
.commerce-dialog .commerce-consent--tryon{font-size:12px;line-height:1.4;letter-spacing:0}
.commerce-consent__notice{text-decoration:underline;text-underline-offset:3px}

/* Match the original Tilda personal heading and contain horizontal gestures. */
@font-face{font-family:'Quiz Manrope';src:url('/app-offer/fonts/payment-manrope-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Quiz Manrope';src:url('/app-offer/fonts/payment-manrope-medium.ttf') format('truetype');font-weight:500;font-display:swap}
html:has(.trial-offer),body:has(.trial-offer){max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
.screen.trial-offer{display:block;min-width:0;overflow-x:clip;touch-action:pan-y pinch-zoom}
.trial-offer__title{font:500 56px/1 'Quiz Manrope',sans-serif;letter-spacing:-3.4px;margin:40px 0 24px}
.trial-offer__title span:last-child{font-weight:300}
.trial-offer__title em{font:400 64px/.9 'Quiz Alistair',cursive;letter-spacing:0;color:#83191d;position:relative;z-index:1;margin:-22px 0 -16px;-webkit-text-stroke:.8px currentColor}
.trial-offer__stores{display:flex;justify-content:center;align-items:center;gap:16px;margin:12px 0 24px}
.trial-offer__stores a{display:block;min-width:0}
.trial-offer__stores img{display:block;height:40px;width:auto;max-width:100%}
.trial-offer .commerce-consent,.commerce-dialog .commerce-consent{font-size:12px;line-height:1.4}
.commerce-consent a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:1199px){.trial-offer__title{font-size:38px;letter-spacing:-2.3px}.trial-offer__title em{font-size:48px;margin-top:-16px;margin-bottom:-10px;-webkit-text-stroke:.65px currentColor}}

/* Compact return link and tighter spacing above the personal heading. */
.trial-offer > .text-action:first-of-type{display:block;width:fit-content;margin:0;text-align:left;font-size:12px;line-height:1.3;padding:6px 0}
.trial-offer__title{margin-top:18px}

/* Payment waiting remains visible until the confirmed result arrives. */
.payment-status--busy{display:flex;align-items:center;justify-content:center;gap:10px}
.payment-status--busy::before{content:'';display:block;flex:0 0 18px;width:18px;height:18px;border:2px solid var(--color-line);border-top-color:var(--color-oxblood);border-radius:50%;animation:payment-spin .8s linear infinite}
.payment-busy{cursor:wait}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.payment-status--busy::before{animation:none}}
html:has(.trial-offer),body:has(.trial-offer){width:100%;overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
.screen.offer-switch:has(.trial-offer){min-width:0;overflow-x:clip}
.trial-offer__payment{min-width:0;max-width:100%;overflow-wrap:anywhere}
.trial-offer__app-links{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0}
.trial-offer__app-links .btn-primary{min-width:0;max-width:100%;padding:12px 8px;white-space:normal;overflow-wrap:anywhere}

.trial-offer__support{display:block;margin:18px auto 0;font-size:13px;line-height:1.4;max-width:100%;text-align:center}

/* Keep the tariff introduction and name on separate lines on phones. */
.commerce-dialog h2.commerce-dialog__trial-title{padding-right:0}
.commerce-dialog__title-intro{display:block;font-size:clamp(14px,3.9vw,19px);line-height:1.3;letter-spacing:-.02em;white-space:nowrap}
.commerce-dialog__title-name{display:block;margin-top:4px;font-size:25px;line-height:1.2}

/* Reveal before/after as one decoded pair; keep layout stable while loading. */
.case-compare[data-ready="false"] :is(.case-compare__layer,.case-compare__divider,.case-compare__labels){visibility:hidden}
.case-compare__range:disabled{pointer-events:none}
.case-compare__loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--space-lg);text-align:center;color:var(--field-text);font-size:14px}