/* КАРКАС САЙТА: токены, шрифты, шапка, подвал, кнопки, cookie-плашка, чат.

   Подключается на ВСЕХ страницах первым, до стилей страницы. Раньше эти правила
   жили только в site.css, а /cases, /about, /privacy и /demo его не подключают —
   у них свои .sec и .wrap. Поэтому там cookie-плашка и кнопка чата выходили
   голыми браузерными кнопками во всю ширину, кнопок на сайте было шесть видов,
   а подвалов — пять.

   Правило файла: только каркас и общие компоненты. Ни одного правила на голый
   тег (body, p, ul, h2) — страницы со своим шаблоном не должны поменяться в
   контенте. Всё, что ставится внутрь чужой страницы (шапка, подвал), прижато
   к своему классу и задаёт цвет, поля и шрифт явно: на /privacy глобальные
   p, li и a красят текст, и подвал не должен это наследовать. */

/* Шрифты (12.11.2026): Onest — заголовки, кнопки и крупные цифры (800/900,
   раньше Montserrat) и текст (400/600/700); JetBrains Mono 600 — метки
   капсом. Тем же Onest Bold набран знак и WEB IT
   (дизайн-2/логотип/ФИНАЛ-Onest). Файлы — своё
   подмножество (scripts/fonts.mjs): латиница, кириллица, пунктуация, № и ₽,
   стрелки, ≈ ≤ ≥, ✓ ✕ — всё рисует вшитый шрифт, а не системный. 800 и 900
   выведены из вариативного Onest[wght].ttf той же версии 2.001, что
   400/600/700 (ширины знаков у 700 совпадают до единицы). Имена файлов
   новые: /fonts кэшируется на год без метки версии. Montserrat
   (montserrat-*-cyrl) больше не подключается; старые inter-800, manrope-* и
   jetbrains-mono-400/700 остались только архиву (/styles, /v/*).
   Моно — одно начертание 600 на любой вес (font-weight:100 900): метка и
   цифра в таблице набраны одним весом, и браузер не дорисовывает жирность. */
