/* Финалка — токены. Светлая тема по умолчанию, тёмная — [data-theme="dark"]. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Onest:wght@600;700;800&family=Rubik:wght@800&display=swap");

:root, [data-theme="light"] {
  --bg: #F5F3EF;  /* Paper / Base — фон страницы продукта и основной фон маркетинга (схема «Бумага»). Никогда не #FFFFFF. */
  --surface: #FFFDFB;  /* Surface — карточки, панели, шапка, поля ввода. На сайте — карточки на `bg`. */
  --surface-2: #EFECE5;  /* Surface Sunk — вторичные кнопки, чипы, поля в покое, реакции, ховер ghost-кнопки. */
  --surface-3: #E7E4DD;  /* Surface 3 — активные подложки. Светлое значение в исходнике не задано: временно равно `border`, уточнить по коду. */
  --border: #E7E4DD;  /* Граница 1px карточек, полей, шапки, залипающих зон ленты (в светлой теме). */
  --border-strong: #D6D2C9;  /* Усиленная граница: разделители групп, контур текущей версии. */
  --text: #1C1917;  /* Ink — основной текст на `bg`, `surface`, `surface-2` (≥15:1 в обеих темах). Вордмарк в маркетинге. */
  --text-secondary: #57534E;  /* Вторичный текст, подзаголовки маркетинга на `bg` и `sand` (6.9:1 / 7.0:1). */
  --text-muted: #A8A29E;  /* Приглушённый: даты, бейджи ролей, метки над заголовком. Светлый 2.3:1 на `bg` — не для смыслового текста; тёмный 3.7:1 — только ≥ 24px или как вспомогательная подпись. */
  --accent: #1C1917;  /* Интерактив и актив — монохром: ссылки, фокус, активная вкладка, активный сегмент фильтра, своя реакция. НЕ зелёный. */
  --accent-solid: #17A862;  /* Цвет действия: главная кнопка, одна на экран. Отмеченный чекбокс. На светлом белый текст даёт 3.08:1 — ниже AA для 17px; исходное значение сохранено. */
  --accent-solid-hover: #149154;  /* Ховер главной кнопки в светлой теме. Для тёмной в исходнике нет отдельного значения. */
  --accent-on: #FFFFFF;  /* Текст и иконка на `accent-solid`. Единственное место, где допустим #FFFFFF. */
  --ring: rgba(28,25,23,.16);  /* Кольцо фокуса вокруг поля (вместе с границей `accent`). Тёмное значение — зеркало светлого, в исходнике не задано. */
  --danger: #E5484D;  /* Запрошенные правки, деструктивные действия, ошибки форм. Отдельного цвета ошибок нет. */
  --ok: #17A862;  /* Зелёный текст: строка закрытия правки, галочки «принято». Всегда вместе с галочкой — состояние несёт форма. */
  --warn: #7A4E00;  /* Текст статуса «Новая версия» / «На ревью» (7.1:1 и 9.1:1). */
  --warn-raw: #FFB020;  /* Сырой жёлтый для заливок статуса при низкой прозрачности. */
  --info: #2FA9FF;  /* Системные подсказки. Как текст на светлом — 2.5:1, использовать только иконкой или заливкой. */
  --thread-rail-nested: rgba(18,20,26,.10);  /* Нейтральная полоса вложенных уровней ветки (уровни 1–3). Цвет автора — только у корня. */
  --control-bg: #0B0B0B;  /* Тёмный остров: поле вокруг видео. Одинаков в обеих темах. */
  --control-track: #141416;  /* Тёмный остров: фон дорожки таймлайна. */
  --control-bg-2: #1C1C1F;  /* Тёмный остров: панель управления плеером. */
  --control-bg-3: #2A2A2E;  /* Тёмный остров: ховер и активные контролы. */
  --control-border: #2A2A2E;  /* Тёмный остров: разделители внутри панели. */
  --control-text: #F7F7F5;  /* Тёмный остров: текст и иконки. */
  --control-muted: #A1A1AA;  /* Тёмный остров: вторичные подписи, моно-шаги перемотки (7.7:1 на `control-bg`). */
  --control-line: rgba(255,255,255,.08);  /* Тёмный остров: линия дорожки. */
  --control-line-strong: rgba(255,255,255,.5);  /* Тёмный остров: плейхед 2px. */
  --control-dot-border: rgba(255,255,255,.6);  /* Тёмный остров: кольцо «правка на текущем таймкоде». */
  --control-played: rgba(247,247,245,.18);  /* Тёмный остров: проигранная часть дорожки. */
  --control-accent: #F7F7F5;  /* Кнопка play — единственный акцентный контрол острова: светлая плитка, тёмная иконка. */
  --participant-coral: #E5484D;  /* Цвет участника / акцент маркетинга. Аватар, полоса корня, точка таймлайна; в маркетинге — точки дорожки, рельсы цитат. */
  --participant-ochre: #C98A00;  /* Цвет участника / акцент маркетинга. */
  --participant-teal: #0D9488;  /* Цвет участника / акцент маркетинга. */
  --participant-violet: #7C3AED;  /* Цвет участника / акцент маркетинга. */
  --participant-blue: #0284C7;  /* Цвет участника / акцент маркетинга. Не больше двух цветов семейства в макете, кроме дорожки (до пяти). */
  --forest: #0A3A26;  /* Схема «Лес»: фон креативов и секций про приватность и серверы. Также Deep Green — текст на `green-bright`. */
  --moss: #12603F;  /* Вторая ступень внутри зелёных схем (плашки на `forest`). */
  --sand: #E8E2D6;  /* Схема «Песок»: чередование секций лендинга, ретаргет-креативы. */
  --clay: #DCD4C4;  /* Карточки и разделители на `sand`. */
  --night: #17161A;  /* Схема «Ночь»: всё, что показывает интерфейс. Текст на нём — `paper-bright`. */
  --paper-bright: #F7F7F5;  /* Текст и вордмарк на `night`; кнопочный текст недопустим — там `forest`. */
  --green: #17A862;  /* Кнопка действия на светлых схемах (Бумага, Песок). Не декоративный акцент: ≤10% площади. */
  --green-bright: #2BD17E;  /* Кнопка на тёмных схемах (Лес, Ночь) с текстом `forest` (6.4:1). Фирменный зелёный фон логотипа. */
  --logo-tile: #0F0F0F;  /* Плитка знака. Не подстраивается ни под тему, ни под палитру макета. */
  --logo-layer-1: #52525B;  /* Верхняя плашка знака (старая версия). */
  --logo-layer-2: #8E8E96;  /* Средняя плашка знака. */
  --shadow-sm: 0 1px 3px rgba(28,25,23,.04);
  --shadow-lg: 0 8px 36px rgba(28,25,23,.12);
}

