/* СПЕКТР · брендовый слой сайта (22.09.2026)
   ═══════════════════════════════════════════════════════════════════════════
   ЧТО ЭТО И ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ. Сайт собран на дизайн-системе
   «Телеметрия» (spektr-ui.css) — она даёт карточки, кнопки, поля, чипы и
   светлую тему по умолчанию. Осенью 2026 появился фирменный пакет СПЕКТР
   (знак S/play, маскот-сова, тёмно-синяя палитра, градиент cyan→blue→violet).
   Слить их в один файл нельзя: spektr-ui.css — КОПИЯ поставки, её правки
   уедут при следующем обновлении пакета, а site.css отвечает за раскладку
   страниц. Поэтому бренд живёт третьим слоем и подключается ПОСЛЕ обоих:
   он переопределяет токены и добавляет то, чего в обеих системах нет
   (первый экран, снимки в рамке, маскот).

   ГЛАВНОЕ РЕШЕНИЕ: витрина всегда тёмная. Не «тёмная тема по выбору
   системы», а одна среда — как у продуктов безопасности, и как нарисован
   фирменный пакет. Маскот и знак сделаны для тёмного фона: на белом сова
   превращается в наклейку, а градиент знака теряет свечение. Светлая тема
   у ПРОДУКТА остаётся — там человек работает часами, и выбор за ним.
   Отсюда способ: ниже переопределены те же переменные, что «Телеметрия»
   объявляет в `@media (prefers-color-scheme: dark)`, но безусловно. Наш файл
   подключён последним, поэтому побеждает и при светлой схеме ОС.

   ГРАНИЦЫ (правила фирменного пакета, 03_brand/BRAND_USAGE.md):
   знак не перерисовывать и не обводить; у совы не менять анатомию, лицо,
   цвет глаз и знак на груди — только поза, реквизит и сценарий; градиент
   бренда не размазывать по множеству контролов (логотип, главная кнопка,
   ключевые акценты — и всё); цвета состояний (зелёный/жёлтый/красный)
   остаются семантикой и в декор не идут.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Шрифт ──────────────────────────────────────────────────────────────
   Montserrat — шрифт самой надписи в логотипе, поэтому заголовки сайта
   набраны им же: иначе знак и страница выглядят из разных наборов.
   Файл свой, подрезанный до кириллицы и латиницы (30 КБ, одна переменная
   ось веса 100–900) — ни одного обращения наружу, как во всей системе.
   Текст абзацев остаётся системным: длинные абзацы геометрическим
   гротеском читать тяжелее, а системный шрифт уже отрисован ОС. */
/* @font-face Montserrat убран 03.10.2026: §19 просит системный стек, а
   `font-display: swap` давал сдвиг раскладки (CLS, §22) и лишний запрос.
   Знак — SVG, от гарнитуры не зависит. */

/* ── 1. ТОКЕНЫ (§19 ТЗ) ────────────────────────────────────────────────
   ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ЖИВУТ ЗНАЧЕНИЯ. §19 требует централизации «без
   разрозненных локальных переопределений»: пока цвет или отступ пишется
   числом по месту, два таких числа расходятся — это в проекте случалось
   столько раз, что стало правилом.
   ЗАМЕР 03.10 ДО ЭТОЙ ПРАВКИ: шкала расстояний была объявлена и НЕ
   использована ни разу (289 сырых px-значений, 43 разных, в шкалу ТЗ
   попадало 26 %); у шести строк таблицы §19 токена не было вовсе; радиус
   кнопок стоял 999 px («таблетка») против 10–12 у ТЗ.
   ТИПОГРАФИКА — СИСТЕМНАЯ. Свой Montserrat (woff2, `font-display: swap`)
   убран: §19 просит системный стек, а замер показал и цену — пока шрифт
   едет, строки считаются по запасной гарнитуре, и высота страницы выходит
   иной. Для посетителя это сдвиг раскладки (CLS, §22), для нас — лишний
   запрос. Знак остаётся SVG и не зависит от шрифта. */
:root {
  color-scheme: light;

  /* поверхности */
  --v-bg: #FFFFFF;              /* основной фон витрины */
  --v-surface: #FFFFFF;         /* карточка, панель */
  --v-surface-2: #F5F5F7;       /* вторичная поверхность, чередование полос */
  --v-bg-work: #F6F7F9;         /* фон кабинета и панели */
  --v-line: #D9DCE3;            /* граница: карточка, поле, таблица */
  --v-sep: #E8EAEF;             /* разделитель внутри блока — тише границы */

  /* текст. Проверено на белом: 15,9 : 1, 5,6 : 1 и 4,8 : 1 — вспомогательный
     тоже проходит порог 4,5 : 1 для обычного текста (§21). */
  --v-t1: #1D1D1F;
  --v-t2: #60646C;
  --v-t3: #6E7278;

  /* действие */
  --v-tint: #2457D6;            /* 6,5 : 1 на белом */
  --v-tint-dim: rgba(36,87,214,.10);
  --v-tint-dark: #1C46AE;       /* нажатие и наведение */

  /* состояния. Взяты ТЕМНЕЕ прежних: прежние #0E9F6E/#B45309 давали на белом
     3,0 : 1 — для текста мало, а статус у нас передаётся словом, не только
     цветом (§20). */
  --v-ok: #0F7B4F;      --v-ok-dim: #E7F4EE;
  --v-warn: #8A5300;    --v-warn-dim: #FBF0E2;
  --v-danger: #C0272D;  --v-danger-dim: #FBEAEA;

  /* радиусы §19 */
  --v-r-control: 12px;          /* кнопка, поле, чип */
  --v-r-card: 14px;             /* рабочая карточка */
  --v-r-panel: 22px;            /* большая витринная панель */

  /* шкала расстояний §19 — других чисел в отступах быть не должно */
  --v-sp-1: 4px;  --v-sp-2: 8px;  --v-sp-3: 12px; --v-sp-4: 16px;
  --v-sp-5: 24px; --v-sp-6: 32px; --v-sp-7: 48px; --v-sp-8: 64px;
  --v-sp-9: 96px;

  /* размеры §19 */
  --v-w-page: 1200px;           /* контейнер витрины */
  --v-w-demo: 1360px;           /* крупная демонстрация продукта */
  --v-w-text: 68ch;             /* колонка текста 60–72ch */
  --v-w-form: 440px;            /* компактная форма авторизации */
  --v-w-side: 232px;            /* боковая навигация кабинета */
  --v-h-top: 60px;              /* верхняя панель кабинета */
  --v-h-site: 64px;             /* шапка витрины */
  --v-pad-work: 28px;           /* рабочий отступ (на телефоне 16px) */
  --v-touch: 44px;              /* проектная цель области нажатия */

  /* типографика §19: системный стек, табличные цифры у денег */
  --v-f-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --v-f-display: var(--v-f-ui);
  --v-f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
              monospace;
  --v-fs-hero: clamp(36px, 5vw, 64px);
  --v-fs-h2: clamp(28px, 3.4vw, 42px);
  --v-fs-h3: 20px;
  --v-fs-work-h1: 30px;         /* заголовок рабочей страницы 28–32 */
  --v-fs-body: 17px;            /* витрина 17–18 */
  --v-fs-work: 15.5px;          /* кабинет 15–16 */
  --v-fs-small: 13.5px;
  --v-lh-hero: 1.08;

  /* тени — редкие и тихие: §5.2 прямо просит убрать свечения и тяжёлые тени */
  --v-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --v-shadow-lift: 0 2px 4px rgba(16,24,40,.05), 0 14px 34px rgba(16,24,40,.08);

  /* стекло шапки */
  --v-glass: rgba(255,255,255,.80);
  --v-glass-thick: rgba(255,255,255,.94);
  --v-glass-t1: #1D1D1F;
  --v-glass-t2: #60646C;
  --v-glass-bright: saturate(140%) blur(16px);

  /* тёмная полоса — одна на страницу, для схемы и завершения */
  --v-band-tint: var(--v-surface-2);
  --v-band-dark: #16181D;

  /* фирменные. Градиент §5.2 допустим В ЗНАКЕ и редким малым акцентом —
     заголовки и кнопки им больше не красим. */
  --sp-cyan: #0079A8;
  --sp-blue: var(--v-tint);
  --sp-violet: #6D3BD4;
  --sp-grad: linear-gradient(135deg, #00B4D8 0%, #2457D6 55%, #6D3BD4 100%);
  --sp-hair: 1px solid var(--v-line);

  /* совместимость со старыми правилами, пока их не переписали этапы C–E */
  --v-live-a: var(--v-tint); --v-live-b: var(--sp-cyan);
  --v-live-text: #0678A5;
  --v-live-glow: none;
  --v-danger-glow: none;
  --v-rim-card: none;
  --v-sheen: none;
  --sp-grad-soft: linear-gradient(135deg, rgba(0,180,216,.10),
                                 rgba(36,87,214,.08) 55%, rgba(109,59,212,.08));
  --sp-glow: none;
}

/* ── 3. Холст ──────────────────────────────────────────────────────────────
   Два мягких пятна света — синее сверху справа, бирюзовое слева — и больше
   ничего: свечение работает, пока его мало. */
.v-app {
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(37,99,255,.20), transparent 62%),
    radial-gradient(820px 520px at 4% 6%, rgba(0,229,255,.09), transparent 58%),
    var(--v-bg);
}
.v-ambient i { opacity: .38; }
.v-ambient i:nth-child(1) { background: radial-gradient(circle, rgba(37,99,255,.34), transparent 68%); }
.v-ambient i:nth-child(2) { background: radial-gradient(circle, rgba(0,229,255,.20), transparent 68%); }
.v-ambient i:nth-child(3) { background: radial-gradient(circle, rgba(139,92,246,.22), transparent 68%); }

