/* Страница консалтинга findagency по макету Consulting.dc.html.

   Палитра, шрифты и сетка берутся из agency-brand.css: он уже подключён на
   домене и задаёт --ag-* и .ag-wrap. Здесь только то, чего на сайте ещё не
   было — секции лендинга. Свой префикс .cs-, чтобы правки не разъезжались
   с каталогом агентств. */

.cs { padding-bottom: 8px; }

/* ── Заголовок секции: линейка, номер, H2 ─────────────────────────────── */
.cs-sec { padding-top: 96px; scroll-margin-top: 90px; }
.cs-sec__head {
    border-top: 1px solid var(--ag-ink); padding-top: 26px; margin-bottom: 36px;
    display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; justify-content: space-between;
}
.cs-sec__title-wrap { display: flex; gap: 24px; align-items: baseline; }
.cs-num { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .16em; color: var(--ag-muted); }
.cs-h2 {
    margin: 0; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.02;
    font-weight: 700; letter-spacing: -.04em; max-width: 900px;
}
.cs-h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.026em; }
.cs-note { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .14em;
           text-transform: uppercase; color: var(--ag-muted); }

/* ── Первый экран ─────────────────────────────────────────────────────── */
.cs-hero { padding-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
           gap: 56px; align-items: end; }
.cs-hero--single { grid-template-columns: minmax(0, 1fr); }
.cs-hero__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cs-hero__kicker i { width: 56px; height: 8px; background: var(--ag-block); display: block; }
.cs-hero__kicker span { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .16em;
                        text-transform: uppercase; color: var(--ag-muted); }
.cs-hero__title {
    margin: 0; font-size: clamp(38px, 5.4vw, 88px); line-height: .94;
    font-weight: 700; letter-spacing: -.05em;
}
/* Плашка под частью заголовка: рисуется псевдоэлементом позади текста. */
.cs-mark { position: relative; display: inline-block; }
.cs-mark::before {
    content: ''; position: absolute; left: -10px; right: -10px; top: 6%; bottom: 2%;
    background: var(--ag-block); z-index: 0;
}
.cs-mark span { position: relative; z-index: 1; }
.cs-hero__lead { margin: 26px 0 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: var(--ag-text); }
.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 10px; margin-top: 30px; max-width: 700px; }
.cs-fact { border: 1px solid var(--ag-ink); padding: 14px 16px; }
.cs-fact__label { font-family: var(--ag-mono); font-size: 9px; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ag-muted); }
.cs-fact__value { margin-top: 6px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cs-hero__note { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px;
                 font-family: var(--ag-mono); font-size: 10.5px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--ag-text); }
.cs-hero__note i { color: #9a9a96; font-style: normal; }
.cs-hero__media { justify-self: end; width: 100%; }
.cs-photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #d6d6d2; }
.cs-photo img, .cs-photo picture { display: block; width: 100%; height: 100%; object-fit: cover;
                                   filter: grayscale(1); }
.cs-photo__caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
                     font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .1em;
                     text-transform: uppercase; color: var(--ag-muted); }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.cs-btn {
    display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px;
    background: var(--ag-ink); color: var(--ag-bg); border: 1px solid var(--ag-ink);
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
body a.cs-btn { color: var(--ag-bg); }
.cs-btn:hover, body a.cs-btn:hover { background: var(--ag-text); border-color: var(--ag-text); color: var(--ag-bg); }
.cs-btn--ghost { background: transparent; color: var(--ag-ink); }
body a.cs-btn--ghost { color: var(--ag-ink); }
.cs-btn--ghost:hover, body a.cs-btn--ghost:hover { background: var(--ag-ink); color: var(--ag-bg); }
.cs-btn--sm { padding: 15px 24px; font-size: 12px; }
.cs-btn--block { justify-content: center; width: 100%; }

/* ── Фразы с планёрки ─────────────────────────────────────────────────── */
.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.cs-pain { border: 1px solid var(--ag-rule); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.cs-pain__quote-mark { font-size: 44px; line-height: .6; font-weight: 700; }
.cs-pain__quote { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -.025em; }
.cs-pain__row { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ag-text); }
/* Метка той же моноширинной капителью, что номера разделов: глаз сразу делит
   карточку на «почему» и «решение», не вчитываясь. */
.cs-pain__label { display: block; margin-bottom: 4px;
                  font-family: var(--ag-mono); font-size: 10px; font-weight: 400;
                  letter-spacing: .14em; text-transform: uppercase; color: var(--ag-muted); }
body a.cs-pain__go { margin-top: auto; align-self: flex-start;
                     font-family: var(--ag-mono); font-size: 11px; letter-spacing: .12em;
                     text-transform: uppercase; color: var(--ag-ink);
                     border-bottom: 1px solid var(--ag-ink); padding-bottom: 2px; }
body a.cs-pain__go:hover { color: var(--ag-text); border-color: var(--ag-text); }
.cs-cards__count { display: none; }

/* ── Кому подходит ────────────────────────────────────────────────────── */
.cs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.cs-col__head { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .14em;
                text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--ag-ink); }