[data-theme="dark"] {
  --bg: #17161A;
  --surface: #1F1E23;
  --surface-2: #26242A;
  --surface-3: #2F2D34;
  --border: #34323A;
  --border-strong: #45424C;
  --text: #F7F7F5;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  --accent: #F7F7F5;
  --accent-solid: #2BD17E;
  --accent-solid-hover: var(--accent-solid);
  --accent-on: #0A3A26;
  --ring: rgba(247,247,245,.16);
  --danger: #F0685E;
  --ok: #2BD17E;
  --warn: #FFB020;
  --thread-rail-nested: rgba(255,255,255,.13);
  --shadow-sm: none;
  --shadow-lg: none;
}

:root {
  --sp-1: 4px;  /* Плотная лента правок: зазоры внутри строки. */
  --sp-2: 8px;  /* Базовая единица. Зазор между иконкой и подписью. */
  --sp-3: 12px;  /* Горизонтальные отступы ленты на мобиле. */
  --sp-4: 16px;  /* Внутренний отступ панелей. */
  --sp-5: 20px;  /* Отступы модалок. */
  --sp-6: 24px;  /* Шаг вложенности ветки (десктоп), межколонник сайта, зазор карточек. */
  --sp-7: 32px;  /* Разделение групп. */
  --sp-8: 48px;  /* Крупные разрывы в продукте. */
  --thread-indent-mobile: 14px;  /* Шаг вложенности ветки на мобиле. */
  --card-padding: 28px;  /* Внутренний отступ маркетинговой карточки. */
  --section-y: 96px;  /* Вертикальный ритм секций лендинга (десктоп). */
  --section-y-mobile: 64px;  /* Ритм секций на мобиле. */
  --hero-gap: 128px;  /* Между hero и первой секцией. */
  --canvas-margin: 86px;  /* Поля холста 1080 и сторис (8% меньшей стороны). */
  --r-sm: 6px;  /* Статус-чипы, бейджи, мелкие поля. */
  --r-checkbox: 5px;  /* Чекбокс 18×18. */
  --r-tooltip: 8px;  /* Тултип. */
  --radius: 10px;  /* Поля ввода, карточки продукта, форма редактирования. */
  --r-md: 14px;  /* Модалки, выпадающие меню, композер. */
  --r-lg: 18px;  /* Крупные контейнеры, шторки; все карточки и блоки маркетинга. */
  --r-full: 9999px;  /* Кнопки, чипы-фильтры, аватары, точки, пилюля-сводка. Кнопки всегда пилюли. */
  --control-sm: 32px;  /* Кнопка .small (padding 6/14, 13px). */
  --control-md: 44px;  /* Стандартная кнопка, поле ввода, тач-цель. */
  --control-lg: 52px;  /* Крупная кнопка. */
  --topbar-h: 56px;  /* Высота шапки продукта. */
  --breakpoint-mobile: 640px;  /* Единый мобильный брейкпоинт. */
  --container: 1200px;  /* Контейнер сайта, 12 колонок. */
  --opacity-disabled: 0.4;  /* @kind other */ /* Отключённые контролы; бледный аватар свёрнутой правки. */
  --opacity-cascade-bg: 0.1;  /* Каскад как фоновая фигура в маркетинге (8–12%). */
  --font-display: Onest, Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: Rubik, Onest, sans-serif;
}

