@charset "UTF-8";

/* =============================================================================
   hitum.lat — дизайн-система (этап 9, редизайн этапа 41)

   Единственный файл стилей проекта: layout подключает его сам, других таблиц
   стилей и инлайн-стилей на сайте нет.

   Источник правды по оформлению — раздел «СТИЛИСТИКА» в CLAUDE.md. Здесь он
   переложен в код один в один: 12 цветовых переменных и ни одной сверх, шкала
   отступов 4/8/12/16/24/32/48/64/96, типографическая шкала, радиусы 2–4px,
   анимации только 120–160ms на цвет, рамку и фон.

   Тема одна — тёмная: чёрный фон, белый текст, серые подписи моноширинным
   шрифтом и один жёлтый акцент. Текст на жёлтом — цвет фона страницы
   (--background), отдельной переменной под него нет.

   Порядок разделов:
     1. Шрифты
     2. Токены
     3. Сброс и база
     4. Типографика
     5. Сетка, контейнеры, ритм секций
     6. Шапка, навигация и мобильный CTA
     7. Хлебные крошки
     8. Подвал
     9. Кнопки и ссылки-действия
    10. Карточки и каталожные строки
    11. Таблицы
    12. Бейджи статуса
    13. Callout
    14. Аккордеон
    15. Формы
    16. Служебные страницы (заглушка, ошибки, отсчёт)
    17. Иллюстрации и иконки
    18. Загрузка: кнопка, выбор платформы, каталог, версия, магазины
    19. Контентные страницы: hero, возможности, установка, база знаний, версии
    20. Утилиты и уважение к prefers-reduced-motion
   ========================================================================== */


/* 1. ШРИФТЫ ================================================================ */

/* Локальные субсеты (латиница + кириллица), внешних CDN нет.
   Golos Text — весь текст и заголовки; PT Mono — подписи, номера, меню
   и кнопки: моноширинный шрифт в верхнем регистре и есть голос интерфейса. */

