/* Hyperion — лендинг позиции (A1.1). Собственный слой, подключается только этим
   экраном и только им.

   Что здесь есть и чего нет. Палитры здесь нет, шрифтов нет, длительностей
   движения нет: всё это уже описано продуктом (`tokens.css`), и лендинг берёт
   оттуда те же управляющие токены. Лендинг — не второй дизайн-язык, а
   редакционная раскладка того же материала. Своим у него остаётся то, чего у
   приложения быть не может:

   1) двенадцатиколоночная сетка и межсекционный воздух — у инструмента одна
      колонка меры и плотный ритм;
   2) одна крупная ступень кегля сверх продуктовой шкалы — герой страницы;
   3) инверсия: единственная полноширинная секция всегда противоположна земле
      страницы, и в тёмной теме она светлая, а не наоборот;
   4) ведомость оплаты, липкая полоса действия и появление блоков.

   Инверсия сделана перестановкой тех же ролей: `.lp-invert` переобъявляет
   управляющие токены продукта на противоположную землю, и всё внутри — текст,
   линейки, акцент — наследует их, ничего про инверсию не зная.

   Ни одного inline-стиля: политика CSP пускает стили только с домена
   (`SECURE_CSP.style-src`), поэтому всё, что зависит от данных — высота
   ступени лестницы и номер в каскаде появления, — приходит целым уровнем в
   data-атрибуте, и уровню соответствует готовое правило ниже. */

/* Инверсия ------------------------------------------------------------------
   Земля страницы приходит темой продукта. Противоположную землю нельзя
   получить из управляющих токенов — в них живёт только текущая тема, — поэтому
   она берётся из сырой палитры, единственного места, где описаны обе. */

.landing .lp-invert {
  --bg: var(--palette-dark-bg);
  --surface: var(--palette-dark-surface);
  --surface-2: var(--palette-dark-surface-2);
  --ink: var(--palette-dark-ink);
  --ink-2: var(--palette-dark-ink-2);
  --ink-3: var(--palette-dark-ink-3);
  --line: var(--palette-dark-line);
  --line-strong: var(--palette-dark-line-2);
  --accent: var(--palette-dark-accent);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .landing .lp-invert {
    --bg: var(--palette-light-bg);
    --surface: var(--palette-light-surface);
    --surface-2: var(--palette-light-surface-2);
    --ink: var(--palette-light-ink);
    --ink-2: var(--palette-light-ink-2);
    --ink-3: var(--palette-light-ink-3);
    --line: var(--palette-light-line);
    --line-strong: var(--palette-light-line-2);
    --accent: var(--palette-light-accent);

    color-scheme: light;
  }
}

html[data-theme="dark"] .landing .lp-invert {
  --bg: var(--palette-light-bg);
  --surface: var(--palette-light-surface);
  --surface-2: var(--palette-light-surface-2);
  --ink: var(--palette-light-ink);
  --ink-2: var(--palette-light-ink-2);
  --ink-3: var(--palette-light-ink-3);
  --line: var(--palette-light-line);
  --line-strong: var(--palette-light-line-2);
  --accent: var(--palette-light-accent);

  color-scheme: light;
}

/* Размерности лендинга ------------------------------------------------------
   Всё, чего нет у приложения. Остальное — продуктовые токены как есть. */

.landing {
  /* Седьмой ступени в шкале не появляется: страница набрана шестью — эта и
     пять продуктовых (`--size-6` … `--size-1`). Крупная ступень своя, потому
     что у инструмента такой величины нет и быть не должно: разрыв герой↔тело
     здесь 4.2×, а не 3.06×. */
  --lp-display: clamp(46px, 33px + 3.5vw, 72px);

  /* Сетка: двенадцать колонок, контейнер шире продуктовой меры — контент всё
     равно не занимает все двенадцать. */
  --lp-max: 1200px;
  --lp-gutter: var(--s-6);
  --lp-pad: clamp(20px, 3.4vw, 40px);

  /* Единственный собственный зазор: воздух между секциями. У инструмента он
     40-64px, у редакционной страницы — вдвое больше, и это структура, а не
     украшение. Всё остальное берётся из карты связи продукта. */
  --lp-gap-section: clamp(72px, 8vw, 152px);

  /* Насколько накопительный баланс выходит за колонку на пустое поле. Ровно
     один слом сетки на страницу; там, где поля нет, слома тоже нет. */
  --lp-hang: clamp(0px, calc((100vw - 1240px) / 2), 72px);

  /* Ступень лестницы: высота растёт вместе с суммой. */
  --lp-row-min: 46px;
  --lp-row-unit: 6px;

  --lp-bar-h: 68px;

  /* Полосу прокрутки по горизонтали не заводит ничто: `clip` режет вылеты и,
     в отличие от `hidden`, не делает из страницы контейнер прокрутки — липкие
     элементы внутри продолжают липнуть. */
  overflow-x: clip;
}

