/* ============================================================
   ДАТАРАКС UI KIT — kit.css
   Один файл на все продукты платформы. Подключается сам по себе,
   без зависимостей. Цвет продукта задаётся одним классом или
   атрибутом data-product на <html>; всё остальное берёт его из
   переменной --brand.

   Разделы:
     00 Токены            06 Формы
     01 Сброс и база      07 Теги, бейджи, индикаторы
     02 Типографика       08 Таблицы
     03 Сетка и раскладка 09 Карточки
     04 Элемент-знак      10 Навигация: крошки, табы, пагинация, шаги
     05 Шапка продукта    11 Оверлеи: меню, модалка, панель, подсказка, тост
     05a Кнопки           12 Обратная связь: алерты, пустое состояние, скелетон, прогресс
                          13 Контент: аккордеон, код, разделители, аватары
                          14 Графики
                          15 Утилиты
   ============================================================ */

/* ============================================================
   00 · ТОКЕНЫ
   ============================================================ */
:root {
  /* чернила и бумага */
  --ink:       #0B1B2B;
  --ink-2:     #15293D;
  --ink-soft:  #46586E;
  --muted:     #6A7A90;
  --paper:     #EDF1F7;
  --paper-2:   #E2E8F1;
  --bg:        #FAFCFE;
  --white:     #FFFFFF;
  --line:      rgba(13, 33, 64, 0.145);
  --line-2:    rgba(13, 33, 64, 0.08);

  /* лайм — цвет самой платформы, не продуктов */
  --lime:       #D4F542;   /* лайм платформы: знак Dr, подпись «Datarax» — не меняется от продукта */
  --accent:     #D4F542;   /* акцент продукта: яркий светлый партнёр цвета продукта на тёмном; у каждого продукта свой, см. палитры */
  --accent-2:   #C2E832;   /* акцент при наведении */
  --accent-ink: #0B1B2B;

  /* семантика */
  --ok:        #1F8A5B;  --ok-tint:     #DDF1E7;
  --warn:      #B8860B;  --warn-tint:   #FBF0CF;
  --danger:    #C2410C;  --danger-tint: #FBE1D5;
  --info:      #2563EB;  --info-tint:   #E6EDFD;

  /* пастель для витринных карточек */
  --tint-mint: #D6F3E4;  --tint-sky: #DCEBFB;   --tint-lavender: #E5DFFA;
  --tint-peach:#FBE3D2;  --tint-citron:#ECF5B4; --tint-rose: #F7DDE3;
  --tint-sand: #EDE8D8;  --tint-stone: #E6E7E3;

  /* отступы */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  --container: 1320px;
  --container-wide: 1560px;
  --container-narrow: 860px;
  --pad-x: clamp(16px, 3.4vw, 40px);
  --section-y: clamp(48px, 5.5vw, 88px);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 8px 22px -14px rgba(11,27,43,0.30);
  --shadow:    0 20px 44px -22px rgba(11,27,43,0.26);
  --shadow-lg: 0 34px 76px -28px rgba(11,27,43,0.32);

  --z-header: 60; --z-menu: 70; --z-drawer: 80; --z-modal: 90; --z-toast: 100;

  /* продукт по умолчанию — сама платформа */
  --brand:      #0B1B2B;
  --brand-ink:  #15293D;
  --brand-tint: #E7EAEF;
  --brand-soft: rgba(11,27,43,0.08);
  --brand-on:   #FFFFFF;             /* текст на цвете продукта */
  --brand-on-soft: rgba(255,255,255,0.72);
  --brand-hover: var(--brand-ink);   /* фон кнопки при наведении */
  /* цифры: основной шрифт с табличными цифрами, а не моноширинный —
     в моно пробел-разделитель тысяч шириной с цифру и рвёт число.
     Разделитель тысяч в разметке — узкий неразрывный пробел U+202F;
     Kit.fmt(n, sep) и [data-num] форматируют числа скриптом. */
  --font-num: var(--font);
}

/* --- продуктовые палитры ---
   data-product на <html> красит весь сайт; класс .p-* — отдельный
   элемент (карточку, знак, шапку в примере). Ключ, символ знака и
   класс — одно и то же: data-product="rt" · .p-rt · Rt.
   Реестр продуктов (имена, области, семьи) — в products.js.

   Тридцать два продукта разведены по кругу и собраны в семьи по
   области: продукты одной семьи сидят рядом по тону и читаются как
   родственные, а различаются светлотой и насыщенностью. На всех,
   кроме жёлтого sm, текст белый; у ярких (rt, ap, ho) контраст белого
   3.3–3.9:1 — хватает для кнопок и знаков, но не для мелкого текста,
   поэтому текст на белом у них берёт тёмный оттенок --brand-ink.
   Жёлтый sm, вольт cb и бирюза sa — с тёмным текстом (--brand-on).

   Акцент (--accent) — светлый яркий партнёр цвета продукта для тёмных
   поверхностей: кнопки CTA, точки надзаголовков, номера шагов, «pro».
   Один лайм на всех не работал: с оранжевым, розовым, красным и
   пурпурным он спорил. Десять акцентов по семьям тонов: лайм (платформа),
   шартрез (оливковые и зелёные), мята (бирюзовые), аква (сине-голубые),
   небо (синие), лаванда (фиолетовые), янтарь (оранжевый и красный),
   персик (коралловый и винный), крем (жёлтый), румянец (розовые).
   Все — с тёмным текстом --accent-ink, контраст на тёмно-синем 10:1+.
   На цветном CTA (.cta--brand) главная кнопка белая, а не --ink:
   у dr цвет продукта и есть --ink, и тёмная кнопка пропадала.

     платформы              dr · dh
     компании и веб         ct · td · ch · pt
     торговля и объявления  rt · sm · ad · es
     данные и инструменты   st · tl · ap · db
     каталоги и справочники ib · pd · cb · sa
     отрасли                ph · wm · am · re · tr · ho · lm · sp · mu · fi
     медиа и мнения         mm · ab · ds · rv
     реестры и право        zk · to · bk · vd · dk · pa
     отраслевые порталы     fp · mp · mt · ag

   Круг заполнен: сорок два продукта. Новые цвета — соседи по тону
   существующих, но с шагом по светлоте: ультрамарин рядом с синими,
   алый светлее и теплее красного, слива темнее пурпурного, глубокое
   море темнее слейта. Графит, вольт и бирюза — единственные в своём роде.
   Вольт и бирюза, как жёлтый, идут с тёмным текстом.
   Реестры и право — официальные тона, строгие, как документы, из
   которых собраны базы: гербовый синий, гранат, сталь, таможенный
   зелёный, петроль, чернила. Каждый — сосед по тону одного из
   существующих, но с шагом по светлоте или насыщенности.
   Отраслевые порталы — единственная семья с приглушёнными тонами:
   море, вино, сталь и поле. Портал живёт лентой и таблицами, цвет
   здесь фон для чтения, а не витрина, поэтому насыщенность ниже,
   чем у продуктов, и все четыре узнаются как одна семья.            */

