/*
 * Лендинг по макету Figma (docs/design/figma-notes.md).
 *
 * Десктоп (от 1024px) — холст шириной 1920 единиц макета, как в Figma. Одна единица --u равна
 * min(ширина страницы, 1920px) / 1920, поэтому на любом экране пропорции совпадают с макетом.
 * Координаты элементов заданы в разметке переменными --x, --y, --w, --h, --r, --fs в единицах макета.
 *
 * Мобильная версия (до 1024px) — отдельный холст .lpm шириной 402 единицы по мобильному макету
 * (узел 4472:551), единица там равна ширине экрана / 402. FAQ и футер общие для обеих версий:
 * в медиазапросе в конце файла они перестраиваются по мобильному макету.
 */

/* Переходы по якорям — кнопка «ВЫБРАТЬ ТАРИФ», меню, навигация в футере — плавной прокруткой. */
html {
    scroll-behavior: smooth;
}

:root {
    --lp-sky: #8cd7ff;
    --lp-blue: #004eb1;
    --lp-blue-tariff: #124fb2;
    --lp-blue-border: #1559e9;
    --lp-navy: #02195d;
    --lp-pink: #ff00fb;
    /* Плашка скидки в макете — чистый красный. */
    --lp-sale: #ff0000;
    --lp-old-price: #63698c;
    --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Opsilon', 'Opsilon Fallback', 'Rubik', 'Inter', sans-serif;
    --font-pixel: 'Minecraft Rus', 'Monocraft', 'Pixelify Sans', monospace;
    /* Интерлиньяж текста Inter. «normal» у Inter в Safari выше, чем в Chrome, и абзацы
       вылезали из бумаги и плашек. На десктопе задан явно — ровно тот, что даёт Chrome (1,21);
       мобильная версия подогнана по месту своими значениями. */
    --lh-text: normal;
}

@media (min-width: 1024px) {
    :root {
        --lh-text: 1.21;
    }
}

.lp,
.lp * {
    box-sizing: border-box;
}