/* Страница ------------------------------------------------------------------
   Полноширинная секция без вычислений по `100vw`: крайние дорожки сетки — это
   и есть поля страницы, и «выдох» просто занимает их вместе с контентом. */

.lp {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--lp-pad), 1fr)
    [content-start] minmax(0, var(--lp-max))
    [content-end] minmax(var(--lp-pad), 1fr)
    [full-end];
  row-gap: var(--lp-gap-section);
  padding-block: clamp(48px, 6vw, 96px) 0;
}

.lp > * {
  grid-column: content;
}

.lp > .lp-ladder {
  grid-column: full;
}

/* Сетка секции: двенадцать колонок, и контент не занимает все двенадцать. */
.lp-sect {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lp-gutter);
  row-gap: var(--gap-block);
  align-content: start;
}

/* Роли типографики ---------------------------------------------------------- */

.lp-eyebrow,
.lp-label,
.lp-num-sect,
.lp-stamp,
.lp-step-row__cost,
.lp-step__kind {
  font: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.lp-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}

.lp-hero__title,
.lp-h2,
.lp-h3 {
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

.lp-hero__title {
  font: 680 var(--lp-display) / 1.04 var(--font);
  letter-spacing: -0.022em;
}

.lp-turn {
  display: block;
  color: var(--ink-2);
}

/* Открытый набор: подводка вторичным тоном, ответ чернилами. Тезис героя —
   «здесь за это платят», и на нём держится вся страница ниже: лестница,
   баланс, финал. Ударная половина набирается сильнее подводки, а не слабее.
   У закрытого набора порядок обратный и остаётся авторским: там вторая строка
   не ответ, а тихое повторение первой, и приглушена по делу. */
.lp:not(.lp--closed) .lp-hero__title {
  color: var(--ink-2);
}

.lp:not(.lp--closed) .lp-turn {
  color: var(--ink);
}

.lp-h2 {
  font: var(--t-h1);
  letter-spacing: -0.018em;
}

.lp-h3 {
  display: block;
  font: var(--t-h2);
  letter-spacing: -0.012em;
}

.lp-hero__lead,
.lp-lead {
  font: var(--t-h2);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.004em;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 56ch;
  margin: 0;
}

.lp-body {
  font: var(--t-body);
  text-wrap: pretty;
  max-width: var(--measure-prose);
  margin: 0;
}

.lp-muted {
  color: var(--ink-2);
}

.lp-note {
  font: var(--t-small);
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
}

.lp-num {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.lp strong {
  font-weight: 600;
  color: var(--ink);
}

/* Номер секции у той же левой оси, что и всё остальное. */
.lp-sect__head {
  grid-column: 1 / span 12;
  display: flex;
  flex-direction: column;
  gap: var(--gap-related);
  padding-top: var(--gap-related);
  border-top: 1px solid var(--line-strong);
}

.lp-num-sect {
  color: var(--ink-2);
}

.lp-sect__head > .lp-h2 {
  max-width: 20ch;
}

.lp-sect__head > .lp-lead {
  margin-top: var(--gap-related);
}

/* Действия ------------------------------------------------------------------ */

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-related) var(--lp-gutter);
}

.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: var(--field-h);
  padding: 0 26px;
  background: var(--accent);
  color: var(--on-accent);
  font: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lp-cta > svg {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-reveal) var(--ease-emphasized);
}

.lp-cta:hover {
  background: var(--accent-hover);
}

.lp-cta:hover > svg {
  transform: translateX(4px);
}

