/* PayTutor — витрина. Прототип вёрстки v2.
 *
 * Направление: бумажная ведомость. Владелец центра каждый день смотрит в
 * разлинованный журнал и в тетрадь оплат — это его собственный артефакт,
 * который он узнаёт быстрее любой абстрактной иллюстрации. Поэтому фон —
 * светлая бумага с еле заметным графлением, а герой страницы — не картинка
 * и не градиент, а фрагмент журнала, где долги уже подсвечены.
 *
 * Почему светлая, а не тёмный градиент как сейчас: страницу открывают днём,
 * часто с телефона на улице, и речь о деньгах. Тёмно-фиолетовый фон читается
 * как «айти-продукт», а нам нужно, чтобы читалось как «ведомость, которой
 * можно доверять».
 *
 * Шрифты. Bitter — слэб-сериф с полной кириллицей, родня печатным бланкам:
 * даёт странице документальность, которой не даст очередной гротеск.
 * IBM Plex Sans — текст и интерфейс: он же стоит на страницах демо-стенда,
 * так что переход с витрины на стенд не выглядит переходом на чужой сайт.
 * IBM Plex Mono — только цифры в журнале, где важны одинаковые по ширине
 * знаки. Baloo 2 / Comic Neue, которые база подбирает под «education»,
 * отвергнуты сознательно: детский шрифт на странице про деньги центра
 * подрывает ровно то доверие, ради которого страница написана.
 */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;

    --paper:      #fbfcfd;  /* лист */
    --paper-2:    #f2f5f8;  /* полоса другого блока */
    --rule:       #d3dde6;  /* графление и рамки */
    --ink:        #15243b;  /* чернила */
    --ink-soft:   #54637c;  /* сноски, подписи; 4.6:1 на бумаге */
    --paid:       #14653f;  /* «оплачено» — зелёный ведомости, 6.4:1 */
    --paid-bg:    #e6f3ec;
    --debt:       #b02a1c;  /* красная ручка проверяющего, 6.1:1 */
    --debt-bg:    #fbebe8;
    --mark:       #fbf0cf;  /* жёлтый маркер */

    /* Фирменные цвета взяты из логотипа (#0088cc → #7c3aed), но затемнены до
       рабочего контраста: на исходном синем белый текст даёт 3.2:1 при норме
       4.5. Градиент во всю ширину, из-за которого страница читалась как
       «айти-продукт», не возвращаем — цвет работает пятнами и означает
       конкретные вещи: синий — действие, фиолетовый — учебная часть,
       зелёный — деньги пришли, красный — долг. */
    --brand:       #0b6fa4;
    --brand-dark:  #08587f;
    --brand-tint:  #e3f1fa;
    --violet:      #6d28d9;
    --violet-tint: #f0e9fd;

    --max: 1180px;
    --radius: 14px;
    --shadow: 0 18px 48px rgba(21, 36, 59, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    /* Графление: две линии сетки поверх бумаги. Держим на пределе видимости —
       страница должна ощущаться разлинованной, но не выглядеть как тетрадь. */
    background:
        linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 100% 34px,
        linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 34px 100%,
        var(--paper);
    background-attachment: fixed;
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Слабое графление съедает контраст текста, поэтому под содержимым лежит
   почти непрозрачная бумага, а сетка остаётся видна по краям. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--paper);
    opacity: .955;
    z-index: -1;
}

h1, h2, h3 {
    font-family: Bitter, Georgia, serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0;
}

p { margin: 0; }
a { color: inherit; }

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
}

.vh {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: -9999px;
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    z-index: 100;
}
.skip:focus { left: 16px; top: 12px; }

:where(a, button, input):focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Шапка ------------------------------------------------------------- */

.top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(251, 252, 253, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
}

.top-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Bitter, Georgia, serif;
    font-weight: 700;
    font-size: 19px;
    text-decoration: none;
    flex: 0 0 auto;
}

.top-nav {
    display: flex;
    gap: 22px;
    margin-right: auto;
    font-size: 15px;
}

.top-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.top-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }

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

.lang {
    display: flex;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    overflow: hidden;
}
/* Текущий язык — span, а не ссылка: вести саму на себя незачем. Поэтому
   отступы задаются обоим элементам, иначе активный код схлопывался
   в узкую полоску. */