body.lp-body {
    margin: 0;
    background: var(--lp-sky);
    color: #000;
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    /* Лендинг — коллаж: текст лежит поверх картинок в размерах макета. Если телефон сам укрупняет
       текст (крупный шрифт в настройках Android, встроенный браузер Telegram, поворот экрана
       в Safari), абзацы вылезают из своих плашек и уходят под соседние секции. Увеличить страницу
       жестом по-прежнему можно. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.lp {
    position: relative;
    container-type: inline-size;
    overflow-x: clip;
    line-height: var(--lh-text);
}

/* Якоря разделов общие для десктопа и телефона: высота своя у каждой версии (--y и --my). */
.lp-anchors {
    --u: calc(min(100cqw, 1920px) / 1920);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-anchors span {
    position: absolute;
    left: 0;
    top: calc(var(--y) * var(--u));
}

.lpm {
    display: none;
}

.lp-canvas,
.s7,
.s8 {
    --u: calc(min(100cqw, 1920px) / 1920);
}

.lp p,
.lp h1,
.lp h2,
.lp h3,
.lp ul {
    margin: 0;
    padding: 0;
}

.lp ul {
    list-style: none;
}

.contents {
    display: contents;
}

.m-only {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Холст и слои ---------- */

.lp-canvas {
    position: relative;
    width: calc(1920 * var(--u));
    height: calc(7588 * var(--u));
    margin-inline: auto;
}

/* Защита от минимального размера шрифта в настройках браузера. Иначе браузер укрупняет мелкий
   текст (в «Кто такой Гоша» — 13 единиц макета, на экране 1280 это 8,5px), и текст вылезает
   из звезды, бумаги и плашек. Поэтому холст рисуется вдвое крупнее макета (единица — 2px, самый
   мелкий текст — 26px) и уменьшается целиком трансформацией: минимальный размер сравнивается
   с размером шрифта до неё. В раскладке холст занимает прежнее место (--ub — обычная единица).
   Множитель масштаба — число, поэтому ширина делится через tan(atan2(...)): деление длины
   на длину браузеры поддерживают не все. */
@media (min-width: 1024px) {
    .lp-canvas {
        --ub: calc(min(100cqw, 1920px) / 1920);
        --u: 2px;
        width: calc(1920 * var(--ub));
        height: calc(7588 * var(--ub));
        transform: scale(calc(tan(atan2(min(100cqw, 1920px), 1920px)) / 2));
        transform-origin: 0 0;
    }
}

/* Секции перекрывают друг друга рваными краями, поэтому каждая — слой на весь холст.
   Порядок наложения взят из Figma, а в разметке секции идут по смыслу. */
.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.s1 { z-index: 2; }
.s2 { z-index: 6; }
.s3 { z-index: 3; }
.s4 { z-index: 5; }
.s5 { z-index: 4; }
.s6 { z-index: 1; }

.lp a,
.lp button,
.lp summary,
.lp details {
    pointer-events: auto;
}

.a {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
}

.a[style*="--h:"] {
    height: calc(var(--h) * var(--u));
}

.a[style*="--r:"] {
    transform: rotate(var(--r));
}

.a > picture {
    display: contents;
}

.a > img,
.a > picture > img {
    display: block;
    width: 100%;
    height: 100%;
}

.a.cover > img,
.a.cover > picture > img,
img.a.cover {
    object-fit: cover;
}

/* Картинка, обрезанная рамкой: смещение и размер заданы в процентах от рамки, как в Figma. */
.a.crop {
    overflow: hidden;
}

.a.crop > img {
    position: absolute;
    max-width: none;
    left: var(--il, 0);
    top: var(--it, 0);
    width: var(--iw, 100%);
    height: var(--ih, 100%);
}

/* Вектор с тенью или обводкой выходит за свою рамку — отступы inset заданы в разметке. */
.ins {
    position: absolute;
    display: block;
}

.ins > img {
    display: block;
    width: 100%;
    height: 100%;
}

.t {
    font-size: calc(var(--fs) * var(--u));
    line-height: var(--lh-text);
}

.display {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    white-space: nowrap;
}

.display.shadow {
    text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
}

/* Тень по силуэту картинки — отдельный слой под ней: копия, залитая чёрным и размытая.
   Не drop-shadow на самой картинке: Safari рисует отфильтрованное в сниженном разрешении,
   и края мылились бы. Смещение тени задаётся координатами слоя, размытие (--sb) — как радиус
   тени в Figma, прозрачность — --so. */
.shadow-copy {
    filter: brightness(0) blur(calc(var(--sb) / 2 * var(--u)));
    opacity: var(--so);
}

/* ---------- 1. Первый экран ---------- */

.s1-nav a {
    position: absolute;
    top: calc(80 * var(--u));
    left: calc(var(--x) * var(--u));
    color: #fff;
    font-weight: 600;
    font-size: calc(15 * var(--u));
    text-decoration: none;
    white-space: nowrap;
}

.s1-nav a:hover,
.s1-nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.s1-lead {
    color: #fff;
    line-height: 1.1164;
}

.s1-cta {
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: calc(22 * var(--u));
    text-decoration: none;
}

.s1-cta .ins {
    z-index: -1;
    transition: transform 0.15s ease;
}

.s1-cta:hover .ins {
    transform: translateY(calc(-2 * var(--u)));
}

.s1-cta:active .ins {
    transform: translateY(calc(2 * var(--u)));
}

.s1-cta > span:not(.ins) {
    position: relative;
}

/* ---------- 2. Боли и «после школы» ---------- */

.s2-phrase {
    font-size: calc(20 * var(--u));
    line-height: 0.9;
    white-space: nowrap;
}

.s2-list li {
    font-size: calc(20 * var(--u));
    line-height: 0.9;
    margin-bottom: calc(18 * var(--u));
}

/* ---------- 3. Кто такой Гоша ---------- */

.s3-title {
    color: var(--lp-blue);
}

/* В макете абзацы разделены пустой строкой — отступ ровно в строку (22 × 1,21). */
.s3-text p + p {
    margin-top: calc(26.62 * var(--u));
}

/* Две последние строки в макете набраны с интерлиньяжем 107,56 % (28,64 вместо 26,62), и Figma
   добавляет разницу над строкой, а не делит пополам, как браузер, — отсюда отступ сверху. Без этого
   текст к низу уезжал вверх и рамка с логотипами рекламодателей наезжала на «получать такие».
   Сам абзац опущен на 1,5 единицы от макетных 1881: так строки Inter в браузере ложатся на макет. */
.s3-text-tail {
    display: block;
    margin-top: calc(2 * var(--u));
    line-height: 1.3017;
}

.s3-text strong {
    font-weight: 500;
}

.s3-burst p + p {
    margin-top: calc(16 * var(--u));
}

.s3-burst em {
    font-style: normal;
    color: var(--lp-pink);
}

.shadow-comment {
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
}

/* ---------- 4. Кому подойдёт ---------- */

/* Эффект Noise на бумаге из макета: чёрные точки со случайной прозрачностью 0–11 %
   (плитка — tools/noise_tile.py), точка — 0,5 единицы. Маска — сама бумага, чтобы шум не
   ложился на соседние секции за рваными краями. */
.s4-bg::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* На телефоне тот же шум — отдельными слоями над двумя листами бумаги и белой подложкой между
   ними. В мобильном макете у бумаги эффект есть, но с нулевой прозрачностью; сделан как на
   десктопе. */
.s4-bg::after,
.paper-noise {
    background: url('/img/landing/s4/noise-9c7db92f9fcfb17e4c72b7f7983f665f.png') 0 0 / calc(64 * var(--u));
}

.s4-bg::after,
.paper-noise.on-paper {
    -webkit-mask: url('/img/landing/s4/paper-bg-b7d8f20486ad001d98db58c32f4cd40b.avif') 0 0 / 100% 100% no-repeat;
    mask: url('/img/landing/s4/paper-bg-b7d8f20486ad001d98db58c32f4cd40b.avif') 0 0 / 100% 100% no-repeat;
}

.s4-title {
    color: var(--lp-blue);
    white-space: nowrap;
}

.s4-subtitle {
    white-space: nowrap;
}

.s4-subtitle .dash {
    letter-spacing: calc(5.12 * var(--u));
}

.sticker {
    display: block;
}

.clip-shadow {
    filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 12%));
}

/* С .lp: иначе общий сброс списков (.lp ul) убирает маркер и отступ, и текст вылезает из плашки. */
.lp .s4-bubble-text {
    list-style: disc;
    padding-left: calc(36 * var(--u));
}

.s4-bubble-text li {
    font-size: calc(24 * var(--u));
    line-height: var(--lh-text);
}

/* У «монтажёра» в макете маркер стоит в первой строке, а остальные строки начинаются от края
   текста, без висячего отступа: так пять строк помещаются в невысокую плашку. Переносы — как
   в макете, явными <br>. */
.lp .s4-bubble-inline {
    list-style: none;
    padding-left: 0;
    white-space: nowrap;
}

.s4-bubble-inline li::before {
    content: '•';
    display: inline-block;
    width: calc(29 * var(--u));
    margin-left: calc(3 * var(--u));
}

/* ---------- 5. Программа ---------- */

/* В макете у заголовка и строк под ним чёрная обводка 1px снаружи: штрих вдвое толще, его
   внутренняя половина уходит под заливку (paint-order). */
.s5-title,
.s5-meta {
    -webkit-text-stroke: calc(2 * var(--u)) #000;
    paint-order: stroke fill;
}

.s5-title {
    color: #fff;
}

.s5-meta {
    color: #fff;
    text-align: center;
    font-size: calc(36 * var(--u));
}

.s5-meta b {
    font-weight: 900;
}

.s5-block-label {
    color: #fff;
    font-weight: 700;
    font-size: calc(40 * var(--u));
    white-space: nowrap;
}

.s5-block-name {
    font-weight: 700;
    font-size: calc(36 * var(--u));
    white-space: nowrap;
}

.s5-result-title {
    font-weight: 700;
    font-size: calc(40 * var(--u));
    white-space: nowrap;
}

.s5-text {
    font-size: calc(24 * var(--u));
    line-height: var(--lh-text);
}

.s5-text p + p {
    margin-top: calc(29 * var(--u));
}

/* ---------- 6. Тарифы ---------- */

.s6-title {
    color: var(--lp-blue-tariff);
}

.s6-cards {
    display: flex;
    justify-content: space-between;
}

.tariff-card {
    position: relative;
    width: calc(371 * var(--u));
    height: calc(568 * var(--u));
    border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
    overflow: hidden;
}

.tariff-card > .card-bg {
    position: absolute;
    left: -0.27%;
    top: -0.56%;
    width: 100.54%;
    height: 100.59%;
    max-width: none;
}

.tariff-name {
    position: absolute;
    left: calc(36 * var(--u));
    top: calc(20 * var(--u));
    color: #fff;
    font-size: calc(36 * var(--u));
    white-space: nowrap;
}

.tariff-price {
    position: absolute;
    left: calc(51 * var(--u));
    top: calc(68 * var(--u));
    color: var(--lp-navy);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.59;
    white-space: nowrap;
}

/* Без скидки под ценой пусто, поэтому она по центру карточки. */
.tariff-card:not(.discounted) .tariff-price {
    left: 0;
    right: 0;
    text-align: center;
}

.tariff-price .head {
    font-size: calc(64 * var(--u));
}

.tariff-price .tail {
    font-size: calc(55 * var(--u));
}

/* Остаток мест по акции — справа от цены, в две строки: под ценой в макете старая цена. */
.tariff-price .slots {
    display: inline-block;
    margin-left: calc(12 * var(--u));
    vertical-align: calc(18 * var(--u));
    color: var(--lp-sale);
    font-family: var(--font-text);
    font-weight: 700;
    font-size: calc(17 * var(--u));
    line-height: 1.2;
    white-space: nowrap;
}

.tariff-price .slots > span {
    display: block;
}

/* Старая цена по акции (узел 4276:791): под новой со сдвигом, перечёркнута росчерком из макета. */
.tariff-old {
    position: absolute;
    left: calc(135 * var(--u));
    top: calc(132 * var(--u));
    margin: 0;
    color: var(--lp-old-price);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.59;
    white-space: nowrap;
}

.tariff-old s {
    text-decoration: none;
}

.tariff-old .head {
    font-size: calc(48 * var(--u));
}

.tariff-old .tail {
    font-size: calc(41 * var(--u));
}

.tariff-old .strike {
    position: absolute;
    left: calc(-22 * var(--u));
    top: calc(41 * var(--u));
    width: calc(100% + 40 * var(--u));
    height: calc(10.5 * var(--u));
    max-width: none;
    transform: rotate(-6deg);
    pointer-events: none;
}

/* Надпись из CRM под ценой («всего 6 мест»): красная, как счётчик мест по акции. */
.tariff-note {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(158 * var(--u));
    color: var(--lp-sale);
    font-weight: 700;
    font-size: calc(22 * var(--u));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Плашка скидки рядом с заголовком (узел 4246:709): жёлтая звезда, красный текст. */
.sale {
    margin: 0;
}

.sale > img {
    position: absolute;
    inset: 0;
}

.sale > span {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(40 * var(--u));
    color: var(--lp-sale);
    /* В макете 36px на «до 1 октября»; даты бывают длиннее, поэтому чуть мельче. */
    font-size: calc(32 * var(--u));
    line-height: calc(41 * var(--u));
    text-align: center;
}

.tariff-features {
    position: absolute;
    left: calc(22 * var(--u));
    top: calc(205 * var(--u));
    width: calc(328 * var(--u));
}

.tariff-features li {
    height: calc(42 * var(--u));
    margin-bottom: calc(8 * var(--u));
    padding-left: calc(10 * var(--u));
    background: #dee6f4;
    color: #011550;
    font-weight: 500;
    font-size: calc(18 * var(--u));
    line-height: calc(42 * var(--u));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tariff-features li:first-child {
    border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0;
}

.tariff-features li:last-child {
    border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
}

.tariff-features li.muted {
    color: #9c9c9c;
}

.tariff-buy {
    position: absolute;
    left: calc(79 * var(--u));
    top: calc(473 * var(--u));
    width: calc(213 * var(--u));
    height: calc(61 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: calc(5 * var(--u)) solid var(--lp-blue-border);
    border-radius: calc(14 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    color: var(--lp-blue-tariff);
    font-size: calc(36 * var(--u));
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease, color 0.15s ease;
}

/* При наведении кнопка заливается синим, как её рамка. */
a.tariff-buy:hover {
    transform: translateY(calc(-2 * var(--u)));
    background: var(--lp-blue-border);
    color: #fff;
}

a.tariff-buy:active {
    transform: translateY(calc(2 * var(--u)));
    box-shadow: 0 0 0 0 rgb(0 0 0 / 25%);
}

/* Продажи закрыты: карточка остаётся на месте, но серая, и вместо «КУПИТЬ» — «SOLD OUT». */
.tariff-card.sold-out {
    filter: grayscale(1) brightness(0.88);
}

.tariff-card.sold-out .tariff-buy {
    box-shadow: none;
    cursor: default;
}

.tariff-buy:focus-visible,
.s1-cta:focus-visible,
.support-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ---------- 7. FAQ и поддержка (обычный поток: ответы раскрываются и раздвигают страницу) ---------- */

.s7 {
    position: relative;
    z-index: 7;
    width: calc(1920 * var(--u));
    min-height: calc(926 * var(--u));
    margin: calc(-187 * var(--u)) auto 0;
    /* Запас снизу: раскрытые ответы удлиняют блок, и он не должен заезжать под футер. */
    padding: calc(266 * var(--u)) 0 calc(250 * var(--u));
    /* Верх прозрачный: над рваным краем бумаги видно поле с тарифами, оно кончается на 187-й единице. */
    background: linear-gradient(transparent calc(187 * var(--u)), #e3e3e3 0);
}

/* Блок заходит на тарифы (на телефоне — на кнопку третьей карточки): сам он нажатия не ловит,
   их получают только вопросы и окно поддержки. */
.s7 {
    pointer-events: none;
}

.s7-inner,
.support {
    pointer-events: auto;
}

/*
 * Бумага под FAQ — картинка 1920 × 1080, в макете обрезанная снизу: нижний рваный край уходит
 * под футер. FAQ у нас выше макета и растёт, когда раскрывают ответы, поэтому бумага собрана
 * из трёх кусков одной картинки, стыки — зеркальные, без шва:
 *   1) строки 0–760 — верх с рваным краем, как в макете (::before);
 *   2) строки 760–320, отражённые по вертикали (::after);
 *   3) снова строки 320–… в обычном виде (фон самого блока), до нижнего рваного края (837-я).
 * Стыки по 760-й и 320-й строкам: там у бумаги нет складок и следов разрыва, которые на стыке
 * отразились бы «ромбиками». Нижний рваный край третьего куска — на 1717-м пикселе картинки:
 * 1850 единиц на десктопе, 1200 на телефоне (FAQ с самым длинным ответом — 1370 и 810).
 */
.s7-bg {
    /* Ширина бумаги в единицах макета и один пиксель картинки в этих единицах. */
    --pw: 2069;
    --px: calc(var(--pw) * var(--u) / 1920);
    position: absolute;
    left: calc(-97 * var(--u));
    top: 0;
    bottom: 0;
    width: calc(var(--pw) * var(--u));
    overflow: hidden;
    pointer-events: none;
    /* Кусок 3: 320-я строка встаёт на 1200-й пиксель, всё, что выше неё, прячется под куском 2. */
    background: url('/img/landing/s7/paper-bg-720a4d281102ef805f3c4c251c821484.avif') center calc(var(--px) * 880) / 100% auto no-repeat;
}

.s7-bg::before,
.s7-bg::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background: url('/img/landing/s7/paper-bg-720a4d281102ef805f3c4c251c821484.avif') center top / 100% auto no-repeat;
}

.s7-bg::before {
    top: 0;
    height: calc(var(--px) * 760);
}

.s7-bg::after {
    top: calc(var(--px) * 760 - 1px);
    height: calc(var(--px) * 440 + 1px);
    background-position: center calc(var(--px) * -320);
    transform: scaleY(-1);
}

.s7-inner {
    position: relative;
    margin-left: calc(172 * var(--u));
}

.s7-title {
    color: var(--lp-blue-tariff);
    font-size: calc(96 * var(--u));
}

.faq {
    width: calc(966 * var(--u));
    margin: calc(13 * var(--u)) 0 0 calc(2 * var(--u));
}

.faq details {
    margin-bottom: calc(8 * var(--u));
    background: #fff;
    border: 1px solid #dcdcdc;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(80 * var(--u));
    padding: calc(10 * var(--u)) calc(38 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u));
    font-size: calc(16 * var(--u));
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    flex: none;
    margin-left: calc(20 * var(--u));
    color: #0a4bad;
    font-size: calc(26 * var(--u));
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq .answer {
    padding: 0 calc(38 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.5;
}

.faq .answer p + p,
.faq .answer ul + p {
    margin-top: calc(10 * var(--u));
}

.faq .answer ul {
    margin: calc(8 * var(--u)) 0 0;
    padding-left: calc(22 * var(--u));
    list-style: disc;
}

.faq .answer li {
    margin-bottom: calc(4 * var(--u));
}

.support {
    position: absolute;
    left: calc(1214 * var(--u));
    top: calc(376 * var(--u));
    width: calc(561 * var(--u));
    height: calc(355 * var(--u));
    text-align: center;
}

/* Надписи окна набраны в макете шрифтом Minecraft Rus: на десктопе это кривые из макета (.px),
   сам текст спрятан, но остаётся для экранных дикторов. На телефоне — наоборот. */
.support .px-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.support .px {
    position: absolute;
    display: block;
    max-width: none;
}

.support > picture {
    display: contents;
}

.support > picture > img {
    display: block;
    width: 100%;
    height: 100%;
}

.support-text {
    position: absolute;
    left: calc(174.7 * var(--u));
    top: calc(139.5 * var(--u));
    width: calc(317.5 * var(--u));
    height: calc(40 * var(--u));
}

.support-text .px,
.support-note .px {
    inset: 0;
    width: 100%;
    height: 100%;
}

.support-button {
    position: absolute;
    left: calc(205 * var(--u));
    top: calc(188 * var(--u));
    width: calc(224 * var(--u));
    height: calc(115 * var(--u));
    overflow: hidden;
    color: #000;
    font-size: calc(21 * var(--u));
    text-decoration: none;
}

.support-button img {
    position: absolute;
    left: -53.79%;
    top: -219.56%;
    width: 304.14%;
    height: 374.36%;
    max-width: none;
}

.support-button span {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(42 * var(--u));
}

.support-button .px {
    left: calc(54.1 * var(--u));
    top: calc(48 * var(--u));
    width: calc(111 * var(--u));
    height: calc(18 * var(--u));
}

.support-button:active img {
    transform: translate(1px, 1px);
}

.support-note {
    position: absolute;
    left: calc(81.3 * var(--u));
    top: calc(340.5 * var(--u));
    width: calc(395 * var(--u));
    height: calc(20 * var(--u));
}

/* ---------- 8. Футер ---------- */

.s8 {
    position: relative;
    z-index: 8;
    width: calc(1920 * var(--u));
    margin: calc(-86 * var(--u)) auto 0;
    padding: calc(154 * var(--u)) 0 calc(24 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
}

/* Фон — рваная синяя бумага макета от верхнего края до конца страницы. Над краем картинка
   прозрачная, там видна бумага FAQ; её нижний обрез ровный, поэтому край поднят так, чтобы
   впадины его перекрывали. По высоте полоса растянута на весь футер, как в Figma
   (там слой тоже растянут неравномерно). */
.s8::before {
    content: '';
    position: absolute;
    inset: calc(20 * var(--u)) 0 0;
    background: url('/img/landing/s8/paper-bg-2b1d2279a214e5de286ee7dd4327a15e.avif') 0 0 / 100% 100% no-repeat;
}

.s8-grid {
    position: relative;
    display: grid;
    grid-template-columns: calc(293 * var(--u)) calc(277 * var(--u)) calc(372 * var(--u)) 1fr;
    row-gap: calc(30 * var(--u));
    align-items: start;
    padding-left: calc(176 * var(--u));
    padding-right: calc(160 * var(--u));
}

/* Стикер: звезда и Гоша поверх неё. Координаты слоёв — из макета (узел 4260:765), в масштабе
   0,96: стикер на сайте чуть меньше макетного. */
.s8-sticker {
    position: relative;
    width: calc(200 * var(--u));
    height: calc(236 * var(--u));
    margin-top: calc(-52 * var(--u));
}

.s8-sticker img {
    position: absolute;
    display: block;
}

.s8-sticker .s8-star {
    left: calc(14.84 * var(--u));
    top: calc(73.94 * var(--u));
    width: calc(172.8 * var(--u));
    height: calc(155.52 * var(--u));
}

.s8-sticker .s8-face {
    left: calc(2.17 * var(--u));
    top: 0;
    width: calc(162.24 * var(--u));
    height: calc(236 * var(--u));
}

.s8 h2 {
    margin: 0 0 calc(24 * var(--u));
    font-size: calc(16 * var(--u));
    font-weight: 400;
}

.s8 li + li {
    margin-top: calc(17 * var(--u));
}

.s8 a {
    color: #fff;
    text-decoration: none;
}

.s8 a:hover,
.s8 a:focus-visible {
    text-decoration: underline;
}

.s8-contacts {
    grid-column: 4;
    text-align: center;
}

.s8-contacts > a {
    display: block;
}

.s8-contacts > a + a {
    margin-top: calc(8 * var(--u));
}

.s8-social {
    display: flex;
    justify-content: center;
    gap: calc(36 * var(--u));
    margin-bottom: calc(22 * var(--u));
}

.s8-social a,
.s8-social .icon {
    display: block;
    width: calc(50 * var(--u));
    height: calc(48 * var(--u));
}

.s8-social svg {
    display: block;
    width: 100%;
    height: 100%;
}

.s8-legal {
    grid-column: 3 / 5;
    text-align: right;
    line-height: 1.5;
}

/* ---------- Мобильная версия (макет 4472:551) ---------- */

@media (max-width: 1023px) {
    .lp-canvas {
        display: none;
    }

    .lpm,
    .lp-anchors,
    .s7,
    .s8 {
        --u: calc(100cqw / 402);
    }

    .lp-anchors span {
        top: calc(var(--my) * var(--u));
    }

    .m-only {
        display: block;
    }

    .lpm {
        display: block;
        position: relative;
        height: calc(4207 * var(--u));
        overflow: hidden;
        background: #fff;
    }

    /* Порядок наложения секций — как в Figma. */
    .m1 { z-index: 1; }
    .m6 { z-index: 2; }
    .m3 { z-index: 3; }
    .m2 { z-index: 4; }
    .m5 { z-index: 5; }
    .m4 { z-index: 6; }

    /* Строки абзацев разбиты как в Figma: браузер меряет буквы Inter чуть иначе
       и сам перенёс бы часть строк на слово раньше или позже. */
    .nw {
        white-space: nowrap;
    }

    .op {
        font-family: var(--font-display);
        font-weight: 400;
        line-height: 0.9;
        white-space: nowrap;
    }

    /* Шапка с меню */

    .m-header {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(35 * var(--u));
        background: var(--lp-blue);
        box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    .m-logo {
        position: absolute;
        left: calc(12 * var(--u));
        top: calc(10 * var(--u));
        color: #fff;
        font-family: var(--font-display);
        font-size: calc(14 * var(--u));
        line-height: 1.1;
        text-decoration: none;
    }

    .m-menu summary {
        position: absolute;
        left: calc(370 * var(--u));
        top: calc(10 * var(--u));
        width: calc(23 * var(--u));
        height: calc(16.3 * var(--u));
        list-style: none;
        cursor: pointer;
    }

    .m-menu summary::-webkit-details-marker {
        display: none;
    }

    /* Кнопка в макете маленькая — область нажатия шире рисунка. */
    .m-menu summary::before {
        content: '';
        position: absolute;
        inset: calc(-10 * var(--u));
    }

    .m-menu summary span {
        position: absolute;
        left: 0;
        width: 100%;
        height: calc(3.3 * var(--u));
        background: #fff;
    }

    .m-menu summary span:nth-child(2) {
        top: calc(6.5 * var(--u));
    }

    .m-menu summary span:nth-child(3) {
        top: calc(13.1 * var(--u));
    }

    .m-menu nav {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(35 * var(--u));
        display: flex;
        flex-direction: column;
        padding: calc(4 * var(--u)) 0 calc(10 * var(--u));
        background: var(--lp-blue);
        box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    .m-menu nav a {
        padding: calc(9 * var(--u)) calc(12 * var(--u));
        color: #fff;
        font-weight: 600;
        font-size: calc(14 * var(--u));
        text-transform: uppercase;
        text-decoration: none;
    }

    .m-menu summary:focus-visible,
    .m-menu nav a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

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

    .m-cta {
        display: block;
        padding-top: calc(6.9 * var(--u));
        background: #f22d2d;
        border-radius: calc(2 * var(--u));
        box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 10%),
                    0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / 25%);
        color: #fff;
        font-weight: 700;
        font-size: calc(14 * var(--u));
        text-align: center;
        text-decoration: none;
        transition: transform 0.15s ease;
    }

    .m-cta:active {
        transform: translateY(calc(2 * var(--u)));
    }

    .m-cta:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

    /* 2. Знакомо? → После школы */

    .m2-list {
        line-height: 0.9;
    }

    .m2-list li {
        margin-bottom: calc(7.2 * var(--u));
    }

    .m2-phrase {
        font-size: calc(8 * var(--u));
        line-height: 0.9;
        white-space: nowrap;
    }

    /* В макете перед этой фразой десять пустых строк. */
    .m2-phrase-low {
        padding-top: calc(72 * var(--u));
    }

    /* 3. Кто такой Гоша */

    .m3-comment {
        box-shadow: calc(2 * var(--u)) 0 calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    /* Интерлиньяж задан явно: «normal» у Inter в браузерах разный, а абзац стоит впритык к бумаге. */
    .m3-burst {
        text-align: center;
        line-height: 1.2;
    }

    .m3-burst p + p {
        margin-top: 1lh;
    }

    .m3-burst em {
        font-style: normal;
        color: var(--lp-pink);
    }

    .m3-title {
        color: var(--lp-blue);
        font-size: calc(32 * var(--u));
    }

    /* В макете текст начинается с пустой строки; у второй половины интерлиньяж больше. */
    .m3-ads {
        color: #fff;
        font-style: italic;
    }

    .m3-ads span {
        display: block;
        line-height: 1.3;
    }

    .m3-text strong {
        font-weight: 800;
    }

    /* 4. Кому подойдёт */

    .m4-title {
        color: var(--lp-blue);
        font-size: calc(32 * var(--u));
        text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    .m4-subtitle {
        font-weight: 400;
        white-space: nowrap;
    }

    /* Тень в Figma повторяет контур вырезанной фигуры, а не рамку картинки. */
    .m4-photo {
        filter: drop-shadow(calc(-1 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 49%));
    }

    .m4-subtitle .dash {
        letter-spacing: calc(3.84 * var(--u));
    }

    /* Списки в «пузырях»: маркер на 11 единиц от края, текст с висячим отступом. */
    .m4-list li {
        position: relative;
        padding-left: calc(18 * var(--u));
    }

    .m4-list li::before {
        content: '•';
        position: absolute;
        left: calc(9 * var(--u));
    }

    /* У монтажёра маркер набран символом в самом тексте, без висячего отступа. */
    .m4-bullet::before {
        content: '•';
        margin: 0 calc(6.2 * var(--u)) 0 calc(6.4 * var(--u));
    }

    /* 5. Программа */

    /* В макете 32 единицы, но там опечатка «ПРОГРАМА»: с исправленным словом строка на букву
       длиннее и уже не помещается в ширину экрана. */
    .m5-title {
        color: #fff;
        font-size: calc(31 * var(--u));
        -webkit-text-stroke: calc(2 * var(--u)) #000;
        paint-order: stroke fill;
        text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    .m5-meta {
        color: #fff;
        font-size: calc(13 * var(--u));
        text-align: center;
        white-space: nowrap;
        -webkit-text-stroke: calc(1 * var(--u)) #000;
        paint-order: stroke fill;
    }

    .m5-meta b {
        font-weight: 900;
    }

    .m5-label,
    .m5-name {
        font-weight: 700;
        font-size: calc(10 * var(--u));
        white-space: nowrap;
    }

    .m5-label {
        color: #fff;
    }

    /* Интерлиньяж задан явно: «normal» у Inter в Safari выше, и текст вылезал за бумагу. */
    .m5-text {
        font-size: calc(8 * var(--u));
        line-height: 1.2;
        white-space: nowrap;
    }

    .m5-text p + p {
        margin-top: 1lh;
    }

    /* Текст четвёртого блока в макете начинается с пустой строки. Он самый длинный и стоит
       впритык к краям бумаги, поэтому чуть мельче макетного. */
    .m5-text-low {
        padding-top: 1lh;
        font-size: calc(7.5 * var(--u));
    }

    /* 6. Тарифы */

    .m6-badge {
        filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%));
    }

    .m6-badge h2 {
        position: absolute;
        left: calc(36 * var(--u));
        top: calc(13 * var(--u));
        color: var(--lp-blue-tariff);
        font-size: calc(64 * var(--u));
        text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    }

    .m6-sale > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .m6-sale > span {
        position: absolute;
        left: calc(19.15 * var(--u));
        top: calc(16 * var(--u));
        color: var(--lp-sale);
        font-size: calc(11 * var(--u));
        line-height: normal;
        transform: rotate(0.3deg);
    }

    /* Две карточки в ряд, третья крупнее и по центру (макет: 168 и 193 единицы шириной). */
    .m-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: calc(13 * var(--u));
        row-gap: calc(12.8 * var(--u));
    }

    /* Внутри карточки единица своя: у крупной карточки всё пропорционально больше. */
    .lpm .tariff-card {
        --k: 1;
        --u: calc(100cqw / 402 * var(--k));
        flex: none;
        width: calc(168 * var(--u));
        height: calc(257.2 * var(--u));
    }

    .lpm .tariff-card:nth-child(n+3) {
        --k: 1.1488;
    }

    .lpm .tariff-name {
        left: calc(16 * var(--u));
        top: calc(9 * var(--u));
        font-size: calc(20 * var(--u));
    }

    .lpm .tariff-price {
        left: calc(19 * var(--u));
        top: calc(23 * var(--u));
        line-height: 1.6;
    }

    .lpm .tariff-price .head {
        font-size: calc(36 * var(--u));
    }

    .lpm .tariff-price .tail {
        font-size: calc(32 * var(--u));
    }

    .lpm .tariff-price .slots {
        margin-left: calc(4 * var(--u));
        vertical-align: calc(9 * var(--u));
        font-size: calc(7 * var(--u));
    }

    .lpm .tariff-note {
        top: calc(68 * var(--u));
        font-size: calc(10 * var(--u));
    }

    .lpm .tariff-old {
        left: calc(46 * var(--u));
        top: calc(54 * var(--u));
        line-height: 1.6;
    }

    .lpm .tariff-old .head,
    .lpm .tariff-old .tail {
        font-size: calc(30 * var(--u));
    }

    /* Зачёркивание в мобильном макете — ровная красная линия, а не росчерк. */
    .lpm .tariff-old .strike {
        display: none;
    }

    .lpm .tariff-old::after {
        content: '';
        position: absolute;
        left: calc(-3 * var(--u));
        right: calc(-1.3 * var(--u));
        top: calc(24 * var(--u));
        height: calc(2 * var(--u));
        border-radius: calc(1 * var(--u));
        background: #ff0004;
        transform: rotate(-4.5deg);
    }

    .lpm .tariff-card:nth-child(n+2) .tariff-old::after {
        transform: rotate(-8deg);
    }

    .lpm .tariff-features {
        left: calc(10 * var(--u));
        top: calc(92.8 * var(--u));
        width: calc(148.5 * var(--u));
    }

    .lpm .tariff-features li {
        height: calc(19 * var(--u));
        margin-bottom: calc(3.6 * var(--u));
        padding-left: calc(5 * var(--u));
        font-size: calc(8 * var(--u));
        line-height: calc(19 * var(--u));
    }

    .lpm .tariff-buy {
        left: calc(10 * var(--u));
        top: calc(212.2 * var(--u));
        width: calc(148.1 * var(--u));
        height: calc(31 * var(--u));
        border-width: calc(2 * var(--u));
        border-radius: calc(5 * var(--u));
        font-size: calc(20 * var(--u));
    }

    /* 7. FAQ и поддержка — общий блок, в потоке после холста */

    .s7 {
        width: auto;
        min-height: 0;
        margin: calc(-114 * var(--u)) 0 0;
        padding: calc(126 * var(--u)) 0 calc(31 * var(--u));
        overflow: hidden;
        /* Верх бумаги рваный — сквозь него видно поле с тарифами. */
        background: linear-gradient(transparent calc(700 * var(--u)), #e3e3e3 0);
    }

    /* Бумага та же, что на десктопе, в масштабе мобильного макета. */
    .s7-bg {
        --pw: 1340.3;
        left: calc(-392 * var(--u));
    }

    .s7-inner {
        margin-left: 0;
    }

    .s7 .s7-title {
        height: calc(52 * var(--u));
        margin-left: calc(163 * var(--u));
        font-size: calc(48 * var(--u));
    }

    .faq {
        width: calc(358.6 * var(--u));
        margin: calc(14 * var(--u)) 0 0 calc(22 * var(--u));
    }

    .faq details {
        margin-bottom: calc(3 * var(--u));
        border-color: #c7c7c7;
    }

    /* Строка в макете 33,3 единицы вместе с рамкой. */
    .faq summary {
        min-height: calc(33.3 * var(--u) - 2px);
        padding: 0 calc(6 * var(--u)) 0 calc(12.6 * var(--u));
        font-size: calc(10 * var(--u));
    }

    .faq summary::after {
        margin-left: calc(10 * var(--u));
        font-size: calc(26 * var(--u));
    }

    .faq .answer {
        padding: 0 calc(12.6 * var(--u)) calc(10 * var(--u));
        font-size: calc(10 * var(--u));
    }

    .support {
        position: relative;
        left: auto;
        top: auto;
        width: calc(225 * var(--u));
        height: calc(142 * var(--u));
        margin: calc(19.7 * var(--u)) 0 0 calc(86 * var(--u));
        font-family: var(--font-display);
        text-align: left;
        text-transform: none;
    }

    /* Мобильный макет набран Opsilon: выводим сам текст, а не кривые из десктопного. */
    .support .px {
        display: none;
    }

    .support .px-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    .support-button .px-text {
        position: absolute;
    }

    .support-title {
        position: absolute;
        left: calc(23 * var(--u));
        top: calc(13 * var(--u));
        color: #fff;
        font-size: calc(15 * var(--u));
    }

    .support-text {
        left: calc(74 * var(--u));
        top: calc(47 * var(--u));
        width: calc(145 * var(--u));
        height: auto;
        color: #4a4a4a;
        font-size: calc(11 * var(--u));
        line-height: normal;
    }

    .support-button {
        left: calc(75 * var(--u));
        top: calc(73 * var(--u));
        width: calc(97 * var(--u));
        height: calc(50 * var(--u));
        color: #4a4a4a;
        font-size: calc(15 * var(--u));
        text-align: center;
    }

    .support-button span {
        top: calc(16 * var(--u));
    }

    .support-button span::after {
        content: '!';
    }

    .support-note {
        left: calc(44 * var(--u));
        top: calc(117 * var(--u));
        width: calc(160 * var(--u));
        height: auto;
        color: #4a4a4a;
        font-family: var(--font-text);
        font-size: calc(6 * var(--u));
        text-align: center;
    }

    /* 8. Футер: в макете высотой 136 единиц, все подписи — на своих местах */

    .s8 {
        width: auto;
        height: calc(136 * var(--u));
        margin: calc(-31 * var(--u)) 0 0;
        padding: 0;
        overflow: hidden;
        background: url('/img/landing/m/footer-704354094747cd713f10b5ebe4ee1178.avif') 0 0 / 100% 100% no-repeat;
        font-size: calc(7 * var(--u));
    }

    .s8::before {
        display: none;
    }

    .s8-grid {
        display: block;
        height: 100%;
        padding: 0;
    }

    .s8-sticker {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        margin: 0;
    }

    .s8-sticker .s8-star {
        position: absolute;
        left: calc(10 * var(--u));
        top: calc(64 * var(--u));
        width: calc(57 * var(--u));
        height: calc(51 * var(--u));
    }

    .s8-sticker .s8-face {
        position: absolute;
        left: calc(8.4 * var(--u));
        top: calc(41.1 * var(--u));
        width: calc(49.4 * var(--u));
        height: calc(94.9 * var(--u));
    }

    .s8 nav {
        position: absolute;
        top: calc(52 * var(--u));
        left: calc(85.1 * var(--u));
    }

    .s8 nav + nav {
        left: calc(181 * var(--u));
    }

    /* Высота строки 0, как в макете: текст центрируется по координате строки. */
    .s8 h2 {
        position: relative;
        margin: 0;
        font-size: calc(8 * var(--u));
        font-weight: 500;
        line-height: 0;
        white-space: nowrap;
    }

    .s8 nav + nav h2 {
        font-weight: 400;
    }

    .s8 h2::after {
        content: '';
        position: absolute;
        left: 0;
        top: calc(5 * var(--u));
        width: calc(50 * var(--u));
        height: calc(1 * var(--u));
        background: #d9d9d9;
    }

    .s8 nav + nav h2::after {
        width: calc(105 * var(--u));
    }

    /* В макете у правовой колонки две ссылки, у нас четыре — шаг строк у обеих колонок чуть меньше. */
    .s8 ul {
        margin-top: calc(14.7 * var(--u));
    }

    .s8 li,
    .s8 li + li {
        height: calc(11.6 * var(--u));
        margin: 0;
        line-height: 0;
        font-weight: 200;
        white-space: nowrap;
    }

    .s8-contacts > a {
        position: absolute;
        left: calc(181 * var(--u));
        top: calc(113.1 * var(--u));
        font-weight: 200;
        line-height: 0;
    }

    .s8-contacts > a + a {
        margin-top: 0;
    }

    /* Поддержка в Telegram — под иконками: под почтой на телефоне строка с реквизитами. */
    .s8-contacts > .s8-support {
        left: calc(296 * var(--u));
        top: calc(101 * var(--u));
        width: calc(94 * var(--u));
        text-align: center;
        white-space: nowrap;
    }

    .s8-support span {
        display: none;
    }

    /* В макете три иконки по 21 единице; с TikTok их четыре, поэтому чуть мельче и плотнее. */
    .s8-social {
        position: absolute;
        left: calc(296 * var(--u));
        top: calc(71 * var(--u));
        display: block;
        margin: 0;
    }

    .s8-social a,
    .s8-social .icon {
        position: absolute;
        top: 0;
        width: calc(19 * var(--u));
        height: calc(19 * var(--u));
    }

    .s8-social > :nth-child(1) {
        left: 0;
        width: calc(25 * var(--u));
    }

    .s8-social > :nth-child(2) {
        left: calc(27 * var(--u));
    }

    .s8-social > :nth-child(3) {
        left: calc(51 * var(--u));
    }

    .s8-social > :nth-child(4) {
        left: calc(75 * var(--u));
    }

    .s8-social svg {
        display: none;
    }

    /* У TikTok нет картинки из мобильного макета — остаётся векторная иконка. */
    .s8-social > :nth-child(4) svg {
        display: block;
    }

    .s8-social img {
        width: 100%;
        height: 100%;
    }

    /* В макете иконки обесцвечены фильтрами Figma. */
    .s8-social > :nth-child(1) img {
        filter: brightness(0) invert(0.8);
    }

    .s8-social > :nth-child(2) img {
        filter: grayscale(1) contrast(0.81);
    }

    .s8-social > :nth-child(3) img {
        filter: grayscale(1) brightness(2) contrast(1.3);
    }

    .s8-legal {
        position: absolute;
        left: calc(85 * var(--u));
        top: calc(124 * var(--u));
        width: calc(133 * var(--u));
        font-size: calc(3 * var(--u));
        line-height: 1.4;
        text-align: left;
    }

    /* В макете «ОГРН», у нас правильное «ОГРНИП» — в одну строку реквизиты наезжают на «©»,
       поэтому переносятся на вторую. */
    .s8-legal p:first-child {
        width: calc(118 * var(--u));
    }

    .s8-legal p + p {
        position: absolute;
        left: calc(121 * var(--u));
        top: 0;
        width: calc(105 * var(--u));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .lp * {
        transition: none !important;
    }
}