/* Страница «Возможности». Общие части — секции, кнопки, шапка, призыв — живут
   в v2.css; здесь только то, что есть у одной этой страницы. Макеты кабинета
   внутри неё свёрстаны разметкой, а не снимками: вымышленные магазины и цены
   проще держать в коде, чем перевыпускать картинки после каждой правки. */

:root {
    --caps-new: #0E9F6E;
    --caps-new-bg: #E6F6EF;
    --caps-gone: #E0413F;
    --caps-gone-bg: #FCECEB;
    --caps-back: #2E5BFF;
    --caps-back-bg: #ECF1FF;
    --caps-price: #C77700;
    --caps-price-bg: #FDF3E3;
    --caps-head-bg: #FAFAF9;
    --caps-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}

/* ── Подпись раздела ───────────────────────────────────────────────────── */

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

.caps-eyebrow__n { font-family: var(--caps-mono); font-size: 12px; }

.caps-eyebrow__i { width: 14px; height: 14px; flex: none; }

.caps-lead {
    margin-top: 16px;
    color: var(--ink-65);
    font-size: 16px;
    line-height: 25px;
}

.caps-h3 {
    font-size: 26px;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: -0.7px;
}

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

.caps-hero { background: var(--bg); padding: 72px var(--gutter) 64px; }

.caps-hero__top { display: flex; align-items: flex-end; gap: 80px; margin-top: 20px; }

.caps-hero__title {
    width: 720px;
    flex: none;
    font-size: 60px;
    font-weight: 400;
    line-height: 63px;
    letter-spacing: -2px;
}

.caps-hero__title span { color: #17171766; }

.caps-hero__side { flex: 1; min-width: 0; padding-bottom: 8px; }

.caps-hero__lead { color: var(--ink-65); font-size: 16px; line-height: 25px; }

.caps-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }

.caps-hero__btn { padding: 13px 22px; font-size: 14.5px; }

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

.caps-toc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 48px; }

