/* ============================================================
   /coaching/ по макету «Coaching»: карточки на сером поле.
   Та же система, что у новой главной (home-cards.css): белые карточки
   28 px, оранжевый акцент, Playfair в H1 и финальном призыве.
   Все правила ограничены .cl, прежний coaching-landing.css не трогаем.
   ============================================================ */
body:has(.cl) { background: #f4f6f9; }

.cl {
    --cl-bg: #f4f6f9;
    --cl-ink: #14181f;
    --cl-text: #3b4351;
    --cl-body: #5c6573;
    --cl-muted: #8a93a1;
    --cl-line: #eceff3;
    --cl-border: #e3e7ed;
    --cl-accent: #f0602b;
    --cl-accent-dark: #d9491c;
    --cl-accent-soft: #fdeae0;
    --cl-shadow: 0 2px 24px rgba(24, 34, 51, .06);
    /* Высота липкой шапки сайта плюс зазор: под ней встаёт оглавление,
       а под оглавлением — заголовок раздела после перехода по якорю. */
    --cl-toc-top: 84px;

    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--cl-ink);
}
.cl a { color: var(--cl-accent); text-decoration: none; }
.cl a:hover { color: var(--cl-accent-dark); }
.cl h1, .cl h2, .cl h3 { color: var(--cl-ink); }
.cl-anchor { scroll-margin-top: 170px; }

.cl-card {
    background: #fff;
    border-radius: 28px;
    padding: 44px;
    box-shadow: var(--cl-shadow);
}

