/* NiVa · niva.company
   Светлая «туманная» тема — одна на весь сайт (владелец 26.09: цвета сайта
   под фото «Ника за мокрым стеклом»). Фон — туман кадра (#f4f3f1, фото
   подкрашено ровно в него и растворяется без шва), текст — тёплый почти
   чёрный, кнопки — графит. Акцент — «розовое дерево», единственный тёплый
   тон кадра (кожа). Тёмные «ночные» панели — тёплый графит. Без
   переключения по настройке устройства. Макеты Telegram внутри страниц —
   в тех же цветах сайта (01.10: без синего Telegram). */

/* Запасные шрифты с метриками веб-шрифтов (28.09): пока Unbounded и Golos Text
   грузятся с Google, текст рисуется системным Arial (Android — Roboto), растянутым
   до их ширины и высоты строки. Подмена шрифта больше не сдвигает макет: на
   главной сдвиг первого экрана был 0,15 (Lighthouse CLS). Цифры сняты в браузере
   (canvas measureText против Arial/Roboto, кириллица + латиница). */
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 131.5%; ascent-override: 76.05%; descent-override: 19.01%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback R"; src: local("Roboto"); size-adjust: 144%; ascent-override: 69.44%; descent-override: 17.36%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 105.6%; ascent-override: 92.81%; descent-override: 20.83%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback R"; src: local("Roboto"); size-adjust: 115.59%; ascent-override: 84.78%; descent-override: 19.03%; line-gap-override: 0%; }
:root {
  --paper: #f4f3f1;
  --paper-2: #eae8e4;
  --surface: #fbfaf8;
  --ink: #1c1b1a;
  --ink-2: #3a3734;
  --muted: #6b6560;
  --faint: #746d67;   /* 4,6:1 на фоне — мелкий текст читается (axe, 28.09; было #938c86, 3:1) */
  --line: #e2dfda;
  --line-2: #cfcac3;
  --accent: #9c4f4a;
  --accent-soft: rgba(156, 79, 74, 0.10);
  --night: #242120;
  --night-2: #2d2a28;
  --night-line: #3d3936;
  --night-ink: #f2efec;
  --night-muted: #aca49e;
  --cyan: #e3a29a;   /* акцент на тёмных панелях — светлая роза */
  --tg-accent: #8aabff;   /* макеты Telegram: его синий */
  /* Палитра (владелец 01.10): один акцент — «розовое дерево». Модели — он же,
     разной насыщенности: Anima — полный цвет, Levia — приглушённый, Lux —
     почти серый (чем «тяжелее» модель, тем гуще цвет). Все три читаются и
     текстом (от 4,5:1). Жёлтый «ждём ответа» — отдельный смысловой цвет. */
  --anima: #9c4f4a;
  --levia: #92635d;
  --lux: #7b6c68;
  --pending: #a0620c;
  --btn: #1c1b1a;
  --btn-ink: #f7f6f4;
  --ok: #2a7d52;
  --warn: #b0482a;
  /* Шрифты (владелец 27.09): заголовки — Unbounded Light (300), текст —
     Golos Text. Имя --serif историческое: это шрифт заголовков. Unbounded
     широкий, поэтому размеры заголовков — 0,76 прежних, интервал плотнее,
     курсива у него нет — акцентные слова <em> прямые, только цветом. */
  --serif: "Unbounded", "Unbounded Fallback", "Unbounded Fallback R", "Golos Text", system-ui, sans-serif;
  --sans: "Golos Text", "Golos Fallback", "Golos Fallback R", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
  --brand: "Ubuntu", var(--sans);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --maxw: 1200px;
  --gutter: 32px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Тень всплывающих панелей: меню шапки, карточка поддержки. */
  --pop-shadow: 0 2px 6px rgba(38, 28, 24, .05), 0 24px 56px -24px rgba(38, 28, 24, .32);
  /* «only»: браузер с принудительной тёмной темой для сайтов (Chrome, Яндекс,
     Opera) не перекрашивает светлую тему — иначе выбор «Светлая» кнопкой в
     шапке не работал бы. Тёмную тему сайт рисует сам. */
  color-scheme: only light;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

/* ── Основа ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Владелец 24.09: весь интерфейс на 10 % мельче — как масштаб 90 % в браузере.
   Телефоны не трогаем: текст стал бы мелким, а iOS сам увеличивает страницу
   на полях ввода со шрифтом меньше 16 px.
   Колонку при этом расширяем: без этого она сжималась вместе со всем и
   уезжала к центру экрана («всё сместилось в центр»). 1400 × 0.9 = 1260 px
   на экране — чуть шире прежних 1200, элементы мельче, воздуха больше.
   Только мышь (30.09): телефон лёжа (844×390) и планшет — сенсорные экраны,
   у них 100 %, иначе поле ввода — 14,4 px и iOS увеличивает страницу.
   То же условие — у .k-hero --z в motion.css. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) { html { zoom: 0.9; } :root { --maxw: 1400px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a, li a, dd a, .prose a, .link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
p a:hover, li a:hover, .prose a:hover, .link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--btn); color: var(--btn-ink); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }
/* Точка цвета модели — единственное место, где цвет модели на сайте. */
.mdot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 0.12em; }
#acc-model .mdot, .value .mdot { width: 12px; height: 12px; margin-right: 12px; vertical-align: 0.2em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ── Типографика ──────────────────────────────────────────────────────── */
.eyebrow { font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.display { font: 300 clamp(35px, 5vw, 67px)/1.0 var(--serif); letter-spacing: -0.025em; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
.display em, .h2 em, h1 em, h2 em, h3 em { font-style: normal; }
.h2 { font: 300 clamp(26px, 3.2vw, 41px)/1.06 var(--serif); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.h3 { font: 600 21px/1.3 var(--sans); letter-spacing: -0.005em; margin: 0; }
/* Ширины текстовых блоков — в em, не в ch (28.09): ch зависит от ширины «0»
   у текущего шрифта, и при подмене запасного шрифта блок менял ширину. */
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); margin: 22px 0 0; max-width: 34.72em; text-wrap: pretty; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--sans); cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-dark { background: var(--btn); color: var(--btn-ink); }
.btn-line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-light { background: var(--night-ink); color: var(--night); }
/* Наведение — только с мышью (30.09): на телефоне после касания кнопка
   оставалась полупрозрачной, как выключенная, пока не нажмёшь мимо. */
@media (hover: hover) {
  .btn-dark:hover { opacity: 0.86; }
  .btn-line:hover { border-color: var(--ink); }
  .btn-light:hover { opacity: 0.88; }
}
.btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
/* Главная кнопка экрана — крупнее кнопки в шапке: из отчёта тестировщика,
   кнопка в углу читалась заметнее той, что в центре. */
.btn-lg { height: 60px; padding: 0 32px; font-size: 18px; font-weight: 600; }
@media (max-width: 560px) { .btn-lg { height: 54px; padding: 0 26px; font-size: 17px; } }
.btn[disabled] { opacity: 0.5; cursor: default; }
.arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.arrow::after { content: "→"; transition: transform .25s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }

/* ── Шапка ────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 700 21px/1 var(--brand); letter-spacing: 0.005em; color: var(--ink); }
.brand svg { width: 42px; height: auto; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 12px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: background-color .15s ease, color .15s ease; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Кнопки для гостя и для вошедшего (.is-in ставит figures.js по cookie niva_in):
   вошедшему «Попробовать бесплатно» не показываем — пробный у него уже был или
   идёт (владелец 29.09). */
.member-only { display: none !important; }
.is-in .guest-only { display: none !important; }
.is-in a.member-only, .is-in .btn.member-only { display: inline-flex !important; }
.is-in h2.member-only, .is-in p.member-only { display: block !important; }
/* Главная кнопка справа (владелец 30.09): гостю «Попробовать бесплатно»,
   вошедшему — значок профиля. «Войти», «Написать Нике» и тема — в меню. */
.to-me { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease; }
.to-me svg { width: 20px; height: 20px; }
@media (hover: hover) { .to-me:hover { border-color: var(--ink); } }
.to-me[aria-current="page"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.is-in .to-me { display: inline-flex; }
/* Аватар профиля: Google — картинкой, иначе первая буква (шапка и панель профиля). */
.av { overflow: hidden; font: 600 15px/1 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: uppercase; }
/* Кружки — значок профиля и бутерброд — одного размера, 40 px. */
.top-actions .to-me { width: 40px; height: 40px; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* До site.js (30.09): буква или аватар — сразу с первого кадра, по кэшу
   профиля (figures.js в <head> → html.hdr-ini / html.hdr-pic), без мигания
   значком-человечком. Дальше значок заполняет site.js (.av). */
.hdr-ini .top .to-me:not(.av) svg, .hdr-pic .top .to-me:not(.av) svg { display: none; }
.hdr-ini .top .to-me:not(.av)::before { content: var(--me-ini); font: 600 15px/1 var(--sans); text-transform: uppercase; }
.hdr-pic .top .to-me:not(.av) { background: var(--me-av) center / cover no-repeat; }
.is-in .top-actions .to-try { display: none; }
/* Главная кнопка шапки на телефоне (30.09): на всех ширинах, высотой 44;
   до 420 px полная подпись не помещается — «Попробовать». Пока такая же
   кнопка видна на экране (первый экран главной, плашка внизу страниц), в
   шапке её нет: две одинаковые кнопки на одном экране (site.js → .try-dup).
   Место за ней остаётся — бутерброд не сдвигается. То же — на сенсорном
   экране шире 560 (телефон лёжа, планшет). */
.to-try-short { display: none; }
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  .top .top-actions .to-try { height: 44px; transition: opacity .2s ease, visibility 0s; }
  html.try-dup .top .top-actions .to-try { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
}
@media (max-width: 420px) {
  .top .wrap { gap: 12px; }
  .top .top-actions .to-try { padding: 0 18px; font-size: 15px; }
  .to-try-long { display: none; }
  .to-try-short { display: inline; }
}
/* Логотип — ссылка на всю высоту шапки (цель 68 px, а не 21). */
.top .brand { align-self: stretch; }
/* Пункты меню шапки не переносим. */
.top nav a { white-space: nowrap; }
@media (max-width: 1100px) { .nav { display: none; } }

/* Бутерброд: три линии, открытое меню — крестик. */
.burger { display: inline-flex; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; transition: border-color .15s ease, background-color .15s ease; }
.burger[aria-expanded="true"] { border-color: var(--ink); }
@media (hover: hover) { .burger:hover { border-color: var(--ink); } }
.burger svg { width: 18px; height: 18px; overflow: visible; }
.burger path { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease), opacity .2s ease; }
.burger[aria-expanded="true"] .b1 { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .b2 { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] .b3 { transform: translateY(-5.5px) rotate(-45deg); }

/* Меню-столбик (site.js): выпадает под шапкой у правого края, под
   бутербродом (от 1101 px — у левого, см. «Край окна» ниже). Слой .sheet — на всю ширину, но мимо панели клики проходят
   насквозь (pointer-events), панель встаёт по правому краю колонки .wrap. */
.sheet { position: fixed; top: 68px; left: 0; right: 0; z-index: 49; pointer-events: none; }
.sheet-wrap { display: flex; justify-content: flex-end; }
.sheet-panel {
  width: 340px; margin-top: 8px; padding: 8px; pointer-events: auto;
  display: grid; gap: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--pop-shadow);
  transform-origin: 100% 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .24s var(--ease), visibility 0s linear .24s;
  /* Не выше экрана и с прокруткой внутри: на невысоком экране (телефон
     лёжа, ноутбук с масштабом 150 %) низ меню — «Тема», «Поддержка» —
     иначе уходил за край, и до него было не достать. */
  max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain;
}
.sheet.open .sheet-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .28s var(--ease), visibility 0s; }
.sheet-group { display: grid; gap: 2px; }
.sheet-group:empty { display: none; }
.sheet-group + .sheet-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
/* Разделы — только там, где .nav в шапке спрятана (≤1100). */
.sheet-nav { display: none; }
@media (max-width: 1100px) { .sheet-nav { display: grid; } }
/* Разделы без значков — текстом вровень со строками со значками ниже:
   12 px поля + 20 px значка + 12 px зазора. */
.sheet-nav .sheet-row { padding-left: 44px; }
@media (min-width: 1101px) { .sheet-nav + .sheet-group { margin-top: 0; padding-top: 0; border-top: 0; } }
.sheet-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink-2);
  font: 400 15.5px/1.25 var(--sans); text-align: left; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sheet-row[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
@media (hover: hover) { .sheet-row:hover { background: var(--paper-2); color: var(--ink); } .sheet-row:hover > svg { color: var(--ink); } }
.sheet-row[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.sheet-row:focus-visible { outline-offset: -2px; border-radius: 12px; }
.sheet-row > svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.sheet-row > span { min-width: 0; }
.sheet .to-nika-row { display: none; }
.is-in.has-sub .sheet .to-nika-row { display: flex; }
/* Вошедший без подписки: в этой группе ничего не видно («Войти» — гостю,
   «Написать Нике» — с подпиской) — без пустой группы и двойной черты. */
.is-in:not(.has-sub) .sheet .sheet-me { display: none; }
@media (min-width: 1101px) { .is-in:not(.has-sub) .sheet-me + .sheet-group { margin-top: 0; padding-top: 0; border-top: 0; } }
/* Тема: подпись и значок — та тема, на которую переключит нажатие. */
.theme-btn .t-light, .theme-btn .i-sun { display: none; }
/* «Попробовать бесплатно» в меню больше нет (30.09): она в шапке на всех
   ширинах. На страницах профиля в «Поддержке» нет «На сайте — переписка в
   профиле»: «Поддержка» есть в боковом меню профиля. */
body:has(.app-side) .sheet .sup-opt.member-only { display: none !important; }

/* Поддержка: выбор «куда написать». На компьютере — карточка слева от
   меню при наведении (прозрачный «мостик» справа и задержка исчезновения —
   курсор доходит до неё, не теряя), по нажатию и с клавиатуры — та же
   карточка закреплена (.sup.open). На телефоне и планшете — раскрывается
   прямо под строкой. */
.sup { position: relative; }
.sup-btn > svg:last-child { width: 16px; height: 16px; margin-left: auto; transition: transform .25s var(--ease); }
.sup-card { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s; }
.sup-in { min-height: 0; overflow: hidden; display: grid; gap: 2px; }
.sup.open .sup-card { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--ease), visibility 0s; }
.sup.open .sup-btn > svg:last-child { transform: rotate(90deg); }
/* --muted, а не --faint: мелкий заголовок и в тёмной теме не ниже 4,5:1. */
.sup-h { margin: 0; padding: 10px 12px 4px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sup-opt { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 12px; color: var(--ink); transition: background-color .15s ease; }
@media (hover: hover) { .sup-opt:hover { background: var(--paper-2); } .sup-opt:hover .sup-ic { background: var(--paper); } .sup-copy:hover { border-color: var(--ink); color: var(--ink); } }
.sup-opt:focus-visible { outline-offset: -2px; }
.sup-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); transition: background-color .15s ease; }
.sup-ic svg { width: 18px; height: 18px; }
.sup-tx { display: grid; min-width: 0; gap: 2px; }
.sup-tx b { font: 500 15px/1.25 var(--sans); }
.sup-tx small { font-size: 13px; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-mail { display: flex; align-items: center; gap: 4px; }
.sup-mail .sup-opt { flex: 1; }
.sup-copy { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-right: 4px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.sup-copy svg { width: 17px; height: 17px; grid-area: 1 / 1; transition: opacity .2s ease, transform .25s var(--ease); }
.sup-copy svg + svg { opacity: 0; transform: scale(.6); }
.sup-copy.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.sup-copy.done svg:first-child { opacity: 0; transform: scale(.6); }
.sup-copy.done svg + svg { opacity: 1; transform: none; }
/* Под строкой (телефон, планшет): карточка — вложенный блок меню. */
.sup-in { padding: 0 0 0 20px; }
.sup.open .sup-in { padding-bottom: 6px; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) and (min-height: 720px) {
  /* Компьютер: карточка слева от меню, вровень со строкой «Поддержка»
     (от 700 px слева от меню ей хватает места). Только на высоком экране:
     там меню влезает целиком и прокрутка панели не нужна — а она обрезала
     бы карточку, которая стоит за краем панели. Ниже 720 px — раскрытие
     под строкой, как на телефоне. */
  .sheet-panel { max-height: none; overflow: visible; }
  .sheet-panel::after { display: none; }
  .sup-btn > svg:last-child { transform: rotate(180deg); }
  .sup.open .sup-btn > svg:last-child { transform: rotate(180deg); }
  .sup-card {
    display: block; position: absolute; top: -9px; right: 100%; width: 316px; padding-right: 17px;
    opacity: 0; transform: translateX(6px);
    /* Уходит не сразу: курсор, соскочивший с карточки на миг, её не гасит. */
    transition: opacity .18s ease .35s, transform .24s var(--ease) .35s, visibility 0s linear .59s;
  }
  .sup:hover .sup-card, .sup.open .sup-card { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .24s var(--ease), visibility 0s; }
  .sup:hover .sup-btn { background: var(--paper-2); color: var(--ink); }
  .sup-in {
    overflow: visible; padding: 6px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--pop-shadow);
  }
  .sup.open .sup-in { padding-bottom: 6px; }
  .sup-h { padding: 8px 10px 6px; }
}
/* Телефон: меню во всю ширину под шапкой, как раньше. */
@media (max-width: 560px) {
  .sheet-wrap { padding: 0; }
  .sheet-panel {
    width: 100%; margin: 0; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 20px; border-width: 0 0 1px; border-radius: 0 0 20px 20px;
    background: var(--paper);
  }
  .sheet-row { min-height: 50px; font-size: 17px; }
  .sheet-nav .sheet-row { font-size: 18px; }
  /* Под меню (30.09) — затемнение до низа экрана: нажатие по нему только
     закрывает меню (site.js) и не попадает в страницу, свайп страницу не
     листает, а край меню виден и в тёмной теме (фон меню = фон страницы). */
  .sheet { bottom: 0; transition: background-color .2s ease; }
  .sheet.open { pointer-events: auto; background: rgb(0 0 0 / .32); touch-action: none; }
  html:has(.sheet.open) { overflow: hidden; }
  .sup-copy { width: 44px; height: 44px; }
}
@media (max-width: 560px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet.open { background: rgb(0 0 0 / .5); } }
@media (max-width: 560px) { :root[data-theme="dark"] .sheet.open { background: rgb(0 0 0 / .5); } }
/* Телефон лёжа и низкое окно (30.09): разделы — в два столбца, строки
   ниже — меню помещается без внутренней прокрутки. Если всё же не
   помещается (раскрыта «Поддержка»), снизу затухание: видно, что ниже ещё
   есть (класс .more-b ставит site.js). */
@media (max-height: 500px) {
  .sheet-nav { grid-template-columns: 1fr 1fr; column-gap: 4px; }
  .sheet-nav .sheet-row { padding-left: 12px; }
  .sheet-row { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .sheet-group + .sheet-group { margin-top: 4px; padding-top: 4px; }
}
.sheet-panel::after { content: ""; position: sticky; bottom: 0; display: block; height: 32px; margin-top: -32px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.sheet-panel.more-b::after { opacity: 1; }
@media (max-width: 560px) { .sheet-panel::after { background: linear-gradient(to bottom, transparent, var(--paper)); } }
/* Край окна (владелец 01.10): там, где разделы стоят в шапке (от 1101 px),
   бутерброд — у самого левого края окна, за колонкой шапки;
   разделы — ровно по центру окна, справа — только главная кнопка. Кнопки
   и разделы встают в шапку абсолютно (от .top), разметка та же, что на
   телефоне, где бутерброд справа. Если слева от колонки места под него нет,
   логотип сдвигается вправо ровно настолько, чтобы его не задеть. Меню
   выпадает под бутербродом у левого края, «Куда написать» — справа от него. */
@media (min-width: 1101px) {
  :root { --rail: 20px; }
  .top .wrap { padding-left: max(var(--gutter), calc(var(--rail) + 76px - max(0px, (100% - var(--maxw)) / 2))); }
  .top .nav { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
  .top .burger { position: absolute; top: 14px; left: var(--rail); }
  .sheet-wrap { max-width: none; padding: 0 0 0 var(--rail); justify-content: flex-start; }
  .sheet-panel { transform-origin: 0 0; }
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) and (min-height: 720px) {
  .sup-card { right: auto; left: 100%; padding-right: 0; padding-left: 17px; transform: translateX(-6px); }
  .sup-btn > svg:last-child, .sup.open .sup-btn > svg:last-child { transform: none; }
}
/* Сообщение внизу экрана («Скопировано») — site.js. */
.hdr-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; padding: 11px 18px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font-size: 15px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .4); transition: opacity .25s ease, transform .35s var(--ease); pointer-events: none; }
.hdr-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── Секции ───────────────────────────────────────────────────────────── */
.section { padding: 120px 0; }
.section.tight { padding: 88px 0; }
.section + .section { padding-top: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.section-head .lead { margin: 0; }
@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .section-head { grid-template-columns: 1fr; margin-bottom: 40px; }
}

/* ── Первый экран ─────────────────────────────────────────────────────── */
.hero { padding: 72px 0 112px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; align-items: center; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 40px; }
.hero .note { margin-top: 22px; font: 400 13px/1.4 var(--mono); color: var(--faint); letter-spacing: 0.02em; }
@media (max-width: 960px) { .hero { padding: 40px 0 80px; } .hero .wrap { grid-template-columns: 1fr; gap: 48px; } }

/* Переписка-пример */
.chat {
  margin: 0; position: relative; overflow: hidden;
  background: var(--night); color: var(--night-ink);
  border-radius: var(--r-lg); border: 1px solid var(--night-line);
  box-shadow: 0 40px 80px -40px rgba(38, 28, 24, 0.38);
}
.chat::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(227, 162, 154, 0.16), transparent 70%); pointer-events: none; }
.chat-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--night-line); }
.chat-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); color: var(--cyan); font: 700 16px/1 var(--brand); }
.chat-head b { display: block; font-weight: 600; font-size: 15.5px; }
.chat-head small { color: var(--night-muted); font-size: 13px; }
.chat-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 26px; min-height: 360px; justify-content: flex-end; }
.msg { max-width: 78%; padding: 9px 14px 10px; border-radius: 18px; font-size: 15.5px; line-height: 1.4; animation: msg-in .5s var(--ease) both; }
.msg.her { align-self: flex-start; background: var(--night-2); border: 1px solid var(--night-line); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: #1f4e6b; border-bottom-right-radius: 6px; margin-top: 8px; }
.msg.her + .msg.me, .msg.me + .msg.her { margin-top: 10px; }
.msg .react { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 12px; }
.msg:nth-child(1) { animation-delay: .15s; } .msg:nth-child(2) { animation-delay: .55s; } .msg:nth-child(3) { animation-delay: .95s; }
.msg:nth-child(4) { animation-delay: 1.45s; } .msg:nth-child(5) { animation-delay: 1.85s; } .msg:nth-child(6) { animation-delay: 2.25s; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--night-line); margin-top: 4px; animation: msg-in .5s var(--ease) 2.7s both; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--night-muted); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.chat figcaption { position: relative; padding: 0 20px 16px; font: 400 14px/1.3 var(--sans); color: var(--night-muted); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Модели ───────────────────────────────────────────────────────────── */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .models { grid-template-columns: 1fr; } }
.model {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 28px 24px; transition: border-color .2s ease, transform .3s var(--ease);
}
@media (hover: hover) { .model:hover { border-color: var(--line-2); transform: translateY(-2px); } }
.model .swatch { height: 6px; width: 56px; border-radius: 999px; background: var(--c); }
.model .name { font: 300 30px/1 var(--serif); letter-spacing: -0.025em; }
.model .name span { color: var(--muted); font-style: normal; }
.model .kind { font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.model p { margin: 0; color: var(--muted); }
.model ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.model li { display: flex; gap: 10px; align-items: baseline; }
.model li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); transform: translateY(-2px); }
.model li.no { color: var(--faint); }
.model li.no::before { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.model .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.model .facts b { display: block; font: 300 21px/1.1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.model .facts small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.model .arrow { font-size: 15px; }
.models-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; color: var(--muted); font-size: 15px; }

/* ── Разворот «картинка + текст» ─────────────────────────────────────── */
.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
.feature + .feature { margin-top: 120px; }
.feature.flip .feature-media { order: 2; }
.feature-media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--night); border: 1px solid var(--line); }
.feature-media img { width: 100%; }
.feature .lead { font-size: 19px; }
.feature ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--ink-2); }
.feature li { padding-left: 22px; position: relative; }
.feature li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 10px; height: 1px; background: var(--ink); }
.feature .arrow { margin-top: 28px; }
@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature.flip .feature-media { order: 0; }
  .feature + .feature { margin-top: 80px; }
}