body { font-size: 16px; }

/* ── 4. Шапка ──────────────────────────────────────────────────────────── */
.brand { font-family: var(--v-f-display); font-weight: 800; letter-spacing: .15em; font-size: 20px; gap: 13px; }
/* Знак задаётся макросом поимённо (размер приходит инлайном), здесь только
   оптическая подгонка: у S/play пустое поле сверху и снизу, поэтому рядом с
   прописными буквами он кажется мельче своей высоты. */

/* ── 5. Кнопки и фирменные акценты ─────────────────────────────────────────
   Градиент бренда — только на главном действии. Вторая кнопка обведена и
   прозрачна: два ярких пятна рядом заставляют выбирать дважды. */
.v-btn--primary {
  background: var(--sp-grad); border: 0; color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(37,99,255,.3);
}
.v-btn--primary:hover { box-shadow: 0 12px 34px rgba(37,99,255,.42); filter: brightness(1.06); }
.v-btn--ghost {
  background: rgba(255,255,255,.04); border: 1px solid rgba(126,157,224,.34); color: var(--v-t1);
}
.v-btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(126,157,224,.5); }

/* Текст градиентом — заголовки первого экрана и крупные числа.
   `color: transparent` под `background-clip` даёт срез по букве; запасной
   цвет объявлен до него, чтобы при отказе свойства текст не исчез. */
/* Градиент режется по буквам отдельно в каждой строке, поэтому фраза под ним
   не должна переноситься: иначе вторая строка начинает градиент заново и
   цвета не сходятся. */
.grad {
  white-space: nowrap;
  color: var(--sp-cyan);
  background: var(--sp-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 6. Первый экран ───────────────────────────────────────────────────────
   Слева обещание, два действия и четыре факта; справа — рабочий экран
   системы, который уходит за правый край окна и растворяется слева. Он
   именно ФОН: подписи нет, рамки браузера нет, контраст приглушён. Человек
   должен прочитать текст, а систему увидеть краем глаза — и понять, что она
   настоящая. На стыке стоит сова с сервером и чуть заходит на снимок:
   она связывает обещание «останется у вас» с железом, на котором остаётся. */
/* Текст не залезает на снимок: своя ширина, а не ширина полосы.
   ЛОВУШКА: `.hero-text > *` слабее, чем `.hero h1` в site.css — звёздочка
   в специфичности не считается, и 15ch оттуда перебивали эту ширину. Поэтому
   заголовку и абзацу ширина задана поимённо. */

/* Четыре факта — под кнопками, двумя столбцами. Это не карточки и не полоса:
   короткие подтверждения обещания, которые дочитывают вместе с ним. */

/* ── 7. Снимок системы фоном ──────────────────────────────────────────── */

/* Затемнение слева направо — поверх снимка, чтобы текст оставался главным. */

/* Сова первого экрана: на стыке текста и снимка, нижний край растворён. */
.owl { position: absolute; pointer-events: none; user-select: none; }
.owl img { display: block; width: 100%; height: auto; }
/* ПОЧЕМУ СВЕЧЕНИЕ ОТДЕЛЬНЫМ СЛОЕМ, А НЕ `filter: drop-shadow` НА КАРТИНКЕ.
   Фильтр рисует ореол ВОКРУГ картинки, а маска накрывает только её
   прямоугольник — и всё, что фильтр вынес наружу, обрезается по краю коробки.
   На тёмном фоне это видно как светлый прямоугольник вокруг совы с резкими
   границами. Поэтому свечение — своя подложка с мягким краем, а маска
   применяется только к самой картинке. */

/* ── 8. Полосы, карточки, заголовки ───────────────────────────────────── */
.band--tint { background: var(--v-band-tint); border-top: var(--sp-hair); border-bottom: var(--sp-hair); }
.band--dark { background: var(--v-band-dark); }

.v-card {
  background: linear-gradient(180deg, rgba(22,35,63,.72), rgba(10,17,38,.72));
  border: 1px solid var(--v-sep);
  box-shadow: var(--v-rim-card), 0 10px 30px rgba(2,6,18,.35);
}
.v-card:hover { border-color: rgba(126,157,224,.34); }
/* На тёмной полосе карточка должна остаться видимой: полоса темнее холста,
   и прежняя полупрозрачная заливка сливалась с ней. */
.band--dark .v-card { background: linear-gradient(180deg, rgba(20,32,58,.66), rgba(8,14,32,.8)); border-color: rgba(126,157,224,.18); }

.sec-head .kicker, .band--dark .sec-head .kicker {
  font-family: var(--v-f-display); font-weight: 700; letter-spacing: .14em;
  color: var(--sp-cyan);
}
.sec-head h2 {
  font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08;
}
.sec-head p { color: var(--v-t2); }
.fc h3, .seg h3 { font-weight: 700; letter-spacing: -.01em; font-size: 18px; }

/* Значок: фирменное стекло вместо плоской заливки */
.ib, .band--dark .ib {
  background: var(--sp-grad-soft); border: 1px solid rgba(126,157,224,.24);
  color: #7FD9FF; border-radius: 13px;
}

/* Полоса фактов под первым экраном */
.strip { border-top: var(--sp-hair); border-bottom: var(--sp-hair); }
.strip b { color: var(--v-t1); }

/* Крупные числа и цена */
.p-num { font-family: var(--v-f-display); font-weight: 800; letter-spacing: -.02em; }

/* ── 9. Маскот в разделах ──────────────────────────────────────────────────
   Правило пакета: не чаще одного-двух появлений на экран. На главной сова
   выходит трижды за всю страницу — на первом экране, рядом с обещанием
   «данные остаются у вас» и в завершающем призыве. */
.owl-side {
  position: relative; display: flex; justify-content: center; align-items: center;
}
.owl-side img {
  width: 100%; max-width: 320px; height: auto; position: relative; z-index: 1;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 58%, transparent 90%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 58%, transparent 90%);
  /* Маска по умолчанию ПОВТОРЯЕТСЯ: за пределами коробки она выкладывается
     плитками, и всё, что туда попадает, получает резкие границы. Здесь
     выносить наружу нечего, но правило одно на все маски страницы. */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.owl-side::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,255,.22), transparent 66%);
  filter: blur(26px);
}