.cs-col__head--muted { color: var(--ag-muted); }
.cs-line { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--ag-rule); }
.cs-line:last-child { border-bottom-color: var(--ag-ink); }
.cs-line__sign { font-size: 20px; font-weight: 700; flex: none; width: 24px; }
.cs-line__sign--minus { color: var(--ag-muted); }
.cs-line__title { font-size: 18px; font-weight: 700; letter-spacing: -.022em; }
.cs-line__text { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ag-text); }
.cs-line__text--lead { margin: 0; font-size: 16px; }

/* ── Что на руках + панель утечек ─────────────────────────────────────── */
.cs-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 56px; align-items: start; }
.cs-deliver { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--ag-rule); }
.cs-deliver:last-child { border-bottom: 1px solid var(--ag-ink); }
.cs-deliver__num { font-family: var(--ag-mono); font-size: 10px; color: var(--ag-muted); padding-top: 5px; }
.cs-panel { border: 1px solid var(--ag-ink); padding: clamp(22px, 2.6vw, 34px); }
.cs-panel__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                  font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ag-muted); }
.cs-panel__big { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 20px 0 22px; }
.cs-panel__value { font-size: clamp(64px, 7vw, 112px); font-weight: 700; letter-spacing: -.06em; line-height: .82; }
.cs-panel__caption { max-width: 240px; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
.cs-leak { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 14px; align-items: center;
           padding: 14px 0; border-top: 1px solid var(--ag-rule); }
.cs-leak__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.cs-leak__name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.cs-leak__amount { font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .08em;
                   color: var(--ag-muted); white-space: nowrap; }
.cs-leak__bar { height: 12px; background: #dcdcd8; }
.cs-leak__bar i { display: block; height: 12px; background: var(--ag-ink); }
/* Полоски слабее к низу списка: порядок утечек читается с одного взгляда. */
.cs-leak:nth-child(3) .cs-leak__bar i { background: var(--ag-text); }
.cs-leak:nth-child(4) .cs-leak__bar i { background: var(--ag-muted); }
.cs-leak:nth-child(n+5) .cs-leak__bar i { background: #9a9a96; }
.cs-leak__percent { font-size: 22px; font-weight: 700; letter-spacing: -.04em; text-align: right; }
.cs-panel__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
                     border-top: 1px solid var(--ag-ink); margin-top: 4px; padding-top: 18px; }
.cs-panel__sum-value { font-size: 26px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.cs-panel__sum-label { margin-top: 6px; font-family: var(--ag-mono); font-size: 8.5px;
                       letter-spacing: .1em; text-transform: uppercase; color: var(--ag-muted); }
.cs-panel__note { margin-top: 16px; font-family: var(--ag-mono); font-size: 9px;
                  letter-spacing: .08em; color: var(--ag-muted); }
/* Та же подпись, но над цифрами: читатель должен знать, к какому бюджету
   относятся суммы, до того как их увидит. */
.cs-panel__note--top { margin: 14px 0 0; }

/* Слова клиента в кейсе */
.cs-case__quote { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--ag-rule); }
.cs-case__quote p { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing: -.02em; }
.cs-case__quote footer { margin-top: 8px; font-family: var(--ag-mono); font-size: 9.5px;
                         letter-spacing: .12em; text-transform: uppercase; color: var(--ag-muted); }

/* Реквизиты исполнителя под блоком доверия */
.cs-legal { margin: 28px 0 0; font-family: var(--ag-mono); font-size: 10px;
            letter-spacing: .1em; text-transform: uppercase; color: var(--ag-muted); }

/* ── Этапы ────────────────────────────────────────────────────────────── */
.cs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }
.cs-step { border-top: 6px solid var(--ag-ink); padding-top: 20px; }
.cs-step__top { display: flex; justify-content: space-between; align-items: baseline; }
.cs-step__num { font-size: 36px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.cs-step__time { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cs-step .cs-h3 { margin: 16px 0 10px; }
.cs-step__text { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ag-text); }
.cs-step__input { font-size: 13.5px; line-height: 1.5; padding: 10px 0 24px; border-top: 1px solid var(--ag-rule); }
.cs-step__input b { font-family: var(--ag-mono); font-size: 9px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--ag-muted); font-weight: 400; }

/* ── Кейсы ────────────────────────────────────────────────────────────── */
.cs-case { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--ag-ink); padding: 26px; }
.cs-case__value { font-size: clamp(46px, 4.4vw, 68px); font-weight: 700; letter-spacing: -.055em; line-height: .9; }
.cs-case__caption { font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--ag-muted); margin-top: -6px; }
.cs-case__body { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5;
                 color: var(--ag-text); border-top: 1px solid var(--ag-rule); padding-top: 14px; }