@font-face{font-family:'Onest';src:url('/fonts/onest-400-cyrl.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
@font-face{font-family:'Onest';src:url('/fonts/onest-600-cyrl.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
@font-face{font-family:'Onest';src:url('/fonts/onest-700-cyrl.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
@font-face{font-family:'Onest';src:url('/fonts/onest-800-cyrl.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
@font-face{font-family:'Onest';src:url('/fonts/onest-900-cyrl.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-600-cyrl.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+20AC,U+20BD,U+2116,U+2122,U+2212,U+2215,U+2190-21FF,U+2248,U+2260,U+2264-2265,U+2713,U+2715,U+25A0-25FF}
/* Запасные начертания на время загрузки (риск R16). Пока Onest не пришёл,
   текст рисует системный Arial, подогнанный по ширине (size-adjust по
   среднему русскому тексту страниц) и по высоте строки: при подмене шрифта
   кнопка и ссылка рядом не переезжают на вторую строку. Без них текст
   Onest 600 на миг рисовал JetBrains Mono (второй в стеке), и строка кнопок
   первого экрана услуг прыгала (CLS 0,13–0,29). unicode-range — ровно знаки
   самого шрифта: когда шрифт пришёл, каждый знак рисует тот же шрифт, что и
   без запасных (стрелки, ≈ и ✓ по-прежнему Onest). 800 и 900 (заголовки и
   цифры, с 12.11 тоже Onest) — Arial Bold 101,5 и 102,7 %; высоты строки —
   по hhea Onest (970 / 305 на 1000), делённым на size-adjust. */
@font-face{font-family:'Onest Fallback';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:103.5%;ascent-override:93.7%;descent-override:29.5%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5,U+00A7-00AB,U+00AE-00B4,U+00B6-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0401-040C,U+040E-044F,U+0451-045C,U+045E-045F,U+0490-0491,U+04B0-04B1,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F-2030,U+2039-203A,U+2044,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2212,U+2248,U+2260,U+2264-2265,U+2713}
@font-face{font-family:'Onest Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:99.2%;ascent-override:97.8%;descent-override:30.7%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5,U+00A7-00AB,U+00AE-00B4,U+00B6-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0401-040C,U+040E-044F,U+0451-045C,U+045E-045F,U+0490-0491,U+04B0-04B1,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F-2030,U+2039-203A,U+2044,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2212,U+2248,U+2260,U+2264-2265,U+2713}
@font-face{font-family:'Onest Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:100.4%;ascent-override:96.6%;descent-override:30.4%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5,U+00A7-00AB,U+00AE-00B4,U+00B6-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0401-040C,U+040E-044F,U+0451-045C,U+045E-045F,U+0490-0491,U+04B0-04B1,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F-2030,U+2039-203A,U+2044,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2212,U+2248,U+2260,U+2264-2265,U+2713}
@font-face{font-family:'Onest Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:101.5%;ascent-override:95.6%;descent-override:30.0%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5,U+00A7-00AB,U+00AE-00B4,U+00B6-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0401-040C,U+040E-044F,U+0451-045C,U+045E-045F,U+0490-0491,U+04B0-04B1,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F-2030,U+2039-203A,U+2044,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2212,U+2248,U+2260,U+2264-2265,U+2713}
@font-face{font-family:'Onest Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:900;size-adjust:102.7%;ascent-override:94.4%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5,U+00A7-00AB,U+00AE-00B4,U+00B6-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0401-040C,U+040E-044F,U+0451-045C,U+045E-045F,U+0490-0491,U+04B0-04B1,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F-2030,U+2039-203A,U+2044,U+20AC,U+20BD,U+2116,U+2122,U+2190-2193,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2212,U+2248,U+2260,U+2264-2265,U+2713}

:root{
  /* Палитра BE-1 «ОТК на светлом» (утверждена 12.11.2026), значения — из
     брендбука (брендбук/assets/tokens.css). Жёлтый — только заливкой или на
     чёрном: текстом на светлом никогда. Красного и зелёного в стиле нет.
     --paper — фон страниц; --white — карточки и поля; --stone — вторая светлая
     секция; --ink — текст и рамки документов; --black — чёрные секции и полосы;
     --plate и --plate-2 — плита и фишка на чёрном. */
  --paper:#FAFAF7; --white:#FFFFFF; --stone:#F0F0EE;
  --ink:#121212; --black:#0E0E0D; --plate:#1A1A18; --plate-2:#2B2B27;
  --y:#FFD23F; --y-hover:#FFC814; --y-text:#2B2A24;
  /* --muted — вторичный текст на светлом: 8,1:1 на бумаге, 7,5:1 на камне; на
     жёлтом 5,9:1 — там только от 17 px, мелкое на жёлтом — --y-text.
     --muted-d — вторичный на чёрном, --on-black (он же --on-dark) — основной. */
  --muted:#4D4D48; --muted-d:#B9B9B0;
  --on-black:#F3F3EE; --on-dark:var(--on-black);
  --line:#E2E1D9; --line-d:#2F2F2B;
  /* Форма BE-1 (брендбук, tokens.css): наклон знака-маркера −14°, плиты и рамки
     фото −10°, штамп −6°, «оценка» −3°, документ 1,4°. Радиусы: поле и кнопка
     10, вложенный блок 14, карточка 20, плита журнала 22 (как в эталоне; 28
     брендбука — для слайдов). Тени мягкие: жёсткие офсетные тени «бланка»
     (--sh-1/2/3) уходят вместе с рамками 2 px, рамка чернилами остаётся только
     у документов — форма, контакт, досье. */
  --sk:-14deg; --sk-back:14deg; --sk-plate:-10deg; --sk-plate-back:10deg;
  --rot-stamp:-6deg; --rot-est:-3deg; --rot-doc:1.4deg;
  --r-xs:6px; --r-btn:10px; --r-md:14px; --r-card:20px; --r-plate:22px; --r-doc:24px;
  --sh-card:0 0 0 1px rgba(18,18,18,.07),0 1px 2px rgba(18,18,18,.05),0 28px 56px -30px rgba(18,18,18,.28);
  --sh-card-ink:0 28px 56px -30px rgba(0,0,0,.6);
  --sh-lift:0 0 0 1px rgba(18,18,18,.08),0 40px 70px -36px rgba(18,18,18,.4);
  --sh-btn:0 14px 28px -14px rgba(18,18,18,.22);
  --sh-btn-up:0 20px 34px -14px rgba(18,18,18,.28);
  --sh-stamp:0 10px 18px -8px rgba(0,0,0,.35);
  /* документ на жёлтом финале: тень с тёплым подтоном, иначе она серая на жёлтом */
  --sh-doc:0 44px 80px -40px rgba(74,56,0,.55);
  --stamp-ring:inset 0 0 0 3px var(--ink),inset 0 0 0 6px var(--y),inset 0 0 0 7.5px var(--ink);
  --tape:repeating-linear-gradient(-45deg,var(--y) 0 16px,var(--black) 16px 32px);
  /* Значки эталона (стрелка, галка, «внимание», Telegram, телефон, почта, уголок,
     плюс) — маской: цвет у значка от background-color, разметка не меняется.
     Текстовые стрелки «→» в ссылках остаются текстом (решение D13). */
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 19.5h18L12 4z'/%3E%3Cpath d='M12 10v4.2M12 16.8v.2'/%3E%3C/svg%3E");
  --i-tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 4.5 2.8 11.4c-.9.3-.9 1.5 0 1.8l4.7 1.5 1.8 5.4c.3.8 1.3 1 1.8.3l2.4-2.9 4.7 3.5c.7.5 1.7.1 1.9-.7l3-14.4c.2-.9-.7-1.7-1.6-1.4z'/%3E%3C/svg%3E");
  --i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3.2l1.8 4.6-2.3 1.5a11.5 11.5 0 0 0 6.2 6.2l1.5-2.3 4.6 1.8v3.2a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 3.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.8 6.5 8.2 6 8.2-6'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  /* --line-2 — линия плотнее --line: разделители строк, пунктир, волна плеера. */
  --line-2:#CFCEC6;
  /* «Готово» — чернилами: зелёного в стиле нет («внимание» — жёлтая заливка,
     в правилах напрямую --y). */
  --ok:var(--ink);
  /* Стеки — как в брендбуке (--f-d, --f-b, --f-m): знак, которого нет в
     первом шрифте (стрелка, ≈, ✓), рисует следующий вшитый, а не системный.
     --grot — заголовки, кнопки, цифры (800/900), --font — текст (400–700):
     с 12.11.2026 оба Onest, до того --grot был Montserrat; --num — JetBrains
     Mono (метки). Имена токенов прежние: на них 300+ ссылок. */
  --font:'Onest','Onest Fallback','JetBrains Mono','Helvetica Neue',Arial,sans-serif;
  --grot:'Onest','Onest Fallback','JetBrains Mono','Arial Black',Arial,sans-serif;
  /* Вес H1 и H2 (решение D1: 800, как в эталоне; 900 — у крупных цифр, штампов,
     плашек). Трекинг заголовков и крупных цифр — один источник правды: эти
     значения читают scripts/render-pages.mjs и scripts/nbsp.mjs (scripts/glue.mjs,
     cssEm), когда считают кегль по ширине знаков, и падают, если не нашли.
     --h1-ls-m — H1 на телефоне (до 640px), --num-ws — пробел внутри числа,
     --numw-ls — слово вместо числа («в контуре», «NDA») в ячейке цифры.
     Значения под Onest (12.11.2026): он уже Montserrat (строчные 800 — на 11 %,
     цифры 900 — на 7 %) и плотнее в межбуквенных, поэтому трекинг мягче, чем
     был у Montserrat (−.03 / −.025 / −.028 / −.045 / −.025), подобран по кадрам. */
  --fw-h:800; --h1-ls:-.02em; --h1-ls-m:-.015em; --h2-ls:-.018em;
  --num-ls:-.03em; --num-ws:-.04em; --numw-ls:-.015em;
  /* Жёсткая офсетная тень «бланка»: три ступени. В BE-1 карточки на мягкой
     --sh-card; ступени остались в двух правилах site.css (нажатие .pf2-i,
     кнопка демо кейса .cs-demo-go). */
  --sh-1:3px 3px 0; --sh-2:6px 6px 0; --sh-3:9px 9px 0;
  /* Движение: одна кривая прихода (быстрый удар, долгое оседание), одна ухода,
     три длительности — нажатие 120, смена состояния 200, черта итога 420. */
  --ease:cubic-bezier(.16,1,.3,1); --ease-exit:cubic-bezier(.4,0,1,1);
  --d-1:120ms; --d-2:200ms; --d-3:420ms;
  /* Сжатая шапка: насколько короче полоса и на сколько поднимается строка. */
  --hdr-cut:15px; --hdr-lift:7px;
  /* Мера строки: абзац не длиннее 62ch (≈66–72 знака), лид — 54ch. */
  --measure:62ch; --measure-lede:54ch; --measure-head:22em; --measure-min:36ch; --measure-wide:var(--measure);
  --hdr-h:67px; --anchor-pad:28px;
  --hdr-pin:67px;
  --num:'JetBrains Mono','Onest',ui-monospace,Menlo,monospace;
  /* Шкала кегля BE-1: телефон — база. Текст Onest 17 / 18 (от 641px) / 19 (от
     1024px), лид 17 / 18 / 20, подпись 16. Метка — JetBrains Mono 600 15 px
     капсом с разрядкой --ls-label (.1em, на телефоне .05em) на любой ширине:
     на телефоне текст не мельче 15 px (решение D4). --t-meta — прежнее имя
     метки, на него 200+ ссылок. --t-btn — кегль кнопки (до перевода кнопок). */
  --t-label:15px; --ls-label:.1em; --t-meta:var(--t-label);
  --t-small:16px; --t-body:17px; --t-lede:17px; --t-btn:17px;
  --t-h4:18px; --t-h3:20px;
  /* H1 и H2 — шкала эталона BE-1: H2 30–54 px, H1 34–58 px; на телефоне
     (до 720px) H2 27–32, H1 29–33, уже 370px — 28. --t-fig — цифра средней
     величины (номер шага, «01» в ячейке): прежняя шкала H2, своя у цифр. */
  --t-h2:clamp(30px, 3.7vw, 54px);
  --t-h1:clamp(34px, 4vw, 58px);
  --t-fig:clamp(26px, calc(20px + 1.5vw), 40px);
  --t-num:clamp(44px, calc(30px + 3.6vw), 80px);
  --t-num-s:clamp(32px, calc(24px + 1.9vw), 48px);
  /* Ритм секций: три ступени (служебная / обычная / первый экран и форма).
     BE-1: обычная секция эталона — 120 px на компьютере и 80 на телефоне;
     у сайта вдвое больше секций, поэтому ступени чуть ниже эталона. */
  --sec-s:40px; --sec-m:64px; --sec-l:72px;
  --frame-w:1200px; --frame-pad:34px;
}
@media(max-width:1023px){ :root{ --frame-pad:18px } }
@media(max-width:375px){ :root{ --frame-pad:16px } }
@media(min-width:390px){ :root{ --sec-l:80px } }
@media(min-width:641px){ :root{ --sec-m:80px; --sec-l:96px } }
@media(min-width:641px){ :root{ --t-body:18px; --t-lede:18px; --t-h3:22px } }
@media(min-width:1024px){ :root{ --t-body:19px; --t-lede:20px; --t-btn:18px; --t-h4:20px; --t-h3:24px;
  --sec-s:64px; --sec-m:104px; --sec-l:112px } }
@media(min-width:1400px){ :root{ --sec-s:72px; --sec-m:120px; --sec-l:128px } }
@media(max-width:720px){ :root{ --t-h1:clamp(29px, 8.1vw, 33px); --t-h2:clamp(27px, 7.6vw, 32px) } }
@media(max-width:370px){ :root{ --t-h1:28px } }
@media(max-width:640px){
  :root{--hdr-cut:10px; --hdr-lift:5px; --ls-label:.05em}
}

/* ── Неразрывная группа ─────────────────────────────────────────── */
/* span.nw держит кусок одной строкой: телефон «674-98-89», диапазон «30–40»,
   «что-то», «ИИ-сотрудника» в заголовке. Её ставят render-pages и сборка
   (scripts/nbsp.mjs) — вместо невидимой связки U+2060, которая попадала в
   скопированный номер. Группа встаёт внутрь любого текста, поэтому своей рамки
   у неё нет (display:contents): текст остаётся частью соседнего — в кнопке-флексе
   «Разобрать задачу — 30–40 минут» не распадается на три элемента с зазором,
   в строке-сетке оглавления не уезжает в другую ячейку, а правила вида
   «.блок span» (блочность, поля, фон) к ней не применяются. Шрифт и цвет —
   родителя: от группы нужен только запрет переноса. */
.nw{white-space:nowrap}
span.nw{display:contents!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;word-spacing:inherit!important}
/* Длинная группа («GEO-оптимизированный», больше 16 знаков) в строку телефона
   целиком не входит — там перенос на дефисе разрешён. */
@media(max-width:640px){.nw-l{white-space:normal}}

/* ── Фокус и ссылка «к содержимому» ─────────────────────────────── */
/* Фокус обязан быть виден на любой странице. Секции с tabindex="-1" (цель
   ссылки «к содержимому») рамку не получают — это не элемент управления. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* На чёрном (подвал, чёрные секции, плашка cookie) рамка фокуса жёлтая. */
.ft :focus-visible,.sec.ink :focus-visible,.ckb :focus-visible{outline-color:var(--y)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-family:var(--num);font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* ── Подсказка в поле ───────────────────────────────────────────── */
/* Своего цвета у подсказки не было, браузер рисовал её серым #757575:
   на бумажном поле формы это 3,67:1, ниже AA, а в подсказке написан формат
   контакта. --ink-3 (= --muted) — 8,1:1 на бумаге и 8,5:1 в белом окне чата;
   вводимый текст (--ink) темнее и от подсказки отличается. Правило на тег, но только
   для подсказки: у страниц со своим цветом (витрины /v/) селектор с классом
   сильнее. */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}

/* ── Кнопки BE-1. Один компонент на весь сайт ───────────────────── */
/* Три вида, как в эталоне: главная .prim — жёлтая (btn-y), вторичная .btn —
   белая с рамкой чернилами (btn-line), при наведении жёлтая. Кнопка шапки и
   главная кнопка на жёлтом финале (#zayavka) — чёрная (btn-ink): жёлтая на
   жёлтом не читается. На чёрном (.btn.dark, .sec.ink, подвал, cookie) вторичная —
   контуром цвета текста на чёрном. Onest 800 строчными, радиус 10, рамка
   2 px, тень мягкая, при наведении кнопка приподнимается. Высота от 52 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--grot);font-weight:800;letter-spacing:-.005em;font-size:var(--t-btn);line-height:1.25;min-height:52px;padding:13px 24px;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--white);color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color var(--d-1) var(--ease),color var(--d-1) var(--ease),border-color var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--y);color:var(--ink)}}
.btn:active{background:var(--y-hover);color:var(--ink)}
.btn.prim{background:var(--y);border-color:var(--ink);color:var(--ink);box-shadow:var(--sh-btn)}
@media (hover:hover) and (pointer:fine){.btn.prim:hover{background:var(--y-hover);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-btn-up)}}
.btn.prim:active{background:var(--y-hover);color:var(--ink);transform:none;box-shadow:none}
/* На чёрном: вторичная — контур, главная — жёлтая с жёлтой рамкой. */
.btn.dark,.sec.ink .btn:not(.prim){background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){.btn.dark:hover,.sec.ink .btn:not(.prim):hover{background:var(--y);border-color:var(--y);color:var(--ink)}}
.btn.dark:active,.sec.ink .btn:not(.prim):active{background:var(--y-hover);border-color:var(--y-hover);color:var(--ink)}
.sec.ink .btn.prim{border-color:var(--y);box-shadow:none}
/* display у .btn перебивал бы атрибут hidden — скрытая кнопка обязана быть скрыта. */
.btn[hidden]{display:none}
.btn:disabled,.btn[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}
/* Кнопка в работе: видно, что отправка идёт, а не подвисла, — полоса
   бежит по низу кнопки; цвет кнопки полный, иначе «Отправляю…» бледнее фона. */
.btn.sending,.btn.sending:disabled{position:relative;overflow:hidden;opacity:1}
.btn.sending::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ink);
  transform-origin:left;animation:btnbar 1.1s var(--ease-exit) infinite}
@keyframes btnbar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ── Утилиты BE-1 ──────────────────────────────────────────────── */
/* Общие приёмы эталона для всех страниц, включая /cases, /about и /demo со
   своими стилями. Штамп ОТК — происхождение цифры («по расчёту заказчика»):
   тройная рамка, поворот −6°. «Оценка» (.est) — метка −3°, 15 px. .chk —
   жёлтый квадрат с галкой. .tape — сигнальная лента ОТК над жёлтым финалом.
   .be-card — белая карточка, .be-card.ink — чёрная, .be-plate — плита журнала. */
.stamp{display:inline-block;background:var(--y);color:var(--ink);padding:11px 16px 10px;text-align:center;font:900 15px/1.05 var(--grot);letter-spacing:.01em;text-transform:uppercase;box-shadow:var(--stamp-ring),var(--sh-stamp);transform:rotate(var(--rot-stamp))}
.stamp small{display:block;margin-bottom:5px;font:600 15px/1 var(--num);letter-spacing:.06em}
.est{display:inline-block;padding:6px 10px 5px;background:var(--y);color:var(--ink);font:900 15px/1 var(--grot);letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 0 0 2px var(--ink);transform:rotate(var(--rot-est))}
.chk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-xs);background:var(--y);color:var(--ink);flex:none}
.chk:empty::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.tape{height:20px;background:var(--tape);border-bottom:3px solid var(--black)}
.be-card{background:var(--white);color:var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.be-card.ink{background:var(--black);color:var(--on-dark);box-shadow:var(--sh-card-ink)}
.be-plate{background:var(--black);color:var(--on-dark);border-radius:var(--r-plate);overflow:hidden}
@media (prefers-reduced-motion:no-preference) and (min-width:721px){
  .hero .stamp{animation:slam .45s .5s cubic-bezier(.3,1.5,.5,1) backwards}
}
@keyframes slam{from{transform:rotate(-10deg) scale(1.15)}to{transform:rotate(var(--rot-stamp)) scale(1)}}
/* Пульс «в сети»: кольцо расходится от жёлтой точки — украшение уже видимого. */
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ── Шапка ──────────────────────────────────────────────────────── */
/* Держится в одну строку от 1100px: пункты не переносятся, отступы сжаты так,
   чтобы семь пунктов (два из них — группы со списком), логотип с подписью и
   кнопка встали в полосу 1132px.
   Уже 1100px — бургер. Все правила прижаты к .hdr: у витрин свои .logo и .nav. */
.hdr{position:sticky;top:0;z-index:50;padding-bottom:2px;isolation:isolate;
  /* Кегль и интерлиньяж заданы явно: на /cases, /privacy и /about у body свои,
     и шапка выходила на 66, 67 и 68px — при переходе между страницами прыгала. */
  font-family:var(--font);font-size:var(--t-body);line-height:1.6;text-align:left;letter-spacing:0}
/* Лист шапки и черта под ним — отдельные слои: при сжатии (ниже) они едут
   вверх transform'ом, а высота шапки в потоке не меняется — страница под ней
   не дёргается и прокрутка не пересчитывается. */
/* BE-1: лист полупрозрачный с размытием (эталон), под ним — тонкая линия
   --line вместо черты чернилами 2 px. Высота шапки прежняя (поле снизу 2 px
   осталось): на неё завязаны липкие оглавления и отступы якорей. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,250,247,.94);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);pointer-events:none}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none}
.hdr .hdr-in{max-width:var(--frame-w);margin:0 auto;padding:12px var(--frame-pad);display:flex;align-items:center;gap:18px}
/* Логотип на Onest, вариант Б (scripts/logo.mjs, решение 12.11.2026, вместо
   M3): знак — плашка с вырезанными OAI, у O трафаретные перемычки — и надпись
   WEB IT, оба в кривых. Пропорции logo.svg набора ФИНАЛ-Onest заданы
   множителями от высоты плашки --lg-h (h = 2H): знак 1,65625 × 1, зазор до W
   ,25 (H/2), надпись 2,5994 × ,5 (высота прописных H) по центру плашки — её
   низ на базовой линии OAI; вся строка 4,5057 h. Знак не растягивается:
   ширина и высота каждого рисунка заданы вместе. Плашка — цвет чернил (буквы
   прорезаны, под ними фон шапки). Полное имя «OAI WEB IT» остаётся текстом
   ссылки (b скрыт визуально), подпись «ИИ-сотрудники для бизнеса» стоит справа
   за чертой — не ближе охранного поля H (,5 h) от надписи.
   Шрифт, вес и разрядку логотип задаёт сам: у страниц бывают свои .logo
   (на /cases подпись от этого выходила жирной), и общий знак не должен их
   наследовать. Подвал (.ft .logo) прижат тем же правилом. */
.hdr .logo,.ft .logo{font-family:var(--font);font-weight:400;font-size:var(--t-body);letter-spacing:0}
.hdr .logo{--lg-h:36px;display:flex;align-items:center;text-decoration:none;white-space:nowrap;color:var(--ink)}
:is(.hdr,.ft) .logo .lg-mk,.ft-mark .lg-mk{flex:none;display:block;width:calc(var(--lg-h) * 1.65625);height:var(--lg-h);fill:currentColor}
:is(.hdr,.ft) .logo .lg-wm,.ft-mark .lg-wm{flex:none;display:block;width:calc(var(--lg-h) * 2.5994);height:calc(var(--lg-h) * .5);margin-left:calc(var(--lg-h) * .25);fill:currentColor}
:is(.hdr,.ft) .logo b{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hdr .logo small{display:block;max-width:9em;margin-left:calc(var(--lg-h) * .5);padding-left:12px;border-left:1px solid var(--line-2);
  font-family:var(--font);font-size:15px;font-weight:400;line-height:18px;letter-spacing:0;white-space:normal;color:var(--muted);text-transform:none}
.hdr .hnav{display:flex;gap:14px;margin-left:auto}
.hdr .hnav a{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);text-decoration:none;white-space:nowrap;padding:9px 0;transition:color var(--d-1),box-shadow var(--d-1)}
/* Наведение — подчёркивание 2 px жёлтым (эталон); «где я сейчас» — тем же
   подчёркиванием, но чернилами: жёлтая черта на светлом — украшение, а
   состояние должно читаться. */
.hdr .hnav > a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--y)}
.hdr .hnav > a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--ink)}
.hdr .hnav .nav-cta{display:none}
/* «Спросить Андреича» — вход в чат из меню телефона; на компьютере скрыт. */
.hdr .hnav .nav-chat{display:none;margin:0;padding:12px 0;border:0;background:none;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);text-align:left}
/* Группы меню — «Отрасли» и «Сайты и продвижение» (scripts/nav.mjs): подпись-
   кнопка тем же набором, что пункты, и список под ней. Список раскрывает nav.js
   классом open — наведением, нажатием и фокусом с клавиатуры; без скрипта (у
   шапки нет класса nav-js) — наведением и фокусом. Полоса над списком
   (::before) держит наведение, пока указатель идёт от подписи к ссылкам. */
.hdr .nav-g{position:relative;display:flex}
.hdr .nav-gb{display:inline-flex;align-items:center;gap:7px;margin:0;padding:9px 0;border:0;border-radius:0;background:none;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:600;line-height:inherit;letter-spacing:0;text-transform:none;
  color:var(--ink);white-space:nowrap;transition:color var(--d-1)}
.hdr .nav-gb::after{content:"";flex:none;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--d-1)}
.hdr .nav-gb:hover,.hdr .nav-g.open .nav-gb{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--y)}
.hdr .nav-g.open .nav-gb::after{transform:translateY(2px) rotate(-135deg)}
.hdr .nav-g.cur .nav-gb{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--ink)}
/* Список группы — белая карточка (радиус 14, мягкая тень), строки со
   скруглением, наведение — бумагой. */
.hdr .nav-sub{display:none;position:absolute;left:-16px;top:calc(100% + 10px);z-index:3;min-width:228px;padding:8px;
  background:var(--white);border:0;border-radius:var(--r-md);box-shadow:var(--sh-card)}
.hdr .nav-sub::before{content:"";position:absolute;left:-2px;right:-2px;bottom:100%;height:12px}
.hdr .nav-g.open .nav-sub{display:block}
.hdr:not(.nav-js) .nav-g:is(:hover,:focus-within) .nav-sub{display:block}
.hdr .nav-sub a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink)}
.hdr .nav-sub a:hover{background:var(--paper)}
.hdr .nav-sub a[aria-current=page]{box-shadow:inset 3px 0 0 var(--ink);background:var(--stone)}
/* Кнопка шапки — чёрная (btn-ink эталона): жёлтая в кадре одна — у действия
   на странице. При наведении текст жёлтый. Высота прежняя (42 px — по ней
   шапка 68 px). Класс .prim в разметке остаётся — по нему sync-nav.mjs
   находит кнопку. */
.hdr .btn,.hdr .btn.prim{min-height:0;padding:11px 14px;font-size:var(--t-small);line-height:1;background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:none;white-space:nowrap;flex:none}
@media (hover:hover) and (pointer:fine){.hdr .btn:hover,.hdr .btn.prim:hover{background:var(--ink);color:var(--y);transform:translateY(-1px);box-shadow:none}}
.hdr .btn.prim:active{background:var(--black);color:var(--y);transform:none;box-shadow:none}
/* Бургер — белый квадрат со скруглением 10 и рамкой 2 px (эталон). 44 px, а
   не 46 эталона: шапка на планшете 70 px задана им же. */
.hdr .burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;background:var(--white);
  border:2px solid var(--ink);border-radius:var(--r-btn);cursor:pointer;position:relative;flex:0 0 auto}