@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT Mono";
    src: url("../fonts/ptmono-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "PT Mono";
    src: url("../fonts/ptmono-400-cyrillic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* 2. ТОКЕНЫ ================================================================ */

:root {
    /* Цвет — ровно 12 переменных контракта. Новые не заводятся, HEX в правилах
       ниже не пишется. Текст на жёлтом берётся из --background. */
    --background: #0A0A0A;
    --surface: #141414;
    --surface-secondary: #1C1C1C;
    --text-primary: #FFFFFF;
    --text-secondary: #9A9A9A;
    --brand: #FFD23F;
    --brand-hover: #FFE270;
    --brand-soft: #2B2410;
    --border: #2E2E2E;
    --success: #5CD98A;
    --warning: #F0B429;
    --error: #FF6B6B;

    /* Отступы: значений мимо этой шкалы в проекте нет. */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;

    /* Радиусы: 2–4px, углы почти прямые. */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;

    /* Шрифты. */
    --font-display: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Типографическая шкала: мобильные значения, десктопные ниже по медиазапросу. */
    --step-display: 44px;
    --step-h1: 32px;
    --step-h2: 26px;
    --step-h3: 20px;
    --step-h4: 18px;
    --step-body: 16px;
    --step-small: 14px;
    --step-caption: 12px;

    --leading-tight: 1.1;
    --leading-body: 1.6;

    /* Ширины и сетка. */
    --container-page: 1120px;
    --container-text: 720px;
    --container-aside: 320px;
    --gutter: var(--space-16);
    --grid-gap: var(--space-24);
    --header-height: 60px;

    /* Ритм секций. */
    --section-space: var(--space-48);

    /* Длительность: только смена цвета, рамки, фона и раскрытие аккордеона. */
    --duration-fast: 120ms;
    --duration-base: 160ms;

    /* Линия в 1px и кольцо фокуса — повторяются в десятке мест. */
    --hairline: 1px solid var(--border);
    --focus-ring: 2px solid var(--brand);
}

@media (min-width: 768px) {
    :root {
        --step-display: 88px;
        --step-h1: 44px;
        --step-h2: 32px;
        --step-h3: 24px;
        --step-h4: 20px;
        --step-body: 17px;
        --step-caption: 13px;

        --gutter: var(--space-24);
        --header-height: 72px;
        --section-space: var(--space-96);
    }
}


/* 3. СБРОС И БАЗА ========================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-16));
    color-scheme: dark;
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--step-body);
    font-weight: 400;
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Атрибут hidden сильнее любого display из классов: иначе кнопка
   с display: inline-flex остаётся видимой, когда скрипт её спрятал. */
[hidden] {
    display: none !important;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Ссылка «к содержанию» живёт за пределами экрана и выезжает только по фокусу. */
.skip-link {
    position: absolute;
    left: -10000px;
    top: var(--space-16);
    z-index: 50;
    padding: var(--space-12) var(--space-16);
    background-color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius-md);
    color: var(--background);
    font-family: var(--font-mono);
    font-size: var(--step-small);
    text-transform: uppercase;
    text-decoration: none;
}

.skip-link:focus {
    left: var(--space-16);
}


/* 4. ТИПОГРАФИКА =========================================================== */

/* Длинные русские слова переносятся по слогам на узких экранах: горизонтальная
   прокрутка страницы хуже некрасивого переноса. */
h1,
.h1,
h2,
.h2 {
    hyphens: auto;
    hyphenate-limit-chars: 12 6 4;
    overflow-wrap: break-word;
}

h1,
.h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-h1);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-size: var(--step-h2);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

h3,
.h3 {
    font-size: var(--step-h3);
    font-weight: 600;
    line-height: 1.25;
}

h4,
.h4 {
    font-size: var(--step-h4);
    font-weight: 600;
    line-height: 1.3;
}

h5,
h6 {
    font-size: var(--step-body);
    font-weight: 600;
    line-height: 1.35;
}

small,
.text-small {
    font-size: var(--step-small);
}

.text-caption {
    font-size: var(--step-caption);
    line-height: 1.45;
    color: var(--text-secondary);
}

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

/* Моноширинная подпись — голос интерфейса: номера секций, метки, меню. */
.eyebrow,
.mono {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.eyebrow {
    display: block;
    margin-bottom: var(--space-12);
}

/* Крупная цифра — отсчёт, номер версии. */
.numeral {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--text-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
    color: var(--brand);
    text-decoration-color: var(--brand);
}

strong,
b {
    font-weight: 600;
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
}

hr,
.hairline {
    height: 0;
    margin: 0;
    border: 0;
    border-top: var(--hairline);
}

/* Текстовая колонка: всё, что читается подряд — статья, FAQ, инструкция. */
.prose {
    max-width: var(--container-text);
}

.prose > * + * {
    margin-top: var(--space-16);
}

.prose > * + h2 {
    margin-top: var(--space-48);
}

.prose > * + h3,
.prose > * + h4 {
    margin-top: var(--space-32);
}

.prose ul,
.prose ol {
    padding-left: var(--space-24);
}

.prose li + li {
    margin-top: var(--space-8);
}

.prose ul {
    list-style: none;
    padding-left: 0;
}

.prose ul > li {
    position: relative;
    padding-left: var(--space-24);
}

/* Маркер — короткая жёлтая линейка, тот же приём, что и разделители. */
.prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: var(--space-12);
    border-top: 1px solid var(--brand);
}

.list-plain {
    list-style: none;
}

.list-plain > li + li {
    margin-top: var(--space-8);
}


/* 5. СЕТКА, КОНТЕЙНЕРЫ, РИТМ СЕКЦИЙ ======================================== */

.container {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.main {
    display: block;
    min-height: 50vh;
    padding-bottom: var(--section-space);
}

.section {
    padding-block: var(--section-space);
}

.section--compact {
    padding-block: var(--space-32);
}

/* Ритм: соседние секции разводятся не заливкой, а линейками. Полосатая и
   «поверхностная» секции получают чуть более светлый фон — второй тон серого. */
.section--striped {
    background-color: var(--surface-secondary);
}

.section--surface {
    background-color: var(--surface);
    border-block: var(--hairline);
}

/* Заголовок секции: моноширинный номер «01 /», под ним заголовок и линейка. */
.section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-bottom: var(--space-24);
    margin-bottom: var(--space-32);
    border-bottom: var(--hairline);
}

.section__number {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.section__number::after {
    content: " /";
}

.section__lead {
    max-width: var(--container-text);
    color: var(--text-secondary);
}

/* Асимметричный разворот: контент слева, липкая колонка справа. */
.layout {
    display: grid;
    gap: var(--space-32);
}

.layout__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

@media (min-width: 1024px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) var(--container-aside);
        gap: var(--space-64);
        align-items: start;
    }

    .layout__aside {
        position: sticky;
        top: calc(var(--header-height) + var(--space-24));
    }
}

/* Ряд метаданных под заголовком: платформа · версия · размер. */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.meta-row > li + li {
    position: relative;
    padding-left: var(--space-16);
}

.meta-row > li + li::before {
    content: "/";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--border);
}

/* Ряды кнопок и ссылок. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
}


/* 6. ШАПКА, НАВИГАЦИЯ И МОБИЛЬНЫЙ CTA ====================================== */

