/* ============================================================
   СТРАНИЦА «КОНСУЛЬТАЦИИ» timesavervfx.com/consulting/
   Встраиваемый фрагмент. Токены наследуются из .tsv-root
   (design/tokens.css) — внутри ничего глобального не объявляем.
   Все селекторы заскоуплены под .tsv-cons, включая ресет и медиа.

   Девять секций: герой → с чем приходят → что в списке вопросов →
   как проходит час → полоса «кто на том конце» (единственное
   прерывание фона) → когда час не нужен → FAQ с ценой в первом
   ответе → слайдер отзывов → как записаться.

   Заголовок первого уровня стилизован ПО КЛАССУ .tsv-cons-h1,
   а не по тегу: тема хоста уже выводит на этой странице свой
   заголовок «Консультации», и наш понижается на уровень одной
   правкой разметки — стили при этом не поедут.

   Кнопок ровно три, тексты разные, все ведут в один телеграм.
   Цена живёт внутри первого ответа FAQ, открытого по умолчанию.
   Микроразметка в фрагменте не живёт: визуальный редактор WordPress
   вырезает её из контента, она ставится SEO-плагином в шапке.
   ============================================================ */

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

.tsv-cons {
    position: relative;
    /* обёртка несёт свой фон и цвет: страница-хост может быть светлой */
    background: var(--tsv-bg);
    color: var(--tsv-fg);
    font-family: var(--tsv-sans);
    font-size: 16px;
    line-height: 1.6;
}

.tsv-cons h1,
.tsv-cons h2,
.tsv-cons h3,
.tsv-cons p,
.tsv-cons figure,
.tsv-cons blockquote { margin: 0; }
.tsv-cons ul, .tsv-cons ol { margin: 0; padding: 0; list-style: none; }
.tsv-cons img { display: block; max-width: 100%; }
.tsv-cons a { color: inherit; }

/* Фокус с клавиатуры — обязателен на всех ссылках, кнопках и summary */
.tsv-cons a:focus-visible,
.tsv-cons summary:focus-visible {
    outline: 2px solid var(--tsv-accent-bright);
    outline-offset: 2px;
}

/* ---------- Общая типографика ---------- */
.tsv-cons .tsv-cons-kicker {
    display: block;
    margin: 0 0 10px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-accent-bright);
}
.tsv-cons h2 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--tsv-fg);   /* градиентной вставки в h2 нет ни в одной секции */
}
.tsv-cons .tsv-cons-lead-sec {
    max-width: 620px;
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}

/* Три регистра тихих строк, чтобы не плодить литералы:
   quiet — 11px оговорки честности, mute — 13px приписки,
   soft — 13px обычная вторичная строка */
.tsv-cons .tsv-cons-quiet {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--tsv-fg-mute);
}
.tsv-cons .tsv-cons-mute {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tsv-fg-mute);
}
.tsv-cons .tsv-cons-soft {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tsv-fg-dim);
}

/* Текстовые ссылки — везде одинаковые, без кнопок и без слова «купить» */
.tsv-cons .tsv-cons-lead-sec a,
.tsv-cons .tsv-cons-case-text a,
.tsv-cons .tsv-cons-mute a,
.tsv-cons .tsv-cons-soft a,
.tsv-cons .tsv-cons-row a,
.tsv-cons .tsv-cons-author-text a {
    color: var(--tsv-accent-bright);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}

/* ---------- Секции, полоса, колонка чтения ---------- */
.tsv-cons .tsv-cons-section { padding: 48px 24px; }
.tsv-cons .tsv-cons-inner {
    max-width: 1040px;
    margin-inline: auto;
}
.tsv-cons .tsv-cons-head { margin: 0 0 24px; }

/* Ленивый рендер: браузер не считает то, что ниже экрана.
   На герое content-visibility НЕ ставим — это первый экран. */
.tsv-cons .tsv-cons-section,
.tsv-cons .tsv-cons-band       { content-visibility: auto; }
.tsv-cons .tsv-cons-s-who      { contain-intrinsic-size: auto 700px; }
.tsv-cons .tsv-cons-s-list     { contain-intrinsic-size: auto 620px; }
.tsv-cons .tsv-cons-s-how      { contain-intrinsic-size: auto 720px; }
.tsv-cons .tsv-cons-s-talk     { contain-intrinsic-size: auto 620px; }
.tsv-cons .tsv-cons-s-not      { contain-intrinsic-size: auto 520px; }
.tsv-cons .tsv-cons-s-faq      { contain-intrinsic-size: auto 560px; }
.tsv-cons .tsv-cons-s-reviews  { contain-intrinsic-size: auto 620px; }
.tsv-cons .tsv-cons-s-final    { contain-intrinsic-size: auto 420px; }