/* ── Тарифы ───────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.plan.main { background: var(--night); color: var(--night-ink); border-color: var(--night-line); }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-top h3 { font: 300 26px/1 var(--serif); margin: 0; letter-spacing: -0.025em; }
.plan-top span { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.plan-who { margin: -10px 0 0; font-size: 15px; color: var(--muted); }
.plan.main .plan-who { color: var(--night-muted); }
.plan.main .plan-top span, .plan.main .plan-sub { color: var(--night-muted); }
.price { font: 300 33px/1 var(--serif); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.price small { font: 400 15px/1 var(--sans); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.plan.main .price small { color: var(--night-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.plan.main .chip { border-color: var(--night-line); color: var(--night-ink); }
.plan-lines { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.plan.main .plan-lines { border-top-color: var(--night-line); }
.plan-line { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.plan-line b { font: 300 20px/1 var(--serif); letter-spacing: -0.02em; min-width: 2.46em; font-variant-numeric: tabular-nums; color: inherit; }
.plan-sub { margin: 0; font-size: 14.5px; color: var(--muted); }
.plan .btn { margin-top: auto; }
/* «или в боте — подписка та же» под кнопкой «Оформить» */
.plan-alt { margin: -8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.plan.main .plan-alt { color: var(--night-muted); }
/* Заготовки тарифов — высотой с настоящие карточки (замер 30.09, карточки
   без плашек моделей и строки «или в боте»), чтобы живые цены не сдвигали
   страницу: в ряд — 366, стопкой первая (Pro) ниже двух других. */
.plan.skel { min-height: 366px; }
@media (max-width: 960px) { .plan.skel { min-height: 366px; } .plan.skel:first-child { min-height: 330px; } }
@media (max-width: 560px) { .plan.skel { min-height: 363px; } .plan.skel:first-child { min-height: 329px; } }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--paper-2), var(--line), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.extra { padding: 24px; border-left: 1px solid var(--line); }
.extra:first-child { border-left: 0; }
.extra h4 { margin: 0 0 8px; font: 600 16px/1.3 var(--sans); }
.extra p { margin: 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 960px) { .extras { grid-template-columns: 1fr 1fr; } .extra:nth-child(3) { border-left: 0; } .extra:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .extras { grid-template-columns: 1fr; } .extra { border-left: 0; } .extra + .extra { border-top: 1px solid var(--line); } }
.asof { margin-top: 18px; font: 400 12.5px/1.5 var(--mono); color: var(--faint); letter-spacing: 0.02em; }

