/* Витрина, вторая редакция. Только десктоп: узкие экраны сюда ещё не
   переведены, и медиазапросов здесь намеренно нет. */

:root {
    --bg: #F4F4F2;
    --surface: #FFFFFF;
    --ink: #171717;
    --ink-65: #171717A6;
    --ink-50: #17171780;
    --ink-35: #17171759;
    --ink-2: #8C8C8C;
    --ink-3: #B4B4B2;
    --line: #E4E4E1;
    --dark: #171717;
    --footer: #0D0D0D;
    --ok-bg: #E9F6EC;
    --ok-fg: #1B7F3B;
    --up-bg: #1B7F3B14;
    --down-fg: #B3261E;
    --down-bg: #B3261E14;
    --flat-bg: #17171710;
    --accent: #D93025;
    --cover: #EDEDE9;

    /* Ширина полосы содержимого. Фон секции тянется во всю ширину экрана,
       содержимое стоит по середине — отсюда max-width на .wrap, а не на
       секции. */
    --wrap: 1240px;
    --gutter: 24px;

    /* Правая колонка каталога: ширина подбора и отступ до него. Числа названы
       здесь, потому что по ним же выставлены номера страниц под списком. */
    --calc: 360px;
    --calc-gap: 36px;

    /* Кривая всего движения на странице — одна. */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

/* Переход по якорю доезжает, а не прыгает. Куда именно доезжает — решает
   `scroll-margin-top` у секций: прилипшая шапка иначе накрыла бы заголовок. */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 400;
    /* Межстрочный по умолчанию — шрифтовой, как в макете: там интерлиньяж
       задан только там, где текст многострочный, и каждая такая строка ниже
       описана явно. Общая полуторная высота растянула бы однострочные
       подписи, кнопки и пункты меню. */
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Раньше правил про `display`: у скрытого элемента любое из них перебивает
   браузерное `[hidden] { display: none }`, и спрятанный блок остаётся виден. */
[hidden] { display: none !important; }

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

/* Блочные: у строчного svg под базовой линией остаётся место под нижние
   выносные элементы, и строка с иконкой оказывается выше своего содержимого. */
svg { display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

.i { width: 100%; height: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }

/* Секции разделены линией сверху, а не снизу: последняя секция светлой части
   упирается в тёмный призыв, и нижняя граница нарисовала бы там лишнее. */
.section {
    border-top: 1px solid var(--line);
    padding: 96px var(--gutter);
    scroll-margin-top: 80px;
}

.section--light { background: var(--surface); }
.section--grey { background: var(--bg); }

.center { display: flex; flex-direction: column; align-items: center; }

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

/* Шапка едет вместе со страницей и прилипает к верху. Линия под ней
   появляется только в прилипшем состоянии и рисуется тенью, а не рамкой:
   рамка добавила бы шапке пиксель высоты, и в момент прилипания страница
   дёргалась бы. */
.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    padding: 0 32px;
}

.hdr.is-stuck { box-shadow: 0 1px 0 var(--line); }

.hdr__inner {
    max-width: 1376px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
}

.wordmark { display: flex; align-items: center; gap: 7px; }

.wordmark__mark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 17px;
    height: 17px;
}

.wordmark__mark span {
    width: 3px;
    border-radius: 1.5px;
    background: var(--ink);
}

.wordmark__mark span:nth-child(1) { height: 9px; }
.wordmark__mark span:nth-child(2) { height: 17px; }
.wordmark__mark span:nth-child(3) { height: 13px; }

.wordmark__name {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.hdr__nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 26px;
}

.hdr__nav a,
.hdr__login {
    font-size: 13.5px;
    opacity: 0.75;
    transition: opacity 0.15s;
}

.hdr__nav a:hover,
.hdr__login:hover { opacity: 1; }

/* Раздел, в котором мы находимся. Одной непрозрачности мало: она отличает
   пункт ровно так же, как наведение, и читается как «курсор тут», а не «вы
   здесь». Поэтому вместе с ней плотность и полоса под словом — её видно и
   тогда, когда указателя на экране нет вовсе. */
.hdr__nav a[aria-current="page"] {
    position: relative;
    opacity: 1;
    font-weight: 500;
}

.hdr__nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
}

.hdr__right { display: flex; align-items: center; gap: 14px; }

/* Меню узкого экрана. На широком его нет вовсе — там пункты стоят в шапке. */
.menu { display: none; position: relative; }

.menu__btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    list-style: none;
}

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

.menu__btn .i { width: 17px; height: 17px; }

.menu__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px -8px #17171726;
}

.menu__list a {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.menu__list a:hover { background: var(--bg); }

/* В списке узкого экрана та же отметка читается иначе: подчёркивание под
   пунктом выпадающего меню похоже на разделитель, а заливка — на выбранную
   строку, чем она и является. */
.menu__list a[aria-current="page"] {
    background: var(--bg);
    font-weight: 500;
}

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

/* `border: 0` и `font: inherit` — не украшение, а сброс: тот же класс висит и
   на ссылке, и на `<button>`, а кнопке браузер рисует свою рамку и ставит свой
   шрифт вместо унаследованного. В макете у кнопки нет ни того, ни другого.
   Рамка нужна только светлым вариантам, и они ставят её ниже сами. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    padding: 10px 17px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn__i { width: 15px; height: 15px; flex: none; }

.btn--dark { background: var(--ink); color: #FFF; }
.btn--dark:hover { background: #2B2B2B; }

.btn--light {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}

.btn--light:hover { border-color: #D2D2CE; }

.btn--small {
    border-radius: 7px;
    padding: 8px 15px;
    font-size: 13.5px;
}

.btn--white { background: #FFF; color: var(--ink); padding: 11px 18px; }
.btn--white:hover { background: #ECECEC; }

.btn--outline {
    border: 1px solid #FFFFFF33;
    color: #FFF;
    padding: 11px 18px;
}

.btn--outline:hover { border-color: #FFFFFF66; }

/* Погашенная кнопка. Рамки нет намеренно: тот же элемент потом загорается
   тёмным, и рамка добавила бы ему два пикселя роста на первом же нажатии. */
.btn--off {
    background: var(--bg);
    color: var(--ink-3);
    pointer-events: none;
}

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

/* Текст слева, лента изменений справа. Не по центру со снимком снизу, как
   прежде: первое, что должен увидеть пришедший, — не интерфейс, а то, что в
   нём происходит. */
.hero { background: var(--bg); padding: 56px var(--gutter) 88px; }

.hero__grid { display: flex; align-items: flex-start; gap: 56px; }

.hero__body {
    width: 560px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero__title {
    font-size: 56px;
    font-weight: 400;
    line-height: 59px;
    letter-spacing: -1.8px;
}

.hero__title span { color: #17171766; }

.hero__sub {
    margin-top: 22px;
    color: var(--ink-65);
    font-size: 16px;
    line-height: 26px;
}

.hero__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }

.hero__note { color: var(--ink-2); font-size: 13px; }

/* Полоса и линия рисуются здесь, а не отдельными элементами: слоган — одна
   строка текста, и обвес ей в разметке не нужен. */
.hero__slogan {
    position: relative;
    width: 100%;
    margin-top: 38px;
    border-top: 1px solid var(--line);
    padding: 24px 0 0 17px;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: -0.3px;
}

.hero__slogan::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 3px;
    height: 42px;
    border-radius: 2px;
    background: var(--accent);
}

/* ── Лента изменений ───────────────────────────────────────────────────── */

.events {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px #17171726, 0 2px 6px #1717170F;
}

.events__head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

/* Точка дышит и расходится волной: между сменами строк табло стоит, и это
   единственное, что подсказывает, что лента живая.

   Дыхание — прозрачностью самой точки, волна — отдельным кругом под ней:
   растягивать саму точку нельзя, она стоит в потоке и тянула бы за собой
   строку. Обе анимации кончаются там же, где начались, поэтому просьба «не
   двигать» гасит их без следа: глобальное правило доигрывает их за сотую
   долю секунды, и точка остаётся обычной. */
.events__dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
    animation: dot-breathe 2.4s ease-in-out infinite;
}

.events__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    animation: dot-ripple 2.4s ease-out infinite;
}

@keyframes dot-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Волна гаснет раньше конца круга: остаток времени — пауза между ударами,
   без неё точка тарахтит, а не дышит. */
@keyframes dot-ripple {
    0% { opacity: 0.4; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(2.8); }
}

.events__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }

.events__shop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12.5px;
    font-weight: 500;
}

.events__glyph { width: 14px; height: 14px; border-radius: 4px; background: var(--ink); }

/* Высота табло — ровно пять строк по 63, и она не резиновая: в момент смены
   строк в списке шесть, и без обрезки карточка подпрыгивала бы на высоту
   строки и оседала обратно. Шестая пережидает за краем, пока верхняя
   складывается, и выезжает на освободившееся место.

   Строка тут всегда однострочная — содержимое обрезано многоточием, — поэтому
   число можно назвать прямо. */
.events__list { height: 315px; overflow: hidden; }

.events__row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 13px 16px;
}

/* Движение табло держится на одной уходящей строке: она складывается в ноль
   высоты, весь список подтягивается вверх, и пришедшая выезжает снизу из-под
   обрезки сама. Своей анимации появления у неё нет, и это не экономия.

   Прозрачностью новую строку показывать нельзя: анимации в невидимой вкладке
   не стартуют, а неначатая держит свой первый кадр — строка осталась бы
   прозрачной навсегда. Проверено: так пропадало всё табло разом. Поэтому
   новая строка видна с первого мига, а помечена она только фоном, который
   гаснет, — не проиграйся он, останется едва заметная подсветка. */
.events__row.is-fresh { animation: board-in 1.4s var(--ease); }

.events__row.is-going {
    overflow: hidden;
    animation: board-out 0.4s var(--ease) both;
}

@keyframes board-in {
    from { background: #17171708; }
    to { background: transparent; }
}

/* Высота гасится явными числами: `max-height` от `none` не анимируется, а
   гадать про содержимое строки тут не надо — она всегда в одну строку. */
@keyframes board-out {
    from { opacity: 1; max-height: 63px; padding-top: 13px; padding-bottom: 13px; }
    to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}

.events__badge {
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.events__badge .i { width: 15px; height: 15px; }

.events__badge--up { background: var(--up-bg); color: var(--ok-fg); }
.events__badge--down { background: var(--down-bg); color: var(--down-fg); }
.events__badge--flat { background: var(--flat-bg); color: var(--ink); }

.events__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Название товара приходит с чужой витрины и бывает в полстроки длиной:
   обрезаем многоточием, а не переносим — строки табло обязаны быть одной
   высоты, иначе смена дёргает карточку. */
.events__kind,
.events__item {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.events__kind { font-size: 13px; font-weight: 500; }

.events__item { color: var(--ink-2); font-size: 12px; }

.events__value { flex: none; display: inline-flex; align-items: center; gap: 7px; }

.events__was { color: var(--ink-3); font-size: 12.5px; }

.events__now { font-size: 13px; font-weight: 500; }

.events__now--ink { color: var(--ink); }
.events__now--muted { color: var(--ink-2); }
.events__now--down { color: var(--down-fg); }

.events__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--ink-3);
    font-size: 12.5px;
}

.events__foot .i { width: 13px; height: 13px; flex: none; }

/* ── Общие части секций ────────────────────────────────────────────────── */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 12.5px;
}

.eyebrow__i { width: 13px; height: 13px; color: var(--ink-2); flex: none; }

.eyebrow--on-white { background: var(--bg); }
.eyebrow--on-grey { background: var(--surface); }

.eyebrow--dark {
    background: #FFFFFF14;
    border-color: transparent;
    color: #FFFFFFE6;
}

