/* =========================================================================
   styles.css — компонентный CSS посадочной.

   Визуальный язык с 01.09.2026 — фирменный стиль trust-builder:
   кремовый фон, терракотовый акцент, одна светлая тема.
   Источник палитры и разбор замен — tokens.css и design-notes.md,
   раздел «Смена на фирменный стиль». Тёмная система HashiCorp отменена.

   Значения все до одного живут в tokens.css; здесь только компоненты.
   Что изменилось при переходе на фирменный стиль: вернулась мягкая тень
   (на светлом подъём тоном читается слабее), надзаголовок снова набирается
   моноширинным в капители — это подпись фирменного стиля (класс .label
   в styles-core.css), ховер кнопки меняет заливку на --accent-hover
   вместо осветления фильтром (осветление роняло контраст с белым текстом).

   ПРАВИЛО ФАЙЛА: ни одного литерального цвета, кегля и отступа.
   Всё берётся из контракта переменных (tokens.css):

     --bg --surface --surface-2 --border --border-soft
     --text --text-2 --text-muted
     --accent --accent-contrast --accent-soft
     --success --danger
     --font-display --font-body --font-serif --font-mono
     --fs-hero --fs-h1 --fs-h2 --fs-h3 --fs-body --fs-small
     --lh-tight --lh-normal --lh-loose
     --space-1 … --space-8
     --radius-sm --radius-md --radius-lg
     --shadow-sm --shadow-md
     --container-max --measure

   Литералами остаются только структурные величины, которых нет в контракте:
   ширины линий (1px/2px), проценты, брейкпоинты и длительности анимаций.
   ========================================================================= */

/* ---------- 1. База ---------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* якорь #form не должен упираться в самый верх окна */
  scroll-padding-top: var(--space-6);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  /* страховка от горизонтального скролла на узких экранах */
  overflow-x: hidden;
  /* длинные русские слова («автоматизировал») на 320—360px
     не должны вылезать за край. Но hyphens: auto на широкой колонке
     рвёт по слогам почти каждую вторую строку («моду-лей», «чело-век») —
     страница начинает выглядеть как газетная полоса. Поэтому по
     умолчанию переносов нет, а включаются они только на узких экранах,
     где без них текст реально вылезает (блок 13). */
  overflow-wrap: break-word;
  hyphens: manual;
}

img,
svg,
table {
  max-width: 100%;
}

/* ---------- 2. Раскладка ----------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Широкий контейнер — 1120px, фирменный --container-wide.
   Ставится на секции, содержимому которых нужно дышать: первый экран,
   сетки карточек, блок команды, фотографии, форма.
   Секции, где кроме текста ничего нет, остаются на .wrap (720px). */
.wrap--wide {
  max-width: var(--container-wide);
}

/* Внутри широкого контейнера длина строки держится двумя ограничителями:
   абзацы уже стоят на --measure (блок 3), заголовкам ставим потолок в
   30ch. Без него h2 на 1920 растягивается на всю ширину секции и читается
   как баннер, а не как заголовок. В карточках и колонках правило не
   срабатывает: там колонка уже 30ch. */
.wrap--wide h2,
.wrap--wide > h3 {
  max-width: 30ch;
}

.section {
  /* «Universal rhythm constant» разбора — 96px между экранами */
  padding-block: var(--space-8);
  border-top: 1px solid var(--border-soft);
}

.section:first-of-type {
  border-top: 0;
}

/* Секции, которые нужно визуально отделить фоном */
.section--surface {
  background: var(--surface);
}

/* ---------- 3. Типографика --------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Трекинг по шкале разбора: display-lg -1.6px/56 = -0.029em,
   headline -0.6px/28 = -0.021em, card-title -0.4px/22 = -0.018em */
h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.029em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.021em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.018em;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--text);
  font-weight: 600;
}