/* ── Материалы и разделы: простые кнопки (29.09) ────────────────────── */
/* Раньше — карточки с нарисованными обложками; владелец: «не рисовать
   ничего, просто нормальные кнопки». */
.posts, .navbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.postbtn { height: auto; min-height: 48px; padding: 12px 20px; white-space: normal; text-align: left; line-height: 1.3; }
.go-h { margin: 0 0 24px; }
@media (max-width: 560px) { .navbtns .btn, .posts .postbtn { flex: 1 1 100%; justify-content: flex-start; } }

/* ── «О Нике»: разделы текстом (29.09) ───────────────────────────────── */
.about { padding-bottom: 32px; }
.about-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px 80px; padding: 56px 0; border-top: 1px solid var(--line); }
.about-sec:first-child { border-top: 0; padding-top: 32px; }
.about-sec h2 { margin: 0; font: 300 clamp(26px, 2.8vw, 36px)/1.1 var(--serif); letter-spacing: -0.025em; }
.about-sec p { margin: 0 0 18px; max-width: 38em; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.about-sec p:last-child { margin-bottom: 0; }
.about-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; color: var(--ink-2); }
.about-list b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .about-sec { grid-template-columns: 1fr; padding: 40px 0; } .about-sec p { font-size: 17px; } }

/* ── Вопросы ──────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px 80px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.qa-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 500 18px/1.4 var(--sans); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 5px; background: linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat; transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa .qa-a { padding: 0 48px 24px 0; color: var(--ink-2); }
.qa .qa-a p { margin: 0 0 12px; }
.qa .qa-a figure { margin: 8px 0 16px; }

/* ── Призыв ───────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; background: var(--night); color: var(--night-ink); border-radius: var(--r-lg); padding: 88px 64px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: end; }
.cta-band::before { content: ""; position: absolute; right: -10%; bottom: -60%; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(227, 162, 154, 0.14), transparent 70%); pointer-events: none; }
.cta-band .h2 { position: relative; max-width: 17.54em; }
.cta-band p { position: relative; margin: 18px 0 0; color: var(--night-muted); font-size: 18px; max-width: 29.76em; }
.cta-band .btns { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-line { border-color: var(--night-line); color: var(--night-ink); }
@media (hover: hover) { .cta-band .btn-line:hover { border-color: var(--night-ink); } }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; padding: 56px 28px; } }
/* Борозды знака в призыве (рисует motion.js, где он подключён; без него — пустой слой). */
.furrow-band { isolation: isolate; }
.furrow-band::before { display: none; }
.furrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }

/* ── Статья ───────────────────────────────────────────────────────────── */
.article-head { padding-top: 64px; padding-bottom: 48px; }
/* Широкий кадр под заголовком «О Нике» (nika-diary.jpg). */
.about-photo { margin: 0 0 24px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--paper-2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
@media (max-width: 560px) { .about-photo { aspect-ratio: 4 / 3; border-radius: 20px; } .about-photo img { object-position: 62% 70%; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--faint); }
.article-head .display { font-size: clamp(40px, 5.4vw, 72px); max-width: 15.79em; }
.article-head .lead { max-width: 38.44em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-size: 14.5px; color: var(--muted); }
.meta-row b { color: var(--ink); font-weight: 500; }
.article-hero { margin: 0 0 72px; border-radius: var(--r-lg); overflow: hidden; background: var(--night); border: 1px solid var(--line); }
.article-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 72px; justify-content: center; padding-bottom: 96px; }
.toc { position: sticky; top: 100px; align-self: start; font-size: 14px; }
.toc p { margin: 0 0 14px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { text-decoration: none; display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); line-height: 1.35; transition: color .15s ease, border-color .15s ease; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--ink); }
@media (max-width: 1100px) { .article-grid { grid-template-columns: minmax(0, 720px); } .toc { display: none; } }

.prose { font-size: 18px; line-height: 1.72; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 22px; text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h2 { font: 300 clamp(23px, 2.3vw, 29px)/1.15 var(--serif); letter-spacing: -0.025em; color: var(--ink); margin: 72px 0 22px; scroll-margin-top: 96px; text-wrap: balance; }
.prose h3 { font: 600 20px/1.35 var(--sans); color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 96px; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 22px; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: var(--faint); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 56px 0; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--ink); color: var(--ink); font: 400 20px/1.55 var(--sans); }
.prose code { font: 400 0.88em/1 var(--mono); background: var(--paper-2); padding: 3px 6px; border-radius: 6px; }
.prose em { font-style: italic; }
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--night); }
.prose figure.tall img { max-width: 620px; margin: 0 auto; }
.prose figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.prose .note { font-size: 15.5px; color: var(--muted); }
.prose .kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0 0 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 16px; }
.prose .kv dt { color: var(--muted); }
.prose .kv dd { margin: 0; color: var(--ink); }
.prose .qa-list { margin: 8px 0 24px; }
.prose .qa summary { font-size: 18px; }

.article-live { margin: 0 0 56px; }
.more-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }

/* ── Соцсети ──────────────────────────────────────────────────────────── */
.links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .links-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .links-grid { grid-template-columns: 1fr; } }
.link-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .2s ease, transform .3s var(--ease); }
@media (hover: hover) { .link-card:hover { border-color: var(--line-2); transform: translateY(-2px); } }
.link-card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--night); color: var(--night-ink); }
.link-card .ico svg { width: 22px; height: 22px; }
.link-card h3 { margin: 0; font: 300 20px/1.15 var(--serif); letter-spacing: -0.02em; }
.link-card .handle { font: 400 14px/1.3 var(--mono); color: var(--accent); }
.link-card p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ── Формы ────────────────────────────────────────────────────────────── */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; }
@media (max-width: 640px) { .form-card { padding: 24px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.field .help { font-size: 13.5px; color: var(--faint); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Виджет «я не робот» (Turnstile, human.js): место держим заранее, чтобы
   кнопка не прыгала, когда виджет догрузится. */
/* «Я не робот» (human.js, 29.09): строка статуса вместо висящего окошка
   Cloudflare. Свёрнута, когда проверка прошла; окошко — только если просят
   галочку. Кнопки, ждущие проверку (.needs-human), приглушены. */
.human-check { display: grid; overflow: hidden; max-height: 0; opacity: 0; margin: 0; transition: max-height .35s var(--ease), opacity .25s ease, margin .35s var(--ease); }
.human-check[hidden] { display: none; }
.human-check.hc-open { max-height: 240px; opacity: 1; margin: 2px 0 6px; }
.hc-status { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font-size: 14.5px; }
.hc-ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.hc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); border-top-color: var(--ink); animation: hc-spin .8s linear infinite; }
.hc-ic svg { display: none; width: 18px; height: 18px; color: var(--ok); }
.human-check[data-state="done"] .hc-spin, .human-check[data-state="ok"] .hc-spin, .human-check[data-state="error"] .hc-spin, .human-check[data-state="interactive"] .hc-spin { display: none; }
.human-check[data-state="done"] .hc-ic svg { display: block; }
.human-check[data-state="done"] .hc-status { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.human-check[data-state="error"] .hc-status { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.hc-retry { margin-left: auto; font-size: 13.5px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hc-widget { overflow: hidden; }
.human-check[data-state="interactive"] .hc-widget { margin-top: 10px; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hc-spin { animation-duration: 2.4s; } .human-check { transition: none; } }
.hc-wait .needs-human { opacity: .45; pointer-events: none; cursor: default; filter: saturate(.6); transition: opacity .2s ease; }
/* Плашка cookie (site.js). */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 16px; max-width: 420px; padding: 14px 14px 14px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px rgba(28, 27, 26, .28); font-size: 14.5px; color: var(--ink-2); transform: translateY(12px); opacity: 0; transition: transform .45s var(--ease), opacity .3s ease; }
.cookie.in { transform: none; opacity: 1; }
.cookie p { margin: 0; line-height: 1.45; }
.cookie a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie .btn { flex: none; height: 36px; padding: 0 18px; }
@media (max-width: 560px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 10px 10px 10px 16px; }
  /* Цели 44 px (30.09): «OK» и «Подробнее» (ссылке — поле нажатия без сдвига строки). */
  .cookie .btn { height: 44px; min-width: 64px; padding: 0 20px; }
  .cookie a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* Пока плашка не закрыта, низ подвала (документы) не прячется под ней. */
  body:has(.cookie) .foot { padding-bottom: 100px; }
}
/* Открытое меню шапки плашка не закрывает: иначе на телефоне она лежит
   поверх его низа («Попробовать бесплатно», строки «Поддержки»). */
body:has(.sheet.open) .cookie { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
.status { margin: 16px 0 0; min-height: 24px; font-size: 15px; }
.status.ok { color: var(--ok); }
.status.err { color: var(--warn); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
/* Строка согласия под кнопкой формы */
.form-fine { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--faint); max-width: 38.44em; }
.aside-list { display: grid; gap: 28px; align-content: start; }   /* блоки сверху, а не растянуты по высоте формы */
.aside-list h3 { margin: 0 0 6px; font: 600 17px/1.3 var(--sans); }
.aside-list p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ── Профиль ──────────────────────────────────────────────────────────── */
.auth { max-width: 560px; }
.code-input { font: 500 30px/1 var(--mono) !important; letter-spacing: 0.45em; text-align: center; padding: 16px !important; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.switch-row { margin: 22px 0 0; color: var(--faint); font-size: 15px; }
.who-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: var(--cyan); font: 700 26px/1 var(--brand); }
.who-head h1 { margin: 0; font: 300 clamp(24px, 3vw, 33px)/1.1 var(--serif); letter-spacing: -0.025em; }
.who-head .sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.who-head .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill.off { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.card h4 { margin: 0 0 16px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.card .value { font: 300 29px/1.05 var(--serif); letter-spacing: -0.025em; }
.card .value.dimmed { color: var(--faint); }
.card p.muted { margin: 8px 0 0; font-size: 15px; }
.card .btn { margin-top: 18px; }
.card .chips { margin-top: 16px; }
.chip-off { color: var(--faint) !important; border-style: dashed !important; }
.chip-off::before { background: transparent !important; box-shadow: inset 0 0 0 1px var(--faint); }
.meters { display: grid; gap: 18px; margin-top: 22px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.meter-head b { font-weight: 500; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 8px 0 6px; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--ink); }
.bar.hot i { background: var(--warn); }
.small { font-size: 13px; color: var(--faint); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; font-size: 15.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Подвал ───────────────────────────────────────────────────────────── */
.foot { background: var(--night); color: var(--night-muted); margin-top: 120px; padding: 88px 0 36px; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.foot .brand { color: var(--night-ink); font-size: 24px; }
.foot .brand svg { width: 48px; }
.foot-about p { margin: 20px 0 0; max-width: 18.6em; line-height: 1.55; text-wrap: pretty; }
.foot .foot-h { margin: 0 0 16px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-ink); opacity: 0.6; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a { color: var(--night-muted); text-decoration: none; transition: color .15s ease; }
.foot ul a { overflow-wrap: anywhere; }   /* support@niva.company в узкой колонке */
.foot a:hover { color: var(--night-ink); }
.socials { display: flex; gap: 10px; margin-top: 28px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--night-line); color: var(--night-ink); transition: border-color .15s ease, background-color .15s ease; }
.socials a:hover { border-color: var(--night-ink); }
.socials svg { width: 18px; height: 18px; }
/* Огромное «NiVa» в подвале — украшение: текстом из CSS, чтобы проверки контраста
   (axe, Lighthouse) не считали его нечитаемым текстом; для дикторов скрыто и так. */
.foot-word::before { content: "NiVa"; }
.foot-word { margin: 80px 0 0; font: 700 clamp(80px, 19vw, 260px)/0.8 var(--brand); letter-spacing: -0.03em; color: var(--night-2); user-select: none; white-space: nowrap; overflow: hidden; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 13.5px; }
.foot-bottom .team a { color: var(--night-ink); }
/* Документы — отдельными ссылками через промежуток, без «·» (30.09). */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
@media (max-width: 1000px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
/* В два столбца «Модели» (4 строки) — на две строки сетки: «Узнать больше»
   встаёт под «Продукт», а не отдельным рядом с пустотой справа (30.09). */
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.nf { padding: 120px 0 40px; }
.foot ul a, .socials a, .crumbs a { text-decoration: none; }
.nf .display { font-size: clamp(48px, 8vw, 104px); }

/* ── Главная: самое новое ─────────────────────────────────────────────── */
.news-hero { padding: 48px 0 96px; }
.news-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.news-hero .display { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.02; margin-top: 26px; }
.news-hero .lead { max-width: 32.24em; }
.news-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.news-media { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--night); border: 1px solid var(--line); box-shadow: 0 40px 80px -48px rgba(38, 28, 24, 0.4); }
.news-media img { width: 100%; transition: transform .7s var(--ease); }
.news-media:hover img { transform: scale(1.02); }
.also { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.also .posts { gap: 40px 24px; }
@media (max-width: 960px) { .news-hero { padding: 32px 0 72px; } .news-grid { grid-template-columns: 1fr; gap: 36px; } .also { margin-top: 56px; } }

/* ── Материалы ────────────────────────────────────────────────────────── */
.materials { display: grid; gap: 56px; padding-bottom: 24px; }
.mat-more { margin: 18px 0 0; }
.mat-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mat-list li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 6px 32px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.mat-list a { font: 500 18px/1.3 var(--sans); color: var(--ink); text-decoration: none; }
@media (hover: hover) { .mat-list a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.mat-list span { color: var(--muted); font-size: 16px; }
@media (max-width: 640px) { .mat-list li { grid-template-columns: 1fr; } }
.mat-title { margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ── Телефон (25.09) ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 44px 0; }
  .lead { font-size: 17.5px; margin-top: 16px; }
  .eyebrow { margin-bottom: 12px; }
  /* призыв внизу страниц */
  .cta-band { gap: 22px; border-radius: 20px; }   /* поля — ниже, после правки 30.09 */
  .cta-band p { font-size: 16px; margin-top: 12px; }
  .cta-band .btns { flex-direction: column; align-items: stretch; }
  .cta-band .btns .btn { width: 100%; }
  /* подвал: ссылки в два столбца, а не одной длинной лентой */
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-about { grid-column: 1 / -1; }
  /* формы */
  .form-card { padding: 20px 16px; border-radius: 20px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  /* статьи */
  .article-fig { margin-bottom: 44px; }
}

/* Слова в заголовках не переносим (27.09): автоматические переносы резали
   строку посреди слова, даже когда оно целиком влезало на следующую
   («Одиночество за-канчивается»), а text-wrap: balance охотно пользуется
   любой возможностью переноса. Только на телефоне, где длинное слово
   правда не влезает, работают ручные мягкие переносы (&shy; в разметке:
   «конфиден&shy;циальности», «исполь&shy;зования»). */
h1, h2, h3, .display, .h2 { overflow-wrap: break-word; hyphens: none; }
@media (max-width: 560px) {
  h1, h2, h3, .display, .h2 { hyphens: manual; }
  .display, .article-head .display { font-size: clamp(32px, 9.4vw, 42px); }
}

/* ── Заставка при первом заходе (boot.js, 27.09) ─────────────────────── */
/* Разметка — в каждой странице сразу после <body> (tools/build.mjs), видна
   только при html.booting: его ставит figures.js до первой отрисовки, если
   сайт в этой вкладке ещё не открывали. Знак — копия логотипа шапки ×--s:
   черта горизонта раскрывается от центра, лучи вырастают из неё от
   середины к краям, потом надпись; пока ждём — по лучам бежит блик.
   Уход — фон растворяется, знак перелетает на место логотипа в шапке
   (boot.js). Если скрипт не сработал, заставка уходит сама через 6 с. */
.boot { display: none; }
html.booting .boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; animation: boot-away .01s linear 6s forwards; }
.boot::before { content: ""; position: absolute; inset: 0; background: var(--paper); transition: opacity .75s var(--ease); }
html.booted .boot { pointer-events: none; }
html.booted .boot::before { opacity: 0; }
.boot-mark { --s: 2; position: relative; transform: scale(var(--s)); }
html.booting .top .brand { opacity: 0; animation: boot-show .01s linear 6s forwards; }
html.booting .boot rect { transform-box: fill-box; transform-origin: 50% 50%; animation: boot-bar .75s var(--ease) .1s both; }
html.booting .boot polygon { transform-box: fill-box; transform-origin: 50% 0; animation: boot-ray .8s var(--ease) .38s both, boot-glint 1.6s ease-in-out 1.55s infinite; }
html.booting .boot polygon:nth-child(1) { animation-delay: .62s, 1.55s; }
html.booting .boot polygon:nth-child(2) { animation-delay: .54s, 1.64s; }
html.booting .boot polygon:nth-child(3) { animation-delay: .46s, 1.73s; }
html.booting .boot polygon:nth-child(4) { animation-delay: .38s, 1.82s; }
html.booting .boot polygon:nth-child(5) { animation-delay: .46s, 1.91s; }
html.booting .boot polygon:nth-child(6) { animation-delay: .54s, 2s; }
html.booting .boot polygon:nth-child(7) { animation-delay: .62s, 2.09s; }
html.booted .boot polygon { animation: none; }
html.booting .boot-word { animation: boot-word .7s var(--ease) .72s both; }
@keyframes boot-bar { from { transform: scaleX(0); } }
@keyframes boot-ray { from { transform: scaleY(0); } }
@keyframes boot-glint { 0%, 55%, 100% { fill-opacity: 1; } 25% { fill-opacity: .28; } }
@keyframes boot-word { from { opacity: 0; transform: translateX(-10px); } }
@keyframes boot-away { to { opacity: 0; visibility: hidden; } }
@keyframes boot-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.booting .boot * { animation: none !important; } }

/* ── Нет видеокарты (boot.js → html.lowgfx) ─────────────────────────── */
/* Страницу рисует процессор (например, в Chrome выключен графический
   ускоритель): размытие фона под шапкой и плашками он пересчитывал бы
   каждый кадр прокрутки — вместо него сплошной фон (полупрозрачный без
   размытия только просвечивал текстом). Дождя в этом случае нет (rain.js). */
html.lowgfx .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }

/* ── Переходы по сайту без перезагрузки (nav.js) ─────────────────────── */
/* Полоска сверху — если страница не пришла мгновенно; смена страниц —
   короткое растворение (View Transitions), шапка стоит на месте. */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
html.nav-busy .nav-progress { opacity: 1; animation: nav-load 2.4s cubic-bezier(.1, .7, .2, 1) forwards; }
html.nav-busy { cursor: progress; }
@keyframes nav-load { from { transform: scaleX(.06); } to { transform: scaleX(.85); } }
.top { view-transition-name: niva-top; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
#main:focus { outline: none; }
/* «К содержимому»: начало страницы не уходит под липкую шапку (30.09).
   Форма «Написать нам» — цель «Поддержка → На сайте» на самой /contact. */
#main { scroll-margin-top: 68px; }
#apply-form { scroll-margin-top: 84px; }
.hc-widget { width: 100%; }
.hc-widget iframe { max-width: 100%; }
/* Никаких кружочков перед словами и между ними (владелец 29.09): точки у
   статусов, моделей, плашек, «Новое», крошек и подписей графиков. Точки
   «есть / нет» в таблицах сравнения (.fdot) — данные, их не трогаем. */
.mdot, .st::before, .pill::before, .chip::before, .badge::before, .model li::before, .mp-kind::before,
body[class*="tone-"] .crumbs > span:last-child::before,
.fg-stat:not(.wide) > span::before, .fg-big > span::before, .fg-list > div > span::before,
.fg-models i, .fg-badge { display: none !important; content: none !important; }
.st, .pill, .chip, .badge { gap: 0; }
/* «Повторить»: цель 40 px в высоту без сдвига строки (30.09; было 71×22). */
.hc-retry { display: inline-flex; align-items: center; min-height: 40px; margin: -8px -6px -8px auto; padding: 0 6px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; }
.human-check[data-state="error"] .hc-ic, .human-check[data-state="interactive"] .hc-ic { display: none; }

/* ── Тёмная тема (владелец 29.09) ──────────────────────────────────────────
   По настройке системы или кнопкой в шапке (data-theme на <html>, выбор —
   localStorage «niva.theme»). Токены те же, что у светлой; вписанные цвета
   и цвета разделов переопределены здесь же. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #242424;
  --paper-2: #2d2d2d;
  --surface: #2a2a2a;
  --ink: #ecebe8;
  --ink-2: #d0cdc9;
  --muted: #a6a29d;
  --faint: #948f8a;
  --line: #363636;
  --line-2: #464646;
  --accent: #e3a59b;
  --accent-soft: rgba(227, 165, 155, 0.14);
  --night: #1a1a1a;
  --night-2: #202020;
  --night-line: #333333;
  --night-ink: #f2efec;
  --night-muted: #aca49e;
  --anima: #e3a59b;
  --levia: #caa7a1;
  --lux: #b4aaa7;
  --pending: #e2a650;
  --btn: #ecebe8;
  --btn-ink: #1c1c1c;
  --ok: #5fc48c;
  --warn: #ee8b6b;
  --pop-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 24px 56px -20px rgba(0, 0, 0, .6);
  color-scheme: dark;
  }
:root:not([data-theme="light"]) .k-title { text-shadow: 0 0 32px rgba(36, 36, 36, .9); }
:root:not([data-theme="light"]) .k-hero .lead { text-shadow: 0 0 22px rgba(36, 36, 36, .95); }
:root:not([data-theme="light"]) .st.wait { color: color-mix(in srgb, var(--pending) 85%, #fff); }
:root:not([data-theme="light"]) .seg input:checked + span { background: var(--paper-2); }
:root:not([data-theme="light"]) .k-base:not(.k-dark) { display: none; }
:root:not([data-theme="light"]) .k-base.k-dark { display: block; }
:root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
:root:not([data-theme="light"]) .theme-btn .t-light { display: inline; }
:root:not([data-theme="light"]) .theme-btn .i-moon, :root:not([data-theme="light"]) .theme-btn .t-dark { display: none; }
:root:not([data-theme="light"]) .cvp-anima, :root:not([data-theme="light"]) .tone-anima { --cv-ink: #e3a59b; }
:root:not([data-theme="light"]) .cvp-levia, :root:not([data-theme="light"]) .tone-levia { --cv-ink: #caa7a1; }
:root:not([data-theme="light"]) .cvp-lux, :root:not([data-theme="light"]) .tone-lux { --cv-ink: #b4aaa7; }
:root:not([data-theme="light"]) .cvp-memory, :root:not([data-theme="light"]) .tone-memory { --cv-ink: #e3a59b; }
:root:not([data-theme="light"]) .cvp-prices, :root:not([data-theme="light"]) .tone-prices, :root:not([data-theme="light"]) .tone-social { --cv-ink: #e3a59b; }
:root:not([data-theme="light"]) .cvp-faq, :root:not([data-theme="light"]) .tone-faq { --cv-ink: #e3a59b; }
:root:not([data-theme="light"]) .cvp-updates, :root:not([data-theme="light"]) .tone-updates { --cv-ink: #e3a59b; }
:root:not([data-theme="light"]) .cvp-compare { --cv-ink: #e3a59b; }
}
:root[data-theme="dark"] {
  --paper: #242424;
  --paper-2: #2d2d2d;
  --surface: #2a2a2a;
  --ink: #ecebe8;
  --ink-2: #d0cdc9;
  --muted: #a6a29d;
  --faint: #948f8a;
  --line: #363636;
  --line-2: #464646;
  --accent: #e3a59b;
  --accent-soft: rgba(227, 165, 155, 0.14);
  --night: #1a1a1a;
  --night-2: #202020;
  --night-line: #333333;
  --night-ink: #f2efec;
  --night-muted: #aca49e;
  --anima: #e3a59b;
  --levia: #caa7a1;
  --lux: #b4aaa7;
  --pending: #e2a650;
  --btn: #ecebe8;
  --btn-ink: #1c1c1c;
  --ok: #5fc48c;
  --warn: #ee8b6b;
  --pop-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 24px 56px -20px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme="dark"] .k-title { text-shadow: 0 0 32px rgba(36, 36, 36, .9); }
:root[data-theme="dark"] .k-hero .lead { text-shadow: 0 0 22px rgba(36, 36, 36, .95); }
:root[data-theme="dark"] .st.wait { color: color-mix(in srgb, var(--pending) 85%, #fff); }
:root[data-theme="dark"] .seg input:checked + span { background: var(--paper-2); }
:root[data-theme="dark"] .k-base:not(.k-dark) { display: none; }
:root[data-theme="dark"] .k-base.k-dark { display: block; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .t-light { display: inline; }
:root[data-theme="dark"] .theme-btn .i-moon, :root[data-theme="dark"] .theme-btn .t-dark { display: none; }
:root[data-theme="dark"] .cvp-anima, :root[data-theme="dark"] .tone-anima { --cv-ink: #e3a59b; }
:root[data-theme="dark"] .cvp-levia, :root[data-theme="dark"] .tone-levia { --cv-ink: #caa7a1; }
:root[data-theme="dark"] .cvp-lux, :root[data-theme="dark"] .tone-lux { --cv-ink: #b4aaa7; }
:root[data-theme="dark"] .cvp-memory, :root[data-theme="dark"] .tone-memory { --cv-ink: #e3a59b; }
:root[data-theme="dark"] .cvp-prices, :root[data-theme="dark"] .tone-prices, :root[data-theme="dark"] .tone-social { --cv-ink: #e3a59b; }
:root[data-theme="dark"] .cvp-faq, :root[data-theme="dark"] .tone-faq { --cv-ink: #e3a59b; }
:root[data-theme="dark"] .cvp-updates, :root[data-theme="dark"] .tone-updates { --cv-ink: #e3a59b; }
:root[data-theme="dark"] .cvp-compare { --cv-ink: #e3a59b; }
/* Всплывающие меню и карточка «Поддержка» в тёмной теме: рамка --line
   (#363636 на #2a2a2a, 1,2:1) почти не видна — панель держалась на одной
   тени. Рамка светлее. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet-panel, :root:not([data-theme="light"]) .sup-in { border-color: var(--line-2); } }
:root[data-theme="dark"] .sheet-panel, :root[data-theme="dark"] .sup-in { border-color: var(--line-2); }

/* Фото главной: тёмное — только в тёмной теме. Кнопка темы — строка меню шапки. */
.k-base.k-dark { display: none; }
/* Тёмная тема: фото главной без умножения — фон кадра (#242424) совпадает с
   фоном страницы, края растворяет маска. Умножение гасило фото в черноту. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-photo { mix-blend-mode: normal; } }
:root[data-theme="dark"] .k-photo { mix-blend-mode: normal; }
/* Края фото в тёмной теме (владелец 29.09): само фото не трогаем, растворяются
   только поля по краю — плавно, по кривой, без видимой линии. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.6%, rgba(0,0,0,0.352) 5.2%, rgba(0,0,0,0.648) 7.8%, rgba(0,0,0,0.896) 10.4%, #000 13%, #000 64%, rgba(0,0,0,0.896) 71.2%, rgba(0,0,0,0.648) 78.4%, rgba(0,0,0,0.352) 85.6%, rgba(0,0,0,0.104) 92.8%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 7.2%, rgba(0,0,0,0.352) 14.4%, rgba(0,0,0,0.648) 21.6%, rgba(0,0,0,0.896) 28.8%, #000 36%, #000 87%, rgba(0,0,0,0.896) 89.6%, rgba(0,0,0,0.648) 92.2%, rgba(0,0,0,0.352) 94.8%, rgba(0,0,0,0.104) 97.4%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.6%, rgba(0,0,0,0.352) 5.2%, rgba(0,0,0,0.648) 7.8%, rgba(0,0,0,0.896) 10.4%, #000 13%, #000 64%, rgba(0,0,0,0.896) 71.2%, rgba(0,0,0,0.648) 78.4%, rgba(0,0,0,0.352) 85.6%, rgba(0,0,0,0.104) 92.8%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 7.2%, rgba(0,0,0,0.352) 14.4%, rgba(0,0,0,0.648) 21.6%, rgba(0,0,0,0.896) 28.8%, #000 36%, #000 87%, rgba(0,0,0,0.896) 89.6%, rgba(0,0,0,0.648) 92.2%, rgba(0,0,0,0.352) 94.8%, rgba(0,0,0,0.104) 97.4%, transparent 100%); } }
:root[data-theme="dark"] .k-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.6%, rgba(0,0,0,0.352) 5.2%, rgba(0,0,0,0.648) 7.8%, rgba(0,0,0,0.896) 10.4%, #000 13%, #000 64%, rgba(0,0,0,0.896) 71.2%, rgba(0,0,0,0.648) 78.4%, rgba(0,0,0,0.352) 85.6%, rgba(0,0,0,0.104) 92.8%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 7.2%, rgba(0,0,0,0.352) 14.4%, rgba(0,0,0,0.648) 21.6%, rgba(0,0,0,0.896) 28.8%, #000 36%, #000 87%, rgba(0,0,0,0.896) 89.6%, rgba(0,0,0,0.648) 92.2%, rgba(0,0,0,0.352) 94.8%, rgba(0,0,0,0.104) 97.4%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.6%, rgba(0,0,0,0.352) 5.2%, rgba(0,0,0,0.648) 7.8%, rgba(0,0,0,0.896) 10.4%, #000 13%, #000 64%, rgba(0,0,0,0.896) 71.2%, rgba(0,0,0,0.648) 78.4%, rgba(0,0,0,0.352) 85.6%, rgba(0,0,0,0.104) 92.8%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 7.2%, rgba(0,0,0,0.352) 14.4%, rgba(0,0,0,0.648) 21.6%, rgba(0,0,0,0.896) 28.8%, #000 36%, #000 87%, rgba(0,0,0,0.896) 89.6%, rgba(0,0,0,0.648) 92.2%, rgba(0,0,0,0.352) 94.8%, rgba(0,0,0,0.104) 97.4%, transparent 100%); }
@media (max-aspect-ratio: 1 / 1) {
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.4%, rgba(0,0,0,0.352) 4.8%, rgba(0,0,0,0.648) 7.2%, rgba(0,0,0,0.896) 9.6%, #000 12%, #000 52%, rgba(0,0,0,0.896) 61.6%, rgba(0,0,0,0.648) 71.2%, rgba(0,0,0,0.352) 80.8%, rgba(0,0,0,0.104) 90.4%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 4.4%, rgba(0,0,0,0.352) 8.8%, rgba(0,0,0,0.648) 13.2%, rgba(0,0,0,0.896) 17.6%, #000 22%, #000 92%, rgba(0,0,0,0.896) 93.6%, rgba(0,0,0,0.648) 95.2%, rgba(0,0,0,0.352) 96.8%, rgba(0,0,0,0.104) 98.4%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.4%, rgba(0,0,0,0.352) 4.8%, rgba(0,0,0,0.648) 7.2%, rgba(0,0,0,0.896) 9.6%, #000 12%, #000 52%, rgba(0,0,0,0.896) 61.6%, rgba(0,0,0,0.648) 71.2%, rgba(0,0,0,0.352) 80.8%, rgba(0,0,0,0.104) 90.4%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 4.4%, rgba(0,0,0,0.352) 8.8%, rgba(0,0,0,0.648) 13.2%, rgba(0,0,0,0.896) 17.6%, #000 22%, #000 92%, rgba(0,0,0,0.896) 93.6%, rgba(0,0,0,0.648) 95.2%, rgba(0,0,0,0.352) 96.8%, rgba(0,0,0,0.104) 98.4%, transparent 100%); } }
  :root[data-theme="dark"] .k-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.4%, rgba(0,0,0,0.352) 4.8%, rgba(0,0,0,0.648) 7.2%, rgba(0,0,0,0.896) 9.6%, #000 12%, #000 52%, rgba(0,0,0,0.896) 61.6%, rgba(0,0,0,0.648) 71.2%, rgba(0,0,0,0.352) 80.8%, rgba(0,0,0,0.104) 90.4%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 4.4%, rgba(0,0,0,0.352) 8.8%, rgba(0,0,0,0.648) 13.2%, rgba(0,0,0,0.896) 17.6%, #000 22%, #000 92%, rgba(0,0,0,0.896) 93.6%, rgba(0,0,0,0.648) 95.2%, rgba(0,0,0,0.352) 96.8%, rgba(0,0,0,0.104) 98.4%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.104) 2.4%, rgba(0,0,0,0.352) 4.8%, rgba(0,0,0,0.648) 7.2%, rgba(0,0,0,0.896) 9.6%, #000 12%, #000 52%, rgba(0,0,0,0.896) 61.6%, rgba(0,0,0,0.648) 71.2%, rgba(0,0,0,0.352) 80.8%, rgba(0,0,0,0.104) 90.4%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.104) 4.4%, rgba(0,0,0,0.352) 8.8%, rgba(0,0,0,0.648) 13.2%, rgba(0,0,0,0.896) 17.6%, #000 22%, #000 92%, rgba(0,0,0,0.896) 93.6%, rgba(0,0,0,0.648) 95.2%, rgba(0,0,0,0.352) 96.8%, rgba(0,0,0,0.104) 98.4%, transparent 100%); }
}


/* ── Правки владельца 30.09 ─────────────────────────────────────────────── */
/* Ссылка со стрелкой: линия под ней сплошная от первой буквы до стрелки и не
   двигается; при наведении меняется только цвет. */
.arrow { display: inline-block; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; line-height: 1.3; text-decoration: none; transition: color .15s ease; }
.arrow::after { content: "→"; margin-left: 8px; transition: none; }
@media (hover: hover) { .arrow:hover { color: var(--accent); } }
.arrow:hover::after { transform: none; }
/* Плашка внизу страниц: заголовок и кнопки, без описания — по центру высоты. */
.cta-band { align-items: center; padding-block: 72px; }
@media (max-width: 900px) { .cta-band { padding-block: 48px; } }
@media (max-width: 560px) { .cta-band { padding: 32px 20px; } }
/* Надпись над заголовком главной: «Telegram» ведёт на «Где мы есть». */
.h-kicker { gap: .3em; }
.h-kicker a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.h-kicker a:hover { text-decoration-color: currentColor; }
/* Подвал плотнее — особенно на телефоне, где он был «бездонным». */
.foot { margin-top: 56px; padding: 64px 0 28px; }
.foot-word { margin-top: 40px; font-size: clamp(72px, 13vw, 180px); }
@media (max-width: 720px) {
  /* 32, а не 64 (30.09): перед подвалом и так нижний отступ секции —
     между плашкой внизу страницы и подвалом было 96–108 px пустоты. */
  .foot { margin-top: 32px; padding: 40px 0 22px; font-size: 14.5px; }
  .foot-top { gap: 26px 16px; }
  .foot-about { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; }
  .foot-about p { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; font-size: 14px; }
  .foot .brand { font-size: 21px; min-height: 44px; }
  .foot .brand svg { width: 40px; }
  .socials { margin: 0; gap: 8px; }
  /* Значки и ссылки — цели 44 px (30.09; были 36 и 17). */
  .socials a { width: 44px; height: 44px; }
  .foot .foot-h { margin-bottom: 2px; }
  .foot ul { gap: 0; }
  .foot ul a { overflow-wrap: normal; display: inline-flex; align-items: center; min-height: 44px; }
  /* Водяной знак «NiVa» на телефоне — лишние 90 px пустоты. */
  .foot-word { display: none; }
  .foot-bottom { flex-direction: column; margin-top: 22px; padding-top: 8px; font-size: 12.5px; gap: 0; }
  .foot-legal { gap: 0 20px; }
  .foot-legal > span { flex-basis: 100%; padding: 10px 0 2px; }
  .foot-legal a, .foot-bottom .team a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ── Публичные страницы на телефоне (30.09) ─────────────────────────────── */
/* Цели нажатия у ссылок-стрелок и «Telegram» в надписи главной — шире
   самой ссылки (26 px → ~46 px), вид не меняется. У .arrow занят ::after. */
.arrow, .h-kicker a { position: relative; }
.arrow::before, .h-kicker a::before { content: ""; position: absolute; inset: -10px -6px; }
/* Крошки: цель 40 px без сдвига строки. */
.crumbs a { display: inline-flex; align-items: center; min-height: 40px; margin: -12px 0; }

/* Нажатие пальцем (30.09): системной синей подложки Android нет — у
   раскрывашек, строк меню и ссылок подвала своё нажатое состояние. */
@media (hover: none) {
  .qa summary:active, .toc-m summary:active { color: var(--muted); }
  .sheet-row:active, .sup-opt:active, .toc-m a:active { background: var(--paper-2); }
  .burger:active, .to-me:not([aria-current]):active { background: var(--paper-2); }
  .foot a:active { color: var(--night-ink); }
}

/* «Содержание» свёрнутым списком (build.mjs tocDetails): у статей — там,
   где боковое оглавление скрыто (≤1100), у юридических — всегда. */
.toc-m { display: none; margin: 0 0 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.toc-m.doc { display: block; }
@media (max-width: 1100px) { .toc-m { display: block; } }
.toc-m summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 16px; cursor: pointer; font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat; transition: transform .3s var(--ease); }
.toc-m[open] summary::after { transform: rotate(45deg); }
.toc-m summary:focus-visible { outline-offset: -2px; border-radius: var(--r); }
.toc-m ol { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; }
.toc-m a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.35; text-decoration: none; }
@media (hover: hover) { .toc-m a:hover { background: var(--paper-2); color: var(--ink); } }
.doc-toc { max-width: 760px; margin: 0 auto; }

/* «Материалы»: нажимается вся строка, а не только заголовок (23 px). */
.mat-list li { position: relative; }
.mat-list a::after { content: ""; position: absolute; inset: 0; }
.mat-list li:active { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* «Написать нам»: почта списком — строка 44 px, адрес и пояснение рядом. */
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mail-list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 44px; color: var(--muted); font-size: 15.5px; line-height: 1.35; }
.mail-list a { display: inline-flex; align-items: center; min-height: 44px; }
.mail-list li span { padding-bottom: 2px; }
/* Форма: пустые обязательные поля подсвечены (site.js), строка статуса над
   кнопкой и без пустого места, пока в ней ничего нет. */
#apply-form .field [aria-invalid="true"] { border-color: var(--warn); }
#apply-status:empty { margin: 0; min-height: 0; }
/* Мелкие подписи формы — не ниже 4,5:1 и в тёмной теме (--faint на карточке 4,48). */
#apply-form .help, #apply-form .form-fine { color: var(--muted); }
/* Выбор темы — своим шевроном, текст вровень с соседними полями. Шеврон —
   токеном: у тёмной темы свой цвет. */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a6a29d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a6a29d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.field select.sel { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; cursor: pointer; }
/* До 900 px (одна колонка): сначала справка о поддержке, потом форма,
   потом почта и канал — раньше форма начиналась только на втором экране. */
@media (max-width: 900px) {
  .contact-split { gap: 28px; }
  .contact-split .aside-list { display: contents; }
  .contact-split > .form-card { order: 1; }
  .contact-split .aside-list > div:not(:first-child) { order: 2; }
}

@media (max-width: 600px) {
  /* «Где мы есть»: карточка-строка — значок слева, текст справа (~90 px вместо 220). */
  .links-grid { gap: 12px; }
  .link-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; }
  .link-card .ico { grid-row: 1 / span 3; align-self: start; }
  .link-card > :not(.ico) { grid-column: 2; }
}

@media (max-width: 560px) {
  /* Отступы: без пустот по 100–150 px между блоками. */
  .section { padding: 48px 0; }
  .section.tight { padding: 32px 0; }
  .about { padding-bottom: 0; }
  .article-head { padding-top: 28px; padding-bottom: 32px; }
  /* Крошки: у одноуровневых страниц — не нужны (логотип шапки и так ведёт
     на главную); у вложенных — без «NiVa». */
  .crumbs { margin-bottom: 16px; }
  .crumbs:not(:has(a + span + a)) { display: none; }
  .crumbs > a:first-child, .crumbs > a:first-child + span { display: none; }
  .meta-row { margin-top: 20px; gap: 4px 16px; font-size: 13.5px; }
  .meta-row:has(.m-upd) .m-pub { display: none; }
  /* Статьи */
  .qa .qa-a { padding-right: 0; }
  .prose hr { margin: 36px 0; }
  .prose h2 { margin-top: 48px; }
  .prose hr + h2 { margin-top: 0; }
  .prose .qa-list + hr { display: none; }
  .prose.doc { font-size: 16px; line-height: 1.6; }
  /* Форма «Написать нам» */
  #apply-form .form-actions .btn { width: 100%; height: 54px; }
  /* 404 */
  .nf { padding-top: 72px; }
  .nf .display { font-size: clamp(32px, 9.4vw, 42px); }
  .nf .form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .nf .form-actions .btn { width: 100%; }
}

/* ── Подвал раскрывашками (владелец 01.10) ──────────────────────────────
   На компьютере разделы раскрыты и заголовок не нажимается. На телефоне —
   одна колонка: «Продукт ▾», «Модели ▾»… строками во всю ширину, по
   нажатию раскрываются (site.js сворачивает их при загрузке). Ссылки все. */
.foot-col > summary { display: block; list-style: none; cursor: default; pointer-events: none; }
.foot-col > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-about { margin-bottom: 20px; }
  .foot-col { border-top: 1px solid var(--night-line); }
  .foot-col > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .foot .foot-col .foot-h { margin: 0; }
  .foot-col > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.6px solid var(--night-muted); border-bottom: 1.6px solid var(--night-muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .foot-col[open] > summary::after { transform: translateY(2px) rotate(225deg); }
  .foot-col > ul { padding: 0 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .foot-col > summary::after { transition: none; } }