.cs-case__body p { margin: 0; }
.cs-case__body b { color: var(--ag-ink); }
.cs-band { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
           justify-content: space-between; border-top: 1px solid var(--ag-ink);
           border-bottom: 1px solid var(--ag-ink); padding: 24px 0; }
.cs-band__title { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.03em; }

/* ── Доверие ──────────────────────────────────────────────────────────── */
.cs-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px 28px; }
.cs-trust__item { border-top: 1px solid var(--ag-ink); padding-top: 18px; }
.cs-trust__value { font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.cs-trust__title { margin: 14px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.024em; }
.cs-trust__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ag-text); }

/* ── Кто ведёт ────────────────────────────────────────────────────────── */
.cs-author { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
             gap: 56px; align-items: center; border-top: 1px solid var(--ag-ink); padding-top: 40px; }
.cs-author__quote { margin: 22px 0 0; font-size: clamp(26px, 3vw, 44px); line-height: 1.08;
                    font-weight: 700; letter-spacing: -.04em; }
.cs-author__who { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.cs-author__name { font-size: 20px; font-weight: 700; letter-spacing: -.026em; }
.cs-author__bio { margin: 18px 0 0; max-width: 620px; font-size: 16.5px; line-height: 1.6; color: var(--ag-text); }
.cs-author__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ── Форматы работы ───────────────────────────────────────────────────── */
.cs-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px; align-items: stretch; }
.cs-pack { border: 1px solid var(--ag-ink); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.cs-pack--dark { background: var(--ag-ink); color: var(--ag-bg); border-color: var(--ag-ink); }
.cs-pack--dark .cs-pack__meta, .cs-pack--dark .cs-pack__audience { color: var(--ag-block); }
.cs-pack--dark .cs-pack__list { color: #d6d6d2; border-top-color: #4a4a48; }
.cs-pack--dark .cs-pack__audience b, .cs-pack--dark .cs-pack__price { color: var(--ag-bg); }
.cs-pack__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cs-pack__meta { font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--ag-muted); }
.cs-pack__flag { font-family: var(--ag-mono); font-size: 9px; letter-spacing: .12em;
                 text-transform: uppercase; background: var(--ag-bg); color: var(--ag-ink); padding: 4px 8px; }
.cs-pack__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.032em; }
.cs-pack__price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cs-pack__list { display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.45;
                 color: var(--ag-text); border-top: 1px solid var(--ag-rule); padding-top: 16px; }