/* Продукт */
.display { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }  /* Крупные пустые состояния, вход. */
.h1 { font-family: var(--font-display); font-size: 27px; line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; }  /* Заголовок экрана (.h1s). */
.h2 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }  /* Заголовок раздела (.h2s). */
.h3 { font-family: var(--font-sans); font-size: 16px; line-height: 1.35; font-weight: 500; }  /* H3 — Inter, Onest ниже 20px не используется. */
.h4 { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }  /* H4, лейблы полей, имя в комментарии. */
.body { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-weight: 400; }  /* Основной текст интерфейса. */
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }  /* Текст комментария, мета строк. */
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }  /* Статус-чип, бейдж роли, подсказки. */
.data { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }  /* Таймкоды, версии, ключи, ссылки. tabular-nums. Даты и количества — не моно. */
/* Сайт */
.site-display { font-family: var(--font-display); font-size: 64px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }  /* Hero лендинга. */
.site-h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }  /* H1 страниц сайта. */
.site-h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }  /* Заголовок секции (до 9 слов). */
.site-h3 { font-family: var(--font-sans); font-size: 22px; line-height: 1.35; font-weight: 500; }  /* Заголовок карточки. */
.site-body { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; font-weight: 400; }  /* Текст сайта, до 60 знаков в строке для подзаголовка. */
.site-body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }  /* Второстепенный текст. */
.site-caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }  /* Подписи, ссылки футера. */
.site-label { font-family: var(--font-mono); font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; }  /* Метка над заголовком. Обычный регистр. */
/* Холст 1080 */
.canvas-display { font-family: var(--font-display); font-size: 120px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }  /* Display 96–120px. */
.canvas-heading { font-family: var(--font-display); font-size: 72px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }  /* Заголовок поста, до 7 слов. */
.canvas-subheading { font-family: var(--font-display); font-size: 48px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }  /* Подзаголовок, до 14 слов. */
.canvas-text { font-family: var(--font-sans); font-size: 34px; line-height: 1.45; font-weight: 400; }  /* Текст на холсте. */
.canvas-caption { font-family: var(--font-sans); font-size: 26px; line-height: 1.3; font-weight: 500; }  /* Подпись. */
.canvas-label { font-family: var(--font-mono); font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; }  /* Метка над заголовком. */
/* Логотип */
.wordmark { font-family: var(--font-logo); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.025em; }  /* Только вордмарк в шапке продукта, цветом `text-muted`. В маркетинге — готовые SVG лок-апы. */



/* Финалка — общий стилевой слой компонентов. Все значения — через токены. */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
.fk-pad { padding: var(--sp-4); }
.fk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.fk-col { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.fk-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- Кнопки: всегда пилюли ---------- */
.fk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-5); border: 0; border-radius: var(--r-full); font: 500 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.fk-btn svg { width: 16px; height: 16px; }
.fk-btn-primary { background: var(--accent-solid); color: var(--accent-on); }
.fk-btn-primary:hover { background: var(--accent-solid-hover); }
.fk-btn-secondary { background: var(--surface-2); color: var(--text); }
.fk-btn-ghost { background: transparent; color: var(--text-secondary); }
.fk-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.fk-btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.fk-btn-sm { height: var(--control-sm); padding: 6px 14px; font-size: 13px; }
.fk-btn-lg { height: var(--control-lg); padding: 0 var(--sp-6); font-size: 16px; }
.fk-btn[disabled] { opacity: var(--opacity-disabled); pointer-events: none; }
.fk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fk-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }

/* ---------- Статус-чип ---------- */
.fk-status { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font: 500 12px/1 var(--font-sans); }
.fk-status-new { background: var(--surface-2); color: var(--text-secondary); }
.fk-status-new_version { background: rgba(255,176,32,.18); color: var(--warn); }
.fk-status-changes_given { background: rgba(229,72,77,.12); color: var(--danger); }
.fk-status-changes_done { background: rgba(47,169,255,.14); color: var(--text); }
.fk-status-approved { background: rgba(23,168,98,.12); color: var(--ok); }
.fk-status-published { background: var(--surface-3); color: var(--text); }
.fk-status-archived { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- Аватар, бейдж роли, стопка ---------- */
.fk-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); color: #fff; font: 600 11px/1 var(--font-sans); flex: none; }
.fk-avatar-lg { width: 40px; height: 40px; font-size: 16px; }
.fk-role { font: 500 12px/1 var(--font-sans); color: var(--text-muted); }
.fk-stack { display: inline-flex; }
.fk-stack .fk-avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -6px; }
.fk-stack .fk-avatar:first-child { margin-left: 0; }
.fk-stack-more { display: inline-grid; place-items: center; height: 24px; padding: 0 6px; margin-left: 4px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-secondary); font: 500 11px/1 var(--font-sans); }

