/* ─────────────────────────────────────────────────────────────────────────
   Оформление лендинга Кэби.

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

   Живость держится на трёх приёмах: рукописные подписи со стрелками
   (шрифт Shantell Sans), подчёркивание-росчерк под ключевым словом заголовка и
   крупные цифры. Иконки контурные, 1,6 пикселя, наследуют цвет текста.
   Эмодзи не используем: они ломают тон профессионального продукта.

   Каждый цвет текста проверен на контраст по WCAG 2.1 — значения указаны
   рядом с переменной. Обычный текст должен давать не меньше 4,5:1.
   ───────────────────────────────────────────────────────────────────────── */

/* Цвета — из бренд-бука Кэби, значение в значение. Серая лесенка идёт
   шагами по 100: у бренд-бука названы Gray 100, 200, 400 и 500. */
:root {
  --ink: #1e2939;          /* Black — заголовки, основной текст, 14,7:1 */
  --blue: #2d4059;         /* Blue — кнопки и функциональные элементы, 10,6:1 */
  --blue-2: #223145;       /* тот же синий темнее — наведение */
  --ink-2: #6a7282;        /* Gray 500 — пояснения, 4,8:1 */
  --ink-3: #99a1af;        /* Gray 400 — плейсхолдеры, писать текстом нельзя */
  --line: #e5e7eb;         /* Gray 200 — разделители и границы, всегда 1px */
  --line-2: #d1d5dc;       /* ступень между Gray 200 и 400 — граница при наведении */
  --paper: #ffffff;
  --surface: #f3f4f6;      /* Gray 100 — подложка служебных плашек */

  /* Тёплая лесенка в три ясно различимые ступени: жёлтый → оранжевый →
     тёмно-оранжевый. Первые два — только заливки: на белом они дают 1,5:1 и
     3,2:1, текстом ими писать нельзя. Всё, что должно читаться, — на
     Dark Orange. */
  --sun: #ffc93c;          /* Yellow — только заливки */
  --sun-soft: #fffaed;     /* Yellow, разбавленный белым — крупные плашки */
  --accent: #ff5500;       /* Orange — заливки, росчерк под словом, иконки */
  --accent-soft: #faf3f0;  /* Light Orange — квадраты под иконки, полоска подсказки */
  --tint-warm: #fdfaf9;    /* тот же Light Orange разбавленный — крупные плашки */
  --accent-ink: #d14000;   /* Dark Orange — текст, стрелки и кнопки, 4,7:1 */

  --cta: #d14000;          /* кнопка: Dark Orange, надпись белая */
  --cta-2: #a83300;        /* наведение — 6,7:1 */

  --danger: #e05252;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

* { box-sizing: border-box }
html, body { margin: 0 }
/* Переходы по якорям: плавно и с отступом под липкую шапку, иначе заголовок
   секции уезжает под неё */
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
section[id] { scroll-margin-top: 76px }
/* Обводка при переходе с клавиатуры — только когда ведут с клавиатуры */
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 4px }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100% }
button { font-family: inherit }

[data-lang="ru"] [data-l="en"] { display: none }
[data-lang="en"] [data-l="ru"] { display: none }
::selection { background: var(--accent-soft); color: var(--ink) }

/* ── Типографика ──────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.035em }
h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.03em }
h3 { font-size: 18px; line-height: 1.3 }
p { margin: 0 }
a { color: var(--ink); text-decoration: none }
a:hover { color: var(--accent-ink) }

.lead { font-size: 17px; line-height: 1.55; color: var(--ink-2) }
.muted { color: var(--ink-2) }
.small { font-size: 14px; color: var(--ink-2) }
.tiny { font-size: 13px; color: var(--ink-2) }
.mono { font-family: 'JetBrains Mono', monospace }
.accent { color: var(--accent-ink) }

/* Ключевое слово заголовка с росчерком-подчёркиванием от руки.
   Росчерк — <svg class="swash"> внутри, он тянется по ширине слова. */