/* Этажей z-index четыре: ссылка «к содержанию» (50) выше шапки (40), шапка
   выше панели меню (30), панель выше нижнего CTA (20), CTA выше контента. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--background);
    border-bottom: var(--hairline);
}

.site-header__inner {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-h4);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) ease;
}

.site-header__logo:hover {
    color: var(--brand);
}

.site-header__logo-image {
    display: block;
    width: auto;
    height: 28px;
}

@media (min-width: 768px) {
    .site-header__logo-image {
        height: 32px;
    }
}

/* Кнопка мобильного меню приходит с атрибутом hidden и открывается скриптом. */
.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 40px;
    padding-inline: var(--space-12);
    background-color: transparent;
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        background-color var(--duration-fast) ease;
}

.site-nav__toggle[hidden] {
    display: none;
}

.site-nav__toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.site-nav__toggle[aria-expanded="true"] {
    color: var(--background);
    border-color: var(--brand);
    background-color: var(--brand);
}

.site-nav__toggle-icon {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 16px;
}

.site-nav__toggle-icon > span {
    display: block;
    height: 2px;
    background-color: currentColor;
}

.site-nav__toggle-text {
    min-width: 4.5em;
    text-align: left;
}

.site-nav__list,
.site-nav__sublist {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-24);
}

/* Пункт меню — моноширинная подпись с фирменным префиксом «</>». */
.site-nav__link,
.site-nav__group-label {
    display: inline-block;
    padding-block: var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.site-nav__link::before,
.site-nav__group-label::before {
    content: "</> ";
    color: var(--text-secondary);
    transition: color var(--duration-fast) ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.site-nav__link:hover::before,
.site-nav__link[aria-current="page"]::before {
    color: var(--brand);
}

.site-nav__group-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    background-color: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    padding-inline: 0;
    color: var(--text-primary);
    cursor: pointer;
}

.site-nav__group-label:hover,
.site-nav__group-label[aria-expanded="true"],
.site-nav__group-label.is-active {
    color: var(--brand);
}

.site-nav__group-label:hover::before,
.site-nav__group-label[aria-expanded="true"]::before,
.site-nav__group-label.is-active::before {
    color: var(--brand);
}

.site-nav__group-label.is-active,
.site-nav__group-label[aria-expanded="true"] {
    border-bottom-color: var(--brand);
}

.site-nav__chevron {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
}

.site-nav__group-label[aria-expanded="true"] .site-nav__chevron {
    rotate: 225deg;
    translate: 0 2px;
}

.site-nav__item--group {
    position: relative;
}

.site-nav__note {
    display: none;
}


/* 6.1. Десктоп: строка меню и раскрывающийся блок «Платформы» --------------- */

@media (min-width: 1024px) {
    .site-nav__toggle {
        display: none;
    }

    .site-nav__item--group > .site-nav__sublist {
        position: absolute;
        top: 100%;
        left: calc(-1 * var(--space-16));
        z-index: 12;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 220px;
        padding: var(--space-8) 0;
        background-color: var(--surface);
        border: var(--hairline);
        border-radius: var(--radius-lg);
    }

    html:not(.has-js) .site-nav__item--group > .site-nav__sublist {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-base) ease;
    }

    html:not(.has-js) .site-nav__item--group:hover > .site-nav__sublist,
    html:not(.has-js) .site-nav__item--group:focus-within > .site-nav__sublist {
        opacity: 1;
        pointer-events: auto;
    }

    .has-js .site-nav__sublist[hidden] {
        display: none;
    }

    .site-nav__sublist .site-nav__link {
        display: block;
        padding: var(--space-8) var(--space-16);
        border-bottom: 0;
        border-left: 2px solid transparent;
    }

    .site-nav__sublist .site-nav__link:hover,
    .site-nav__sublist .site-nav__link[aria-current="page"] {
        border-left-color: var(--brand);
        background-color: var(--brand-soft);
    }
}


/* 6.2. Мобильное меню ------------------------------------------------------ */