.cs-pack__audience { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ag-muted); }
.cs-pack__audience b { color: var(--ag-ink); }
.cs-pack .cs-btn { margin-top: auto; }
.cs-pack--dark .cs-btn { background: var(--ag-bg); color: var(--ag-ink); border-color: var(--ag-bg); }
body .cs-pack--dark a.cs-btn { color: var(--ag-ink); }
.cs-pack--dark .cs-btn:hover, body .cs-pack--dark a.cs-btn:hover { background: #d6d6d2; color: var(--ag-ink); }

/* ── Сравнение ────────────────────────────────────────────────────────── */
.cs-table { display: grid; grid-template-columns: minmax(160px, .9fr) repeat(3, minmax(0, 1fr)); }
.cs-table__cell { padding: 20px 16px; border-bottom: 1px solid var(--ag-rule);
                  font-size: 15px; line-height: 1.45; color: var(--ag-text); }
.cs-table__cell--head { padding: 14px 16px; border-bottom: 1px solid var(--ag-ink);
                        font-family: var(--ag-mono); font-size: 10px; letter-spacing: .14em;
                        text-transform: uppercase; color: var(--ag-muted); }
.cs-table__cell--head-dark { background: var(--ag-ink); color: var(--ag-bg); }
.cs-table__cell--key { padding-left: 0; font-size: 17px; font-weight: 700;
                       letter-spacing: -.02em; color: var(--ag-ink); }
.cs-table__cell--mine { background: var(--ag-hover); font-weight: 700; color: var(--ag-ink); }
.cs-table > .cs-table__cell:nth-last-child(-n+4) { border-bottom-color: var(--ag-ink); }
/* ── Вопросы ──────────────────────────────────────────────────────────── */
.cs-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px;
          border-top: 1px solid var(--ag-ink); padding-top: 26px; }
.cs-faq__aside i { display: block; margin: 26px 0 0 46px; width: 120px; height: 8px;
                   background: var(--ag-block); }
.cs-faq__aside p { margin: 22px 0 0 46px; font-size: 15.5px; line-height: 1.6;
                   color: var(--ag-text); max-width: 320px; }
.cs-faq__list { grid-column: span 2; min-width: 0; }
.cs-faq__item { border-bottom: 1px solid var(--ag-rule); padding: 20px 0; }
.cs-faq__item:last-child { border-bottom-color: var(--ag-ink); }
.cs-faq__q { list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
             display: flex; gap: 18px; justify-content: space-between; }
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__item[open] .cs-sign::before { content: '–'; }
.cs-faq__item:not([open]) .cs-sign::before { content: '+'; }
.cs-faq__a { margin: 14px 0 0; max-width: 760px; font-size: 16px; line-height: 1.6; color: var(--ag-text); }

/* ── Форма ────────────────────────────────────────────────────────────── */
.cs-form-sec { border-top: 1px solid var(--ag-ink); padding-top: 40px; }
.cs-form-sec__title { margin: 0 0 36px; max-width: 980px; font-size: clamp(32px, 4.4vw, 68px);
                      line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.cs-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 56px; align-items: start; }
.cs-form { display: flex; flex-direction: column; gap: 18px; }
.cs-field label { display: block; font-family: var(--ag-mono); font-size: 9.5px; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ag-muted); margin-bottom: 9px; }
.cs-field select {
    width: 100%; background: transparent; border: 1px solid var(--ag-rule);
    padding: 15px 16px; font-size: 16px; font-family: inherit; color: inherit;
    border-radius: 0; outline: none; appearance: none;
    /* Стрелка нарисована градиентами: свой svg ради одного селекта — лишний файл. */
    background-image: linear-gradient(45deg, transparent 50%, var(--ag-ink) 50%),
                      linear-gradient(135deg, var(--ag-ink) 50%, transparent 50%);
    background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.cs-field select:focus { border-color: var(--ag-ink); }
.cs-field input[type="text"], .cs-field input[type="tel"], .cs-field textarea {
    width: 100%; background: transparent; border: 1px solid var(--ag-rule);
    padding: 15px 16px; font-size: 16px; font-family: inherit; color: inherit; border-radius: 0; outline: none;
}
.cs-field input:focus, .cs-field textarea:focus { border-color: var(--ag-ink); }
.cs-field input::placeholder, .cs-field textarea::placeholder { color: #8a8a86; }
.cs-channels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.cs-channels__label { font-family: var(--ag-mono); font-size: 9px; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--ag-muted); margin-right: 4px; }
.cs-channel { padding: 9px 14px; font-size: 13px; cursor: pointer; border: 1px solid var(--ag-rule);
              background: transparent; color: var(--ag-text); }
.cs-channel.is-on { border-color: var(--ag-ink); background: var(--ag-ink); color: var(--ag-bg); }
.cs-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5;
              color: var(--ag-text); cursor: pointer; }