.lang a,
.lang .lang-on {
    padding: 6px 11px;
    text-decoration: none;
    color: var(--ink-soft);
    font-family: "IBM Plex Mono", monospace;
}
.lang a:hover { background: var(--paper-2); color: var(--ink); }
.lang .lang-on { background: var(--brand); color: #fff; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 13px 22px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--brand-dark); box-shadow: 0 10px 22px rgba(11, 111, 164, .32); }
.btn:active { transform: none; }

.btn-sm { padding: 9px 16px; font-size: 15px; white-space: nowrap; }
.btn-lg { padding: 16px 30px; font-size: 18px; min-height: 56px; }
.btn-block { width: 100%; }

/* --- Герой ------------------------------------------------------------- */

.hero { padding: 72px 0 84px; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 18px;
}

h1 {
    font-size: clamp(34px, 4.4vw, 54px);
    margin-bottom: 20px;
}

/* Подчёркивание красной ручкой: тот же жест, которым в бумажной ведомости
   отмечают неплательщика. */
.u-debt {
    color: var(--debt);
    background: linear-gradient(transparent 62%, var(--debt-bg) 62%);
    padding: 0 2px;
}

.lead {
    font-size: 19px;
    color: var(--ink-soft);
    max-width: 30em;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin: 30px 0 34px;
}

.hero-note { font-size: 14px; color: var(--ink-soft); max-width: 15em; }

.hero-facts {
    /* Тремя колонками, а не flex-переносом: «0 тетрадей» уезжало на вторую
       строку и читалось как отдельная мысль. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 14px 36px;
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--rule);
}

.hero-facts li { display: flex; flex-direction: column; }
.hero-facts b {
    font-family: Bitter, Georgia, serif;
    font-size: 26px;
    line-height: 1.1;
    color: var(--brand);
}
.hero-facts span { font-size: 13.5px; color: var(--ink-soft); }

/* --- Журнал (сигнатурный элемент) -------------------------------------- */

.journal {
    margin: 0;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.journal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--brand-tint);
}

.journal-title { font-weight: 600; font-size: 15px; }
.journal-month {
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: var(--ink-soft);
}

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

.journal-table th,
.journal-table td {
    border-bottom: 1px solid var(--rule);
    padding: 11px 6px;
    text-align: center;
}

.journal-table thead th {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--ink-soft);
    padding-top: 13px;
    padding-bottom: 13px;
}

.journal-table .c-name { text-align: left; padding-left: 20px; }
.journal-table .c-pay { text-align: right; padding-right: 20px; }

.journal-table tbody th {
    text-align: left;
    padding-left: 20px;
    font-weight: 500;
    white-space: nowrap;
}

/* Точка присутствия и крестик пропуска — те же значки, что ставят в журнале
   от руки, поэтому расшифровывать их не нужно. Точку рисуем, а не набираем
   символом: типографский «·» в таблице читается как пустая ячейка.
   Крестик приглушён намеренно — красный на странице ровно один, за деньги;
   если им же красить пропуски, глаз перестаёт находить главное число. */
.was { font-size: 0; }
.was::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--paid);
}
.skip-day { color: var(--ink-soft); font-weight: 600; }

.pay {
    text-align: right;
    padding-right: 20px !important;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}
.pay.ok { color: var(--paid); }
.pay.debt { color: var(--debt); }
.pay.gone { color: var(--debt); }

.row-debt { background: var(--debt-bg); }

.journal-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--paper-2);
    font-size: 15px;
}
.journal-total b {
    font-family: Bitter, Georgia, serif;
    font-size: 24px;
}

.journal-cap {
    padding: 12px 20px 16px;
    font-size: 13px;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
}

/* --- Полосы ------------------------------------------------------------ */

.band { padding: 76px 0; border-top: 1px solid var(--rule); }
.band-paper { background: var(--paper-2); }

.h-section {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 14px;
}

.section-lead {
    color: var(--ink-soft);
    max-width: 44em;
    margin-bottom: 36px;
}

/* --- Карточки-вопросы --------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 34px;
}

.card {
    background: #fff;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-q {
    font-family: Bitter, Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    /* Вопрос владельца выделен маркером — так помечают строку, к которой
       собираются вернуться. */
    background: var(--mark);
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 2px 4px;
}

.card-a { font-size: 15.5px; color: var(--ink-soft); }

.card:nth-child(2) { border-left-color: var(--violet); }
.card:nth-child(3) { border-left-color: var(--paid); }

.card-where {
    margin-top: auto;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--ink-soft);
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

/* --- Что внутри --------------------------------------------------------- */

.areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
}

/* Цвет колонки — не украшение: он повторяет разметку остальной страницы.
   Деньги зелёные, как «оплачено» в журнале; учебная часть фиолетовая;
   люди — фирменный синий, тот же, что у всех действий. */