.hdr .burger span,.hdr .burger span::before,.hdr .burger span::after{position:absolute;left:11px;width:18px;height:2.5px;border-radius:2px;
  background:var(--ink);content:"";transition:transform var(--d-1) ease,opacity var(--d-1) ease}
.hdr .burger span{top:19px}
.hdr .burger span::before{top:-6px;left:0}
.hdr .burger span::after{top:6px;left:0}
@media (hover:hover) and (pointer:fine){
  .hdr .burger:hover{background:var(--y)}
}
.hdr.nav-open .burger span{background:transparent}
.hdr.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.hdr.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
/* С меню в строку (от 1100px) места под подпись нет: полоса 1132px занята
   до последнего пикселя. Подпись остаётся текстом ссылки, но не видна. */
@media(min-width:1100px){
  .hdr .logo small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Меню в строку на всех ширинах от 1100px — с зазором 11px, между лого,
   меню и кнопкой 15px: при 14 и 18 кнопка выходила за край полосы на 19px
   (до лого M3 — на 57px, и на 1200px страница ехала вбок). */
@media(min-width:1100px){
  .hdr .hdr-in{gap:15px}
  .hdr .hnav{gap:11px}
}
/* 1100–1199: рядом с меню встаёт только знак — надпись WEB IT не помещается. */
@media(min-width:1100px) and (max-width:1199px){
  .hdr .logo .lg-wm{display:none}
}
/* С 03.11 в меню восемь пунктов («Обо мне»), и в полосу 1132px строка не
   входит ни на одной ширине: кнопка уезжала за край на 43–48px. Поэтому от
   1100px (бургера там нет) «Как внедряем» стоит только в подвале; уже 1100px
   он в панели под бургером. «Обо мне» остаётся: человеку важнее, кто будет делать. */
@media(min-width:1100px){.hdr .hnav > a[href="/kak-rabotaem"]{display:none}}
/* До 980px навигация раньше просто исчезала. Теперь она уезжает под
   бургер и раскрывается панелью на всю ширину. */
@media(max-width:1099px){
  .hdr .burger{display:block;margin-left:0}
  .hdr .logo{margin-right:auto}
  .hdr{z-index:65}
  /* Открытое меню — над cookie-плашкой (70) и чатом (80): иначе плашка
     закрывала нижние пункты и строку «Разобрать задачу». Пока меню открыто,
     плашку и кнопку чата не показываем вовсе — они вернутся, когда меню закроют. */
  .hdr.nav-open{z-index:90}
  body:has(.hdr.nav-open) :is(.ckb,.oaichat){visibility:hidden}
  .hdr .hnav{display:none;opacity:0;transform:translateY(-6px);
    transition:opacity var(--d-1),transform var(--d-1),display var(--d-1) allow-discrete;
    position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 30px 40px -28px rgba(18,18,18,.35);z-index:70;margin:0;
    max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
  .hdr.nav-open .hnav{display:flex;opacity:1;transform:none}
  @starting-style{ .hdr.nav-open .hnav{opacity:0;transform:translateY(-6px)} }
  .hdr .hnav a{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:var(--t-small);
    letter-spacing:0;color:var(--ink);border-bottom:1px solid var(--line)}
  .hdr .hnav a::after{content:"\2192";color:var(--ink);font-family:var(--num)}
  .hdr .hnav a:last-child{border-bottom:none}
  .hdr .hnav a:active{background:var(--stone)}
  .hdr .hnav a[aria-current=page]{box-shadow:inset 4px 0 0 var(--ink);background:var(--stone)}
  /* В панели «где я» — черта слева, подчёркивание строки не нужно. */
  .hdr .hnav > a:is(:hover,[aria-current=page]),.hdr .nav-gb:hover,.hdr .nav-g:is(.open,.cur) .nav-gb{text-decoration:none}
  /* Кнопка-действие переезжает в меню последней строкой, чтобы на телефоне
     она не пропадала совсем. */
  .hdr .hnav .nav-cta{display:flex;background:var(--y);color:var(--ink);font-weight:800}
  .hdr .hnav .nav-cta::after{color:var(--ink)}
  .hdr .hnav .nav-chat{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 18px;font-size:var(--t-small);color:var(--ink);border-bottom:1px solid var(--line);text-align:left}
  .hdr .hnav .nav-chat::after{content:"\2192";color:var(--ink);font-family:var(--num)}
  .hdr .hnav .nav-chat:active{background:var(--stone)}
  /* Группа в панели — гармошка: строка-подпись того же вида, что пункты, со
     стрелкой вниз; список раскрывается нажатием под ней, с отступом. Свёрнутые
     группы держат панель короче экрана телефона. */
  .hdr .nav-g{display:block;border-bottom:1px solid var(--line)}
  .hdr .nav-gb{display:flex;width:100%;justify-content:space-between;padding:16px 18px;font-size:var(--t-small);
    letter-spacing:0;color:var(--ink);text-align:left}
  .hdr .nav-gb::after{border-color:var(--ink)}
  .hdr .nav-gb:active{background:var(--stone)}
  .hdr .nav-g.cur .nav-gb{box-shadow:inset 4px 0 0 var(--ink);background:var(--stone)}
  .hdr .nav-sub{position:static;min-width:0;padding:0 0 6px;border:0;border-radius:0;box-shadow:none;background:var(--stone)}
  .hdr .nav-sub::before{display:none}
  .hdr .hnav .nav-sub a{padding:12px 18px 12px 34px;border-bottom:0;border-radius:0}
  .hdr .hnav .nav-sub a[aria-current=page]{box-shadow:inset 4px 0 0 var(--ink);background:var(--paper)}
}
@media(max-width:640px){
  .hdr .hdr-in{padding:10px var(--frame-pad)}
  .hdr .btn{display:none}
  .hdr .logo{--lg-h:32px}
  /* Цель касания у логотипа — 44 px: растёт только область нажатия
     (поле и равное ему отрицательное поле), знак и шапка прежние. */
  .hdr .hdr-in > .logo{padding-block:6px;margin-block:-6px}
  /* Подпись у знака на телефоне не видна (остаётся текстом ссылки): в 15 px —
     нижнем кегле текста на телефоне — «ИИ-сотрудники» рядом со знаком и бургером
     не встаёт в строку и рвалось на «ИИ-» в три строки. */
  .hdr .logo small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Уже 360px подпись рядом с лого и бургером не встаёт — только текстом ссылки. */
@media(max-width:359px){
  .hdr .logo small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Экран касания (планшет): цель нажатия в шапке — от 44 px по высоте. Кнопка
   «Разобрать задачу» была 40 px, пункты строки меню на 1100+ (планшет
   горизонтально) — 37 px. Растёт только область нажатия: лишнее съедает
   отрицательное поле, высота шапки и строка в один ряд прежние. Список
   группы на касании — те же 44 px на строку. */
@media (pointer:coarse){
  .hdr .btn{padding-block:13px;margin-block:-2px}
}
@media (pointer:coarse) and (min-width:1100px){
  .hdr .hnav > a,.hdr .nav-gb{padding-block:12.5px;margin-block:-3.5px}
  .hdr .nav-sub a{padding-block:12.5px}
}

/* ── Сжатая шапка ───────────────────────────────────────────────── */
/* Дальше 80px от верха (класс hdr-sm на <html> ставит /js/motion.js по
   сторожу IntersectionObserver, без обработчика прокрутки) полоса шапки
   становится на --hdr-cut короче: лист и черта едут вверх, строка — на
   --hdr-lift, подпись справа от логотипа уходит, знак остаётся.
   Только transform и opacity: высота шапки в потоке прежняя, поэтому ни
   текст под ней, ни прокрутка не прыгают. Освободившаяся полоса прозрачна
   и нажатий не ловит. --hdr-h — высота полосы сейчас (по ней стоят меню
   и строка раздела /privacy). Открытое меню отменяет сжатие — панель встаёт
   под полную шапку. При «уменьшить движение» скрипт класс не ставит —
   шапка не меняется.
   --hdr-pin — высота для якорей (scroll-margin-top), липких оглавлений и
   полосы фильтра /cases. Когда шапка вообще умеет сжиматься (класс hdr-cs —
   тоже от /js/motion.js), это сжатая высота, всегда: якорь и липкий блок
   живут ниже 80px, где шапка уже сжата, — переход по якорю с верха страницы
   ставит цель на свои 28px под шапкой, а оглавления при сжатии не прыгают. */
html.hdr-sm{--hdr-h:calc(67px - var(--hdr-cut))}
html.hdr-cs{--hdr-pin:calc(67px - var(--hdr-cut))}
.hdr::before,.hdr::after,.hdr .logo,.hdr .logo small,.hdr .burger,.hdr .rprog{
  transition:translate .22s var(--ease),opacity .16s linear}
.hdr .btn{transition:transform var(--d-1),box-shadow var(--d-1),background var(--d-1),color var(--d-1),translate .22s var(--ease)}
@media(min-width:1100px){.hdr .hnav{transition:translate .22s var(--ease)}}
html.hdr-sm .hdr:not(.nav-open){pointer-events:none}
html.hdr-sm .hdr:not(.nav-open) .hdr-in > *{pointer-events:auto}
html.hdr-sm .hdr:not(.nav-open)::before,html.hdr-sm .hdr:not(.nav-open)::after,
html.hdr-sm .hdr:not(.nav-open) .rprog{translate:0 calc(-1 * var(--hdr-cut))}
html.hdr-sm .hdr:not(.nav-open) .hdr-in > *{translate:0 calc(-1 * var(--hdr-lift))}
html.hdr-sm .hdr:not(.nav-open) .logo small{opacity:0;translate:0 -4px}

/* ── Подвал — плакатный финал страницы ──────────────────────────── */
/* Чёрный лист: сверху три крупных канала связи в рамке, под ними карта
   сайта в четыре группы с фишками-заголовками, ниже реквизиты, и в самом низу —
   имя студии кеглем во всю полосу, срезанное краем листа, как на афише. */
.ft{position:relative;overflow:hidden;margin:0;padding:var(--sec-m) 0 0;border:0;background:var(--black);color:var(--on-dark);
  font-family:var(--font);font-size:var(--t-body);line-height:1.5;text-align:left;letter-spacing:0}
.ft p,.ft ul,.ft li{margin:0;padding:0;color:inherit;font-size:inherit;max-width:none}
.ft ul{list-style:none}
.ft-in{max-width:var(--frame-w);margin:0 auto;padding:0 var(--frame-pad)}

.ft-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 48px;margin-bottom:30px}
/* Логотип на тёмном подвале — версия «на тёмном» (logo-dlya-temnogo-fona
   набора): плашка жёлтая, буквы прорезаны и показывают чёрный фон, надпись —
   бумагой. Размеры — те же множители, что в шапке. */
.ft .logo{--lg-h:40px;display:flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap;color:var(--paper)}
.ft .logo .lg-mk{fill:var(--y)}
.ft .logo small{display:block;max-width:9em;margin-left:calc(var(--lg-h) * .5);padding-left:12px;border-left:1px solid var(--line-d);
  font-family:var(--num);font-size:var(--t-meta);font-weight:600;line-height:1.35;letter-spacing:0;white-space:normal;color:var(--muted-d);text-transform:uppercase}
.ft .ft-about{max-width:44ch;font-size:var(--t-small);line-height:1.55;color:var(--on-dark)}

/* Каналы связи — плиты на чёрном (строки .ch эталона): слева квадрат со
   значком канала, справа подпись и крупный адрес, стрелка жёлтая. Telegram —
   главный канал: жёлтый квадрат со значком чернилами, у остальных — фишка
   --plate-2 с жёлтым значком. Значок — маска (::after) поверх квадрата
   (::before): разметка подвала (footer.mjs) не меняется. Вся плита — ссылка. */
.ft-call{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ft-ch{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:6px;align-items:center;min-height:44px;padding:18px 20px;
  background:var(--plate);border:1px solid var(--line-d);border-radius:var(--r-md);
  color:var(--on-dark);text-decoration:none;transition:background-color var(--d-1),border-color var(--d-1),transform var(--d-2) var(--ease)}
.ft-ch::before{content:"";grid-row:1 / 3;grid-column:1;width:48px;height:48px;border-radius:12px;background:var(--plate-2)}
.ft-ch::after{content:"";position:absolute;left:33px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--y);
  -webkit-mask:var(--i-phone) center/contain no-repeat;mask:var(--i-phone) center/contain no-repeat}
.ft-ch[href^="https://t.me"]::before{background:var(--y)}
.ft-ch[href^="https://t.me"]::after{background:var(--ink);-webkit-mask-image:var(--i-tg);mask-image:var(--i-tg)}
.ft-ch[href^="mailto:"]::after{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
/* разрядка меньше обычной метки: «Позвонить · ответит Андреич» на 1440 входит в строку */
.ft-ch small{grid-column:2;align-self:end;font-family:var(--num);font-size:var(--t-meta);font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-d)}
.ft-ch b{grid-column:2;align-self:start;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;font-family:var(--grot);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.015em;white-space:nowrap}
.ft-ch b::after{content:"\2192";font-family:var(--font);font-weight:700;font-size:var(--t-body);color:var(--y);transition:transform var(--d-1)}
@media (hover:hover) and (pointer:fine){
  .ft-ch:hover{background:var(--plate-2);border-color:var(--y);transform:translateY(-2px)}
  .ft-ch:hover b::after{transform:translateX(4px)}
}
.ft-ch:active{background:var(--plate-2);border-color:var(--y)}
.ft-ch:focus-visible{outline-offset:3px;outline-color:var(--y)}
/* Три плиты в ряд на 981–1199 тесны для адреса почты 24 px. */
@media(min-width:981px) and (max-width:1199px){.ft-ch{padding:16px;column-gap:14px}.ft-ch b{font-size:21px}}

/* Карта сайта: четыре группы, у каждой фишка-заголовок. */
.ft-nav{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:36px 32px;padding:var(--sec-s) 0}
/* заголовок группы — метка BE-1 (моно капсом), как метки разделов и .ftr h4 эталона */
.ft .ft-chip{display:table;margin-bottom:14px;font-family:var(--num);font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);line-height:1.3;text-transform:uppercase;color:var(--muted-d)}
.ft-cols{display:grid;gap:0 28px}
.ft-grp-wide .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.ft .ft-sub{padding:12px 0 4px;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-d)}
.ft-grp-wide .ft-col + .ft-col .ft-sub{padding-top:5px}
/* Пункт растягивается на высоту строки сетки: когда сосед переносится на две
   строки, черты под ссылками всё равно идут на одном уровне. */
.ft-list li{display:flex}
.ft-list a{flex:1 1 auto;display:block;padding:5px 0;color:var(--on-dark);text-decoration:none;font-size:var(--t-body);line-height:1.4;
  text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:5px;transition:color var(--d-1)}
@media (hover:hover) and (pointer:fine){.ft-list a:hover{color:var(--paper);text-decoration-line:underline}}
.ft-list a:active{color:var(--paper)}
/* Палец на планшете попадает так же, как на телефоне. */
@media (pointer:coarse){.ft-list a{padding:11px 0;line-height:22px}}

.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 26px;padding-top:20px;border-top:1px solid var(--line-d);
  font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:0;color:var(--muted-d)}