.mark { position: relative; white-space: nowrap; display: inline-block }
.swash {
  position: absolute; left: -2%; bottom: -0.2em;
  width: 104%; height: 0.3em;
  color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}

/* Надстрочная метка секции — одна на все секции. Раньше их было две,
   тёплая и жёлтая, и страница от этого рябила.
   Обводка и надпись одного цвета, без заливки: тот же приём, что у кнопки
   выбора тарифа, так метки и кнопки читаются как одна система. */
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper);
  border: 1px solid var(--accent-ink);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ── Рукописные подписи и стрелки ─────────────────────────────────────── */
.hand {
  /* Shantell Sans — тот же шрифт, что на референсе. У него крупнее очко,
     чем у прежнего Caveat, поэтому кегль меньше, а читается так же. */
  font-family: 'Shantell Sans', 'Onest', cursive;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-ink);
}
/* Подпись со стрелкой. Правило одно: текст стоит блоком в одну-две
   короткие строки, стрелка выходит из него и упирается в тот объект, о
   котором подпись. Поэтому стрелка всегда с той стороны текста, где объект,
   и приподнята или опущена так, чтобы остриё доставало до него. */
.hand-row { display: inline-flex; align-items: flex-start; gap: 6px; transform: rotate(-1.2deg) }
.hand-row .hand { padding-top: 2px }
/* стрелка тянется вверх, за строку текста, чтобы остриё доставало до
   объекта над подписью; величина подобрана по месту */
.hand-arrow--up { margin-top: -26px }
.hand-arrow--up.hand-arrow--sm { margin-top: -30px }
.hand-arrow--tall { width: 30px; height: 46px }
.hand-arrow--up.hand-arrow--tall { margin-top: -40px }
.hand-arrow {
  width: 52px; height: 42px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
  /* один цвет с подписью: раньше стрелка наследовала цвет текста страницы
     и оказывалась чёрной рядом с оранжевой надписью */
  color: var(--accent-ink);
}
.hand-arrow--sm { width: 40px; height: 32px }
/* Подпись, приклеенная к иллюстрации; на узких экранах прячется */
.hand-pin { position: absolute; z-index: 4; pointer-events: none; color: var(--accent-ink) }
@media (max-width: 900px) { .hand-pin { display: none } }

/* ── Каркас ───────────────────────────────────────────────────────────── */
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 24px }
.sec { padding-block: 84px }
.sec + .sec { border-top: 1px solid var(--line) }
.sec-head { max-width: 40rem; margin: 0 auto 48px; text-align: center }
.sec-head .lead { margin-top: 14px }
/* Кэби над шапкой секции. Размеры проставлены и в атрибутах картинки, и
   здесь: место под неё резервируется до загрузки, поэтому при появлении
   ничего не дёргается. */
.sec-mascot { display: block; width: 104px; height: 104px; margin: 0 auto 6px }
@media (max-width: 560px) { .sec-mascot { width: 88px; height: 88px } }

.grid { display: grid; gap: 18px }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.row { display: flex; align-items: center; gap: 12px }
.stack { display: flex; flex-direction: column }

/* ── Поверхности ──────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  /* колонка, чтобы подпись автора и строка «6 таблиц» прижимались к низу
     и одинаково стояли в карточках разной высоты */
  display: flex; flex-direction: column;
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.card .to-bottom { margin-top: auto }
.card:hover { border-color: var(--line-2); transform: translateY(-2px) }
.card-line {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.tint-warm { background: var(--tint-warm) }
.tint-sun { background: var(--sun-soft) }
.block-tint {
  position: relative;
  background: var(--tint-warm);
  border-radius: var(--r-xl);
  padding: 72px 24px;
  overflow: hidden;          /* знак в углу не должен вылезать за скругление */
}
/* Знак в углу плашки — украшение поверх фона, из потока выведен, поэтому
   ничего не двигает. На узком экране убираем: там места нет. */
.block-mark {
  position: absolute; right: 22px; bottom: 14px;
  width: 124px; height: 124px;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 1100px) { .block-mark { display: none } }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  white-space: nowrap;
}
/* Белая надпись на Dark Orange. Светлый Orange остался для заливок:
   белым по нему всего 3,2:1, надпись на кнопке так писать нельзя */