/* ---------- Комментарий на таймкоде ---------- */
.fk-feed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fk-c { display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.fk-c:first-child { border-top: 0; }
.fk-c-tc { font: 500 12px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); cursor: pointer; }
.fk-c-body { position: relative; padding-left: 12px; }
.fk-c-body::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--rail, var(--thread-rail-nested)); }
.fk-c-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 24px; }
.fk-c-name { font: 500 13px/1 var(--font-sans); }
.fk-c-date { font-size: 12px; color: var(--text-muted); }
.fk-c-actions { margin-left: auto; display: flex; gap: 2px; color: var(--text-muted); }
.fk-c-actions span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); }
.fk-c-actions span:hover { color: var(--text); background: var(--surface-2); }
.fk-c-text { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.fk-c-type { font-weight: 500; color: var(--text-secondary); }
.fk-c-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.fk-c-done { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--ok); }
.fk-c-collapsed { display: grid; grid-template-columns: 92px 24px 1fr auto; gap: var(--sp-3); align-items: center; padding: 8px var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.fk-c-collapsed .fk-avatar { opacity: var(--opacity-disabled); }
.fk-c-collapsed .fk-trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fk-addr { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Пилюля-сводка ветки ---------- */
.fk-summary { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 6px; border: 0; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-secondary); font: 500 12px/1 var(--font-sans); cursor: pointer; }
.fk-summary-dots { display: inline-flex; }
.fk-summary-dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); margin-left: -3px; }
.fk-summary-dots i:first-child { margin-left: 0; }

/* ---------- Поля ввода ---------- */
.fk-field { display: grid; gap: 6px; max-width: 320px; }
.fk-label { font: 500 14px/1.2 var(--font-sans); }
.fk-input { height: var(--control-md); padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 15px var(--font-sans); outline: 0; }
.fk-input::placeholder { color: var(--text-muted); }
.fk-input:hover { border-color: var(--text); }
.fk-input.is-focus, .fk-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.fk-input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229,72,77,.16); }
.fk-hint { font-size: 12px; color: var(--text-secondary); }
.fk-hint.is-error { color: var(--danger); }

/* ---------- Чекбокс ---------- */
.fk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.fk-box { width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--r-checkbox); border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: var(--accent-on); }
.fk-box.is-on { background: var(--accent-solid); border-color: var(--accent-solid); }
.fk-check.is-disabled { opacity: var(--opacity-disabled); }

/* ---------- Сегменты фильтра ---------- */
.fk-seg { display: inline-flex; gap: 4px; }
.fk-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-secondary); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.fk-seg button span { margin-left: 6px; color: var(--text-muted); }
.fk-seg button.is-active { background: var(--accent); color: var(--bg); }
.fk-seg button.is-active span { color: inherit; opacity: .7; }
.fk-more { font: 500 13px/1 var(--font-sans); color: var(--text-secondary); background: none; border: 0; cursor: pointer; }

/* ---------- Композер ---------- */
/* Все элементы первой строки — плюс, таймкод, тег, текст, кнопка — центрированы по одной линии высотой 32px. */
.fk-composer { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); max-width: 560px; box-sizing: border-box; }
.fk-composer.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.fk-composer-in { flex: 1; min-width: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.fk-composer-text { color: var(--text); }
.fk-composer-ph { color: var(--text-muted); }
.fk-tcchip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.fk-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font: 500 12px/1 var(--font-sans); }
.fk-tag svg { width: 12px; height: 12px; color: var(--text-secondary); }
.fk-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); color: var(--text-secondary); flex: none; }
.fk-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.fk-send { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-full); background: var(--accent-solid); color: var(--accent-on); flex: none; cursor: pointer; }
.fk-send[disabled] { opacity: var(--opacity-disabled); }

/* ---------- Реакции ---------- */
.fk-react { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-full); background: var(--surface-2); font: 500 11px/1 var(--font-sans); color: var(--text-secondary); }
.fk-react.is-mine { box-shadow: inset 0 0 0 1px var(--text); color: var(--text); }

/* ---------- Меню и тултип ---------- */
.fk-menu { width: 210px; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
[data-theme="dark"] .fk-menu { box-shadow: none; }
.fk-menu div { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
.fk-menu div:hover { background: var(--surface-2); }
.fk-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.fk-menu .is-danger { color: var(--danger); }
.fk-tip { display: inline-block; padding: 6px 10px; border-radius: var(--r-tooltip); background: var(--control-bg-2); color: var(--control-text); font: 400 12px/1.3 var(--font-sans); }
.fk-undo { display: inline-flex; align-items: center; gap: 16px; padding: 10px 10px 10px 16px; border-radius: var(--r-full); background: var(--text); color: var(--bg); font-size: 14px; }
.fk-undo b { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Пустое состояние ---------- */
.fk-empty { max-width: 360px; padding: var(--sp-7) var(--sp-4); }
.fk-empty h3 { margin: 0 0 6px; font: 600 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.fk-empty p { margin: 0 0 var(--sp-5); color: var(--text-secondary); font-size: 15px; line-height: 1.5; }

/* ---------- Шапка ---------- */
.fk-topbar { display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h); padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border); font-size: 14px; }
.fk-topbar img { width: 28px; height: 28px; }
.fk-wordmark { font: 800 12px/1 var(--font-logo); letter-spacing: .025em; color: var(--text-muted); }
.fk-crumb { color: var(--text-secondary); }
.fk-crumb b { color: var(--text); font-weight: 500; }
.fk-topbar-r { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); color: var(--text-secondary); }

/* ---------- Маркетинг: метка, схемы, карточка, рельс ---------- */
.fk-label-mono { font: 500 13px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--text-muted); }
.fk-scheme { padding: 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; min-height: 180px; box-sizing: border-box; }
.fk-scheme h4 { margin: 0; font: 700 26px/1.1 var(--font-display); letter-spacing: -0.02em; }
.fk-scheme p { margin: 0; font-size: 14px; line-height: 1.5; }
.fk-scheme .fk-btn { margin-top: auto; align-self: flex-start; height: 38px; font-size: 14px; }
.fk-paper { background: #F5F3EF; color: #1C1917; box-shadow: inset 0 0 0 1px var(--clay); }
.fk-forest { background: var(--forest); color: #F5F3EF; }
.fk-night { background: var(--night); color: var(--paper-bright); }
.fk-sand { background: var(--sand); color: #1C1917; }
.fk-onlight { background: var(--green); color: #FFFFFF; }
.fk-ondark { background: var(--green-bright); color: var(--forest); }
.fk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--card-padding); }
.fk-rail { position: relative; padding-left: 20px; }
.fk-rail::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--rail, var(--participant-coral)); }