.caps-toc__item {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Тёмной плитка становится под курсором, а не заранее: выделенная в ряду
   ссылок читается как выбранная вкладка, а здесь выбирать нечего — это
   оглавление. */
.caps-toc__item:hover { background: var(--ink); border-color: var(--ink); color: #FFF; }

.caps-toc__top { display: flex; align-items: center; justify-content: space-between; }

.caps-toc__n { color: var(--ink-2); font-family: var(--caps-mono); font-size: 12px; transition: color 0.15s; }

.caps-toc__item:hover .caps-toc__n { color: #FFFFFF80; }

.caps-toc__i { width: 16px; height: 16px; flex: none; }

.caps-toc__title { font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.2px; }

/* ── Раскладки секций ──────────────────────────────────────────────────── */

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

.caps-split__text { flex: none; display: flex; flex-direction: column; align-items: flex-start; }

.caps-split__text .h2 { margin-top: 16px; }

.caps-split__text--480 { width: 480px; }

.caps-split__text--500 { width: 500px; }

.caps-head { display: flex; align-items: flex-end; gap: 80px; }

.caps-head__left { width: 620px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.caps-head__sub { flex: 1; min-width: 0; color: var(--ink-65); font-size: 16px; line-height: 25px; }

.caps-body { display: flex; align-items: flex-start; gap: 16px; margin-top: 44px; }

.caps-body__side { width: 420px; flex: none; display: flex; flex-direction: column; gap: 10px; }

.caps-body__main { flex: 1; min-width: 0; border-radius: 14px; }

/* Список с галочками под заголовком: пункты отбиты линией сверху, а не
   карточками — в колонке рядом с макетом рамки спорили бы с его рамкой. */
.caps-checks { list-style: none; margin: 36px 0 0; padding: 0; width: 100%; }

.caps-checks__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding: 14px 0;
}

.caps-checks__i { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.caps-checks__title { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }

.caps-checks__text { display: block; margin-top: 3px; color: var(--ink-65); font-size: 13.5px; line-height: 20px; }

/* ── Окна-макеты ───────────────────────────────────────────────────────── */

.caps-stage {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
}

.caps-window {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.caps-window > :last-child { border-bottom: 0; }

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

.caps-window__head--split { justify-content: space-between; padding: 14px 18px; }

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

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

.caps-window__meta { color: var(--ink-2); font-size: 11.5px; }

.caps-window__bar { border-bottom: 1px solid var(--line); padding: 10px 16px; }

.caps-window__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    color: var(--ink-2);
    font-size: 11.5px;
}

.caps-window__foot--start { justify-content: flex-start; padding: 12px 18px; }

.caps-window__action { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 500; }

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

.caps-avatar {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--ink);
    color: #FFF;
    font-size: 12px;
    font-weight: 500;
}

.caps-photo { width: 34px; height: 34px; flex: none; border-radius: 7px; background: var(--bg); }

.caps-photo--big { width: 38px; height: 38px; border-radius: 8px; }

.caps-chips { display: flex; gap: 6px; }

.caps-chip {
    flex: none;
    border-radius: 6px;
    padding: 5px 10px;
    background: var(--bg);
    font-size: 11.5px;
    white-space: nowrap;
}

.caps-chip--on { background: var(--ink); color: #FFF; }

/* ── Каталог ───────────────────────────────────────────────────────────── */

/* Размеры стоят внутри колонки товара, а не своей колонкой: на узком экране
   они уходят под название, и одна разметка годится обоим. Место под них —
   ровно пять квадратов, по нему же выровнена подпись в шапке. */
.caps-cat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 86px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
}

.caps-cat--head {
    /* Колонка «Размеры» на 12 уже квадратов: у строки между названием и
       размерами свой зазор внутри ячейки товара, у шапки его нет. */
    grid-template-columns: minmax(0, 1fr) 134px 90px 86px;
    background: var(--caps-head-bg);
    padding: 9px 16px;
    color: var(--ink-2);
    font-size: 11px;
}

.caps-cat__h-price { text-align: right; }

.caps-cat__item { display: flex; align-items: center; gap: 10px; min-width: 0; }

.caps-cat__who {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 146px;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
}

.caps-cat__name { grid-column: 1; font-size: 13px; font-weight: 500; }

.caps-cat__brand { grid-column: 1; color: var(--ink-2); font-size: 11.5px; }

.caps-cat__who .caps-cat__sizes { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 4px; }

.caps-size {
    width: 26px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--bg);
    font-size: 10.5px;
}

.caps-size--out {
    background: none;
    border: 1px solid var(--line);
    color: var(--ink-3);
    text-decoration: line-through;
}

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

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

.caps-cat__was { color: var(--ink-2); font-size: 11px; }

.caps-cat__out { color: var(--ink-2); font-size: 11.5px; }

.caps-cat__history { height: 26px; display: flex; align-items: flex-end; gap: 3px; }

.caps-cat__history span { flex: 1; border-radius: 2px; background: #17171740; }

.caps-cat__history--out span { background: var(--ink-3); }

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

.caps-kind {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
}

.caps-kind__title { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }

.caps-kind__text { display: block; margin-top: 3px; color: var(--ink-65); font-size: 13px; line-height: 19px; }

.caps-badge {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.caps-badge .i { width: 16px; height: 16px; }

.caps-badge--small { width: 28px; height: 28px; border-radius: 7px; }

.caps-badge--small .i { width: 14px; height: 14px; }

.caps-badge--new { background: var(--caps-new-bg); color: var(--caps-new); }
.caps-badge--gone { background: var(--caps-gone-bg); color: var(--caps-gone); }
.caps-badge--back { background: var(--caps-back-bg); color: var(--caps-back); }
.caps-badge--price { background: var(--caps-price-bg); color: var(--caps-price); }

.caps-day {
    border-bottom: 1px solid var(--line);
    background: var(--caps-head-bg);
    padding: 10px 18px;
    color: var(--ink-2);
    font-size: 11px;
}

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

.caps-event__text { flex: 1; min-width: 0; }

.caps-event__name { display: block; font-size: 13.5px; font-weight: 500; }

.caps-event__what { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; }

.caps-event__price { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }

.caps-event__price s { color: var(--ink-2); font-size: 12px; font-weight: 400; }

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

.caps-mail { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 24px; }

.caps-mail__head { display: flex; flex-direction: column; gap: 4px; }

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

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

.caps-digest { width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

.caps-digest__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 80px);
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 11px 14px;
    font-size: 13px;
    text-align: right;
}

.caps-digest__row:last-child { border-bottom: 0; }

.caps-digest__row > :first-child { text-align: left; }

.caps-digest__row--head { background: var(--caps-head-bg); padding: 9px 14px; color: var(--ink-2); font-size: 11px; }

.caps-digest__shop { font-weight: 500; }

.caps-digest__fresh { color: var(--caps-new); }

.caps-digest__gone { color: var(--caps-gone); }

.caps-mail__alert {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--caps-price-bg);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 19px;
}

.caps-mail__alert-i { width: 16px; height: 16px; flex: none; color: var(--caps-price); }

/* Кнопка в макете письма — картинка кнопки, а не ссылка: нажатие здесь
   обещало бы кабинет, в который гостя не пустят. */
.caps-mail__btn { pointer-events: none; }

.caps-split__text--500 .caps-checks { margin-top: 32px; }

/* ── Сравнение ─────────────────────────────────────────────────────────── */

.caps-steps { list-style: none; margin: 0; padding: 0; }

.caps-step {
    display: flex;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
}

.caps-step__n { flex: none; color: var(--ink-2); font-family: var(--caps-mono); font-size: 12px; line-height: 20px; }

.caps-step__title { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }

.caps-step__text { display: block; margin-top: 4px; color: var(--ink-65); font-size: 13px; line-height: 19.5px; }

.caps-cmp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 100px);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 12px 18px;
    text-align: right;
}