.eyebrow--dark .eyebrow__i { color: #FFFFFFB3; }

.h2 {
    font-size: 38px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: -1px;
}

.head-split { display: flex; gap: 60px; }

.head-split__left { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Ширина колонкой, а не `flex-basis`: на узком экране `.head-split`
   разворачивается в столбец, и базис из ширины превратился бы в высоту —
   абзац в три строки занимал бы 420 пикселей и тянул за собой пустоту. */
.head-split__sub {
    width: 420px;
    min-width: 0;
    padding-top: 10px;
    color: var(--ink-65);
    font-size: 15.5px;
    line-height: 25px;
}

.head-split__sub p + p { margin-top: 12px; }

/* Главная мысль абзаца — тем же кеглем, но цветом текста и полужирным:
   выделять её вторым заголовком нельзя, заголовок у секции один. */
.head-split__strong {
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: -0.2px;
}

/* Оговорка в подзаголовке: та, без которой абзац читается обещанием. */
.aside {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    background: var(--bg);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 20px;
}

.aside .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-2); }

.aside b { font-weight: 500; }

/* Снимок интерфейса. Три оправы: широкий идёт карточкой с тенью, остальные
   лежат на подложке — своей рамки у них нет. */
.shot { margin-top: 44px; border-radius: 14px; overflow: hidden; }

.shot img { width: 100%; height: auto; border-radius: 10px; }

.shot--wide {
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -12px #17171726, 0 2px 6px #1717170F;
}

.shot--wide img { border-radius: 0; }

/* Узкие снимки идут по своей ширине и по середине: растянутые во всю полосу
   они мылятся — исходник у них 565, а полоса 1240. */
.shot--framed,
.shot--grey { width: 664px; max-width: 100%; margin-inline: auto; padding: 20px; }

.shot--framed { background: var(--surface); border: 1px solid var(--line); }

.shot--grey { background: var(--bg); }

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 11px;
    font-size: 13px;
}

.chip__i { width: 14px; height: 14px; flex: none; color: var(--ink-2); }

.link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.link__i { width: 15px; height: 15px; flex: none; }

/* ── Что делает вместо вас ─────────────────────────────────────────────── */

.does { display: flex; gap: 16px; margin-top: 44px; }

.does__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
}

.does__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 9px;
}

.does__icon .i { width: 17px; height: 17px; }

.does__title { font-size: 16px; font-weight: 500; line-height: 21px; letter-spacing: -0.3px; }

.does__text { color: var(--ink-65); font-size: 13.5px; line-height: 21px; }

/* ── Начать без своего каталога ────────────────────────────────────────── */

/* Шаги стоят на линии, а не в коробках: четыре карточки подряд читаются
   набором возможностей, а это порядок действий. */
.steps { display: flex; margin-top: 52px; }

.steps__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-top: 2px solid var(--line);
    padding: 24px 28px 0 0;
}

.steps__n { color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: 0.4px; }

/* Первый шаг помечен цветом: с него начинают, и глазу нужна точка входа. */
.steps__item:first-child .steps__n { color: var(--accent); }

.steps__title { font-size: 17px; font-weight: 500; line-height: 22px; letter-spacing: -0.3px; }

.steps__text { color: var(--ink-65); font-size: 13.5px; line-height: 21px; }

.yml {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 52px;
    background: var(--dark);
    border-radius: 14px;
    padding: 30px 34px;
}

.yml__bar { width: 3px; height: 46px; flex: none; border-radius: 2px; background: var(--accent); }

.yml__text { display: flex; flex-direction: column; gap: 6px; }

.yml__title { color: #FFF; font-size: 22px; font-weight: 500; line-height: 29px; letter-spacing: -0.5px; }

.yml__note { color: #FFFFFFA6; font-size: 15.5px; line-height: 23px; }

/* ── Весь каталог ──────────────────────────────────────────────────────── */

.traits { display: flex; gap: 16px; margin-top: 44px; }

.traits__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.traits__title { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }

.traits__text { color: var(--ink-65); font-size: 13px; line-height: 20px; }

/* ── Изменения ─────────────────────────────────────────────────────────── */

.kinds { display: flex; gap: 16px; margin-top: 44px; }

.kinds__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    background: var(--bg);
    border-radius: 14px;
    padding: 24px;
}

.kinds__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.kinds__icon .i { width: 17px; height: 17px; }

.kinds__icon--up { background: var(--up-bg); color: var(--ok-fg); }
.kinds__icon--down { background: var(--down-bg); color: var(--down-fg); }
.kinds__icon--flat { background: var(--flat-bg); color: var(--ink); }

.kinds__title { font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; }

.kinds__text { color: var(--ink-65); font-size: 13px; line-height: 20px; }

/* ── Уведомления ───────────────────────────────────────────────────────── */

.notify { display: flex; align-items: center; gap: 72px; }

.notify__left {
    width: 520px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.notify__sub { color: var(--ink-65); font-size: 15.5px; line-height: 25px; }

.notify__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.notify__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 20px; }

.notify__list .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok-fg); }

.mail {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 40px -10px #1717171A;
}

.mail__head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid var(--line);
    padding: 16px 18px;
}

.mail__subject { font-size: 14.5px; font-weight: 500; letter-spacing: -0.2px; }

.mail__from { color: var(--ink-3); font-size: 12px; }

.mail__row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 13px 18px;
}

.mail__glyph { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--ink); }

.mail__shop { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }

.mail__counts { flex: none; display: inline-flex; align-items: center; gap: 14px; font-size: 12.5px; }

.mail__fresh { color: var(--ok-fg); }
.mail__gone { color: var(--down-fg); }
.mail__prices { color: var(--ink-2); }

.mail__foot { padding: 16px 18px; }

/* ── Свой каталог ──────────────────────────────────────────────────────── */

.scheme { display: flex; align-items: stretch; margin-top: 44px; }

.scheme__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg);
    border-radius: 14px;
    padding: 24px;
}

.scheme__icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.scheme__icon .i { width: 16px; height: 16px; }

.scheme__title { font-size: 16px; font-weight: 500; line-height: 21px; letter-spacing: -0.2px; }

.scheme__text { color: var(--ink-65); font-size: 13px; line-height: 20px; }

.scheme__arrow {
    width: 56px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
}

.scheme__arrow .i { width: 18px; height: 18px; }

.compare { margin-top: 24px; background: var(--bg); border-radius: 14px; overflow: hidden; }

.compare__head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
}

.compare__what { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }

.compare__note { color: var(--ink-2); font-size: 12.5px; }

.compare__row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 13px 20px;
}

.compare__row:last-child { border-bottom: 0; }

.compare__row--mine { background: #17171708; }

.compare__glyph { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--ink); }

.compare__row--mine .compare__glyph { background: var(--accent); }

.compare__shop { flex: 1; min-width: 0; font-size: 13.5px; }

.compare__row--mine .compare__shop { font-weight: 500; }

.compare__diff { color: var(--ink-2); font-size: 12.5px; }

.compare__diff--down { color: var(--down-fg); }

.compare__price { font-size: 13.5px; font-weight: 500; }

/* ── Каталог витрин ────────────────────────────────────────────────────── */

/* Раздел без витрин не кнопка, а подпись: жать в нём не на что. */
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }

.cats__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 13px;
    color: var(--ink-2);
    font-size: 13px;
}