/* ---------- Кадр 16:9 и подпись под ним ---------- */
.tsv-cons .tsv-cons-shot { position: relative; }
.tsv-cons .tsv-cons-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tsv-radius);
    border: 1px solid var(--tsv-border-soft);
    background: #0e0b12;
    /* грейд трёх сгенерированных кадров; портрета автора это не касается */
    filter: saturate(0.78) brightness(0.88);
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.55);
}
/* Подпись стоит под каждым сгенерированным кадром: рядом лежат
   настоящий портрет автора и семь настоящих имён, и без неё
   сгенерированные люди читаются как фотографии клиентов */
.tsv-cons .tsv-cons-cap {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tsv-fg-mute);
}

/* ---------- Кнопка: pill с градиентом, без иконок и стрелок ---------- */
.tsv-cons .tsv-cons-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #a884ec 0%, #7a54cf 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px -14px rgba(122, 84, 207, 0.85);
    transition: filter var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

/* ---------- Цитата по месту: намеренно не как стена отзывов ---------- */
.tsv-cons .tsv-cons-pull {
    margin: 16px 0 0;
    padding: 2px 0 2px 18px;
    border-left: 2px solid var(--tsv-accent-dim);
    max-width: 620px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsv-fg-dim);
    font-style: normal;            /* курсива нет: чужую речь курсив искажает */
}
.tsv-cons .tsv-cons-pull cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    color: var(--tsv-fg);
}

/* ============================================================
   1. ГЕРОЙ — content-visibility НЕ ставим, это первый экран
   ============================================================ */
.tsv-cons .tsv-cons-hero { padding: 56px 48px 40px; }

/* Портрет автора в герое: настоящее фото, круглая рамка.
   Фильтров не вешаем — грейд уже запечён в файле, второй слой
   затемнения утопил бы лицо. */
.tsv-cons .tsv-cons-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.tsv-cons .tsv-cons-face img {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid var(--tsv-border-soft);
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}
.tsv-cons .tsv-cons-face-cap { display: grid; gap: 3px; }
.tsv-cons .tsv-cons-face-name { font-size: 15px; font-weight: 700; color: var(--tsv-fg); }
.tsv-cons .tsv-cons-face-role {
    font-family: var(--tsv-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--tsv-fg-mute);
}
.tsv-cons .tsv-cons-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-cons .tsv-cons-h1 {
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.14;
}
/* Градиентная вставка используется на всей странице ровно один раз — здесь */
.tsv-cons .tsv-cons-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--tsv-accent-bright), #e9d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.tsv-cons .tsv-cons-lead {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-facts {
    margin: 18px 0 0;
    font-family: var(--tsv-mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--tsv-fg-mute);
}
.tsv-cons .tsv-cons-hero .tsv-cons-btn { margin-top: 22px; }
.tsv-cons .tsv-cons-hero .tsv-cons-mute { margin-top: 12px; max-width: 560px; }

/* Единственное место страницы, где текст лежит на фотографии.
   Подложка плотная: размытие подложки в проекте запрещено. */
.tsv-cons .tsv-cons-shot-cap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 10px 14px;
    background: rgba(15, 11, 26, 0.9);
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius-sm);
    font-size: 13px;
    line-height: 1.45;
    color: var(--tsv-fg-dim);
}

/* Растёт псевдоэлемент, а не сам span: элемент со scaleX(0) имеет
   нулевую площадь, и IntersectionObserver на нём не срабатывает. */
.tsv-cons .tsv-cons-ruler {
    display: block;
    height: 2px;
    max-width: 1040px;
    margin: 32px auto 0;
}
.tsv-cons .tsv-cons-ruler::after {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tsv-accent), transparent);
    transform-origin: left center;
}

/* ============================================================
   2. С ЧЕМ ПРИХОДЯТ НА ЧАС — три ситуации стопкой.
   Ни рамок, ни карточек, ни колонок: уровня здесь нет,
   и визуальная иерархия его бы придумала.
   ============================================================ */
.tsv-cons .tsv-cons-case {
    padding: 22px 0;
    border-top: 1px solid var(--tsv-border-soft);
}
.tsv-cons .tsv-cons-case:last-child { padding-bottom: 0; }
.tsv-cons .tsv-cons-case h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tsv-fg);
}
.tsv-cons .tsv-cons-case-text {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsv-fg-dim);
}