.caps-cmp--head { background: var(--caps-head-bg); padding: 9px 18px; color: var(--ink-2); font-size: 11px; }

.caps-cmp__item { text-align: left; min-width: 0; }

.caps-cmp__name { display: block; font-size: 13px; font-weight: 500; }

.caps-cmp__place { display: block; margin-top: 2px; color: var(--ink-2); font-size: 11.5px; }

.caps-cmp__mine { font-size: 13px; font-weight: 600; }

.caps-cmp__cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }

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

.caps-cmp__diff { font-size: 11px; }

.caps-cmp__diff--down { color: var(--caps-gone); }

.caps-cmp__diff--up { color: var(--caps-new); }

.caps-legend { display: inline-flex; align-items: center; gap: 6px; }

.caps-legend::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }

.caps-legend--down::before { background: var(--caps-gone); }

.caps-legend--up::before { background: var(--caps-new); }

/* Товары по ссылкам: карточка «Скоро» внутри сравнения — это тот же вопрос
   «мой товар против чужих», только без выгрузки и без магазина целиком. */
.caps-soon {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px;
}

.caps-soon__text { width: 520px; flex: none; }

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

.caps-soon__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    background: var(--caps-back-bg);
    padding: 4px 10px;
    color: var(--caps-back);
    font-size: 11.5px;
    font-weight: 500;
}

.caps-soon__badge-i { width: 12px; height: 12px; flex: none; }

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

.caps-soon__title { margin-top: 20px; font-size: 28px; font-weight: 400; line-height: 33px; letter-spacing: -0.8px; }

.caps-soon__lead { margin-top: 20px; color: var(--ink-65); font-size: 15px; line-height: 23px; }

.caps-soon__stage { border: 0; border-radius: 12px; }

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

.caps-ticks__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 19.5px; }

.caps-ticks__mark {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #FFF;
}

.caps-ticks__mark .i { width: 11px; height: 11px; }

.caps-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    font-size: 12.5px;
}

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

.caps-link__where { flex: 1; min-width: 0; }

.caps-link__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 13px; font-weight: 500; }

.caps-link__price .caps-cmp__diff { font-weight: 400; }

.caps-link__wait { color: var(--caps-price); font-size: 12px; font-weight: 400; }

.caps-link--add { font-weight: 500; }

.caps-link--add .caps-link__i { color: var(--ink); }

/* ── Выгрузки и новые магазины ─────────────────────────────────────────── */

.caps-panels { display: flex; align-items: stretch; gap: 16px; }

.caps-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    border-radius: 16px;
    background: var(--bg);
    padding: 36px;
    scroll-margin-top: 80px;
}

.caps-panel__title { margin-top: 14px; font-size: 30px; font-weight: 400; line-height: 35px; letter-spacing: -0.9px; }

.caps-panel__lead { margin-top: 14px; color: var(--ink-65); font-size: 15px; line-height: 23px; }

.caps-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-2);
    font-size: 13px;
}

/* Подпись слева переносится, кнопка — нет: сжатая, она ломала бы свою
   надпись на две строки. */
.caps-panel__foot .btn { flex: none; }

/* Кнопки в панелях — часть макета, кроме «Запросить подключение»: та ведёт
   по-настоящему. Поэтому погашена только выгрузка. */