/* ================= Вёрстка сайта: текстовые элементы (.fk-prose) ================= */
.fk-prose { max-width: 680px; padding: var(--sp-6); color: var(--text); font: 400 17px/1.65 var(--font-sans); }
.fk-prose > :first-child { margin-top: 0; }
.fk-prose p { margin: 0 0 20px; }
.fk-prose .lead { margin: 0 0 32px; font: 600 24px/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.fk-prose .muted { color: var(--text-secondary); }
.fk-prose .small { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* Заголовки */
.fk-prose .eyebrow { display: block; margin: 0 0 12px; font: 500 13px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); }
.fk-prose h1 { margin: 0 0 20px; font: 700 44px/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.fk-prose h2 { margin: 56px 0 16px; font: 600 32px/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.fk-prose h3 { margin: 40px 0 12px; font: 500 22px/1.35 var(--font-sans); }
.fk-prose .eyebrow + h1, .fk-prose .eyebrow + h2, .fk-prose .eyebrow + h3 { margin-top: 0; }
.fk-prose h2 + h3, .fk-prose h1 + h2 { margin-top: 24px; }

/* Акценты в тексте */
.fk-prose strong { font-weight: 600; }
.fk-prose em { font-style: normal; }
.fk-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fk-prose a:hover { text-decoration-color: var(--text); }
.fk-prose .tc { font: 500 0.94em/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.fk-prose code { padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface-2); font: 500 0.88em/1 var(--font-mono); }
.fk-prose kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--surface); font: 500 13px/1.3 var(--font-mono); text-align: center; }

/* Списки */
.fk-prose ul, .fk-prose ol { margin: 0 0 24px; padding: 0; list-style: none; }
.fk-prose li { position: relative; padding-left: 28px; margin: 0 0 10px; }
.fk-prose ul > li::before { content: ""; position: absolute; left: 8px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); }
.fk-prose ul ul { margin: 10px 0 0; }
.fk-prose ul ul > li::before { width: 8px; height: 1.5px; border-radius: 1px; top: .8em; left: 7px; }
.fk-prose ol { counter-reset: fk; }
.fk-prose ol > li { counter-increment: fk; padding-left: 40px; }
.fk-prose ol > li::before { content: counter(fk, decimal-leading-zero); position: absolute; left: 0; top: .18em; font: 500 14px/1.65 var(--font-mono); color: var(--text-secondary); }
.fk-prose ul.checks > li { padding-left: 32px; }
.fk-prose ul.checks > li::before { display: none; }
.fk-prose ul.checks svg { position: absolute; left: 0; top: .3em; color: var(--ok); }
.fk-prose li > strong:first-child { display: block; font-weight: 600; }

/* Цитата */
.fk-prose blockquote { position: relative; margin: 32px 0; padding: 2px 0 2px 24px; }
.fk-prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--rail, var(--participant-teal)); }
.fk-prose blockquote p { margin: 0; font: 600 22px/1.4 var(--font-display); letter-spacing: -0.01em; }
.fk-prose blockquote cite { display: block; margin-top: 10px; font: 500 13px/1.3 var(--font-mono); font-style: normal; color: var(--text-secondary); }