/* платформы: тёмные, чтобы не спорить с продуктами */
[data-product="dr"], .p-dr { --brand:#0B1B2B; --brand-ink:#15293D; --brand-tint:#E7EAEF; --brand-soft:rgba(11,27,43,0.08);   --brand-on:#fff; --accent:#D4F542; --accent-2:#C2E832; /* lime */ }
[data-product="dh"], .p-dh { --brand:#1F1B1A; --brand-ink:#302928; --brand-tint:#E6E6E6; --brand-soft:rgba(31,27,26,0.12);   --brand-on:#fff; --accent:#D4F542; --accent-2:#C2E832; /* lime */ }
/* компании и веб */
[data-product="ct"], .p-ct { --brand:#2563EB; --brand-ink:#1B4ED0; --brand-tint:#E6EDFD; --brand-soft:rgba(37,99,235,0.10);  --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="td"], .p-td { --brand:#0B7AB9; --brand-ink:#096192; --brand-tint:#DCEEF8; --brand-soft:rgba(11,122,185,0.12);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="ch"], .p-ch { --brand:#7145D6; --brand-ink:#5F35C1; --brand-tint:#EAE3FB; --brand-soft:rgba(113,69,214,0.10); --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="pt"], .p-pt { --brand:#3730A3; --brand-ink:#2A2483; --brand-tint:#E5E4F6; --brand-soft:rgba(55,48,163,0.12);   --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
/* торговля и объявления */
[data-product="rt"], .p-rt { --brand:#EA6316; --brand-ink:#C24E08; --brand-tint:#FDE9DD; --brand-soft:rgba(234,99,22,0.16);  --brand-on:#fff; --brand-hover:#D55810; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="sm"], .p-sm { --brand:#F2B705; --brand-ink:#916D00; --brand-tint:#FDF5DC; --brand-soft:rgba(242,183,5,0.16);  --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#E0A800; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
[data-product="ad"], .p-ad { --brand:#6A7A0D; --brand-ink:#4A5509; --brand-tint:#EDF0D4; --brand-soft:rgba(106,122,13,0.12);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="es"], .p-es { --brand:#0D5C63; --brand-ink:#0B4B51; --brand-tint:#E4EDEE; --brand-soft:rgba(13,92,99,0.12);    --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
/* данные и инструменты */
[data-product="st"], .p-st { --brand:#0E8181; --brand-ink:#0A5C5C; --brand-tint:#D8EEEE; --brand-soft:rgba(14,134,134,0.10); --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="tl"], .p-tl { --brand:#4B8117; --brand-ink:#375E11; --brand-tint:#E6F2D3; --brand-soft:rgba(85,146,26,0.10);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="db"], .p-db { --brand:#1C8229; --brand-ink:#166A21; --brand-tint:#DDF3DA; --brand-soft:rgba(28,130,41,0.10); --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="ap"], .p-ap { --brand:#0899B8; --brand-ink:#04728A; --brand-tint:#DCF2F8; --brand-soft:rgba(8,153,184,0.16);  --brand-on:#fff; --brand-hover:#0787A3; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
/* каталоги и справочники: тона разведены нарочно — ультрамарин, графит, вольт, бирюза */
[data-product="ib"], .p-ib { --brand:#2B3FBF; --brand-ink:#2333A0; --brand-tint:#E4E7F8; --brand-soft:rgba(43,63,191,0.12);  --brand-on:#fff; --brand-hover:#2536AD; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="pd"], .p-pd { --brand:#4B5563; --brand-ink:#374151; --brand-tint:#E7E9ED; --brand-soft:rgba(75,85,99,0.12);   --brand-on:#fff; --brand-hover:#3F4856; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="cb"], .p-cb { --brand:#A2BD00; --brand-ink:#6E8000; --brand-tint:#F1F6CC; --brand-soft:rgba(162,189,0,0.18);  --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#93AB00; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="sa"], .p-sa { --brand:#26C6B3; --brand-ink:#0C7F71; --brand-tint:#D9F5F0; --brand-soft:rgba(38,198,179,0.16); --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#1FB5A3; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
/* отрасли */
[data-product="ph"], .p-ph { --brand:#0D8555; --brand-ink:#09603D; --brand-tint:#D9F1E5; --brand-soft:rgba(13,133,85,0.12);   --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="wm"], .p-wm { --brand:#D53375; --brand-ink:#B92662; --brand-tint:#FADFEA; --brand-soft:rgba(213,51,117,0.12);  --brand-on:#fff; --accent:#FFB3C7; --accent-2:#F99DB6; /* blush */ }
[data-product="am"], .p-am { --brand:#3D5A80; --brand-ink:#304764; --brand-tint:#E4E9F1; --brand-soft:rgba(61,90,128,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="re"], .p-re { --brand:#365314; --brand-ink:#2C4410; --brand-tint:#E9ECE5; --brand-soft:rgba(54,83,20,0.12);    --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="tr"], .p-tr { --brand:#0E7490; --brand-ink:#0B5F76; --brand-tint:#E4F0F3; --brand-soft:rgba(14,116,144,0.12);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="ho"], .p-ho { --brand:#F0603B; --brand-ink:#C93E1B; --brand-tint:#FDE8E2; --brand-soft:rgba(240,96,59,0.16);  --brand-on:#fff; --brand-hover:#DF5230; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="lm"], .p-lm { --brand:#1E3A8A; --brand-ink:#193071; --brand-tint:#E6E9F2; --brand-soft:rgba(30,58,138,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="sp"], .p-sp { --brand:#D62828; --brand-ink:#B01F1F; --brand-tint:#FBE1E1; --brand-soft:rgba(214,40,40,0.12);  --brand-on:#fff; --brand-hover:#C42323; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="mu"], .p-mu { --brand:#451C86; --brand-ink:#38166E; --brand-tint:#E8E0F5; --brand-soft:rgba(69,28,134,0.12);  --brand-on:#fff; --brand-hover:#3B1774; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="fi"], .p-fi { --brand:#0B3C5D; --brand-ink:#082E48; --brand-tint:#DFE8EF; --brand-soft:rgba(11,60,93,0.12);   --brand-on:#fff; --brand-hover:#0A3350; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
/* медиа и мнения */
[data-product="mm"], .p-mm { --brand:#B8202F; --brand-ink:#951A26; --brand-tint:#F9DEE1; --brand-soft:rgba(184,32,47,0.12);   --brand-on:#fff; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="ab"], .p-ab { --brand:#7B2144; --brand-ink:#651B38; --brand-tint:#F0E7EA; --brand-soft:rgba(123,33,68,0.12);   --brand-on:#fff; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="ds"], .p-ds { --brand:#7A1FA2; --brand-ink:#641985; --brand-tint:#F0E6F5; --brand-soft:rgba(122,31,162,0.12);  --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="rv"], .p-rv { --brand:#B0299F; --brand-ink:#8F2181; --brand-tint:#F5DDF2; --brand-soft:rgba(176,41,159,0.12);  --brand-on:#fff; --accent:#FFB3C7; --accent-2:#F99DB6; /* blush */ }
/* реестры и право: гербовый синий, гранат, сталь, таможенный зелёный, петроль, чернила */
[data-product="zk"], .p-zk { --brand:#1D4FA8; --brand-ink:#173F85; --brand-tint:#E4EAF5; --brand-soft:rgba(29,79,168,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="to"], .p-to { --brand:#A11D45; --brand-ink:#7E1736; --brand-tint:#F4E4E9; --brand-soft:rgba(161,29,69,0.12);   --brand-on:#fff; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="bk"], .p-bk { --brand:#5B7085; --brand-ink:#4A5C6D; --brand-tint:#EBEEF0; --brand-soft:rgba(91,112,133,0.14);  --brand-on:#fff; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
[data-product="vd"], .p-vd { --brand:#1B5E3F; --brand-ink:#123E2A; --brand-tint:#E4ECE8; --brand-soft:rgba(27,94,63,0.12);    --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="dk"], .p-dk { --brand:#155E75; --brand-ink:#0F4252; --brand-tint:#E3ECEE; --brand-soft:rgba(21,94,117,0.12);   --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="pa"], .p-pa { --brand:#5B21B6; --brand-ink:#4A1B93; --brand-tint:#EBE4F6; --brand-soft:rgba(91,33,182,0.12);   --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
/* отраслевые порталы: приглушённые тона — море, вино, сталь, поле */
[data-product="fp"], .p-fp { --brand:#456F73; --brand-ink:#30575A; --brand-tint:#E7ECED; --brand-soft:rgba(69,111,115,0.14);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="mp"], .p-mp { --brand:#8A4257; --brand-ink:#702E41; --brand-tint:#F0E6E9; --brand-soft:rgba(138,66,87,0.14);  --brand-on:#fff; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="mt"], .p-mt { --brand:#394360; --brand-ink:#252D46; --brand-tint:#E5E7EA; --brand-soft:rgba(57,67,96,0.14);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="ag"], .p-ag { --brand:#5D7345; --brand-ink:#465A30; --brand-tint:#EAEDE7; --brand-soft:rgba(93,115,69,0.14);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }

/* лаймовый акцент как бренд — для платформенных CTA */

/* ============================================================
   01 · СБРОС И БАЗА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5; letter-spacing: -0.005em;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--sp-6) 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
svg.ic { display: inline-block; vertical-align: -0.16em; width: 1.1em; height: 1.1em; flex-shrink: 0; }  /* инлайновая иконка в тексте: не переносится на новую строку */

/* ============================================================
   02 · ТИПОГРАФИКА
   ============================================================ */
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
.h-display { font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.02; }
.h1 { font-size: clamp(29px, 3.6vw, 46px); letter-spacing: -0.032em; }
.h2 { font-size: clamp(23px, 2.6vw, 34px); letter-spacing: -0.028em; }
.h3 { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.018em; }
.h4 { font-size: 16px; letter-spacing: -0.012em; }
.h5 { font-size: 14px; letter-spacing: -0.01em; }
.lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-soft); max-width: 62ch; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12.5px; }
.text-muted { color: var(--muted); }
.text-soft { color: var(--ink-soft); }
.text-brand { color: var(--brand-ink); }
.text-ink { color: var(--ink); }   /* вернуть основной цвет внутри приглушённого текста (имя автора в мета-строке) */
.text-ok { color: var(--ok); } .text-warn { color: var(--warn); } .text-danger { color: var(--danger); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
.prose a { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
/* длинный текст: статья, страница услуги, документация */
.prose { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.prose--lg { font-size: 18px; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin-top: 1.9em; scroll-margin-top: 96px; }
.prose h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-top: 1.6em; scroll-margin-top: 96px; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose p + p { margin-top: 1.05em; }
.prose ul { list-style: disc; padding-left: 1.35em; }
.prose ol { list-style: decimal; padding-left: 1.35em; }  /* глобальный сброс снимает маркеры — в тексте они нужны */
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--brand); font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-size: 1.12em; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
.prose blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13.5px; color: var(--muted); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.prose img { display: block; max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.4em 0; }
.prose th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.prose code { font-family: var(--mono); font-size: .88em; padding: 2px 6px; background: var(--paper); color: var(--ink); }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2em 0; }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; white-space: nowrap; } }
.prose .lead { font-size: 1.18em; color: var(--ink-soft); }
/* врезка в тексте */
.callout { display: flex; gap: 14px; padding: 18px 20px; background: var(--brand-tint); color: var(--ink); font-size: 15px; line-height: 1.55; }
.callout svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-ink); margin-top: 2px; }
.callout b { display: block; margin-bottom: 4px; }
.callout--muted { background: var(--paper); }

/* моно-надстрочник — служебная подпись над заголовком */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
/* моноширинная капитель остаётся только у подписей полей и шапок таблиц; надстрочники и метки карточек — основным шрифтом */
.eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--brand); flex-shrink: 0; }
.eyebrow--plain::before { display: none; }
.eyebrow--flush { margin: 0; }
.eyebrow--on-dark { color: rgba(255,255,255,0.55); }
.eyebrow--on-dark::before { background: var(--accent); }
/* нумерованный надстрочник: клетка с номером раздела вместо чёрточки —
   тот же мотив, что и знак-элемент */
.eyebrow--num::before { display: none; }
.eyebrow--num i { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--brand); font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand-ink); letter-spacing: 0; }

/* маркер в заголовке */
/* z-index: 0 создаёт контекст, чтобы подложка с z-index: -1 не проваливалась под фон родителя */
.mark { position: relative; z-index: 0; display: inline; white-space: nowrap; }
.mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.24em; right: -0.24em; top: 0.08em; bottom: 0.1em;
  background: var(--accent);
}
.mark--brand::before { background: var(--brand-tint); }

/* шапка секции */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(26px, 3.4vw, 48px); }
.sec-head__t { max-width: 720px; }
.sec-head__t p { color: var(--ink-soft); margin-top: 14px; }
.sec-head__aside { flex-shrink: 0; display: flex; gap: 10px; align-items: center; }
.sec-head--center { justify-content: center; text-align: center; }
.sec-head--center .sec-head__t { margin: 0 auto; }
.sec-head--tight { margin-bottom: 18px; gap: 20px; }
.sec-head--tight .sec-head__t p { margin-top: 6px; font-size: 14.5px; }
@media (max-width: 720px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* ============================================================
   03 · СЕТКА И РАСКЛАДКА
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(28px, 3vw, 44px) 0; }
.section--soft { background: var(--paper); }
.section--line-b { border-bottom: 1px solid var(--line-2); }
.section--flush-b { padding-bottom: 0; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: rgba(255,255,255,0.68); }
.section--dark .eyebrow { color: rgba(255,255,255,0.55); }
.section--dark .eyebrow::before { background: var(--accent); }
.section--dark .sec-head__t p { color: rgba(255,255,255,0.66); }
.section--dark .logos__item { color: rgba(255,255,255,0.62); }
.section--brand { background: var(--brand); color: var(--brand-on); }
.section--brand h1, .section--brand h2, .section--brand h3 { color: var(--brand-on); }
.section--brand p, .section--brand .lead { color: var(--brand-on-soft); }
.section--brand .eyebrow { color: var(--brand-on-soft); }
.section--brand .eyebrow::before { background: var(--brand-on); }
/* отсечка: тёмная полоса между светлыми блоками — тезис и действие */
.band { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.band__t { font-size: clamp(19px, 2.1vw, 26px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.25; max-width: 38ch; }
.band__t small { display: block; font-size: 15px; font-weight: 450; color: rgba(255,255,255,0.62); margin-top: 8px; letter-spacing: 0; line-height: 1.5; }
.band__a { display: flex; gap: 10px; flex-wrap: wrap; }
.band__marks { display: flex; gap: 6px; flex-wrap: wrap; }

/* 12 колонок: .col-N задаёт ширину, на планшете всё складывается в 6, на телефоне — в 12 */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width: 1000px) { .grid > [class*="col-"] { grid-column: span 6; } .col-12 { grid-column: span 12; } }
@media (max-width: 600px)  { .grid > [class*="col-"] { grid-column: span 12; } }

/* авто-сетки для карточек */
.cols { display: grid; gap: var(--sp-4); }
/* minmax(0, 1fr): колонка не раздвигается под таблицу или длинное слово — они прокручиваются или переносятся внутри */
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1000px) { .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cols--2, .cols--3, .cols--4 { grid-template-columns: minmax(0, 1fr); } }

/* стопка и ряд */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--xs { gap: 6px; } .stack--sm { gap: var(--sp-2); } .stack--lg { gap: var(--sp-6); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--xs { gap: var(--sp-1); } .row--sm { gap: var(--sp-2); } .row--lg { gap: var(--sp-5); } .row--xl { gap: var(--sp-6); }
.row--center { justify-content: center; } .row--baseline { align-items: baseline; }
.grow { flex: 1; min-width: 0; }

/* две колонки: текст и список / форма и превью */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.split--wide-left { grid-template-columns: 1.4fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.6fr; }
.split--stretch { align-items: stretch; }  /* правый блок дотягивается до высоты левого: форма рядом с контактами */
/* страница с боковой колонкой: одна сетка на все внутренние страницы —
   основная колонка + сайдбар 320 px с зазором 32 px в контейнере 1320. Сайдбар справа по умолчанию,
   слева — --left, без сайдбара — --single. Других ширин сайдбара и зазоров нет: колонки совпадают от страницы к странице. */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; margin-bottom: clamp(40px, 6vw, 80px); }
.page--left { grid-template-columns: 320px minmax(0, 1fr); }
.page--left .page__aside { order: -1; }
.page--single { grid-template-columns: minmax(0, 1fr); }
.page--single .page__aside { display: none; }
.page__main { min-width: 0; }
/* колонка статьи той же ширины, что и у таблиц; ограничена только длина строки абзацев — для чтения.
   Таблицы, графики, врезки и заголовки занимают всю колонку. */
.page__main.prose { max-width: none; }
.page__main.prose > p, .page__main.prose > ul, .page__main.prose > ol, .page__main.prose > .lead { max-width: 74ch; }
/* липкий сайдбар выше окна прокручивается внутри себя, иначе низ недостижим */
.page__aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
/* прокрутки внутри сайдбара нет: если он выше окна, kit.js сдвигает top так, что липнет нижний край (data-aside) */
.page__aside--flow { position: static; }
/* заголовок страницы над колонками */
.pagehead { padding: 30px 0 26px; }
.pagehead .crumbs { margin-bottom: 18px; }
.pagehead h1 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.035em; line-height: 1.08; }  /* на всю ширину шапки, одинаково на всех страницах */
.pagehead__lead { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin-top: 14px; line-height: 1.5; }
.pagehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; font-size: 14px; color: var(--muted); }
/* оглавление в сайдбаре: активный пункт подсвечивает kit.js */
.toc { display: flex; flex-direction: column; border-left: 2px solid var(--line-2); }
.toc__label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 16px 8px; margin-left: -2px; }
.toc a { display: block; padding: 6px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); transition: color .12s ease, border-color .12s ease; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 600; }
.toc a.toc__sub { padding-left: 28px; font-size: 13px; }
/* карточка сайдбара: цена, контакт, «поделиться» */
.asidecard { background: #fff; border: 1px solid var(--line); padding: 20px; }
.asidecard--tint { background: var(--brand-tint); border-color: transparent; }
.asidecard--dark { background: var(--ink); color: #fff; border-color: transparent; }
.asidecard p:not([class]) { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }   /* абзац карточки без утилит: размер и цвет знает сама карточка */
.asidecard--dark p:not([class]) { color: rgba(255,255,255,.7); }
.asidecard__label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.asidecard--dark .asidecard__label { color: rgba(255,255,255,.55); }
.asidecard__price { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.asidecard__price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.asidecard__list { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; font-size: 14px; }
.asidecard__list li { display: flex; gap: 9px; align-items: flex-start; }
.asidecard__list svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 2px; }
.asidecard--dark .asidecard__list svg { color: var(--accent); }
.asidecard > .btn { width: 100%; }
.asidecard__note { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.asidecard--dark .asidecard__note { color: rgba(255,255,255,.55); }
.asidecard__person { display: flex; align-items: center; gap: 12px; }
.asidecard__person b { display: block; font-size: 14.5px; }
.asidecard__person small { display: block; font-size: 12.5px; color: var(--muted); }
/* список в сайдбаре: рубрики со счётчиками, страны, разделы */
.sidelist { display: flex; flex-direction: column; }
.sidelist a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; color: var(--ink); transition: color .12s ease; }
.sidelist a:last-child { border-bottom: 0; }
.sidelist a:hover { color: var(--brand-ink); }
.sidelist a.is-active { color: var(--brand-ink); font-weight: 650; }
.sidelist .n { margin-left: auto; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.sidelist .el { --el: 24px; }
.sidelist .rank { width: 30px; font-size: 13px; color: var(--muted); }
.sidelist a.is-active .rank { color: var(--brand-ink); }
.asidecard .sidelist a { padding-left: 0; padding-right: 0; }
/* рейтинг: пьедестал, строка таблицы с местом, динамикой и полоской */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* сетка «место · кто · число» — без переносов, чтобы положение элементов во всех трёх карточках совпадало; длинное имя режется многоточием */
.podium__i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); position: relative; min-width: 0; }
.podium__i > div:not(.num) { min-width: 0; }
.podium__i > div:not(.num) b, .podium__i > div:not(.num) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium--wrap .podium__i > div:not(.num) b { white-space: normal; line-height: 1.2; }  /* длинные имена (каналы, компании) переносятся, колонки те же */
.podium__i:has(> .avatar) { grid-template-columns: auto auto minmax(0, 1fr) auto; }  /* с аватаром: место · аватар · имя · число — такой подиум ставят на всю ширину контейнера, над сеткой main/aside */
@media (max-width: 1100px) { .podium__i > .avatar { --av: 36px; } .podium__i:has(> .avatar) .place { font-size: 24px; min-width: 32px; } }  /* на планшете аватар и место компактнее, чтобы имя и @handle читались целиком */
@media (max-width: 720px) { .podium { grid-template-columns: 1fr; } .podium__i { padding: 14px 16px; } }
.podium__i .place { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -0.05em; color: var(--brand-ink); line-height: 1; min-width: 38px; }
.podium__i b { display: block; font-size: 16px; font-weight: 750; letter-spacing: -0.015em; }
.podium__i small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.podium__i .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.podium__i .num small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.podium__i--1 { border-color: var(--brand); background: var(--brand-tint); }
/* ячейка «кто»: аватар или знак, имя и подпись */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who b { display: block; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.who small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.who b a:hover { text-decoration: underline; }
.who small .mono { font-size: 11.5px; } .who small .tag { vertical-align: 1px; margin-left: 4px; }   /* подпись: домен моноширинным, тег отрасли */
.rank { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); width: 64px; white-space: nowrap; }
.rank .delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; margin-left: 6px; color: var(--muted); vertical-align: 1px; }
.rank .delta svg { width: 10px; height: 10px; }
.rank .delta--up { color: var(--ok); } .rank .delta--down { color: var(--danger); }
.rank--top { color: var(--brand); }
.rbar { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.rbar .progress { flex: 1; }
.rbar .num { font-weight: 700; min-width: 64px; text-align: right; }
.cc { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
/* флаг страны: эмодзи в фиксированной клетке, чтобы строки не прыгали;
   там, где эмодзи-флагов нет (Windows), рядом остаётся код страны */
/* флаг — svg из спрайта flags.js, не эмодзи: одинаковая клетка 4:3, тонкая рамка, чтобы белые поля не пропадали */
.flag { display: inline-block; width: 20px; height: 15px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(11,27,43,0.1); flex-shrink: 0; }
.flag--lg { width: 40px; height: 30px; }
.flag--xl { width: 64px; height: 48px; }
.who .flag { width: 24px; height: 18px; }
/* поделиться: тот же .soc, что в футере, но на светлом */
.share { display: inline-flex; align-items: center; gap: 6px; }
.share__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.share .soc { width: 36px; height: 36px; background: var(--brand-tint); color: var(--brand-ink); }
.share .soc svg { width: 16px; height: 16px; }
.share .soc:hover { background: var(--brand); color: var(--brand-on); transform: none; }
/* ключ — значение: паспорт страны, метаданные ряда */
.keyval { display: flex; flex-direction: column; }
.keyval__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.keyval__row:last-child { border-bottom: 0; }
.keyval__k { color: var(--muted); }
.keyval__v { font-weight: 650; text-align: right; }
/* мини-график в строке: kit.js рисует по data-spark="1,2,3" */
.spark { display: inline-block; width: 96px; height: 28px; vertical-align: middle; }
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--brand); opacity: .12; stroke: none; }
.spark circle { fill: var(--brand); }
.spark--wide { width: 100%; height: 36px; }
.spark--muted path { stroke: var(--muted); } .spark--muted circle { fill: var(--muted); } .spark--muted .area { fill: var(--muted); }
.spark--ok path { stroke: var(--ok); } .spark--ok circle, .spark--ok .area { fill: var(--ok); }
.spark--danger path { stroke: var(--danger); } .spark--danger circle, .spark--danger .area { fill: var(--danger); }
/* плитка показателя: подпись, значение, динамика, мини-график */
.tile { background: #fff; border: 1px solid var(--line); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.tile__l { font-size: 12.5px; color: var(--muted); }
.tile__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.tile__f { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tile .spark { width: 100%; height: 32px; margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
/* шапка профиля: флаг, надстрочник, имя, факты */
/* профиль: надстрочник, затем флаг на одной линии с названием, ниже — факты в строку */
.profile { display: flex; flex-direction: column; min-width: 0; }
.profile__head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile__head h1, .profile__head .h1 { margin: 0; }
.profile__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.profile__facts b { color: var(--ink); font-weight: 650; }
/* полоса доступности данных */
.avail { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.avail__head { display: flex; justify-content: space-between; font-size: 13px; }
.avail__head b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* рамка графика: заголовок, подзаголовок, сам график */
.chartframe { background: #fff; border: 1px solid var(--line); padding: 16px 18px 14px; }
.chartframe__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.chartframe__t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.chartframe__s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chartframe .chart { width: 100%; height: auto; }
.cc .el { --el: 22px; }
@media (max-width: 860px) { .podium { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .page, .page--left, .page--single { grid-template-columns: minmax(0, 1fr); } .page__aside { position: static; } .page--left .page__aside { order: -1; } }
@media (max-width: 860px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

/* оболочка приложения: рельс фильтров + рабочая область */
.appshell { display: grid; grid-template-columns: 272px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1080px) { .appshell { grid-template-columns: 1fr; } }

/* ============================================================
   04 · ЭЛЕМЕНТ-ЗНАК
   Квадрат в духе клетки таблицы Менделеева: двухбуквенный символ
   продукта, при желании — порядковый номер и название.
   Цвет — из --brand ближайшего .p-* или data-product.
   ============================================================ */
.el {
  --el: 36px;
  position: relative; display: inline-grid; place-items: center;
  width: var(--el); height: var(--el); flex-shrink: 0;
  background: var(--brand); color: var(--brand-on);
  font-family: var(--font); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1;
  font-size: calc(var(--el) * 0.44);
  user-select: none;
}
.el__sym { display: block; transform: translateY(0.02em); }
/* второй сценарий знака: пиктограмма продукта из marks.js вместо двух букв — <span class="el p-zk"><svg><use href="#m-zk"></use></svg></span> */
.el > svg { width: 60%; height: 60%; display: block; }
.el--xs > svg { width: 70%; height: 70%; }
.el--xs { --el: 20px; letter-spacing: -0.04em; }
.el--sm { --el: 28px; }
.el--md { --el: 36px; }
.el--lg { --el: 48px; }
.el--xl { --el: 64px; }
.el--2x { --el: 96px; }
/* заливки */
.el--tint    { background: var(--brand-tint); color: var(--brand-ink); }
.el--outline { background: transparent; color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.el--on-dark { background: rgba(255,255,255,0.12); color: #fff; }
.el--accent  { background: var(--lime); color: var(--accent-ink); }  /* знак Dr — лайм платформы, не акцент продукта */

/* полная клетка: номер, символ, название */
.el--cell {
  --el: 112px;
  display: grid; grid-template-rows: auto 1fr auto; place-items: stretch;
  padding: 10px 12px; text-align: left;
}
.el--cell .el__num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; opacity: .7; }
.el--cell .el__sym { font-size: 40px; align-self: center; transform: none; }
.el--cell .el__nm  { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* знак + название продукта в одну строку */
.lockup { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); }
.lockup__nm { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.lockup--sm .lockup__nm { font-size: 16px; }
.lockup__sub { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* ============================================================
   05 · ШАПКА ПРОДУКТА
   Одна строка. Цветная линия сверху и знак — единственные носители
   цвета; всё остальное нейтральное, чтобы шапки продуктов
   различались, но оставались родственными.
   ============================================================ */
/* ---------- верхняя планка: цифры проекта и служебные ссылки ----------
   Стоит над шапкой и уезжает вместе со страницей (шапка липкая, планка нет).
   Цифры моноширинные, как на табло; ссылки справа — статус, язык, отзывы.
   --ticker пускает цифры бегущей строкой: продублируйте набор в .topbar__track. */
.topbar { background: var(--ink); color: rgba(255,255,255,0.72); font-size: 12.5px; }
.topbar__in { display: flex; align-items: center; gap: 24px; height: 36px; }
.topbar__stats { display: flex; align-items: center; min-width: 0; flex: 1; overflow: hidden; }
.topbar__track { display: flex; align-items: center; flex-shrink: 0; }
.topbar__stat { display: inline-flex; align-items: center; gap: 7px; padding-right: 16px; margin-right: 16px; border-right: 1px solid rgba(255,255,255,0.14); white-space: nowrap; }
.topbar__stats > .topbar__stat:last-child { border-right: 0; margin-right: 0; }
.topbar__stat b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -0.01em; }
.topbar__stat .trend { font-size: 11.5px; }
.topbar .live { display: inline-block; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 3px rgba(212,245,66,0.22); }
.topbar__links { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; }
.topbar__links a { color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__links a:hover { color: #fff; }
.topbar__links svg { width: 14px; height: 14px; }
.topbar__links .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.16); }
.topbar__links .badge { transform: translateY(-0.5px); }
.topbar--light { background: var(--paper); color: var(--ink-soft); border-bottom: 1px solid var(--line-2); }
.topbar--light .topbar__stat { border-right-color: var(--line); }
.topbar--light .topbar__stat b { color: var(--ink); }
.topbar--light .topbar__links a { color: var(--ink-soft); }
.topbar--light .topbar__links a:hover { color: var(--ink); }
.topbar--light .topbar__links .sep { background: var(--line); }
.topbar--brand { background: var(--brand); color: var(--brand-on-soft); }
.topbar--brand .topbar__stat { border-right-color: rgba(127,127,127,0.35); }
.topbar--brand .topbar__stat b, .topbar--brand .topbar__links a:hover { color: var(--brand-on); }
.topbar--brand .topbar__links a { color: var(--brand-on-soft); }
.topbar--brand .live { background: var(--brand-on); box-shadow: 0 0 0 3px rgba(127,127,127,0.25); }
.topbar--light .live { background: var(--ok); box-shadow: 0 0 0 3px rgba(31,138,91,0.18); }
.topbar--ticker .topbar__stats { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.topbar--ticker .topbar__track { animation: topbar-run 46s linear infinite; }
.topbar--ticker:hover .topbar__track { animation-play-state: paused; }
@keyframes topbar-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .topbar__stats { overflow-x: auto; scrollbar-width: none; }
  .topbar__stats::-webkit-scrollbar { display: none; }
  .topbar__links .hide-mobile { display: none; }
}

.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(250,252,254,0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  /* шапка меряет собственную ширину, а не окно: в узкой колонке
     (документация, приложение с боковой панелью) она сжимается так же,
     как на узком экране. Панели .drawer-nav и .modal кладите вне .hdr. */
  container-type: inline-size;
}
.hdr::before { content: ""; display: block; height: 3px; background: var(--brand); }
.hdr__in { display: flex; align-items: center; gap: 20px; height: 66px; }
.hdr__brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); position: relative; }
.hdr__name { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
/* каретка у знака — вход в меню продуктов платформы */
.hdr__brand .chev {
  width: 15px; height: 15px; padding: 3px; flex-shrink: 0;
  color: var(--brand); background: var(--brand-soft); transition: transform .22s ease;
}
.hdr__item:hover > .hdr__brand .chev { transform: rotate(180deg); }
/* поиск в шапке ужимается вместе с экраном, чтобы не выталкивать кнопки */
.hdr__actions .search, .hdr__search { width: clamp(150px, 14vw, 240px); width: clamp(150px, 14cqw, 240px); flex-shrink: 1; }
.hdr__nav { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 6px; }
.hdr__item { position: relative; }
.hdr__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  font-size: 14.5px; font-weight: 550; color: var(--ink); white-space: nowrap; position: relative;
  transition: background .15s ease;
}
.hdr__link:hover { background: rgba(11,27,43,0.05); }
.hdr__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--brand); opacity: 0; transform: scaleX(0.3); transition: opacity .18s ease, transform .18s ease;
}
.hdr__link.is-active { font-weight: 700; }
.hdr__link.is-active::after, .hdr__item:hover > .hdr__link::after { opacity: 1; transform: scaleX(1); }
.hdr__link .chev {
  width: 15px; height: 15px; padding: 3px; margin-left: -1px; flex-shrink: 0;
  color: var(--brand); background: var(--brand-soft); transition: transform .22s ease;
}
.hdr__item:hover > .hdr__link .chev { transform: rotate(180deg); }
.hdr__item > .menu { top: 100%; left: 0; margin-top: 6px; }
.hdr__item:hover > .menu { opacity: 1; visibility: visible; transform: none; }
.hdr__actions { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-shrink: 0; }
.hdr__burger { display: none; width: 42px; height: 42px; background: rgba(11,27,43,0.05); align-items: center; justify-content: center; }
.hdr__burger svg { width: 20px; height: 20px; }

/* варианты фона */
.hdr--dark { background: var(--ink); border-bottom-color: rgba(255,255,255,0.08); }
.hdr--dark .hdr__brand, .hdr--dark .hdr__link { color: #fff; }
.hdr--dark .hdr__link:hover { background: rgba(255,255,255,0.08); }
.hdr--dark .hdr__link .chev { background: rgba(255,255,255,0.14); color: #fff; }
.hdr--dark .hdr__burger { background: rgba(255,255,255,0.1); color: #fff; }
.hdr--tint { background: var(--brand-tint); }
.hdr--tint::before { display: none; }
.hdr--static { position: static; }

/* уже 900 px: навигация уходит в бургер; уже 560 px: остаются знак,
   бургер и одна кнопка с классом .keep-mobile (короткая подпись) */
@container (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__in { height: 60px; }
  .hdr .hide-mobile { display: none !important; }
}
@container (max-width: 1120px) { .hdr .hide-tablet { display: none !important; } }
@container (max-width: 560px) {
  .hdr__in { gap: 12px; }
  .hdr__actions { gap: 6px; }
  .hdr__actions .btn:not(.keep-mobile) { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .hdr__nav { display: none; }
    .hdr__burger { display: inline-flex; }
    .hdr__in { height: 60px; }
    .hdr .hide-mobile { display: none !important; }
  }
  @media (max-width: 560px) {
    .hdr__in { gap: 12px; }
    .hdr__actions { gap: 6px; }
    .hdr__actions .btn:not(.keep-mobile) { display: none; }
  }
}

/* мобильная панель */
.drawer-nav { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer-nav.is-open { display: block; }
.drawer-nav__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.55); }
.drawer-nav__panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(400px, 92vw);
  background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.drawer-nav__body { flex: 1; overflow-y: auto; padding: 14px; }
.drawer-nav__body a { display: block; padding: 13px 12px; font-size: 16px; font-weight: 600; }
.drawer-nav__body a:hover { background: rgba(11,27,43,0.05); }
.drawer-nav__body a.is-active { background: var(--brand-tint); color: var(--brand-ink); }
.drawer-nav__foot { padding: 14px 18px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }   /* кнопки шапки на телефоне: «Начать», «Войти» */

/* ============================================================
   05a · КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.008em; line-height: 1;
  white-space: nowrap; border: 1px solid transparent; position: relative;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; }

/* варианты */
.btn--brand   { background: var(--brand); color: var(--brand-on); }
.btn--brand:hover { background: var(--brand-hover); }
.btn--dark    { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }
.btn--accent  { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); }
.btn--accent:hover { background: var(--accent-2); }
.btn--soft    { background: var(--brand-tint); color: var(--brand-ink); }
.btn--soft:hover { background: var(--brand-soft); }
.btn--ghost   { background: rgba(11,27,43,0.05); color: var(--ink); }
.btn--ghost:hover { background: rgba(11,27,43,0.09); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #A63608; }
.btn--danger-soft { background: var(--danger-tint); color: var(--danger); }
.btn--link    { background: none; color: var(--brand-ink); padding: 0 4px; height: auto; }
.btn--link:hover { text-decoration: underline; transform: none; }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { background: rgba(255,255,255,0.88); }
.btn--on-dark-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--on-dark-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* размеры */
.btn--xs { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn--xs svg { width: 13px; height: 13px; }
.btn--sm { height: 36px; padding: 0 15px; font-size: 13.5px; gap: 6px; }
.btn--sm svg { width: 15px; height: 15px; }
.btn .chev { width: 14px; height: 14px; margin-left: -3px; opacity: .75; transition: transform .2s ease; }
.btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn--lg svg { width: 19px; height: 19px; }
.btn--block { width: 100%; }

/* только иконка — квадрат */
.btn--icon { padding: 0; width: 44px; }
.btn--icon.btn--xs { width: 28px; } .btn--icon.btn--sm { width: 36px; } .btn--icon.btn--lg { width: 52px; }

/* загрузка */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--brand-on); animation: spin .7s linear infinite;
}
.btn--outline.is-loading::after, .btn--ghost.is-loading::after, .btn--soft.is-loading::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* группа: кнопки срастаются */
.btn-group { display: inline-flex; }
.btn-group .btn--outline + .btn--outline { margin-left: -1px; }
.btn-group .btn:hover { transform: none; z-index: 1; }
.btn-group .btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   06 · ФОРМЫ
   ============================================================ */
.field { display: grid; gap: 6px; }
.field__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em;
}
.field__label .req { color: var(--danger); }
.field__label--mono { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field__hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.field__error { display: none; font-size: 12.5px; color: var(--danger); line-height: 1.4; }
.field.is-error .field__error { display: block; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--danger); }
.field.is-error .input:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
/* форма на всю высоту колонки: поле описания растягивается, кнопка остаётся внизу */
.form--fill { display: flex; flex-direction: column; }
.form--fill .field--grow { flex: 1; display: flex; flex-direction: column; }
.form--fill .field--grow .textarea { flex: 1; min-height: 140px; }
.form--fill > .row:last-of-type { margin-top: auto; }
.field.is-ok .input { border-color: var(--ok); }
.field--inline { grid-template-columns: 180px 1fr; align-items: center; gap: 12px; }
@media (max-width: 600px) { .field--inline { grid-template-columns: 1fr; } }

/* текстовые поля */
.input, .textarea, .select {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 15px; outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .textarea:hover, .select:hover { border-color: rgba(13,33,64,0.28); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--paper); color: var(--muted); cursor: not-allowed; }
.input[readonly] { background: var(--bg); }
.input--sm { height: 36px; padding: 0 12px; font-size: 14px; }
.input--lg { height: 52px; padding: 0 18px; font-size: 16px; }
.input--mono { font-family: var(--mono); font-size: 14px; }
.textarea { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.textarea--sm { min-height: 72px; }

/* нативный select со своей стрелкой */
.select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.select--sm { height: 36px; padding: 0 36px 0 12px; font-size: 14px; }

/* группа с префиксом / суффиксом */
.igroup { display: flex; align-items: stretch; }
.igroup .input { flex: 1; min-width: 0; }
.igroup__add {
  display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 14px; color: var(--muted); white-space: nowrap;
}
.igroup__add + .input, .input + .igroup__add { margin-left: -1px; }
.igroup .btn { height: auto; }

/* поле с иконкой (поиск) */
.search {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 14px; width: 100%;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search svg { width: 17px; height: 17px; flex-shrink: 0; }
.search input { border: 0; outline: 0; background: none; width: 100%; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search kbd { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; background: var(--paper-2); color: var(--muted); flex-shrink: 0; }
.search--sm { height: 36px; padding: 0 12px; }
.search--sm input { font-size: 14px; }
.search--lg { height: 56px; padding: 0 18px; }
.search--lg input { font-size: 16.5px; }
.search--lg svg { width: 20px; height: 20px; }

/* диапазон от–до */
.range { display: flex; align-items: center; gap: 8px; }
.range .input { font-family: var(--mono); font-size: 14px; }
.range span { color: var(--muted); flex-shrink: 0; }
/* ползунок: год, порог, диапазон */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: linear-gradient(90deg, var(--brand) var(--fill, 100%), var(--paper-2) var(--fill, 100%)); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: grab; }
.slider::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: grab; }
.slider:focus-visible { box-shadow: 0 0 0 4px var(--brand-soft); }
.slider-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.slider-wrap__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.slider-wrap__head b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ink); }
.slider-wrap__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* чекбокс и радио */
.check, .radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 14.5px; line-height: 1.35; position: relative; user-select: none;
}
.check input, .radio input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box, .radio__box {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.radio__box { border-radius: 999px; }  /* единственное скругление в ките: круг — смысловой признак радиокнопки, иначе её не отличить от чекбокса */
.check__box svg { width: 12px; height: 12px; color: var(--brand-on); opacity: 0; transition: opacity .12s ease; }
.radio__box::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-on); transform: scale(0); transition: transform .14s ease; }
.check:hover .check__box, .radio:hover .radio__box { border-color: rgba(13,33,64,0.35); }
.check input:checked + .check__box, .check input.is-indeterminate + .check__box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .check__box svg { opacity: 1; }
.check input.is-indeterminate + .check__box svg { opacity: 0; }
.check input.is-indeterminate + .check__box::after { content: ""; width: 9px; height: 2px; background: var(--brand-on); position: absolute; }
.radio input:checked + .radio__box { background: var(--brand); border-color: var(--brand); }
.radio input:checked + .radio__box::after { transform: scale(1); }
.check input:focus-visible + .check__box, .radio input:focus-visible + .radio__box { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); }
.check input:disabled ~ *, .radio input:disabled ~ * { opacity: .5; cursor: not-allowed; }
.check__t small, .radio__t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.check--card, .radio--card {
  padding: 13px 14px; border: 1px solid var(--line); background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.check--card:has(input:checked), .radio--card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

/* переключатель */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; position: relative; user-select: none; }
.switch__track {
  width: 40px; height: 22px; background: var(--paper-2);
  position: relative; flex-shrink: 0; transition: background .18s ease;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; box-shadow: 0 1px 3px rgba(11,27,43,0.3); transition: transform .18s ease;
}
.switch input:checked + .switch__track { background: var(--brand); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--brand-soft); }
.switch input:disabled ~ * { opacity: .5; cursor: not-allowed; }
.switch--sm .switch__track { width: 32px; height: 18px; }
.switch--sm .switch__track::after { width: 12px; height: 12px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(14px); }