/* Заголовки */
.cl-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
    margin: 0 0 18px;
}
.cl-h2 { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin: 0; }
.cl-h2--sm { font-size: 30px; letter-spacing: -.02em; }
.cl-h2--gap { margin-bottom: 24px; }
.cl-head {
    display: flex; flex-wrap: wrap; gap: 16px 20px;
    align-items: end; justify-content: space-between; margin-bottom: 28px;
}
.cl-sub { font-size: 17.5px; line-height: 1.55; color: var(--cl-body); margin: 10px 0 0; max-width: 60ch; }
.cl .cl-more { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Кнопки */
.cl-btn {
    display: inline-block; text-align: center;
    font-size: 16px; font-weight: 700; line-height: 1.3;
    padding: 16px 30px; border-radius: 14px;
    transition: background-color .2s ease, border-color .2s ease;
}
.cl .cl-btn--accent { background: var(--cl-accent); color: #fff; }
.cl .cl-btn--accent:hover { background: var(--cl-accent-dark); color: #fff; }
.cl .cl-btn--dark { background: var(--cl-ink); color: #fff; white-space: nowrap; }
.cl .cl-btn--dark:hover { background: #000; color: #fff; }
.cl .cl-btn--line { border: 1.5px solid var(--cl-border); color: var(--cl-ink); padding: 13px 22px; }
.cl .cl-btn--line:hover { border-color: var(--cl-ink); color: var(--cl-ink); }
.cl-btn--block { display: block; padding: 15px; }
.cl-btn--lg { font-size: 17px; padding: 19px 36px; }

/* Интро */
.cl .cl-intro__q { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 10px; }
.cl-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px; align-items: end; padding: 8px 0 4px;
}
.cl-intro__lead { font-size: 21px; line-height: 1.55; margin: 0 0 12px; max-width: 60ch; }
/* Описание блока из админки — один-два абзаца: первый крупнее, как в макете. */
.cl-intro__body p { font-size: 17px; line-height: 1.65; color: var(--cl-body); margin: 0 0 12px; max-width: 64ch; text-wrap: pretty; }
.cl-intro__body p:first-child { font-size: 21px; line-height: 1.55; color: var(--cl-ink); max-width: 60ch; }
.cl-intro__body p:last-child { margin-bottom: 0; }
.cl-intro__body a { border-bottom: 1px solid #f6c3ae; }
.cl-pick { background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--cl-shadow); }
.cl-pick__label {
    display: block; margin-bottom: 12px;
    font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cl-muted);
}
.cl .cl-pick .cl-btn { margin-bottom: 10px; }
.cl .cl-pick__alt { display: block; text-align: center; font-size: 15px; font-weight: 700; padding: 6px; }

/* Оглавление: липкое под шапкой; на узком экране листается вбок. */
.cl-toc {
    position: sticky; top: var(--cl-toc-top); z-index: 20;
    display: flex; flex-wrap: wrap; gap: 6px;
    background: #fff; border-radius: 20px; padding: 10px; box-shadow: var(--cl-shadow);
}
.cl .cl-toc a {
    padding: 11px 16px; border-radius: 12px;
    font-size: 14.5px; font-weight: 700; color: var(--cl-text); white-space: nowrap;
}
.cl .cl-toc a:hover, .cl .cl-toc a[aria-current="true"] { background: var(--cl-bg); color: var(--cl-ink); }

/* Сравнение с психотерапией */
.cl-cmp { border: 1px solid var(--cl-line); border-radius: 22px; overflow: hidden; }
.cl-cmp__row {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--cl-line);
}
.cl-cmp__row:last-child { border-bottom: 0; }
.cl-cmp__row > span { padding: 22px; }
.cl-cmp__row--head > span { padding: 18px 22px; }
.cl-cmp__row--head .cl-cmp__label { background: #f8fafc; }
.cl-cmp__col { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.cl-cmp__col i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cl-cmp__col--coach { background: var(--cl-accent-soft); }
.cl-cmp__col--coach i { background: var(--cl-accent); }
.cl-cmp__col--therapy { background: #eef2f7; }
.cl-cmp__col--therapy i { background: #5a7593; }
.cl-cmp__label {
    font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-muted);
}
.cl-cmp__cell { font-size: 16.5px; line-height: 1.6; }
.cl-cmp__cell--coach { background: #fffaf7; color: var(--cl-ink); }
.cl-cmp__cell--therapy { color: var(--cl-text); }
.cl-note {
    margin-top: 22px; background: var(--cl-bg); border-radius: 20px; padding: 22px 26px;
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    font-size: 16.5px; color: var(--cl-text);
}
.cl-note span { max-width: 60ch; }
.cl .cl-note a { font-size: 15.5px; font-weight: 700; }

/* Плитки «С чем поможет коуч»: вся плитка — ссылка, стрелка декоративная. */
.cl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cl .cl-tile {
    position: relative; display: block; overflow: hidden;
    min-height: 420px; border-radius: 26px;
    background: #2a313c; color: #fff;
    box-shadow: 0 2px 24px rgba(24, 34, 51, .08);
}
.cl-tile__media, .cl-tile__media picture, .cl-tile__media img,
.cl-tile__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-tile__media img { object-fit: cover; }
.cl-tile__veil {
    background: linear-gradient(180deg, rgba(12, 16, 22, 0) 25%, rgba(12, 16, 22, .6) 55%, rgba(12, 16, 22, .92) 100%);
}
.cl-tile__kicker {
    position: absolute; top: 18px; left: 18px; max-width: calc(100% - 96px);
    background: rgba(255, 255, 255, .92); color: var(--cl-ink);
    font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 12px; border-radius: 999px;
}
.cl-tile__go {
    position: absolute; top: 14px; right: 14px;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--cl-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
}
.cl-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: block; }
.cl .cl-tile__title {
    color: #fff; margin: 0 0 10px;
    font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance;
}
.cl-tile__sub { display: block; font-size: 15.5px; line-height: 1.55; color: #e4e8ee; text-wrap: pretty; }

/* Виды коучинга */
.cl-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cl .cl-kind {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--cl-line); border-radius: 20px; padding: 24px; color: var(--cl-ink);
    transition: border-color .2s ease, background-color .2s ease;
}
.cl .cl-kind:hover { border-color: var(--cl-accent); background: #fffaf7; color: var(--cl-ink); }
.cl-kind__num { font-size: 13px; font-weight: 800; color: var(--cl-accent); }
.cl-kind__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.cl-kind__hook { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--cl-text); }
.cl-kind__lead { font-size: 15px; line-height: 1.55; color: #6e7787; }
.cl-kind__go { margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--cl-accent); }

/* С какими задачами приходят */
.cl-apps {
    background: var(--cl-accent-soft); border-radius: 28px; padding: 40px 44px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
}
.cl-apps__text { font-size: 17.5px; line-height: 1.6; color: var(--cl-text); margin: 10px 0 18px; max-width: 62ch; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cl .cl-chips a {
    display: block; background: #fff; border-radius: 999px; padding: 9px 16px;
    font-size: 14.5px; font-weight: 600; color: var(--cl-text);
}
.cl .cl-chips a:hover { color: var(--cl-accent-dark); }

/* Как проходит сессия */
.cl-session {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 44px; align-items: start;
}
.cl-session__text, .cl-session__text p {
    font-size: 17.5px; line-height: 1.65; color: var(--cl-body); margin: 16px 0 26px; text-wrap: pretty;
}
.cl-session__text p { margin: 0 0 12px; }
/* Три факта в ряд при любой ширине: иначе третий падает на новую строку. */
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 0 0 28px; }
.cl-stat { background: var(--cl-bg); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column-reverse; min-width: 0; }
.cl-stat dd { margin: 0; font-size: 24px; white-space: nowrap; font-weight: 800; letter-spacing: -.02em; }
.cl-stat dt { font-size: 13.5px; font-weight: 600; color: var(--cl-muted); }
.cl-timeline { list-style: none; margin: 0; padding: 0; }
.cl-timeline__step {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px;
    padding-bottom: 26px;
}
.cl-timeline__step:last-child { padding-bottom: 0; }
/* Линия между кружками: от низа кружка до следующего шага. */
.cl-timeline__step:not(:last-child)::before {
    content: ''; position: absolute; left: 21px; top: 50px; bottom: 6px;
    width: 2px; background: var(--cl-line);
}
.cl-timeline__num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--cl-ink); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.cl-timeline__step:first-child .cl-timeline__num { background: var(--cl-accent); }
.cl .cl-timeline__title { font-size: 20px; font-weight: 800; margin: 9px 0 8px; }
.cl-timeline__text { font-size: 16.5px; line-height: 1.6; color: var(--cl-body); margin: 0; }

/* Как начать */
.cl-start {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
    list-style: none; margin: 0; padding: 0;
}
.cl-start__card {
    background: #fff; border-radius: 24px; padding: 30px; box-shadow: var(--cl-shadow);
    display: flex; flex-direction: column;
}
.cl-start__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 56px; font-weight: 700; line-height: 1; color: var(--cl-accent);
}
.cl .cl-start__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 20px 0 10px; }
.cl-start__text { font-size: 16.5px; line-height: 1.6; color: var(--cl-body); margin: 0; }
.cl-start__card--dark { background: var(--cl-ink); box-shadow: none; }
.cl-start__card--dark .cl-start__num { color: #f0a184; }
.cl .cl-start__card--dark .cl-start__title { color: #fff; }
.cl-start__card--dark .cl-start__text { color: #b4bcc8; margin-bottom: 20px; }
.cl-start__card--dark .cl-btn { margin-top: auto; }

/* Вопрос-ответ: слева липкая колонка с заголовком, справа аккордеон. */
.cl-faq {
    display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 44px; align-items: start;
}
.cl-faq__head { position: sticky; top: 180px; }
.cl-faq__text { font-size: 17px; line-height: 1.6; color: var(--cl-body); margin: 14px 0 22px; }
.cl-faq__list { display: grid; gap: 10px; }
.cl-faq__item { border: 1px solid var(--cl-line); border-radius: 18px; overflow: hidden; background: #fff; }
.cl-faq__item[open] { background: #f8fafc; }
.cl-faq__item summary {
    cursor: pointer; list-style: none;
    padding: 20px 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between;
    font-size: 17.5px; font-weight: 700; line-height: 1.4; color: var(--cl-ink);
}
.cl-faq__item summary::-webkit-details-marker { display: none; }
.cl-faq__item summary::after {
    content: '+'; flex: none; font-size: 22px; font-weight: 700; line-height: 1; color: var(--cl-accent);
}
.cl-faq__item[open] summary::after { content: '–'; }
.cl-faq__item summary:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: -2px; border-radius: 18px; }
.cl-faq__answer { padding: 0 22px 22px; max-width: 68ch; }
.cl-faq__answer p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.65; color: var(--cl-text); text-wrap: pretty; }
.cl-faq__answer p:last-child { margin-bottom: 0; }

/* Финальный призыв */
.cl-cta {
    background: var(--cl-accent); color: #fff; border-radius: 28px; padding: 52px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
}
.cl .cl-cta__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 46px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; color: #fff;
}
.cl-cta__text { font-size: 19px; margin: 0; color: #fff; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .cl .cl-tile { transition: transform .25s ease, box-shadow .25s ease; }
    .cl .cl-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(24, 34, 51, .18); color: #fff; }
}

@media (max-width: 1024px) {
    /* Оглавление здесь в два ряда и опускается ниже: запас под ним больше. */
    .cl-anchor { scroll-margin-top: 220px; }
    .cl-card { padding: 36px; }
    .cl-h1 { font-size: 44px; }
    .cl-h2 { font-size: 30px; }
    .cl-intro { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
    .cl-session, .cl-faq { gap: 32px; }
    .cl-cmp__row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .cl-intro, .cl-session, .cl-faq, .cl-apps, .cl-cta { grid-template-columns: minmax(0, 1fr); }
    .cl-intro { align-items: start; }
    .cl-faq__head { position: static; }
    .cl-apps .cl-btn, .cl-cta .cl-btn { justify-self: start; }
    /* Одна строка оглавления, листается пальцем — иначе липкая плашка
       в три ряда съедает пол-экрана. */
    .cl-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 16px; padding: 6px; }
    .cl-toc::-webkit-scrollbar { display: none; }
    .cl .cl-toc a { padding: 9px 13px; font-size: 14px; }
}

@media (max-width: 768px) {
    .cl { padding: 8px 16px 56px; gap: 24px; --cl-toc-top: 68px; }
    .cl-anchor { scroll-margin-top: 130px; }
    .cl-card, .cl-apps, .cl-cta { padding: 24px 20px; border-radius: 22px; }
    .cl-h1 { font-size: 36px; }
    .cl .cl-intro__q { font-size: 19px; }
    .cl-h2 { font-size: 26px; }
    .cl-h2--sm { font-size: 24px; }
    .cl-intro__body p:first-child, .cl-intro__lead { font-size: 18px; }
    .cl-cta__title { font-size: 34px; }
    .cl-cta__text { font-size: 17px; }
    .cl-tiles { grid-template-columns: minmax(0, 1fr); }
    .cl .cl-tile { min-height: 340px; border-radius: 22px; }
    .cl .cl-tile__title { font-size: 21px; }
    /* Таблица складывается: строка — карточка, подписи колонок из data-col. */
    .cl-cmp { border: 0; border-radius: 0; overflow: visible; display: grid; gap: 12px; }
    .cl-cmp__row--head { display: none; }
    .cl-cmp__row {
        grid-template-columns: minmax(0, 1fr);
        border: 1px solid var(--cl-line); border-radius: 18px; overflow: hidden;
    }
    .cl-cmp__row:last-child { border-bottom: 1px solid var(--cl-line); }
    .cl-cmp__row > span { padding: 14px 18px; }
    .cl-cmp__label { background: #f8fafc; }
    .cl-cmp__cell { font-size: 15.5px; }
    .cl-cmp__cell::before {
        content: attr(data-col); display: block; margin-bottom: 4px;
        font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    }
    .cl-cmp__cell--coach::before { color: var(--cl-accent); }
    .cl-cmp__cell--therapy::before { color: #5a7593; }
    .cl-note { padding: 18px; }
    .cl-start__card { padding: 24px; }
    .cl-start__num { font-size: 44px; }
    .cl-faq__item summary { padding: 16px 18px; font-size: 16.5px; }
    .cl-faq__answer { padding: 0 18px 18px; }
    .cl-apps .cl-btn, .cl-cta .cl-btn { justify-self: stretch; white-space: normal; }
}

@media (max-width: 560px) {
    /* Три факта в ряд не влезают: «ознакомительная» шире трети экрана. */
    .cl-stats { display: flex; flex-wrap: wrap; }
}