/* Выделенные блоки */
.fk-note { display: grid; grid-template-columns: 20px 1fr; gap: 14px; margin: 28px 0; padding: 20px 24px; border-radius: var(--r-lg); background: var(--sand); color: var(--text); }
.fk-note svg { margin-top: 3px; color: var(--text-secondary); }
.fk-note b { display: block; margin-bottom: 4px; font: 600 17px/1.4 var(--font-sans); }
.fk-note p { margin: 0 !important; font-size: 15px; line-height: 1.6; }
.fk-note.is-forest { background: var(--forest); color: #F5F3EF; }
.fk-note.is-forest svg { color: rgba(245,243,239,.75); }
.fk-note.is-forest p { color: rgba(245,243,239,.8); }
.fk-note.is-warn { background: rgba(255,176,32,.16); }
.fk-note.is-warn svg { color: var(--warn); }

/* Спойлер */
.fk-faq { margin: 24px 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.fk-faq details + details { border-top: 1px solid var(--border); }
.fk-faq summary { display: flex; align-items: center; gap: 16px; padding: 18px 24px; list-style: none; cursor: pointer; font: 500 17px/1.4 var(--font-sans); }
.fk-faq summary::-webkit-details-marker { display: none; }
.fk-faq summary svg { margin-left: auto; flex: none; color: var(--text-secondary); transition: transform .15s; }
.fk-faq details[open] summary svg { transform: rotate(180deg); }
.fk-faq .ans { padding: 0 24px 20px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 600px; }

/* Кнопки и ссылки-действия на сайте */
.fk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 32px 0 8px; }
.fk-sbtn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 32px; border: 0; border-radius: var(--r-full); font: 500 17px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.fk-sbtn.primary { background: var(--green); color: #FFFFFF; }
.fk-sbtn.secondary { background: var(--surface-2); color: var(--text); }
.fk-sbtn.on-dark { background: var(--green-bright); color: var(--forest); }
.fk-sbtn.sm { height: 40px; padding: 0 20px; font-size: 15px; }
.fk-tlink { display: inline-flex; align-items: center; gap: 6px; font: 500 17px/1 var(--font-sans); color: var(--text); text-decoration: none; }
.fk-tlink svg { transition: transform .15s; }
.fk-tlink:hover svg { transform: translateX(3px); }
.fk-cta-note { font: 400 15px/1.5 var(--font-sans); color: var(--text-secondary); }

/* Шаги, цифра, таблица, иллюстрация, разделитель */
.fk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fk-step { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.fk-step span { font: 500 13px/1 var(--font-mono); color: var(--text-secondary); }
.fk-step h3 { margin: 16px 0 8px !important; font: 500 22px/1.35 var(--font-sans); }
.fk-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.fk-figure-num { font: 800 96px/1 var(--font-display); letter-spacing: -0.03em; }
.fk-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; font-size: 15px; }
.fk-table th { padding: 14px 20px; text-align: left; font: 500 14px/1.3 var(--font-sans); color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.fk-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.fk-table tr:last-child td { border-bottom: 0; }
.fk-table td.c, .fk-table th.c { text-align: center; }
.fk-table .no { color: var(--text-muted); }
.fk-table .yes { color: var(--ok); vertical-align: middle; }
.fk-fig { margin: 32px 0; }
.fk-fig .frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.fk-fig figcaption { margin-top: 10px; font: 500 14px/1.4 var(--font-sans); color: var(--text-secondary); }
.fk-prose hr { margin: 48px 0; border: 0; border-top: 1px solid var(--border); }


/* Дополнения DS-слоя: сброс нативных кнопок/полей для React-обёрток. Значения — только токены. */
button.fk-iconbtn{border:0;background:transparent;padding:0;cursor:pointer}
.fk-c-actions span{cursor:pointer}
.fk-composer-in input{flex:1;min-width:120px;height:24px;border:0;outline:0;padding:0;background:transparent;font:400 14px/20px var(--font-sans);color:var(--text)}
.fk-composer-in input::placeholder{color:var(--text-muted)}
.fk-menu div{cursor:pointer}
a{color:var(--text)}a:hover{color:var(--text-secondary)}



/* ============================================================
   Финалка — лендинг (статическая сборка). База + анимации + адаптив.
   Токены и компонентные классы .fk-* / .site-* — из блоков выше (дизайн-система).
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;overflow-x:hidden;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);overflow-x:hidden;max-width:100%;}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0;}
img{display:block;}
a{color:var(--text);text-decoration-color:var(--border-strong);text-underline-offset:3px;}
a:hover{text-decoration-color:var(--text);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:999px;border:3px solid var(--bg);background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background-color:var(--text-secondary);}
::-webkit-scrollbar-corner{background:transparent;}
.fk-noscroll-x,.scroll-x{scrollbar-width:none;-ms-overflow-style:none;}
.fk-noscroll-x::-webkit-scrollbar,.scroll-x::-webkit-scrollbar{width:0;height:0;display:none;}

/* ——— Лейаут ——— */
.l-container{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,4vw,24px);box-sizing:border-box;}
.is-hidden{display:none !important;}

/* ——— Анимации кнопок ——— */
.fk-sbtn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,background-color .15s ease;}
.fk-sbtn::after{content:"";position:absolute;top:-25%;left:0;width:42%;height:150%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:translateX(-260%) skewX(-20deg);pointer-events:none;animation:fk-sheen 5s ease-in-out infinite;}
.fk-sbtn.secondary::after{background:linear-gradient(100deg,transparent 0%,rgba(28,25,23,.12) 50%,transparent 100%);}
.fk-sbtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,20,15,.24);}
.fk-sbtn:active{transform:translateY(0);box-shadow:none;}
.fk-sbtn.primary:hover{background:#149154;}
@keyframes fk-sheen{0%{transform:translateX(-260%) skewX(-20deg);}16%{transform:translateX(320%) skewX(-20deg);}100%{transform:translateX(320%) skewX(-20deg);}}
.fk-tlink{border:0;background:none;cursor:pointer;}

/* ——— Карточки ——— */
.fk-card-lift{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;}
.fk-card-lift:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,25,23,.13);border-color:var(--border-strong);}
.fk-card-lift-dark{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;}
.fk-card-lift-dark:hover{transform:translateY(-4px);background:#34333B;box-shadow:0 16px 40px rgba(0,0,0,.42);}

/* ——— Карусели ——— */
.fk-carousel-arrow{transition:background .15s ease,border-color .15s ease,transform .12s ease;}
.fk-carousel-arrow:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong);}
.fk-carousel-arrow:active:not(:disabled){transform:scale(.93);}
.fk-carousel-arrow:disabled{opacity:.35;cursor:default;}
.scroll-x{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;}
.scroll-x>*{scroll-snap-align:start;}