.btn--primary { background: var(--cta); color: #fff }
.btn--primary:hover { background: var(--cta-2); color: #fff; transform: translateY(-1px) }
/* Синий из бренд-бука — он назначен кнопкам и функциональным элементам */
.btn--ink { background: var(--blue); color: #fff }
.btn--ink:hover { background: var(--blue-2); color: #fff; transform: translateY(-1px) }
.btn--ghost { background: var(--paper); border-color: var(--line); color: var(--ink-2) }
.btn--ghost:hover { border-color: var(--line-2); color: var(--ink) }
/* Кнопка выбора: обводка и надпись одного цвета, при наведении заливается.
   Серая рамка с тёмной надписью была самым тусклым местом в тарифах. */
.btn--outline { background: var(--paper); border-color: var(--accent-ink); color: var(--accent-ink) }
.btn--outline:hover { background: var(--cta); border-color: var(--cta); color: #fff; transform: translateY(-1px) }
.btn--lg { padding: 15px 28px; font-size: 16px; border-radius: 14px }
.btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none }
.btn-link {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}

/* Таблетка-переключатель (примеры задач, вкладки интерфейса) */
.pill {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pill:hover { border-color: var(--line-2); color: var(--ink) }
.pill--on { background: var(--ink); border-color: var(--ink); color: #fff }
.pill--on:hover { color: #fff }

/* ── Иконки ───────────────────────────────────────────────────────────── */
.ico { width: 22px; height: 22px; flex: none; stroke-width: 1.6; fill: none; stroke: currentColor }
.ico-sm { width: 18px; height: 18px; flex: none; stroke-width: 1.7; fill: none; stroke: currentColor }
/* Один вид на все иконки: разноцветные квадраты рябили */
.ico-box {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent-ink);
}
.ico-box--sm { width: 36px; height: 36px; border-radius: 11px }

/* ── Шапка ────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 26px; padding-block: 14px }
/* Логотип приподнят на десятую долю своей высоты. Флексбокс равняет коробку
   картинки, а в ней искорка занимает верх, поэтому надпись «КЭБИ» вставала
   на три пикселя ниже строки меню. Доля, а не пиксели: на узком экране
   логотип меньше, и поправка уменьшается вместе с ним. */
.top-in a img { transform: translateY(-10%) }
.top-nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; color: var(--ink-2) }
.top-nav a:hover { color: var(--ink) }
.lang {
  display: flex; flex: none; gap: 2px;
  padding: 3px;
  background: var(--surface);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}
.lang button {
  padding: 5px 11px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink);
  transition: background 0.15s, color 0.15s;
}
.lang button:hover { color: var(--ink) }
.lang button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(38,48,63,0.12) }

/* ── Крупные цифры ────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.stat { padding: 22px 20px; border-left: 1px solid var(--line) }
.stat:first-child { border-left: none }
.stat-n {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700; font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: -0.04em; line-height: 1;
  color: var(--ink);
}
.stat-n em { font-style: normal; font-size: 0.62em; color: var(--accent-ink) }
.stat p { margin-top: 9px; font-size: 14.5px; color: var(--ink-2) }

/* ── Шаги ─────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 }
.step { position: relative; padding: 4px 26px 0 }
.step:first-child { padding-left: 0 }
.step:last-child { padding-right: 0 }
/* Пунктир между шагами — тот же разделитель, только по горизонтали */
.step + .step::before {
  content: '';
  position: absolute; left: 0; top: 30px; bottom: 0;
  border-left: 1px dashed var(--line);
}
.step-n {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700; font-size: 44px; line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent-ink);
}
.step h3 { margin: 16px 0 8px }

/* ── Форма ────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.form-row { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-top: 1px solid var(--line) }
.form-row:first-child { border-top: none }
.form-row .ico { color: var(--ink-3) }
.form-field {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
}
textarea.form-field { resize: none; line-height: 1.5; font-size: 16.5px; padding: 0 }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1 }
.form-split { display: flex; border-top: 1px solid var(--line) }
.form-split > .form-row { flex: 1; min-width: 0; border-top: none }
.form-sep { width: 1px; flex: none; align-self: stretch; background: var(--line) }
.form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line) }

/* Кнопка «Прикрепить ТЗ» — это <label> поверх скрытого поля файла: так выбор
   открывается без единой строки на клик, и с клавиатуры тоже. Выглядит как
   соседняя кнопка «Наговорить», поэтому классы у них общие. */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
label.btn { cursor: pointer }
label.btn:focus-within { outline: 2px solid var(--cta); outline-offset: 2px }

/* Плашка прикреплённого файла. Имя длинное, поэтому обрезается многоточием, а
   не растягивает строку кнопок. */
.file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font-size: 13.5px;
}
.file-chip .ico-sm { color: var(--accent-ink); flex: none }
.file-chip-name {
  color: var(--ink); font-weight: 600;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip-x {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.file-chip-x:hover { background: var(--line); color: var(--ink) }
/* Крестик — служебный, оранжевый ему не нужен: цвет берём у кнопки, а не у
   соседней иконки документа */
.file-chip-x .ico-sm { color: inherit }
@media (max-width: 560px) { .file-chip-name { max-width: 120px } }
.consents { display: flex; flex-direction: column; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--line) }
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12.5px; line-height: 1.45; color: var(--ink-2) }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line) }
.consent a:hover { text-decoration-color: var(--accent) }
.agree-box { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--cta); cursor: pointer }
.agree-flash { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 3px }
.hint { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--ink); background: var(--accent-soft) }
.code-input { font-family: 'JetBrains Mono', monospace; font-size: 16px; letter-spacing: 0.18em }
.ok-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--accent-ink) }