@media (max-width: 1023px) {
    html:not(.has-js) .site-header__inner {
        flex-wrap: wrap;
        padding-bottom: var(--space-8);
    }

    html:not(.has-js) .site-nav__panel {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html:not(.has-js) .site-nav__list {
        flex-wrap: nowrap;
        padding-bottom: var(--space-4);
    }

    html:not(.has-js) .site-nav__item--group {
        display: flex;
        align-items: center;
        gap: var(--space-12);
    }

    .has-js .site-nav__panel {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--space-8) var(--gutter) var(--space-48);
        background-color: var(--background);
        border-top: var(--hairline);
    }

    .has-js .site-nav__panel[data-open="true"] {
        display: block;
    }

    .has-js .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: var(--container-text);
        margin-inline: auto;
    }

    .has-js .site-nav__list > .site-nav__item {
        border-bottom: var(--hairline);
    }

    .has-js .site-nav__list > .site-nav__item > .site-nav__link,
    .has-js .site-nav__group-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding-block: var(--space-16);
        font-size: var(--step-small);
        border-bottom: 0;
        white-space: normal;
    }

    .has-js .site-nav__group-label[aria-expanded="true"] {
        color: var(--brand);
    }

    .has-js .site-nav__sublist {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: var(--space-8);
        padding-left: var(--space-16);
        border-left: 1px solid var(--brand);
    }

    .has-js .site-nav__sublist[hidden] {
        display: none;
    }

    .has-js .site-nav__sublist .site-nav__link {
        display: block;
        min-height: 44px;
        padding-block: var(--space-8);
        border-bottom: 0;
    }

    .has-js .site-nav__note {
        display: block;
        width: 100%;
        max-width: var(--container-text);
        margin-inline: auto;
        margin-top: var(--space-24);
        font-family: var(--font-mono);
        font-size: var(--step-caption);
        color: var(--text-secondary);
    }

    .is-menu-open {
        overflow: hidden;
    }
}


/* 6.3. Нижняя панель загрузки на мобильном --------------------------------- */

.mobile-cta {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        display: block;
        background-color: var(--background);
        border-top: var(--hairline);
    }

    .mobile-cta__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
        width: 100%;
        max-width: var(--container-page);
        margin-inline: auto;
        padding: var(--space-8) var(--gutter);
    }

    .mobile-cta__text {
        font-family: var(--font-mono);
        font-size: var(--step-caption);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
        line-height: 1.3;
    }

    .mobile-cta__button {
        flex-shrink: 0;
    }

    .has-mobile-cta .site-footer__legal {
        padding-bottom: var(--space-96);
    }

    html.has-mobile-cta {
        scroll-padding-bottom: var(--space-96);
    }

    .is-menu-open .mobile-cta {
        display: none;
    }
}


/* 7. ХЛЕБНЫЕ КРОШКИ ======================================================== */

.breadcrumbs {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding: var(--space-16) var(--gutter) 0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    margin-right: var(--space-8);
    color: var(--border);
}

.breadcrumbs__link {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumbs__link:hover {
    color: var(--brand);
}

.breadcrumbs__current {
    color: var(--text-primary);
}


/* 8. ПОДВАЛ ================================================================ */

.site-footer {
    background-color: var(--background);
    border-top: var(--hairline);
    padding-top: var(--space-48);
}

.site-footer__inner {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--space-32);
    grid-template-columns: 1fr;
    padding-bottom: var(--space-48);
}

@media (min-width: 600px) {
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-32) var(--grid-gap);
    }
}

@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.site-footer__title {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding-bottom: var(--space-12);
    margin-bottom: var(--space-16);
    border-bottom: var(--hairline);
}

.site-footer__title::before {
    content: "</> ";
}

.site-footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    font-size: var(--step-small);
}

.site-footer__list a {
    color: var(--text-primary);
    text-decoration: none;
}

.site-footer__list a:hover {
    color: var(--brand);
}

.site-footer__legal {
    width: 100%;
    padding-block: var(--space-24) var(--space-32);
    border-top: var(--hairline);
}

.site-footer__copy,
.site-footer__legal-list {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.site-footer__legal-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);
    margin-top: var(--space-12);
}

.site-footer__legal-list a {
    color: var(--text-secondary);
    text-decoration: none;
}

.site-footer__legal-list a::before {
    content: "</> ";
    color: var(--border);
}

.site-footer__legal-list a:hover {
    color: var(--brand);
}


/* 9. КНОПКИ И ССЫЛКИ-ДЕЙСТВИЯ ============================================== */

/* Кнопка — прямоугольник с моноширинной подписью в верхнем регистре и
   префиксом «</>». Primary — жёлтая заливка с чёрным текстом, secondary —
   белая рамка, tertiary — текстовая ссылка. Без градиентов, теней и pill. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 48px;
    padding-inline: var(--space-24);
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--step-small);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration-base) ease,
        border-color var(--duration-base) ease,
        color var(--duration-base) ease;
}

.btn::before {
    content: "</>";
    opacity: 0.6;
}

/* Иконка внутри кнопки дублирует префикс — прячется. */
.btn > .icon {
    display: none;
}

.btn--primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--background);
}

.btn--primary:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--background);
}

.btn--secondary {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.btn--secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
    background-color: transparent;
}