/* ============================================================
   3. ЧТО ОБЫЧНО В СПИСКЕ ВОПРОСОВ — ядро страницы.
   Три записки лежат текстом и молчат: ни чекбоксов,
   ни конструктора, ни копирования в буфер.
   ============================================================ */
.tsv-cons .tsv-cons-memos { max-width: 620px; }
.tsv-cons .tsv-cons-memo {
    padding: 18px 20px 16px;
    background: var(--tsv-bg-elev);
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius);
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tsv-cons .tsv-cons-memo + .tsv-cons-memo { margin-top: 20px; }
.tsv-cons .tsv-cons-memo-label {
    display: block;
    margin: 0 0 12px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-accent-bright);
}
/* Строки набраны как заметки: со строчной, без точек, нумерации нет */
.tsv-cons .tsv-cons-memo-lines {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-memo-lines li {
    position: relative;
    padding-left: 14px;
}
.tsv-cons .tsv-cons-memo-lines li + li { margin-top: 8px; }
.tsv-cons .tsv-cons-memo-lines li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tsv-accent-dim);
}
.tsv-cons .tsv-cons-s-list .tsv-cons-quiet,
.tsv-cons .tsv-cons-s-list .tsv-cons-soft { max-width: 620px; }
.tsv-cons .tsv-cons-s-list .tsv-cons-btn { margin-top: 26px; }

/* ============================================================
   4. КАК ПРОХОДИТ ЧАС — три строки как вертикальная шкала.
   Фиксированная ширина колонки меток и есть шкала:
   протяжённость видна раскладкой, часы рисовать не нужно.
   ============================================================ */
.tsv-cons .tsv-cons-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: start;
}
.tsv-cons .tsv-cons-steps { margin-top: 22px; }
.tsv-cons .tsv-cons-step {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--tsv-border);
}
.tsv-cons .tsv-cons-step-label {
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--tsv-accent-bright);
}
.tsv-cons .tsv-cons-step p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsv-fg-dim);
}
/* Нижний блок продолжает строку ПОСЛЕ, своего заголовка у него нет */
.tsv-cons .tsv-cons-after {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--tsv-border-soft);
}
.tsv-cons .tsv-cons-after-fig { grid-area: 1 / 1; }
.tsv-cons .tsv-cons-after-body { grid-area: 1 / 2; }
.tsv-cons .tsv-cons-after-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}

/* ============================================================
   5. КТО БУДЕТ НА ТОМ КОНЦЕ — единственное прерывание фона
   ============================================================ */
.tsv-cons .tsv-cons-band {
    position: relative;
    /* Полоса — во всю ширину фрагмента, а не экрана. Вьюпортные единицы
       ширины здесь нельзя: фрагмент встраивается в чужую страницу и вылез
       бы из её колонки, плюс на десктопе такая ширина включает
       ширину скроллбара и даёт горизонтальную прокрутку. */
    margin-inline: 0;
    padding: 44px 24px;
    border-block: 1px solid var(--tsv-border-soft);
    background:
        linear-gradient(180deg, rgba(154, 122, 232, 0.05), rgba(154, 122, 232, 0.02)),
        var(--tsv-bg);
}
.tsv-cons .tsv-cons-band-lead {
    max-width: 620px;
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-talk { margin-top: 26px; }
.tsv-cons .tsv-cons-line { font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.tsv-cons .tsv-cons-line--you {                       /* читатель */
    color: var(--tsv-fg);
    max-width: 620px;
}
.tsv-cons .tsv-cons-line--me {                        /* автор */
    color: var(--tsv-fg-dim);
    max-width: 620px;
    margin-left: 64px;
    padding-left: 16px;
    border-left: 1px solid var(--tsv-accent-soft);
}
.tsv-cons .tsv-cons-talk .tsv-cons-quiet { margin-top: 10px; }

.tsv-cons .tsv-cons-author {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--tsv-border);
}
/* Круглая маска обязательна: исходник — круглая вырезка.
   CSS-фильтра здесь нет: грейд уже запечён в файл. */
.tsv-cons .tsv-cons-author-portrait {
    flex: 0 0 auto;
    display: block;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--tsv-border-soft);
    background: #0e0b12;
}
.tsv-cons .tsv-cons-author-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tsv-cons .tsv-cons-author-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-author-text strong {
    font-weight: var(--fw-semibold);
    color: var(--tsv-fg);
}