.lp-cta:active {
  transform: scale(0.985);
}

.lp-cta--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.lp-cta--quiet:hover {
  background: transparent;
  border-color: var(--ink);
}

.lp-cta--sm {
  min-height: var(--control-h);
  padding: 0 18px;
  font: var(--t-small);
  font-weight: 600;
}

/* 01. Герой ----------------------------------------------------------------- */

.lp-hero__text {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-block);
}

.lp-hero__text > .lp-note {
  margin-top: calc(var(--gap-block) * -1 + var(--gap-related));
}

.lp-doc {
  grid-column: 9 / span 4;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--gap-related);
}

.lp-doc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-gutter);
  padding-bottom: var(--gap-related);
  border-bottom: 1px solid var(--line-strong);
  margin: 0;
}

.lp-stamp {
  color: var(--ink-2);
}

.lp-stamp--open {
  color: var(--accent);
}

.lp-doc__rows {
  margin: 0;
}

.lp-doc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-gutter);
  padding-block: var(--gap-related);
  border-bottom: 1px solid var(--line);
}

.lp-doc__row > dt {
  font: var(--t-small);
  color: var(--ink-2);
  flex: none;
}

.lp-doc__row > dd {
  margin: 0;
  font: var(--t-small);
  text-align: right;
  color: var(--ink);
}

.lp-doc__foot {
  font: var(--t-small);
  color: var(--ink-2);
  margin: 0;
  padding-top: var(--gap-related);
}

/* 02. Работа ---------------------------------------------------------------- */

.lp-work__prose {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--gap-related);
}

.lp-work__facts {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.lp-fact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  padding-top: var(--gap-related);
  border-top: 1px solid var(--line);
}

.lp-fact__value {
  margin: 0;
  font: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* 03. Лестница оплаты — единственный «выдох» --------------------------------- */

.lp-ladder {
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(64px, 8vw, 128px);
}

.lp-ladder__inner {
  width: 100%;
  max-width: calc(var(--lp-max) + var(--lp-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--lp-pad);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lp-gutter);
  row-gap: var(--gap-block);
}

.lp-ladder__rail {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.lp-ladder__rail > .lp-sect__head {
  grid-column: auto;
}

.lp-balance {
  position: sticky;
  top: calc(var(--header-h) + var(--s-10));
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  padding-top: var(--gap-related);
  border-top: 1px solid var(--line-strong);
}

.lp-balance__value {
  margin: 0 0 0 calc(var(--lp-hang) * -1);
  font: 500 var(--lp-display) / 1 var(--font-mono);
  letter-spacing: -0.035em;
  color: var(--accent);
  white-space: nowrap;
}

.lp-balance__unit {
  margin: 0;
  font: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lp-ledger {
  grid-column: 6 / span 7;
}

.lp-ledger__head,
.lp-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 8rem;
  column-gap: var(--lp-gutter);
  align-items: start;
  align-content: start;
}

.lp-ledger__head {
  padding-bottom: var(--gap-inline);
  border-bottom: 1px solid var(--line-strong);
}

.lp-ledger__earned,
.lp-ledger__balance {
  text-align: right;
}

.lp-ledger__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-step {
  position: relative;
  min-height: calc(var(--lp-row-min) + var(--h, 1) * var(--lp-row-unit));
  padding-block: var(--gap-related);
}

.lp-step__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-inline);
  font: var(--t-body);
  color: var(--ink);
}

.lp-step__earned {
  font: var(--t-data);
  text-align: right;
  color: var(--ink);
}

.lp-step__balance {
  font: var(--t-data-sm);
  font-weight: 400;
  text-align: right;
  color: var(--ink-2);
}

/* Линейка ряда — она же величина ступени: волосяная на всю ширину, поверх неё
   акцентный отрезок длиной в долю от самой большой суммы. */
.lp-step__rule {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
}

.lp-step__fill {
  display: block;
  height: 2px;
  margin-top: -1px;
  width: calc(var(--h, 1) / 20 * 100%);
  background: var(--accent);
}

.lp-ledger__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-gutter);
  margin: 0;
  padding-top: var(--gap-related);
}

.lp-ledger__total-value {
  font: var(--t-data);
  font-weight: 600;
  color: var(--ink);
}