.lead {
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.muted {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* ---------- 4. Первый экран -------------------------------------------- */

/* Первый экран сидит на canvas: «Canvas is the surface for hero, body,
   pricing, comparison tables, and footer alike» */
.hero {
  padding-block: var(--space-7) var(--space-7);
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

/* Надзаголовок — подпись фирменного стиля: моноширинный, капитель,
   трекинг 0.12em (класс .label в styles-core.css trust-builder).
   Тот же класс работает и над заголовками секций (.eyebrow). */
.hero__eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

/* Терракотовый вариант надзаголовка — .label-accent фирменного стиля.
   #B84A2C на кремовом 4.92:1, на белой полосе 5.18:1 — AA пройден. */
.eyebrow--accent {
  color: var(--accent);
}

/* Зелёный вариант надзаголовка — стоит только над тем, что читается как
   хорошая новость («// теперь», «// беру»). Раньше там стоял терракотовый
   и вместе с терракотовой подложкой давал впечатление тревоги.
   #4E6636 на кремовом 6.09:1, на зелёной подложке 5.4:1 — AA пройден. */
.eyebrow--good {
  color: var(--success);
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero__sub {
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  color: var(--text-2);
  margin-bottom: var(--space-6);
}

/* Первый экран в две колонки: текст слева, фото справа.
   Ниже 64rem (1024px) — одна колонка, фото под кнопкой: на планшете
   и телефоне две колонки ужимают заголовок до нечитаемого.
   Кнопка всегда стоит в левой колонке сразу под подзаголовком, то есть
   на любом брейкпоинте остаётся выше сгиба; строка цифр идёт ПОД
   сеткой, во всю ширину, и на сгиб не влияет. */
.hero__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
    align-items: center;
  }

  .hero__grid .figure {
    margin-bottom: 0;
  }
}

/* Фото первого экрана — горизонтальный кадр, поэтому оно всегда несёт
   и класс .figure--wide: именно он выводит его из-под правила узких
   экранов (блок 13), которое ужимает портреты до 16rem. На 16rem
   в кадре со сцены перестают читаться и надпись, и брендинг площадки. */

/* ---------- 5. Кнопка --------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-decoration: none;
  text-align: center;
  color: var(--accent-contrast);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

/* Ховер меняет заливку на фирменный --accent-hover. Осветлять фильтром,
   как было на тёмной теме, нельзя: белый текст на осветлённой терракоте
   опускается ниже 4.5:1, а на #9C3D24 он даёт 6.76:1. */
.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.btn--block {
  display: block;
  width: 100%;
}

/* Повторная кнопка внутри секций — с воздухом сверху */
.cta-row {
  margin-top: var(--space-6);
}

/* Снятие риска прямо под кнопкой, а не в подвале.
   Требование конверсионного аудита, раздел E. Текст — дословная
   фраза из утверждённых текстов, перенесённая к точке действия. */
.btn-note {
  margin-top: var(--space-3);
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Отбивка «что не входит» под таблицей */
.note {
  margin-top: var(--space-5);
}

/* ---------- 6. Списки --------------------------------------------------- */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

/* Список в две колонки на широком экране. Ставится только там, где
   пунктов четыре и больше: два пункта в две колонки выглядят как ошибка. */
@media (min-width: 64rem) {
  .list--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
    max-width: none;
  }
}

.list li {
  position: relative;
  padding-left: var(--space-5);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* Маркер — геометрическая черта, не эмодзи и не иконка */
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-loose) * 0.5em);
  width: var(--space-3);
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.list--negative li::before {
  background: var(--text-muted);
}

/* ---------- 7. Таблицы (разбор по минутам, недели работы) ---------------- */

/* Таблица живёт в широкой секции, но сама шире 896px не становится.
   На 1120px второй столбец разгонялся бы до ~700px — это 100 знаков
   в строке, вдвое больше нормы чтения. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: var(--container-mid);
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-body);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  line-height: var(--lh-normal);
}

.table th {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--text);
  white-space: normal;
  width: 34%;
}

.table td {
  color: var(--text-2);
}

.table tr:last-child th,
.table tr:last-child td {
  border-bottom: 0;
}

/* Таблица недель: первая колонка — просто цифра, широкой ей быть незачем */
.table--weeks th {
  width: auto;
  white-space: nowrap;
}

/* Заголовочная строка таблицы «как устроена работа» */
.table thead th {
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table thead th + th {
  width: auto;
}

/* ---------- 8. Карточка (кейсы, «чего здесь нет») ----------------------- */

.cards {
  display: grid;
  gap: var(--space-4);
}

/* Карточки в сетку. Число колонок задаётся модификатором, а не
   auto-fit: auto-fit на четырёх карточках даёт 3+1, а на шести 3+3
   только при удачной ширине — раскладка становится непредсказуемой.
   .cards--2 — для чётного числа карточек (четыре ситуации → 2×2)
   .cards--3 — для кратного трём (три кейса → 3×1, шесть пунктов
                безопасности → 3×2) */
@media (min-width: 48rem) {
  .cards--2,
  .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 64rem) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.card strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* ---------- 8б. Кейс: приход → понимание → изменение ---------------------
   Формат подсмотрен у прямого конкурента (REFERENCE-mzelenin.md): три
   именованные части вместо сплошного абзаца. Средняя часть — «понимание»
   — и есть то, что продаёт: она показывает мышление, а не список работ.

   Строка с деньгами прижата к низу карточки (margin-top: auto), чтобы
   в ряду из трёх карточек разной длины суммы стояли на одной линии.   */

.cases {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Заголовок кейса — h4, потому что над блоком уже стоит h3
   («Три внедрения, за которые заплатили»). Базовое правило типографики
   ловит только h1—h3, поэтому вид задан здесь целиком. */
/* На общей посадочной над блоком стоит h3, поэтому заголовок кейса —
   h4; на рекламных страницах над блоком стоит h2, и заголовок кейса —
   h3. Уровень выбирается по контексту, вид одинаковый в обоих случаях.
   Базовое правило типографики ловит только h1—h3, поэтому h4 описан
   здесь целиком. */
.case h3,
.case h4 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}

.case dl {
  margin: 0;
}

.case dt {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.case dd {
  margin: 0 0 var(--space-5);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.case dd:last-child {
  margin-bottom: var(--space-5);
}

.case__money {
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text);
  max-width: none;
}

/* Оговорка про обезличивание. Стоит перед кейсами, набирается тише
   основного текста: это условие честности, а не довод. */
.disclaimer {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Выделенная строка-вывод.
   ⚠️ ПРАВКА 01.09.2026, поздний вечер. Была терракотовая подложка
   --accent-soft. Правило после правки заказчика: терракота — только там,
   где действие (кнопка, форма, цена). Пояснение действием не является,
   поэтому подложка нейтральная, а выделение держит линейка слева. */
.callout {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--sand);
  border-radius: var(--radius-md);
  color: var(--text);
  line-height: var(--lh-normal);
  max-width: var(--measure);
}

.callout p {
  max-width: none;
}

/* Единственный вариант callout с терракотой — тот, что стоит под ценой
   и гарантией. Там это действие, и цвет на месте. */
.callout--offer {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  border-left-color: var(--accent);
}

/* ---------- 9. Форма ---------------------------------------------------- */

.form-section {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

.form {
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure);
  margin-top: var(--space-6);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--text);
}

.field__hint {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field textarea {
  min-height: var(--space-8);
  resize: vertical;
}

.field select {
  /* убираем системный вид, но оставляем нативный список */
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: right var(--space-5) center, right var(--space-4) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--text-muted);
}

/* Видимое состояние фокуса — обязательное требование */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Поле с ошибкой */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--danger);
  min-height: 0;
}