/* ============================================================
   6. КОГДА ЧАС НЕ НУЖЕН — честная отсечка.
   Ни иконок, ни крестиков, ни галочек: крестик рядом с отказом
   превращает честность в таблицу сравнения.
   ============================================================ */
.tsv-cons .tsv-cons-row {
    max-width: 720px;
    padding: 14px 0;
    border-top: 1px solid var(--tsv-border-soft);
    font-size: 15px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-turn {
    max-width: 720px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tsv-fg);
}

/* ============================================================
   7. ЧАСТЫЕ ВОПРОСЫ — цена первым вопросом и открытым.
   Ответы лежат в HTML и у свёрнутого details: подгрузка
   по клику через JS запрещена. Высоту не анимируем.
   ============================================================ */
.tsv-cons .tsv-cons-faq { max-width: 800px; }
.tsv-cons .tsv-cons-faq details {
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius-sm);
    transition: border-color var(--dur-base) var(--ease-out);
}
.tsv-cons .tsv-cons-faq details + details { margin-top: 8px; }
.tsv-cons .tsv-cons-faq details[open] { background: var(--tsv-bg-elev); }
.tsv-cons .tsv-cons-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tsv-fg);
}
.tsv-cons .tsv-cons-faq summary::-webkit-details-marker { display: none; }
.tsv-cons .tsv-cons-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-bottom: 4px;
    border-right: 2px solid var(--tsv-fg-mute);
    border-bottom: 2px solid var(--tsv-fg-mute);
    transform: rotate(45deg);
    transition: transform 180ms var(--ease-out);
}
.tsv-cons .tsv-cons-faq details[open] summary::after {
    margin-bottom: 0;
    margin-top: 4px;
    transform: rotate(225deg);
}
.tsv-cons .tsv-cons-faq-body {
    padding: 0 16px 16px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsv-fg-dim);
}

/* ============================================================
   8. ЧТО ГОВОРЯТ ПОСЛЕ ЧАСА — общий слайдер отзывов.
   Сама карточка и управление живут в design/components.css:
   отзывы обязаны выглядеть одинаково на всех лендингах,
   поэтому здесь их стилей нет — только подпись под секцией.
   ============================================================ */
.tsv-cons .tsv-cons-mono-note {
    margin: 12px 0 0;
    font-family: var(--tsv-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tsv-fg-mute);
}
.tsv-cons .tsv-cons-s-reviews .tsv-cons-mute { max-width: 720px; }

/* ============================================================
   9. КАК ЗАПИСАТЬСЯ — чистая framed-карточка.
   Без фоновой картинки и без сетки-клеточки. Формы заявки нет:
   поле ввода рядом с кнопкой добавляет шаг, а не убирает.
   ============================================================ */
.tsv-cons .tsv-cons-final {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 32px;
    background: var(--tsv-bg-elev);
    border: 1px solid var(--tsv-border-soft);
    border-radius: var(--tsv-radius-lg);
}
.tsv-cons .tsv-cons-final-text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-plan { margin-top: 20px; }
.tsv-cons .tsv-cons-plan li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: baseline;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-cons .tsv-cons-plan li + li { margin-top: 10px; }
.tsv-cons .tsv-cons-plan-num {
    font-family: var(--tsv-mono);
    font-size: 12px;
    color: var(--tsv-fg-mute);
}
/* Пример, а не инструмент: кнопки «скопировать» нет */
.tsv-cons .tsv-cons-sample {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius-sm);
    font-family: var(--tsv-mono);
    font-size: 14px;
    line-height: 1.55;
    color: var(--tsv-fg);
}
.tsv-cons .tsv-cons-final .tsv-cons-btn { margin-top: 24px; }
.tsv-cons .tsv-cons-final .tsv-cons-mute + .tsv-cons-mute { margin-top: 6px; }

/* ============================================================
   Наведение — только там, где есть настоящий курсор
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .tsv-cons .tsv-cons-btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }
    .tsv-cons .tsv-cons-faq details:hover { border-color: var(--tsv-border-soft); }

    .tsv-cons .tsv-cons-lead-sec a:hover,
    .tsv-cons .tsv-cons-case-text a:hover,
    .tsv-cons .tsv-cons-mute a:hover,
    .tsv-cons .tsv-cons-soft a:hover,
    .tsv-cons .tsv-cons-row a:hover,
    .tsv-cons .tsv-cons-author-text a:hover { text-decoration-color: var(--tsv-accent-bright); }
}
/* Записки не кликабельны — ховера у них нет ни на одной ширине.
   Кадры без hover-эффектов: это иллюстрации, а не плитки. */