.lp-ledger__unit {
  font: var(--t-caption);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

/* Уровни ступени. Данные не умеют писать стиль, а политика CSP не пускает
   inline — поэтому уровень приходит атрибутом, а правило ждёт его здесь. */
.lp-step[data-h="1"] { --h: 1; }
.lp-step[data-h="2"] { --h: 2; }
.lp-step[data-h="3"] { --h: 3; }
.lp-step[data-h="4"] { --h: 4; }
.lp-step[data-h="5"] { --h: 5; }
.lp-step[data-h="6"] { --h: 6; }
.lp-step[data-h="7"] { --h: 7; }
.lp-step[data-h="8"] { --h: 8; }
.lp-step[data-h="9"] { --h: 9; }
.lp-step[data-h="10"] { --h: 10; }
.lp-step[data-h="11"] { --h: 11; }
.lp-step[data-h="12"] { --h: 12; }
.lp-step[data-h="13"] { --h: 13; }
.lp-step[data-h="14"] { --h: 14; }
.lp-step[data-h="15"] { --h: 15; }
.lp-step[data-h="16"] { --h: 16; }
.lp-step[data-h="17"] { --h: 17; }
.lp-step[data-h="18"] { --h: 18; }
.lp-step[data-h="19"] { --h: 19; }
.lp-step[data-h="20"] { --h: 20; }

/* 04. Как это устроено ------------------------------------------------------ */

.lp-steps__list {
  grid-column: 1 / span 12;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-step-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--lp-gutter);
  padding-block: var(--gap-block);
  border-top: 1px solid var(--line);
}

.lp-step-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Порядковый номер шага — в правой колонке, а не у левой оси. Левая ось всей
   страницы отдана номерам секций (§2), и второй ряд чисел на ней читается как
   они же: «05 The finals» внутри секции 04 и следом «05 The English bar»
   означали разное одной и той же цифрой. Здесь номер уходит с оси и меняет
   форму — дробь «шаг из пяти» вместо двузначного `05`, — поэтому спутать его
   с номером секции нечем ни по месту, ни по начертанию. Лицо — то же
   моноширинное, что у сумм ведомости: это счёт по порядку, а не заголовок. */
.lp-step-row__no {
  grid-column: 2;
  grid-row: 1;
  font: var(--t-data-sm);
  text-align: right;
  color: var(--ink);
}

.lp-step-row__body {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.lp-step-row__cost {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: var(--gap-inline);
  text-align: right;
}

/* 05. Планка английского ---------------------------------------------------- */

.lp-english__prose {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--gap-related);
}

.lp-english__prose > .lp-sect__head {
  grid-column: auto;
  margin-bottom: var(--gap-related);
}

/* Заглушка кадра: намеренная, а не сломанная. Тонированный блок в тон бумаги,
   волосяная рамка и подпись, называющая, что здесь будет снято. */
.lp-frame {
  grid-column: 8 / span 5;
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: var(--lp-gutter);
}

.lp-frame--45 {
  aspect-ratio: 4 / 5;
}

/* 06. Кому это не подойдёт -------------------------------------------------- */