.caps-panel__foot span.btn { pointer-events: none; }

.caps-fields {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 18px;
}

.caps-fields__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding: 13px 0;
    font-size: 13px;
}

.caps-fields__row:last-child { border-bottom: 0; }

.caps-fields dt { color: var(--ink-2); }

.caps-fields dd { margin: 0; font-weight: 500; text-align: right; }

.caps-stages {
    list-style: none;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 18px;
}

.caps-stages__item { display: flex; align-items: center; gap: 12px; padding: 11px 0; }

.caps-stages__dot {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.caps-stages__dot .i { width: 12px; height: 12px; }

.caps-stages__item--done .caps-stages__dot { background: var(--ink); color: #FFF; }

.caps-stages__item--active .caps-stages__dot { background: var(--caps-price-bg); color: var(--caps-price); }

.caps-stages__item--next .caps-stages__dot { border: 1px solid var(--line); background: var(--bg); color: var(--ink-3); }

.caps-stages__title { display: block; font-size: 13.5px; font-weight: 500; }

.caps-stages__item--next .caps-stages__title { color: var(--ink-2); }

.caps-stages__text { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; }

/* ── По мелочи ─────────────────────────────────────────────────────────── */

.caps-comfort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px; margin-top: 36px; }

.caps-comfort__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.caps-comfort__i { width: 18px; height: 18px; }

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

.caps-comfort__text { color: var(--ink-65); font-size: 13.5px; line-height: 20px; }

/* ── Под ваши задачи ───────────────────────────────────────────────────── */

.caps-custom { display: flex; align-items: flex-start; gap: 80px; }

.caps-custom__left { width: 400px; flex: none; display: flex; flex-direction: column; align-items: flex-start; }

.caps-custom__left .h2 { margin-top: 28px; }

.caps-custom__soft { color: #17171766; }

.caps-custom__left .caps-lead { margin-top: 28px; }

.caps-custom__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }

.caps-custom__btn { padding: 13px 22px; font-size: 14.5px; }

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

.caps-custom__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.caps-custom__grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.caps-custom__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding: 22px 0 26px;
}

.caps-custom__title { font-size: 15px; font-weight: 500; line-height: 19.5px; letter-spacing: -0.2px; }

.caps-custom__text { color: var(--ink-65); font-size: 13.5px; line-height: 20px; }

/* Плитки знакомых сервисов — в их фирменном цвете и сплошной заливкой, чтобы
   глаз цеплялся за них раньше подписи. Остальные — мягким тоном, иначе
   двенадцать ярких квадратов снова сливаются в одно пятно. */