.ft-legal{flex-basis:100%}

/* Логотип во всю полосу. Низ срезан краем листа — финал, а не подпись.
   Высота плашки подогнана под ширину полосы точно: лого целиком — 4,5057
   высоты плашки (scripts/logo.mjs). Ширина полосы считается от ширины подвала
   (контейнер .ft, без полосы прокрутки); где контейнерных единиц нет — от
   100vw с небольшим запасом. Версия «на чёрном», как у логотипа подвала. */
.ft{container-type:inline-size}
.ft-mark{--lg-h:calc((min(100cqi, var(--frame-w)) - 2 * var(--frame-pad)) / 4.5057);
  box-sizing:border-box;display:flex;align-items:flex-start;max-width:var(--frame-w);height:calc(var(--lg-h) * .7);margin:40px auto 0;padding:0 var(--frame-pad);overflow:hidden;
  color:var(--paper);user-select:none;pointer-events:none}
@supports not (width:1cqi){.ft-mark{--lg-h:calc((min(100vw, var(--frame-w)) - 2 * var(--frame-pad)) / 4.555)}}
.ft-mark .lg-mk{fill:var(--y)}
.ft-mark .lg-wm{margin-top:calc(var(--lg-h) * .25)}

@media(max-width:980px){
  .ft-call{grid-template-columns:minmax(0,1fr);gap:10px}
  .ft-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-grp-wide{grid-column:1/-1}
}
/* Телефон: группы стопкой — каждая на всю ширину, одна под другой; у каждой
   ссылки тап-зона 44px и черта под ней. */