/* ——— Аудитория (плашки) ——— */
@keyframes audDash{from{background-position:0 0;}to{background-position:6px 0;}}
.aud-plaque{transition:transform .2s ease;}
.aud-plaque:hover{transform:scale(1.04);}
.aud-plaque:hover .aud-arrow{transform:translateX(4px);}
.aud-plaque:hover .aud-dash{animation:audDash .55s linear infinite;}
.aud-arrow{transition:transform .2s ease;}

/* ——— Демо-таймлайн ——— */
.fk-tl-marker{cursor:pointer;}
.fk-tl-marker:hover,.fk-tl-marker:has(.fk-tl-pop.is-open){z-index:30;}
.fk-tl-dot{transition:transform .15s ease;}
.fk-tl-marker:hover .fk-tl-dot{transform:scale(1.3);}
.fk-tl-pop{opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .16s ease,transform .16s ease;z-index:2;}
.fk-tl-marker:hover .fk-tl-pop{opacity:1;visibility:visible;transform:translate(-50%,0);z-index:6;}
.fk-tl-pop.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);z-index:6;}
.fk-tl-track:has(.fk-tl-marker:hover) .fk-tl-marker:not(:hover) .fk-tl-pop.is-open{opacity:0;visibility:hidden;}

/* ——— SEO-статья (разворот) ——— */
.fk-article-body{position:relative;max-height:60px;overflow:hidden;transition:max-height .7s cubic-bezier(.22,.61,.36,1);}
.fk-article-body.is-open{max-height:8000px;}
.fk-article-fade{position:absolute;left:0;right:0;bottom:0;height:104px;pointer-events:none;background:linear-gradient(to bottom,rgba(245,243,239,0) 0%,var(--bg) 88%);transition:opacity .45s ease;}
.fk-article-body.is-open .fk-article-fade{opacity:0;}
.fk-article-toggle{cursor:pointer;}
.fk-article-toggle svg{transition:transform .2s ease;}
.fk-article-toggle.is-open svg{transform:rotate(180deg);}

/* ——— Шапка ——— */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:background .15s linear,border-color .15s linear,box-shadow .15s linear;}
.site-header.is-scrolled{background:var(--surface);border-bottom-color:var(--border);box-shadow:var(--shadow-sm);}
.header-in{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;}
.header-navrow{border-top:1px solid var(--border);}
.header-nav{display:flex;gap:24px;flex-wrap:wrap;}
.header-nav a{color:var(--text-secondary);text-decoration:none;padding:12px 0;white-space:nowrap;}
.header-nav a:hover{color:var(--text);}
.burger{width:44px;height:44px;flex:none;display:none;place-items:center;border:0;border-radius:var(--r-full);background:transparent;color:var(--text);cursor:pointer;}
.burger:hover{background:var(--surface-2);}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);padding:8px clamp(16px,4vw,24px) 24px;flex-direction:column;}
.mobile-menu a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--border);text-decoration:none;}
.mobile-menu a:last-child{border-bottom:0;font-weight:500;}
.header-logo-wide{display:block;}
.header-logo-mark{display:none;}
@media(max-width:1199px){.header-navrow{display:none;}.burger{display:grid;}.header-logo-wide{display:none;}.header-logo-mark{display:block;}}
@media(max-width:767px){.header-sub{display:none;}.btn-login{display:none;}}

