/* Общий вид сайта «Кэр-Забота».
   Файл один на все страницы: правовые страницы, посадочные и главная должны
   выглядеть одинаково. Человек, ушедший с главной читать соглашение, не должен
   думать, что попал на чужой сайт.
   Шрифты только системные: своих файлов шрифтов нет, чужие домены не грузим,
   поэтому страница открывается и без сети к сторонним серверам. */

/* ───────────────────────── Цвета ─────────────────────────
   Зелёный --accent достался от правовых страниц, и менять его нельзя: он уже
   стоит в документах и в панели. Второй цвет тёплый: платформа про заботу о
   теле и о душе, и одним зелёным это не сказать. Тёплым помечаем то, что про
   человека (карта клиента, отзывы, слово о людях), зелёным то, что про дело.
   Пары светлой и тёмной темы подобраны так, чтобы текст на фоне держал
   контраст не ниже 4.5:1. Это посчитано, а не на глаз: каждая пара прогнана
   по формуле контраста из WCAG на всех трёх фонах (--bg, --surface,
   --surface-2) и на своей мягкой плашке. Тёмная тема прошла сразу, светлая
   нет, и цвета ниже поправлены по счёту. */
/* Светлая тема про комфорт, а не про офис: фон топлёного молока вместо белого,
   поверхности чуть теплее фона, главный акцент тёплая терракота, зелёный ушёл в
   поддерживающий. Чистый белый и серо-синие полутона убраны намеренно: от них
   страница читается как бухгалтерская, а платформа про заботу о теле и душе.

   Терракота, зелень и приглушённый серый взяты глубже первого подбора. Первый
   вариант был красивее, но не читался: --accent #b4603c давал 4.11:1 на фоне,
   3.74:1 на мягком разделе и 3.62:1 на своей плашке, --warm #4f7f6b давал
   4.20:1 и 3.82:1, --muted #7a6a5d давал 4.32:1 на мягком разделе. Это ниже
   4.5:1, то есть ссылку на светлом фоне не прочитает тот, у кого зрение хуже
   нашего, а таких среди тех, кто ходит по спа и к психологу, не меньше, чем
   везде. Оттенок и насыщенность оставлены прежними, опущена только светлота:
   те же терракота и зелень, просто глубже. Стало 5.12:1, 4.66:1 и 4.51:1 у
   --accent, 5.00:1, 4.55:1 и 4.63:1 у --warm, 4.52:1 у --muted на мягком
   разделе. Белая надпись на залитой кнопке поднялась с 4.49:1 до 5.60:1. */