.field__error:empty {
  display: none;
}

/* Общий статус отправки */
.form__status {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.form__status[data-state="error"] {
  color: var(--danger);
}

.form__status[data-state="ok"] {
  color: var(--success);
}

.form__status:empty {
  display: none;
}

/* Ловушка для ботов — прячем от глаз, оставляем для автозаполнения */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 9б. Фотография ----------------------------------------------
   Край — фирменная линейка --border-soft, скругление 8px, подложка
   --surface-2 держит место до загрузки. aspect-ratio + width/height
   в разметке не дают вёрстке прыгать.                                     */

.figure {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* Горизонтальный кадр (сцена, зал) — во всю ширину колонки и в своих
   пропорциях 3:2. object-fit: cover на 3:2 кадре из телефона почти
   ничего не режет, но страхует от разнобоя, если кадр заменят. */
.figure--wide {
  max-width: none;
}

.figure--wide img {
  aspect-ratio: 3 / 2;
  object-position: 50% 50%;
}

/* Квадратный портрет (img/team-*.png, исходники 900×900). Кадрирование
   3/4, стоящее на .figure по умолчанию, срезало бы у квадрата четверть
   высоты — здесь пропорции исходника сохраняются один в один. */
.figure--square img {
  aspect-ratio: 1 / 1;
  object-position: 50% 50%;
}

.figure figcaption {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Две фотографии рядом на широком экране, столбиком на телефоне */
.figures {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 40rem) {
  .figures {
    grid-template-columns: 1fr 1fr;
  }

  .figures .figure {
    margin-bottom: 0;
  }
}

/* ---------- 9в. Строка цифр (первый экран, соцдоказательство) -----------
   Взято у trust-builder: полоса --surface-2 с крупными числами
   моноширинным. Цифры только собственные, из текстов Макса.            */

.stats {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

@media (min-width: 40rem) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Кегль здесь --fs-h3, а не --fs-h1: строка «1 000 → 15 000» набрана
   моноширинным, и на h1 она не влезала в треть колонки и рвалась
   посередине числа. nowrap страхует от переноса на любом языке. */
.stats__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  white-space: nowrap;
  color: var(--accent);
}

.stats__label {
  margin: var(--space-2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* ---------- 9г. Две колонки «раньше / теперь» ---------------------------
   Структура блока emotional-cta из trust-builder: две колонки с ярлыком
   моноширинным сверху. Тексты наши.                                      */

.compare {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 40rem) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.compare__col {
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

/* Колонка «теперь» отбивается ЗЕЛЁНЫМ кантом слева.
   ⚠️ ПРАВКА 01.09.2026, поздний вечер, дословно по фидбеку: «почему-то
   выделено красным, хотя должно быть зелёным. Красный резанул, как будто
   теперь хуже стало». Это и был главный источник ощущения тревоги:
   колонка с хорошим исходом стояла на цвете предупреждения. */
.compare__col--after {
  background: var(--success-soft);
  border-left: 3px solid var(--success);
}

.compare__col ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.compare__col li + li {
  margin-top: var(--space-3);
}

/* ---------- 9г2. Две ветки продукта -------------------------------------
   Ветки НЕ равноправны, и вёрстка обязана это показывать: четыре оплаты
   из пяти и весь верх чека пришли во внедрение (2026-09-01-repositioning.md).
   Поэтому главная ветка стоит слева, шире второй в 1.35 раза и залита
   акцентной подложкой; вторая — уже, на обычном тоне карточки.
   Две равные колонки читались бы как «выбери любое», а это неправда. */

.branches {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 64rem) {
  .branches {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.branch {
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.branch--main {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.branch h3 {
  margin-bottom: var(--space-4);
}

.branch p {
  color: var(--text-2);
  line-height: var(--lh-loose);
  max-width: none;
}

/* Строка «кому это» и строка «проверено деньгами» — тише основного
   текста ветки, моноширинным, как все служебные подписи страницы. */
.branch__for {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text);
}

/* ---------- 9д. Нумерованные шаги --------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-7);
  color: var(--text-2);
  line-height: var(--lh-loose);
  max-width: var(--measure);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-6);
  height: var(--space-6);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.steps strong {
  display: block;
  margin-bottom: var(--space-1);
}

/* Три шага механики в три колонки на широком экране: они равноправны
   и читаются как один ряд, а не как лестница длиной в экран. */
@media (min-width: 64rem) {
  .steps--cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .steps--cols li {
    max-width: none;
  }
}

/* ---------- 9е. Врезка-цитата -------------------------------------------
   Единственное место, где работает антиква. В фирменном стиле это
   Newsreader; у него нет кириллицы, поэтому здесь Literata — см. tokens.css. */

.pull {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  color: var(--text);
}

.pull p {
  max-width: none;
}

/* ---------- 9ж. Вопрос — ответ ------------------------------------------ */

.qa {
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure);
}

.qa__q {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text);
}

.qa p {
  margin: 0;
  color: var(--text-2);
  line-height: var(--lh-loose);
}

/* Шесть вопросов столбиком на 1920 — это экран пустоты справа.
   На широком раскладываем в две колонки. */
@media (min-width: 64rem) {
  .qa--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
    row-gap: var(--space-7);
    max-width: none;
  }
}

/* Портрет рядом с текстом «Кто я»: на широком экране — в две колонки,
   на телефоне — в одну, фото первым. */
@media (min-width: 40rem) {
  .about {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .about .figure {
    margin-bottom: 0;
  }

  .about h2 {
    grid-column: 1 / -1;
  }
}

/* ---------- 9з. Блок команды --------------------------------------------
   Два человека, два квадратных портрета. Фотографии — img/team-maks.png
   и img/team-misha.png, те же файлы, что стоят на рабочем лендинге
   trust-builder. Исходники 900×900, поэтому aspect-ratio 1/1 ничего
   не режет и не растягивает.

   Портрет ограничен 18rem даже в колонке шириной 530px: квадрат
   во всю колонку на 1920 превращается в афишу и перетягивает внимание
   с текста, ради которого блок и стоит.                                  */

.team {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 48rem) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.team__photo {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  margin-bottom: var(--space-4);
}

.team h3 {
  margin-bottom: var(--space-2);
}

/* Роль набирается тем же моноширинным в капители, что и надзаголовки:
   это подпись фирменного стиля, отдельного приёма заводить незачем. */
.team__role {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.team p {
  color: var(--text-2);
}

/* ---------- 9и. Форма в две колонки --------------------------------------
   На 1920 форма шириной 544px посреди пустой страницы читается как
   недоделанная. Слева — заголовок и то, что человек уносит с разбора,
   справа — поля. Ниже 64rem всё возвращается в один столбец, текст
   над полями.                                                            */

.form-layout {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 64rem) {
  .form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .form-layout .form {
    margin-top: 0;
    max-width: none;
  }
}

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

.footer {
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.footer a {
  color: var(--text-2);
}

/* ---------- 11. Страница «спасибо» --------------------------------------- */

.thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--space-8);
}

/* ---------- 12. Служебное ------------------------------------------------ */

/* Отбивка между подблоками внутри одной секции — например, между сеткой
   команды и фотографией под ней. Без неё подзаголовок липнет к тексту
   предыдущего блока. */
.block-gap {
  margin-top: var(--space-7);
}

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

a {
  color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 13. Узкие экраны (проверено от 360px) ------------------------ */

@media (max-width: 480px) {
  /* Здесь переносы по слогам включаются: на 360—390px без них длинные
     русские слова рвут раскладку, и это худшее из двух зол. */
  body,
  h1,
  h2,
  h3 {
    hyphens: auto;
  }

  .wrap {
    padding-inline: var(--space-4);
  }

  .hero {
    padding-block: var(--space-6) var(--space-6);
  }

  /* Фирменный --pad-section-y-mobile = 64px */
  .section {
    padding-block: var(--space-mobile-section);
  }

  .btn {
    /* на телефоне кнопка во всю ширину, чтобы не терялась */
    display: block;
    width: 100%;
    /* переносы по слогам включены выше для body — но на кнопке
       «30 ми-нут, бесплатно» читается как опечатка. Здесь их нет. */
    hyphens: manual;
  }

  .table th {
    width: 38%;
  }

  .table--weeks th {
    width: auto;
  }

  .card {
    padding: var(--space-4);
  }

  /* На 390px портрет во всю колонку — это 477px высоты до первой строки
     текста. Ужимаем, чтобы блок «Кто я» начинал читаться сразу. */
  .figure {
    max-width: 16rem;
  }

  /* Горизонтальный кадр с конференции ужимать нельзя: на 16rem
     перестают читаться и надпись на экране, и брендинг площадки.
     Он остаётся во всю ширину колонки. */
  .figure--wide {
    max-width: none;
  }
}

/* ---------- 14. Уважение к настройкам движения --------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover {
    transform: none;
  }
}

/* =========================================================================
   БЛОК 15. ИКОНКИ, СЧЁТЧИКИ, ПОСЛЕДОВАТЕЛЬНОСТЬ ШАГОВ, РЕШЕНИЯ, СОЦСЕТИ
   Добавлено 01.09.2026, вечер, по правке заказчика: «нужны иконки
   и инфографика, особенно на шаги».

   ПРАВИЛО ИКОНОК. Иконка ставится только там, где она РАЗЛИЧАЕТ пункты
   между собой: шаги процесса, шесть обещаний по безопасности, шесть
   решений. Где осмысленной иконки нет — её нет и на странице.

   Как устроено технически:
     • ни одной внешней библиотеки и ни одного эмодзи;
     • монолинейный инлайновый SVG, спрайт <symbol> в начале <body>,
       вставка через <use href="#i-…">;
     • обводка наследует currentColor, размер задан в em — иконка
       меняет цвет и кегль вместе с текстом, в котором стоит;
     • иконки декоративные, поэтому на <svg> стоит aria-hidden. Смысл
       несёт текст рядом. Единственное исключение — ссылки на соцсети,
       где иконка стоит вместе с русской подписью.
   ========================================================================= */

/* Спрайт физически на странице, но не занимает места и не читается
   скринридером. display:none ломает <use> в части браузеров, поэтому
   прячем размером и overflow. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

/* Плашка под иконкой в карточке: терракотовая подложка --accent-soft,
   на ней --accent даёт 4.7:1 — иконка видна и на печати в оттенках
   серого. Размер плашки 48px (--space-7), иконки внутри 24px
   (--space-5) — тот же ритм, что у остальной страницы. */
/* ⚠️ ПРАВКА 01.09.2026, поздний вечер. Подложка была терракотовая.
   Плашек на странице два десятка, и они давали россыпь красных пятен
   там, где ничего делать не надо. Осталась терракотовой сама иконка,
   плашка — нейтральная: акцент указывает, а не тревожит. */
.ico-badge {
  display: grid;
  place-items: center;
  width: var(--space-7);
  height: var(--space-7);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--accent);
}

.ico-badge .ico {
  width: var(--space-5);
  height: var(--space-5);
}

/* ---------- 15б. Счётчики ------------------------------------------------
   Крупная цифра моноширинным плюс подпись под ней. Ставится там, где
   в источнике есть проверяемое число: состав системы, характеристики
   сценария, свои цифры по контенту.                                       */

.counters {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

/* Внутри карточки решения подложка не нужна — карточка уже подложка */
.counters--flat {
  margin-top: auto;
  padding: var(--space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .counters--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .counters--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Числа вроде «556 647» и «15–20 с» не должны рваться посередине */
.counters__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  white-space: nowrap;
  color: var(--accent);
}

.counters--flat .counters__num {
  font-size: var(--fs-h3);
}

.counters__label {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* ---------- 15в. Последовательность шагов --------------------------------
   Правка заказчика: шаги должны читаться как последовательность,
   а не как список. Поэтому у шага есть номер, иконка и связь со
   следующим: на широком экране горизонтальная линейка в промежутке
   между карточками, на телефоне вертикальная. Длина линейки равна
   зазору сетки, поэтому она упирается ровно в соседнюю карточку.      */

.flow {
  list-style: none;
  counter-reset: flow;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.flow__item {
  counter-increment: flow;
  position: relative;
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.flow__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.flow__num {
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
}

.flow__num::before {
  content: counter(flow);
}

.flow__icon {
  color: var(--accent);
  display: inline-flex;
}

.flow__icon .ico {
  width: var(--space-5);
  height: var(--space-5);
}

.flow__title {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  color: var(--text);
}

/* Связь между шагами. Толщина 2px — структурная величина, в контракте
   переменных её нет. Цвет — фирменный песок, декоративный по назначению. */
.flow__item::after {
  content: "";
  position: absolute;
  background: var(--sand);
}

.flow__item:last-child::after {
  content: none;
}

@media (max-width: 63.999rem) {
  .flow__item::after {
    left: 50%;
    top: 100%;
    width: 2px;
    height: var(--space-5);
    transform: translateX(-50%);
  }
}

@media (min-width: 64rem) {
  .flow--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .flow--4 .flow__item::after {
    top: 50%;
    left: 100%;
    width: var(--space-6);
    height: 2px;
  }
}

/* ---------- 15г. Карточка решения ----------------------------------------
   Страница solutions.html. Читается сверху вниз одинаково у всех шести:
   иконка → название → для кого → что снимает → что получаешь → счётчики.
   Термины «для кого / проблема / результат» набираются тем же ярлыком,
   что и части кейса, — это один и тот же приём.                          */

.solutions {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .solutions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.solution {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.solution h3 {
  margin: 0 0 var(--space-5);
}

.solution dl {
  margin: 0;
}

/* Ярлыки и текст частей — те же правила, что у кейса */
.solution dt {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.solution dd {
  margin: 0 0 var(--space-5);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

/* ---------- 15д. Ссылка «дальше» ----------------------------------------- */

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: var(--space-1);
}

.link-more:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

.link-more .ico {
  width: var(--space-4);
  height: var(--space-4);
}

/* Возврат на главную в шапке второй страницы */
.pagenav {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.pagenav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.pagenav .ico {
  width: var(--space-4);
  height: var(--space-4);
}

/* ---------- 15е. Ссылки на соцсети ---------------------------------------
   ⚠️ Правило конверсионного аудита: на посадочной с платного трафика
   каждая внешняя ссылка — это выход. Поэтому на рекламных страницах
   (risk / hours / audit) соцсети стоят ТОЛЬКО в подвале, ниже формы;
   на index и solutions — в подвале и рядом с именем в блоке «кто это
   делает», там человек знакомится, а не принимает решение по заявке. */

.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  text-decoration: none;
}

.social a:hover {
  color: var(--accent);
}

.social a:hover span {
  text-decoration: underline;
}

.social .ico {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--accent);
}

/* ---------- 15ж. Скриншот как доказательство -----------------------------
   Обычная .figure кадрирует под 3/4 — для фотографии это правильно,
   для скриншота статистики недопустимо: обрезанная цифра перестаёт
   быть доказательством. Здесь картинка показывается целиком.            */

.figure--shot {
  max-width: none;
}

.figure--shot img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--surface);
  padding: var(--space-3);
}

/* ---------- 15з. Запасной путь связи и контакты ---------------------------
   ⚠️ Зачем вторая кнопка. form.js уходит в прод с заглушкой
   LEAD_ENDPOINT — пока её не заменили на настоящий адрес, отправленная
   форма никуда не пишет и заявка теряется. Кнопка «Написать в Telegram»
   стоит РЯДОМ с основной, а не вместо неё: основное действие остаётся
   формой, но у страницы есть рабочий путь с первого дня.
   Она тише основной — прозрачная заливка и мелкий кегль, чтобы не
   растаскивать внимание на две равные кнопки.                            */

.btn--ghost {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
  box-shadow: none;
  font-size: var(--fs-small);
  padding: var(--space-3) var(--space-5);
}

.btn--ghost:hover {
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  box-shadow: none;
}

.btn-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.btn-alt .ico {
  width: var(--space-4);
  height: var(--space-4);
  vertical-align: -0.15em;
  margin-right: var(--space-2);
}

.btn-alt .muted {
  margin: 0;
}

/* Список контактов: строкой в подвале, столбиком в блоке формы */
.contacts {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  text-decoration: none;
}

.contacts a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.contacts .ico {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--accent);
}

/* В подвале контакты и соцсети идут одной строкой с переносом */
.footer .contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}

/* Подпись под строкой цифр первого экрана: период, к которому они относятся */
.stats__note {
  margin-top: var(--space-3);
}

/* =========================================================================
   16. БЛОКИ, ДОБАВЛЕННЫЕ ПРАВКОЙ 01.09.2026 (поздний вечер)

   Оффер по Хормози: страница продаёт результат, а не звонок. Отсюда
   четыре новых компонента — подпись автора на первом экране, перечень
   решений, цена с гарантией и свёрнутый FAQ. Собственных значений ни один
   не заводит: всё на токенах.
   ========================================================================= */

/* ---------- 16а. Подпись автора на первом экране -------------------------
   Правка заказчика: «если я помогаю — надо сразу фотку того, кто такой,
   крупным лицом, а у нас такого нет». Портрет стоит строкой над
   заголовком, а не отдельным блоком: так он виден с первого взгляда
   и не разваливает две колонки первого экрана.                           */

.hero__byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.hero__byline img {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  flex: none;
}

.hero__byline span {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.hero__byline strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--text);
}

/* ---------- 16б. Перечень решений на главной ------------------------------
   Правка заказчика: «конкретно перечислить, что мы внедряем, каких
   агентов». Именно перечень: строка на решение, без описаний. Развёрнуто
   это живёт на /solutions, и дублировать текст сюда нельзя — за этим
   человек и уходит на вторую страницу.                                   */

.lineup {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

@media (min-width: 48rem) {
  .lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

@media (min-width: 64rem) {
  .lineup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lineup li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-2);
  line-height: var(--lh-normal);
}

.lineup .ico {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--accent);
  margin-top: 0.15em;
}

.lineup strong {
  display: block;
  color: var(--text);
}

/* ---------- 16в. Короткий кейс на главной ---------------------------------
   Правка заказчика: «мало конкретики, больше описания процесса. Прям вот
   кейсы и метрики, чтобы каждый можно было нажать и перейти отдельно».
   Развёрнутый разбор ушёл на /solutions, здесь остались отрасль, строка
   проблемы, цифры и ссылка. Ссылка прижата к низу, чтобы в ряду из трёх
   карточек разной длины все три стояли на одной линии.                   */

.case--brief p {
  color: var(--text-2);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-5);
  max-width: none;
}

.case--brief .counters {
  margin-bottom: var(--space-5);
}

.case--brief .link-more {
  margin-top: auto;
}

/* ---------- 16г. Цена и гарантия -----------------------------------------
   Терракота здесь на месте: это блок, ради которого человек решает
   платить. Две ступени в ряд, гарантия под ними.                         */

.price {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .price {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.price__item {
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.price__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-3);
}

.price__item h3 {
  margin-bottom: var(--space-3);
}

.price__item p {
  color: var(--text-2);
  line-height: var(--lh-normal);
  max-width: none;
  margin-bottom: var(--space-3);
}

.price__item p:last-child {
  margin-bottom: 0;
}

/* Гарантии — список без маркеров, каждая строка со своей иконкой */
.guarantee {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.guarantee li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.guarantee .ico {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--accent);
  margin-top: 0.2em;
  flex: none;
}

.guarantee strong {
  color: var(--text);
}

/* ---------- 16д. FAQ аккордеоном -----------------------------------------
   Правка заказчика: «списки вопросов должны быть более компактными.
   Человек нажимает и получает ответ. Развёрнутые перегружают страницу».
   На <details>, без единой строки JavaScript: работает и с клавиатуры,
   и при выключенных скриптах, и читается скринридером.                   */

.qa details {
  border-top: 1px solid var(--border-soft);
}

.qa details:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--text);
}

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

.qa summary:hover {
  color: var(--accent);
}

.qa summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Плюс, который на раскрытии становится минусом. Нарисован границами,
   картинки и шрифтового значка не требует. */
.qa summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.4em;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: transform 0.15s ease;
}

.qa details[open] summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat;
}

.qa details p {
  margin: 0 0 var(--space-5);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

/* В две колонки аккордеон не раскладываем: раскрытый ответ в левой
   колонке толкал бы правую вниз. Компактность даёт свёрнутость, а не
   вторая колонка. */
@media (min-width: 64rem) {
  .qa--cols {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--measure);
    gap: 0;
  }
}

.qa--cols {
  gap: 0;
}

/* ============================================================
   Секция «Каких сотрудников я ставлю в бизнес»
   Шесть карточек: с чем приходят → что получают.
   Заказчик просил акцент: это то, ради чего человек читает
   страницу, поэтому карточки крупнее обычных .card.
   ============================================================ */
.agents{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-block:var(--space-5);
}
.agent{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.agent h3{ margin:0; font-size:var(--fs-h3); line-height:var(--lh-tight); }
.agent p{ margin:0; font-size:var(--fs-small); color:var(--text-2); }
.agent__lbl{
  display:block; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.25rem;
}
.agent__lbl--good{ color:var(--success); }
.agent__get{
  border-top:1px solid var(--border-soft); padding-top:var(--space-3);
  margin-top:auto; color:var(--text);
}
/* Третья строка карточки: какие сегменты данных берёт агент.
   Намеренно мельче двух верхних — это сноска, а не аргумент. */
.agent p.agent__data{
  font-size:.72rem; line-height:var(--lh-normal);
  color:var(--text-muted); font-family:var(--font-mono);
}

/* ============================================================
   Датасет бизнеса. Стоит над карточками агентов и объясняет,
   откуда агент вообще берёт то, чем работает.
   ============================================================ */
.dataset{
  margin-block:var(--space-5);
  padding:var(--space-5);
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--sand);
  border-radius:var(--radius-md);
}
.dataset > p{ max-width:var(--measure); }
.dataset > p:first-of-type{ margin:0; }
/* Схема. 01.09.2026: снят потолок в 480px и своя рамка. Плотная
   инфографика на трети ширины нечитаема, а рамка вокруг картинки,
   которая сама состоит из рамок, — шум. Растёт только высота:
   прокрутка дешевле нечитаемости. Левый край совпадает с абзацем
   выше — схема не центрируется отдельно от текста. */
.dataset__fig{ margin:var(--space-5) 0 0; }
.schema-zoom{
  display:block; cursor:zoom-in;
  border:1px solid transparent; border-radius:var(--radius-sm);
  transition:border-color .15s ease, opacity .15s ease;
}
.schema-zoom img{ display:block; width:100%; height:auto; }
.schema-zoom:hover,
.schema-zoom:focus-visible{ border-color:var(--accent); opacity:.92; }
.dataset__fig figcaption{
  margin-top:var(--space-2);
  font-size:var(--fs-small); color:var(--text-muted);
  text-decoration:none;
}
.dataset__segments{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:grid; gap:var(--space-2) var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  font-size:var(--fs-small); color:var(--text-2);
}
.dataset__segments li{ display:flex; gap:.6rem; align-items:baseline; }
.dataset__num{
  font-family:var(--font-mono); font-size:.72rem;
  color:var(--text-muted); flex:none;
}
.dataset__note{
  margin-top:var(--space-4);
  font-size:var(--fs-small); color:var(--text-muted);
}