input:-webkit-autofill { transition: background-color 0s 600000s }

/* ── Переключатель модуля ─────────────────────────────────────────────── */
.switch { flex: none; width: 42px; height: 24px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: #dcdce2; transition: background 0.18s; position: relative }
.switch.on { background: var(--sun) }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s; display: block }
.switch.on i { transform: translateX(18px) }

/* ── Окно браузера для скриншотов ─────────────────────────────────────── */
.browser { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper) }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--line) }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #dcdce2 }
.browser-url { margin-left: 10px; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); flex: 1; max-width: 340px }

/* ── Тарифы ───────────────────────────────────────────────────────────── */
.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: border-color 0.16s, transform 0.16s;
}
.plan:hover { border-color: var(--line-2); transform: translateY(-2px) }
/* Выделенный тариф: тёплая подложка вместо цветной рамки — рамка спорила
   с линиями соседних карточек */
.plan--star { background: var(--sun-soft); border-color: transparent }
.plan--star:hover { border-color: transparent }
.plan-badge {
  align-self: flex-start;
  background: var(--cta); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.plan-users { font-size: 13.5px; font-weight: 600; color: var(--ink-2) }
.plan-price { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.03em; line-height: 1; color: var(--ink) }
.plan-per { display: block; margin-top: 7px; font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0 }
.plan-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); padding-block: 8px; border-top: 1px solid var(--line) }
.plan--star .plan-row { border-color: rgba(214,66,28,0.14) }
.plan-row .ico-sm { color: var(--accent-ink); width: 16px; height: 16px }