@media(max-width:640px){
  .ft-head{flex-direction:column;align-items:flex-start;margin-bottom:24px}
  .ft-ch{grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:14px 16px}
  .ft-ch::before{width:44px;height:44px}
  .ft-ch::after{left:27px}
  .ft-ch b{font-size:22px}
  .ft-nav{grid-template-columns:minmax(0,1fr);gap:32px;padding:var(--sec-m) 0 var(--sec-s)}
  .ft-grp-wide,.ft-grp-full{grid-column:auto}
  .ft-cols,.ft-grp-wide .ft-cols{grid-template-columns:minmax(0,1fr);gap:0}
  /* Ссылки внутри группы — в две колонки на общей сетке строк: черты под
     ссылками идут ровно через обе колонки, а подвал вдвое короче стопки
     в одну колонку. */
  .ft-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .ft-list a{padding:11px 0;line-height:22px;border-bottom:1px solid var(--line-d)}
  .ft .ft-sub,.ft-grp-wide .ft-col + .ft-col .ft-sub{padding:18px 0 2px}
  .ft-bot{flex-direction:column}
  .ft-mark{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ft-ch,.ft-ch b::after,.ft-list a{transition:none}
  .ft-ch:hover{transform:none}
}

/* ── Уведомление о cookie ───────────────────────────────────────── */
/* Метрика с Вебвизором работает с первого захода — посетитель должен узнать
   об этом на сайте, а не выяснять из политики. */
.ckb{position:fixed;left:16px;right:auto;bottom:16px;z-index:70;
  width:calc(100% - 32px);max-width:560px;
  /* BE-1: чёрная плашка со скруглением 14 и мягкой тенью; над чёрным
     подвалом её отделяет светлая волосяная кромка. */
  background:var(--black);color:var(--on-dark);border:0;border-radius:var(--r-md);
  box-shadow:0 0 0 1px rgba(243,243,238,.16),0 24px 44px -20px rgba(0,0,0,.55);padding:16px 18px;display:none;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--d-1),transform var(--d-1),display var(--d-1) allow-discrete;
  grid-template-columns:1fr auto;gap:14px;align-items:center;
  font-family:var(--font);font-size:var(--t-small);line-height:1.5;text-align:left}