.btn--tertiary {
    min-height: auto;
    padding-inline: 0;
    border: 0;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn--tertiary::before {
    content: none;
}

.btn--tertiary:hover {
    color: var(--brand-hover);
}

.btn--compact {
    min-height: 40px;
    padding-inline: var(--space-16);
    font-size: var(--step-caption);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    background-color: var(--surface-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.btn-note {
    display: block;
    margin-top: var(--space-8);
    font-size: var(--step-caption);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}


/* 10. КАРТОЧКИ И КАТАЛОЖНЫЕ СТРОКИ ========================================= */

.card {
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
}

.card--compact {
    padding: var(--space-16);
}

.card__title {
    display: block;
    font-size: var(--step-h4);
    font-weight: 600;
}

.card__title + * {
    margin-top: var(--space-8);
}

.card__text {
    display: block;
    color: var(--text-secondary);
    font-size: var(--step-small);
}

.card > * + * {
    margin-top: var(--space-12);
}

.card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease;
}

.card--link:hover {
    border-color: var(--brand);
    color: inherit;
}

.card--link:hover .card__title {
    color: var(--brand);
}

/* Каталожные строки вместо сетки одинаковых карточек. */
.rows {
    list-style: none;
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rows__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
    padding: var(--space-16) var(--space-24);
}

.rows__item + .rows__item {
    border-top: var(--hairline);
}

.rows__title {
    font-weight: 600;
    flex: 1 1 200px;
}

.rows__title a {
    text-decoration: none;
}

.rows__meta {
    font-size: var(--step-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}


/* 11. ТАБЛИЦЫ ============================================================== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    min-width: 480px;
    font-size: var(--step-small);
    font-variant-numeric: tabular-nums;
}

.table caption {
    padding: var(--space-16) var(--space-16) 0;
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.table th,
.table td {
    padding: var(--space-12) var(--space-16);
    text-align: left;
    vertical-align: top;
}

.table thead th {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--step-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom: var(--hairline);
    white-space: nowrap;
}

.table tbody tr + tr {
    border-top: var(--hairline);
}

.table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.table--zebra tbody tr:nth-child(even) {
    background-color: var(--surface-secondary);
}

@media (max-width: 559px) {
    .table--stack {
        min-width: 0;
    }

    .table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table--stack tr {
        display: block;
        padding: var(--space-16);
    }

    .table--stack tbody tr + tr {
        border-top: var(--hairline);
    }

    .table--stack th,
    .table--stack td {
        display: block;
        padding: 0;
    }

    .table--stack tbody th {
        white-space: normal;
    }

    .table--stack td + td,
    .table--stack th + td {
        margin-top: var(--space-8);
    }

    .table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-mono);
        font-size: var(--step-caption);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
    }
}


/* 12. БЕЙДЖИ СТАТУСА ======================================================= */

/* Цвет никогда не единственный носитель смысла: текст в бейдже обязателен. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--text-secondary);
}

.badge--available {
    border-color: var(--success);
    color: var(--success);
}

.badge--pending {
    border-color: var(--warning);
    color: var(--warning);
}

.badge--unavailable {
    border-color: var(--error);
    color: var(--error);
}

.badge--neutral {
    border-color: var(--border);
    color: var(--text-secondary);
}


/* 13. CALLOUT ============================================================== */

.callout {
    background-color: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-24);
    font-size: var(--step-small);
}

.callout__title {
    font-size: var(--step-body);
    font-weight: 600;
    margin-bottom: var(--space-8);
}

.callout > * + * {
    margin-top: var(--space-8);
}

.callout--warning {
    background-color: var(--surface);
    border-color: var(--warning);
}

.callout--quiet {
    background-color: var(--surface);
    border-color: var(--border);
}


/* 14. АККОРДЕОН ============================================================ */

.accordion {
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordion__item + .accordion__item {
    border-top: var(--hairline);
}

.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-24);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__summary:hover {
    background-color: var(--surface-secondary);
    color: var(--brand);
}

.accordion__summary::after {
    content: "";
    flex: 0 0 auto;
    width: var(--space-8);
    height: var(--space-8);
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--duration-base) ease;
}

.accordion__item[open] > .accordion__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.accordion__body {
    padding: 0 var(--space-24) var(--space-24);
    font-size: var(--step-small);
    color: var(--text-secondary);
}

.accordion__body > * + * {
    margin-top: var(--space-12);
}

@supports selector(::details-content) {
    .accordion__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--duration-base) ease, content-visibility var(--duration-base) allow-discrete;
    }

    .accordion__item[open]::details-content {
        block-size: auto;
    }
}


/* 15. ФОРМЫ ================================================================ */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.field__label {
    font-size: var(--step-small);
    font-weight: 500;
}

.field__hint {
    font-size: var(--step-caption);
    color: var(--text-secondary);
}

.field__error {
    font-size: var(--step-caption);
    color: var(--error);
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-12) var(--space-16);
    background-color: var(--surface);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--step-body);
    transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease;
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--text-primary);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-secondary);
}

