/* rgate — лендинг.
 *
 * Спецификация: docs/LANDING-DESIGN.md. Правила, которые здесь соблюдаются
 * буквально и нарушать которые нельзя без правки спецификации:
 *   — начертаний тяжелее 500 нет ни одного;
 *   — теней нет нигде: ни box-shadow, ни drop-shadow;
 *   — скругления ровно в двух местах и ровно 4px: кнопка и поле ввода;
 *   — чистого белого на странице нет;
 *   — латунь только для величин, за которые сервис отвечает;
 *   — «живой» цвет ровно на одном объекте: замер задержки читателя.
 */

/* ─── Гарнитуры ──────────────────────────────────────────────────────
 * Файлами рядом с CSS. Ни CDN, ни Google Fonts: страница обязана
 * подниматься там, где половина интернета недоступна — это буквально
 * её предмет.
 */

@font-face {
    font-family: "Geologica";
    src: url("fonts/Geologica-cyrillic-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Geologica";
    src: url("fonts/Geologica-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2192, U+2212, U+2215;
}
@font-face {
    font-family: "Geologica";
    src: url("fonts/Geologica-cyrillic-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Geologica";
    src: url("fonts/Geologica-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2192, U+2212, U+2215;
}

@font-face {
    font-family: "Golos Text";
    src: url("fonts/GolosText-cyrillic-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    src: url("fonts/GolosText-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2192, U+2212, U+2215;
}
@font-face {
    font-family: "Golos Text";
    src: url("fonts/GolosText-cyrillic-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    src: url("fonts/GolosText-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2192, U+2212, U+2215;
}

/* PT Mono вместо Iosevka из спецификации. Причина инженерная, та же самая:
 * нужен узкий знак, чтобы подписи оси через каждые 5 мс не сталкивались.
 * Iosevka не отдаёт кириллический поднабор, а её латиница весит 984 КБ —
 * почти в четыре раза больше, чем все три гарнитуры страницы вместе.
 * PT Mono рисован в Paratype там же, где Golos Text, и кириллица у него
 * родная, а не достроенная. */
@font-face {
    font-family: "PT Mono";
    src: url("fonts/PTMono-cyrillic-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Mono";
    src: url("fonts/PTMono-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2192, U+2212, U+2215;
}

/* ─── Токены ─────────────────────────────────────────────────────────
 * Тема меняется переопределением токенов, а не правилами внутри
 * медиазапроса: иначе ручное переключение не смогло бы перебить системное.
 */

:root {
    --font-display: "Geologica", "Golos Text", system-ui, sans-serif;
    --font-text: "Golos Text", system-ui, "Segoe UI", sans-serif;
    --font-mono: "PT Mono", ui-monospace, "Cascadia Mono", monospace;

    --paper: #eceee7;
    --paper-inset: #e3e6de;
    --ink: #1a231f;
    --pine: #2c5a4c;
    --pine-strong: #22463b;
    --pine-faint: rgb(44 90 76 / 0.45);
    --brass: #8f6c1c;
    --brass-deep: #6b4f12;
    --live: #0c7a5e;
    --smoke: #63706a;
    --smoke-line: #7f8b84;
    --rule: #d2d8cf;
    --chalk: #f8f9f4;
    --night: #141a17;

    /* Сетка. --x0 — нулевая линия: левый край текстовой колонки. По ней
       выровнено всё, включая нулевую отметку шкалы. */
    --page-max: 1240px;
    --pad: 40px;
    --x0: 0px;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #141a17;
        --paper-inset: #1c2420;
        --ink: #e8ebe3;
        --pine: #6fb29a;
        --pine-strong: #8ac7b1;
        --pine-faint: rgb(111 178 154 / 0.5);
        --brass: #d3a748;
        --brass-deep: #ddb662;
        --live: #35c79b;
        --smoke: #96a29b;
        --smoke-line: #5e6a64;
        --rule: #28312c;
        --chalk: #0f1512;
        --night: #0e1310;
    }
}

:root[data-theme="dark"] {
    --paper: #141a17;
    --paper-inset: #1c2420;
    --ink: #e8ebe3;
    --pine: #6fb29a;
    --pine-strong: #8ac7b1;
    --pine-faint: rgb(111 178 154 / 0.5);
    --brass: #d3a748;
    --brass-deep: #ddb662;
    --live: #35c79b;
    --smoke: #96a29b;
    --smoke-line: #5e6a64;
    --rule: #28312c;
    --chalk: #0f1512;
    --night: #0e1310;
}

:root[data-theme="light"] {
    --paper: #eceee7;
    --paper-inset: #e3e6de;
    --ink: #1a231f;
    --pine: #2c5a4c;
    --pine-strong: #22463b;
    --pine-faint: rgb(44 90 76 / 0.45);
    --brass: #8f6c1c;
    --brass-deep: #6b4f12;
    --live: #0c7a5e;
    --smoke: #63706a;
    --smoke-line: #7f8b84;
    --rule: #d2d8cf;
    --chalk: #f8f9f4;
    --night: #141a17;
}

/* ─── Основа ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Умолчание браузера здесь — чистый белый. Он ничего не красит, но
       пусть на странице не будет белого даже в вычисленных стилях: правило
       «белого нет» проверяется автоматически, и исключения из него потом
       приходится каждый раз объяснять заново. */
    color: var(--ink);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.56;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

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

p {
    margin: 0;
    max-width: 62ch;
}

a {
    color: var(--pine);
    text-decoration-color: var(--pine-faint);
    text-underline-offset: 3px;
}
a:hover {
    text-decoration-color: var(--pine);
}

:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 3px;
}

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

/* ─── Шкала кеглей: ровно семь ступеней ──────────────────────────────── */

.d1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.022em;
    font-weight: 500;
}
.d2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.14;
    letter-spacing: -0.012em;
    font-weight: 500;
}
.d3 {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}
.lead {
    font-size: 20px;
    line-height: 1.5;
    max-width: 44ch;
}
.t {
    font-size: 17px;
    line-height: 1.56;
    max-width: 62ch;
}
.s {
    font-size: 14px;
    line-height: 1.45;
    color: var(--smoke);
    max-width: 68ch;
}
.m {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}
.m--label {
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* Измеренная величина. Латунь означает: за это число сервис отвечает. */
.val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--brass-deep);
}
.val--lg {
    font-size: 20px;
    color: var(--brass);
}

/* ─── Раскладка ──────────────────────────────────────────────────────── */

.wrap {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--pad);
}

section {
    padding-block: 96px;
    border-top: 1px solid var(--rule);
}
section:first-of-type {
    border-top: 0;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pine);
    margin-bottom: 20px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stack--tight {
    gap: 12px;
}
.stack--wide {
    gap: 32px;
}

/* ─── Шапка ──────────────────────────────────────────────────────────── */

.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-block: 20px;
    flex-wrap: wrap;
}

.brand {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.top__nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-inline-end: auto;
    margin-inline-start: 8px;
}
.top__nav a {
    color: var(--smoke);
    text-decoration: none;
}
.top__nav a:hover {
    color: var(--ink);
}

/* ─── Кнопка ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 13px 22px;
    border: 0;
    border-radius: 4px;
    background: var(--pine);
    color: var(--chalk);
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 90ms linear;
}
.btn:hover,
.btn:focus-visible {
    background: var(--pine-strong);
}

/* Текстовая кнопка-демонстрация: подчёркнутая ссылка, не «вторичная кнопка». */
.btn-text {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pine);
    font-family: var(--font-text);
    font-size: 17px;
    text-decoration: underline;
    text-decoration-color: var(--pine-faint);
    text-underline-offset: 4px;
    cursor: pointer;
}
.btn-text:hover {
    text-decoration-color: var(--pine);
}

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