.caps-tile {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.caps-tile .i { width: 19px; height: 19px; }

.caps-tile--excel { background: #1D6F42; color: #FFF; }
.caps-tile--onec { background: #FFD200; color: #E30613; }
.caps-tile--market { background: linear-gradient(135deg, #005BFF, #CB11AB); color: #FFF; }
.caps-tile--telegram { background: #229ED9; color: #FFF; }
.caps-tile--blue { background: #ECF1FF; color: #2E5BFF; }
.caps-tile--green { background: #E6F6EF; color: #0E9F6E; }
.caps-tile--red { background: #FCECEB; color: #E0413F; }
.caps-tile--teal { background: #E3F6F4; color: #12B0A0; }
.caps-tile--violet { background: #F1EDFF; color: #7C5CFC; }
.caps-tile--amber { background: #FDF3E3; color: #C77700; }
.caps-tile--pink { background: #FCE8F3; color: #C2185B; }
.caps-tile--grey { background: #EDEDEA; color: var(--ink); }

/* ── Планшет ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .caps-hero { padding: 48px 40px 56px; }

    .caps-hero__top { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 16px; }

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

    .caps-hero__side { padding-bottom: 0; }

    /* Оглавление листается вбок: плитки на всю ширину экрана, полосы
       прокрутки не видно — обрезанная краем плитка и так её заменяет. */
    .caps-toc {
        display: flex;
        margin: 36px -40px 0;
        padding: 0 40px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .caps-toc::-webkit-scrollbar { display: none; }

    .caps-toc__item { width: 140px; flex: none; }

    .caps-split,
    .caps-head,
    .caps-body,
    .caps-soon,
    .caps-panels,
    .caps-custom { flex-direction: column; align-items: stretch; }

    .caps-split { gap: 36px; }

    .caps-head { gap: 16px; }

    .caps-body { margin-top: 32px; }

    .caps-split__text--480,
    .caps-split__text--500,
    .caps-head__left,
    .caps-body__side,
    .caps-soon__text,
    .caps-custom__left { width: 100%; }

    .caps-soon { gap: 28px; padding: 28px; }

    .caps-comfort { grid-template-columns: repeat(2, 1fr); }

    .caps-custom { gap: 40px; }
}

/* ── Телефон ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .caps-hero { padding: 36px 20px 40px; }

    .caps-hero__title { font-size: 34px; line-height: 36px; letter-spacing: -1.1px; }

    .caps-hero__lead,
    .caps-lead,
    .caps-head__sub { font-size: 15px; line-height: 23px; }

    .caps-hero__cta { align-items: stretch; }

    .caps-hero__btn { justify-content: center; }

    .caps-hero__note { text-align: center; }

    .caps-toc { margin: 28px -20px 0; padding: 0 20px; }

    /* Письмо уходит под текст: на телефоне сначала обещание, потом его
       картинка. */
    .caps-split--reverse .caps-split__text { order: -1; }

    .caps-split { gap: 28px; }

    .caps-checks { margin-top: 24px; }

    .caps-stage { padding: 6px; }

    /* Каталог: график за 90 дней уходит, размеры встают под название. */
    .caps-cat,
    .caps-cat--head { grid-template-columns: minmax(0, 1fr) 84px; align-items: start; }

    .caps-cat__h-sizes,
    .caps-cat__h-history,
    .caps-cat__history { display: none; }

    .caps-cat__item { align-items: flex-start; }

    .caps-photo { width: 30px; height: 30px; }

    .caps-cat__who { display: flex; flex-direction: column; align-items: flex-start; }

    .caps-cat__who .caps-cat__sizes { padding-top: 4px; }

    .caps-window__bar,
    .caps-window__head--split .caps-chips { overflow: hidden; }

    .caps-window__foot { flex-direction: column; align-items: flex-start; gap: 8px; }

    .caps-window__foot--start { flex-direction: row; }

    .caps-window__head--split { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }

    .caps-kind { padding: 14px 16px; }

    .caps-event { padding: 12px 14px; }

    .caps-event__price { flex-direction: column-reverse; align-items: flex-end; gap: 1px; }

    .caps-day { padding: 10px 14px; }

    .caps-mail { padding: 18px 16px; }

    .caps-digest__row { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); }

    /* Сравнение: товар — строкой сверху, под ним четыре цены в ряд. Шапка
       таблицы подписывает только цены, и «Конкурент» в ней сокращается до
       номера. */
    .caps-cmp,
    .caps-cmp--head { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 14px; text-align: left; }

    .caps-cmp--head { padding: 9px 14px; }

    .caps-cmp--head .caps-cmp__item,
    .caps-cmp__long { display: none; }

    .caps-cmp .caps-cmp__item { grid-column: 1 / -1; }

    .caps-cmp__cell { align-items: flex-start; }

    .caps-soon { padding: 20px; gap: 24px; }

    .caps-soon__tags { flex-direction: column; align-items: flex-start; gap: 6px; }

    .caps-soon__title { font-size: 22px; line-height: 27px; letter-spacing: -0.6px; }

    .caps-link { padding: 12px 14px; font-size: 12px; }

    .caps-panels { gap: 12px; }

    .caps-panel { padding: 22px; gap: 22px; }

    .caps-panel__title { font-size: 22px; line-height: 27px; letter-spacing: -0.6px; }

    .caps-fields__row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 0; }

    .caps-fields dd { text-align: left; }

    .caps-panel__foot { flex-direction: column; align-items: flex-start; }

    .caps-h3 { font-size: 21px; line-height: 26px; letter-spacing: -0.5px; }

    .caps-comfort { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }

    .caps-custom { gap: 32px; }

    .caps-custom__left .h2,
    .caps-custom__left .caps-lead,
    .caps-custom__cta { margin-top: 20px; }

    .caps-custom__cta { align-self: stretch; }

    .caps-custom__btn { justify-content: center; }

    .caps-custom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

    .caps-custom__item { padding: 18px 0 20px; gap: 8px; }

    .caps-custom__title { font-size: 14px; line-height: 18px; }

    .caps-custom__text { font-size: 12.5px; line-height: 18px; }
}