.select {
    appearance: none;
    padding-right: var(--space-32);
    cursor: pointer;
}


/* 16. СЛУЖЕБНЫЕ СТРАНИЦЫ =================================================== */

.page-stub,
.error-page,
.interstitial {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding: var(--space-48) var(--gutter) 0;
}

.page-stub__title,
.error-page__title,
.interstitial__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-h1);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    max-width: var(--container-text);
}

.page-stub__lead,
.error-page__lead,
.interstitial__lead {
    max-width: var(--container-text);
    margin-top: var(--space-16);
    color: var(--text-secondary);
}

.interstitial > * {
    max-width: var(--container-text);
}

.interstitial .callout {
    margin-top: var(--space-32);
}

.interstitial__actions {
    margin-top: var(--space-32);
    align-items: flex-start;
}

.interstitial__note {
    margin-top: var(--space-32);
    padding-top: var(--space-24);
    border-top: var(--hairline);
    color: var(--text-secondary);
}

.interstitial__note > * + * {
    margin-top: var(--space-12);
}

/* Отсчёт перед загрузкой: крупная цифра, под ней полоса заполнения. */
.countdown__timer {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
    margin-top: var(--space-32);
}

.countdown__number {
    font-size: var(--step-display);
    line-height: 1;
    color: var(--brand);
    min-width: 2ch;
}

.countdown__unit {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.countdown__bar {
    height: 2px;
    margin-top: var(--space-16);
    background-color: var(--border);
    overflow: hidden;
}

.countdown__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--brand);
}

.countdown.is-done .countdown__number {
    color: var(--success);
}

.countdown__partner {
    margin-top: var(--space-24);
}

.countdown__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16) var(--space-24);
    margin-top: var(--space-32);
    padding: var(--space-16) var(--space-24);
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

@media (min-width: 600px) {
    .countdown__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.countdown__facts dt {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.countdown__facts dd {
    margin-top: var(--space-4);
    font-size: var(--step-small);
    font-weight: 600;
}

.page-stub__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-24);
    margin-top: var(--space-32);
    padding-top: var(--space-24);
    border-top: var(--hairline);
    max-width: var(--container-text);
}

.error-page > * {
    max-width: var(--container-text);
}

.error-page__code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--step-caption);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.error-page__logo {
    display: inline-block;
    margin-bottom: var(--space-32);
}

.error-page--standalone {
    padding-block: var(--space-48);
}

.error-page__address {
    margin-top: var(--space-16);
    overflow-wrap: anywhere;
}

.error-page__suggestion,
.error-page__actions {
    margin-top: var(--space-24);
}

.error-page__map {
    margin-top: var(--space-48);
    padding-top: var(--space-32);
    border-top: var(--hairline);
}

.error-page__map-title {
    font-size: var(--step-h3);
    margin-bottom: var(--space-16);
}

.error-page__note {
    margin-top: var(--space-24);
}


/* 17. ИЛЛЮСТРАЦИИ И ИКОНКИ ================================================= */

.icon {
    flex: none;
    vertical-align: middle;
}

.icon--brand {
    color: var(--brand);
}

.icon--muted {
    color: var(--text-secondary);
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

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

.illustration--wide {
    width: 100%;
}

.figure {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
}

.figure--framed {
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
}

.figure--center .illustration {
    margin-left: auto;
    margin-right: auto;
}

.figure__caption {
    margin-top: var(--space-12);
    color: var(--text-secondary);
    font-size: var(--step-caption);
    line-height: var(--leading-body);
}

.figure--center .figure__caption {
    text-align: center;
}


/* 18. ЗАГРУЗКА: КНОПКА, ВЫБОР ПЛАТФОРМЫ, КАТАЛОГ, ВЕРСИЯ, МАГАЗИНЫ ========== */

.download-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.download-cta .btn-note {
    margin-top: 0;
}

.btn-note--partner {
    max-width: 42ch;
    color: var(--text-primary);
}

/* Ручной выбор платформы: прямоугольные плотные ячейки. */
.platform-picker__label {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-12);
}

.platform-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    list-style: none;
}

.platform-picker__list > .platform-picker__item {
    margin-top: 0;
    padding-left: 0;
}

.platform-picker__list > .platform-picker__item::before {
    content: none;
}

.platform-picker__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 40px;
    padding-inline: var(--space-16);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background-color var(--duration-base) ease,
        border-color var(--duration-base) ease,
        color var(--duration-base) ease;
}

.platform-picker__link:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.platform-picker__link.is-current {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--background);
}

/* Каталог платформ. */
.platform-table__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--step-body);
}

.platform-table__name a {
    color: inherit;
    text-decoration: none;
}