.area { --area: var(--brand); }
.area:nth-child(1) { --area: var(--paid); }
.area:nth-child(2) { --area: var(--violet); }

.area h3 {
    font-size: 21px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--area);
    margin-bottom: 16px;
    color: var(--area);
}

.area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.area li {
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--rule);
    font-size: 15.5px;
    position: relative;
}

/* Галочка ведомости вместо маркера списка: строка «сделано». */
.area li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--area);
    border-bottom: 2px solid var(--area);
    transform: rotate(-45deg);
}

/* --- Скриншоты ---------------------------------------------------------- */

/* Две колонки, а не три: скриншот интерфейса ценен, только когда на нём
   можно прочитать подписи столбцов. Третья колонка делала их картинками. */
.shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

@media (max-width: 760px) {
    .shots { grid-template-columns: minmax(0, 1fr); }
}

.shot { margin: 0; }

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: #fff;
}

.shot figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* --- Демо-стенд --------------------------------------------------------- */

.band-cta { background: #103a58; color: #fff; border-top: 0; }
.band-cta .section-lead { color: #c3ccdb; }

.cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 48px;
    align-items: start;
}

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.steps li {
    position: relative;
    padding-left: 40px;
    color: #dfe5ee;
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid #3f7ba2;
    border-radius: 50%;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: #fff;
}

.cta-box {
    background: #17496b;
    border: 1px solid #2a678d;
    border-radius: var(--radius);
    padding: 26px 24px;
}

.band-cta .btn {
    background: #fff;
    color: var(--brand-dark);
}
.band-cta .btn:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }

.cta-note {
    margin-top: 14px;
    font-size: 14px;
    color: #c3ccdb;
}

.cta-box hr {
    border: 0;
    border-top: 1px solid #2a678d;
    margin: 20px 0;
}

.cta-alt { font-size: 15px; color: #dfe5ee; }
.cta-alt a { color: #fff; }

/* --- Подвал ------------------------------------------------------------- */

.foot {
    border-top: 1px solid var(--rule);
    padding: 26px 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.foot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
}

/* --- Адаптив ------------------------------------------------------------ */

@media (max-width: 960px) {
    .hero-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero { padding: 48px 0 60px; }
    .band { padding: 56px 0; }
}

/* Пятый пункт меню («Сайт центра») перегрузил строку: на 780px кнопка
   «Открыть стенд» вылезала за край. Сначала ужимаем меню, потом убираем. */
@media (max-width: 1000px) {
    .top-inner { gap: 16px; }
    .top-nav { gap: 14px; font-size: 14px; }
}

@media (max-width: 880px) {
    /* Разделы уезжают из шапки: их место занимает содержимое, а дойти до них
       можно прокруткой и по ссылкам внутри страниц. */
    .top-nav { display: none; }
    .top-inner { min-height: 60px; gap: 12px; }
    .top-right { margin-left: auto; }
    .brand span { font-size: 17px; }
    .top-right .btn-sm { padding: 9px 13px; font-size: 14px; }
}

@media (max-width: 400px) {
    /* На самых узких экранах кнопка шапки ломалась на две строки. Язык здесь
       важнее: до стенда всё равно ведёт большая кнопка в первом экране. */
    .top-right .btn-sm { display: none; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .wrap { padding: 0 16px; }
    .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }

    /* В журнале на узком экране дни не нужны — нужен ответ про деньги.
       Оставляем имя и статус оплаты, дни прячем. */
    .journal-table thead th:not(.c-name):not(.c-pay),
    .journal-table td.was,
    .journal-table td.skip-day { display: none; }
    .journal-table .c-name, .journal-table tbody th { padding-left: 14px; }
    .pay { padding-right: 14px !important; }
    .journal-head, .journal-total, .journal-cap { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* === Блоки внутренних страниц =========================================== */

/* Шапка страницы: тот же ритм, что у героя главной, но без журнала —
   на внутренних страницах доказательство идёт ниже, в содержании. */
.page-head {
    padding: 56px 0 44px;
    border-bottom: 1px solid var(--rule);
    background: var(--brand-tint);
}

.page-head h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 16px; }
.page-head .lead { font-size: 18px; }

.top-nav a.is-current { color: var(--brand); border-bottom-color: var(--brand); }

/* --- Честное сравнение с готовыми системами ----------------------------- */

.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 32px;
}

.compare-col {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 26px 24px;
}

/* Наша колонка выделена рамкой, а не цветом фона: заливка читалась бы как
   «правильный ответ», а смысл блока в том, что правильных ответа два. */
.compare-col-us { border: 2px solid var(--brand); }

.compare-col h3 { font-size: 19px; margin-bottom: 14px; }
.compare-col-us h3 { color: var(--brand); }

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

.plain-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 15.5px;
    color: var(--ink-soft);
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rule);
}