.lp-nope__list {
  grid-column: 1 / span 7;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-nope__item {
  padding-block: var(--gap-block);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.lp-nope__item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Реплика стоит у нижнего края списка, а не у верхнего. Две причины, и обе
   держат.

   По смыслу она подводит итог четырём пунктам, а прочитанная до них опережает
   то, к чему относится.

   По композиции у верхнего края она оставляла между собой и списком «что нужно
   иметь» в 07 пустое правое поле в 907px на 1440 и 888px на 1280 — экран без
   малого, через границу секции. Пустота такой длины уже не пауза, а дыра
   (§1.3): оба блока правого поля оказывались брошенными, каждый у своего края.
   У нижнего края разрыв становится 314px и 295px — соразмерным межсекционному
   воздуху, то есть паузой. Пустота над репликой при этом не растёт в провал:
   сверху её держит кадр секции 05, занимающий то же поле, и волосяная линейка
   шапки 06 во всю ширину, а сама она и есть та пустая колонка-поле, на которой
   стоит вся раскладка (§2). Проверено на снимках 1440 и 1280; варианты
   `center` и «поднять список 07» отброшены: первый не привязывает реплику ни к
   чему, второй ломает авторскую пару «список ↔ кнопка» по нижнему краю. */
.lp-nope__aside {
  grid-column: 9 / span 4;
  margin: 0;
  align-self: end;
  font: var(--t-h2);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
  border-left: 2px solid var(--accent);
  padding-left: var(--gap-related);
}

/* 07. Финал ----------------------------------------------------------------- */

.lp-final__lead {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-related);
}

.lp-final__lead > .lp-h2 {
  max-width: 19ch;
  margin-top: var(--gap-tight);
}

.lp-final__lead > .lp-actions {
  margin-top: var(--gap-block);
}

.lp-need {
  grid-column: 10 / span 3;
  align-self: end;
}

.lp-need__list {
  list-style: none;
  margin: var(--gap-related) 0 0;
  padding: 0;
}

.lp-need__list > li {
  font: var(--t-small);
  padding-block: var(--gap-inline);
  border-top: 1px solid var(--line);
  text-wrap: pretty;
}

/* Набор закрыт -------------------------------------------------------------- */

.lp-closed__prose {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--gap-related);
}

.lp-closed .lp-need {
  grid-column: 9 / span 4;
  align-self: start;
}

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

.lp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-related) var(--lp-gutter);
  padding: var(--gap-block) 0 calc(var(--lp-bar-h) + var(--gap-block));
  border-top: 1px solid var(--line-strong);
}

/* Набор закрыт — липкой полосы нет, и место под неё не резервируется. */
.lp--closed .lp-foot {
  padding-bottom: var(--gap-block);
}

.lp-foot__line,
.lp-foot__link {
  margin: 0;
  font: var(--t-small);
  color: var(--ink-2);
}

.lp-foot__link > a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.lp-foot__link > a:hover {
  text-decoration-thickness: 2px;
}

/* Липкая полоса действия ---------------------------------------------------- */

.lp-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: calc(var(--z-overlay) - 1);
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  transform: translateY(100%);
  transition: transform var(--dur-reveal) var(--ease-out);
}

.lp-bar.is-on {
  transform: none;
}

.lp-bar__inner {
  width: 100%;
  max-width: calc(var(--lp-max) + var(--lp-pad) * 2);
  margin-inline: auto;
  padding: var(--gap-related) var(--lp-pad);
  min-height: var(--lp-bar-h);
  display: flex;
  align-items: center;
  gap: var(--lp-gutter);
}

.lp-bar__what {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-tight) var(--gap-related);
  min-width: 0;
}

.lp-bar__role {
  font: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.lp-bar__where {
  font: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lp-bar__sum {
  margin: 0 0 0 auto;
  font: var(--t-small);
  color: var(--ink);
  white-space: nowrap;
}

.lp-bar__sum-note {
  color: var(--ink-2);
}

.lp-bar__inner > .lp-cta {
  margin-left: auto;
  flex: none;
}

.lp-bar__sum + .lp-cta {
  margin-left: 0;
}

/* Виджет поддержки поднимается над полосой: он сквозной и о лендинге не знает. */
.landing .support {
  bottom: calc(var(--lp-bar-h) + var(--gap-related));
}

/* Движение ------------------------------------------------------------------
   Только transform и opacity, длительности и кривые — продуктовые. Появление
   один раз, из 20px и scale(0.985). До инициализации скрипта ничего не
   спрятано: скрипт помечает только то, что на старте лежит ниже окна, поэтому
   без JS страница видна целиком. */

.lp [data-lp-in] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--lp-delay, 0ms);
  will-change: opacity, transform;
}