.cats__item--on { background: var(--ink); border-color: var(--ink); color: #FFF; font-weight: 500; }

/* На витрине это кнопки отбора, а не ссылки: сбрасываем им вид кнопки и
   возвращаем курсор. */
button.cats__item { font-family: inherit; cursor: pointer; }

button.cats__item:hover { border-color: #D9D9D5; }

button.cats__item--on:hover { border-color: var(--ink); }

.cats__soon { color: var(--ink-3); font-size: 11.5px; }

.stores { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }

.store {
    flex: 0 0 calc((100% - 32px) / 3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    /* Не `height`: у Спортмастера подпись занимает две строки, и на жёсткой
       высоте нижняя строка карточки уезжала бы ниже соседних. */
    min-height: 146px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
}

.store__top { display: flex; align-items: center; gap: 12px; }

.store__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.store__letter {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
}

.store__name { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }

.store__note { color: var(--ink-2); font-size: 12.5px; line-height: 18px; }

.store__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.store__price { font-size: 15px; font-weight: 500; }

.store__per { flex: 1; color: var(--ink-3); font-size: 12px; }

.store__trial {
    background: var(--ok-bg);
    border-radius: 5px;
    padding: 3px 8px;
    color: var(--ok-fg);
    font-size: 11px;
    font-weight: 500;
}

.all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

/* Фон лежит на подложке, а не на самом блоке: под курсором он разъезжается за
   края колонки, и уезжай он вместе с блоком — за ним уехало бы содержимое. */
.order {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 44px;
    background: var(--dark);
    border-radius: 16px;
    padding: 32px 36px;
}

.order__left { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.order__row { display: flex; align-items: center; gap: 10px; }

.order__icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF1A;
    border-radius: 9px;
    color: #FFF;
}

.order__icon .i { width: 17px; height: 17px; }

.order__title { color: #FFF; font-size: 24px; letter-spacing: -0.6px; font-weight: 400; }

.order__text { max-width: 760px; color: #FFFFFF99; font-size: 14.5px; line-height: 23px; }

.order .btn { flex: none; padding: 12px 20px; font-size: 14.5px; }

/* ── Вопросы ───────────────────────────────────────────────────────────── */

.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    margin-top: 44px;
}

.faq__item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
}

.faq__q { font-size: 15.5px; font-weight: 500; line-height: 21px; letter-spacing: -0.2px; }

.faq__a { color: var(--ink-65); font-size: 13.5px; line-height: 22px; }

/* ── Стартовые условия ─────────────────────────────────────────────────── */

.offer {
    display: flex;
    align-items: flex-start;
    gap: 72px;
    background: var(--bg);
    border-radius: 14px;
    padding: 40px;
}

.offer__left {
    width: 500px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.offer__h2 { font-size: 34px; font-weight: 400; line-height: 40px; letter-spacing: -0.9px; }

.offer__sub { color: var(--ink-65); font-size: 15.5px; line-height: 25px; }

.offer__terms {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--line);
    padding: 16px 0 0 17px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.offer__bar {
    position: absolute;
    top: 16px;
    left: 0;
    width: 3px;
    height: 36px;
    border-radius: 2px;
    background: var(--accent);
}

.offer__cta { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }

.offer__note { color: var(--ink-2); font-size: 13px; }

.offer__right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.offer__caption { color: var(--ink-2); font-size: 13px; font-weight: 500; letter-spacing: 0.3px; }

.offer__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
}

.offer__list .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok-fg); }

/* ── Призыв ────────────────────────────────────────────────────────────── */

.cta {
    background: var(--dark);
    padding: 100px var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta__title {
    width: 820px;
    max-width: 100%;
    color: #FFF;
    font-size: 46px;
    font-weight: 400;
    line-height: 52px;
    letter-spacing: -1.4px;
    text-align: center;
}

.cta__sub {
    width: 640px;
    max-width: 100%;
    margin-top: 16px;
    color: #FFFFFF99;
    font-size: 16.5px;
    line-height: 25px;
    text-align: center;
}

.cta__buttons { display: flex; gap: 10px; margin-top: 30px; }

.cta__note { margin-top: 20px; color: #FFFFFF80; font-size: 13px; text-align: center; }

/* ── Телеграм-канал ────────────────────────────────────────────────────── */

/* Картинка стоит в углу карточки, а не второй колонкой: в макете она
   прижата к рамке справа и снизу, и отступы карточки её не касаются. Текст
   уступает ей место полем справа — между 1024 и 1240 картинка сжимается, и
   поле сжимается вместе с ней. */
.tg {
    position: relative;
    display: flex;
    align-items: center;
    height: 480px;
    overflow: hidden;
    background: #F8F8F7;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 48px;
}

.tg__text {
    flex: 0 1 560px;
    min-width: 0;
    margin-right: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.tg__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; }

.tg__eyebrow-i { width: 14px; height: 14px; flex: none; }

.tg__h2 { max-width: 440px; font-size: 38px; font-weight: 400; line-height: 1.14; letter-spacing: -1.1px; }

.tg__sub { color: var(--ink-65); font-size: 15.5px; line-height: 1.55; }

.tg__buttons { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.tg__join { gap: 9px; padding: 13px 20px; font-size: 14.5px; }

.tg__send { width: 16px; height: 16px; flex: none; }

.tg__qr { gap: 11px; padding: 9px 16px 9px 10px; font-size: 13.5px; }

.tg__qr-code { width: 40px; height: 40px; flex: none; border-radius: 4px; }

.tg__qr-label { width: 86px; line-height: 1.25; }

.tg__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 12px;
}

.tg__tags li { display: flex; align-items: center; }

/* Черта после пункта, а не перед ним: между 1024 и 1240 ряд переносится, и
   черта перед пунктом открывала бы новую строку. */
.tg__tags li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 12px;
    margin: 0 12px;
    background: var(--line);
}

.tg__points { display: none; }

.tg__phone { position: absolute; right: 0; bottom: 0; width: 560px; max-width: 45%; }

.tg__phone img { width: 100%; height: auto; }

/* Окно с QR-кодом канала. Поля стоят на `.qr__body`, а не на самом окне:
   щелчок по полю окна пришёл бы целью в <dialog> и закрыл бы его как щелчок
   по подложке. */
.qr {
    width: 300px;
    max-width: calc(100vw - 40px);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
}

.qr__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 24px;
    text-align: center;
}

.qr::backdrop { background: #17171766; }

.qr__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    padding: 7px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.qr__close:hover { background: var(--bg); color: var(--ink); }

.qr__code { width: 220px; height: 220px; image-rendering: pixelated; }

.qr__title { margin-top: 14px; font-size: 15px; font-weight: 500; }

.qr__link { margin-top: 4px; color: var(--ink-2); font-size: 13.5px; }

.qr__link:hover { color: var(--ink); }

/* ── Футер ─────────────────────────────────────────────────────────────── */

.footer { background: var(--footer); padding: 64px var(--gutter) 32px; }

.footer__inner { display: flex; flex-direction: column; gap: 36px; }

/* `minmax`, а не голые `1fr` и `230px`: у трека по умолчанию минимум по
   содержимому, и подпись под знаком не давала колонке бренда сжаться — сетка
   получалась шире колонки страницы и на узком экране уезжала за край экрана
   вместе с горизонтальной прокруткой. Зазор тоже плавающий: на 1240 он ровно
   макетные 80, ниже сжимается вместе со всем остальным. */
.footer__top {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(0, 230px));
    column-gap: clamp(28px, 6vw, 80px);
}

.footer__brand { display: flex; flex-direction: column; gap: 16px; }

.footer__brand .wordmark { gap: 9px; }
.footer__brand .wordmark__mark { width: 20px; height: 20px; gap: 2.5px; }
.footer__brand .wordmark__mark span { width: 3.5px; border-radius: 1.75px; background: #FFF; }
.footer__brand .wordmark__mark span:nth-child(1) { height: 11px; }
.footer__brand .wordmark__mark span:nth-child(2) { height: 20px; }
.footer__brand .wordmark__mark span:nth-child(3) { height: 15px; }
.footer__brand .wordmark__name { color: #FFF; font-size: 20px; letter-spacing: -0.4px; }

.footer__tagline { max-width: 340px; color: #FFFFFF80; font-size: 13.5px; line-height: 22px; }

/* `flex-start`, иначе ссылки растягиваются на всю ширину колонки, и растущее
   под ними подчёркивание уезжает далеко за текст. */
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.footer__col-title { color: #FFFFFF59; font-size: 12px; letter-spacing: 0.4px; }

.footer__col a { color: #FFFFFFCC; font-size: 13.5px; }
.footer__col a:hover { color: #FFF; }

.footer__divider { height: 1px; background: #FFFFFF1A; }

.footer__bottom { display: flex; align-items: center; gap: 12px; }

.footer__bottom span,
.footer__bottom a { color: #FFFFFF59; font-size: 12.5px; }

.footer__bottom span:first-child { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Документы: оферта и политика

   Тёмная карточка титула и колонка в 760 взяты у статьи — единственной
   страницы v2, где в макете набран длинный текст. Кегль внутри мельче
   статейного: это юридический документ, его читают подряд и по ссылке на
   пункт, а не как раздел витрины, и статейные 16,5 через 1,75 растянули бы
   оферту вдвое.
   ══════════════════════════════════════════════════════════════════════════ */

.doc {
    background: var(--surface);
    padding: 40px var(--gutter) 96px;
}

.doc__head {
    background: var(--dark);
    border-radius: 16px;
    padding: 56px 64px;
}

.doc__crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #FFFFFF80;
    font-size: 12.5px;
}

.doc__crumbs a { transition: color 0.15s var(--ease); }

.doc__crumbs a:hover { color: #FFFFFF; }

.doc__crumbs-sep { color: #FFFFFF4D; }

.doc__crumbs-current { color: #FFFFFFE6; }

.doc__title {
    max-width: 900px;
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.doc__revision {
    margin-top: 14px;
    color: #FFFFFF99;
    font-size: 14px;
}

.doc__body {
    width: 760px;
    max-width: 100%;
    margin: 56px auto 0;
    color: var(--ink-65);
    font-size: 14.5px;
    line-height: 1.7;
}

.doc__intro {
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.7;
}

.doc__intro + .doc__intro { margin-top: 10px; }

/* Отступ сверху больше нижнего: заголовок принадлежит тому, что под ним. */
.doc__h {
    margin: 34px 0 10px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.3px;
    scroll-margin-top: 88px;
}

.clause { margin-top: 8px; }

/* Номер — часть абзаца, а не колонка слева: на него ссылается и сам документ,
   и переписка, поэтому он лежит в тексте и копируется вместе с пунктом. */
.clause__n {
    color: var(--ink);
    white-space: nowrap;
}

.clause-list { margin: 8px 0 0; padding-left: 22px; }

.clause-list li { margin-top: 4px; }

/* Подчёркивание бледное и темнеет под курсором: ссылок в документе мало, но
   каждая — адрес или почта, и терять их в тексте нельзя. */
.doc__body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: #17171740;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s var(--ease);
}

.doc__body a:hover { text-decoration-color: var(--ink); }

.req { margin: 12px 0 0; }

.req__row { margin-top: 4px; }

.req__k,
.req__v { display: inline; margin: 0; }

.req__k { color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════
   Блог: список и статья — макеты «24 · Блог» и «25 · Статья» (v2)

   Обложка карточки типографская, а не картинка: в базе у статьи есть
   заголовок, описание, раздел и дата — и всё. Постером идёт заголовок,
   тёмные и светлые обложки чередуются через ряд.
   ══════════════════════════════════════════════════════════════════════════ */

.blog-hero { padding: 72px var(--gutter) 0; }

.blog-hero__title {
    width: 900px;
    max-width: 100%;
    margin: 22px 0 18px;
    font-size: 52px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -1.4px;
}

.blog-hero__title span { color: var(--ink-50); }

/* Обещание бесплатных дней стоит отдельной строкой с красной точкой: это
   не продолжение подзаголовка, а условие, ради которого сюда и приходят. */
.trial {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 500;
}

.trial__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }

.blog-hero__sub {
    width: 620px;
    max-width: 100%;
    color: var(--ink-65);
    font-size: 15.5px;
    line-height: 25px;
}

/* ── Разделы и поиск ───────────────────────────────────────────────────── */

.topics { padding: 40px var(--gutter) 0; }

.topics__inner { display: flex; align-items: center; gap: 8px; }

.topics__list { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }

.topic {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 7px 13px;
    font-size: 13px;
    transition: border-color 0.2s var(--ease);
}

.topic:hover { border-color: #C9C9C4; }

.topic--on {
    background: var(--ink);
    border-color: var(--ink);
    color: #FFFFFF;
    font-weight: 500;
}

.topic--on:hover { border-color: var(--ink); }

.blog-search {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.2s var(--ease);
}

.blog-search:focus-within { border-color: #C9C9C4; }

.blog-search__i { width: 14px; height: 14px; flex: none; color: var(--ink-3); }

/* Поле без своей рамки и фона: рамку рисует обёртка, иначе их было бы две. */
.blog-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.blog-search__input::placeholder { color: var(--ink-3); }

.blog-search__input:focus { outline: none; }

/* ── Лента ─────────────────────────────────────────────────────────────── */

/* Снизу отступ есть, хотя в макете у ленты его нет: там между ней и призывом
   стоит блок подписки, а рассылки у нас пока не существует. */
.blog { padding: 36px var(--gutter) 80px; }

.blog__inner { display: flex; flex-direction: column; gap: 32px; }

.posts { display: flex; flex-wrap: wrap; gap: 28px; }

.posts .post { flex: 0 0 calc((100% - 28px) / 2); }

.post {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.post:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -14px #17171740;
}

.post__cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 252px;
    padding: 28px;
    background: var(--cover);
}

.post--dark .post__cover { background: var(--ink); }

.post__brand {
    position: absolute;
    top: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
}

.post--dark .post__brand { color: #FFFFFF; }

.post__mark { display: flex; align-items: flex-end; gap: 1.5px; width: 13px; height: 13px; }

.post__mark span { width: 2.5px; border-radius: 1.25px; background: currentColor; }

.post__mark span:nth-child(1) { height: 7px; }
.post__mark span:nth-child(2) { height: 13px; }
.post__mark span:nth-child(3) { height: 10px; }

.post__poster {
    width: 440px;
    max-width: 100%;
    color: var(--ink);
    font-size: 30px;
    line-height: 35px;
    letter-spacing: -0.8px;
    text-align: center;
}

.post--dark .post__poster { color: #FFFFFF; }

.post__text { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 18px; }

.post__lead { color: var(--ink-65); font-size: 13.5px; line-height: 21px; }

/* Нижняя строка прижата к низу карточки: в ряду они разной высоты, и без
   этого плашки разделов встали бы лесенкой. */
.post__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.post__tag {
    background: var(--bg);
    border-radius: 5px;
    padding: 3px 9px;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 500;
}

.post__date { flex: 1; color: var(--ink-3); font-size: 12.5px; }

.post__read { color: var(--ink-3); font-size: 12.5px; }

/* ── Широкая карточка ──────────────────────────────────────────────────── */

.post-lead .post__cover { height: auto; gap: 20px; padding: 56px 40px; }

.post-lead .post__poster { width: 700px; font-size: 40px; line-height: 45px; letter-spacing: -1px; }

.post-lead__chip {
    background: #FFFFFF1A;
    border-radius: 20px;
    padding: 5px 11px;
    color: #FFFFFFCC;
    font-size: 12px;
}

.post-lead .post__text { gap: 12px; padding: 24px 26px 22px; }

.post-lead__excerpt { color: var(--ink-65); font-size: 14.5px; line-height: 23px; }

/* ── Страницы ──────────────────────────────────────────────────────────── */

.pager { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }

.pager__pages { display: flex; align-items: center; gap: 6px; }

/* Класс лежит и на ссылке блога, и на кнопке каталога, а кнопке браузер даёт
   свой шрифт, свои поля и свой цвет — отсюда сброс. */
.pager__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}

.pager__item .i { width: 15px; height: 15px; }

.pager__item:hover { border-color: #C9C9C4; }

.pager__item--on {
    background: var(--ink);
    border-color: var(--ink);
    color: #FFFFFF;
    font-weight: 500;
}

/* Крайняя стрелка не пропадает, а гаснет: пропав, она сдвинула бы номера. */
.pager__item--off { color: var(--ink-3); cursor: default; }

.pager__item--off:hover { border-color: var(--line); }

.pager__item--gap { background: none; border-color: transparent; cursor: default; }

.pager__count { color: var(--ink-3); font-size: 12.5px; }

/* ── Пусто ─────────────────────────────────────────────────────────────── */

.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 64px 32px;
    text-align: center;
}

.blog-empty__title { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; }

.blog-empty__text { color: var(--ink-65); font-size: 14.5px; }

.blog-empty .link { margin-top: 8px; }

/* ── Статья ────────────────────────────────────────────────────────────── */

.article-head { padding: 40px var(--gutter) 0; }

.article-head .doc__head { padding: 48px 80px; }

.article-head__title {
    max-width: 900px;
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -1.2px;
}

.article-head__lead {
    max-width: 700px;
    margin-top: 18px;
    color: #FFFFFF99;
    font-size: 17px;
    line-height: 1.6;
}

.article { padding: 56px var(--gutter) 0; }

.article__body { display: flex; gap: 64px; }

.article__body--solo { justify-content: center; }

/* Оглавление прилипает: у статьи на десять экранов уехавшее вверх оглавление
   бесполезно. Отступ сверху — под прилипшую шапку. */
.article__toc {
    position: sticky;
    top: 88px;
    align-self: flex-start;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 220px;
}

.article__toc-title {
    color: var(--ink-3);
    font-size: 9.5px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.article__toc a {
    border-left: 1px solid transparent;
    padding: 6px 0 6px 12px;
    color: var(--ink-65);
    font-size: 13px;
    line-height: 1.45;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.article__toc a:hover { border-left-color: #D5D5D1; color: var(--ink); }

.article__text { flex: none; width: 760px; max-width: 100%; }

.article__text p { margin-top: 16px; color: #171717CC; font-size: 16.5px; line-height: 1.75; }

/* Первый абзац — лид: крупнее и в полный цвет. */
.article__text > p:first-child { margin-top: 0; color: var(--ink); font-size: 17.5px; }

.article__text h2 {
    margin: 38px 0 14px;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.6px;
    scroll-margin-top: 88px;
}

.article__text h3 {
    margin: 28px 0 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.article__text h4 { margin: 24px 0 8px; font-size: 17px; font-weight: 500; }

.article__text ul,
.article__text ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    color: #171717CC;
    font-size: 16.5px;
    line-height: 1.65;
    list-style: none;
}

.article__text li { display: flex; gap: 12px; }

/* Маркер — тире, у нумерованного списка номер. Счётчик свой: `list-style`
   снят, чтобы маркер не зависел от шрифта и отступов. */
.article__text ul > li::before { content: "—"; flex: none; color: var(--ink-3); }

.article__text ol { counter-reset: article-item; }

.article__text ol > li { counter-increment: article-item; }

.article__text ol > li::before {
    content: counter(article-item) ".";
    flex: none;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Вложенный список — своей колонкой под текстом пункта, а не рядом с ним. */
.article__text li > ul,
.article__text li > ol { margin-top: 10px; }

.article__text li > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.article__text blockquote {
    margin: 24px 0 0;
    border-left: 2px solid var(--line);
    padding-left: 24px;
}

.article__text blockquote p { margin-top: 0; color: var(--ink); font-size: 17.5px; }

.article__text blockquote cite {
    display: block;
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 13.5px;
    font-style: normal;
}

.article__text a { color: var(--ink); text-decoration: underline; text-decoration-color: #17171740; text-underline-offset: 2px; }

.article__text a:hover { text-decoration-color: var(--ink); }

.article__figure { margin: 28px 0 0; }

.article__figure img { width: 100%; border-radius: 12px; }

.article__figure figcaption { margin-top: 10px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }

.article__table { margin-top: 28px; overflow-x: auto; }

.article__table table { width: 100%; border-collapse: collapse; font-size: 14px; }

.article__table th,
.article__table td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; }

.article__table th { color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; }

.article__table td { color: #171717CC; }

/* ── Читайте также ─────────────────────────────────────────────────────── */

.also { padding: 80px var(--gutter); }

.also__inner { display: flex; flex-direction: column; gap: 24px; }

.also__head { display: flex; align-items: center; gap: 12px; }

.also__title { flex: 1; font-size: 27px; font-weight: 500; letter-spacing: -0.6px; }

.also__row { display: flex; gap: 24px; }

.also__row .post { flex: 1; min-width: 0; }

.post--compact .post__cover { height: 186px; gap: 14px; padding: 20px; }

.post--compact .post__poster { width: 300px; font-size: 21px; line-height: 24px; letter-spacing: -0.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Каталог витрин — макеты «23 · Магазины · Публичная» (v2, t, m)
   ══════════════════════════════════════════════════════════════════════════ */

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.fact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 12px 6px 10px;
    font-size: 13px;
}

.fact__i { width: 14px; height: 14px; flex: none; color: var(--ink-2); }

/* ── Панель отбора ─────────────────────────────────────────────────────── */

.filters { padding: 36px var(--gutter) 0; }

/* Сетка, а не ряд с переносом: на планшете поиск, раздел и порядок встают
   первой строкой, а подборка со счётом — второй, и перенос по ширине этого
   порядка не удержал бы. */
.filters__inner {
    display: grid;
    grid-template-columns: 260px 240px auto minmax(0, 1fr) auto;
    grid-template-areas: "search category picks count sort";
    align-items: center;
    gap: 10px;
}

.filters__search { grid-area: search; width: auto; }

.filters__category { grid-area: category; }

.filters__picks { grid-area: picks; justify-self: start; }

.filters__sort { grid-area: sort; }

.filters__count { grid-area: count; justify-self: end; color: var(--ink-3); font-size: 13px; }

/* Выпадающий список отбора. Свой, а не системный `select`: раскрытую часть
   того не оформить вовсе. */
.dd { position: relative; }

.dd__button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}

.dd__button:hover { border-color: #C9C9C4; }

.dd--open .dd__button { border-color: var(--ink); }

.dd__lead { width: 14px; height: 14px; flex: none; color: var(--ink-3); }

.dd__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd__rule { width: 1px; height: 18px; flex: none; background: var(--line); }

.dd__chevron { width: 16px; height: 16px; flex: none; color: var(--ink-2); transition: transform 0.2s var(--ease); }

.dd--open .dd__chevron { transform: rotate(180deg); }

.dd__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 28px #17171722, 0 2px 6px #17171714;
}

.dd__list[hidden] { display: none; }

/* Список порядка стоит у правого края страницы и раскрывается к нему же:
   от левого края кнопки он уехал бы за экран. */
.dd--end .dd__list { right: 0; left: auto; width: max-content; }

.dd__option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 7px;
    background: none;
    padding: 7px 10px;
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.dd__option:hover,
.dd__option:focus-visible { background: #F9F9F8; outline: none; }

.dd__option[aria-selected="true"] { background: var(--bg); color: var(--ink); font-weight: 500; }

.dd__label { flex: 1; }

.dd__count { color: var(--ink-3); font-size: 12px; font-weight: 400; }

.dd__check { display: none; width: 14px; height: 14px; flex: none; }

.dd__option[aria-selected="true"] .dd__check { display: block; }

/* Раздел — плашка во всю свою ячейку: жирное значение, черта, стрелка. */
.filters__category .dd__button { gap: 10px; }

.filters__category .dd__lead { width: 15px; height: 15px; }

.filters__category .dd__value { font-weight: 500; }

.picks { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }

.pick {
    border: 0;
    border-radius: 6px;
    background: none;
    padding: 6px 11px;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.pick:hover { color: var(--ink); }

.pick--on { background: var(--ink); color: #FFFFFF; font-weight: 500; }

.pick--on:hover { color: #FFFFFF; }

/* ── Каталог и подбор ──────────────────────────────────────────────────── */

/* Снизу отступ свой, хотя в макете его нет: там подбор упирается прямо в
   тёмный призыв, и они читаются одним блоком. */
.catalog { padding: 44px var(--gutter) 72px; }

.catalog__grid { display: flex; align-items: flex-start; gap: var(--calc-gap); }

/* Номера страниц стоят за сеткой и подставляют себе её правую колонку: в
   самой сетке им не место — подбор липнет к экрану, пока она не кончится, и
   с номерами внутри доезжал бы ниже последней карточки. */
.catalog__pager { padding-right: calc(var(--calc) + var(--calc-gap)); }

/* Колонка, а не три соседа в ряду: список, заглушка «ничего не нашлось» и
   страницы стоят друг под другом, и подбор рядом с ними один. */
.catalog__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Прилипшая шапка иначе накрыла бы первую строку при перелистывании. */
.catalog__list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    scroll-margin-top: 88px;
}

.catalog__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 56px 32px;
    text-align: center;
}

/* Шапка и строки делят одну сетку колонок: они разные узлы, и общая ширина
   держится только тем, что шаблон колонок у них записан один раз. */
.shop-head,
.shop-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 150px 78px var(--shop-act, 204px);
    align-items: center;
    column-gap: 14px;
    padding: 0 16px 0 18px;
}

/* Строки переставляются через `order`, и шапка обязана стоять раньше любой
   из них. */
.shop-head {
    order: -1;
    height: 40px;
    background: #FAFAF9;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.shop-head__price { text-align: right; }

/* Полоса слева — тень, а не рамка: рамка сдвинула бы содержимое отмеченной
   строки на три пикселя. Горит она у отмеченных и только у них. */
.shop-row {
    min-height: 62px;
    border-top: 1px solid var(--line);
    transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.shop-row--on { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }

.shop-row__logo {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.shop-row--on .shop-row__logo { background: var(--surface); }

.shop-row:hover .shop-row__logo { background: var(--ink); color: #FFFFFF; }

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

.shop-row__line { display: flex; align-items: center; gap: 7px; min-width: 0; }

.shop-row__name {
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-row__badge {
    flex: none;
    background: var(--bg);
    border-radius: 5px;
    padding: 2px 7px;
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 500;
}

.shop-row--on .shop-row__badge { background: var(--surface); }

.shop-row__domain {
    overflow: hidden;
    color: var(--ink-3);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-row__base { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.shop-row__size { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }

.shop-row__size-i { width: 12px; height: 12px; flex: none; color: var(--ink-3); }

.shop-row__depth { color: var(--ink-3); font-size: 11px; }

.shop-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }

.shop-row__sum { font-size: 14.5px; font-weight: 500; white-space: nowrap; }

.shop-row__per { color: var(--ink-3); font-size: 10.5px; }

.shop-row__dash { color: var(--ink-3); font-size: 14.5px; }

.shop-row__act { display: flex; justify-content: flex-end; }

.shop-row__off { color: var(--ink-3); font-size: 12.5px; }

/* Состояние витрины стоит на месте объёма базы. Мягкий янтарь, а не
   красный: формирующийся магазин — не ошибка и не поломка. */
.state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border-radius: 6px;
    padding: 4px 9px 4px 8px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.state::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
}

.state--soon { color: var(--ink); }
.state--soon::before { background: #A8791C; }

.state--off { color: var(--ink-3); }
.state--off::before { background: var(--ink-3); }

/* ── Под списком ──────────────────────────────────────────────────────── */

.catalog__foot { display: flex; align-items: center; gap: 16px; padding: 18px 2px 0; }

.catalog__shown { flex: 1; color: var(--ink-3); font-size: 12.5px; }

.pager--catalog { padding-top: 0; }

.pager--catalog .pager__item { width: 32px; height: 32px; }

/* Кнопка у строки магазина: по умолчанию светлая с плюсом, у отмеченной —
   тёмная с галкой. */
.btn--pick { gap: 6px; border-radius: 8px; padding: 8px 13px; font-size: 13px; white-space: nowrap; }

.btn--pick .btn__i { width: 14px; height: 14px; }


/* ── Калькулятор ───────────────────────────────────────────────────────── */

.calc { flex: none; width: var(--calc); display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }

.calc__card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }

.calc__head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.calc__title { flex: 1; font-size: 14px; font-weight: 500; }

.calc__badge:not(:empty) {
    background: var(--ink);
    border-radius: 20px;
    padding: 2px 8px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
}

.calc__line { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 11px 16px; }

.calc__logo {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.calc__name { flex: 1; min-width: 0; font-size: 13px; }

.calc__price { font-size: 13px; font-weight: 500; }

.calc__drop {
    display: flex;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-3);
    cursor: pointer;
    transition: color 0.15s var(--ease);
}

.calc__drop:hover { color: var(--ink); }

.calc__drop .i { width: 14px; height: 14px; }

.calc__hint { padding: 16px; color: var(--ink-3); font-size: 12.5px; line-height: 19px; }

.calc__totals { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; }

.calc__row { display: flex; align-items: center; gap: 10px; }

.calc__row--sum { border-top: 1px solid var(--line); padding-top: 9px; }

.calc__k { flex: 1; color: var(--ink-2); font-size: 12.5px; }

.calc__row--sum .calc__k { color: var(--ink); }

.calc__v { font-size: 12.5px; font-weight: 500; }

.calc__total { font-size: 16px; font-weight: 500; }

.calc__action { padding: 0 16px 16px; }

.calc__action .btn { width: 100%; justify-content: center; padding: 12px 16px; }

.calc__note { padding: 0 16px 16px; color: var(--ink-3); font-size: 11.5px; line-height: 17px; }

.calc__includes {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
}

.calc__includes-title { color: var(--ink-3); font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; }

.calc__include { display: flex; gap: 9px; color: var(--ink-65); font-size: 12.5px; line-height: 19px; }

.calc__include-i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ok-fg); }

/* ── Заявка ────────────────────────────────────────────────────────────── */

/* Заголовок и текст — отдельные ячейки, а не одна колонка: на узком экране
   значок встаёт в строку с заголовком, а текст уходит под них во всю ширину. */
.ask { padding: 28px var(--gutter) 0; }

.ask__strip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "icon title btn" "icon text btn";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    background: var(--dark);
    border-radius: 16px;
    padding: 20px 24px;
}

.ask__icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF1A;
    border-radius: 9px;
    color: #FFF;
}

.ask__icon .i { width: 17px; height: 17px; }

.ask__title { grid-area: title; color: #FFF; font-size: 17px; font-weight: 500; letter-spacing: -0.3px; }

.ask__text { grid-area: text; color: #FFFFFF99; font-size: 13px; line-height: 19.5px; }

.ask__btn { grid-area: btn; margin-left: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   Вход — макеты «26 · Вход · Почта» и «26 · Вход · Код»

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

/* Тёмная половина нарисована фоном страницы, а не блоком: обе колонки живут
   в одной строке ради общей верхней линии, и панель не может быть их
   родителем — а фон ей нужен во всю высоту экрана. */
.auth {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to right, var(--dark) 0 560px, var(--surface) 560px);
}

/* Отступы сверху и снизу равны, и оба больше знака: строка встаёт по центру
   свободного места, но под знак место остаётся всегда. */
.auth__split { display: flex; align-items: flex-start; padding-block: 130px; }

.auth__brand { flex: none; width: 560px; padding: 0 56px; }

/* Знак прижат к верху страницы, а не к обещанию: в макете он на 56 от края, а
   в потоке строки он сдвинул бы левую колонку вниз относительно правой. */
.auth__brand .wordmark { position: absolute; top: 56px; left: 56px; }

.wordmark--light .wordmark__mark { width: 18px; height: 18px; gap: 2.5px; }
.wordmark--light .wordmark__mark span { width: 3.5px; border-radius: 1.75px; background: #FFFFFF; }
.wordmark--light .wordmark__mark span:nth-child(1) { height: 9px; }
.wordmark--light .wordmark__mark span:nth-child(2) { height: 18px; }
.wordmark--light .wordmark__mark span:nth-child(3) { height: 14px; }
.wordmark--light .wordmark__name { color: #FFFFFF; font-size: 18px; }

.auth__headline {
    color: #FFFFFF;
    font-size: 38px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: -1px;
}

.auth__lead { max-width: 440px; margin-top: 16px; color: #FFFFFF99; font-size: 15px; line-height: 24px; }

.auth__list { display: flex; flex-direction: column; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; }

.auth__list-item { display: flex; align-items: center; gap: 11px; color: #FFFFFFCC; font-size: 13.5px; line-height: 20px; }

.auth__dot {
    width: 20px;
    height: 20px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF14;
    border-radius: 10px;
    color: #FFFFFF;
}

.auth__dot .i { width: 12px; height: 12px; }

/* ── Половина с формой ─────────────────────────────────────────────────── */

/* `min-width: 0` — против авто-минимума флекса: без него половина не сжимается
   уже карточки в 400 и распирает страницу боком на узком экране. Поля по
   макету 80, но на 1024 колонка их не тянет, отсюда clamp. */
.auth__form {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 clamp(32px, 5.6vw, 80px);
}

.auth__card { width: 400px; max-width: 100%; }

.auth__title { font-size: 30px; font-weight: 500; letter-spacing: -0.7px; }

.auth__sub { margin-top: 10px; color: var(--ink-65); font-size: 14.5px; line-height: 23px; }

.auth__body { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }

/* Скругление и зазор на единицу больше, чем у кнопок главной, — так в макете
   входа: кнопка стоит под полем с радиусом 9 и повторяет его, а не общий 8. */
.auth__submit {
    width: 100%;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    padding: 14px 16px;
    font-size: 14.5px;
}

.auth__legal { color: var(--ink-3); font-size: 12px; line-height: 18px; }

.auth__legal a { color: var(--ink-2); text-decoration: underline; text-decoration-color: #17171733; text-underline-offset: 2px; }

.auth__legal a:hover { text-decoration-color: var(--ink-2); }

.auth__hint {
    display: flex;
    gap: 9px;
    margin-top: 18px;
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 19px;
}

.auth__hint-i { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.auth__aside {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s var(--ease);
}

.auth__aside:hover { color: var(--ink); }

.auth__aside-i { width: 14px; height: 14px; flex: none; }

.auth__row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

.auth__timer {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-3);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
}

.auth__timer--on { color: var(--ink); font-weight: 500; cursor: pointer; }

.auth__timer-i { width: 13px; height: 13px; flex: none; }

.auth__change { color: var(--ink); font-size: 12.5px; font-weight: 500; }

.auth__change:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Поля ──────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 7px; }

.field__label { color: var(--ink-2); font-size: 12.5px; }

.field__control {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 13px 14px;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.field__control:focus-within { background: var(--surface); border-color: #C9C9C4; }

.field__control--error { border-color: var(--accent); }

.field__i { width: 15px; height: 15px; flex: none; color: var(--ink-3); }

.field__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14.5px;
}

.field__input::placeholder { color: var(--ink-3); }

.field__input:focus { outline: none; }

/* ── Ячейки кода ───────────────────────────────────────────────────────── */

.code { display: flex; gap: 12px; }

.code__cell {
    flex: 1;
    min-width: 0;
    height: 64px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.code__cell:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--ink);
    border-width: 1.5px;
}

.code__cell--error { border-color: var(--accent); }

/* ── Сообщения ─────────────────────────────────────────────────────────── */

.note { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 19px; }

.note--error { color: var(--accent); }

.note__i { width: 14px; height: 14px; flex: none; }

.note__value { color: var(--ink); font-weight: 500; }

/* ── Блокировка ────────────────────────────────────────────────────────── */

/* Пропорции — со старого экрана блокировки (`N0uhno`): счётчик там главный
   на странице, и мельче он читается как сноска. Начертание своё: в этом
   наборе жирнее 500 нет. */
.lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 20px;
    text-align: center;
}

.lock__caption { color: var(--ink-2); font-size: 12px; }

.lock__time { font-size: 36px; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

.lock__note { color: var(--ink-3); font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Страницы ошибок

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

.fail { display: flex; flex-direction: column; min-height: 100vh; }

/* Геометрия шапки витрины повторена числом в число: 1376 внутри и поля по 32. */
.fail__head {
    flex: none;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    height: 64px;
    margin: 0 auto;
    padding: 0 32px;
}

.fail__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 96px;
    text-align: center;
}

.fail__code {
    color: var(--ink-35);
    font-size: 72px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}

.fail__title { margin-top: 24px; font-size: 30px; font-weight: 500; letter-spacing: -0.7px; }

.fail__text { width: 520px; max-width: 100%; margin-top: 12px; color: var(--ink-65); font-size: 14.5px; line-height: 23px; }

.fail__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* ══════════════════════════════════════════════════════════════════════════
   Планшет — макет «22t · Лендинг v3 · Планшет», 768.

   Ниже 1024 колонки схлопываются в одну, шапка отдаёт пункты меню кнопке, а
   снимки кабинета — те же файлы, что и на десктопе, сжатые до ширины
   содержимого.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .section { padding: 72px 40px; }

    .h2 { font-size: 31px; line-height: 36px; letter-spacing: -0.8px; }

    .head-split { flex-direction: column; gap: 16px; }

    .head-split__sub { width: 100%; padding-top: 0; }

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

    .hdr { padding: 0 24px; }

    .hdr__inner { max-width: none; height: 60px; gap: 12px; }

    .hdr__nav { display: none; }

    .wordmark { flex: 1; }

    .hdr__right { gap: 12px; }

    .menu { display: block; }

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

    .hero { padding: 48px 40px 56px; }

    /* Лента изменений уходит под текст: рядом с ним на планшете ей остаётся
       колонка, в которой название товара не помещается в строку. */
    .hero__grid { flex-direction: column; gap: 36px; }

    .hero__body { width: 100%; }

    .hero__title { font-size: 44px; line-height: 47px; letter-spacing: -1.4px; }

    .hero__sub { width: 560px; max-width: 100%; margin-top: 20px; font-size: 15px; line-height: 24px; }

    .hero__slogan { margin-top: 30px; font-size: 16px; }

    .events { width: 100%; }

    /* ── Общие части секций ────────────────────────────────────────────── */

    /* Снимки остаются в границах содержимого и просто сжимаются до его
       ширины. Узкие при этом перестают быть врезкой по середине: своей
       ширины у них здесь уже больше, чем у колонки. */
    .shot { margin-top: 36px; }

    .shot--framed,
    .shot--grey { width: 100%; margin-inline: 0; padding: 16px; }

    .tags { margin-top: 28px; }

    /* ── Карточки в два ряда ───────────────────────────────────────────── */

    .does,
    .traits,
    .kinds { flex-wrap: wrap; gap: 14px; margin-top: 36px; }

    .does__card,
    .traits__item,
    .kinds__card { flex: 0 0 calc((100% - 14px) / 2); }

    /* ── Начать без своего каталога ────────────────────────────────────── */

    .steps { flex-wrap: wrap; margin-top: 40px; }

    .steps__item { flex: 0 0 50%; }

    .steps__item:nth-child(n+3) { margin-top: 24px; }

    .yml { margin-top: 40px; padding: 26px 28px; }

    .yml__title { font-size: 20px; line-height: 26px; }

    .yml__note { font-size: 14.5px; }

    /* ── Уведомления ───────────────────────────────────────────────────── */

    .notify { flex-direction: column; align-items: stretch; gap: 28px; }

    .notify__left { width: 100%; }

    .mail { width: 100%; }

    /* ── Свой каталог ──────────────────────────────────────────────────── */

    /* Стрелки между шагами съедают ширину, которой на планшете и так в обрез:
       порядок читается по самим карточкам. */
    .scheme { gap: 12px; margin-top: 36px; }

    .scheme__arrow { display: none; }

    .scheme__step { padding: 20px; }

    .scheme__title { font-size: 15px; }

    /* ── Каталог витрин ────────────────────────────────────────────────── */

    .cats { margin-top: 28px; }

    .stores { margin-top: 20px; }

    .store { flex: 0 0 calc((100% - 16px) / 2); }

    .order { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px; padding: 28px; }

    .order__title { flex: 1; min-width: 0; font-size: 21px; letter-spacing: -0.5px; }

    .order__text { width: 100%; }

    /* ── Стартовые условия ─────────────────────────────────────────────── */

    .offer { flex-direction: column; gap: 28px; padding: 28px; }

    .offer__left { width: 100%; }

    .offer__h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.7px; }

    .offer__right { width: 100%; }

    /* ── Вопросы ───────────────────────────────────────────────────────── */

    .faq { column-gap: 28px; margin-top: 36px; }

    /* ── Телеграм-канал ────────────────────────────────────────────────── */

    /* Картинка уходит под текст и растягивается не шире своего файла: на
       1023 полоса шире картинки, и растянутая она поплыла бы. */
    .tg { flex-direction: column; align-items: stretch; gap: 28px; height: auto; padding: 40px 40px 0; }

    .tg__text { flex: none; margin-right: 0; gap: 14px; }

    .tg__h2 { max-width: none; font-size: 30px; line-height: 1.16; letter-spacing: -0.9px; }

    .tg__sub { font-size: 15px; line-height: 1.6; }

    .tg__buttons { gap: 10px; margin-top: 8px; }

    .tg__join { font-size: 14px; }

    .tg__tags { margin-top: 10px; }

    .tg__phone { position: static; align-self: center; width: 100%; max-width: 782px; }

    /* ── Призыв ────────────────────────────────────────────────────────── */

    .cta { padding: 72px 40px; }

    .cta__title { width: 100%; font-size: 36px; line-height: 40px; letter-spacing: -1px; }

    .cta__sub { width: 100%; font-size: 15px; line-height: 23px; }

    /* ── Каталог витрин ────────────────────────────────────────────────── */

    .filters { padding: 28px 40px 0; }

    .blog-search { flex: 1 0 100%; }

    .filters__inner {
        grid-template-columns: minmax(0, 1fr) 220px auto;
        grid-template-areas: "search category sort" "picks count count";
    }

    /* Шапка каталога: чипы фактов идут строками, а обещание бесплатных дней
       остаётся над ними. */
    .facts { gap: 8px; margin-top: 22px; }

    .trial { margin-top: 14px; font-size: 13px; }

    .catalog { padding: 28px 40px 72px; }

    /* Подбор уезжает под каталог: рядом с ним колонка в 360 не оставляет
       карточкам ширины.

       Сетка при этом перестаёт быть сеткой (`display: contents`), и её
       половины становятся детьми самой секции. Сделано это ради порядка:
       номера страниц лежат за сеткой, и без этого они оказались бы под
       подбором — сперва корзина, потом «страница 2». Теперь порядок задаёт
       `order`, и он тот же, что на десктопе: список, страницы, подбор. */
    .catalog { display: flex; flex-direction: column; }

    .catalog__grid { display: contents; }

    .catalog__main { order: 1; }

    .catalog__pager { order: 2; padding-right: 0; }

    .calc { order: 3; margin-top: 28px; }

    /* Колонка действий ужимается под короткие подписи: «Запросить» без
       «подключения», — и ширину отдаёт названию магазина. */
    .shop-head,
    .shop-row { --shop-act: 130px; }

    .btn--pick { padding: 8px 12px; }

    .shop-row__long { display: none; }

    .calc { position: static; width: 100%; flex-direction: row; }

    .calc__card { flex: 1; }

    .calc__includes { flex: none; width: 300px; }

    .ask { padding: 24px 40px 0; }

    .ask__strip {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas: "icon title" "text text" "btn btn";
        column-gap: 12px;
        row-gap: 14px;
        padding: 22px 24px;
    }

    .ask__btn { justify-self: start; margin: 0; }

    /* ── Блог ──────────────────────────────────────────────────────────── */

    .blog-hero { padding: 56px 40px 0; }

    .blog-hero__title { margin: 18px 0 16px; font-size: 40px; line-height: 44px; letter-spacing: -1.1px; }

    .topics { padding: 32px 40px 0; }

    /* Поиск уходит под ряд разделов: рядом с ними на планшете он ужимается до
       пары слов и перестаёт читаться полем. */
    .topics__inner { flex-direction: column; align-items: stretch; gap: 12px; }

    .topics .blog-search { width: 100%; }

    .blog { padding: 28px 40px 64px; }

    .blog__inner { gap: 24px; }

    .posts { gap: 20px; }

    .posts .post { flex: 0 0 calc((100% - 20px) / 2); }

    .post__cover { height: 220px; padding: 24px; }

    .post__poster { font-size: 26px; line-height: 30px; letter-spacing: -0.6px; }

    .post-lead .post__cover { padding: 44px 32px; }

    .post-lead .post__poster { width: 100%; font-size: 34px; line-height: 38px; letter-spacing: -0.8px; }

    .article-head { padding: 32px 40px 0; }

    .article-head .doc__head { padding: 36px 40px; }

    .article-head__title { font-size: 36px; letter-spacing: -1px; }

    .article-head__lead { font-size: 16px; }

    .article { padding: 44px 40px 0; }

    /* Оглавление перестаёт быть колонкой сбоку и ложится над текстом: колонки
       в 220 и 760 рядом на планшет не помещаются. */
    .article__body { flex-direction: column; gap: 32px; }

    .article__toc { position: static; width: 100%; }

    .article__text { width: 100%; }

    .also { padding: 64px 40px; }

    .also__row { flex-wrap: wrap; }

    .also__row .post { flex: 0 0 calc((100% - 24px) / 2); }

    .cta--plain { padding: 64px 40px; }

    /* ── Документы ─────────────────────────────────────────────────────── */

    .doc { padding: 32px 40px 72px; }

    .doc__head { padding: 44px 40px; }

    .doc__title { font-size: 29px; letter-spacing: -0.7px; }

    .doc__body { margin-top: 44px; }

    /* ── Футер ─────────────────────────────────────────────────────────── */

    .footer { padding: 56px 40px 28px; }

    .footer__inner { gap: 28px; }

    .footer__top {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 24px;
        row-gap: 32px;
    }

    .footer__brand { grid-column: 1 / -1; }

    /* ── Вход ──────────────────────────────────────────────────────────── */

    /* Тёмная панель из столбца становится полосой сверху: встать рядом с
       формой ей здесь уже негде, а убрать вовсе — остаться без знака и без
       слов, ради которых человек сюда пришёл. Перечисление в полосу не едет,
       его работу делают цифры. */
    /* Тёмная половина из колонки становится полосой сверху, и фон снова её
       собственный: делить экран по вертикали больше нечем. */
    .auth { justify-content: flex-start; background: var(--surface); }

    /* `stretch` вместо `flex-start`: в колонке это уже поперечная ось, и
       с прежним значением половины садились по ширине своего содержимого —
       карточка в 400 распирала страницу боком. */
    .auth__split { flex: 1; flex-direction: column; align-items: stretch; padding-block: 0; }

    .auth__brand { width: auto; background: var(--dark); padding: 28px 40px 30px; }

    .auth__brand .wordmark { position: static; }

    .auth__headline { margin-top: 26px; font-size: 28px; line-height: 34px; letter-spacing: -0.7px; }

    .auth__lead,
    .auth__list { display: none; }

    .auth__form { flex: 1; align-items: center; padding: 48px 40px; }

    /* ── Страницы ошибок ───────────────────────────────────────────────── */

    .fail__head { height: 60px; padding: 0 24px; }

    .fail__code { font-size: 64px; }

    .fail__title { font-size: 26px; letter-spacing: -0.6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Мобильная — макет «22m · Лендинг v3 · Мобильная», 390.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .section { padding: 56px 20px; }

    .h2 { font-size: 26px; line-height: 30px; letter-spacing: -0.6px; }

    .head-split__sub { font-size: 14px; line-height: 22px; }

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

    .hdr { padding: 0 20px; }

    .hdr__inner { height: 56px; gap: 10px; }

    .hdr__right { gap: 10px; }

    /* «Войти» уходит в меню: рядом с кнопкой «Попробовать» на 390 они не
       помещаются, а зовут в одно и то же место. */
    .hdr__login { display: none; }

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

    .hero { padding: 36px 20px 44px; }

    .hero__grid { gap: 28px; }

    .hero__title { font-size: 31px; line-height: 35px; letter-spacing: -0.9px; }

    .hero__sub { width: 100%; font-size: 14px; line-height: 22px; }

    .hero__cta { width: 100%; margin-top: 26px; }

    .hero__cta .btn { justify-content: center; width: 100%; }

    .hero__note { text-align: center; }

    .hero__slogan { margin-top: 28px; font-size: 15px; line-height: 21px; }

    /* ── Лента изменений ───────────────────────────────────────────────── */

    .events__head { padding: 13px 14px; }

    .events__row { gap: 10px; padding: 12px 14px; }

    .events__badge { width: 28px; height: 28px; }

    /* Прежняя цена встаёт под нынешней: в строку рядом с названием товара
       они на 390 не помещаются. */
    .events__value { flex-direction: column-reverse; align-items: flex-end; gap: 1px; }

    .events__was { font-size: 11px; }

    /* Строка здесь на два пикселя ниже — поля у неё свои, — и высота табло
       пересчитана по ней: лишний зазор под последней строкой виден. */
    .events__list { height: 305px; }

    .events__foot { padding: 11px 14px; font-size: 12px; }

    /* ── Общие части секций ────────────────────────────────────────────── */

    .shot { margin-top: 28px; }

    .shot--framed,
    .shot--grey { padding: 12px; }

    .tags { gap: 8px; margin-top: 24px; }

    /* ── Карточки в столбец ────────────────────────────────────────────── */

    .does,
    .traits,
    .kinds { flex-direction: column; gap: 12px; margin-top: 28px; }

    .does__card,
    .traits__item,
    .kinds__card { flex: none; width: 100%; }

    .does__card,
    .kinds__card { padding: 18px; }

    /* ── Начать без своего каталога ────────────────────────────────────── */

    .steps { flex-direction: column; margin-top: 32px; }

    .steps__item { flex: none; width: 100%; gap: 8px; border-top-width: 1px; padding: 16px 0; }

    .steps__item:first-child { border-top-width: 2px; }

    .steps__item:nth-child(n+3) { margin-top: 0; }

    .steps__title { font-size: 15px; line-height: 20px; }

    .yml { align-items: flex-start; gap: 14px; margin-top: 32px; padding: 22px; }

    .yml__bar { height: 52px; }

    .yml__title { font-size: 18px; line-height: 24px; }

    .yml__note { font-size: 13.5px; line-height: 20px; }

    /* ── Уведомления ───────────────────────────────────────────────────── */

    .notify { gap: 24px; }

    /* Числа уходят под название магазина: в строку с ним они не помещаются. */
    .mail__row { flex-wrap: wrap; gap: 8px 10px; }

    .mail__counts { width: 100%; gap: 10px; font-size: 12px; }

    /* ── Свой каталог ──────────────────────────────────────────────────── */

    .scheme { flex-direction: column; gap: 10px; margin-top: 28px; }

    .compare__head,
    .compare__row { padding: 11px 16px; }

    /* Разница в цене уходит: рядом с самой ценой ей места нет, а вычесть
       одно из другого человек может и сам. */
    .compare__diff { display: none; }

    /* ── Каталог витрин ────────────────────────────────────────────────── */

    .cats { margin-top: 24px; }

    .stores { gap: 12px; margin-top: 20px; }

    /* Высота карточки на узком экране по содержимому: подпись у одних
       магазинов в строку, у других в две, и общий потолок оставил бы под
       короткими пустоту. */
    .store {
        flex: none;
        width: 100%;
        min-height: 0;
        justify-content: flex-start;
        gap: 14px;
    }

    .all { margin-top: 16px; font-size: 14px; }

    .order { gap: 16px; margin-top: 28px; padding: 20px; }

    .order__title { font-size: 19px; letter-spacing: -0.4px; }

    /* ── Стартовые условия ─────────────────────────────────────────────── */

    .offer { gap: 22px; padding: 22px; }

    .offer__h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.6px; }

    .offer__sub { font-size: 14px; line-height: 22px; }

    .offer__list { grid-template-columns: 1fr; column-gap: 0; }

    .offer__cta { width: 100%; }

    .offer__cta .btn { justify-content: center; width: 100%; }

    .offer__note { text-align: center; }

    /* ── Вопросы ───────────────────────────────────────────────────────── */

    .faq { grid-template-columns: 1fr; margin-top: 28px; }

    .faq__item { padding: 16px 0; }

    .faq__q { font-size: 14.5px; line-height: 20px; }

    .faq__a { font-size: 13px; line-height: 21px; }

    /* ── Телеграм-канал ────────────────────────────────────────────────── */

    .tg { gap: 22px; border-radius: 18px; padding: 26px 20px 0; }

    .tg__text { align-items: stretch; gap: 12px; }

    .tg__eyebrow { align-self: flex-start; }

    .tg__h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.6px; }

    .tg__sub { font-size: 14px; }

    .tg__buttons { flex-direction: column; align-items: stretch; margin-top: 10px; }

    .tg__join { justify-content: center; }

    .tg__qr-label { width: auto; }

    .tg__tags { display: none; }

    .tg__points {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
    }

    .tg__points li {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }

    .tg__point-i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: none;
        border-radius: 8px;
        background: var(--bg);
    }

    .tg__point-i .i { width: 15px; height: 15px; }

    .tg__phone { max-width: 439px; }

    /* ── Призыв ────────────────────────────────────────────────────────── */

    .cta { padding: 56px 20px; }

    .cta__title { font-size: 29px; line-height: 32px; letter-spacing: -0.8px; }

    .cta__sub { font-size: 14px; line-height: 22px; }

    .cta__buttons { flex-direction: column; gap: 9px; width: 100%; }

    .cta__buttons .btn { justify-content: center; width: 100%; }

    .cta__note { font-size: 12.5px; }

    /* ── Каталог витрин ────────────────────────────────────────────────── */

    .filters { padding: 24px 20px 0; }

    .blog-search { flex: 1 0 100%; width: 100%; }

    /* Поиск и раздел — каждый во всю строку, подборка делит свою с кнопкой
       порядка. Счёт идёт последним, под самими органами: это их итог, а не
       подпись к поиску. */
    .filters__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "search search" "category category" "picks sort" "count count";
    }

    .filters__search { padding: 9px 12px; }

    .filters__category .dd__button { padding: 10px 12px; }

    .filters__count { justify-self: start; font-size: 12.5px; }

    /* От порядка остаётся значок: подпись «Сначала подключённые» рядом с
       подборкой не помещается. Выбранный порядок видно в раскрытом списке. */
    .filters__sort { justify-self: end; }

    .filters__sort .dd__button { width: 34px; height: 28px; justify-content: center; padding: 0; }

    .filters__sort .dd__value { display: none; }

    .facts { gap: 8px; margin-top: 18px; }

    .fact { flex: 1 0 100%; }

    .trial { margin-top: 12px; font-size: 12.5px; }

    .catalog { padding: 24px 20px 56px; }

    .catalog__grid { gap: 24px; }

    /* Строка раскладывается на две: сверху магазин и цена, снизу объём базы
       или состояние и кнопка. Шапки колонок нет — колонок больше нет. */
    .shop-head { display: none; }

    /* Без шапки верхняя черта первой видимой строки ложилась бы под рамку
       списка и давала двойную линию. `:first-child` не годится — строки
       переставляются через `order`. Сдвиг на пиксель уводит черту первой
       строки под обрез списка, а у остальных кладёт её на соседа. */
    .shop-row { margin-top: -1px; }

    .shop-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        grid-template-areas: "logo names price" "base base act";
        column-gap: 10px;
        row-gap: 10px;
        padding: 14px 14px 14px 14px;
    }

    .shop-row__logo { grid-area: logo; }

    .shop-row__names { grid-area: names; }

    .shop-row__price { grid-area: price; align-self: start; }

    .shop-row__base { grid-area: base; }

    .shop-row__act { grid-area: act; }

    /* Глубина уходит: рядом с кнопкой ей нет места, а объём в плашке
       читается и без неё. */
    .shop-row__depth { display: none; }

    .shop-row__size { background: var(--bg); border-radius: 6px; padding: 4px 9px 4px 8px; }

    .shop-row--on .shop-row__size { background: var(--surface); }

    .catalog__foot { flex-direction: column; gap: 12px; }

    .catalog__shown { flex: none; }

    .calc { flex-direction: column; gap: 14px; }

    .calc__includes { width: 100%; }

    .ask { padding: 20px 20px 0; }

    .ask__strip { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; border-radius: 14px; padding: 20px; }

    .ask__icon { width: 30px; height: 30px; }

    .ask__icon .i { width: 16px; height: 16px; }

    .ask__title { font-size: 16px; }

    .ask__tail { display: none; }

    .ask__btn { justify-self: stretch; justify-content: center; height: 42px; margin-top: 0; }

    .trial__tail { display: none; }

    /* ── Блог ──────────────────────────────────────────────────────────── */

    .blog-hero { padding: 40px 20px 0; }

    .blog-hero__title { margin: 16px 0 14px; font-size: 32px; line-height: 35px; letter-spacing: -0.8px; }

    .blog-hero__sub { font-size: 14px; line-height: 22px; }

    .topics { padding: 24px 20px 0; }

    .blog { padding: 24px 20px 48px; }

    .posts { flex-direction: column; gap: 16px; }

    .posts .post { flex: none; width: 100%; }

    .post__cover { height: 200px; padding: 20px; }

    .post__poster { width: 100%; font-size: 22px; line-height: 26px; letter-spacing: -0.5px; }

    .post__text { padding: 16px 18px; }

    .post-lead .post__cover { padding: 32px 20px; }

    .post-lead .post__poster { font-size: 26px; line-height: 30px; letter-spacing: -0.6px; }

    .post-lead .post__text { padding: 18px 18px 16px; }

    .article-head { padding: 20px 20px 0; }

    .article-head .doc__head { padding: 24px; }

    .article-head__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.8px; }

    .article-head__lead { font-size: 15px; }

    .article { padding: 32px 20px 0; }

    .article__text p { font-size: 16px; }

    .article__text > p:first-child { font-size: 17px; }

    .article__text h2 { margin-top: 30px; font-size: 23px; }

    .article__text ul,
    .article__text ol { font-size: 16px; }

    .also { padding: 48px 20px; }

    .also__row { flex-direction: column; gap: 16px; }

    .also__row .post { flex: none; width: 100%; }

    .also__title { font-size: 23px; }

    /* ── Документы ─────────────────────────────────────────────────────── */

    .doc { padding: 20px 20px 56px; }

    .doc__head { border-radius: 14px; padding: 32px 24px; }

    .doc__title { font-size: 24px; letter-spacing: -0.6px; }

    .doc__revision { font-size: 13.5px; }

    .doc__body { margin-top: 36px; font-size: 14px; }

    .doc__intro { font-size: 15px; }

    .doc__h { margin-top: 28px; font-size: 16px; }

    /* ── Футер ─────────────────────────────────────────────────────────── */

    .footer { padding: 40px 20px 24px; }

    .footer__inner { gap: 24px; }

    .footer__top { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; }

    .footer__col--support { grid-column: 1 / -1; }

    .footer__tagline { width: 100%; }

    /* ── Вход ──────────────────────────────────────────────────────────── */

    .auth__brand { padding: 22px 20px 24px; }

    .auth__headline { margin-top: 20px; font-size: 23px; line-height: 29px; letter-spacing: -0.5px; }

    .auth__form { padding: 36px 20px; }

    .auth__title { font-size: 25px; letter-spacing: -0.5px; }

    .auth__sub { font-size: 14px; line-height: 22px; }

    .code { gap: 8px; }

    .code__cell { height: 56px; font-size: 21px; }

    /* ── Страницы ошибок ───────────────────────────────────────────────── */

    .fail__head { padding: 0 20px; }

    .fail__body { padding: 32px 20px 72px; }

    .fail__code { font-size: 54px; letter-spacing: -1.5px; }

    .fail__title { margin-top: 20px; font-size: 23px; letter-spacing: -0.5px; }

    .fail__text { font-size: 14px; line-height: 22px; }

    /* Кнопки в столбец: рядом они на 390 не встают, а перенос оставил бы
       вторую висеть под первой не по центру. */
    .fail__actions { width: 100%; flex-direction: column; }

    .fail__actions .btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Движение

   Ровно то, на чём держится peec.ai, взятый за референс: блок появляется,
   когда до него дошли, — прозрачность и небольшой сдвиг снизу. Ничего не
   ездит само по себе и ничего не повторяется: это витрина, а не заставка.

   Первый экран показывается по загрузке чистым CSS, остальное — по попаданию
   в окно, и за это отвечает скрипт. Поэтому прячет блоки не сам `.reveal`, а
   `.js .reveal`: класс `js` ставит скрипт в начале страницы и снимает, если
   наблюдателя в браузере нет или человек попросил не двигать (`prefers-
   reduced-motion`). Без этого при выключенном JS страница осталась бы пустой.
   ══════════════════════════════════════════════════════════════════════════ */

/* Появление сделано анимацией, а не переходом, и нарочно: переход занял бы
   у блока свойство `transition`, а оно нужно тем же карточкам под курсором —
   подъём на ховере шёл бы полсекунды вместо двух десятых. */
.js .reveal { opacity: 0; }

/* `backwards`, а не `both`: с `both` доигравшая анимация продолжает держать
   `transform: none` и перебивает подъём карточки под курсором. Так она
   отпускает блок, а видимым его оставляет уже обычное правило. */
.js .reveal.is-in {
    opacity: 1;
    animation: rise 0.6s var(--ease) backwards;
}

/* Карточка сбоку от текста въезжает с задержкой: сначала появляется сам
   текст, потом рядом с ним экран. */
.js .reveal--side.is-in { animation: slide-in 0.7s var(--ease) 0.15s backwards; }

@keyframes slide-in {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* Первый экран — без скрипта: он виден сразу, наблюдать не за чем, а ждать
   загрузки скрипта ради собственной первой секунды незачем. Порядок тот же,
   в каком читают: заголовок, обещание, кнопка, подпись бренда. */
.hero__title { animation: rise 0.7s var(--ease) both; }
.hero__sub { animation: rise 0.7s var(--ease) 0.08s both; }
.hero__cta { animation: rise 0.7s var(--ease) 0.16s both; }
.hero__slogan { animation: rise 0.7s var(--ease) 0.24s both; }

/* Строки ленты приезжают по одной: это лента, и читают её сверху вниз. */
.events { animation: slide-in 0.8s var(--ease) 0.2s both; }

/* Линия под прилипшей шапкой проявляется, а не возникает. */
.hdr { transition: box-shadow 0.2s var(--ease); }

/* ── Страницы ошибок ───────────────────────────────────────────────────── */

/* Появление тем же движением, что у входа: экран один, наблюдать не за чем. */
.fail__code { animation: rise 0.6s var(--ease) both; }
.fail__title { animation: rise 0.6s var(--ease) 0.06s both; }
.fail__text { animation: rise 0.6s var(--ease) 0.12s both; }
.fail__actions { animation: rise 0.6s var(--ease) 0.18s both; }

/* ── Вход ──────────────────────────────────────────────────────────────── */

/* Вход — один экран без прокрутки: наблюдать здесь не за чем, и всё
   появляется по загрузке, как первый экран главной. Порядок тот же, в каком
   читают, — сначала тёмная половина с обещанием, следом форма. */
.auth__brand .wordmark { animation: rise 0.6s var(--ease) both; }

.auth__headline { animation: rise 0.7s var(--ease) 0.05s both; }

.auth__lead { animation: rise 0.7s var(--ease) 0.11s both; }

/* Перечисление въезжает по одному: читают его тоже по одному. */
.auth__list-item { animation: rise 0.5s var(--ease) both; }
.auth__list-item:nth-child(1) { animation-delay: 0.17s; }
.auth__list-item:nth-child(2) { animation-delay: 0.22s; }
.auth__list-item:nth-child(3) { animation-delay: 0.27s; }

.auth__title { animation: rise 0.7s var(--ease) 0.12s both; }

.auth__sub { animation: rise 0.7s var(--ease) 0.18s both; }

/* Форма целиком, а не по полю: внутри неё анимировать нечего — там ждут
   курсор, и вторая волна под уже поставленным фокусом только мешала бы. */
.auth__body { animation: rise 0.7s var(--ease) 0.24s both; }

.auth__row,
.auth__hint,
.auth__aside { animation: rise 0.6s var(--ease) 0.32s both; }

/* Клетка кода под курсором приподнимается тенью, а не сдвигом: цифры вбивают
   подряд, и прыгающая по очереди клетка сбивала бы взгляд. */
.code__cell { transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.2s var(--ease); }

.code__cell:focus { box-shadow: 0 8px 20px -14px #17171799; }

/* Стрелка возврата отъезжает назад — туда же, куда ведёт ссылка. */
.auth__aside-i { transition: transform 0.2s var(--ease); }

.auth__aside:hover .auth__aside-i:has(use[href="#i-arrow-left"]) { transform: translateX(-3px); }

/* Кнопка повтора кода оживает вместе со своей стрелкой — она и означает
   «ещё раз». До нулей счётчика кнопка выключена, и крутить там нечего. */
.auth__timer--on .auth__timer-i { transition: transform 0.35s var(--ease); }

.auth__timer--on:hover .auth__timer-i { transform: rotate(-180deg); }

/* Второй и следующий экраны входа появляются без анимации — её отключает
   класс от скрипта в `client/auth/layout`. Правило стоит после тех, что её
   назначают: у пунктов перечисления вес такой же, и решает порядок. */
.auth-instant .auth__brand .wordmark,
.auth-instant .auth__headline,
.auth-instant .auth__lead,
.auth-instant .auth__list-item,
.auth-instant .auth__title,
.auth-instant .auth__sub,
.auth-instant .auth__body,
.auth-instant .auth__row,
.auth-instant .auth__hint,
.auth-instant .auth__aside { animation: none; }

/* ── Отклик на курсор ──────────────────────────────────────────────────── */

.btn { transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease); }

.btn:hover { transform: translateY(-1px); }

/* Ниже `:hover` намеренно: у обоих одинаковый вес, и побеждает последний. */
.btn:active { transform: translateY(1px); }

/* Стрелка у кнопок и ссылок отъезжает по направлению перехода. Кнопка подбора
   исключена: там плюс и галка, а они никуда не ведут — ехать им незачем. */
.btn__i,
.link__i { transition: transform 0.2s var(--ease); }

.btn:not(.btn--pick):hover .btn__i,
.link:hover .link__i,
.all:hover .link__i { transform: translateX(3px); }

/* Карточки под курсором приподнимаются и роняют тень, а тёмное пятно внутри
   — квадрат со значком или с буквой — выворачивается наизнанку. Движение
   одно на оба ряда: и «что делает вместо вас», и плитки магазинов читаются
   как карточки одного каталога, и разное поведение под курсором делило бы
   их без причины.

   Подъём держится на том, что `rise` доигрывает с `backwards`: с `both` она
   продолжала бы держать `transform: none` и перебивала бы его. */
.does__card,
.kinds__card,
.scheme__step,
.store {
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.does__icon,
.kinds__icon,
.scheme__icon,
.store__letter { transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); }

.does__card:hover,
.kinds__card:hover,
.scheme__step:hover,
.store:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -14px #17171740;
}

.does__card:hover { border-color: #D9D9D5; }

/* Квадрат выворачивается тёмным там, где своего цвета у него нет: у шагов
   схемы и у карточек «что делает вместо вас» он белый с рамкой, и залить
   его тем же белым значило бы не сделать ничего. Рамку при этом гасим —
   иначе она обводит тёмное светлым. */
.does__card:hover .does__icon,
.scheme__step:hover .scheme__icon,
.store:hover .store__letter { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

/* У видов событий квадрат наливается своим цветом, а не общим тёмным: цвет
   тут значит, хорошая новость или плохая, и одинаково чёрные квадраты
   отняли бы у ряда единственный признак, который в нём и читают. */
.kinds__card:hover .kinds__icon { color: #FFFFFF; }

.kinds__card:hover .kinds__icon--up { background: var(--ok-fg); }
.kinds__card:hover .kinds__icon--down { background: var(--down-fg); }
.kinds__card:hover .kinds__icon--flat { background: var(--ink); }

/* Значок подрастает, буква — нет: у магазина в квадрате стоит его инициал, и
   растянутая буква читается опечаткой, а не движением. */
.does__card:hover .does__icon,
.kinds__card:hover .kinds__icon,
.scheme__step:hover .scheme__icon { transform: scale(1.06); }

/* Подчёркивание растёт из-под ссылки. Фоном, а не `text-decoration`: тот
   появляется целиком и мгновенно, а этот можно тянуть. */
.footer__col a,
.footer__bottom a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.2s var(--ease), color 0.15s var(--ease);
}

.footer__col a:hover,
.footer__bottom a:hover { background-size: 100% 1px; }

.footer__bottom a:hover { color: #FFFFFFCC; }

.menu__list { animation: rise 0.18s var(--ease) both; }

/* ── Просили не двигать ────────────────────────────────────────────────── */

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

    /* Плавная прокрутка тоже движение, и её просьба «не двигать» касается. */
    html { scroll-behavior: auto; }
}

/* ── Статья-разворот ───────────────────────────────────────────────────────
   Каркас статей, свёрстанных каждая под свой материал: текст идёт колонкой
   в 760, а врезки выходят на всю полосу в 1240. Колонка стоит там же, где у
   обычной статьи, — отступ слева равен оглавлению и зазору до него. Всё, что
   у статьи своё (инфографика, схемы), лежит её собственным файлом стилей. */

.story { padding: 56px var(--gutter) 88px; }

.story__row { max-width: var(--wrap); margin: 0 auto; }

.story__intro { display: flex; gap: 64px; }

.story__intro .article__toc { position: static; }

.story__col { margin-top: 24px; padding-left: 284px; }

/* Первый абзац лидом бывает только у вступления: у колонки, которая
   продолжает текст после врезки, первый абзац обычный. */
.story__col .article__text > p:first-child { color: #171717CC; font-size: 16.5px; }

.story__wide { margin-top: 40px; }

.story__figure { margin-bottom: 0; }

.story__figure + .story__col,
.paths + .story__col { margin-top: 16px; }

.story__stage {
    display: flex;
    align-items: center;
    gap: 72px;
    padding: 16px 72px;
}

.story__stage--reverse { flex-direction: row-reverse; }

.story__stage--stack { flex-direction: column; align-items: stretch; gap: 32px; padding: 16px 40px; }

.story__shot {
    flex: none;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 24px 60px #1717171F;
}

.story__shot img { width: 100%; height: auto; }

.story__shot--470 { width: 470px; }

.story__shot--564 { width: 564px; }

/* Кадр с прозрачным фоном — карточка кабинета без экрана вокруг неё. Тень
   рисуется по её контуру, а не прямоугольником обёртки: иначе вокруг
   карточки снова проступила бы рамка. */
.story__shot--float { overflow: visible; border-radius: 0; box-shadow: none; }

.story__shot--float img { filter: drop-shadow(0 20px 40px #1717171A); }

.story__side { flex: 1; display: flex; flex-direction: column; gap: 28px; }

.story__notes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story__notes--row { flex-direction: row; gap: 32px; }

.story__notes li { flex: 1; display: flex; gap: 16px; color: var(--ink-65); font-size: 15px; line-height: 1.6; }

.story__notes b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.35; }

.story__num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
}

.story__fact {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    color: var(--ink-65);
    font-size: 15px;
    line-height: 1.55;
}

.story__fact span { flex: none; color: var(--ink); font-size: 56px; letter-spacing: -2px; line-height: 1; }

.story__caption {
    max-width: 1044px;
    margin-top: 14px;
    padding-left: 284px;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.55;
}

.article__text .story__more {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.5;
}

.story__more svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ink-2); }

.article__text .story__quote {
    margin: 28px 0 0;
    border-left: 3px solid var(--ink);
    padding: 4px 0 4px 24px;
}

.article__text .story__quote p { color: var(--ink); font-size: 24px; line-height: 1.4; letter-spacing: -0.5px; }

/* Врезка «если надо» — рамкой без заливки: она не шаг статьи, а оговорка к
   нему, и спорить за внимание с текстом ей незачем. */
.story__aside {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 20px;
}

.story__aside-i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }

.story__aside-text { flex: 1; }

.article__text .story__aside-title { margin: 0; color: #171717CC; font-size: 15px; font-weight: 500; line-height: 1.45; }

.article__text .story__aside-body { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.article__text .story__aside-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    color: #171717CC;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
}

.story__aside-price span { color: var(--ink-3); font-size: 12px; font-weight: 400; }

@media (max-width: 1023px) {
    .story { padding: 44px 40px 72px; }

    .story__intro { flex-direction: column; gap: 32px; }

    .story__intro .article__toc { width: 100%; }

    .story__col,
    .story__caption { padding-left: 0; }

    .story__stage,
    .story__stage--reverse { flex-direction: column; align-items: stretch; gap: 32px; padding: 16px 0; }

    .story__shot--470,
    .story__shot--564 { align-self: center; max-width: 100%; }

    .story__notes--row { flex-direction: column; gap: 20px; }
}

/* На телефоне скриншот просто ложится по ширине текста: отдельных узких
   кадров под мобильную версию нет намеренно. */
@media (max-width: 767px) {
    .story { padding: 32px 20px 56px; }

    .story__wide { margin-top: 28px; }

    .story__stage,
    .story__stage--reverse,
    .story__stage--stack { gap: 20px; padding: 8px 0; }

    .story__shot { border-radius: 8px; box-shadow: 0 10px 24px #17171714; }

    .story__shot--float { border-radius: 0; box-shadow: none; }

    .story__shot--470,
    .story__shot--564 { width: 100%; }

    .story__notes { gap: 16px; }

    .story__notes li { gap: 12px; font-size: 14px; }

    .story__notes b { font-size: 15px; }

    .story__num { width: 22px; height: 22px; font-size: 12px; }

    .story__side { gap: 16px; }

    .story__fact { gap: 16px; padding-top: 16px; font-size: 14px; }

    .story__fact span { font-size: 40px; letter-spacing: -1.4px; }

    .story__caption { margin-top: 10px; font-size: 12.5px; }

    .story__col .article__text > p:first-child { font-size: 16px; }

    .article__text .story__quote p { font-size: 20px; }

    .story__aside { flex-direction: column; gap: 8px; padding: 14px 16px; }

    .story__aside-i { display: none; }

    .article__text .story__aside-price { flex-direction: row; align-items: baseline; gap: 8px; font-size: 15px; }
}