.ckb.on{display:grid;opacity:1;transform:none}
@starting-style{ .ckb.on{opacity:0;transform:translateY(10px)} }
.ckb p{margin:0;max-width:none;font-size:var(--t-small);line-height:1.5;color:var(--on-dark)}
.ckb a{color:var(--y);text-decoration:underline}
.ckb-short{display:none}
/* «Понятно» — жёлтая кнопка (btn-y эталона) на чёрной плашке: жёлтое на
   чёрном — разрешённый приём, и плашка короткая, первый экран не перетягивает. */
.ckb button{cursor:pointer;background:var(--y);color:var(--ink);border:2px solid var(--y);border-radius:var(--r-btn);
  font-family:var(--grot);font-size:var(--t-small);font-weight:800;letter-spacing:-.005em;padding:9px 18px;min-height:44px;white-space:nowrap;
  transition:background-color var(--d-1),border-color var(--d-1)}
.ckb button:hover{background:var(--y-hover);border-color:var(--y-hover);color:var(--ink)}
.ckb button:focus-visible{outline-color:var(--y)}
@media (max-width:640px){
  /* Тонкая полоса во всю ширину прямо над нижней панелью каналов (54px),
     а не карточка в пятую часть экрана: та закрывала первый экран и кнопку
     на нём. Текст короткий (.ckb-short), полный — в политике по ссылке. */
  .ckb{left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;min-height:44px;padding:4px 12px 4px 16px;gap:12px;
    border:0;border-radius:0;border-top:1px solid var(--line-d);box-shadow:0 -10px 24px -14px rgba(0,0,0,.4)}
  .ckb-full{display:none}
  .ckb-short{display:inline}
  .ckb p{font-size:var(--t-meta);line-height:1.4}
  /* «Понятно» — 44 px, цель касания пальцем (было 36 px с отрицательным полем:
     поле зону нажатия не расширяет) */
  .ckb button{min-height:44px;padding:4px 14px;font-size:15px}
  /* Без панели каналов (/about, /privacy, /404) и пока она спрятана у формы —
     полоса у нижнего края. */
  body:not(:has(.sticky)) .ckb,body:has(.sticky.off) .ckb{bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
/* круглая кнопка чата ложилась на «Понятно» — поднимаем баннер над ней */
@media (min-width:641px) and (max-width:900px){ .ckb{bottom:83px} }
/* На компьютере — та же короткая строка, что на телефоне, в узкой карточке:
   полная карточка 560 px ложилась на кнопки первого экрана и на /cases.
   Полный текст — в политике по ссылке. */
@media (min-width:641px){
  .ckb{max-width:440px;padding:10px 14px}
  .ckb-full{display:none}
  .ckb-short{display:inline}
  .ckb button{min-height:36px;padding:6px 14px}
}
/* Планшет пальцем: «Понятно» — те же 44 px, что на телефоне. */
@media (min-width:641px) and (pointer:coarse){ .ckb button{min-height:44px} }
/* Пока форма заявки на экране (cookie.js) или открыт бриф /cases, плашки
   нет: на телефоне она ложилась на кнопку отправки. */
.ckb.away,body:has(.qov.on) .ckb{opacity:0;visibility:hidden;pointer-events:none}

/* ── Нижняя панель каналов на телефоне ──────────────────────────── */
/* Стоит там, где есть заявка: форма на главной и страницах услуг, бриф на
   /cases. Поэтому живёт в каркасе, а не в site.css: /cases подключает только
   этот файл. */
/* BE-1: чёрная полоса; «Заявка» — жёлтая кнопка (btn-y), Telegram и
   «Позвонить ИИ» — светлым текстом на чёрном. Цели касания — 56 px. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr 2fr;gap:6px;align-items:stretch;background:var(--black);border-top:1px solid var(--line-d);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  transition:transform var(--d-2) var(--ease),opacity 160ms var(--ease-exit),visibility var(--d-2)}
/* Ширина ячейки — по надписи (flex-basis auto) и в одну строку: «Позвонить ИИ» в
   трети экрана 360–390px переносилось, и панель вырастала с 52 до 75px. */
.sticky a{min-height:44px;white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:var(--r-btn);font-family:var(--font);font-weight:600;font-size:15px;line-height:1.2;color:var(--on-dark);text-decoration:none}
@media(max-width:374px){.sticky a{white-space:normal;text-align:center;padding:8px 6px}}
.sticky a:not(.acc):active{background:var(--plate-2)}
.sticky .acc{background:var(--y);color:var(--ink);font-family:var(--grot);font-weight:800;letter-spacing:-.005em}
.sticky .acc:active{background:var(--y-hover)}
.sticky :focus-visible{outline-color:var(--y);outline-offset:-3px}
/* «Заявка» сама жёлтая: рамка — чернилами внутри кнопки */
.sticky .acc:focus-visible{outline-color:var(--ink);outline-offset:-5px}
/* Пока форма заявки на экране, панель уходит вниз (nav.js): она закрывала
   кнопку отправки и сообщение об ошибке, а её «Заявка» ведёт к той же форме. */
.sticky.off{transform:translateY(100%);opacity:0;visibility:hidden}
/* Пока главная кнопка первого экрана впереди, панели нет (nav.js): она
   закрывала эту кнопку на телефонах 320–390 px. До первого решения скрипта
   панель спрятана без анимации — иначе мелькала и уезжала; без скрипта
   (нет класса js) она видна сразу, как раньше. */
.js .sticky:not(.ready){transform:translateY(100%);visibility:hidden;transition:none}
@media(max-width:640px){
  .sticky{display:grid}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  /* Запас — только под панель каналов: на /404 её нет, и под подвалом
     оставалась бежевая полоса 58px. */
  body:not(:has(.sticky)){padding-bottom:0}
}
/* До 374 px «Позвонить ИИ» идёт в две строки, и панель — 65 px, а не 57:
   запас под подвалом и место плашки cookie — по этой высоте. С запасом 58 px
   панель в конце страницы срезала строку реквизитов (ОГРНИП) на 7 px. */
@media(max-width:374px){
  body:has(.sticky){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .ckb{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* ── Фокус не уходит под нижние полосы ──────────────────────────── */
/* При проходе Tab браузер докручивает элемент в фокусе ровно до нижнего
   края окна, а там стоят панель каналов (54 px) и плашка cookie: кнопки
   заявки и каналы связи оказывались под ними, и не было видно, что сейчас
   нажмёт Enter. scroll-padding-bottom поднимает этот край на высоту полос
   и ещё 16–18 px. Высоту плашки (--ckb-h: на 320 px в ней две строки) ставит
   cookie.js. Верх не трогаем: якоря уже сдвигает scroll-margin-top у секций. */
@media(max-width:640px){
  html:has(.sticky){scroll-padding-bottom:72px}
  html:has(.ckb.on:not(.away)){scroll-padding-bottom:calc(54px + var(--ckb-h,68px) + 16px)}
}
@media(min-width:641px){
  html:has(.ckb.on:not(.away)){scroll-padding-bottom:calc(16px + var(--ckb-h,66px) + 16px)}
}
@media(min-width:641px) and (max-width:900px){
  html:has(.ckb.on:not(.away)){scroll-padding-bottom:calc(83px + var(--ckb-h,66px) + 16px)}
}

/* ── ИИ-консультант (виджет) ────────────────────────────────────── */
.oaichat{position:fixed;right:20px;bottom:20px;z-index:80;font-family:var(--font);font-size:var(--t-body);line-height:1.5;text-align:left}
/* BE-1: «Спросить Андреича» — белая плашка с обводкой чернилами и мягкой
   тенью; точка «в сети» — жёлтая с расходящимся кольцом (.live эталона). */
.oc-fab{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:12px;
  padding:12px 18px;cursor:pointer;font-family:var(--font);font-weight:600;box-shadow:var(--sh-lift);
  font-size:15px;letter-spacing:0;transition:background-color var(--d-1) var(--ease),color var(--d-1) var(--ease),transform var(--d-2) var(--ease)}
@media (hover:hover) and (pointer:fine){.oc-fab:hover{background:var(--y);color:var(--ink);transform:translateY(-2px)}}
/* Отклик на нажатие: на тач-экране наведения нет, а подтверждение действия нужно. */
.oc-fab:active{background:var(--y-hover);color:var(--ink)}
.oc-fab-dot,.oc-id small i{position:relative;width:10px;height:10px;background:var(--y);box-shadow:0 0 0 1.5px var(--ink);display:block;border-radius:50%;flex:none}
.oc-fab-dot::after,.oc-id small i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--y);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .oc-fab-dot::after,.oc-id small i::after{animation:pulse 1.8s ease-out infinite}
}
/* облачко и «Чат» — только у круга на телефоне */
.oc-fab-ic,.oc-fab-sm{display:none}
.oaichat.on .oc-fab{display:none}
/* Рядом с формой заявки (и на телефоне — на первом экране) кнопка чата
   прячется: на ноутбуке она и 3D-Андреич ложились на поля формы (chat.js).
   Открытый чат не прячем — человек в нём пишет. */
.oaichat.hold:not(.on){opacity:0;pointer-events:none;transition:opacity .25s}
/* Вход и выход без JavaScript: display участвует в переходе через allow-discrete,
   стартовое состояние задаёт @starting-style. Где поддержки нет — панель просто
   появляется мгновенно. */
.oc-panel{display:none;opacity:0;transform:translateY(8px);
  transition:opacity var(--d-1),transform var(--d-1),display var(--d-1) allow-discrete;
  width:min(392px,calc(100vw - 32px));height:min(560px,calc(100dvh - 110px));background:var(--white);
  border:0;border-radius:18px;box-shadow:0 0 0 1px rgba(18,18,18,.1),0 40px 80px -30px rgba(18,18,18,.45);flex-direction:column;overflow:hidden}
.oaichat.on .oc-panel{display:flex;opacity:1;transform:none}
@starting-style{ .oaichat.on .oc-panel{opacity:0;transform:translateY(8px)} }
.oc-panel[hidden]{display:none}
.oc-hd{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--white);flex:none}
.oc-av{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:var(--r-btn);background:var(--y);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);
  font-family:var(--grot);font-weight:800;font-size:var(--t-body)}
.oc-id b{display:block;font-family:var(--grot);font-weight:800;font-size:var(--t-small);letter-spacing:-.01em}
/* подпись под именем — Onest, не моно: моно на телефоне рвало её на две строки */
.oc-id small{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:15px;line-height:1.35;color:var(--muted);margin-top:2px}
.oc-id small i{width:8px;height:8px;margin:0 2px}
.oc-x{margin-left:auto;width:30px;height:30px;flex:none;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);
  cursor:pointer;font-size:var(--t-small);line-height:1;color:var(--ink)}