/* ── 10. Завершающий призыв ────────────────────────────────────────────── */
.cta-band {
  background:
    radial-gradient(620px 320px at 12% 0%, rgba(0,229,255,.14), transparent 62%),
    linear-gradient(135deg, #111E42, #080F24);
  border: 1px solid rgba(126,157,224,.3);
  border-radius: 28px; box-shadow: var(--sp-glow);
}

/* ── 11. Подвал ────────────────────────────────────────────────────────── */

/* ── 12. Узкие экраны ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  /* Планшет: композиция как на большом экране — текст слева, окно системы
     справа за край, — но окно уже, а сова уходит: места на троих нет. */
}
@media (max-width: 600px) {
  /* На телефоне окно системы остаётся ФОНОМ, как на большом экране: уходит
     за правый край, светится в верхней трети и гаснет к абзацу. В потоке под
     текстом оно читалось как «картинка внизу», мимо которой листают; фоном
     система видна с первого взгляда и при этом не мешает — сверху вуаль,
     которая темнеет к низу. Текст обязан быть читаемым при любом кадре,
     отсюда её плотность. */
}
@media (prefers-reduced-motion: reduce) {
  .v-btn--primary:hover { filter: none; }
}

/* ── 13. Снимок в карточке умения ──────────────────────────────────────────
   Три главных умения показываются не рисунком, а кадром системы.
   СООТНОШЕНИЕ, А НЕ ВЫСОТА (04.10.2026). Прежде здесь стояла жёсткая высота
   168 px при `height:auto` у картинки, то есть снимок обрезался СНИЗУ на
   неизвестную величину — она зависела от ширины колонки. Замер на собранной
   странице: у карточки «Запись и архив» срезало ровно шкалу архива, ту самую,
   которую обещает её же текст («Архив показан одной шкалой»), а у «Правил» —
   строку управления под кадром. Подпись обещала одно, снимок показывал другое,
   и виноват был не снимок.
   Теперь рамка объявляет ТО ЖЕ соотношение 16:10, что и `.task__shot` на
   главной, а снимки под него и снимаются (`tools/site-shot.py`). Одинаковая
   «полка» у трёх карточек при этом сохраняется: ширины колонок равны, значит
   равны и высоты. */
.cap--shot {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(126,157,224,.2); background: #080E1E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cap--shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 14. Рисунки на тёмном ─────────────────────────────────────────────────
   В site.css у схем два набора цветов: обычный (для светлой страницы) и
   набор для тёмной полосы. Витрина стала тёмной целиком, поэтому второй
   набор нужен ВЕЗДЕ, а не только внутри `.band--dark`. Повторяем его здесь
   плоскими селекторами — сам site.css не трогаем, чтобы не разъехались
   страницы кабинета, где полосы по-прежнему чередуются. */
.art .a-box, .art .a-frame { fill: rgba(255,255,255,.05); stroke: rgba(126,157,224,.3); }
.art .a-server {
  fill: rgba(37,99,255,.22); stroke: #6FA8FF;
}
.art .a-far { stroke: rgba(126,157,224,.34); }
.art .a-dot { fill: rgba(255,255,255,.12); stroke: rgba(126,157,224,.34); }
.art .a-pupil { fill: rgba(200,225,255,.7); }
.art .a-scr { fill: rgba(255,255,255,.14); }
.art .a-t, .art .a-ts, .art .a-cap { fill: var(--v-t2); }
.art .a-th { fill: var(--v-t1); }
.art .a-tf { fill: rgba(197,208,232,.6); }
.art .a-tf2 { fill: rgba(197,208,232,.45); }
.art .a-line { color: rgba(126,157,224,.45) !important; }
.art .a-dash { color: rgba(126,157,224,.34) !important; }
.art .a-zone { fill: rgba(0,229,255,.12); stroke: var(--sp-cyan); }

/* ── 14а. Схема периметра ──────────────────────────────────────────────────
   Всё, что внутри контура, — оборудование заказчика; наше облако снаружи.
   Цвета заданы числами, а не токенами, намеренно: полоса под схемой тёмная в
   ОБЕИХ темах, и токен `--v-t1` в светлой стал бы тёмным по тёмному — ровно
   та ловушка, что уже ломала эту схему 15.09. */
.scheme { margin: 44px 0 0; }
.art .p-fill  { fill: rgba(0,229,255,.035); }
.art .p-fence { fill: none; stroke: rgba(0,229,255,.34); stroke-width: 1.6;
                stroke-dasharray: 9 8; stroke-linecap: round; }
.art .p-gate  { fill: none; stroke: #2FD8F5; stroke-width: 3; stroke-linecap: round; }
.art .p-legend { font-family: var(--v-f-ui); font-size: 11px; font-weight: 700;
                 letter-spacing: .14em; fill: rgba(0,229,255,.72); }
.art .p-note  { font-family: var(--v-f-ui); font-size: 12px; fill: rgba(197,208,232,.62); }
.art .p-link  { color: #6FB4FF; }
.art .p-link path { fill: none; stroke: url(#p-grad); stroke-width: 2.6;
                    stroke-linejoin: round; stroke-linecap: round; }
.art .p-flow  { pointer-events: none; }
.art .p-flow path { fill: none; stroke: #BFEFFF; stroke-width: 2.6; opacity: .0;
                    stroke-linejoin: round; stroke-linecap: round; }

/* Движение по линиям видео: направление видно без стрелок, а сайт системы
   НАБЛЮДЕНИЯ не должен быть неподвижной картинкой (жалоба 15.09). Включается
   только там, где человек не просил убрать анимацию. */
@media (prefers-reduced-motion: no-preference) {
  .art .p-flow path { opacity: .55; stroke-dasharray: 9 27; animation: p-move 2.2s linear infinite; }
  @keyframes p-move { to { stroke-dashoffset: -36; } }
}

/* Три факта под схемой: не карточки, а полоса с разделителями — коробки
   спорили бы со схемой за внимание, а она здесь главная. */
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr);
          margin-top: 56px; border-top: 1px solid rgba(126,157,224,.18); }
.facts3 > div { padding: 30px 30px 0; border-left: 1px solid rgba(126,157,224,.18); }
.facts3 > div:first-child { border-left: 0; padding-left: 0; }
.facts3 h3 { font-size: 17px; margin: 14px 0 9px; }
.facts3 p { font-size: 15.5px; line-height: 1.62; margin: 0; }

/* ── 15. Воздух и размеры ──────────────────────────────────────────────────
   На тёмном фоне мелкий текст читается хуже, а тесная сетка выглядит
   дешевле, чем на белом: свет не разделяет блоки за нас. Поэтому полоса
   шире, секции выше, шрифт в карточках на полпункта крупнее.

   Раздел НАМЕРЕННО объявляет те же классы, что разделы 8 и 9: там цвет, здесь
   размеры. Разделение по смыслу удобнее читать, чем одно правило на двадцать
   свойств, — но инструменту об этом надо сказать, иначе он справедливо
   ругается. Добавляешь сюда новый повтор — допиши его в строку ниже, иначе
   `tools/csscheck.py` и сторож `tools/test_css.py` упадут.
   csscheck: повтор осознан — .band--dark .strip .v-card */
.page { max-width: 1200px; }
.band { padding: 96px 0; }
.band--dark { padding: 104px 0; }
.grid { gap: 22px; }
.v-card--pad { padding: 26px; }
.fc p, .feat p, .seg p { font-size: 15.5px; line-height: 1.65; }
.sec-head { margin-bottom: 48px; }
.sec-head p { font-size: 17.5px; }
.strip { padding: 26px 0; gap: 14px 34px; font-size: 14.5px; }
.strip .v-icon { color: var(--sp-cyan); }
.rules div b { color: var(--v-t1); }

/* Карточка на указателе: светлеет ободок и появляется фирменная искра
   сверху. Двигать карточку не нужно — на тёмном хватает света. */
.v-card { transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease); }
.v-card:hover { box-shadow: var(--v-rim-card), 0 14px 40px rgba(2,6,18,.5), 0 0 0 1px rgba(0,229,255,.08); }

/* ── 16. Схема и маскот рядом ──────────────────────────────────────────── */

/* Завершающий призыв: сова слева, текст и кнопки справа. Раскладкой, а не
   абсолютным положением — иначе на узком экране сова наезжает на текст. */
.cta-band--owl {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 32px; align-items: center; text-align: left; padding: 48px 44px;
}
.cta-band--owl h2 { margin-bottom: 10px; }
.cta-band--owl p { margin-left: 0; }
.cta-band--owl .row { justify-content: flex-start !important; }
.owl-side--cta::before { width: 220px; height: 220px; }

/* Кнопки на призыве. В site.css главная кнопка на синем фоне делалась белой
   — фон теперь тёмный, и белая кнопка спорит с фирменной. Возвращаем
   градиент, вторую оставляем обведённой. */
.cta-band .v-btn--primary { background: var(--sp-grad); color: #fff; border-color: transparent; }
.cta-band .v-btn--ghost { color: var(--v-t1); border-color: rgba(126,157,224,.4); background: rgba(255,255,255,.05); }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; }
.cta-band p { color: var(--v-t2); }

@media (max-width: 900px) {
  .cta-band--owl { grid-template-columns: 1fr; padding: 36px 24px; }
  .owl-side--cta { display: none; }
}
@media (max-width: 860px) {
  .facts3 { grid-template-columns: 1fr; margin-top: 40px; }
  .facts3 > div { border-left: 0; padding: 26px 0 0;
                  border-top: 1px solid rgba(126,157,224,.18); }
  .facts3 > div:first-child { border-top: 0; }
}
/* Схема периметра мельче 720 px становится нечитаемой (подписи уезжают в
   6-7 px), а рисовать вторую, вертикальную, — значит завести две схемы,
   которые разойдутся. Поэтому на узком экране она прокручивается вбок
   внутри своего блока; страница при этом вбок не едет.
   Обрыв у правого края сам по себе читается как поломка вёрстки, поэтому
   рядом стоят два признака прокрутки: растворение края и прямая подсказка.
   Без них главное в схеме — облако ЗА периметром — на телефоне не видно
   вовсе, а именно оно и есть довод блока. */
.scheme-wrap { position: relative; }
.scheme-hint { display: none; }
@media (max-width: 760px) {
  .scheme { overflow-x: auto; }
  .scheme .art--perim { min-width: 720px; }
  .scheme-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 48px;
    height: calc(100% - 34px); pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--v-band-dark));
  }
  .scheme-hint {
    display: block; margin: 12px 0 0; font-size: 13.5px;
    color: rgba(197,208,232,.55);
  }
}