.platform-table__name a:hover {
    color: var(--brand);
}

.platform-table__hint {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--step-caption);
    font-weight: 400;
    color: var(--text-secondary);
    white-space: normal;
}

.platform-table tbody tr.is-current {
    background-color: var(--brand-soft);
}

.platform-table td {
    vertical-align: middle;
}

.platform-table th,
.platform-table td {
    padding-inline: var(--space-12);
}

/* Блок версии: пары «поле — значение» табличными цифрами. */
.version-block {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-16);
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    font-size: var(--step-small);
}

.version-block__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    justify-content: space-between;
}

.version-block__label {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.version-block__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Магазины и файлы: ряд плашек «Скачать в / App Store» с иконкой слева. */
.stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    list-style: none;
}

.stores > li {
    margin: 0;
    padding: 0;
}

.stores > li::before {
    content: none;
}

.store {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 56px;
    padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
    background-color: var(--surface);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.15;
    transition:
        border-color var(--duration-base) ease,
        background-color var(--duration-base) ease,
        color var(--duration-base) ease;
}

.store:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.store__icon {
    color: inherit;
}

.store__text {
    display: flex;
    flex-direction: column;
}

.store__kicker {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.store__name {
    font-size: var(--step-body);
    font-weight: 600;
    white-space: nowrap;
}

.store[aria-disabled="true"] {
    border-color: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Семейство приложений: строка «знак → магазины». */
.install {
    list-style: none;
    counter-reset: install;
}

.install__step {
    counter-increment: install;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-8) var(--space-16);
    padding-block: var(--space-24);
    border-top: var(--hairline);
}

.install__step:last-child {
    border-bottom: var(--hairline);
}

.install__number {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding-top: var(--space-4);
    min-width: 3.5ch;
}

.install__number::before {
    content: counter(install, decimal-leading-zero) " /";
}

.install__title {
    font-size: var(--step-h4);
    font-weight: 600;
    line-height: 1.3;
}

.install__body {
    grid-column: 2;
}

.install__body > * + * {
    margin-top: var(--space-16);
}

.apps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.app {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}

.app__mark {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-primary);
    color: var(--background);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app__mark--tag {
    position: relative;
}

.app__mark--tag::after {
    content: attr(data-tag);
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 var(--space-4);
    background-color: var(--brand);
    color: var(--background);
    font-size: var(--step-caption);
    line-height: 1.4;
    border-radius: var(--radius-sm);
}

.app__name {
    font-weight: 600;
}

.app__desc {
    margin-top: var(--space-4);
    font-size: var(--step-small);
    color: var(--text-secondary);
}

.app .stores {
    margin-top: var(--space-12);
}


/* 19. КОНТЕНТНЫЕ СТРАНИЦЫ ================================================== */

/* Hero — левый край, крупные слова лесенкой, под ними H1, подпись
   моноширинным и кнопка. Справа — статус платформ. */
.hero {
    padding-block: var(--space-48) var(--section-space);
    border-bottom: var(--hairline);
}

.hero__inner {
    display: grid;
    gap: var(--space-48);
    align-items: start;
}

.hero__eyebrow {
    display: block;
    margin-bottom: var(--space-24);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Три слова лесенкой — фирменный жест первого экрана. Декоративный блок:
   смысл несёт H1 под ним. */
.hero__display {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-display);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-32);
}

.hero__display > span:nth-child(2) {
    padding-left: 12%;
}

.hero__display > span:nth-child(3) {
    padding-left: 24%;
    color: var(--brand);
}

.hero__title {
    max-width: 22ch;
    font-size: var(--step-h2);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero__lead {
    max-width: var(--container-text);
    margin-top: var(--space-16);
    font-size: var(--step-body);
    color: var(--text-secondary);
}

.hero__actions {
    margin-top: var(--space-32);
}

.hero .platform-picker {
    margin-top: var(--space-24);
    padding-top: var(--space-24);
    border-top: var(--hairline);
}

.download-state {
    margin-top: var(--space-24);
    max-width: var(--container-text);
}

.hero__meta {
    margin-top: var(--space-24);
}

.hero__aside-title {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-12);
}

.hero__aside-title::before {
    content: "</> ";
}

.hero__aside-note {
    margin-top: var(--space-12);
}

@media (min-width: 1024px) {
    .hero {
        padding-block: var(--space-64) var(--space-96);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) var(--container-aside);
        gap: var(--space-64);
    }

    .hero__title {
        font-size: var(--step-h3);
    }
}

/* Компактный статус платформ в правой колонке. */
.platform-status .rows__item {
    gap: var(--space-8);
}

.platform-status__name {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1 1 100%;
}

.platform-status .rows__item.is-current {
    background-color: var(--brand-soft);
}