/* ── Сравнение «без Кэби / с Кэби» ────────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.compare-col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px }
.compare-col--good { border-color: transparent; background: var(--sun-soft) }
.compare-col--bad { background: var(--paper) }
.compare-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 18px }
.compare-li { display: flex; align-items: flex-start; gap: 11px; padding-block: 11px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45 }
.compare-li:first-of-type { border-top: none }
.compare-col--good .compare-li { border-color: rgba(156,108,0,0.16) }
.compare-li .ico-sm { margin-top: 2px }
.compare-col--bad { color: var(--ink-2) }
.compare-col--bad .ico-sm { color: var(--ink-3) }
.compare-col--good .ico-sm { color: var(--accent-ink) }

/* ── Вопросы и ответы ─────────────────────────────────────────────────── */
/* На <details>, без скриптов: раскрывается и без JavaScript */
.faq { max-width: 44rem; margin: 0 auto; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ''; flex: none; margin-left: auto; width: 13px; height: 13px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px) }
.faq summary:hover { color: var(--accent-ink) }
.faq-a { padding: 0 34px 22px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2) }

/* ── Полоса доверия ───────────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.trust-i { display: flex; align-items: flex-start; gap: 13px }
.trust-i b { display: block; font-size: 15px; margin-bottom: 3px }

/* ── Кнопка внизу экрана на телефоне ──────────────────────────────────── */
.sticky-cta { display: none }
@media (max-width: 900px) {
  .sticky-cta {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94);
    backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line);
  }
  .sticky-cta .btn { flex: 1 }
  body { padding-bottom: 72px }
}

/* ── Отзывы ───────────────────────────────────────────────────────────── */
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--accent-ink); color: var(--accent-ink);
  font-weight: 700; font-size: 14.5px;
}

/* ── Подвал ───────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px 32px; margin-bottom: 28px }
.foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px }
.foot-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px }
.foot-link { display: block; font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px }
.foot-link:hover { color: var(--ink) }
.foot-legal { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }

/* ── Анимации ─────────────────────────────────────────────────────────── */
@keyframes wv { 0%,100% { transform: scaleY(0.35) } 50% { transform: scaleY(1) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* ── Узкий экран ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sec { padding-block: 56px }
  .sec-head { margin-bottom: 32px }
  .split-grid { grid-template-columns: 1fr !important; gap: 28px !important }
  .hero-card { margin-right: 0 !important }
  .hero-art { min-height: 0 !important; justify-content: center !important }
  .hero-art img { width: min(420px, 100%) !important; margin-right: 0 !important }
  .top-nav { display: none !important }
  .foot-cols { grid-template-columns: 1fr 1fr }
  .steps { grid-template-columns: 1fr; gap: 26px }
  .step { padding: 0 }
  .step + .step::before { left: 0; right: 0; top: -13px; bottom: auto; border-left: none; border-top: 1px dashed var(--line) }
  .stats { grid-template-columns: 1fr }
  .stat { border-left: none; border-top: 1px solid var(--line); padding: 18px 0 }
  .stat:first-child { border-top: none; padding-top: 0 }
  .compare { grid-template-columns: 1fr }
  .trust { grid-template-columns: 1fr; gap: 22px }
}
@media (max-width: 560px) {
  .form-split { flex-direction: column }
  .form-split > .form-row + .form-row { border-top: 1px solid var(--line) }
  .form-sep { display: none }
  .foot-cols { grid-template-columns: 1fr }
  .block-tint { padding: 48px 18px; border-radius: var(--r-lg) }
  .hand { font-size: 16px }
}

/* ── Мелочи ───────────────────────────────────────────────────────────── */
.is-hidden { display: none }
.btn--wide { width: 100%; margin-top: auto }
.over { color: var(--danger); font-weight: 700 }
.consents--flash .consent { color: var(--danger) }
.inline-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line) }
.inline-link:hover { text-decoration-color: var(--accent) }

/* Узкая шапка: логотип, переключатель языка и кнопка должны помещаться в 390 px */
@media (max-width: 560px) {
  .wrap { padding-inline: 16px }
  .top-in { gap: 10px; padding-block: 11px }
  .top-in img { height: 24px }
  .top-in .row { gap: 8px }
  .lang { font-size: 11px }
  .lang button { padding: 5px 9px }
  .top-in .btn--sm { padding: 8px 12px; font-size: 13px }
}