/* ── 17. Правила аналитики: кадр с разметкой ──────────────────────────────
   Семь правил показываются не списком, а кадрами: на каждом нарисовано то,
   что именно задаёт правило — зона, линия с направлением, рамка объекта,
   счётчик. Иначе «пересечение линии» и «подсчёт по линии» читаются как одно
   и то же. Разметка — SVG поверх снимка в относительных координатах, поэтому
   остаётся резкой и не зависит от размера карточки.
   Кадры — из открытых источников: cloud/web/img/rules/LICENSES.txt. */
.rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rule-card {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(22,35,63,.72), rgba(10,17,38,.72));
  border: 1px solid var(--v-sep); border-radius: 18px;
  box-shadow: var(--v-rim-card), 0 10px 30px rgba(2,6,18,.35);
  transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.rule-card:hover { border-color: rgba(126,157,224,.34); box-shadow: var(--v-rim-card), 0 14px 40px rgba(2,6,18,.5); }
.rule-shot { position: relative; aspect-ratio: 16/9; background: #060B18; overflow: hidden; }
/* Кадр чуть приглушён: разметка поверх должна читаться на любом снимке, а
   не спорить с солнечным днём. Это не «состаривание фото», а тот же приём,
   что в продукте — подложка под подписями плитки. */
.rule-shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.96) brightness(.88); }
/* Затемнение снизу: под ним лежат подписи разметки, иначе они теряются на
   светлом кадре. Сверху кадр не трогаем — там смысл. */