.cs-consent input { accent-color: var(--ag-ink); width: 17px; height: 17px; margin: 0; flex: none; }
.cs-consent a { border-bottom: 1px solid #9a9a96; }
.cs-errors { border-left: 4px solid var(--ag-ink); padding: 8px 0 8px 14px; font-size: 14.5px; }
.cs-errors ul { margin: 0; padding-left: 18px; }
.cs-hp { position: absolute; left: -9999px; }
.cs-done { border: 1px solid var(--ag-ink); padding: 32px; }
.cs-done__title { margin: 16px 0 12px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05;
                  font-weight: 700; letter-spacing: -.04em; }
.cs-next__head { font-family: var(--ag-mono); font-size: 10px; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--ag-muted); padding-bottom: 12px;
                 border-bottom: 1px solid var(--ag-ink); }
.cs-next { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--ag-rule); }
.cs-next:last-child { border-bottom-color: var(--ag-ink); }
.cs-next__num { font-size: 30px; font-weight: 700; letter-spacing: -.045em; line-height: 1; flex: none; width: 44px; }
.cs-next__title { font-size: 18px; font-weight: 700; letter-spacing: -.022em; }
.cs-next__text { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ag-text); }

/* ── Черновик ─────────────────────────────────────────────────────────── */
.cs-draft { margin-top: 20px; border: 1px dashed var(--ag-ink); padding: 14px 18px;
            font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }

/* ── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cs-sec { padding-top: 64px; }
    .cs-sec__head { margin-bottom: 26px; }
    .cs-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cs-hero__media { order: -1; max-width: 420px; }
    .cs-split, .cs-two, .cs-author, .cs-form-grid, .cs-faq { gap: 36px; }
    .cs-faq__list { grid-column: auto; }
    .cs-faq__aside i, .cs-faq__aside p { margin-left: 0; }
    /* Четыре колонки на телефоне не читаются: разворачиваем строки в карточки,
       подпись колонки подставляем из data-col. */
    .cs-table { display: block; border-top: 1px solid var(--ag-ink); }
    .cs-table__cell { display: block; padding: 8px 0; border-bottom: none; }
    /* Шапка нужна только сетке: в карточках подпись колонки стоит у значения. */
    .cs-table__cell--head { display: none; }
    .cs-table__cell[data-col]::before {
        content: attr(data-col); display: block; margin-bottom: 3px;
        font-family: var(--ag-mono); font-size: 9px; letter-spacing: .12em;
        text-transform: uppercase; color: var(--ag-muted);
    }
    .cs-table__cell--key { padding: 22px 0 6px; font-size: 18px; }
    .cs-table__cell--mine { background: none; }
    .cs-table__cell--mine::before { color: var(--ag-ink); }
    .cs-table > .cs-table__cell--mine { padding-bottom: 20px; border-bottom: 1px solid var(--ag-rule); }
    .cs-steps { gap: 0 16px; }
}
@media (max-width: 560px) {
    .cs-panel__summary { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cs-band { gap: 14px; }
    .cs-band .cs-btn { width: 100%; justify-content: center; }
    .cs-pain, .cs-case, .cs-pack, .cs-panel { padding: 20px; }
}

/* Лента карточек «с планёрки» на телефоне: листается вбок, край следующей
   карточки виден — понятно, что можно листать и сколько их. Стоит в конце
   файла, чтобы перебить правила сетки выше. */
@media (max-width: 768px) {
    .cs-cards {
        display: flex; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        /* Лента до краёв экрана: .ag-wrap на этой ширине даёт поля по 20 px. */
        margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px;
        scrollbar-width: none;
    }
    .cs-cards::-webkit-scrollbar { display: none; }
    .cs-cards > .cs-pain { flex: 0 0 85%; scroll-snap-align: start; }
    .cs-cards__count {
        display: block; margin: 14px 0 0;
        font-family: var(--ag-mono); font-size: 10px; letter-spacing: .14em; color: var(--ag-muted);
    }
}