.oc-x:hover{background:var(--y);color:var(--ink);border-color:var(--ink)}
.oc-body{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:10px}
/* Пузыри: Андреич — камень, человек — чёрный (эталон: «пузыри — камень и чёрный»). */
.oc-msg{max-width:88%;font-size:var(--t-small);line-height:1.5;padding:11px 14px;border:0;border-radius:14px;white-space:pre-wrap;color:var(--ink)}
.oc-msg.ai{align-self:flex-start;background:var(--stone);border-bottom-left-radius:4px}
.oc-msg.me{align-self:flex-end;background:var(--black);color:var(--on-dark);border-bottom-right-radius:4px}
.oc-msg.oc-warn{background:var(--paper);border:1.5px dashed var(--line-2)}
/* ссылки внутри реплики Андреича */
.oc-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:2px;word-break:break-word}
.oc-msg.ai .oc-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.oc-typing{display:flex;gap:5px;align-items:center;padding:13px}
.oc-typing i{width:6px;height:6px;background:var(--muted);display:block;animation:ocT 1.2s infinite}
.oc-typing i:nth-child(2){animation-delay:.18s}.oc-typing i:nth-child(3){animation-delay:.36s}
@keyframes ocT{0%,60%,100%{opacity:.3}30%{opacity:1}}
.oc-lead{align-self:stretch;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--white);padding:14px}
.oc-lead b{display:block;font-family:var(--grot);font-weight:800;font-size:var(--t-small);margin-bottom:5px}
.oc-lead span{display:block;font-size:var(--t-small);color:var(--muted);line-height:1.45}
.oc-lead a{color:var(--ink)}
/* «Передать заявку» — главная кнопка чата: не ниже 44 px (было 43). */
.oc-lead-go{margin-top:11px;width:100%;min-height:44px;background:var(--y);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-btn);padding:11px;box-shadow:var(--sh-btn);
  cursor:pointer;font-family:var(--grot);font-weight:800;font-size:var(--t-small)}