.rule-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,11,24,.12) 0, transparent 34%, rgba(6,11,24,.5) 100%);
}
.rule-mark { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.rule-card figcaption { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 7px; }
.rule-card h3 { margin: 0; font-family: var(--v-f-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; }
.rule-card p { margin: 0; color: var(--v-t2); font-size: 14px; line-height: 1.55; }

/* Разметка. Цвета те же, что в продукте: зона и линия — фирменные, объект —
   жёлтый (внимание), нарушение — красный. Значения состояний не выдумываем. */
.rule-mark .m-zone { fill: rgba(0,229,255,.16); stroke: var(--sp-cyan); stroke-width: 1.1; stroke-linejoin: round; }
.rule-mark .m-zone--ignore { fill: rgba(255,90,78,.18); stroke: #FF7A6E; stroke-dasharray: 3 2; }
.rule-mark .m-line { stroke: #FF5A4E; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.rule-mark .m-box { stroke: #F5A524; stroke-width: 1.2; fill: none; }
.rule-mark .m-box--hit { stroke: #FF5A4E; }
.rule-mark .m-track { stroke: #F5A524; stroke-width: 1; fill: none; stroke-dasharray: 2.5 2; opacity: .85; }
.rule-mark .m-node { fill: #F5A524; }
.rule-mark .m-chip { fill: rgba(6,11,24,.78); stroke: rgba(255,255,255,.18); stroke-width: .5; }
.rule-mark .m-lab { fill: #EAF2FF; font-size: 4.4px; font-weight: 650; font-family: var(--v-f-ui); }
.rule-mark .m-lab--warn { fill: #FFC7C1; }
.rule-mark .m-num { fill: #EAF2FF; font-size: 5.4px; font-weight: 750; font-family: var(--v-f-display); }

@media (max-width: 1100px) { .rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px)  { .rules-grid { grid-template-columns: 1fr; } }

/* Чип «бета» рядом с заголовком раздела: аналитика продаётся, но замок
   открыт и цена объявлена наперёд — молчать об этом нельзя. */
.sec-head h2 .v-chip { vertical-align: middle; margin-left: 12px; transform: translateY(-3px); }


/* ═══════════════════════════════════════════════════════════════════════════
   СВЕТЛЫЙ СЛОЙ ВЛИТ ЗДЕСЬ 03.10.2026 — ТЁМНОЙ ТЕМЫ БОЛЬШЕ НЕТ.
   До этого дня витрина жила двумя файлами: `brand.css` (тёмный) и
   `brand-light.css` поверх него, где КАЖДОЕ правило было префиксовано
   `:root[data-theme="light"]`. Так сделали 23.09, чтобы сравнить оба варианта
   на одной сборке; 27.09 хозяин выбрал светлый — и тёмный слой стал мёртвым
   грузом. Замер 03.10: 28 правил в светлой теме не действовали ВОВСЕ, мёртвых
   объявлений 102 из 496. ТЗ §24 велит свести слои и запрещает заводить ещё
   один файл-перекрытие.
   ЧТО СДЕЛАНО: правила ниже — ТЕ ЖЕ, что лежали в `brand-light.css`, с них
   снят признак темы; единственная тёмная ветка
   (`:root:not([data-theme="light"]) .only-light`) выброшена. Текст и порядок
   сохранены построчно — приёмка слияния попиксельная
   (`cloud/tests/snapshot.py --sverka`), а не чтением.
   ПОЧЕМУ В КОНЕЦ ФАЙЛА, а не по месту: так сохраняется порядок каскада, в
   котором светлый слой побеждал. Вписывание по месту меняет и порядок, и
   специфичность разом, и расхождение потом не на что списать.
   ПОВТОРЫ ЗДЕСЬ ОСОЗНАННЫЕ И ВРЕМЕННЫЕ. Влитый слой намеренно перекрывает
   тёмные значения девяти правил выше; снятие мёртвых объявлений идёт не
   отдельной уборкой, а вместе с переходом на токены §19 ТЗ — те же правила
   там переписываются, и убирать их дважды значило бы делать работу дважды.
   csscheck: повтор осознан — .v-app .v-card .rule-card
   csscheck: повтор осознан — .v-btn--ghost .v-btn--primary .hero-bg .cta-band .p-num
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 2. Холст ──────────────────────────────────────────────────────────── */
.v-app {
  background:
    radial-gradient(1000px 560px at 84% -10%, rgba(36,85,230,.12), transparent 62%),
    radial-gradient(760px 480px at 2% 4%, rgba(0,180,216,.10), transparent 58%),
    var(--v-bg);
}
.v-ambient i { opacity: .22; }

/* ── 3. Шапка и подвал ─────────────────────────────────────────────────── */

/* ── 4. Карточки и кнопки ──────────────────────────────────────────────── */
.v-card,
.rule-card {
  background: #FFFFFF;
  border: 1px solid rgba(14,22,51,.1);
  box-shadow: 0 1px 2px rgba(20,35,80,.06), 0 10px 28px rgba(20,35,80,.07);
}
.v-card:hover,
.rule-card:hover {
  border-color: rgba(36,85,230,.28);
  box-shadow: 0 2px 4px rgba(20,35,80,.07), 0 16px 40px rgba(20,35,80,.12);
}
.v-btn--ghost {
  background: #FFFFFF; border-color: rgba(14,22,51,.16); color: var(--v-t1);
}
.v-btn--ghost:hover { background: #F3F6FD; border-color: rgba(14,22,51,.28); }
.v-btn--primary { box-shadow: 0 10px 24px rgba(36,85,230,.26); }

/* Рубрика над заголовком: бирюза на белом — только тёмного оттенка. */
.sec-head .kicker { color: #0079A8; }
.ib {
  background: var(--sp-grad-soft); border: 1px solid rgba(36,85,230,.18); color: #1B4ED0;
}

/* ── 5. Тёмные полосы внутри светлой страницы ──────────────────────────────
   Ловушка, на которой светлая тема ломается первой: в site.css текст тёмной
   полосы красится токеном `--v-glass-t1`, а в светлой теме этот токен стал
   ТЁМНЫМ. Без правил ниже заголовки на тёмной полосе исчезают. */
.band--dark { color: #F2F5FC; }
.band--dark h2,
.band--dark h3,
.band--dark b { color: #F5F8FF; }
.band--dark p,
.band--dark li,
.band--dark span { color: rgba(226,233,247,.74); }
.band--dark .sec-head .kicker { color: #6FD9FF; }
.band--dark .v-card {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.band--dark .ib {
  background: rgba(111,217,255,.14); border-color: rgba(111,217,255,.22); color: #9FE4FF;
}
.band--dark .v-btn--ghost {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #F2F5FC;
}

/* ── 6. Схемы ──────────────────────────────────────────────────────────────
   В brand.css рисунки перекрашены под тёмный холст безусловно. На светлой
   странице возвращаем им светлый набор — кроме тех, что стоят на тёмной
   полосе: там работают правила site.css. */
.art .a-box,
.art .a-frame { fill: var(--v-surface); stroke: var(--v-line); }
.art .a-server { fill: var(--v-tint-dim); stroke: var(--v-tint); }
.art .a-far { stroke: var(--v-line); }
.art .a-dot { fill: var(--v-surface-2); stroke: var(--v-line); }
.art .a-pupil { fill: var(--v-t2); }
.art .a-scr { fill: var(--v-surface-2); }
.art .a-t,
.art .a-ts,
.art .a-cap { fill: var(--v-t2); }
.art .a-th { fill: var(--v-t1); }
.art .a-tf { fill: var(--v-t3); }
.art .a-tf2 { fill: var(--v-t3); }
.art .a-line { color: rgba(14,22,51,.34) !important; }
.art .a-dash { color: rgba(14,22,51,.26) !important; }
.art .a-zone { fill: rgba(36,85,230,.12); stroke: var(--v-tint); }
/* на тёмной полосе — обратно светлый набор из site.css (он там и живёт) */

/* ── 7. Первый экран ───────────────────────────────────────────────────────
   Окно системы на светлой странице показывается в СВЕТЛОЙ теме продукта:
   тёмное окно на белом читается как чужая вставка. Вуаль поверх снимка тоже
   светлая — иначе левый край окна выглядит грязным пятном. */
/* Вуаль слабее, чем на тёмной теме: светлое окно и так не спорит с текстом,
   а сильная вуаль превращала его левый край в грязное пятно. */
/* Сова на светлом читается сильнее, чем на тёмном: гасим на четверть, иначе
   она перетягивает первый экран на себя. */

/* Сова на светлом. Она тёмная по паспорту бренда, поэтому под ней — мягкое
   голубое пятно: без него силуэт лежит на белом плашкой. */
.owl-side::before {
  background: radial-gradient(circle, rgba(36,85,230,.16), transparent 66%);
}
.strip .v-icon { color: #0E9F6E; }

/* ── 8. Завершающий призыв ─────────────────────────────────────────────────
   На светлой странице он остаётся тёмным: это единственный крупный контраст
   в конце, и он же держит сову. */
.cta-band {
  background:
    radial-gradient(620px 320px at 12% 0%, rgba(0,180,216,.16), transparent 62%),
    linear-gradient(135deg, #122048, #0A1026);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(20,35,80,.24);
}
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: rgba(226,233,247,.76); }
.cta-band .v-btn--ghost {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: #FFFFFF;
}

/* ── 9. Карточки правил ────────────────────────────────────────────────── */
.rule-shot img { filter: saturate(.95) contrast(.98) brightness(.95); }
.rule-card h3 { color: var(--v-t1); }

/* ── 10. Таблицы, вопросы, калькулятор ─────────────────────────────────── */
.tbl th { color: var(--v-t3); }
.p-num { color: var(--v-t1); }

/* ── 6а. Схемы на ТЁМНОЙ полосе внутри светлой страницы ────────────────────
   Ловушка, которую поймал первый же просмотр: правила раздела 6 сильнее по
   специфичности, чем `.band--dark .art` из site.css, и схема на тёмной полосе
   становилась тёмной по тёмному — коробки сливались, подписи исчезали.
   Здесь тот же набор возвращается обратно, но уже адресно. */
.band--dark .art .a-box,
.band--dark .art .a-frame { fill: rgba(255,255,255,.06); stroke: rgba(126,157,224,.3); }
.band--dark .art .a-server { fill: rgba(37,99,255,.22); stroke: #6FA8FF; }
.band--dark .art .a-far { stroke: rgba(126,157,224,.34); }
.band--dark .art .a-dot { fill: rgba(255,255,255,.12); stroke: rgba(126,157,224,.34); }
.band--dark .art .a-pupil { fill: rgba(200,225,255,.7); }
.band--dark .art .a-scr { fill: rgba(255,255,255,.14); }
.band--dark .art .a-t,
.band--dark .art .a-ts,
.band--dark .art .a-cap { fill: rgba(226,233,247,.74); }
.band--dark .art .a-th { fill: #F5F8FF; }
.band--dark .art .a-tf { fill: rgba(226,233,247,.6); }
.band--dark .art .a-tf2 { fill: rgba(226,233,247,.45); }
.band--dark .art .a-line { color: rgba(126,157,224,.45) !important; }
.band--dark .art .a-dash { color: rgba(126,157,224,.34) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ОБОЛОЧКА ВИТРИНЫ (§6 ТЗ, 03.10.2026). Шапка 64 px, четыре раздела, справа
   вход и основное действие; на узком экране — панель по кнопке.
   ПОЧЕМУ ПАНЕЛЬ ВООБЩЕ ПОЯВИЛАСЬ: мобильной навигации не было НИ ОДНОЙ
   (поиск `burger|menu-toggle|aria-expanded` по всем шаблонам, JS и CSS давал
   ноль), а ряд ссылок прятался только ниже 600 px — из-за чего при 768 px
   документ выходил 964 и вбок уезжали ВСЕ 24 страницы. Замер 03.10.
   ═══════════════════════════════════════════════════════════════════════ */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--v-glass); backdrop-filter: var(--v-glass-bright);
  border-bottom: 1px solid var(--v-line);
}
.top__in {
  max-width: var(--v-w-page); margin: 0 auto;
  padding: 0 var(--v-sp-5);
  height: var(--v-h-site); display: flex; align-items: center;
  gap: var(--v-sp-5);
}
.top__brand {
  display: inline-flex; align-items: center; gap: var(--v-sp-2);
  color: var(--v-t1); font-weight: 700; letter-spacing: .14em;
  font-size: 17px; text-decoration: none; white-space: nowrap;
}
.top__brand:hover { text-decoration: none; }
.top__nav {
  margin-left: auto; display: flex; align-items: center; gap: var(--v-sp-5);
}
.top__nav a {
  color: var(--v-t2); font-size: 15px; font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.top__nav a:hover { color: var(--v-t1); }
.top__nav .v-btn { color: inherit; }
.top__sep {
  width: 1px; height: 22px; background: var(--v-line); flex: none;
}
/* Кнопка меню: на широком экране её нет вовсе, но она остаётся в разметке —
   так состояние `aria-expanded` не приходится заводить скриптом. */
.top__burger {
  display: none; margin-left: auto;
  width: var(--v-touch); height: var(--v-touch);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; background: none; border: 0; cursor: pointer;
  border-radius: var(--v-r-control);
}
.top__burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--v-t1); transition: transform .16s, opacity .16s;
}
.top__burger:focus-visible { outline: 2px solid var(--v-tint); outline-offset: 2px; }

.notices { padding-top: var(--v-sp-4); }
.notices .v-banner + .v-banner { margin-top: var(--v-sp-2); }

@media (max-width: 880px) {
  .top__burger { display: flex; }
  .top__nav {
    position: absolute; left: 0; right: 0; top: var(--v-h-site);
    margin: 0; padding: var(--v-sp-4) var(--v-sp-5) var(--v-sp-5);
    flex-direction: column; align-items: stretch; gap: var(--v-sp-4);
    background: var(--v-glass-thick); backdrop-filter: var(--v-glass-bright);
    border-bottom: 1px solid var(--v-line);
    box-shadow: var(--v-shadow);
  }
  .top__nav:not(.is-open) { display: none; }
  .top__nav a { font-size: 17px; padding: var(--v-sp-2) 0; }
  .top__nav .v-btn { justify-content: center; padding: 12px 16px; }
  .top__sep { width: auto; height: 1px; }
  [aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  [aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── подвал: компактный, четыре колонки, на телефоне одна ──────────────── */
.foot {
  border-top: 1px solid var(--v-line); background: var(--v-surface-2);
  margin-top: var(--v-sp-9); padding: var(--v-sp-8) var(--v-sp-5) var(--v-sp-6);
}
.foot__in {
  max-width: var(--v-w-page); margin: 0 auto;
  display: grid; gap: var(--v-sp-6);
  grid-template-columns: 1.6fr repeat(4, 1fr);
}
.foot__brand p {
  margin: var(--v-sp-3) 0 0; color: var(--v-t2);
  font-size: var(--v-fs-small); max-width: 32ch;
}
.foot__col { display: flex; flex-direction: column; gap: var(--v-sp-2); }
.foot__col b {
  font-size: var(--v-fs-small); color: var(--v-t3); font-weight: 600;
  margin-bottom: var(--v-sp-1);
}
.foot__col a { color: var(--v-t2); font-size: 14.5px; text-decoration: none; }
.foot__col a:hover { color: var(--v-t1); text-decoration: underline; }
.foot__low {
  max-width: var(--v-w-page); margin: var(--v-sp-7) auto 0;
  color: var(--v-t3); font-size: var(--v-fs-small);
}
@media (max-width: 880px) {
  .foot__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot__in { grid-template-columns: 1fr; gap: var(--v-sp-5); }
}

/* ── холст и основная кнопка: спокойнее (§5.2) ─────────────────────────────
   §5.2 просит убрать повсеместные голубые заливки, светящиеся кнопки и
   градиентные заголовки. Холст был радиальным градиентом в три пятна, кнопка
   — градиентом со свечением на 34 px. Остаётся ровный фон и сплошной цвет
   действия; градиент живёт в знаке, как и сказано в ТЗ. */
.v-app { background: var(--v-bg); }
.v-ambient { display: none; }
.v-btn--primary {
  background: var(--v-tint); border-color: var(--v-tint); color: #fff;
  box-shadow: none; background-image: none;
}
.v-btn--primary:hover {
  background: var(--v-tint-dark); border-color: var(--v-tint-dark);
  box-shadow: none; filter: none;
}
.v-btn--ghost {
  background: var(--v-surface); border: 1px solid var(--v-line);
  color: var(--v-t1);
}
.v-btn--ghost:hover { background: var(--v-surface-2); border-color: #C9CDD6; }
.v-btn { border-radius: var(--v-r-control); font-weight: 600; }
.v-btn:focus-visible { outline: 2px solid var(--v-tint); outline-offset: 2px; }

/* ── первый экран (§8, блок 1) ─────────────────────────────────────────────
   Текст сверху, снимок ниже и крупно: §8 отдаёт продукту 55–65 % площади
   блока. Наложений нет — прежняя композиция ставила сову поверх снимка, и
   читался ни тот, ни другой (AUD-02). */
.hero { padding: var(--v-sp-9) 0 0; text-align: center; }
.hero__text { max-width: 900px; }
.hero h1 {
  font-size: var(--v-fs-hero); line-height: var(--v-lh-hero);
  letter-spacing: -.02em; margin: 0; color: var(--v-t1); font-weight: 700;
  text-wrap: balance;
}
.hero__sub {
  margin: var(--v-sp-5) auto 0; max-width: 60ch;
  font-size: 19px; line-height: 1.5; color: var(--v-t2);
}
.hero__act {
  margin: var(--v-sp-6) 0 0; display: flex; gap: var(--v-sp-3);
  justify-content: center; flex-wrap: wrap;
}
.hero__terms { margin: var(--v-sp-4) 0 0; color: var(--v-t3); font-size: var(--v-fs-small); }
.hero__shot { max-width: var(--v-w-demo); margin: var(--v-sp-8) auto 0; padding: 0 var(--v-sp-5); }
.hero__shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--v-r-panel); border: 1px solid var(--v-line);
  box-shadow: var(--v-shadow-lift);
}
.v-btn--lg { padding: 14px 24px; font-size: 16px; }

/* Надзаголовок и крупный вводный абзац — ими живут ещё пять страниц витрины
   (документация, загрузка, партнёрам, тарифы, индивидуальное решение). Они
   переделываются на этапе C; пока правила должны существовать, иначе эти
   страницы останутся без оформления. */
.eyebrow {
  display: inline-block; margin: 0 0 var(--v-sp-3);
  font-size: var(--v-fs-small); font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v-t3);
}
.big { font-size: 19px; line-height: 1.5; color: var(--v-t2); max-width: 62ch; }

@media (max-width: 700px) {
  .hero { padding-top: var(--v-sp-7); }
  .hero__sub, .big { font-size: 17px; }
  .hero__shot { margin-top: var(--v-sp-6); padding: 0 var(--v-sp-4); }
}

/* ── три задачи на главной (§8, блок 2) ────────────────────────────────── */
.tasks {
  display: grid; gap: var(--v-sp-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task__shot {
  border-radius: var(--v-r-card); overflow: hidden;
  border: 1px solid var(--v-line); background: var(--v-surface-2);
  aspect-ratio: 16 / 10;
}
.task__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.task h3 {
  margin: var(--v-sp-4) 0 var(--v-sp-2); font-size: var(--v-fs-h3);
  color: var(--v-t1);
}
.task > p { margin: 0; color: var(--v-t2); }
.task__list { list-style: none; margin: var(--v-sp-4) 0 0; padding: 0; }
.task__list li {
  display: flex; gap: var(--v-sp-2); align-items: flex-start;
  color: var(--v-t2); font-size: var(--v-fs-small); margin-top: var(--v-sp-2);
}
.task__list svg { flex: none; width: 16px; height: 16px; color: var(--v-ok); }
.band__more {
  margin: var(--v-sp-7) 0 0; display: flex; gap: var(--v-sp-3); flex-wrap: wrap;
}
@media (max-width: 900px) { .tasks { grid-template-columns: 1fr; } }

/* ── страница продукта: шапка и оглавление ─────────────────────────────── */
.hero--page { padding-bottom: var(--v-sp-7); }
.hero--page h1 { font-size: var(--v-fs-h2); }
.page-toc {
  margin: var(--v-sp-6) 0 0; display: flex; gap: var(--v-sp-3);
  justify-content: center; flex-wrap: wrap;
}
.page-toc a {
  color: var(--v-t2); font-size: 14.5px; text-decoration: none;
  padding: 6px 12px; border: 1px solid var(--v-line);
  border-radius: var(--v-r-control); background: var(--v-surface);
}
.page-toc a:hover { color: var(--v-t1); border-color: #C9CDD6; }
.steps { margin: 0; padding-left: 1.2em; color: var(--v-t2); }
.steps li { margin-bottom: var(--v-sp-3); }
.steps b { color: var(--v-t1); }
/* Якоря не должны прятаться под липкой шапкой (§21). */
[id] { scroll-margin-top: calc(var(--v-h-site) + var(--v-sp-4)); }

/* ═══════════════════════════════════════════════════════════════════════════
   РАБОЧАЯ ОБОЛОЧКА: кабинет и панель (§6, §19, §21 ТЗ).
   Боковая навигация остаётся на месте внутри сервера (AUD-07); рекламной
   шапки и подвала здесь нет (AUD-06). На узком экране навигация уезжает в
   выдвижную панель — состояние держит скрытый флажок, без скрипта: так она
   работает и до загрузки JS, и при его отказе.
   ═══════════════════════════════════════════════════════════════════════ */
.app {
  min-height: 100vh; background: var(--v-bg-work);
  display: grid; grid-template-columns: var(--v-w-side) minmax(0, 1fr);
}
.app__side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: var(--v-sp-2);
  padding: var(--v-sp-5) var(--v-sp-3);
  background: var(--v-surface); border-right: 1px solid var(--v-line);
}
.app__logo {
  display: flex; align-items: center; gap: var(--v-sp-2);
  padding: 0 var(--v-sp-3) var(--v-sp-5);
  color: var(--v-t1); font-weight: 700; letter-spacing: .12em; font-size: 15px;
  text-decoration: none; flex-wrap: wrap;
}
.app__tag {
  flex-basis: 100%; font-size: 11.5px; letter-spacing: .06em;
  color: var(--v-tint); font-weight: 650; text-transform: uppercase;
}
.app__nav { display: flex; flex-direction: column; gap: 2px; }
.app__nav--low { margin-top: auto; padding-top: var(--v-sp-4);
                 border-top: 1px solid var(--v-sep); }
.app__nav a {
  display: flex; align-items: center; gap: var(--v-sp-3);
  min-height: var(--v-touch); padding: 0 var(--v-sp-3);
  border-radius: var(--v-r-control); color: var(--v-t2);
  font-size: var(--v-fs-work); text-decoration: none;
}
.app__nav a:hover { background: var(--v-surface-2); color: var(--v-t1); }
.app__nav a.on { background: var(--v-tint-dim); color: var(--v-tint); font-weight: 600; }
.app__nav svg { width: 18px; height: 18px; flex: none; }
.app__main { display: flex; flex-direction: column; min-width: 0; }
.app__top {
  position: sticky; top: 0; z-index: 20;
  height: var(--v-h-top); display: flex; align-items: center;
  gap: var(--v-sp-3); padding: 0 var(--v-pad-work);
  background: var(--v-glass); backdrop-filter: var(--v-glass-bright);
  border-bottom: 1px solid var(--v-line);
}
.app__who { margin-left: auto; color: var(--v-t3); font-size: var(--v-fs-small); }
.crumbs { display: flex; gap: var(--v-sp-2); align-items: center;
          color: var(--v-t3); font-size: var(--v-fs-small); min-width: 0; }
.crumbs a { color: var(--v-t2); text-decoration: none; }
.crumbs a:hover { color: var(--v-t1); text-decoration: underline; }
.crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__body { padding: var(--v-sp-6) var(--v-pad-work) var(--v-sp-9);
             max-width: 1080px; width: 100%; }
.app__body > .v-banner { margin-bottom: var(--v-sp-4); }
.app__side-btn, .app__veil, #side-open { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side {
    position: fixed; z-index: 60; left: 0; top: 0; width: 264px;
    transform: translateX(-100%); transition: transform .18s;
    box-shadow: var(--v-shadow-lift);
  }
  #side-open:checked ~ .app__side { transform: none; }
  #side-open:checked ~ .app__veil {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(16,24,40,.38);
  }
  .app__side-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: var(--v-touch); height: var(--v-touch); margin-left: -8px;
    cursor: pointer; border-radius: var(--v-r-control);
  }
  .app__side-btn span { display: block; width: 18px; height: 2px;
                        border-radius: 2px; background: var(--v-t1); }
  .app__body { padding: var(--v-sp-5) var(--v-sp-4) var(--v-sp-8); }
  .app__top { padding: 0 var(--v-sp-4); }
}

/* ── рабочая страница: заголовок, список серверов (§12) ────────────────── */
.pg-head {
  display: flex; gap: var(--v-sp-5); align-items: flex-start;
  margin-bottom: var(--v-sp-6);
}
.pg-head h1 { margin: 0; font-size: var(--v-fs-work-h1); color: var(--v-t1); }
.pg-sub { margin: var(--v-sp-2) 0 0; color: var(--v-t2);
          font-size: var(--v-fs-work); max-width: 56ch; }
.pg-head > details, .pg-head > .v-btn { margin-left: auto; flex: none; }
/* Форма внутри баннера переносится, а не выталкивает кнопку за край.
   Замер 03.10: на пустом кабинете при 390 px документ выходил 507 —
   виновата была ровно эта строка (`display: inline` не даёт переноса, и
   кнопка уезжала за край). */
.inline { display: inline-block; margin-top: var(--v-sp-2); }
.v-banner { display: block; }
.v-banner .v-btn { white-space: normal; }

/* Форма добавления раскрывается по кнопке: сервер заводят раз в жизни
   объекта, а форма занимала нижнюю половину экрана постоянно (§12). */
.add { position: relative; }
.add > summary { list-style: none; cursor: pointer; }
.add > summary::-webkit-details-marker { display: none; }
.add__form {
  position: absolute; right: 0; top: calc(100% + var(--v-sp-2)); z-index: 30;
  width: min(380px, calc(100vw - 2 * var(--v-sp-4)));
  padding: var(--v-sp-5); background: var(--v-surface);
  border: 1px solid var(--v-line); border-radius: var(--v-r-card);
  box-shadow: var(--v-shadow-lift);
}
.add__note { margin: var(--v-sp-2) 0 var(--v-sp-4);
             color: var(--v-t3); font-size: var(--v-fs-small); }

.srv-list { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: var(--v-sp-3); }
.srv {
  display: grid; gap: var(--v-sp-3) var(--v-sp-5); align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--v-sp-5); background: var(--v-surface);
  border: 1px solid var(--v-line); border-radius: var(--v-r-card);
}
.srv__name { display: flex; align-items: center; gap: var(--v-sp-3);
             flex-wrap: wrap; min-width: 0; }
.srv__name a { color: var(--v-t1); font-weight: 600; font-size: 17px;
               text-decoration: none; }
.srv__name a:hover { text-decoration: underline; }
.srv__go { grid-row: 1; grid-column: 2; }
.srv__facts {
  grid-column: 1 / -1; margin: 0; display: grid; gap: var(--v-sp-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.srv__facts dt { color: var(--v-t3); font-size: 12.5px; }
.srv__facts dd { margin: 2px 0 0; color: var(--v-t1);
                 font-size: var(--v-fs-work); }
@media (max-width: 760px) {
  .pg-head { flex-direction: column; }
  .pg-head > details { margin-left: 0; }
  .add__form { left: 0; right: auto; }
  .srv__facts { grid-template-columns: 1fr 1fr; }
}

/* Чип состояния — обычным шрифтом. Пакет рисует его моноширинным, а §19
   оставляет моноширинный только командам, кодам и техническим
   идентификаторам: статус подписки ни то, ни другое, и моноширинный делает
   его похожим на вывод программы. */
.v-chip { font-family: var(--v-f-ui); font-size: 12.5px; letter-spacing: 0;
          border-radius: var(--v-r-control); }

/* ── поиск и таблицы в панели (§17, §20) ───────────────────────────────── */
.find { margin-bottom: var(--v-sp-5); }
.find__row { display: flex; gap: var(--v-sp-2); flex-wrap: wrap;
             margin-top: var(--v-sp-2); }
.find__row .v-input { max-width: 360px; flex: 1 1 220px; }
.find__count { margin: var(--v-sp-3) 0 0; color: var(--v-t3);
               font-size: var(--v-fs-small); }
.tbl-wrap { overflow: hidden; }
.v-table th, .v-table td { font-size: var(--v-fs-work); }
/* §20: числа вправо, описания влево. Табличные цифры — чтобы столбец не
   «дышал» при разной ширине знаков. */
.v-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-main { color: var(--v-t1); font-weight: 600; text-decoration: none; }
.tbl-main:hover { text-decoration: underline; }
.tbl-sub { display: block; color: var(--v-t3); font-size: 12.5px;
           margin-top: 2px; }
.tbl-note { margin: var(--v-sp-4) 0 0; color: var(--v-t3);
            font-size: var(--v-fs-small); max-width: 62ch; }

/* ── таблицы на узком экране ────────────────────────────────────────────
   Пакет складывает `v-table--stack` в карточки только ниже 640 px. Замер
   03.10 показал, что этого мало: при 768 px карточка аккаунта давала
   документ 1038, промокоды 791 — то есть страница целиком уезжала вбок из-за
   таблицы, а §20 ТЗ это прямо запрещает («никакого общего горизонтального
   скролла страницы из-за таблицы»). Планшет книжно — ходовая ширина, и там
   рабочая область ещё у́же из-за боковой навигации.
   Порог поднят до 900 px, то есть ровно до той ширины, на которой навигация
   уезжает в выдвижную панель: ниже неё рабочая область узкая всегда.
   Подпись колонки — обычным шрифтом (§19 оставляет моноширинный командам и
   кодам), и достаточного размера, чтобы её можно было прочесть. */
@media (max-width: 900px) {
  .v-table--stack thead { display: none; }
  .v-table--stack tbody tr {
    display: block; padding: var(--v-sp-3) 0;
    border-bottom: 1px solid var(--v-sep);
  }
  .v-table--stack tbody tr:last-child { border-bottom: 0; }
  .v-table--stack td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--v-sp-3); border: 0; padding: var(--v-sp-1) var(--v-sp-4);
    text-align: right;
  }
  .v-table--stack td::before {
    content: attr(data-label);
    font-family: var(--v-f-ui); font-size: 12.5px; letter-spacing: 0;
    text-transform: none; color: var(--v-t3); text-align: left;
    flex: none;
  }
  .v-table .num { text-align: right; }
}

/* ── тарифы: итог закреплён, полный прайс под раскрытием (§10) ──────────── */
/* §10: «слева параметры, справа ЗАКРЕПЛЁННЫЙ итог». Без закрепления сумма
   уезжает вверх, как только человек доходит до нижних блоков, — и он
   отмечает галки, не видя, что получается. */
.calc .sum {
  position: sticky; top: calc(var(--v-h-site) + var(--v-sp-4));
  align-self: start;
}
/* AUD-14: полный прайс дублировал калькулятор. Под раскрытием он остаётся
   доступен, но не занимает пол-страницы второй раз. */
.price-all > summary {
  list-style: none; cursor: pointer; display: block;
  padding: var(--v-sp-4) var(--v-sp-5); border: 1px solid var(--v-line);
  border-radius: var(--v-r-card); background: var(--v-surface);
}
.price-all > summary::-webkit-details-marker { display: none; }
.price-all > summary h2 { margin: 0; font-size: var(--v-fs-h3); display: inline; }
.price-all > summary h2::after { content: " ▾"; color: var(--v-t3); }
.price-all[open] > summary h2::after { content: " ▴"; }
.price-all > summary span { display: block; margin-top: var(--v-sp-2);
                            color: var(--v-t2); font-size: var(--v-fs-small); }
.price-all[open] > summary { border-radius: var(--v-r-card) var(--v-r-card) 0 0;
                             border-bottom: 0; }
.price-all > .v-card { border-radius: 0 0 var(--v-r-card) var(--v-r-card); }
.tbl td.num { font-family: var(--v-f-ui); font-variant-numeric: tabular-nums; }
.tbl .unit { font-family: var(--v-f-ui); }

@media (max-width: 900px) {
  /* §10: на телефоне итог — компактная нижняя панель, и она не закрывает
     поля и согласия. `safe-area` — для экранов с вырезом. */
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc .sum {
    position: sticky; bottom: 0; top: auto; z-index: 30;
    margin: 0 calc(-1 * var(--v-sp-5));
    padding-bottom: calc(var(--v-sp-4) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--v-r-card) var(--v-r-card) 0 0;
    box-shadow: 0 -6px 24px rgba(16,24,40,.10);
  }
}

/* ── авторизация (§11): одна задача на экране ───────────────────────────── */
.auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--v-sp-4);
  padding: var(--v-sp-7) var(--v-sp-4);
}
.auth__mark {
  display: inline-flex; align-items: center; gap: var(--v-sp-2);
  color: var(--v-t1); font-weight: 700; letter-spacing: .14em; font-size: 18px;
  text-decoration: none;
}
.auth h1 { margin: 0; font-size: 26px; color: var(--v-t1); text-align: center; }
.auth__box {
  width: 100%; max-width: var(--v-w-form);
  padding: var(--v-sp-6); background: var(--v-surface);
  border: 1px solid var(--v-line); border-radius: var(--v-r-card);
  box-shadow: var(--v-shadow);
}
.auth__box .v-banner { margin-bottom: var(--v-sp-4); }
.auth__lead { margin: 0; max-width: var(--v-w-form); color: var(--v-t2);
              text-align: center; font-size: var(--v-fs-work); }
.auth__alt { margin: 0; color: var(--v-t2); font-size: var(--v-fs-work); }
.auth__legal { display: flex; gap: var(--v-sp-4); flex-wrap: wrap;
               justify-content: center; margin-top: var(--v-sp-5); }
.auth__legal a { color: var(--v-t3); font-size: var(--v-fs-small);
                 text-decoration: none; }
.auth__legal a:hover { color: var(--v-t2); text-decoration: underline; }
/* Поле «показать пароль»: §11 просит показ пароля. Делаем галкой, а не
   кнопкой с глазом: галка читается читалкой и работает без скрипта. */
.pw-show { display: flex; align-items: center; gap: var(--v-sp-2);
           margin-top: var(--v-sp-2); color: var(--v-t2);
           font-size: var(--v-fs-small); cursor: pointer; }
.auth__box .v-btn--primary { width: 100%; justify-content: center; }
.auth__act { margin: var(--v-sp-5) 0 0; }
.auth__small { margin: var(--v-sp-3) 0 0; text-align: center;
               font-size: var(--v-fs-small); }

/* ── команды: компактный блок с кнопкой копирования (§11, §20) ─────────── */
.code { position: relative; font-family: var(--v-f-mono);
        background: var(--v-surface-2); border: 1px solid var(--v-line);
        color: var(--v-t1); }
.code__copy {
  position: absolute; right: var(--v-sp-2); top: var(--v-sp-2);
  padding: 6px 10px; font-size: 12.5px; font-family: var(--v-f-ui);
  color: var(--v-t2); background: var(--v-surface);
  border: 1px solid var(--v-line); border-radius: var(--v-r-control);
  cursor: pointer;
}
.code__copy:hover { color: var(--v-t1); border-color: #C9CDD6; }
.code__copy:focus-visible { outline: 2px solid var(--v-tint); outline-offset: 2px; }
.more > summary { cursor: pointer; color: var(--v-tint);
                  font-size: var(--v-fs-work); }
/* Узкая колонка для страниц с одним решением (отмена подписки): §16 просит
   формы не шире 600–680 px — длинная строка в такой странице читается хуже. */
.narrow-page { max-width: 640px; }