/* сегментированный переключатель */
.seg { display: inline-flex; padding: 3px; background: var(--paper); gap: 2px; }
.seg__btn {
  height: 32px; padding: 0 14px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg__btn svg { width: 15px; height: 15px; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.seg--sm .seg__btn { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* кастомный селект (поведение в kit.js) */
.sel { position: relative; width: 100%; }
.sel__btn {
  width: 100%; height: 44px; padding: 0 40px 0 14px; text-align: left;
  border: 1px solid var(--line); background: #fff;
  font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sel__btn::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.sel__btn.is-placeholder { color: var(--muted); }
.sel__val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__btn:hover { border-color: rgba(13,33,64,0.28); }
.sel.is-open .sel__btn { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sel.is-open .sel__btn::after { transform: translateY(-20%) rotate(225deg); }
.sel__btn .badge { margin-left: auto; }
.sel__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-menu);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sel.is-open .sel__menu { opacity: 1; visibility: visible; transform: none; }
.sel__search { margin: 2px 2px 6px; }
.sel__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; font-size: 14.5px; cursor: pointer;
  transition: background .12s ease;
}
.sel__opt:hover, .sel__opt.is-focus { background: var(--paper); }
.sel__opt.is-selected { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.sel__opt .n { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sel__opt .check__box { margin: 0; }
/* селект стран — единственный способ выбрать страну (их может быть 200+, ряду пилюль не хватит места): флаг, название, число справа, поиск через data-search */
.sel__opt .flag { flex-shrink: 0; }
.sel__val .flag { margin-right: 8px; }
.sel__val .n { margin-left: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.sel__group { padding: 8px 10px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sel__empty { padding: 14px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.sel--sm .sel__btn { height: 36px; font-size: 14px; padding-left: 12px; }
.sel__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* загрузка файла */
.file {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.file:hover, .file.is-drag { border-color: var(--brand); background: var(--brand-tint); }
.file svg { width: 26px; height: 26px; color: var(--brand); }
.file b { font-size: 14.5px; }
.file small { font-size: 12.5px; color: var(--muted); }
.file input { display: none; }

/* набор полей в форме */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: var(--sp-2); }
.fieldset { border: 1px solid var(--line); padding: 18px 20px 20px; margin: 0; }
.fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }

/* ============================================================
   07 · ТЕГИ, БЕЙДЖИ, ИНДИКАТОРЫ
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  background: var(--brand-tint); color: var(--brand-ink);
}
.badge--ok     { background: var(--ok-tint); color: var(--ok); }
.badge--warn   { background: var(--warn-tint); color: var(--warn); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }
.badge--info   { background: var(--info-tint); color: var(--info); }
.badge--muted  { background: rgba(11,27,43,0.07); color: var(--muted); }
.badge--accent { background: var(--accent); color: var(--accent-ink); }
.badge--solid  { background: var(--brand); color: var(--brand-on); }
.badge--pro    { background: var(--ink); color: var(--accent); }
.badge--outline { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
/* штамп происхождения: источник, дата, заполненность — под цифрой или таблицей */
.stamp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.03em; color: var(--muted); padding: 4px 9px; border: 1px dashed var(--line); }
.stamp b { color: var(--ink-soft); font-weight: 600; }
.stamp .live { width: 6px; height: 6px; background: var(--ok); }
.stamp--solid { border-style: solid; background: var(--bg); }
.badge--dot::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.badge--lg { padding: 5px 11px; font-size: 11.5px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(11,27,43,0.06); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.tag--xs { padding: 2px 7px; font-size: 11px; }
.tag--brand { background: var(--brand-tint); color: var(--brand-ink); }
.tag--outline { background: transparent; border: 1px solid var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* чип — активное условие с крестиком */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 12px;
  background: var(--brand-tint); color: var(--brand-ink);
  font-size: 13px; font-weight: 650; line-height: 1.2;
}
.chip button { display: grid; place-items: center; width: 18px; height: 18px; opacity: .6; }
.chip button:hover { opacity: 1; background: rgba(255,255,255,0.6); }
.chip svg { width: 11px; height: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chips__clear { font-size: 12.5px; font-weight: 650; color: var(--muted); padding: 0 6px; }
.chips__clear:hover { color: var(--ink); text-decoration: underline; }

/* пилюля-фильтр (переключаемая) */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill--brand.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.pill .n { font-family: var(--mono); font-size: 11.5px; opacity: .7; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills--center { justify-content: center; }

/* статус-точка */
.dot { display: inline-block; width: 7px; height: 7px; background: var(--ok); flex-shrink: 0; }
.dot--warn { background: var(--warn); } .dot--danger { background: var(--danger); }
.dot--muted { background: var(--muted); }
.dot--pulse { box-shadow: 0 0 0 0 rgba(31,138,91,0.5); animation: dotPulse 2.4s infinite; }
@keyframes dotPulse { 70% { box-shadow: 0 0 0 7px rgba(31,138,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); } }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }

/* тренд */
.trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.trend svg { width: 13px; height: 13px; }
.trend--up { color: var(--ok); } .trend--down { color: var(--danger); } .trend--flat { color: var(--muted); }
/* для цен направление «хорошести» обратное — снизилась цена = хорошо */
.trend--price-down { color: var(--ok); } .trend--price-up { color: var(--danger); }

/* счётчик */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--brand); color: var(--brand-on); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.count--muted { background: rgba(11,27,43,0.1); color: var(--ink-soft); }
/* таблицы и их панели: рамка и линии, углы прямые — как и у всего остального в ките */
.tablewrap { background: #fff; border: 1px solid var(--line); overflow: hidden; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablescroll--y { max-height: 420px; overflow-y: auto; }
.tablescroll--sm { max-height: 220px; }
/* платный хвост: строки за лимитом размыты, поверх — карточка */
.tablewrap--locked { position: relative; }
.table tr.is-locked td { filter: blur(4px); user-select: none; pointer-events: none; }
.paywall { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 22px; display: flex; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 55%); pointer-events: none; }
.paywall__card { pointer-events: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 640px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.paywall__card .tile-ic { flex-shrink: 0; }
.paywall__card b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.paywall__card small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.paywall__card .btn { margin-left: auto; }
.table__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
/* строка источника: имя источника, лицензия, замок «ссылка и цитата — в Pro» */
.srcline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--muted); }
.srcline b { color: var(--ink); font-weight: 600; }
.srcline .lock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--paper); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.srcline .lock svg { width: 12px; height: 12px; }
/* запертый блок: код цитаты, превью — размыто и с кнопкой поверх */
.lockbox { position: relative; min-height: 104px; display: flex; flex-direction: column; }
.lockbox > .code, .lockbox > pre { flex: 1; }
.lockbox__veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; background: rgba(255,255,255,0.55); backdrop-filter: blur(3px); }
.lockbox__veil > * { flex-shrink: 0; }
.lockbox__veil p { font-size: 13px; font-weight: 600; color: var(--ink); }
.lockbox > .code, .lockbox > pre { filter: blur(1.5px); user-select: none; }
/* ============================================================
   08 · ТАБЛИЦЫ
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
  text-align: left; position: sticky; top: 0; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
  padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--bg); }
.table tr.is-hl td { background: var(--brand-tint); }  /* выделенная строка: «эта страна», «этот год» */
.table tr.is-hl td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--brand-tint); }
.table tbody tr.is-muted td { color: var(--muted); }
.table .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.table .chk { width: 40px; padding-right: 0; }
.table .actions { width: 1%; white-space: nowrap; text-align: right; }
.table--dense td { padding: 8px 12px; font-size: 13.5px; }
.table--dense thead th { padding: 9px 12px; }
.table--striped tbody tr:nth-child(even) { background: var(--bg); }
.table--lined td, .table--lined th { border-right: 1px solid var(--line-2); }
.table--lined td:last-child, .table--lined th:last-child { border-right: 0; }
.table--plain thead th { background: transparent; }

/* сортируемая шапка */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--ink); }
.table th .sarr { display: inline-block; width: 9px; margin-left: 5px; opacity: .35; font-family: var(--mono); }
.table th.is-sorted .sarr { opacity: 1; color: var(--brand); }