.oc-lead-go:disabled{opacity:.6;cursor:default}
.oc-cons{display:block;margin-top:9px;font-size:var(--t-meta);line-height:1.4;color:var(--muted)}
.oc-cons a{color:var(--ink)}
.oc-note{margin:0;padding:0 14px 12px;font-size:var(--t-meta);line-height:1.4;color:var(--muted)}
.oc-note a{color:var(--ink);padding-block:12px;margin-block:-12px}
/* Поле ввода — как поля формы заявки: белое, рамка 2 px чернилами, радиус 10;
   кнопка отправки — жёлтый квадрат рядом. */
.oc-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:none;margin:0}
.oc-in{flex:1;min-width:0;min-height:48px;border:2px solid var(--ink);border-radius:var(--r-btn);padding:11px 13px;font-family:var(--font);font-size:var(--t-body);background:var(--white);color:var(--ink)}
.oc-in:focus{outline:none}
.oc-in:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.oc-send{width:48px;flex:none;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--y);color:var(--ink);
  font-size:var(--t-h3);cursor:pointer;font-family:var(--font);font-weight:700}
.oc-send:hover{background:var(--y-hover)}
/* Планшет пальцем: крестик чата под палец, как на телефоне (на компьютере 30 px). */
@media (min-width:641px) and (pointer:coarse){ .oc-x{width:44px;height:44px} }
@media(max-width:640px){
  /* 04.11: круглая кнопка чата на телефоне убрана — входы в чат: пункт меню,
     вопросы «Не верьте на слово» и строка в каналах у формы. */
  .oaichat:not(.on) .oc-fab{display:none}

  .oaichat{right:12px;bottom:70px}
  /* 70px — запас над нижней панелью каналов (.sticky). Где её нет (/cases,
     /about, /privacy, /404), кнопка висела в воздухе и в конце страницы ложилась
     на строку реквизитов ИП. Без панели — в угол, как на компьютере: в конце
     страницы под ней знак подвала (.ft-mark), а реквизиты выше. */
  body:not(:has(.sticky)) .oaichat{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  /* Открытый чат — во весь экран: окно 72% высоты между шапкой и панелью
     каналов при открытой клавиатуре оставляло для ответа пару строк.
     Под visualViewport не подгоняем — на iOS это ненадёжно. */
  .oaichat.on .oc-panel{position:fixed;inset:0;width:auto;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none}
  .oc-body{flex:1;min-height:0;overscroll-behavior:contain}
  /* пока чат открыт, нижняя панель каналов не нужна и не видна */
  body:has(.oaichat.on) .sticky{display:none}
  /* крестик под палец; зазоры в шапке уже, чтобы «отвечает сразу» на 360 px
     не уходило на вторую строку */
  .oc-x{width:44px;height:44px}
  .oc-hd{gap:8px;padding:13px 10px 13px 13px}
  /* Предупреждение — в одну строку: обрезается текст, ссылка «Подробнее»
     остаётся целой. Полный текст — по ней и на компьютере. */
  .oc-note{display:flex;gap:5px;font-size:15px;padding:0 14px calc(6px + env(safe-area-inset-bottom,0px));white-space:nowrap}
  .oc-note span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .oc-note a{flex:none}
  /* На телефоне рядом стоит нижняя панель с каналами связи, и широкая
     кнопка чата налезала на текст. Оставляем компактный круг, но не немой:
     круг с точкой не говорил, что он открывает, — в нём облачко
     и слово «Чат». */
  .oc-fab{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;
    box-shadow:var(--sh-lift);flex-direction:column;gap:1px}
  .oc-fab-txt,.oc-fab-dot{display:none}
  .oc-fab-ic{display:block;width:19px;height:19px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
  .oc-fab-sm{display:block;font-size:var(--t-meta);line-height:1;letter-spacing:.02em}
  /* Пока висит полоса cookie, круг стоит над ней, а не на её кнопке. */
  body:has(.ckb.on:not(.away)) .oaichat{bottom:122px}
  body:not(:has(.sticky)):has(.ckb.on:not(.away)) .oaichat,body:has(.sticky.off):has(.ckb.on:not(.away)) .oaichat{bottom:68px}
}

/* Движение каркаса уважает системную настройку и там, где у страницы
   своего правила нет (/privacy, /demo). */
@media(prefers-reduced-motion:reduce){
  .btn,.hdr .hnav,.hdr .burger span,.hdr .burger span::before,.hdr .burger span::after,
  .ckb,.ckb button,.oc-panel,.oc-fab,.sticky{transition:none}
  .btn:hover,.btn:active{transform:none}
  .oc-typing i,.btn.sending::after{animation:none}
}

/* ── Движение: общие ключевые кадры ────────────────────────────── */
/* Один словарь на все страницы. С 04.11 текст стоит на месте с первого кадра:
   двигаются только краска (черта итога, рельс шагов) и то, что человек сам
   тронул — кнопка, вкладка, панель (ТЗ «Расчётный лист», раздел 4).
   · draw — черта итога под цифрой-доказательством (.sum);
   · ring — ореол формы по прибытии к #zayavka (чернилами: финал жёлтый);
   · tab-in — новая панель вкладки входит в ответ на нажатие;
   · rail-x / rail-y — заливка рельса шагов за прокруткой;
   · btnbar (в «Кнопках») — полоса «Отправляю…». */
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ring{from{box-shadow:var(--sh-doc),0 0 0 18px rgba(18,18,18,0)}}
@keyframes tab-in{from{opacity:0;transform:translateY(4px)}}
@keyframes rail-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rail-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── Цифра-итог с чертой (.sum) ────────────────────────────────── */
/* Цифра не двигается никогда; рисуется только жёлтая черта под ней.
   На первом экране — один раз через 250 мс; ниже по странице — пока цифра
   входит в кадр (animation-timeline, где поддерживается; иначе нарисована). */
.sum{position:relative;display:inline-block;padding-bottom:10px;font-variant-numeric:tabular-nums}
.sum::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--y);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .hero .sum::after{animation:draw var(--d-3) var(--ease) .25s both}
  @supports (animation-timeline:view()){
    main .sec:not(.hero) .sum::after{animation:draw linear both;animation-timeline:view();animation-range:entry 40% cover 40%}
  }
}

/* ── «Уменьшить движение» — глобально, на любой странице ───────── */
/* Работает и там, где site.css не подключён (/cases, /about, демо). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .sum::after{transform:none!important}
}

/* ── Печать ───────────────────────────────────────────────────── */
/* Печатается содержание страницы. Шапка — только знак, без меню, кнопки и
   бургера; плашка cookie, чат, нижняя панель, каналы, карта сайта и знак во
   всю полосу подвала не печатаются — от подвала остаются реквизиты. Цвета —
   как на экране (print-color-adjust:exact): без фона жёлтые метки на
   чернильной плашке и светлый текст чёрных секций на бумаге пропадали. */
@media print{
  *,*::before,*::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.hdr .hnav,.hdr .burger,.hdr .nav-cta,.hdr .btn,.hdr .rprog,.ckb,.oaichat,.oc-raccoon,.sticky,
  .ft-head,.ft-call,.ft-nav,.ft-mark{display:none!important}
  .hdr{position:relative}
  .hdr::before{-webkit-backdrop-filter:none;backdrop-filter:none}
  body{padding-bottom:0!important}
  .ft{padding:14px 0 0;background:none;color:var(--ink);break-inside:avoid}
  .ft-bot{padding-top:10px;border-top-color:var(--line-2);color:var(--muted)}
}