/* ——— Сетки секций ——— */
.g-steps{display:grid;grid-template-columns:1fr;gap:12px;}
.g-compare{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);}
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(16px,2vw,24px);}
.g-pricing{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);}
.g-audience{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);}
@media(min-width:640px){.g-steps{grid-template-columns:repeat(2,1fr);}.g-compare{grid-template-columns:repeat(2,1fr);}.g-audience{grid-template-columns:repeat(2,1fr);}.g-pricing{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.g-steps{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1200px){.g-audience{grid-template-columns:repeat(3,1fr);}}

/* ——— Отзывы (карусель) ——— */
.c-reviews{display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;margin:clamp(12px,3vw,24px) -6px 0;padding:22px 8px 36px;}
.c-reviews>li{flex:0 0 86%;min-width:0;scroll-snap-align:start;}
@media(min-width:768px){.c-reviews>li{flex:0 0 calc((100% - clamp(16px,2vw,24px)) / 2);}}

/* ——— Сравнение-таблица (мессенджер) ——— */
.cmp-table{display:none;}
.cmp-cards{display:flex;flex-direction:column;gap:16px;list-style:none;padding:0;}
@media(min-width:768px){.cmp-table{display:block;}.cmp-cards{display:none;}}

/* ——— Карточки тарифов ——— */
.pr-root,.pr-root *{box-sizing:border-box;}
.pr-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.pr-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,25,23,.13);}
.pr-hidesb{scrollbar-width:none;-ms-overflow-style:none;}
.pr-hidesb::-webkit-scrollbar{width:0;height:0;display:none;}
.pr-counter input:focus,.pr-counter input:focus-visible{outline:none;}
.pr-counter:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
.pr-link{transition:text-decoration-color .15s ease;}
.pr-chev{transition:transform .15s ease;}
.pr-cards{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.4vw,40px);}
@media(min-width:768px){.pr-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}}
.pr-collapse{display:none;}
.pr-collapse.is-open{display:block;}
.pr-calc-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px);align-items:start;}
@media(min-width:860px){.pr-calc-grid{grid-template-columns:minmax(0,480px) minmax(300px,360px);justify-content:center;}}
.pr-studio-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:start;}
@media(min-width:860px){.pr-studio-grid{grid-template-columns:minmax(0,1fr) minmax(240px,300px);}}

/* ——— FAQ (details) ——— */
.faq-list{max-width:880px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{display:flex;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;color:var(--text);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-q{flex:1 1 auto;font-weight:600;}
.faq-item summary .faq-chev{flex:none;display:flex;color:var(--text-secondary);transition:transform .2s ease;}
.faq-item[open] summary .faq-chev{transform:rotate(180deg);}
.faq-item .faq-a{margin:0;padding:0 40px 20px 4px;color:var(--text-secondary);text-wrap:pretty;}

/* ——— Модалки / баннеры ——— */
.ov{position:fixed;inset:0;display:grid;place-items:center;box-sizing:border-box;overflow-y:auto;}
.ov[hidden]{display:none;}
.fixed-bar[hidden]{display:none;}

/* ——— Граф мира (идл-анимация) ——— */
@keyframes gfloat{0%,100%{transform:translate(-50%,-22px);}50%{transform:translate(-50%,-28px);}}
[data-gnode]{animation:gfloat 6s ease-in-out infinite;}
[data-gnode]:nth-child(odd){animation-duration:7.5s;animation-delay:-2s;}

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

/* ——— Герой: дуговая стрелка к видео ——— */
.hero-video-cue{overflow:visible;}
.hero-arrow{position:absolute;left:34px;top:calc(100% - 2px);width:150px;height:118px;pointer-events:none;overflow:visible;color:var(--green);z-index:1;}
#heroPlayBtn:hover{transform:scale(1.06);}
#heroPlayBtn:active{transform:scale(.97);}
.g-steps > li{transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.g-steps > li:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3);background:var(--control-bg-2);}
.hero-arrow > path{stroke-dasharray:260;stroke-dashoffset:260;animation:fkArrowDraw 1.1s ease-out .7s forwards;}
.hero-arrow .hero-arrow-head{opacity:0;animation:fkArrowHeadIn .3s ease-out 1.7s forwards;}
@keyframes fkArrowDraw{to{stroke-dashoffset:0;}}
@keyframes fkArrowHeadIn{to{opacity:1;}}
@media(max-width:560px){.hero-arrow{width:110px;height:86px;left:20px;}}

/* ——— Карусель тарифов (мобайл) ——— */
.pr-dots{display:none;gap:8px;justify-content:center;margin-top:16px;}
@media(max-width:767px){
  .pr-cards{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:calc(-1*clamp(16px,4vw,24px));margin-right:calc(-1*clamp(16px,4vw,24px));padding:4px clamp(16px,4vw,24px) 10px;scroll-padding-left:clamp(16px,4vw,24px);scrollbar-width:none;-ms-overflow-style:none;}
  .pr-cards::-webkit-scrollbar{width:0;height:0;display:none;}
  .pr-cards>.pr-card{flex:0 0 82%;scroll-snap-align:start;}
  .pr-card:hover{transform:none;box-shadow:none;}
}

/* ——— Таймлайн: подсказки не обрезаются на мобайле ——— */
@media(max-width:767px){
  .fk-tl-fig{overflow:visible !important;}
  .fk-tl-inner{border-radius:var(--r-lg);}
}

/* ——— Карта надёжности: имена узлов не обрезаются на мобайле ——— */
@media(max-width:767px){
  #reliability .js-graph-wide{overflow:visible !important;}
  #reliability .js-graph-wide>img{border-radius:var(--r-lg);}
  #reliability [data-gnode] .site-body-sm{font-size:12px;}
}