:root {
  --bg: #faf4ec;
  --surface: #fffaf3;
  --surface-2: #f3e9dc;
  --border: #e6d9c7;
  --text: #2a211c;
  --muted: #77675b;
  /* Главный цвет взят из логотипа: ладони там кораллового #f17865. В тексте и
     на кнопках он светловат (контраст 2.5 к фону при нужных 4.5), поэтому
     затемнён до #b8432f: это тот же коралл, только глубже.
     Числа считаны по формуле WCAG, а не на глаз: 4.95 к бумаге, 5.21 к
     карточке и 4.51 к тёплой плашке .section-soft. Прежний #c04a35 давал
     4.498 к бумаге и 4.10 к плашке, то есть ссылка на залитом разделе норму
     не брала. Второй цвет золотой, из раковины: её #aa8340 слаб, прежний
     #8f6f23 давал 4.30 и 3.92, взят #82631d (5.12 и 4.67). */
  --accent: #b8432f;
  --accent-soft: #fae3dc;
  --warm: #82631d;
  --warm-soft: #f6ecd6;
  --warn: #8a6420;
  --warn-soft: #f8efdc;
  /* Текст на залитой кнопке. В светлой теме заливка тёмная и текст белый, в
     тёмной наоборот, поэтому цвет вынесен в переменную, а не вписан в кнопку. */
  --on-accent: #fff;
  /* Тень тёплая и размытая: мягкий свет, а не канцелярская рамка. */
  --shadow: 0 1px 2px rgba(90, 60, 40, .05), 0 14px 36px rgba(120, 80, 55, .10);
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Тёмная тоже тёплая: тёмно-коричневый, а не синевато-серый, иначе вечером
       страница холоднее, чем днём, и ощущение заботы пропадает. */
    --bg: #1a1512;
    --surface: #231c18;
    --surface-2: #2b221d;
    --border: #3b2f27;
    --text: #f1e7dd;
    --muted: #a8968a;
    /* Вечером те же два цвета, но светлее: на тёмном фоне глубокий коралл
       сливается, а осветлённый #f5886f даёт 7.4 и остаётся тем же цветом
       логотипа. Золото #cfa956 держит 8.2. */
    --accent: #f5886f;
    --accent-soft: #3a211b;
    --warm: #cfa956;
    --warm-soft: #33280f;
    --warn: #d8b273;
    --warn-soft: #362b18;
    --on-accent: #2a1410;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Полоса шириной страницы. 1120 px: шире строки читаются тяжело, а сетка из
   трёх карточек в эту ширину встаёт без тесноты. */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* Первый экран внутренних страниц. Было 760 пикселей, и заголовок с подзаголовком
   занимали две трети экрана, а дальше шла пустота: страница выглядела
   недовёрстанной. Теперь та же ширина, что у остального содержимого. */
.wrap-narrow { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
/* clamp вместо точек перелома: заголовок уменьшается плавно, и на 360 px его
   не приходится ловить отдельным правилом. */
h1 { font-size: clamp(30px, 5.4vw, 50px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
img, svg { max-width: 100%; }

/* Видно только для чтения с экрана: полный список слов у подвижной строки и
   подписи, которые глазами читаются из вида. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Видимый фокус нужен всем, кто ходит по странице с клавиатуры. Берём
   :focus-visible, чтобы рамка не вспыхивала у тех, кто просто кликает мышью. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible + .nav-label,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Ссылка «к содержимому» для тех, кто идёт с клавиатуры: иначе до главного
   текста приходится протыкать всё меню. */
.skip {
  position: absolute; left: 20px; top: -60px; z-index: 60;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ───────────────────────── Кнопки ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  text-align: center;
}
.btn-main { background: var(--accent); color: var(--on-accent); }
.btn-warm { background: var(--warm); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-small { padding: 10px 16px; font-size: 15px; }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ───────────────────────── Шапка ─────────────────────────
   Меню складывается без сторонних библиотек, но двумя разными приёмами, и это
   осознанно.
   1. Раскрывающиеся разделы («Возможности», «Для кого») это details и summary:
      браузер сам даёт им поведение кнопки, обработку пробела и Enter, и чтение
      с экрана объявляет их как «свёрнуто» и «развёрнуто». Писать это вручную
      на чекбоксе значит повторять то, что уже есть.
   2. Сама кнопка меню на телефоне это чекбокс с подписью, а не details. У
      details содержимое закрытого блока спрятано не только display: проверка в
      Chrome 150 показала, что на широком экране правило display: flex для
      содержимого закрытого details даёт ненулевой размер, но
      checkVisibility() возвращает false, то есть содержимое всё равно не
      видно. А на широком экране меню обязано быть видно, пока «кнопка» закрыта.
      У чекбокса с соседним блоком такого правила нет, и там checkVisibility()
      возвращает true. Поэтому складывается меню чекбоксом. */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.top > .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 19px; color: var(--text); text-decoration: none;
  letter-spacing: -0.01em; margin-right: auto;
}
/* Высоту задаём, ширину считает браузер по пропорциям из width и height в
   теге: знак не квадратный, и жёсткая ширина сплющила бы ладони. 28px это
   предел, при котором шапка не становится выше: строка названия рядом и так
   занимает 30px. */
.brand-mark { width: auto; height: 28px; flex: none; }

/* Чекбокс не display: none: так он остаётся доступным с клавиатуры, а рамку
   фокуса за него показывает подпись. */
.nav-switch { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-weight: 600; font-size: 15px; background: var(--surface);
}
.nav-label svg { width: 16px; height: 16px; }
.nav {
  display: none; width: 100%;
  flex-direction: column; gap: 4px;
  padding: 8px 0 4px;
}
.nav-switch:checked ~ .nav { display: flex; }
.nav-link {
  display: block; padding: 11px 2px; color: var(--text);
  text-decoration: none; font-weight: 600; font-size: 16px;
}
.nav-actions { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 4px; }

/* Раскрывающийся раздел меню */
.menu > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 11px 2px; font-weight: 600; font-size: 16px; list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}
.menu[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.menu-panel { padding: 2px 0 10px; }
.menu-item {
  display: block; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text);
}
.menu-item:hover { background: var(--accent-soft); }
.menu-item b { display: block; font-size: 15px; }
.menu-item span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.menu-all { font-size: 14px; font-weight: 600; padding: 8px 12px; display: inline-block; }

/* На телефоне меню раскрывается прямо в шапке, а шапка липкая. Раскрытый
   список «Для кого» это девять пунктов с перечнем вывесок под каждым: он выше
   экрана целиком, и до нижних пунктов и до кнопок входа человек не
   доезжает. Поэтому на узком экране:
   — перечни вывесок в пунктах скрыты, остаются названия групп;
   — список прокручивается внутри себя, а не растит шапку выше окна.
   Высота считается от действительной высоты окна (dvh): на телефоне адресная
   строка то появляется, то исчезает, и 100vh там больше того, что видно. */
@media (max-width: 899px) {
  .nav {
    /* Две записи подряд: dvh понимают не все телефоны, и там, где не понимают,
       правило целиком отбрасывалось бы и прокрутки не было вовсе. */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-item { padding: 9px 12px; }
  .menu-item span { display: none; }
  .menu-item b { font-size: 16px; font-weight: 500; }
}

@media (min-width: 900px) {
  .nav-label { display: none; }
  /* Чекбокс тоже убирается, а не только его подпись. Он размером 1x1 с нулевой
     прозрачностью, то есть на широком экране не виден, но обход с клавиатуры
     на нём останавливался: третий Tab на странице уходил в никуда, рамки
     фокуса не появлялось (её показывает подпись, а подпись скрыта), и пробел
     ничего не делал, потому что меню здесь видно при любом его положении.
     Проверено обходом по Tab на 1200 px: до правки третьим по счёту получал
     фокус INPUT#nav-switch размером 1x1. display: none убирает его из обхода
     целиком, и на широком экране это ничего не ломает: своей работы у него
     тут нет. */
  .nav-switch { display: none; }
  /* На широком экране меню видно всегда, в каком бы положении ни был
     чекбокс: иначе состояние, случайно оставленное на телефоне, пряталo бы
     меню и на большом экране. */
  .nav, .nav-switch:checked ~ .nav {
    display: flex; flex-direction: row; align-items: center;
    width: auto; gap: 4px; padding: 0;
  }
  .nav-link, .menu > summary { padding: 8px 12px; font-size: 15px; }
  .nav-actions { flex-direction: row; align-items: center; gap: 10px; padding: 0 0 0 10px; }
  .menu { position: relative; }
  .menu-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    width: 340px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow);
    /* Девять групп с перечнем вывесок под каждой не помещаются в окно
       ноутбука ростом 720 px: список прокручивается внутри себя.
       Вычитаемое это расстояние от верха окна до верха панели плюс запас
       снизу, и оно измерено: панель начинается на 127 px при ширине от 900 px,
       где меню и кнопки шапки переносятся на вторую строку, и на 103 px
       дальше. Было 92 px, и нижние 35 px списка уходили за край окна: в них
       нельзя было попасть, сколько список ни прокручивай. */
    max-height: calc(100vh - 135px);
    max-height: calc(100dvh - 135px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-panel-wide { width: 420px; }
}

/* ───────────────────────── Разделы страницы ─────────────────────────
   Отступы разделов заданы по одной стороне, а не сокращением padding. Причина
   не в красоте записи: .section и .wrap часто висят на одном теге
   (class="section wrap"), вес у них одинаковый, и побеждает тот, кто записан
   ниже. Сокращение padding: 56px 0 ставит боковой отступ в ноль и стирает
   поля .wrap: на телефоне строка упиралась в оба края экрана, на широком
   окне до 1120 px тоже. Проверено на 360 px: с сокращением h1 занимал все
   360 px, с записью по сторонам занимает 320 px и оставляет поля. */
main { display: block; }
.section { padding-top: 56px; padding-bottom: 56px; }
.section-tight { padding-top: 36px; padding-bottom: 36px; }
.section-soft { background: var(--surface-2); }

/* Последний разворот страницы: он отвечает тем, кто не нашёл себя в списке, и
   должен читаться как отдельный разговор, а не как десятая группа. Поэтому у
   него своя подложка тёплым акцентом во всю ширину окна. */
.section-accent { background: var(--accent-soft); }
/* Вводная часть блока идёт во всю ширину сетки под ней, а не узкой колонкой:
   при 680 пикселях текст обрывался на трети экрана и блок выглядел
   недоделанным. Строки держит не ширина колонки, а сами предложения. */
.section-head { max-width: 980px; margin: 0 0 28px; }
.section-head p { color: var(--muted); margin: 10px 0 0; font-size: 17px; }
.eyebrow {
  display: inline-block; margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--warm);
}

/* Герой */
/* Отступы по сторонам, а не сокращением: герой тоже висит на одном теге с
   .wrap, и сокращение стёрло бы его боковые поля. */
.hero { padding-top: 44px; padding-bottom: 52px; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.hero p/* Вводный абзац. Пятьсот двадцать пикселей нужны там, где он стоит рядом с
   иллюстрацией (главная), а на внутренних страницах он один на всю ширину, и
   обрыв на половине экрана читается как недоделанная страница. Поэтому предел
   задан в долях строки: длинная строка остаётся читаемой, а пустоты нет. */
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; margin: 18px 0 24px; }
.hero-grid .lead { max-width: 520px; }
.hero .btn-row { margin-bottom: 14px; }
.hero-note { font-size: 14px; color: var(--muted); margin: 0; }
/* Две колонки с 980 px, а не с 900. В промежутке 900..979 колонка под текст
   выходила такой узкой, что заголовок рос на две строки, и рядом с картинкой
   оставалось по сто пикселей пустого фона сверху и снизу. 980 здесь то же
   число, на котором перестраиваются факты, направления и тарифы. */
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
/* Телефон рисуется по ширине колонки, а колонка на большом экране шире самого
   телефона. Без предела иллюстрация вырастала до 613 px при колонке текста в
   502 px, и столбцы расходились. Предел держит её вровень с текстом. */
.hero-grid > svg { max-width: 400px; justify-self: center; align-self: center; }

/* Сменяющееся слово в заголовке. Высота задана жёстко, иначе на каждой смене
   слова прыгала бы вся страница. */
/* Строка направлений под заголовком: тем же тёплым цветом, что и прочие
   «про человека», но без движения. Раньше здесь сменялись слова и заголовок
   мигал в каждом переходе. */
.hero-for {
  display: block; color: var(--warm);
  /* Размер меньше заголовка намеренно. В размере h1 эта строка занимала четыре
     строки из пяти, колонка текста вырастала выше иллюстрации, и справа под
     телефоном оставалась дыра. Теперь это подзаголовок: читается как
     продолжение фразы, а не как второй заголовок. */
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.25; margin-top: 10px;
}

/* Строка под заголовком ведёт к полному списку направлений: в самом заголовке
   их все не перечислить, а человек ищет в нём своё дело и, не найдя, уходит. */
.hero-all { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.hero-all a { color: var(--accent); }

/* Полоса фактов */
.facts {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
/* Содержимое плашки стоит по центру её высоты. В сетке плашки одной высоты, и
   у короткой подписи остаток уходил вниз одной дырой на 30 px. По центру тот же
   остаток делится надвое и читается как поля. */
.facts div {
  background: var(--surface); padding: 20px 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.facts b { display: block; font-size: 17px; margin-bottom: 4px; }
.facts span { font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (min-width: 620px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* Карточки */
.cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.card-lead h3 { margin-bottom: 10px; }
.card p { color: var(--muted); margin-bottom: 12px; }
.card ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.card li { margin-bottom: 6px; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
}
.card-icon-warm { background: var(--warm-soft); }
.card-icon svg { width: 26px; height: 26px; }
.card-link { font-weight: 600; text-decoration: none; }
.card-link::after { content: " ›"; }

/* Разворот с картинкой */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: .95fr 1.05fr; gap: 48px; }
  /* В перевёрнутом развороте картинка уезжает во вторую колонку, поэтому
     широкой делаем первую: текст с перечнем и кнопками длиннее картинки, а
     картинка, растянутая на всю широкую колонку, была выше текста на 140 px. */
  .split-flip { grid-template-columns: 1.1fr .9fr; }
  .split-flip > *:first-child { order: 2; }
}
.split ul { margin: 0 0 20px; padding-left: 20px; color: var(--muted); }
.split li { margin-bottom: 8px; }
/* Разворот про приложение живёт по своим правилам: в нём не два текста, а текст
   и картинка. Ниже 1040 px колонка под картинку становится такой узкой, что
   картинка выходит вдвое ниже текста, и рядом с ней остаётся полоса пустого
   фона. До этой ширины блок идёт одной колонкой, а картинка не растягивается
   на всю ширину экрана: без предела на 768 px она вырастала до 800 px высотой и
   сама становилась пустым местом. */
@media (max-width: 1039px) {
  .split-app { grid-template-columns: 1fr; }
  .split-app > svg { max-width: 420px; justify-self: center; }
}

/* Сетка «что сделать и зачем» */
.duo { display: grid; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.duo article { background: var(--surface); padding: 22px 20px; }
.duo h3 { font-size: 17px; margin-bottom: 8px; }
.duo p { margin: 0; font-size: 15px; color: var(--muted); }
.duo .tag {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 3px 10px;
}
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .duo { grid-template-columns: repeat(3, 1fr); } }
/* В двух колонках у нечётного числа карточек последняя оставалась одна, а
   соседняя ячейка светилась цветом границы: ровный бежевый прямоугольник в
   полкарточки. Последняя одинокая карточка занимает ряд целиком. В три колонки
   этого не случается: карточек везде кратно трём. */
@media (min-width: 700px) and (max-width: 999px) {
  .duo > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Сегменты «для кого» */
/* Не grid, а перенос по строке: ширина карточки задана по брейкпойнтам, а
   неполный последний ряд выравнивается по центру, и остаток ряда не упирается
   в левый край с пустым местом справа.
   Число колонок всё-таки считается под число карточек, и считать приходится
   каждый раз, когда групп становится больше. Карточек двенадцать: одиннадцать
   групп и ответ тем, кто себя в них не нашёл. Двенадцать делится и на две, и на
   четыре, так что ряды полные: с 620 px две колонки, с 1024 px четыре. Трёх
   колонок нет с тех пор, как карточек было десять, и при двенадцати они снова
   сошлись бы, но лишний брейкпойнт ради этого не нужен. Проверять измерением
   (getBoundingClientRect().top) на 360, 390, 600, 768, 900, 1024 и 1440 px. */
.segs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.seg {
  /* Колонка, а не блок: карточки в ряду тянутся до его высоты, и у коротких
     нижняя половина оставалась пустой. Теперь низ карточки занимает строка про
     суть группы, а запас уходит в отступ над ней. */
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  flex: 0 0 auto; width: 100%;
}
/* Ширина через calc, а не процентами: из ряда сначала вычитаются зазоры, и
   только остаток делится на колонки, иначе последняя карточка в ряду не
   помещается и переносится вниз. */
@media (min-width: 620px) { .seg { width: calc((100% - 14px) / 2); } }
@media (min-width: 1024px) { .seg { width: calc((100% - 42px) / 4); } }
.seg:hover { border-color: var(--accent); }
.seg b { display: block; font-size: 17px; margin-bottom: 6px; }
.seg span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.seg svg { width: 30px; height: 30px; margin-bottom: 12px; }
/* Нижняя строка карточки: чем это дело отличается от соседнего. margin-top auto
   прижимает её к низу, волосяная линия отделяет от перечня вывесок. */
.seg .seg-why {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--text); font-size: 14px; line-height: 1.5;
}

/* Тарифы */
.plans { display: grid; gap: 14px; }
@media (min-width: 620px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; display: flex; flex-direction: column;
}
.plan-pick { border-color: var(--accent); border-width: 2px; }
.plan b { font-size: 17px; }
.plan .price { font-size: 27px; font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.02em; }
.plan .per { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.plan ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.plan li { margin-bottom: 5px; }
.plan .limits { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--muted); }

/* Шаги */
.steps { display: grid; gap: 16px; counter-reset: step; }
/* Три в ряд только с 900 px. На 768 px колонка выходила 232 px: заголовок шага
   ломался на две строки, абзац на семь, и у двух шагов из трёх низ пустовал.
   Ниже этой ширины шаги идут друг под другом и читаются как шаги. */
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; margin-bottom: 12px;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* Частые вопросы */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 2px; font-weight: 600; font-size: 17px;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 24px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq .answer { padding: 0 10px 18px 2px; color: var(--muted); max-width: 760px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Призыв в конце */
.cta {
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 24px; text-align: center;
}
.cta p { color: var(--muted); max-width: 520px; margin: 12px auto 20px; }
.cta .btn-row { justify-content: center; }

/* Вставки */
.note {
  background: var(--warn-soft); color: var(--warn);
  border-radius: 12px; padding: 14px 16px; font-size: 14px;
}
.note p:last-child { margin-bottom: 0; }
.fill { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
code { font-size: 12px; word-break: break-all; color: var(--muted); }

/* ───────────────────────── Подвал ───────────────────────── */
.foot { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 0 28px; }
.foot-grid { display: grid; gap: 26px; }
@media (min-width: 620px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; } }
.foot h2 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--text); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--accent); }
.foot-about p { color: var(--muted); font-size: 14px; max-width: 320px; }
.foot-bottom {
  border-top: 1px solid var(--border); margin-top: 28px; padding-top: 18px;
  color: var(--muted); font-size: 13px;
}

/* ───────────────────────── Полоса про куки ─────────────────────────
   Ключ тот же, что у панели и у правовых страниц (zb_cookie_ok): сайт и
   кабинет на одном домене, и спрашивать человека второй раз незачем. */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 14px 20px; display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; justify-content: center;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 14px; color: var(--muted); max-width: 620px; }
.cookie-bar button {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 10px;
  padding: 10px 22px; font: inherit; font-weight: 600; cursor: pointer;
}
/* На телефоне полоса занимала четверть экрана: на узком экране она плотнее. */
@media (max-width: 560px) {
  .cookie-bar { padding: 12px 16px; gap: 10px; }
  .cookie-bar p { font-size: 13px; line-height: 1.45; }
  .cookie-bar button { padding: 9px 18px; }
}

/* ───────────────────────── Страницы с текстом ─────────────────────────
   Правовые документы и страница поддержки это один столбец текста, и мерки у
   него другие, чем у главной. Заголовок главной доходит до 50 px: он там один
   и работает картинкой. В документе заголовков десять, и такой размер
   разваливает страницу на куски, между которыми не видно связи. Поэтому
   у .doc своя шкала, помельче, и свои отступы между пунктами.
   Ширину держит .wrap-narrow: строка длиннее 760 px читается тяжело, а
   соглашение читают целиком, а не по диагонали. */
.doc h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px; }
.doc h2 { font-size: 21px; margin: 32px 0 10px; }
.doc h3 { font-size: 17px; margin: 24px 0 8px; }
.doc p, .doc li { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 14px; }
.doc > :last-child { margin-bottom: 0; }

/* Карточка внутри документа: мерки мельче, чем у карточек главной, иначе
   врезка в тексте выглядит как плитка с другой страницы. */
.doc .card { padding: 16px 18px; border-radius: 14px; margin: 0 0 18px; }
/* Общее правило .card p красит абзац в приглушённый цвет: на главной в
   карточке лежит подпись к заголовку. В документе в карточке лежит часть
   самого документа, и читать её приходится так же внимательно, как остальное,
   поэтому здесь цвет текста обычный. */
.doc .card p { color: var(--text); }
.doc .note { margin: 0 0 18px; }

/* Подпись под заголовком: редакция и дата документа. */
.meta { color: var(--muted); font-size: 14px; }
.doc .meta { margin: 0 0 24px; }

/* Переход между соседними документами. Стоит над заголовком, а не в подвале:
   человек приходит сюда из формы регистрации за одним документом, а рядом
   лежат ещё два, и искать их в самом низу длинной страницы незачем. */
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin: 0 0 22px; }
.doc-nav a { color: var(--muted); text-decoration: none; }
.doc-nav a:hover { color: var(--accent); }
.doc-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Мелочи, которые нужны и документам, и странице записи. */
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Кнопка, которой пока нет: приложение для iPhone готовится. Выглядит кнопкой,
   чтобы человек видел, что оно будет, но не нажимается и не ведёт в никуда. */
.btn.is-off {
  opacity: .55;
  cursor: not-allowed;
  user-select: none;
}