.hero {
    padding-block: 72px 64px;
}
.hero__lead {
    margin-top: 24px;
}
.hero__cta {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.hero__close {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

/* ─── Шкала ──────────────────────────────────────────────────────────── */

.scale {
    padding-block: 72px 96px;
}
.scale__head {
    color: var(--smoke);
    margin-bottom: 28px;
}
.scale__figure {
    margin: 0;
    /* Шкала выходит за поля колонки: она инструмент во всю ширину, а не
       иллюстрация внутри текста. */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    overflow: hidden;
}
.scale__svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: pan-y;
}
.scale__note {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Без JS шкала не рисуется — тогда показываем ту же таблицу видимой.
   Данные важнее графика, и отсутствие скрипта не повод их прятать. */
.no-js .scale__svg {
    display: none;
}
.no-js .scale__table {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
}

.scale__table {
    border-collapse: collapse;
    font-size: 14px;
}
.scale__table th,
.scale__table td {
    text-align: left;
    padding: 8px 20px 8px 0;
    border-bottom: 1px solid var(--rule);
    /* Умолчание <th> — 700. На странице нет начертаний тяжелее 500, и
       таблица не исключение: без JS она показывается вместо графика,
       то есть видна читателю. */
    font-weight: 500;
}
.scale__table td:nth-child(2) {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--brass-deep);
}

/* ─── Схема «снаружи»: строки без рамок и фона ───────────────────────── */

.rows {
    display: grid;
    grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
    gap: 10px 32px;
    margin-block: 8px;
}
.rows dt {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--smoke);
    padding-top: 2px;
}
.rows dd {
    margin: 0;
    font-size: 15px;
}

/* ─── Спецификация тарифа ────────────────────────────────────────────── */

.spec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
    gap: 0 32px;
    max-width: 74ch;
}
.spec dt,
.spec dd {
    padding-block: 11px;
    border-bottom: 1px solid var(--rule);
}
.spec dt {
    font-size: 16px;
}
.spec dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--brass-deep);
    align-self: center;
}
/* Значение словами — не измеренная величина, латунью не красится. */
.spec dd.words {
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--ink);
}

/* ─── Отказы, шаги, вопросы ──────────────────────────────────────────── */

.blocks {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr));
    margin-top: 8px;
}
.block__title {
    margin-bottom: 10px;
}

.steps {
    display: grid;
    gap: 36px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.steps li {
    display: grid;
    grid-template-columns: 3ch minmax(0, 1fr);
    gap: 0 20px;
    counter-increment: step;
}
/* Нумерация оправдана только здесь: это последовательность действий. */
.steps li::before {
    content: counter(step);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--smoke);
    padding-top: 6px;
}

.qa {
    display: grid;
    gap: 32px;
    margin-top: 8px;
}

/* ─── Финальный блок и подвал ────────────────────────────────────────── */

.final {
    background: var(--night);
    color: var(--chalk);
    border-top: 0;
    padding-block: 88px;
}
.final h2,
.final p {
    color: var(--chalk);
}
.final .s {
    color: var(--smoke);
}
.final__price {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
}

.foot {
    padding-block: 40px 64px;
    border-top: 1px solid var(--rule);
    color: var(--smoke);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.foot a {
    color: var(--smoke);
}
.foot__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* ─── Узкий экран ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    :root {
        --pad: 20px;
    }
    body {
        font-size: 17px;
    }
    .lead {
        font-size: 18px;
    }
    section {
        padding-block: 64px;
    }
    .hero {
        padding-block: 48px 48px;
    }
    .spec {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .spec dt {
        border-bottom: 0;
        padding-bottom: 2px;
    }
    .spec dd {
        padding-top: 0;
    }
    .rows {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }
    .rows dd {
        margin-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}