.compare-col-us .plain-list li::before { background: var(--brand); }

.note-strong {
    margin-top: 26px;
    padding: 18px 20px;
    background: var(--mark);
    border-radius: var(--radius);
    font-size: 16px;
    max-width: 52em;
}

/* --- Порядок работы ----------------------------------------------------- */

.flow {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: flow;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

/* На странице «Как работаем» шагов пять и текста в них больше — там колонка
   читается лучше сетки. */
.flow-wide { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 46em; }

.flow li {
    position: relative;
    padding-top: 42px;
}

.flow-wide li {
    padding: 22px 0 22px 62px;
    border-bottom: 1px solid var(--rule);
}

.flow-wide li:last-child { border-bottom: 0; }

.flow li::before {
    counter-increment: flow;
    content: counter(flow);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 500;
}

.flow-wide li::before { top: 24px; }

.flow h3 { font-size: 18px; margin-bottom: 8px; }
.flow p { font-size: 15.5px; color: var(--ink-soft); }

.after-areas { margin-top: 30px; }

.link-arrow {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    border-bottom: 2px solid var(--brand-tint);
    padding-bottom: 2px;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { border-bottom-color: var(--brand); }

/* --- Разделы системы: текст и экран рядом -------------------------------- */

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 44px;
    align-items: center;
}

/* Чередование сторон, чтобы четыре подряд одинаковых блока не читались
   как один длинный список. */
.feature-flip .feature-text { order: 2; }

.feature h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 14px; }
.feature > .feature-text > p { color: var(--ink-soft); margin-bottom: 14px; }

.feature-note {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 3px solid var(--violet);
    font-size: 15px;
    color: var(--ink-soft);
}

/* --- Стоимость ---------------------------------------------------------- */

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.price-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-top: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 22px 20px;
}

.price-card h3 { font-size: 18px; margin-bottom: 10px; }
.price-card p { font-size: 15px; color: var(--ink-soft); }

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

.faq {
    max-width: 52em;
    margin-top: 28px;
    border-top: 1px solid var(--rule);
}

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item summary {
    cursor: pointer;
    padding: 18px 40px 18px 0;
    font-family: Bitter, Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    position: relative;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Плюс, превращающийся в минус: стрелка-шеврон в этом наборе выглядела бы
   как навигация, а не как раскрытие. */
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 16px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    color: var(--brand);
}

.faq-item[open] summary::after { content: "–"; }

.faq-item p {
    padding: 0 0 20px;
    font-size: 15.5px;
    color: var(--ink-soft);
    max-width: 44em;
}

/* --- Демо-страница ------------------------------------------------------ */

.demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 44px;
    align-items: start;
}

.demo-box {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 24px 22px;
    box-shadow: var(--shadow);
}

.demo-box h3 { font-size: 18px; margin-bottom: 12px; }
.demo-box .btn { margin-top: 18px; }

/* --- Текстовая страница -------------------------------------------------- */

.prose { max-width: 46em; }
.prose h2 { font-size: 22px; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; color: var(--ink-soft); }
.prose a { color: var(--brand); }
.prose .plain-list { margin-bottom: 14px; }
.prose b { color: var(--ink); }

@media (max-width: 860px) {
    .feature, .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .feature-flip .feature-text { order: 0; }
    .page-head { padding: 40px 0 32px; }
}

/* --- Каналы связи ------------------------------------------------------- */

.channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 32px;
}

.channel {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ярлык честно делит карточки на то, что работает сегодня, и то, что
   подключают отдельно. Без него блок читался бы как обещание, что всё три
   уже в коробке. */
.channel-tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--violet-tint);
    color: var(--violet);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.channel-tag-now { background: var(--paid-bg); color: var(--paid); }

.channel h3 { font-size: 20px; }
.channel > p { font-size: 15.5px; color: var(--ink-soft); }

.channel-note {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 13.5px;
    color: var(--ink-soft);
}

/* Карточка опции в прайсе: пунктир вместо сплошной линии — она не входит
   в базовую стоимость, и это видно до чтения текста. */
.price-card-option {
    border-top-style: dashed;
    border-top-color: var(--violet);
}
.price-card-option h3 { color: var(--violet); }