.lp [data-lp-in="0"] {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

.lp [data-lp-in="1"] {
  opacity: 1;
  transform: none;
}

/* Каскад: не длиннее шести шагов. Шаг задержки — продуктовый `--stagger`, и в
   режиме уменьшенного движения он обнуляется вместе с длительностями. */
.lp [data-lp-i="1"] { --lp-delay: 0ms; }
.lp [data-lp-i="2"] { --lp-delay: var(--stagger); }
.lp [data-lp-i="3"] { --lp-delay: calc(2 * var(--stagger)); }
.lp [data-lp-i="4"] { --lp-delay: calc(3 * var(--stagger)); }
.lp [data-lp-i="5"] { --lp-delay: calc(4 * var(--stagger)); }
.lp [data-lp-i="6"] { --lp-delay: calc(5 * var(--stagger)); }

@media (prefers-reduced-motion: reduce) {
  .lp [data-lp-in="0"] {
    opacity: 1;
    transform: none;
  }

  .lp-cta:active,
  .lp-cta:hover > svg {
    transform: none;
  }
}

/* Узкие экраны --------------------------------------------------------------
   Сетка складывается по смыслу: сначала уходит зазор между колонками, потом
   пара «текст + вторичное» становится одной колонкой. */

@media (max-width: 1080px) {
  .lp-doc { grid-column: 8 / span 5; }
  .lp-work__prose { grid-column: 1 / span 7; }
  .lp-work__facts { grid-column: 8 / span 5; }
  .lp-ladder__rail { grid-column: 1 / span 5; }
  .lp-ledger { grid-column: 6 / span 7; }
  .lp-nope__list { grid-column: 1 / span 8; }
  .lp-final__lead { grid-column: 1 / span 8; }
  .lp-need { grid-column: 9 / span 4; }
  .lp-closed__prose { grid-column: 1 / span 7; }

  .lp-ledger__head,
  .lp-step { grid-template-columns: minmax(0, 1fr) 7rem 6.5rem; }
}

@media (max-width: 860px) {
  .lp-hero__text,
  .lp-doc,
  .lp-work__prose,
  .lp-work__facts,
  .lp-english__prose,
  .lp-frame,
  .lp-nope__list,
  .lp-nope__aside,
  .lp-final__lead,
  .lp-need,
  .lp-closed__prose,
  .lp-closed .lp-need,
  .lp-steps__list,
  .lp-ladder__rail,
  .lp-ledger {
    grid-column: 1 / span 12;
  }

  .lp-doc,
  .lp-need { align-self: start; }

  .lp-frame--45 { aspect-ratio: 3 / 2; }

  .lp-ladder__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
  }

  /* Рельс растворяется, и его дети становятся элементами общей колонки: только
     так липкий баланс держится, пока мимо едут ступени, а не заканчивается
     вместе с собственной ячейкой сетки. */
  .lp-ladder__rail {
    display: contents;
  }

  .lp-balance {
    position: sticky;
    top: var(--header-h);
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--gap-inline);
    background: var(--bg);
    padding-block: var(--gap-inline);
    border-bottom: 1px solid var(--line);
  }

  .lp-balance__value {
    margin: 0 0 0 auto;
    font-size: var(--size-5);
  }

  .lp-step-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .lp-step-row__no {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: var(--gap-inline);
    text-align: left;
  }

  .lp-step-row__body {
    grid-column: 1;
    grid-row: 2;
  }

  .lp-step-row__cost {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--gap-inline);
    text-align: left;
  }
}

@media (max-width: 620px) {
  .landing { --lp-row-unit: 4px; }

  .landing .header-context { display: none; }

  .lp-bar__where { display: none; }

  .lp-ledger__head { display: none; }

  .lp-step {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--gap-tight);
  }

  .lp-step__name { grid-column: 1; grid-row: 1 / span 2; align-content: start; }
  .lp-step__earned { grid-column: 2; grid-row: 1; }
  .lp-step__balance { grid-column: 2; grid-row: 2; }

  .lp-ledger__total {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-tight);
  }

  .lp-bar__inner { gap: var(--gap-related); }
  .lp-bar__sum { display: none; }
  .lp-bar__inner > .lp-cta { margin-left: auto; }

  .lp-foot { flex-direction: column; }
}

/* Начертание цифр ------------------------------------------------------------
   Правило стоит последним в файле по той же причине, что и в ките продукта:
   сокращение `font` сбрасывает `font-variant-numeric` в `normal`, а роли
   лендинга задают типографику именно им. После всех объявлений шрифта возврат
   переживает их по порядку каскада. Страница вся про суммы — табличные цифры
   нужны ей везде, а не в списке избранных мест. */

.lp,
.lp *,
.lp-bar,
.lp-bar * {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}