/* Сетка возможностей: иконка в квадрате, номер «01 /», заголовок, текст. */
.features {
    list-style: none;
    display: grid;
    gap: var(--space-32);
}

@media (min-width: 600px) {
    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-48) var(--space-32);
    }
}

@media (min-width: 1024px) {
    .features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-64) var(--space-48);
    }
}

.feature {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}

.feature__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.feature__number {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.feature__number::after {
    content: " /";
}

.feature__title {
    margin-top: var(--space-8);
    font-size: var(--step-h4);
    font-weight: 600;
}

.feature__text {
    margin-top: var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Шаги, платформы и категории — каталожные строки в две строки текста. */
.steps .rows__item,
.platform-guides .rows__item,
.help-index .rows__item {
    display: block;
}

.steps .rows__title,
.platform-guides .rows__title,
.help-index .rows__title {
    display: block;
}

.steps .rows__meta,
.platform-guides .rows__meta,
.help-index .rows__meta {
    display: block;
    margin-top: var(--space-4);
    max-width: var(--container-text);
}

.platform-guides__note {
    margin-top: var(--space-16);
}

.home__final-actions,
.download-page__final-actions,
.platform-page__final-actions,
.content-page__final-actions {
    margin-top: var(--space-32);
}

.download-page__table-note,
.content-page__table-note {
    margin-top: var(--space-24);
    max-width: var(--container-text);
}


/* 19.1. БАЗА ЗНАНИЙ: СПИСКИ МАТЕРИАЛОВ ===================================== */

.library {
    list-style: none;
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.library__item {
    padding: var(--space-16) var(--space-24);
}

.library__item + .library__item {
    border-top: var(--hairline);
}

.library__title {
    font-size: var(--step-h4);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.library__title a {
    text-decoration: none;
}

.library__title a:hover {
    color: var(--brand);
}

.library__summary {
    margin-top: var(--space-8);
    max-width: var(--container-text);
    font-size: var(--step-small);
    color: var(--text-secondary);
}

.library__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
    margin-top: var(--space-12);
}

.library__tag {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.library--compact .library__item {
    padding: var(--space-12) var(--space-24);
}

.library--compact .library__title {
    font-size: var(--step-body);
}

.library--compact .library__meta {
    margin-top: var(--space-8);
}

/* Шаги: нумерация моноширинными цифрами — тот же приём, что у номеров секций. */
.steps-list {
    counter-reset: step;
    list-style: none;
    max-width: var(--container-text);
}

.steps-list > li {
    counter-increment: step;
    position: relative;
    padding-left: var(--space-48);
}

.steps-list > li + li {
    margin-top: var(--space-16);
}

.steps-list > li::before {
    content: counter(step, decimal-leading-zero) " /";
    position: absolute;
    left: 0;
    top: 0.15em;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    color: var(--brand);
}


/* 19.2. МАТЕРИАЛ БАЗЫ ЗНАНИЙ =============================================== */

.prose .steps-list {
    padding-left: 0;
}

.steps-list__title {
    display: block;
}

.article__body .table {
    min-width: 0;
}

.article__body .table tbody th {
    white-space: normal;
    width: 38%;
}

@media (max-width: 559px) {
    .article__body .table--stack tbody th {
        width: auto;
    }
}

.toc {
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-24);
}

.toc__title {
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.toc__title::before {
    content: "</> ";
}

.toc__list {
    counter-reset: toc;
    list-style: none;
    margin-top: var(--space-12);
}

.toc__item {
    counter-increment: toc;
    position: relative;
    padding-left: var(--space-32);
    font-size: var(--step-small);
    line-height: var(--leading-tight);
}

.toc__item + .toc__item {
    margin-top: var(--space-8);
}

.toc__item::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.toc__item a {
    color: var(--text-primary);
    text-decoration: none;
}

.toc__item a:hover {
    color: var(--brand);
}

.article__neighbours-title {
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
    font-size: var(--step-h4);
}


/* 19.3. ИСТОРИЯ ВЕРСИЙ ===================================================== */

.release-list {
    list-style: none;
    max-width: var(--container-text);
}

.release {
    background-color: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
}

.release + .release {
    margin-top: var(--space-16);
}

.release__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-8) var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: var(--hairline);
}

.release__version {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-h3);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    color: var(--brand);
}

.release__meta {
    margin: 0;
}

.release__summary {
    margin-top: var(--space-16);
    color: var(--text-secondary);
}

.release__group {
    margin-top: var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--step-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.release__items {
    margin-top: var(--space-8);
}

.release__items > li + li {
    margin-top: var(--space-8);
}


/* 20. УТИЛИТЫ И ДОСТУПНОСТЬ ================================================ */

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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}