/* ячейка «главная»: аватар + название + подпись */
.cell-contact { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cell-contact span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.cell-contact svg { width: 13px; height: 13px; color: var(--muted); }
.cell-contact .locked { filter: blur(3.4px); user-select: none; color: var(--muted); }
.cell-geo { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13.5px; }
.cell-geo svg { width: 14px; height: 14px; color: var(--muted); }

/* действия в строке появляются при наведении */
.rowact { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .14s ease; }
tr:hover .rowact, tr:focus-within .rowact, .rowact.is-visible { opacity: 1; }

/* подвал таблицы */

/* тулбар над таблицей */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border: 1px solid var(--line); }
.toolbar__count { font-size: 14.5px; color: var(--ink-soft); }
.toolbar__count b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.toolbar__spacer { margin-left: auto; }
/* панель над таблицей: поиск, фильтры, ползунок, переключатель вида.
   Липнет под шапкой; --attached срастается с таблицей снизу */
/* .toolbar (одна строка) описан в разделе таблиц; --stack складывает несколько строк */
.toolbar--stack { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.toolbar--sticky { position: sticky; top: 74px; z-index: 5; }
.toolbar--attached { border-bottom: 0; }
.toolbar--flush { border: 0; border-bottom: 1px solid var(--line-2); }
.toolbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar__row + .toolbar__row { padding-top: 10px; border-top: 1px solid var(--line-2); }
.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.toolbar .search { width: clamp(180px, 22vw, 280px); }

/* ---------- полоса действий: скачать, цитировать, поделиться — липнет под шапкой ----------
   <div class="actionbar" data-stuck> … kit.js добавляет .is-stuck, когда полоса прилипла */
.actionbar { position: sticky; top: 70px; z-index: 6; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.actionbar__in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
.actionbar__title { display: none; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 14.5px; margin-right: 8px; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actionbar.is-stuck { box-shadow: 0 10px 28px -14px rgba(11,27,43,0.22); }
.actionbar.is-stuck .actionbar__title { display: inline-flex; }
.actionbar .share { margin-left: auto; }
.actionbar__sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
@media (max-width: 720px) { .actionbar { position: static; } .actionbar .share { margin-left: 0; width: 100%; } }

/* ---------- полоса фильтров: во всю ширину страницы, цветом ----------
   Не липнет: заголовки колонок таблицы всё равно уезжают, а полоса занимает высоту. */
.filterbar { background: var(--brand-tint); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 16px 0 18px; }
.filterbar__row { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; }
.filterbar__row + .filterbar__row { margin-top: 12px; }
.filterbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filterbar__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.filterbar__field--grow { flex: 1 1 240px; }
.filterbar__field--sm { width: 132px; } .filterbar__field--md { width: 224px; }
.filterbar .search, .filterbar .sel__btn, .filterbar .select { background: #fff; }
.filterbar .search, .filterbar .sel { width: 100%; }
.filterbar__end { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }
/* итог выборки — отдельной строкой под фильтрами: это результат, а не управление */
.filterbar__result { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(11,27,43,0.12); font-size: 13.5px; color: var(--ink-soft); }
.filterbar__result b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.filterbar__result a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,27,43,0.25); }
.filterbar__result a:hover { text-decoration-color: currentColor; }
.filterbar__result .filterbar__dot { color: var(--muted); }
.filterbar__result-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filterbar .slider-wrap { min-width: 240px; }
.filterbar .seg { background: rgba(255,255,255,0.7); }
@media (max-width: 720px) { .filterbar__field--sm, .filterbar__field--md { width: 100%; } .filterbar__end { margin-left: 0; width: 100%; } }

/* панель выделения */
.selbar {
  position: sticky; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
}
.selbar--inline { position: static; margin: 12px; }
.selbar b { font-family: var(--mono); font-size: 15px; }
.selbar > svg { width: 19px; height: 19px; color: var(--accent); }
.selbar__hint { color: rgba(255,255,255,0.6); font-size: 13.5px; }
.selbar__sp { margin-left: auto; display: flex; gap: 9px; }

/* рельс фильтров */
.frail { background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.frail--sticky { position: sticky; top: 84px; }
.frail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.frail__head h2, .frail__head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; }
.frail__reset { font-size: 12.5px; font-weight: 650; color: var(--brand-ink); }
.frail__reset:hover { text-decoration: underline; }
.frail__body { padding: 6px 0 10px; }
.frail__foot { padding: 13px 15px; border-top: 1px solid var(--line-2); background: var(--bg); }
.fgroup { border-bottom: 1px solid var(--line-2); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__sum { list-style: none; cursor: pointer; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; }
.fgroup__sum::-webkit-details-marker { display: none; }
.fgroup__sum:hover { background: var(--bg); }
.fgroup__sum::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; }
.fgroup[open] > .fgroup__sum::after { transform: rotate(225deg) translate(-1px,-1px); }
.fgroup__n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; background: var(--brand-tint); color: var(--brand-ink); padding: 2px 6px; margin-left: auto; margin-right: 4px; }
.fgroup__n:empty { display: none; }
.fgroup__body { padding: 2px 13px 14px; display: grid; gap: 1px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; cursor: pointer; font-size: 13.5px; transition: background .12s ease; }
.fopt:hover { background: var(--bg); }
.fopt .check__box { margin: 0; width: 17px; height: 17px; }
.fopt.check { display: flex; font-size: 13.5px; line-height: 1.3; }
.frail__search { margin: 6px 12px 8px; width: auto; }
.frail .range { padding: 4px 8px 8px; }
.frail--w { width: 272px; }
.fopt__t { flex: 1; min-width: 0; line-height: 1.3; }
.fopt__n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ============================================================
   09 · КАРТОЧКИ
   ============================================================ */
.card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card__head h3, .card__head h4 { font-size: 15.5px; font-weight: 750; letter-spacing: -0.015em; }
.card__body { padding: 20px; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); }
.card--pad { padding: 20px; }
.card--tint { background: var(--brand-tint); border-color: transparent; }
.card--dark { background: var(--ink); color: #fff; border-color: rgba(255,255,255,0.12); }
/* карточка продукта: знак, имя, описание, теги, подвал со статистикой */
.card--product { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.card__stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.card--dark .card__head, .card--dark .card__foot { border-color: rgba(255,255,255,0.1); background: transparent; }
.card--dark h3, .card--dark h4, .card--dark .h2, .card--dark .h3, .card--dark .h4 { color: #fff; }
.card--dark p { color: rgba(255,255,255,0.65); }
.card--link { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card--stripe { position: relative; overflow: hidden; }
.card--stripe::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.card--pastel { border-color: transparent; }
.card--pastel.mint { background: var(--tint-mint); } .card--pastel.sky { background: var(--tint-sky); }
.card--pastel.lavender { background: var(--tint-lavender); } .card--pastel.peach { background: var(--tint-peach); }
.card--pastel.citron { background: var(--tint-citron); } .card--pastel.rose { background: var(--tint-rose); }

/* иконочная плитка внутри карточек */
.tile-ic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.tile-ic svg { width: 23px; height: 23px; }
.tile-ic--dark { background: var(--ink); color: var(--accent); }
.tile-ic--glass { background: rgba(255,255,255,0.1); color: #fff; } /* на тёмных карточках */
.tile-ic--sm { width: 34px; height: 34px; } .tile-ic--sm svg { width: 18px; height: 18px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpi { background: #fff; padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 6px; }
.kpi__n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.kpi__n .u { font-size: .52em; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.kpi__l { color: var(--ink-soft); font-size: 13.5px; }
.kpi__d { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi--card { border: 1px solid var(--line); }
/* метрики на тёмном */
.kpis--dark { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); }
.kpis--dark .kpi { background: var(--ink); }
.kpis--dark .kpi__n { color: #fff; }
.kpis--dark .kpi__n .u { color: rgba(255,255,255,0.45); }
.kpis--dark .kpi__l { color: rgba(255,255,255,0.6); }
.kpis--dark .kpi__d { color: rgba(255,255,255,0.45); }
.kpis--accent .kpi__n { color: var(--accent); }

/* тариф */
.tier { padding: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; position: relative; }
.tier--hl { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tier__tag { position: absolute; top: -11px; left: 24px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--brand); color: var(--brand-on); padding: 4px 10px; }
.tier__nm { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }   /* справа может стоять .badge: «базовый», «стандарт» */
.tier__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: -4px; }   /* тариф-формат без цены: описание вместо .tier__p */
.tier__p { display: flex; align-items: baseline; gap: 6px; }
.tier__p b { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.tier__p span { font-size: 13.5px; color: var(--muted); }
.tier__l { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.tier__l li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.tier__l svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 2px; }
.tier .btn { margin-top: auto; }

/* CTA-полоса */
.cta { background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta::before { content: ""; position: absolute; left: -8%; bottom: -60%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle at center, var(--accent) 0%, transparent 62%); opacity: .16; pointer-events: none; }
.cta__t { position: relative; z-index: 1; max-width: 620px; }
.cta__t h2, .cta__t h3, .cta__t h4 { color: #fff; }
.cta__t p { color: rgba(255,255,255,0.68); margin-top: 12px; }
.cta__a { position: relative; z-index: 1; display: flex; gap: 11px; flex-wrap: wrap; }
.cta--brand { background: var(--brand); color: var(--brand-on); }
.cta--brand .cta__t h2 { color: var(--brand-on); }
.cta--brand .cta__t p { color: var(--brand-on-soft); }
.cta--brand .btn--on-dark { background: #fff; color: var(--brand-ink); }  /* не --ink: у dr он сливался бы с фоном блока */
.cta--brand .btn--on-dark:hover { background: rgba(255,255,255,0.9); }
.cta--brand::before { background: radial-gradient(circle at center, #fff 0%, transparent 62%); opacity: .14; }

/* ============================================================
   10 · НАВИГАЦИЯ: КРОШКИ, ТАБЫ, ПАГИНАЦИЯ, ШАГИ
   ============================================================ */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--line); font-weight: 600; }
.crumbs .is-current { color: var(--ink); font-weight: 600; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs__tab {
  padding: 11px 14px; font-size: 14.5px; font-weight: 600; color: var(--muted);
  position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .15s ease;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); opacity: 0; }
.tabs__tab.is-active { color: var(--ink); }
.tabs__tab.is-active::after { opacity: 1; }
.tabs__tab .count { margin-left: 2px; }
.tabs--pill { border: 0; gap: 4px; }
.tabs--pill .tabs__tab { padding: 8px 14px; }
.tabs--pill .tabs__tab::after { display: none; }
.tabs--pill .tabs__tab.is-active { background: var(--ink); color: #fff; }
.tabs--scroll { overflow-x: auto; scrollbar-width: none; }
.tab-panel { display: none; padding-top: var(--sp-5); }
.tab-panel.is-active { display: block; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pager__info { font-size: 13.5px; color: var(--muted); font-family: var(--mono); }
.pager__list { display: flex; gap: 5px; align-items: center; }
.pager__list a, .pager__list span {
  min-width: 36px; height: 36px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.pager__list a:hover { border-color: var(--ink); }
.pager__list .is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.pager__list .gap { border: 0; background: none; color: var(--muted); min-width: 20px; padding: 0; }
.pager__list a svg { width: 15px; height: 15px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: step; }
.step { position: relative; padding: 14px 14px 14px 0; border-top: 2px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 8px; }
.step.is-done { border-top-color: var(--ok); }
.step.is-done::before { color: var(--ok); }
.step.is-active { border-top-color: var(--brand); }
.step.is-active::before { color: var(--brand-ink); }
.step__t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; }
.step__d { font-size: 13px; color: var(--muted); margin-top: 3px; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   11 · ОВЕРЛЕИ: МЕНЮ, МОДАЛКА, ПАНЕЛЬ, ПОДСКАЗКА, ТОСТ
   ============================================================ */
.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute; z-index: var(--z-menu); min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu--right { right: 0; }
.menu--wide { min-width: 300px; }
.menu__label { padding: 8px 10px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; font-size: 14px; color: var(--ink); cursor: pointer;
  transition: background .12s ease;
}
.menu__item:hover { background: var(--paper); }
.menu__item.is-active { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.menu__item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.menu__item.is-active svg { color: var(--brand); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger svg { color: var(--danger); }
.menu__item kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.menu__item small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.menu__sep { height: 1px; background: var(--line-2); margin: 6px 4px; }
/* насыщенный пункт: иконка-плитка + заголовок + подпись */
.menu__rich { display: flex; align-items: center; gap: 11px; padding: 9px 10px; }
.menu__rich:hover { background: var(--brand-tint); }
.menu__rich b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.menu__rich small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* ---------- меню навигации: раскладки ----------
   Всё это варианты одного .menu, поэтому цвета, тени и отступы
   общие. Отличается только внутренняя сетка. */
.menu--inline { position: static; opacity: 1; visibility: visible; transform: none; }
.menu--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; min-width: 520px; }
.menu--cols .menu__label, .menu--cols .menu__sep, .menu--cols .menu__foot { grid-column: 1 / -1; }
.menu__col { display: grid; gap: 2px; align-content: start; }
.menu__col .menu__label { grid-column: auto; }
.menu--promo { display: grid; grid-template-columns: 1fr 232px; gap: 6px 10px; min-width: 580px; }
.menu__promo {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--brand-tint); color: var(--ink);
}
.menu__promo b { font-size: 14px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.menu__promo p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.menu__promo .btn { margin-top: auto; align-self: flex-start; }
.menu__promo--dark { background: var(--ink); color: #fff; }
.menu__promo--dark p { color: rgba(255,255,255,0.66); }
.menu__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 10px 4px 2px; border-top: 1px solid var(--line-2); }
.menu__foot a { font-size: 13px; font-weight: 650; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 5px; }
.menu__foot a svg { width: 13px; height: 13px; }
.menu__foot .spacer { margin-left: auto; }
.menu__foot .text-muted { color: var(--muted); font-weight: 500; }
.menu__rich .tile-ic { width: 34px; height: 34px; }
.menu__rich .tile-ic svg { width: 18px; height: 18px; }
.menu__rich .badge { margin-left: auto; align-self: flex-start; }
.menu__rich--el .el { flex-shrink: 0; }

/* ---------- мега-меню под всей шапкой ----------
   Пункт шапки с классом .hdr__item--mega теряет position: relative,
   и панель растягивается на ширину контейнера шапки. */
.hdr__item--mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
  padding: 0 var(--pad-x);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hdr__item--mega:hover > .mega, .mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega--inline { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 4px; }
.mega__panel {
  max-width: calc(var(--container) - 2 * var(--pad-x)); margin: 8px auto 0;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden; display: grid;
}
.mega--rail .mega__panel { grid-template-columns: 296px 1fr; max-height: calc(100vh - 110px); }
.mega__rail { padding: 12px; background: var(--bg); border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.mega__cat {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; color: var(--ink);
  transition: background .14s ease, box-shadow .14s ease;
}
.mega__cat:hover, .mega__cat.is-active { background: #fff; box-shadow: var(--shadow-sm); }
.mega__cat b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; }
.mega__cat small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.mega__cat .tile-ic { width: 36px; height: 36px; }
.mega__cat .tile-ic svg { width: 19px; height: 19px; }
.mega__cat .go { margin-left: auto; width: 12px; height: 12px; color: var(--brand); opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
.mega__cat:hover .go, .mega__cat.is-active .go { opacity: 1; transform: none; }
.mega__panes { display: grid; padding: 24px 26px; overflow-y: auto; }
.mega__pane { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
.mega__pane.is-active { opacity: 1; pointer-events: auto; transition: opacity .15s ease; }
.mega__head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.mega__head h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.018em; }
.mega__head p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; max-width: 64ch; line-height: 1.4; }
.mega__head .dot { width: 10px; height: 10px; background: var(--brand); margin-top: 6px; }
.mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; }
.mega__link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; transition: background .12s ease; }
.mega__link:hover { background: var(--brand-tint); }
.mega__link .tile-ic { width: 30px; height: 30px; }
.mega__link .tile-ic svg { width: 16px; height: 16px; }
.mega__link small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
/* ссылки с описанием: <b>название</b><small>что делает услуга</small>; список — в две колонки, иконка по верху строки */
.mega__links--desc { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.mega__links--desc .mega__link { align-items: flex-start; padding: 10px; }
.mega__links--desc .mega__link .tile-ic { margin-top: 1px; }
.mega__link b { display: block; font-weight: 650; }
.mega__link small { line-height: 1.35; }
.mega__group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mega__group .menu__label { padding-left: 2px; }
.mega__foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.mega__foot .spacer { margin-left: auto; }

/* мега-меню сеткой карточек */
.mega--grid .mega__panel { display: block; padding: 22px 24px; max-width: 980px; }
.mega__gridhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mega__gridhead h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.018em; }
.mega__gridhead p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega__card {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mega__card:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mega__card b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.mega__card small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.mega__card .badge { margin-left: auto; }
.mega__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }

/* мега-меню продуктов: витрина знаков + платформенная колонка */
.mega--products .mega__panel { grid-template-columns: 1fr 272px; }
.mega__aside { background: var(--paper); border-left: 1px solid var(--line-2); padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 3px; }
.mega__aside .menu__label { padding-left: 2px; }
.mega__aside .menu__item { background: transparent; }
.mega__aside .menu__item:hover { background: #fff; }
.mega__note { margin-top: auto; padding: 12px 13px; background: #fff; border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.mega__card.is-current { border-color: var(--brand); background: var(--brand-tint); }
.mega__cur { margin-left: auto; width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
/* три колонки: семьи · продукты семьи · общее */
.mega--rail.mega--products .mega__panel { grid-template-columns: 272px minmax(0, 1fr) 248px; }
.mega__rail .menu__label { padding-left: 12px; }
.mega--rail.mega--products .mega__rail .menu__label { padding-bottom: 6px; }
.mega--rail.mega--products .mega__cat small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega__grid--2 { grid-template-columns: repeat(2, 1fr); }
.mega--products .mega__card { align-items: center; }
.mega--products .mega__card small { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1100px) {
  .mega--rail .mega__panel { grid-template-columns: 260px 1fr; }
  .mega__links { grid-template-columns: repeat(2, 1fr); }
  .mega--products .mega__panel { grid-template-columns: 1fr; }
  .mega--rail.mega--products .mega__panel { grid-template-columns: 240px minmax(0, 1fr); }
  .mega__aside { border-left: 0; border-top: 1px solid var(--line-2); grid-column: 1 / -1; }
}
/* на телефоне выпадающие панели живут в .drawer-nav, а эти правила
   нужны страницам-картам и документации, где панель лежит в потоке */
@media (max-width: 720px) {
  .menu--cols, .menu--promo { min-width: 0; width: 100%; grid-template-columns: 1fr; }
  .mega--rail .mega__panel, .mega--rail.mega--products .mega__panel { grid-template-columns: 1fr; max-height: none; }
  .mega__grid--2 { grid-template-columns: 1fr; }
  .mega__rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .mega__cat { flex-shrink: 0; width: auto; }
  .mega__cat small, .mega__cat .go { display: none; }
  .mega__panes { padding: 18px 16px; }
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mega__links, .mega__links--desc, .mega__grid { grid-template-columns: 1fr; }
}

/* модальное окно; --paywall — платный доступ: надстрочник, список, цена */
.modal__eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
.modal__list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-size: 14.5px; }
.modal__list li { display: flex; gap: 10px; align-items: flex-start; }
.modal__list svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 3px; }
.modal__price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 18px; }
.modal__price b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.modal__price span { font-size: 13.5px; color: var(--muted); }
.modal__fine { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
/* модальное окно */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.55); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  background: #fff; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: modalIn .18s ease;
}
.modal__box--sm { max-width: 400px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.modal__head h3 { font-size: 18px; letter-spacing: -0.02em; }
.modal__head p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.modal__x { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(11,27,43,0.05); flex-shrink: 0; }
.modal__x:hover { background: rgba(11,27,43,0.1); }
.modal__x svg { width: 16px; height: 16px; }
.modal__body { padding: 18px 22px; overflow-y: auto; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; border-top: 1px solid var(--line-2); }

/* боковая панель */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer.is-open { display: block; }
.drawer__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.45); }
.drawer__box {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(520px, 94vw);
  background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: drawerIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.drawer__head h3 { font-size: 16px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer__foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg); }
.drawer__box--sm { width: min(440px, 94vw); }
.drawer__foot--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.drawer__head .badge { margin-left: 2px; }

/* ---------- магазин датасетов: корзина в шапке, панель корзины, конфигуратор выгрузки, образец с маской ----------
   Корзина одна на сайт (kit.js: Kit.cart, localStorage «dx_cart»). Кнопка в шапке .cartbtn со счётчиком [data-cart-count],
   панель — обычный .drawer с узкой коробкой; строки и итог рисует kit.js из тех же классов, что и в разметке. */
.cartbtn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(11,27,43,0.05); color: var(--ink); flex-shrink: 0; transition: background .15s ease; }
.cartbtn:hover { background: rgba(11,27,43,0.09); }
.cartbtn svg { width: 20px; height: 20px; }
.cartbtn__n { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; background: var(--brand); color: var(--brand-on); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.cartbtn__n.is-zero { display: none; }
.cartbtn.is-bump .cartbtn__n { animation: cart-bump .4s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.cartline { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cartline:first-child { padding-top: 0; }
.cartline:last-child { border-bottom: 0; }
.cartline__body { flex: 1; min-width: 0; }
.cartline__cat { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cartline__t { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; }
.cartline__t a { color: inherit; } .cartline__t a:hover { color: var(--brand-ink); }
.cartline__meta { font-size: 13px; color: var(--ink-soft); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartline__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.cartline__p { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.cartsum { display: flex; flex-direction: column; gap: 8px; }
.cartsum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-soft); }
.cartsum__row b { color: var(--ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.cartsum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 15px; font-weight: 700; }
.cartsum__total b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.cartsum__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cartsum__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }

/* карточка датасета в каталоге: все одной высоты, заголовок и описание обрезаны, цена и кнопка прижаты к низу */
.dsets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dsets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dset { background: #fff; border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dset:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
.dset__head { display: flex; align-items: center; gap: 12px; }
.dset__cat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dset__t { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dset__t a { color: inherit; } .dset__t a:hover { color: var(--brand-ink); }
.dset__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dset__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.dset__stats b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 750; color: var(--ink); }
.dset__stats .live { display: inline-block; width: 6px; height: 6px; background: var(--ok); margin-right: 5px; vertical-align: 1px; }
.dset__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dset__price b { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dset__price small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.dset__foot .btn { flex-shrink: 0; }
.is-in-cart.btn { background: var(--brand-tint); color: var(--brand-ink); pointer-events: none; }
@media (max-width: 1100px) { .dsets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dsets, .dsets--2 { grid-template-columns: minmax(0, 1fr); } }

/* образец данных: контакты замьючены — сервер отдаёт уже маскированные значения, стиль только подчёркивает, что это не данные, а заглушка */
.mask { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.th-lock { width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; color: var(--muted); }
.lockline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.lockline svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.lockline b { color: var(--ink); }

/* конфигуратор выгрузки: таблица регионов с чекбоксами (.chk), выбранные строки — .is-hl (kit.js: bindPricer) */
.pricer-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--tint-citron); color: var(--ink); font-size: 13px; line-height: 1.45; margin: 14px 0; }
.pricer-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #9A7400; }
.pricer-hint button, .pricer-hint a { font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.asidecard__price-note { display: block; font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
.asidecard .btn + .btn { margin-top: 8px; }
/* страница базы — не сайдбарная сетка, а «карточка»: описание слева, справа широкая панель покупки (460) с выбором
   регионов и ценой; образец данных и всё остальное — ниже во всю ширину. Панель не липкая: она стоит на своём месте,
   а «В корзину» с живой ценой при прокрутке даёт полоса действий (.stuck-only). */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: start; }
.pdp__main { min-width: 0; }
.pdp__side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .pdp { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; } }
@media (max-width: 960px) { .pdp { grid-template-columns: minmax(0, 1fr); } }

/* панель покупки: список регионов, сводка, цена, действия */
.buybox { background: #fff; border: 1px solid var(--line); padding: 22px 24px; }
.buybox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.buybox__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; margin-top: 12px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.buybox__sum span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.buybox__sum b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybox__price { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 16px 0 14px; }
.buybox__price .asidecard__price { font-size: 34px; }
.buybox__price .asidecard__price-note { margin: 6px 0 0; }
.buybox__actions { display: flex; gap: 10px; }
.buybox__actions .btn { flex: 1; }
.buybox .pricer-hint { margin: 12px 0 0; }
.buybox .asidecard__list { margin-bottom: 0; }
@media (max-width: 480px) { .buybox { padding: 18px; } .buybox__actions { flex-direction: column; } }

/* список выбора: поиск, строка «вся база» и область регионов .picklist__body с прокруткой — полоса прокрутки видна всегда
   (стилизована, поэтому не прячется даже на macOS), чтобы было понятно, что список длиннее. Первая строка «вся база» — data-pricer-all,
   чек у неё такой же квадратный, как у регионов. */
.picklist { display: flex; flex-direction: column; }
.picklist__body { max-height: 400px; overflow-y: scroll; padding: 4px 8px 4px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
/* Chrome и Safari: свои стили полосы делают её классической — видна всегда, даже когда в macOS полосы «показывать при прокрутке».
   Важно: стандартные scrollbar-width / scrollbar-color здесь задавать нельзя — в Chrome они отключают ::-webkit-scrollbar,
   и полоса снова становится системной прячущейся. Их получает только Firefox через @supports. */
.picklist__body::-webkit-scrollbar { width: 10px; -webkit-appearance: none; }  /* -webkit-appearance: none — без него macOS оставляет прячущуюся системную полосу */
.picklist__body::-webkit-scrollbar-track { background: var(--paper-2); margin: 6px 2px; }
.picklist__body::-webkit-scrollbar-thumb { background: rgba(13,33,64,0.34); border: 2px solid var(--paper-2); min-height: 36px; }
.picklist__body::-webkit-scrollbar-thumb:hover { background: rgba(13,33,64,0.5); }
@supports not selector(::-webkit-scrollbar) { .picklist__body { scrollbar-width: thin; scrollbar-color: rgba(11,27,43,0.4) rgba(11,27,43,0.07); } }
.picklist__search { width: auto; margin-bottom: 6px; }
.picklist__head, .picklist__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; }
.picklist__head { padding-top: 6px; padding-bottom: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.picklist__head .num { text-align: right; }
.picklist__row { position: relative; width: 100%; cursor: pointer; font-size: 14px; color: var(--ink); text-align: left; transition: background .12s ease; }
.picklist__row:hover { background: var(--bg); }
.picklist__row input { position: absolute; opacity: 0; width: 0; height: 0; }
.picklist__chk { width: 18px; height: 18px; border: 1.5px solid rgba(13,33,64,0.25); background: #fff; display: grid; place-items: center; transition: background .12s ease, border-color .12s ease; }
.picklist__chk svg { width: 11px; height: 11px; color: var(--brand-on); opacity: 0; }
.picklist__row:has(input:checked), .picklist__row.is-active { background: var(--brand-tint); }
.picklist__row:has(input:checked) .picklist__chk, .picklist__row.is-active .picklist__chk { background: var(--brand); border-color: var(--brand); }
.picklist__row:has(input:checked) .picklist__chk svg, .picklist__row.is-active .picklist__chk svg { opacity: 1; }
.picklist__row input:focus-visible ~ .picklist__chk { box-shadow: 0 0 0 3px var(--brand-soft); }
.picklist__nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picklist__row--all .picklist__nm { font-weight: 750; }
.picklist__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); }
.picklist__p { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 750; min-width: 64px; text-align: right; }
.picklist__row--all { margin-bottom: 6px; }
.picklist.is-searching .picklist__row:not(.picklist__row--all) { display: none; }
.picklist.is-searching .picklist__row.is-match { display: grid; }
.picklist .picklist__row:has(input:checked) { display: grid; }
.picklist__empty { display: none; padding: 12px 10px; font-size: 13px; color: var(--muted); text-align: center; }
.picklist.is-searching.is-empty .picklist__empty { display: block; }
.picklist__foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px 0; font-size: 12px; color: var(--muted); }
/* шапка и строка «вся база» стоят над областью прокрутки — отступ справа равен полосе, чтобы колонки совпадали */
.picklist__head { padding-right: 28px; }
.picklist__row--all { width: calc(100% - 18px); }
.actionbar .stuck-only { display: none; }
.actionbar.is-stuck .stuck-only { display: inline-flex; }

/* подсказка — на чистом CSS через data-tip */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-menu);
  left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.35;
  padding: 6px 10px; white-space: nowrap; pointer-events: none;
  display: none; /* скрытая подсказка не участвует в раскладке — не даёт горизонтальной прокрутки у края */
}
.tip::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink); display: none;
}
.tip:hover::after, .tip:focus-visible::after, .tip:hover::before, .tip:focus-visible::before { display: block; animation: tip-in .15s ease both; }
@keyframes tip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.tip--b::after { bottom: auto; top: calc(100% + 8px); }
.tip--b::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--ink); }
.tip--b:hover::after, .tip--b:hover::before { animation-name: tip-in-b; }
@keyframes tip-in-b { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
/* у правого края — подсказка прижата к правому краю элемента, у левого — к левому */
.tip--r::after { left: auto; right: 0; transform: none; }
.tip--l::after { left: 0; transform: none; }
.tip--wrap::after { white-space: normal; width: max-content; max-width: 240px; }
/* светлая подсказка — на тёмных фонах (футер, тёмный герой) */
.footer .tip::after, .hero--dark .tip::after { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.footer .tip::before, .hero--dark .tip::before { border-top-color: #fff; }
.footer .tip--b::before { border-top-color: transparent; border-bottom-color: #fff; }

/* тосты */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 40px)); }
.toast {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.4; animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.is-leaving { opacity: 0; transition: opacity .2s ease; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.toast--ok svg { color: #6FD39A; } .toast--warn svg { color: #F1C453; } .toast--danger svg { color: #FF8A5C; }
.toast b { display: block; font-weight: 700; }
.toast__x { margin-left: auto; opacity: .55; flex-shrink: 0; }
.toast__x:hover { opacity: 1; }
.toast__x svg { width: 14px; height: 14px; color: #fff; margin: 0; }

/* ============================================================
   12 · ОБРАТНАЯ СВЯЗЬ: АЛЕРТЫ, ПУСТОЕ, СКЕЛЕТОН, ПРОГРЕСС
   ============================================================ */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; background: var(--info-tint); color: var(--ink); border: 1px solid transparent; font-size: 14px; line-height: 1.45; }
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--info); }
.alert b { display: block; font-weight: 700; margin-bottom: 2px; }
.alert p { color: var(--ink-soft); }
.alert__x { margin-left: auto; opacity: .5; flex-shrink: 0; }
.alert__x:hover { opacity: 1; }
.alert__x svg { width: 15px; height: 15px; color: var(--ink); margin: 0; }
.alert--ok { background: var(--ok-tint); } .alert--ok svg { color: var(--ok); }
.alert--warn { background: var(--warn-tint); } .alert--warn svg { color: var(--warn); }
.alert--danger { background: var(--danger-tint); } .alert--danger svg { color: var(--danger); }
.alert--brand { background: var(--brand-tint); } .alert--brand svg { color: var(--brand); }
.alert--outline { background: #fff; border-color: var(--line); }
.alert--dark { background: var(--ink); color: #fff; } .alert--dark p { color: rgba(255,255,255,0.7); } .alert--dark svg { color: var(--accent); }
.alert .btn { margin-left: auto; flex-shrink: 0; }

/* полоса-баннер во всю ширину */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad-x); background: var(--brand); color: var(--brand-on); font-size: 14px; }
.banner svg { width: 17px; height: 17px; }
.banner a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.banner__x { margin-left: auto; opacity: .7; }
.banner__x svg { width: 15px; height: 15px; }
.banner--accent { background: var(--accent); color: var(--accent-ink); }

.empty { padding: 48px 24px; text-align: center; }
.empty__ic { width: 52px; height: 52px; margin: 0 auto 16px; background: var(--paper); color: var(--muted); display: grid; place-items: center; }
.empty__ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 17px; margin-bottom: 7px; }
.empty p { color: var(--ink-soft); font-size: 14.5px; margin: 0 auto 18px; max-width: 42ch; }

.skeleton { position: relative; overflow: hidden; background: var(--paper); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--text { height: 14px; width: 100%; }
.skeleton--text.w-60 { width: 60%; } .skeleton--text.w-40 { width: 40%; } .skeleton--text.w-80 { width: 80%; }
.skeleton--title { height: 22px; width: 50%; }
.skeleton--block { height: 120px; }
.skeleton--avatar { width: 40px; height: 40px; }
.skeleton--btn { height: 44px; width: 140px; }

.progress { height: 8px; background: var(--paper-2); overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand); transition: width .4s ease; }
.progress--sm { height: 4px; }
.progress--lg { height: 12px; }
.progress--ok .progress__bar { background: var(--ok); } .progress--warn .progress__bar { background: var(--warn); } .progress--danger .progress__bar { background: var(--danger); }
.progress-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.progress-row .progress { flex: 1; }
.progress-row .num { color: var(--ink-soft); min-width: 40px; text-align: right; }
/* сегментированный индикатор: сколько из скольких */
.meter { display: flex; gap: 3px; }
.meter i { flex: 1; height: 6px; background: var(--paper-2); }
.meter i.is-on { background: var(--brand); }

/* ============================================================
   13 · КОНТЕНТ: АККОРДЕОН, КОД, РАЗДЕЛИТЕЛИ, АВАТАРЫ, СПИСКИ
   ============================================================ */
.acc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.acc details { background: var(--bg); }
.acc details[open] { background: #fff; }
.acc summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-3px,-3px); transition: transform .2s ease; }
.acc details[open] summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.acc__body { padding: 0 20px 18px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; max-width: 78ch; }

/* ---------- вопросы и ответы: без рамок и подложки, только линии; раскрывается плавно ----------
   <div class="faq"><div class="faq__item"><button class="faq__q" type="button" aria-expanded="false">Вопрос<span class="faq__ic"><svg><use href="#i-plus"></use></svg></span></button>
   <div class="faq__a"><div><p>Ответ</p></div></div></div></div>. .acc — для аккордеонов внутри приложения, .faq — для витрин и услуг. */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); cursor: pointer; transition: color .15s ease; }
.faq__q:hover { color: var(--brand-ink); }
.faq__ic { width: 28px; height: 28px; background: var(--paper); color: var(--ink); flex-shrink: 0; display: grid; place-items: center; transition: transform .2s ease, background .2s ease, color .2s ease; }
.faq__ic svg { width: 14px; height: 14px; }
.faq__item.is-open .faq__ic { background: var(--brand); color: var(--brand-on); transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 64ch; padding-bottom: 20px; }
.faq__a p + p { margin-top: -8px; }
.faq__a a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.section--dark .faq, .section--dark .faq__item { border-color: rgba(255,255,255,0.12); }
.section--dark .faq__q { color: #fff; } .section--dark .faq__a p { color: rgba(255,255,255,0.66); }

.code { background: var(--ink); color: rgba(255,255,255,0.86); padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.65; margin: 0; }
.code--sm { font-size: 11.5px; padding: 12px 14px; }
.code .c { color: rgba(255,255,255,0.42); } .code .k { color: var(--accent); } .code .s { color: #9BD1FF; } .code .n { color: #F6B26B; }
.code--light { background: var(--paper); color: var(--ink); }
.code--light .k { color: #1B4ED0; } .code--light .s { color: #0A7070; } .code--light .c { color: var(--muted); }
code.inline { font-family: var(--mono); font-size: .88em; padding: 2px 6px; background: var(--paper-2); color: var(--ink); }
kbd.key { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border: 1px solid var(--line); border-bottom-width: 2px; background: #fff; color: var(--ink-soft); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.avatar { --av: 36px; width: var(--av); height: var(--av); flex-shrink: 0; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-ink); font-weight: 800; font-size: calc(var(--av) * .36); letter-spacing: -0.02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar > svg { width: 100%; height: 100%; display: block; }        /* спрайт-аватар: <svg><use href="#a-…"></use></svg> из avatars.js */
.avatar--xs { --av: 24px; } .avatar--sm { --av: 30px; } .avatar--lg { --av: 48px; } .avatar--xl { --av: 64px; }
.avatar--solid { background: var(--brand); color: var(--brand-on); }
.avatar--dark { background: var(--ink); color: var(--accent); }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar--more { background: var(--paper-2); color: var(--ink-soft); font-size: 12px; }

.list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.list__row { display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px; background: var(--bg); }
.list__row > svg { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.list__row b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
.list__row small { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 3px; }
.list__row .grow { flex: 1; }
.list--plain { border: 0; background: transparent; gap: 0; }
.list--plain .list__row { background: transparent; padding: 10px 0; border-bottom: 1px solid var(--line-2); }

/* описательный список ключ–значение */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 600; }

/* полоса источников/логотипов */
.srcs { display: flex; flex-wrap: wrap; gap: 9px; }
.src { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.src i { width: 7px; height: 7px; background: var(--brand); }

/* ============================================================
   14 · ГРАФИКИ (SVG-классы)
   ============================================================ */
.chart { width: 100%; height: auto; display: block; }
.chart__area { fill: var(--brand); opacity: .12; }
.chart__line { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--dashed { stroke-dasharray: 6 6; }
.chart--card { width: 100%; height: auto; background: var(--paper); padding: 12px; }
.chart__line--2 { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1.6; }
.chart__line--3 { stroke: var(--ink); stroke-width: 1.6; opacity: .6; }
.chart__grid { stroke: rgba(11,27,43,0.08); stroke-width: 1; }
.chart__ax { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.chart__dot { fill: #fff; stroke: var(--brand); stroke-width: 2.4; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bars i { flex: 1; background: var(--brand); opacity: .28; transition: opacity .15s ease; }
.bars i:last-child, .bars i.is-hl { opacity: 1; }
.bars i:hover { opacity: .7; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; background: var(--brand); }
.legend i.is-muted { background: var(--muted); } .legend i.is-accent { background: var(--accent); } .legend i.is-ink { background: var(--ink); }

/* ============================================================
   16 · БЛОКИ СТРАНИЦ
   Готовые секции лендингов и витрин: собираются из компонентов
   выше, но имеют свою сетку и ритм. Каждый блок — <section
   class="section"> с .container внутри.
   ============================================================ */

/* ---------- герой ---------- */
.hero { padding: clamp(34px, 4.4vw, 68px) 0 clamp(30px, 4vw, 56px); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(30px, 4.5vw, 64px); align-items: center; }
.hero__left { max-width: 640px; }
.hero__right { min-width: 0; }   /* правая колонка героя: окно приложения, мозаика, карточка */
.hero__title { font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.04; margin-bottom: 18px; }
.hero__lead { margin-bottom: 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.hero__trust div { font-size: 13px; color: var(--muted); line-height: 1.3; }
.hero__trust b { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; }
.hero--center { text-align: center; }
.hero--center .hero__left { max-width: 760px; margin: 0 auto; }
.hero--center .hero__ctas, .hero--center .hero__trust { justify-content: center; }
.hero--center .lead { margin-left: auto; margin-right: auto; }
.hero--center .search { margin: 0 auto 22px; max-width: 620px; }
.hero--dark { background: var(--ink); color: #fff; }
.hero--dark .hero__title, .hero--dark .hero__trust b { color: #fff; }
.hero--dark .lead, .hero--dark .hero__trust div { color: rgba(255,255,255,0.66); }
.hero--dark .hero__trust { border-top-color: rgba(255,255,255,0.14); }
.hero--dark .eyebrow { color: rgba(255,255,255,0.55); }
.hero--tint { background: var(--brand-tint); }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 34px; } .hero__left { max-width: none; } }

/* компактная шапка рабочей страницы приложения */
.apphead { padding: 22px 0 0; }
.apphead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.apphead h1 { font-size: clamp(24px, 2.6vw, 33px); letter-spacing: -0.032em; }
.apphead p { margin-top: 9px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }
.apphead__aside { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }

/* окно приложения внутри лендинга */
.demo { overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.demo__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.demo__dots { display: flex; gap: 6px; }
.demo__dots i { width: 10px; height: 10px; background: var(--paper-2); }
.demo__url { flex: 1; max-width: 380px; margin: 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line-2); padding: 5px 12px; text-align: center; }
.demo__body { padding: clamp(18px, 2.2vw, 26px); }

/* ---------- мозаика продуктов ---------- */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ptile { grid-column: span 3; position: relative; overflow: hidden; padding: 18px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--brand-tint); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ptile--wide { grid-column: span 6; min-height: 128px; flex-direction: row; align-items: center; }
.ptile--sm { grid-column: span 2; min-height: 118px; padding: 15px; }
.ptile--dark { background: var(--ink); color: #fff; }
.ptile__nm { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ptile--sm .ptile__nm { font-size: 13.5px; }
.ptile__dm { font-family: var(--mono); font-size: 10.5px; color: var(--brand-ink); opacity: .75; margin-top: 3px; display: block; }
.ptile--dark .ptile__dm { color: rgba(255,255,255,0.6); }
.ptile__body { flex: 1; min-width: 0; }
.ptile__ds { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.4; }
.ptile__go { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; background: rgba(11,27,43,0.08); transition: background .16s ease, color .16s ease, transform .16s ease; }
.ptile__go svg { width: 15px; height: 15px; }
.ptile:hover .ptile__go { background: var(--brand); color: var(--brand-on); transform: translate(2px,-2px); }
@media (max-width: 560px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .ptile, .ptile--wide, .ptile--sm { grid-column: span 1; } .ptile--wide { flex-direction: column; align-items: flex-start; } }

/* ---------- карточки продуктов ---------- */
.prods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.prod { grid-column: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.prod:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow); }
.prod--hero { grid-column: span 3; }
.prod::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.prod__top { display: flex; align-items: flex-start; gap: 12px; }
.prod__top .badge { margin-left: auto; }
.prod__ttl { font-size: 19px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
.prod__dm { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--brand-ink); background: var(--brand-tint); padding: 2px 7px; }
.prod__ds { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.prod__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod__stat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.prod__stat b { color: var(--ink); font-weight: 700; }
.prod__go { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--brand-ink); }
.prod__go svg { width: 14px; height: 14px; transition: transform .16s ease; }
.prod:hover .prod__go svg { transform: translateX(3px); }
@media (max-width: 1100px) { .prods { grid-template-columns: repeat(4, 1fr); } .prod, .prod--hero { grid-column: span 2; } }
@media (max-width: 720px) { .prods { grid-template-columns: 1fr; } .prod, .prod--hero { grid-column: span 1; } }

/* ---------- преимущества ---------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.features--3 { grid-template-columns: repeat(3, 1fr); }
/* спецификация: характеристики продукта как паспорт прибора — подпись,
   значение, пояснение; линейки вместо карточек */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--ink); }
.spec--1 { grid-template-columns: 1fr; }
.spec--soft { border-top-color: var(--line); }
.spec__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.spec__k { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.spec__v { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.spec__v .num { font-size: 18px; font-weight: 800; }
.spec__v small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.spec__v .badge { margin-left: 6px; vertical-align: 2px; }
@media (max-width: 860px) { .spec { grid-template-columns: 1fr; } .spec__row { grid-template-columns: 130px 1fr; } }
/* калькулятор: ползунок объёма → цена; логика в kit.js по data-calc */
.calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.calc__in { padding: 28px 30px; }
.calc__out { padding: 28px 30px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.calc__price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(38px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--accent); }
.calc__price small { font-size: 16px; color: rgba(255,255,255,0.6); letter-spacing: 0; margin-left: 6px; }
.calc__note { font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.5; }
.calc__rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 20px; font-size: 14px; }
.calc__rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(255,255,255,0.14); padding-bottom: 8px; }
.calc__rows b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.calc__in .slider-wrap { min-width: 0; margin-top: 18px; }
.calc__in .slider-wrap__head b { font-size: 26px; letter-spacing: -0.03em; }
.calc__tiers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.calc__tiers .tag.is-active { background: var(--brand-tint); color: var(--brand-ink); }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }
/* герой-табло: живая цифра вместо лозунга */
.hero--board .hero__title { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.05em; font-size: clamp(40px, 6.4vw, 100px); line-height: 0.95; white-space: nowrap; }
.hero--board .hero__title small { display: block; white-space: normal; font-family: var(--font); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.025em; margin-top: 14px; color: var(--ink-soft); max-width: 22ch; }
.hero--board .hero__title .tick { color: var(--brand-ink); font-size: 0.42em; vertical-align: top; margin-left: 4px; letter-spacing: -0.03em; }
@media (max-width: 940px) { .hero--board .hero__title { white-space: normal; } }
.feature { padding: 26px 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 220px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.section--soft .feature { background: #fff; }
.feature:hover { transform: none; border-color: var(--brand); box-shadow: none; }
.feature__t { font-size: 17px; font-weight: 700; letter-spacing: -0.018em; }
.feature__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.feature__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.feature--row { flex-direction: row; align-items: flex-start; min-height: 0; }
.feature--row .feature__body { display: flex; flex-direction: column; gap: 6px; }
.feature--plain { border: 0; background: transparent; padding: 0; min-height: 0; }
.feature--plain:hover { transform: none; box-shadow: none; }
@media (max-width: 980px) { .features, .features--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .features, .features--3 { grid-template-columns: 1fr; } }

/* ---------- как это работает ---------- */
.howto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.howto--3 { grid-template-columns: repeat(3, 1fr); }
.howto__step { padding: 24px 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.howto__n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--brand-ink); background: var(--brand-tint); padding: 4px 9px; align-self: flex-start; margin-bottom: 8px; }
.howto__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.howto__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.howto--dark .howto__step { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.howto--dark .howto__n { background: var(--accent); color: var(--ink); }
.howto--dark .howto__d { color: rgba(255,255,255,0.62); }
@media (max-width: 980px) { .howto, .howto--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .howto, .howto--3 { grid-template-columns: 1fr; } }

/* ---------- сценарии ---------- */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.usecase { padding: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.usecase__r { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.usecase__t { font-size: 16.5px; font-weight: 700; letter-spacing: -0.018em; }
.usecase__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.usecase__p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (max-width: 940px) { .usecases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .usecases { grid-template-columns: 1fr; } }

/* ---------- лента новостей ---------- */
.feed { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.fitem { display: grid; grid-template-columns: 168px 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; background: var(--bg); transition: background .15s ease; }
.fitem:hover { background: #fff; }
.fitem__prod { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.fitem__ttl { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.fitem:hover .fitem__ttl { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.fitem__ds { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.fitem__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fitem__date { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) { .fitem { grid-template-columns: 1fr; gap: 10px; } .fitem__meta { order: -1; } }

/* ---------- цитаты ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { padding: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.quote__t { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.quote__t::before { content: "«"; color: var(--brand); font-weight: 800; margin-right: 2px; }
.quote__t::after { content: "»"; color: var(--brand); font-weight: 800; margin-left: 2px; }
.quote__a { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.quote__a b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.quote__a small { display: block; font-size: 12.5px; color: var(--muted); }
.quote__a .el { margin-left: auto; }
/* цитата с результатом: цифра над словами — данные вместо пафоса */
.quote__num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--brand-ink); }
.quote__num small { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.quote--result { gap: 12px; }
.quote--result .quote__t { font-size: 14.5px; color: var(--ink-soft); }
.quotes--rows { grid-template-columns: 1fr; }
.quotes--rows .quote { flex-direction: row; align-items: flex-start; gap: 24px; }
.quotes--rows .quote__t { flex: 1; font-size: 16.5px; }
.quotes--rows .quote__a { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line-2); padding-left: 24px; min-width: 260px; }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr 1fr; } .quotes--rows { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .quotes { grid-template-columns: 1fr; } .quotes--rows .quote { flex-direction: column; } .quotes--rows .quote__a { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 14px; min-width: 0; } }

/* ---------- логотипы и источники ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.logos--spread { justify-content: space-between; flex: 1; }
.logos__item { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; }
.logos__item svg { width: 18px; height: 18px; }
.logos--grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.logos--grid .logos__item { justify-content: center; padding: 18px 12px; border: 1px solid var(--line-2); background: #fff; }
@media (max-width: 900px) { .logos--grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- тарифы: переключатель периода и сравнение ---------- */
.pricing__switch { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; font-size: 14px; color: var(--ink-soft); }
.pricing__switch .badge { margin-left: 4px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
.compare th:first-child, .compare td:first-child { width: 36%; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare td svg { width: 18px; height: 18px; margin: 0 auto; color: var(--brand); }
.compare td .no { color: var(--line); }
.compare tr.group td, .table tr.group td { background: var(--paper); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; }
.compare th.is-hl { color: var(--brand-ink); }

/* ---------- команда ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.person { padding: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.person__nm { font-size: 16px; font-weight: 700; letter-spacing: -0.018em; }
.person__role { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.person__bio { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.person__links { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* ---------- блог ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post { background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.post:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow); }
/* обложка — всегда 16:9: содержимое (иллюстрация, цифра, график) не раздувает её, а обрезается; карточки в ряду одной высоты */
.post__cover { aspect-ratio: 16 / 9; contain: size; overflow: hidden; background: var(--brand-tint); display: grid; place-items: center; color: var(--brand); position: relative; }
.post__cover svg { width: clamp(44px, 24%, 76px); height: auto; aspect-ratio: 1; }
.post__cover .badge { position: absolute; top: 12px; left: 12px; }
.post__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.post__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__a { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.post--wide { grid-column: span 2; flex-direction: row; }
.post--wide .post__cover { aspect-ratio: auto; width: 44%; }
.post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* обложки из данных вместо иконки: столбики, строки таблицы, линия.
   Высоты столбиков и ширины строк задаются --h и --w на <i> */
.post__cover--bars { display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 16% 14% 0; }
.post__cover--bars i { display: block; flex: 1; max-width: 11%; height: var(--h, 50%); background: var(--brand); opacity: .9; }
.post__cover--bars i:nth-child(even) { opacity: .5; }
.post__cover--rows { display: flex; flex-direction: column; justify-content: center; gap: 9%; padding: 0 16%; }
.post__cover--rows i { display: block; height: 7%; background: var(--brand); opacity: .32; width: var(--w, 80%); }
.post__cover--rows i:first-child { opacity: .9; }
.post__cover--line { padding: 12% 12%; }
.post__cover--line svg { width: 100%; height: 100%; }
.post__cover--line path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.post__cover--line .area { fill: var(--brand); opacity: .14; stroke: none; }
.post__cover--num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); }
.post__cover--num b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--brand-ink); }
.post__cover--num small { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* ориентации записей: сетка 2/4, строки с обложкой слева, компактный
   список без обложки, «журнал» (крупная + компактные) и текст поверх обложки */
.posts--2 { grid-template-columns: repeat(2, 1fr); }
.posts--4 { grid-template-columns: repeat(4, 1fr); }
.posts--rows { grid-template-columns: 1fr; gap: 12px; }
.post--row { flex-direction: row; }
.post--row .post__cover { aspect-ratio: auto; width: 240px; flex-shrink: 0; }
.post--row .post__body { padding: 16px 22px 18px; }
.post--row .post__t { font-size: 19px; }
.post--row .post__d { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.posts--compact { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-2); }
.posts--flush { border-top: 0; }
/* компактный список в сайдбаре: мельче и плотнее */
.posts--side .post--compact { padding: 10px 0; }
.posts--side .post--compact:last-child { border-bottom: 0; }
.posts--side .post__t { font-size: 14.5px; }
.post--compact { flex-direction: row; align-items: flex-start; gap: 18px; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; }
.post--compact:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.post--compact:hover .post__t { color: var(--brand-ink); }
.post--compact .post__date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 72px; flex-shrink: 0; padding-top: 4px; }
.post--compact .post__body { padding: 0; gap: 5px; }
.post--compact .post__t { font-size: 16px; transition: color .15s ease; }
.post--compact .post__d { font-size: 13.5px; }
.post--compact .post__meta { margin-left: auto; flex-shrink: 0; padding-top: 4px; }
.post--compact .post__body .post__meta { margin-left: 0; padding-top: 0; }
.posts--mag { grid-template-columns: 1.35fr 1fr; align-items: start; gap: 24px; }
.posts--mag .post--lead .post__cover { aspect-ratio: 3 / 2; }
.posts--mag .post--lead .post__t { font-size: 24px; }
.posts--mag .post--lead .post__body { padding: 22px 24px 24px; }
.post--overlay { position: relative; min-height: 340px; justify-content: flex-end; border: 0; color: #fff; }
.post--overlay .post__cover { position: absolute; inset: 0; aspect-ratio: auto; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-ink) 100%); color: rgba(255,255,255,0.35); align-items: start; justify-items: end; padding: 24px; }
.post--overlay .post__cover svg { width: 96px; height: 96px; opacity: .35; }
.post--overlay .post__cover .badge { top: 16px; left: 16px; }
.post--overlay .post__body { position: relative; z-index: 1; flex: 0; padding: 72px 22px 22px; background: linear-gradient(180deg, rgba(11,27,43,0) 0%, rgba(11,27,43,0.62) 100%); }
.post--overlay .post__meta, .post--overlay .post__d, .post--overlay .post__a { color: rgba(255,255,255,0.8); }
.post--overlay .post__t { color: #fff; font-size: 21px; }
.post--overlay:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (max-width: 940px) { .posts, .posts--4, .posts--mag { grid-template-columns: 1fr 1fr; } .post--wide { grid-column: span 2; } .post--row .post__cover { width: 180px; } }
@media (max-width: 620px) { .posts, .posts--2, .posts--4, .posts--mag { grid-template-columns: 1fr; } .post--wide { grid-column: span 1; flex-direction: column; } .post--wide .post__cover { width: auto; aspect-ratio: 16/9; } .post--row { flex-direction: column; } .post--row .post__cover { width: auto; aspect-ratio: 16/9; } .post--compact { flex-wrap: wrap; } .post--compact .post__meta { margin-left: 0; width: 100%; } }

/* ---------- контакты ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.method { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); }
.method b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.method small { display: block; font-size: 12.5px; color: var(--muted); }
.method .btn { margin-left: auto; }
/* канал связи как ссылка-карточка: иконка в цвете сервиса, подпись капителью, значение, стрелка
   <a class="method" href="…"><span class="method__ic method__ic--tg"><svg>…</svg></span><span class="method__body"><span class="method__l">Telegram</span><span class="method__v">@datarax</span></span><svg class="method__arrow"><use href="#i-arrow"></use></svg></a> */
.methods { display: grid; gap: 12px; }
a.method { color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.method:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.method__ic { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; background: var(--paper); color: var(--ink); }
.method__ic svg { width: 22px; height: 22px; }
.method__ic--tg { background: var(--tint-sky); color: #229ED9; }
.method__ic--mail { background: var(--tint-citron); color: #9A7400; }
.method__ic--wa { background: var(--tint-mint); color: #1FA35A; }
.method__ic--phone { background: var(--tint-lavender); color: #6B4FD6; }
.method__ic--brand { background: var(--brand-tint); color: var(--brand-ink); }
.method__body { flex: 1; min-width: 0; }
.method__l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.method__v { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.method__arrow { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
a.method:hover .method__arrow { transform: translateX(3px); color: var(--brand-ink); }
.section--dark .method { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.section--dark .method__l { color: rgba(255,255,255,0.5); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- подписка ---------- */
.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px); background: var(--brand-tint); }
.newsletter__t { max-width: 460px; }
.newsletter__t h3 { font-size: 20px; letter-spacing: -0.024em; }
.newsletter__t p { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }
.newsletter .igroup { flex: 1; min-width: 300px; max-width: 460px; }
.newsletter--dark { background: var(--ink); color: #fff; }
.newsletter--dark h3 { color: #fff; }
.newsletter--dark p { color: rgba(255,255,255,0.66); }

/* ---------- таймлайн / история изменений ---------- */
.timeline { display: grid; gap: 0; position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 26px; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; background: var(--brand); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.tl-item__d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.tl-item__t { font-size: 16px; font-weight: 700; letter-spacing: -0.018em; }
.tl-item__b { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 4px; max-width: 68ch; }

/* ---------- футер ---------- */
.footer { background: var(--ink); color: #fff; padding: clamp(52px, 6vw, 84px) 0 30px; margin-top: clamp(48px, 6vw, 90px); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
.footer__about p { color: rgba(255,255,255,0.6); font-size: 14px; margin: 14px 0 20px; max-width: 320px; line-height: 1.55; }
.footer__products { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
/* без opacity и transform: они создают контекст наложения, и подсказка
   уходила под соседние знаки. Наведённый знак поднимаем z-index-ом. */
.footer__products .el { transition: box-shadow .15s ease, transform .15s ease; }
.footer__products .el:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; z-index: 2; transform: translateY(-2px); }
.footer--light .footer__products .el:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
/* соцсети: нейтральные глифы и текстовые метки; фирменные логотипы
   подставляются из пресс-китов в тот же .soc */
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.soc {
  position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,0.08); color: #fff; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.soc svg { width: 18px; height: 18px; }
.soc--text { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.soc:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); z-index: 2; }
.footer--light .soc { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.footer--light .soc:hover { background: var(--brand); color: var(--brand-on); border-color: transparent; }
.footer__col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 15px; }
.footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
.footer__col .badge { margin-left: 6px; transform: translateY(-1px); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13px; color: rgba(255,255,255,0.62); }
.footer__bottom a { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
/* ссылки нижней строки — списком с воздухом, без точек-разделителей */
.footer__links, .footer__copy { display: flex; flex-wrap: wrap; gap: 8px 24px; }   /* ссылки и «© 2026 Продукт · продукт платформы Datarax» — части с одинаковым воздухом, без точек */
.footer__bottom .row--sm { gap: 8px; }
.footer__bottom a:hover { color: #fff; }
.footer--light { background: var(--paper); color: var(--ink); }
.footer--light .footer__about p, .footer--light .footer__col a, .footer--light .footer__bottom { color: var(--ink-soft); }
.footer--light .footer__col h4 { color: var(--muted); }
.footer--light .footer__grid { margin-bottom: 28px; }
.footer--flush { margin-top: 0; }
.footer__mail { color: var(--accent); font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.35); border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }  /* акцент продукта: в футере виден и знак (цвет), и акцент */
.footer__mail:hover { border-color: var(--accent); }
.footer--light .footer__mail { color: var(--ink); border-bottom-color: rgba(11,27,43,0.3); }
.footer .lockup { color: #fff; }
/* платформенные знаки на тёмном футере: свой знак Datarax — лаймом платформы, тёмный Datahix — с тонкой обводкой */
[data-product="dr"] .footer .lockup .el { background: var(--lime); color: var(--accent-ink); }
.footer .el.p-dh, [data-product="dh"] .footer .lockup .el { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); }
.footer--light .lockup { color: var(--ink); }
.footer--light .footer__bottom { border-top-color: var(--line); }
.footer--slim .footer__grid { display: none; }
.footer--slim { padding: 28px 0; margin-top: 0; }
.footer--slim .footer__bottom { border-top: 0; padding-top: 0; }
/* если страница кончается цветной секцией, белой прослойки перед футером не нужно */
main:has(> .section:last-child) + .footer { margin-top: 0; } /* секция сама несёт нижний отступ — футер вплотную */
main:has(> .section--soft:last-child) + .footer--light { margin-top: 0; border-top: 1px solid var(--line); }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- 404 и служебные страницы ---------- */
.p404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.p404__code { font-family: var(--mono); font-size: clamp(64px, 12vw, 140px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--brand-tint); -webkit-text-stroke: 2px var(--brand); }
.p404 h1 { font-size: clamp(22px, 2.6vw, 32px); margin-top: 8px; }
.p404--flat { min-height: 0; }
.p404 p { color: var(--ink-soft); margin: 12px auto 22px; max-width: 46ch; }

/* ============================================================
   15 · УТИЛИТЫ
   ============================================================ */
.hidden, [hidden] { display: none !important; }  /* атрибут hidden сильнее display компонента */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-0{margin-bottom:0}.mb-7{margin-bottom:var(--sp-7)}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.p-0{padding:0}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}
.w-full{width:100%}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-56{width:14rem}.w-64{width:16rem}
.max-w-xs{max-width:320px}.max-w-sm{max-width:420px}.max-w-md{max-width:640px}.max-w-lg{max-width:860px}
.text-right{text-align:right}
.flex{display:flex}
.min-w-0{min-width:0}.min-w-28{min-width:7rem}.min-w-xs{min-width:280px}.w-auto{width:auto}.wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.self-start{align-self:flex-start}.self-center{align-self:center}
.gap-0{gap:0}.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}
.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}
.pt-0{padding-top:0}.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pt-3{padding-top:var(--sp-3)}.pt-4{padding-top:var(--sp-4)}.pt-5{padding-top:var(--sp-5)}.pt-6{padding-top:var(--sp-6)}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pb-3{padding-bottom:var(--sp-3)}.pb-4{padding-bottom:var(--sp-4)}.pb-5{padding-bottom:var(--sp-5)}.pb-6{padding-bottom:var(--sp-6)}
.text-on-dark{color:#fff}.text-on-dark-soft{color:rgba(255,255,255,.7)}.text-on-dark-muted{color:rgba(255,255,255,.55)}.is-dim{opacity:.55}.strike{text-decoration:line-through}
.num-xl{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;letter-spacing:-.03em}
.nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-600{font-weight:600}.underline{text-decoration:underline}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow)}.shadow-lg{box-shadow:var(--shadow-lg)}
.bg-paper{background:var(--paper)}.bg-white{background:#fff}.bg-ink{background:var(--ink);color:#fff}.bg-tint{background:var(--brand-tint)}.border{border:1px solid var(--line)}