/* ============================================================
   Движение. Скрытые состояния живут только под классом, который
   вешает JS: без JS и при reduce всё видно сразу.
   ============================================================ */
.tsv-cons.tsv-cons--anim .tsv-cons-ruler::after {
    transform: scaleX(0);
    transition: transform 600ms var(--ease-out);
}
.tsv-cons.tsv-cons--anim .tsv-cons-ruler.is-in::after { transform: scaleX(1); }

/* Никакой имитации печати: курсор и посимвольный набор ломают скринридер */
.tsv-cons.tsv-cons--anim .tsv-cons-line {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.tsv-cons.tsv-cons--anim .tsv-cons-line.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .tsv-cons *,
    .tsv-cons *::before,
    .tsv-cons *::after {
        animation: none !important;
        transition: none !important;
    }
    .tsv-cons .tsv-cons-ruler { transform: none; }
    .tsv-cons .tsv-cons-ruler::after { transform: none !important; }
    .tsv-cons .tsv-cons-line { opacity: 1; transform: none; }
}

/* ============================================================
   Брейкпоинты
   ============================================================ */
@media (max-width: 899px) {
    /* Герой: кадр уходит ПОД текст. Над текстом картинка съедает
       весь первый экран, и заголовок уезжает под сгиб. */
    .tsv-cons .tsv-cons-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tsv-cons .tsv-cons-lead { max-width: none; }
    .tsv-cons .tsv-cons-hero .tsv-cons-mute { max-width: none; }
}
@media (max-width: 760px) {
    /* Сплиты: кадры уходят под свои текстовые блоки */
    .tsv-cons .tsv-cons-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .tsv-cons .tsv-cons-after {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    .tsv-cons .tsv-cons-after-fig,
    .tsv-cons .tsv-cons-after-body { grid-area: auto; }

    /* Метки ДО / ЧАС / ПОСЛЕ уезжают над текстом отдельной строкой */
    .tsv-cons .tsv-cons-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
    .tsv-cons .tsv-cons-step-label { line-height: 1.4; }
}
@media (max-width: 699px) {
    .tsv-cons .tsv-cons-section { padding: 36px 16px; }
    .tsv-cons .tsv-cons-hero { padding: 36px 20px 28px; }
    .tsv-cons .tsv-cons-band { padding: 36px 16px; }

    /* Мобильные интринсики держим в медиа-выборке, иначе прыгает скроллбар */
    .tsv-cons .tsv-cons-s-who     { contain-intrinsic-size: auto 1400px; }
    .tsv-cons .tsv-cons-s-list    { contain-intrinsic-size: auto 1180px; }
    .tsv-cons .tsv-cons-s-how     { contain-intrinsic-size: auto 1400px; }
    .tsv-cons .tsv-cons-s-talk    { contain-intrinsic-size: auto 1080px; }
    .tsv-cons .tsv-cons-s-not     { contain-intrinsic-size: auto 980px; }
    .tsv-cons .tsv-cons-s-faq     { contain-intrinsic-size: auto 900px; }
    .tsv-cons .tsv-cons-s-reviews { contain-intrinsic-size: auto 720px; }
    .tsv-cons .tsv-cons-s-final   { contain-intrinsic-size: auto 620px; }

    .tsv-cons .tsv-cons-h1 { font-size: 32px; }
    .tsv-cons .tsv-cons-lead { font-size: 15px; }
    .tsv-cons .tsv-cons-facts { text-wrap: balance; }
    .tsv-cons h2 { font-size: 26px; }
    .tsv-cons .tsv-cons-lead-sec,
    .tsv-cons .tsv-cons-band-lead { font-size: 16px; }

    /* Цитата по месту остаётся с левым хайрлайном */
    .tsv-cons .tsv-cons-pull { padding-left: 14px; }

    /* Второй голос: 64px на 390px оставляют реплике 300px
       и рвут её в лапшу */
    .tsv-cons .tsv-cons-line--me { margin-left: 14px; }
    .tsv-cons .tsv-cons-author { flex-wrap: wrap; }
    .tsv-cons .tsv-cons-author-portrait { width: 36px; height: 36px; }

    /* Кнопки на всю ширину */
    .tsv-cons .tsv-cons-btn { display: flex; width: 100%; min-height: 48px; }

    .tsv-cons .tsv-cons-final { padding: 32px 20px; }
}
@media (max-width: 640px) {
    /* Наложение на 390px нечитаемо: панель становится обычным абзацем */
    .tsv-cons .tsv-cons-shot-cap {
        position: static;
        margin: 10px 0 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
}