/* ═══════════════════════════════════════════════════════════════════
   Стили нового корпоративного сайта — общие для всех страниц.

   Вынесены из pervyy-ekran.html в отдельный файл, когда у сайта
   появилась вторая страница: держать полторы тысячи строк копией в
   каждом файле — гарантированный разъезд. Так уже случилось с копиями
   geroy-1..4: правки в главную приходилось переносить руками.

   Страничные мелочи остаются в самой странице, здесь только общее:
   токены, шапка, меню, кнопки, разделы, подвал.
   ═══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
   ПЕРВЫЙ ЭКРАН И ПОКАЗ КАБИНЕТА — ПРИМЕРОЧНАЯ.

   Основа — направление А «поле и чипы». Ниже — показ настоящих
   снимков кабинета тремя разными механизмами: вкладки, плёнка,
   сцены по прокрутке. Содержание у всех трёх одно и то же, из
   массива SHOWS; меняется только способ показа.

   Панель справа снизу к макету не относится.
   ───────────────────────────────────────────────────────────── */

:root{
  color-scheme: light;

  --paper:    #F5F6FC;
  --surface:  #FFFFFF;
  --ink:      #12142B;
  --ink-dim:  #5A6080;
  --line:     #E1E4F0;
  --accent:   #2A14B4;
  --accent-soft: #E9E6FA;

  /* Цвета вне основной шестёрки — тоже токены, иначе они плодятся
     по файлу: было шесть случайных значений и два разных чёрных. */
  --line-2:    #A8AFCE;
  --ink-faint: #7C7F9C;
  --surface-2: #FCFCFE;

  --r-surface: 16px;
  --r-pill:    999px;

  /* Четыре высоты вместо одиннадцати подобранных на глаз теней.
     Роль, а не значение: лежит / приподнято / кадр над бумагой /
     свечение акцентом. */
  --sh-flat:  0 1px 2px rgba(18,20,43,.06);
  --sh-raise: 0 4px 12px -4px rgba(18,20,43,.10);
  --sh-lift:  0 32px 64px -48px rgba(18,20,43,.5);
  --sh-glow:  0 8px 20px -6px rgba(42,20,180,.26);

  /* Шаг 4/8: до этого в файле было 23 разных вертикальных отступа */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  /* Крутятся примерочной */
  --ui-font: 'Golos Text';
  --h1-size: 86px;
  --h1-track: -0.044em;
  --h1-weight: 500;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; overflow-x:clip; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui-font), 'Golos Text Fallback', system-ui, sans-serif;
  font-size:17px; font-weight:400; line-height:1.55;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; }

#hero, #models, #mm, #kb, #proof, #safe, #start{ scroll-margin-top:88px; }
.wrap{ width:100%; max-width:1200px; margin:0 auto; padding-inline:24px; }
.ic{ width:18px; height:18px; flex:none; display:block; }

/* ───────── Шапка ───────── */
.head{ position:sticky; top:0; z-index:20;
  background:rgba(245,246,252,.86); backdrop-filter:blur(12px); }
.head__in{ height:68px; display:flex; align-items:center; gap:32px; }
.brand{ display:flex; align-items:center; }
/* Словесный знак: прописные, плотный вес, разрядка. Кегль меньше, чем
   был у прежнего названия, — прописные читаются крупнее при том же
   размере, и 19px превращали шапку в вывеску. */
.brand__name{ font-size:17px; font-weight:600; letter-spacing:0.08em;
  color:var(--ink); }
/* Латиница и кириллица лежат в одной ячейке сетки: коробка сама берёт
   ширину по длинному написанию, и при наведении ничего не дёргается —
   а именно это и случилось бы, будь они в потоке друг за другом. */
.brand__name{ display:grid; }
.brand__name > span{ grid-area:1 / 1; transition:opacity .22s ease; }
.brand__cyr{ opacity:0; }
.brand:hover .brand__lat, .brand:focus-visible .brand__lat{ opacity:0; }
.brand:hover .brand__cyr, .brand:focus-visible .brand__cyr{ opacity:1; }
.nav{ display:flex; gap:26px; margin-left:8px; }
.nav a{ font-size:15px; color:var(--ink-dim); transition:color .18s ease; }
.nav a:focus-visible, .link-quiet:focus-visible, .way:focus-visible, .brand:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.nav a:hover{ color:var(--ink); }
/* Где мы сейчас. До этого меню выглядело одинаково на всех страницах:
   раздел был открыт, а пункт в шапке ничем не отличался от соседних. */
.nav a[aria-current="page"]{ color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:7px; }
.head__act{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.link-quiet{ font-size:15px; color:var(--ink-dim); }
.link-quiet:hover{ color:var(--ink); }

/* ───────── Меню для узких экранов ─────────
   До этого ниже 1100px навигация просто пряталась, а замены ей не было:
   с телефона и планшета по разделам было не перейти, и «Войти» тоже
   исчезал — существующий клиент оставался без входа.

   Пункты не дублируются в разметке, а клонируются из .nav скриптом:
   два списка ссылок рано или поздно разъезжаются. */
.burger{ display:none; width:44px; height:44px; margin-left:auto;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  cursor:pointer; }
.burger span{ display:block; width:18px; height:1.5px; border-radius:1px;
  background:var(--ink); transition:transform .22s ease, opacity .18s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
.burger:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Меню висит под шапкой и закрывает страницу собой: выпадающий список
   поверх текста на телефоне читается хуже, чем сплошная плоскость. */
.menyu{ position:fixed; left:0; right:0; top:68px; bottom:0; z-index:19;
  background:var(--paper); padding:var(--s4) 0 var(--s8);
  overflow-y:auto; overscroll-behavior:contain; }
.menyu[hidden]{ display:none; }
.menyu__in{ display:flex; flex-direction:column; }
.menyu a{ display:flex; align-items:center; min-height:52px;
  font-size:17px; letter-spacing:-0.015em; color:var(--ink);
  border-bottom:1px solid var(--line); }
.menyu a:last-child{ border-bottom:none; }
.menyu a[aria-current="page"]{ color:var(--accent); }
.menyu .btn{ margin-top:var(--s4); justify-content:center; }

.btn{ display:inline-flex; align-items:center; gap:8px;
  /* Скругление как на боевом neurocorp.ru: там rounded-lg, то есть
     8px. Пилюля осталась у фильтров и вкладок — там она уместна,
     а у главных кнопок делала интерфейс мягче, чем сайт. */
  height:44px; padding:0 20px; border-radius:10px;
  border:1px solid transparent; background:var(--accent); color:#fff;
  font-size:15px; font-weight:500; letter-spacing:-0.01em;
  white-space:nowrap; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:var(--sh-flat); }
.btn:hover{ box-shadow:var(--sh-glow); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ───────── Первый экран ───────── */
/* Порядок отрисовки секций. У героя position:relative, а .fon внутри
   него уходит на 72 px ниже секции — и красится ПОВЕРХ полосы цифр,
   потому что позиционированный элемент рисуется в слое выше, чем
   непозиционированный блок, даже если тот идёт следующим в разметке.
   Косой луч ложился на карточку и выбеливал столбец.
   isolation:isolate здесь не спасает — вопреки тому, что кажется: он
   запирает потомков внутри контекста героя, но сам герой всё равно
   остаётся в слое позиционированных. Лечится только тем, что все
   секции ниже тоже позиционированы и их порядок решает разметка. */
main > section{ position:relative; z-index:1; }
.hero{ position:relative; z-index:0; padding:calc(var(--s24) + var(--s8)) 0 var(--s8); }
.hero > .wrap{ position:relative; z-index:1; }
.hero__title{
  max-width:20ch;
  /* Кегль задаётся напрямую, а не через clamp(…, 6.4vw, …):
     с vw-серединой ползунок выше определённой ширины окна ничего
     не менял. min() оставляет управление ползунку и всё равно
     ужимает заголовок на узких экранах. */
  font-size:min(var(--h1-size), 12.5vw);
  font-weight:var(--h1-weight);
  letter-spacing:var(--h1-track);
  line-height:0.98;
  text-wrap:balance;
}
/* Под заголовком в 86 px подпись в 17 px читается как сноска —
   поднята до 18.5 и сужена, чтобы держать три строки. */
.hero__sub{ margin-top:var(--s6); max-width:46ch; font-size:18px; color:var(--ink-dim); }

/* ───────── Фон первого экрана ─────────
   Фон живёт под тёмным текстом, поэтому все варианты обязаны
   гаснуть слева и снизу — там, где стоят заголовок и поле. */
/* Фон заходит под шапку и немного ниже поля: если обрезать его по
   секции, снизу получается видимая ступенька. */
.fon{ position:absolute; inset:-68px 0 -72px; z-index:0; overflow:hidden; pointer-events:none; }
.fon__l{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.fon__l--photo{ background-repeat:no-repeat; background-size:cover;
  background-position:right center; }

/* 1 — свод: одно большое мягкое пятно в правом верхнем углу */
.hero[data-bg="1"] .fon__l--dome{ opacity:1;
  background:
    radial-gradient(58% 68% at 82% 4%, rgba(42,20,180,.16), transparent 68%),
    radial-gradient(42% 52% at 96% 46%, rgba(42,20,180,.09), transparent 72%); }

/* 2 — луч: широкая диагональная полоса света.
   Белое по бумаге даёт разницу в два процента и не читается вовсе,
   поэтому у полосы есть индиговые кромки — по ним она и видна. */
/* Середина луча была rgba(255,255,255,1) — непрозрачная белая полоса
   во весь слой. Пока слой лежит на бумаге, это незаметно; но стоит ему
   заехать на карточку (а он выходит за секцию и ещё едет от параллакса)
   — полоса СТИРАЕТ текст под собой. Полупрозрачный белый максимум
   осветляет и физически не может ничего стереть. */
.hero[data-bg="2"] .fon__l--ray{ opacity:1;
  background:linear-gradient(106deg,
    transparent 22%, rgba(42,20,180,.055) 33%, rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.55) 55%, rgba(42,20,180,.06) 67%, transparent 80%); }

/* 3 — контур: тонкие концентрические дуги, почти невидимые */
.hero[data-bg="3"] .fon__l--arcs{ opacity:1;
  background:repeating-radial-gradient(circle at 88% 0%,
    rgba(42,20,180,.085) 0 1px, transparent 1px 92px);
  mask-image:radial-gradient(70% 90% at 92% 0%, #000, transparent 74%); }

/* 4–7 — фотографические подложки.
   Снимки и так почти белые, поэтому гасить их прозрачностью нечем:
   работает только маска, которая убирает подложку из-под текста
   слева и оставляет её справа, где пусто. */
.hero[data-bg="4"] #fon-photo,
.hero[data-bg="5"] #fon-photo,
.hero[data-bg="6"] #fon-photo,
.hero[data-bg="7"] #fon-photo{ opacity:1;
  /* Съёмка приглушается прямо здесь: без этого «Ткань» тянет на себя
     весь экран и начинает выглядеть рекламой постельного белья. */
  filter:contrast(.8) brightness(1.07) saturate(.62);
  /* Две маски разом: одна убирает подложку слева, вторая растворяет
     её книзу — иначе на границе секции остаётся видимая ступенька. */
  mask-image:
    linear-gradient(96deg, transparent 0 24%, rgba(0,0,0,.35) 42%, #000 66%),
    linear-gradient(180deg, #000 0 48%, rgba(0,0,0,.5) 76%, transparent 100%);
  mask-composite:intersect; -webkit-mask-composite:source-in; }

/* ───────── Поле запроса ───────── */
.prompt{ position:relative; margin-top:var(--s12);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface);
  /* Полоса примеров лежит вплотную к краю: без обрезки её фон
     выходил за скругление карточки уголками. */
  overflow:hidden;
  box-shadow:var(--sh-flat), var(--sh-glow); }
.prompt__row{ display:flex; align-items:center; gap:16px; padding:18px 20px 18px 20px; }
/* Высота фиксирована в две строки: при смене сценария карточка
   прыгала по вертикали и уводила за собой всё, что ниже. */
.prompt__box{ flex:1; height:3.2em; overflow:hidden;
  display:flex; align-items:center; }
.prompt__text{ font-size:19px; line-height:1.45; letter-spacing:-0.012em; }
/* Упоминание файла — подчёркивание, а не заливка. Раньше оно
   выглядело ровно как включённый чип (та же плашка accent-soft, тот
   же индиговый текст), и одно и то же начертание означало две
   разные вещи. Заливка accent-soft теперь закреплена за состоянием
   «включено» и больше нигде не встречается. */
.mention{ display:inline; padding:0 1px; margin-inline:2px 4px;
  color:var(--ink); font-weight:600; white-space:nowrap;
  box-shadow:inset 0 -2px 0 var(--accent-soft); }
.mention--pop{ animation:pop .26s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop{ from{ transform:scale(.9); opacity:0 } to{ transform:none; opacity:1 } }
.caret{ display:inline-block; width:2px; height:1.05em; margin-left:2px;
  vertical-align:-0.18em; background:var(--accent);
  animation:blink 1.15s steps(1) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.send{ width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:none; border-radius:var(--r-pill); background:var(--accent); color:#fff;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.send:hover{ box-shadow:var(--sh-glow); }
.send:active{ transform:translateY(1px); }
.send:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 20px 16px; border-top:1px solid var(--line); }
.chip{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-dim);
  font-size:13.5px; font-weight:500; letter-spacing:-0.012em;
  cursor:pointer; white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, background .16s ease,
    transform .18s cubic-bezier(.16,1,.3,1); }
.chip:hover{ border-color:var(--line-2); color:var(--ink); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Нажатие: до этого чип был единственным органом управления в герое
   без всякой реакции на клик. Вниз резко, вверх мягко. */
.chip:active{ transform:scale(.96); transition-duration:.09s;
  transition-timing-function:cubic-bezier(.4,0,1,1); }
.chip--on{ background:var(--accent-soft); border-color:transparent; color:var(--accent); }
/* Наведение на включённый чип: у .chip:hover та же специфичность, но
   .chip--on объявлен ниже и перекрывал его — обратной связи не было. */
.chip--on:hover{ background:#DEDAF7; color:var(--accent); }
.chip__val{ color:var(--ink); font-weight:500; }
.chip--muted .chip__val{ color:var(--ink-faint); font-weight:400; }
.chip__caret{ width:12px; height:12px; opacity:.8; }

/* Первый экран заканчивался тремя серыми ссылками в 14 px — футерной
   типографикой на месте главного действия. Теперь здесь две кнопки и
   строка про пробный период: условия старта видно до регистрации. */
/* Кнопки и преимущества — одним белым островом: раньше они висели на
   бумаге и сливались с текстом выше. */
.act{ margin-top:var(--s8); padding:var(--s6); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-surface);
  box-shadow:var(--sh-raise); display:grid; gap:var(--s4); }
.cta{ display:flex; flex-wrap:wrap; gap:var(--s4); }
.btn--lg{ height:52px; padding:0 26px; font-size:16px; }
.btn--lg .ic{ width:20px; height:20px; }
.btn--ghost{ background:var(--surface); color:var(--ink);
  border-color:var(--line); box-shadow:var(--sh-flat); }
.btn--ghost:hover{ border-color:var(--line-2); box-shadow:var(--sh-raise); }

/* Условия старта. Сперва это был абзац в две строки — приписка под
   кнопкой; потом две колонки на волосяных линиях — уже структура, но
   всё ещё мелкая серая сноска, которую взгляд перепрыгивает. Здесь
   решает не типографика, а вес: две карточки с предметом, кеглем в
   рост подписи героя и настоящим воздухом внутри. Предмет держит
   смысл без чтения — пять на одном кольце против одного. */
/* Преимущества, а не сноска: серая строка через точки читалась как
   мелкий шрифт из договора. Галочка и тёмный текст переводят её в
   разряд доводов. */
.plus{ display:flex; flex-wrap:wrap; gap:10px var(--s4); }
.plus span{ display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:500; letter-spacing:-0.014em; color:var(--ink); }
.plus span::before{ content:''; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A14B4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.terms{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  padding-top:var(--s8); border-top:1px solid var(--line);
  margin-top:var(--s8); }
/* Карточки тянутся на общую высоту: у них разной длины подписи, и без
   этого правая была на 22 px ниже — строка фактов внизу не совпадала. */
.terms > li{ display:flex; }
.terms > li > .term{ flex:1; }
/* Карточка — развилка, а не сноска: два разных старта, и оба ведут в одну
   форму регистрации, где этот выбор и стоит первым переключателем.
   Поэтому это ссылка с состоянием наведения, а не мёртвый блок. */
.term{ display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s6) var(--s6) var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat);
  color:inherit; text-decoration:none;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
a.term:hover{ box-shadow:var(--sh-lift); border-color:var(--line-2);
  transform:translateY(-2px); }
a.term:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Схему «люди → счёт» убрали: в карточке во всю ширину она читалась
   мелким чертежом сбоку, а вес должен нести само условие. Теперь якорь —
   типографика: предложение крупно, кто получает — надзаголовком, что
   входит — строкой мелких фактов через разделители. */
.term__k{ font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); }
.term__of{ font-size:26px; font-weight:500; letter-spacing:-0.026em;
  line-height:1.15; text-wrap:balance; }
.term__of em{ font-style:normal; color:var(--accent); }
.term__sub{ font-size:15px; line-height:1.5; color:var(--ink-dim); }
.term__more{ margin-top:auto; padding-top:var(--s4);
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); }
.term__more i{ font-style:normal; }
.term__more i + i::before{ content:'·'; margin-right:8px; color:var(--line-2); }
.term__go{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); font-size:13.5px; font-weight:500; white-space:nowrap; }
.term__go .ic{ width:15px; height:15px;
  transition:transform .18s cubic-bezier(.16,1,.3,1); }
a.term:hover .term__go .ic{ transform:translateX(3px); }

/* Нижняя строка карточки: модель и подсказка про Enter — как в
   кабинете, где выбор модели живёт над полем, а не среди тумблеров. */
.prompt__bar{ display:flex; align-items:center; gap:var(--s3);
  padding:10px 20px 12px; border-top:1px solid var(--line); background:var(--surface-2);
  border-radius:0 0 var(--r-surface) var(--r-surface); }
.prompt__model{ display:inline-flex; align-items:center; gap:7px; height:32px;
  padding:0 11px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:border-color .16s ease; }
.prompt__model:hover{ border-color:var(--line-2); }
.prompt__model:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.prompt__hint{ margin-left:auto; font-size:12.5px; color:var(--ink-faint); }
/* Отправка: стрелка уходит, по нижней кромке проходит полоса, подсказка
   сменяется на состояние. Ответ модели на первом экране не показываем —
   он бы врал, потому что настоящего ответа тут нет. */
.prompt{ position:relative; }
.prompt::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:0 0 var(--r-surface) var(--r-surface);
  background:var(--accent); transform:scaleX(0); transform-origin:left center; }
.prompt--send::after{ animation:sendbar 1.15s cubic-bezier(.4,0,.2,1) both; }
@keyframes sendbar{ 0%{ transform:scaleX(0) } 70%{ transform:scaleX(1) }
  100%{ transform:scaleX(1); opacity:0 } }
.send .ic{ transition:transform .18s cubic-bezier(.4,0,1,1), opacity .18s linear; }
.prompt--send .send .ic{ animation:sendarrow .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes sendarrow{ 0%{ transform:none; opacity:1 }
  38%{ transform:translateX(16px); opacity:0 }
  39%{ transform:translateX(-16px); opacity:0 }
  100%{ transform:none; opacity:1 } }

/* ───────── Сценарии в поле ─────────
   Поле остаётся одно, меняется только то, что в нём написано и какие
   тумблеры горят. Ответа модели здесь нет намеренно: первый экран
   показывает, как спрашивают, а не что отвечают. */
/* Полоса примеров живёт ВНУТРИ поля: снаружи она читалась как часть
   заголовка, а не как переключатель запроса. */
.scen{ margin:0; padding:10px 14px; border-bottom:1px solid var(--line);
  background:var(--paper); border-radius:var(--r-surface) var(--r-surface) 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.scen__lbl{ font-size:13px; color:var(--ink-faint); margin-right:var(--s1); }
.scen button{ position:relative; height:32px; padding:0 13px; border:0;
  border-radius:var(--r-pill); background:transparent; color:var(--ink-dim);
  font-size:13.5px; font-weight:500; letter-spacing:-0.01em; cursor:pointer;
  transition:color .18s ease, background .18s ease; }
.scen button:hover{ color:var(--ink); background:rgba(18,20,43,.045); }
.scen button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.scen button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent); }
/* Полоска отсчёта до следующего сценария — она же показывает, что
   поле переключится само, и его не надо ждать. */
.scen button i{ position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  border-radius:2px; background:var(--accent); opacity:0;
  transform:scaleX(0); transform-origin:left center; }
.scen button[aria-pressed="true"] i{ opacity:.45; }
.prompt__att{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px 3px;
  margin-inline:2px 5px; border-radius:8px; background:var(--paper);
  border:1px solid var(--line); font-size:.86em; color:var(--ink-dim);
  vertical-align:baseline; white-space:nowrap; }
.prompt__att .ic{ width:13px; height:13px; color:var(--accent); }

/* ───────── Иллюстрация героя ───────── */
.art{ display:none; }
.art img{ display:block; width:100%; height:100%; object-fit:cover; }
.art--side{ border-radius:var(--r-surface); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-lift); }
.art--strip{ margin-top:var(--s8); height:300px; border-radius:var(--r-surface);
  overflow:hidden; border:1px solid var(--line); }

.hero[data-hero="2"] .hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:44px; align-items:center; }
.hero[data-hero="2"] .hero__title{ max-width:14ch; }
.hero[data-hero="2"] .hero__sub{ max-width:38ch; }
.hero[data-hero="2"] .prompt{ max-width:100%; }
.hero[data-hero="2"] .prompt__text{ font-size:17px; }
.hero[data-hero="2"] .art--shot{ display:block; border-radius:var(--r-surface);
  overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-lift); height:520px; }
.hero[data-hero="2"] .art--shot img{ object-position:top left; }

.hero[data-hero="3"] .hero__in{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:44px; align-items:center; }
.hero[data-hero="3"] .hero__title{ max-width:14ch; }
.hero[data-hero="3"] .hero__sub{ max-width:38ch; }
.hero[data-hero="3"] .prompt{ max-width:100%; }
.hero[data-hero="3"] .prompt__text{ font-size:17px; }
.hero[data-hero="3"] .art--side{ display:block; height:520px; }

.hero[data-hero="4"] .art--strip{ display:block; }
.hero[data-hero="4"] .prompt{ margin-top:var(--s8); }

/* Раскладка 5 — предмет фоном. Плёнка от бумаги к прозрачности:
   снимок светлый, но пёстрый, и тёмный текст по нему без подложки
   не читается. */
.hero[data-hero="5"]{ padding-top:96px; padding-bottom:8px; }
.hero[data-hero="5"] .art--bg{ display:block; position:absolute; inset:0; z-index:0; }
.hero[data-hero="5"] .art--bg img{ object-position:center 62%; }
.hero[data-hero="5"] .art--bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--paper) 0%, var(--paper) 34%,
    rgba(245,246,252,.86) 50%, rgba(245,246,252,.34) 74%, rgba(245,246,252,.1) 100%); }
.hero[data-hero="5"] .fon{ display:none; }
.hero[data-hero="5"] .hero__title{ max-width:15ch; }
.hero[data-hero="5"] .hero__sub{ max-width:40ch; }
.hero[data-hero="5"] .prompt{ max-width:760px; }

@media (max-width:980px){
  .hero[data-hero="2"] .hero__in,
  .hero[data-hero="3"] .hero__in{ grid-template-columns:1fr; }
  .hero[data-hero="2"] .art--shot,
  .hero[data-hero="3"] .art--side{ height:300px; }
  .hero[data-hero="5"] .art--bg::after{
    background:linear-gradient(180deg, var(--paper) 0%, rgba(245,246,252,.9) 55%, rgba(245,246,252,.35) 100%); }
}

/* ───────── Полоса цифр ───────── */
.facts{ padding:var(--s16) 0 0; }
.facts__row{ display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat); overflow:hidden; }
.fact{ padding:26px 24px 24px; }
.fact + .fact{ border-left:1px solid var(--line); }
.fact__n{ display:block; font-size:44px; font-weight:500; letter-spacing:-0.04em;
  line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.fact__n--law{ font-size:36px; letter-spacing:-0.03em; padding-block:4px; }
.fact__t{ display:block; margin-top:var(--s3); font-size:15px; font-weight:500;
  letter-spacing:-0.018em; }
.fact__s{ display:block; margin-top:var(--s1); font-size:13px; line-height:1.45;
  color:var(--ink-dim); }

/* ───────── Врезка раздела ─────────
   Иллюстрация здесь не доказывает тезис — этим заняты заголовок, цифры
   и настоящие скриншоты кабинета. Её работа: дать воздух между
   заголовком и плотным содержимым и показать, про чью работу раздел.
   Система держится на двух правилах: один и тот же свет во всех кадрах
   и ровно один индиговый предмет. Высота небольшая — это врезка, а не
   витрина, и она не должна отодвигать содержимое за первый экран. */
.vrezka{ margin-top:var(--s6); border-radius:var(--r-surface); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-flat); }
.vrezka{ aspect-ratio:1564 / 670; }
.vrezka img{ display:block; width:100%; height:100%;
  object-fit:cover; object-position:center; }
@media (max-width:720px){ .vrezka{ aspect-ratio:3 / 2; } }

/* ───────── Каталог моделей ───────── */
.sec__kicker{ font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s2); }
.mfilter{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6); }
.mfilter button{ height:36px; padding:0 15px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--surface); color:var(--ink-dim);
  font-size:14px; font-weight:500; letter-spacing:-0.01em; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease,
    transform .18s cubic-bezier(.16,1,.3,1); }
.mfilter button:hover{ border-color:var(--line-2); color:var(--ink); }
.mfilter button:active{ transform:scale(.96); }
.mfilter button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mfilter button[aria-pressed="true"]{ background:var(--accent-soft);
  border-color:transparent; color:var(--accent); }
.mfilter b{ font-weight:500; opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums; }

.mgrid{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s3); }
.mcard{ display:flex; flex-direction:column; padding:16px 18px 18px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat);
  transition:border-color .16s ease, transform .18s cubic-bezier(.16,1,.3,1),
    box-shadow .18s ease; }
.mcard:hover{ border-color:var(--line-2); transform:translateY(-1px);
  box-shadow:var(--sh-raise); }
.mcard__top{ display:flex; align-items:center; gap:var(--s3); }
.mcard__ico{ width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.mcard__ico .ic{ width:18px; height:18px; }
/* Цвет значка — по вендору, а не по типу модели: так в сетке видно,
   что моделей много и они от разных поставщиков. Оттенки приглушены
   до уровня страницы — фирменные цвета вендоров в полную силу
   превратили бы сетку в витрину чужих логотипов. */
.mcard[data-v="OpenAI"]    .mcard__ico{ background:#E4F3EC; color:#0E7A54; }
.mcard[data-v="Anthropic"] .mcard__ico{ background:#F6EBE2; color:#B0521F; }
.mcard[data-v="Google"]    .mcard__ico{ background:#E6EEFB; color:#1A5AC4; }
.mcard[data-v="DeepSeek"]  .mcard__ico{ background:#E7E9FC; color:#3A43C8; }
.mcard[data-v="Alibaba"]   .mcard__ico{ background:#FCEBE6; color:#C2410C; }
.mcard[data-v="Moonshot"]  .mcard__ico{ background:#EDE9FB; color:#5B3FC6; }
.mcard[data-v="xAI"]       .mcard__ico{ background:#ECEDEF; color:#1F2430; }
.mcard[data-v="ByteDance"] .mcard__ico{ background:#E9F1FC; color:#1D63C8; }

/* Кнопка свёртки списка */
/* display в авторском правиле сильнее браузерного [hidden]{display:none},
   поэтому кнопка не пряталась и висела с текстом «Показать ещё 0».
   Правило ниже возвращает атрибуту силу. */
.mmore[hidden]{ display:none; }
.mmore{ margin:var(--s4) auto 0; display:block; padding:11px 22px;
  border:1px solid var(--line-2); border-radius:10px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  box-shadow:var(--sh-flat); }
.mmore:hover{ border-color:var(--accent); color:var(--accent); }
.mmore:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.mcard--image .mcard__ico{ background:#E6F1FB; color:#1D5F9C; }
.mcard--video .mcard__ico{ background:#EAF5EF; color:#1E7A4E; }
.mcard__n{ display:block; font-size:16px; font-weight:500; letter-spacing:-0.022em; }
.mcard__v{ display:block; margin-top:1px; font-size:12.5px; color:var(--ink-faint); }
.mcard__flag{ margin-left:auto; align-self:flex-start; font-style:normal; font-size:11px;
  font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; white-space:nowrap; }
.mcard__d{ margin-top:var(--s3); font-size:13px; line-height:1.45; color:var(--ink-dim); }
/* Флагманы держат акцентную кромку сверху — по ней ряд читается
   с одного взгляда, без чтения имён. */
.mcard--top{ border-color:transparent; box-shadow:var(--sh-raise); }
.mcard--top::before{ content:''; position:absolute; inset:0 0 auto; height:3px;
  border-radius:var(--r-surface) var(--r-surface) 0 0; background:var(--accent); }
.mcard{ position:relative; }
.mcard[hidden]{ display:none; }
.mnote{ margin-top:var(--s6); font-size:14px; color:var(--ink-dim); max-width:74ch; }

/* ───────── 02. Мультимодальность ─────────
   Четыре карточки, но не четыре одинаковых плитки: в каждой живёт
   маленький кусок того, о чём она. Анимация запускается только когда
   блок на экране, и глушится системной настройкой. */
.mm{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--s3); }
.mmc{ position:relative; overflow:hidden; padding:24px 26px 26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1); }
.mmc:hover{ border-color:var(--line-2); box-shadow:var(--sh-raise); transform:translateY(-1px); }
.mmc__k{ font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); }
.mmc__h{ margin-top:var(--s2); font-size:22px; font-weight:500; letter-spacing:-0.026em; }
.mmc__d{ margin-top:var(--s2); font-size:14px; line-height:1.5; color:var(--ink-dim); max-width:46ch; }
.mmc__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s4); }
.mmc__tags span{ height:26px; display:inline-flex; align-items:center; padding:0 10px;
  border-radius:var(--r-pill); background:var(--paper); color:var(--ink-dim);
  font-size:12px; font-weight:500; letter-spacing:.02em; }
.mmc__stage{ margin-top:var(--s4); height:170px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line); overflow:hidden;
  position:relative; }

/* Тёмная карточка — та, где показывают картинки: на светлом кадры
   сливались с бумагой. */
.mmc--dark{ background:var(--ink); border-color:transparent; color:#fff; }
.mmc--dark .mmc__k{ color:#8A90B4; }
.mmc--dark .mmc__d{ color:#A7ADCB; }
.mmc--dark .mmc__tags span{ background:rgba(255,255,255,.1); color:#C9CDE4; }
.mmc--dark .mmc__stage{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }

/* Текст: строка набирается сама и стирается */
.mm-type{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:10px; padding:0 18px; font-size:14px; }
.mm-type__line{ height:9px; border-radius:5px; background:var(--line); width:var(--w,86%); }
.mm-type__q{ color:var(--ink); }
.mm-type__c{ display:inline-block; width:2px; height:1.05em; margin-left:2px;
  vertical-align:-0.18em; background:var(--accent); }
[data-a-mm="on"] .mm-type__c{ animation:blink 1.15s steps(1) infinite; }
[data-a-mm="on"] .mm-type__line{ animation:mmline 3.6s cubic-bezier(.4,0,.2,1) infinite; }
[data-a-mm="on"] .mm-type__line:nth-child(3){ animation-delay:.25s; }
[data-a-mm="on"] .mm-type__line:nth-child(4){ animation-delay:.5s; }
@keyframes mmline{ 0%{ width:0 } 30%{ width:var(--w,86%) } 82%{ width:var(--w,86%) } 100%{ width:0 } }

/* Картинки: три кадра, снятые этой же моделью, сменяют друг друга */
/* Карточка показывала три отвлечённых кадра без объяснения: что это и
   зачем — понять было нельзя. Теперь у каждого кадра сверху стоит тот
   самый запрос, которым он сделан. Пара «что попросили — что пришло»
   объясняет карточку без единого слова описания. Тексты настоящие: это
   промпты, которыми эти картинки и правда сгенерированы. */
.mm-gen{ position:absolute; inset:0; }
.mm-gen__it{ position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; }
.mm-gen__it:first-child{ opacity:1; }
[data-a-mm="on"] .mm-gen__it{ animation:mmshot 12s linear infinite; }
[data-a-mm="on"] .mm-gen__it:first-child{ opacity:0; }
.mm-gen__it:nth-child(2){ animation-delay:4s; }
.mm-gen__it:nth-child(3){ animation-delay:8s; }
.mm-gen__q{ flex:none; padding:10px 12px; font-size:12.5px; line-height:1.35;
  color:#C9CEE8; background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.1); }
.mm-gen__q::before{ content:'Запрос: '; color:#8A90B4; }
.mm-gen__pic{ flex:1; min-height:0; display:block; overflow:hidden; }
.mm-gen__pic img{ width:100%; height:100%; display:block; object-fit:cover; }
.mm-shots{ position:absolute; inset:0; }
.mm-shots img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; }
.mm-shots img:first-child{ opacity:1; }
[data-a-mm="on"] .mm-shots img{ animation:mmshot 9s linear infinite; }
[data-a-mm="on"] .mm-shots img:first-child{ opacity:0; }
.mm-shots img:nth-child(2){ animation-delay:3s; }
.mm-shots img:nth-child(3){ animation-delay:6s; }
@keyframes mmshot{ 0%{ opacity:0 } 4%{ opacity:1 } 33%{ opacity:1 } 37%{ opacity:0 } 100%{ opacity:0 } }
.mm-shots__cap{ position:absolute; left:12px; bottom:12px; z-index:2;
  padding:5px 10px; border-radius:var(--r-pill);
  background:rgba(18,20,43,.62); color:#fff; font-size:11.5px; }

/* Документы: файлы выкладываются стопкой */
.mm-files{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:8px; padding:0 18px; }
.mm-file{ display:flex; align-items:center; gap:9px; height:38px; padding:0 12px;
  border-radius:9px; background:var(--surface); border:1px solid var(--line);
  font-size:13px; box-shadow:var(--sh-flat); opacity:1; }
[data-a-mm="on"] .mm-file{ animation:mmfile 4.5s cubic-bezier(.16,1,.3,1) infinite; }
[data-a-mm="on"] .mm-file:nth-child(2){ animation-delay:.35s; }
[data-a-mm="on"] .mm-file:nth-child(3){ animation-delay:.7s; }
@keyframes mmfile{ 0%{ opacity:0; transform:translateY(10px) }
  14%{ opacity:1; transform:none } 86%{ opacity:1; transform:none }
  100%{ opacity:0; transform:translateY(-6px) } }
.mm-file .ic{ color:var(--accent); }
.mm-file b{ margin-left:auto; font-weight:400; font-size:11.5px; color:var(--ink-faint); }

/* Видео: бегунок по дорожке кадров */
.mm-film{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:12px; padding:0 18px; }
.mm-film__row{ display:flex; gap:5px; }
/* Кадры настоящие: одна широкая панорама фасада, нарезанная на восемь
   перекрывающихся кусков. Восемь отдельных генераций модель бы не
   согласовала между собой, а нарезка одного кадра даёт непрерывный
   облёт — то самое, что обещает подпись «ролик по тексту или по кадру».
   Раньше здесь лежали пустые плашки-градиенты. */
.mm-film__row i{ flex:1; height:44px; border-radius:6px; overflow:hidden;
  background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.08);
  /* Панорама снята с зеленью и синим небом. В ленте из восьми кадров это
     единственное цветное пятно на всей странице и оно перетягивает на
     себя акцент, который должен быть только индиговым. Гасим насыщенность,
     фактура и движение кадра остаются. */
  filter:saturate(.28) contrast(1.04); }
.mm-film__bar{ position:relative; height:4px; border-radius:2px; background:rgba(255,255,255,.14); }
.mm-film__bar b{ position:absolute; inset:0 auto 0 0; width:8%; border-radius:2px;
  background:#fff; }
[data-a-mm="on"] .mm-film__bar b{ animation:mmbar 6s linear infinite; }
@keyframes mmbar{ from{ width:6% } to{ width:100% } }
.mm-film__t{ display:flex; justify-content:space-between; font-size:11.5px; color:#A7ADCB; }

@media (prefers-reduced-motion: reduce){
  .brand__name > span{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .mm-type__line{ width:86%; }
  .mm-shots img:first-child{ opacity:1; }
  /* Без анимации остаётся первая пара «запрос — результат»: она и одна
     объясняет карточку, перебор нужен только для живости. */
  .mm-gen__it{ animation:none; }
  .mm-gen__it:first-child{ opacity:1; }
}


/* ───────── 03. Инструменты ─────────
   Шестой заход, и первые пять полезны как список тупиков:
     1) плитки категорий со счётчиками — «жуткое уныние»;
     2) бегущая лента названий — сторож дизайна снял автопрокрутку;
     3) спокойное поле плашек — всё тот же перечень, только тише;
     4-5) разборы «попросили → получили» на настоящих прогонах —
        сделаны хорошо, но это витрина конкретных инструментов,
        а раздел на главной должен работать этажом выше.
   Нужен ОБЗОР: умеет много, пользоваться просто, список растёт.
   Поэтому здесь нет ни одного названия инструмента, ни одного
   счётчика и ни одного примера — только сцена и три свойства. */
/* Область работы. Главное, что должен унести человек: умеет много и
   разное. Поэтому направления вынесены отдельной строкой крупным
   кеглем — в абзаце они не читались, глаз до третьего свойства
   не доходил. Названий инструментов тут по-прежнему нет. */
/* Серия про заготовку, а не про предмет в комнате.
   Через что прошли: стена инструментов (метафора, скучно), мозаика из
   скриншотов (чужой мир, портянки казённого текста), предметы в
   интерьерах — коробка на циклораме, стул в зале, папка на столе
   (красиво, но к инструментам отношения не имеет).
   Здесь снят сам смысл инструмента: готовая форма, из которой
   получается результат, и набор таких форм под разные задачи —
   трафареты, вырубные формы, поле карточек-заготовок. Свет, холодные
   материалы и ровно один индиговый предмет на кадр те же, что у
   остальных врезок, поэтому серия не выпадает из мира страницы. */
.seria{ margin-top:var(--s6); display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3); }
.seria figure{ margin:0; }
.seria img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); box-shadow:var(--sh-flat); }
.seria figcaption{ margin-top:10px; font-size:13.5px; color:var(--ink-dim); }
@media (max-width:900px){
  .seria{ grid-template-columns:1fr; }
}

.oblast{ margin-top:var(--s6); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s2) var(--s5, 20px); }
.oblast__i{ display:inline-flex; align-items:center; gap:9px;
  font-size:19px; font-weight:500; letter-spacing:-0.021em; }
.oblast__i .ic{ width:21px; height:21px; color:var(--accent); }
.oblast__more{ font-size:19px; letter-spacing:-0.021em; color:var(--ink-faint); }

/* Свойства: одна короткая фраза на каждое. Прошлая версия давала по
   три строки подряд — сплошной текст, который на главной не читают. */
.dost{ margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s6); }
.dost__t{ display:flex; align-items:baseline; gap:10px;
  font-size:18px; font-weight:500; letter-spacing:-0.022em; }
.dost__r{ width:18px; height:2px; border-radius:2px; background:var(--accent);
  flex:none; transform:translateY(-5px); }
.dost__d{ margin-top:7px; padding-left:28px; font-size:14.5px; line-height:1.5;
  color:var(--ink-dim); }
@media (max-width:900px){
  .oblast{ gap:12px var(--s4); }
  .oblast__i, .oblast__more{ font-size:17px; }
  .dost{ grid-template-columns:1fr; gap:var(--s4); }
}

/* ───────── Вопросы ─────────
   Список написан для бухгалтерии и закупок, а не для любопытных: счёт,
   закрывающие, как считается расход, кто и на что тратит. Это те шесть
   вопросов, из-за которых сделка застревает на неделю.
   Раскрытие — на <details>: работает без единой строки скрипта и с
   клавиатуры, чего самодельные аккордеоны обычно не умеют. */
.faq{ margin-top:var(--s6); display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s3) var(--s6); align-items:start; }
.faq details{ background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-flat); }
.faq summary{ display:flex; align-items:center; gap:14px; padding:16px 18px;
  font-size:16px; font-weight:500; letter-spacing:-0.018em; cursor:pointer;
  list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; margin-left:auto; flex:none; width:10px; height:10px;
  border-right:1.6px solid var(--line-2); border-bottom:1.6px solid var(--line-2);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease; }
.faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.faq summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px;
  border-radius:14px; }
.faq p{ padding:0 18px 18px; font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.faq p b{ font-weight:500; color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .faq summary::after{ transition:none; }
}
@media (max-width:900px){
  .faq{ grid-template-columns:1fr; }
}

/* ───────── Подбор модели (в «Инструментах») ─────────
   Второй заход. Первый был плоской карточкой в три строки — приём
   считывался, но выглядел объявлением. Здесь макет рабочего места:
   слева список задач, справа то, что происходит после выбора. Смысл
   тот же и главный: человеку не нужно знать, чем Opus лучше Sonnet.

   Случай намеренно НЕ повторяет примеры из «Отделов» ниже: там договор,
   выгрузка, контент-план и должностная. Здесь закупка — иначе две
   соседние секции пересказывают друг друга.

   Каталог инструментов сюда по-прежнему не тащим: шесть строк — это
   вид задачи в интерфейсе, а не перечень с числами, который трижды
   проваливался и всё равно устареет. */
.pick{ margin-top:var(--s6); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-lift); overflow:hidden; }
.pick__bar{ display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:var(--paper); }
.pick__dots{ display:flex; gap:6px; }
.pick__dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.pick__crumb{ font-size:13.5px; color:var(--ink-dim); }
.pick__crumb b{ font-weight:400; color:var(--ink); }
.pick__badge{ margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; background:var(--accent-soft);
  color:var(--accent); font-size:12.5px; font-weight:500; }
.pick__badge .ic{ width:14px; height:14px; }
.pick__in{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); }
.pick__list{ padding:18px 18px 20px; border-right:1px solid var(--line); }
.pick__lab{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); }
.pick__task{ margin-top:10px; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:12px; align-items:center; padding:10px 12px; border-radius:12px;
  border:1px solid transparent; }
.pick__task .ic{ color:var(--ink-faint); }
.pick__task{ width:100%; text-align:left; font:inherit; cursor:pointer;
  background:none; border:1px solid transparent; }
.pick__h{ display:block; font-size:14.5px; font-weight:500; letter-spacing:-0.016em; }
.pick__p{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-faint); }
.pick__task:hover{ background:var(--paper); }
.pick__task[data-on]:hover{ background:var(--accent-soft); }
.pick__task:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pick__task[data-on]{ border-color:var(--accent); background:var(--accent-soft); }
.pick__task[data-on] .ic{ color:var(--accent); }
.pick__flow{ padding:18px 20px 20px; display:grid; gap:var(--s3);
  align-content:start; }
.pick__auto{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:center; padding:13px 15px; border-radius:12px;
  background:var(--accent-soft); }
.pick__auto .ic{ color:var(--accent); }
.pick__auto b{ display:block; font-size:14.5px; font-weight:500; letter-spacing:-0.016em; }
.pick__auto span{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-dim); }
/* Реплика человека — тем же тёмным пузырём, что и в первом экране */
.pick__ask{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:start; }
.pick__you{ width:34px; height:34px; border-radius:50%; background:var(--paper);
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:12px; color:var(--ink-faint); }
.pick__ask p{ padding:13px 16px; background:var(--ink); color:#fff;
  border-radius:14px 14px 14px 4px; font-size:14.5px; line-height:1.5;
  letter-spacing:-0.012em; }
.pick__res{ padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); }
.pick__res__hd{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); }
.pick__res__hd b{ font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); }
.pick__res__hd i{ font-style:normal; font-size:12.5px; color:var(--ink-faint); }
.pick__res__t{ margin-top:10px; font-size:19px; font-weight:500;
  letter-spacing:-0.022em; line-height:1.3; }
.pick__res__f{ margin-top:12px; display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--ink-dim); }
/* Точка — только первый span. Правило без :first-child превращало в
   точку и текстовую строку: 7px ширины, и «Готово — скачать в Word или
   PDF» ломалось по одному слову в строку. */
.pick__res__f span:first-child{ flex:none; width:7px; height:7px;
  border-radius:50%; background:var(--accent); }
@media (max-width:900px){
  .pick__in{ grid-template-columns:1fr; }
  .pick__list{ border-right:none; border-bottom:1px solid var(--line); }
}

/* ───────── Для каждого отдела ─────────
   Приём из концепта nc.firecode.ru: вкладки по отделам и внутри пара
   «запрос → результат». Смысл — человек находит себя в списке и читает
   только свой случай, вместо безымянного «сотрудника».
   Задачи взяты из настоящих инструментов каталога, а не выдуманы. */
.dept{ margin-top:var(--s6); }
.dept__tabs{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.dept__tabs button{ padding:10px 18px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--ink-dim);
  font:inherit; font-size:15px; letter-spacing:-0.016em; cursor:pointer; }
.dept__tabs button[aria-selected="true"]{ background:var(--accent);
  border-color:var(--accent); color:#fff; }
.dept__tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dept__panel{ margin-top:var(--s4); display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:var(--s6);
  align-items:center; padding:var(--s6); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-surface);
  box-shadow:var(--sh-flat); }
.dept__t{ font-size:24px; font-weight:500; letter-spacing:-0.026em; line-height:1.2; }
.dept__d{ margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.dept__pair{ display:grid; gap:var(--s3); }
.dept__box{ padding:16px 18px; border-radius:12px; background:var(--paper); }
.dept__box--out{ background:var(--accent-soft); }
.dept__lab{ display:block; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); }
.dept__box--out .dept__lab{ color:var(--accent); opacity:.75; }
.dept__box p{ margin-top:6px; font-size:15px; line-height:1.5;
  letter-spacing:-0.014em; }
.dept__box--out p{ font-weight:500; }
@media (max-width:900px){
  .dept__panel{ grid-template-columns:1fr; }
}

/* ───────── Выделение слов в заголовке ─────────
   Четыре способа на одном и том же <em>, переключаются примерочной:
   цвет, рукописная линия, маркер и просто вес. Линия нарисована SVG в
   data-URI — внешних файлов страница не тянет, а повторяется она по
   горизонтали, поэтому одинаково ложится и под одно слово, и под три. */
.hero__title em{ font-style:normal; }
/* Цвет не включается разом, а проявляется: слово начинается чернильным
   и за полсекунды доходит до акцента, второе — следом за первым.

   Первая попытка была красивее: градиент под текстом, вырезанный по
   буквам через background-clip:text, и заливка ехала слева направо. В
   браузере выделенные слова просто ИСЧЕЗЛИ — text-fill-color прозрачный,
   а фон по буквам не отрисовался. Заголовок остался с дырами, поэтому
   приём отменён: анимация цвета не стоит риска потерять текст. */
/* Заливка идёт слева направо: поверх чернильного слова лежит его же
   копия акцентом (::after с текстом из data-t), и у копии съезжает
   clip-path. Само слово при этом всегда видно — если накладка почему-то
   не отрисуется, останется просто чернильный текст.
   Так уже пробовали через background-clip:text — там слова исчезали
   целиком, поэтому текст держим настоящий, а красим накладкой. */
/* inline-block обязателен: у строчного элемента коробка не совпадает с
   глазом строки при line-height 0.98, и накладка вставала выше текста —
   получалось двоение. Слово при этом перестаёт переноситься, но оба
   выделенных слова и так живут внутри одной строки. */
.hero__title[data-mark="color"] em{ display:inline-block; position:relative;
  color:var(--ink); }
.hero__title[data-mark="color"] em::after{
  content:attr(data-t); position:absolute; left:0; top:0; white-space:nowrap;
  color:var(--accent); clip-path:inset(0 100% 0 0);
  animation:zaliv 1.1s .45s cubic-bezier(.4,0,.2,1) forwards; }
.hero__title[data-mark="color"] em + em::after{ animation-delay:1.25s; }
@keyframes zaliv{ to{ clip-path:inset(0 0 0 0); } }
/* На узких экранах слово может перенестись на две строки — накладка
   тогда встанет мимо. Там просто красим цветом. */
@media (max-width:900px){
  .hero__title[data-mark="color"] em{ color:var(--accent); }
  .hero__title[data-mark="color"] em::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__title[data-mark="color"] em{ color:var(--accent); }
  .hero__title[data-mark="color"] em::after{ display:none; }
}
.hero__title[data-mark="bold"] em{ font-weight:600; }
.hero__title[data-mark="mark"] em{
  background:linear-gradient(transparent 62%, var(--accent-soft) 62%); }
.hero__title[data-mark="line"] em{
  padding-bottom:.06em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 C 18 2.5, 34 8.5, 52 5.5 S 86 2.5, 104 6 S 114 7.5, 118 5' fill='none' stroke='%232A14B4' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 100%;
  background-size:120px .13em; }

/* Яркая строка вместо приглушённой — там, где условие само по себе
   является доводом («без оплаты, без звонков»). */
/* В шапке раздела преимущества встают в столбик: справа узкая колонка,
   и в строку три чипа не помещаются. */
.plus--lead{ flex-direction:column; gap:10px; align-items:flex-start; }

/* ───────── Эмблема защиты ─────────
   Тёмный раздел выглядел как обычные карточки на чёрном. Щит даёт ему
   вес: это единственная картинка на всю секцию, и она про то же, про
   что текст. */
.safe__badge{ width:64px; height:64px; border-radius:18px; flex:none;
  display:grid; place-items:center; margin-bottom:var(--s4);
  background:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.safe__badge .ic{ width:30px; height:30px; color:#fff; }

/* ───────── Как начать: светлая подложка ─────────
   Раздел был самым бледным на странице, хотя стоит перед призывом. */
.steps{ background:var(--accent-soft); border-radius:var(--r-surface);
  padding:var(--s6) var(--s4); }
.steps .step + .step{ border-left:1px solid rgba(42,20,180,.14); }
.step::before{ background:var(--accent); color:#fff; }

/* ───────── Подвал ─────────
   Реквизиты и разделы — как на боевом neurocorp.ru. Без него страница
   обрывалась на призыве, и было непонятно, чья это компания вообще. */
.footer{ margin-top:var(--s16); padding:var(--s12) 0 var(--s8);
  border-top:1px solid var(--line); }
.footer__in{ display:grid; gap:var(--s8) var(--s6);
  /* Ширины неравные: «Политика конфиденциальности» в юридической колонке —
     самая длинная строка подвала, при равных долях она ломалась на две. */
  grid-template-columns:minmax(0,.95fr) minmax(0,.85fr) minmax(0,1.05fr)
                        minmax(0,1.05fr) minmax(0,1.2fr); }
.footer__brand b{ font-size:17px; font-weight:600; letter-spacing:0.08em; }
.footer__brand p{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--ink-dim);
  max-width:26ch; }
.footer__col h3{ margin:0 0 12px; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.footer__col a{ display:block; padding:4px 0; font-size:14.5px; color:var(--ink-dim);
  text-decoration:none; }
.footer__col a:hover{ color:var(--accent); }
.footer__legal{ margin-top:var(--s8); padding-top:var(--s4);
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  /* Не ink-faint: на 13px он давал контраст 3.62 при норме 4.5 —
     реквизиты юрлица нечитаемы ровно у тех, кому они и нужны. */
  gap:8px var(--s6); font-size:13px; color:var(--ink-dim); }
@media (max-width:900px){
  .footer__in{ grid-template-columns:1fr 1fr; }
}

/* ───────── Блок «Попробовать бесплатно» ─────────
   Разметка блока лежит в sayt/blok-proba.html и подставляется сборщиком —
   здесь только его вид. */
.proba{ margin-top:var(--s4); padding:var(--s8) var(--s8);
  background:var(--ink); color:#fff; border-radius:var(--r-surface);
  display:flex; flex-direction:column; gap:var(--s3); }
.proba__t{ font-size:26px; font-weight:500; letter-spacing:-0.026em; }
.proba__p{ margin:0; font-size:16.5px; line-height:1.6;
  color:rgba(255,255,255,.72); max-width:62ch; }
.proba__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s2); }
.proba .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.proba .btn--ghost:hover{ border-color:rgba(255,255,255,.5); box-shadow:none; }
@media (max-width:720px){
  .proba{ padding:var(--s6) var(--s4); }
  .proba__t{ font-size:22px; }
}
/* В конце перенесённой страницы блок отбивается сильнее, чем врезкой по тексту */
main.st > .wrap:last-of-type > .proba{ margin-top:var(--s16); }

/* ───────── Согласие на cookie ─────────
   Появляется, пока выбор не сделан, и больше не возвращается — вернуть
   его можно только ссылкой «Настройки cookie» в подвале. Разметку
   собирает sayt.js, чтобы юридический текст был один на все страницы. */
.cookie{ display:none; position:fixed; left:50%; bottom:16px; z-index:80;
  transform:translateX(-50%); width:calc(100% - 32px); max-width:680px;
  padding:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-raise);
  flex-direction:column; gap:14px; }
.cookie--open{ display:flex; }
.cookie__t{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-dim); }
.cookie__t a{ color:var(--accent); text-decoration:none; }
.cookie__t a:hover{ text-decoration:underline; }
.cookie__act{ display:flex; gap:8px; flex:none; }
.cookie__act .btn{ height:40px; padding:0 16px; font-size:14px; }
@media (min-width:640px){
  .cookie{ flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
}

/* ───────── Управление ─────────
   Адаптация блока из концепта nc.firecode.ru. Там он держится на
   дашборде с деньгами — и правильно: «контроль» словами не доказать,
   его надо показать цифрой. Числа демонстрационные и намеренно
   круглые; это образец экрана, а не выгрузка из чьей-то компании. */
.upr{ margin-top:var(--s6); display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:var(--s6); align-items:start; }
.upr__list{ display:grid; gap:var(--s2); }
/* Было по две строки текста на пункт — читалось как договор. Теперь
   короткое утверждение и уточнение мелким: тот же смысл, вдвое меньше
   букв. */
.upr__list p{ display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:4px 12px; align-items:baseline; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh-flat); }
.upr__list .ic{ grid-row:span 2; align-self:center; color:var(--accent);
  width:18px; height:18px; }
.upr__list b{ font-size:16px; font-weight:500; letter-spacing:-0.018em; }
.upr__list span{ font-size:13.5px; color:var(--ink-faint); }
.dash{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-lift); overflow:hidden; }
.dash__hd{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding:16px 20px; border-bottom:1px solid var(--line);
  background:var(--paper); }
.dash__hd b{ font-size:14.5px; font-weight:500; letter-spacing:-0.016em; }
.dash__hd i{ font-style:normal; font-size:12.5px; color:var(--ink-faint); }
.dash__sum{ padding:20px 20px 18px; }
.dash__lab{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); }
.dash__big{ margin-top:6px; font-size:38px; font-weight:500; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; }
.dash__delta{ margin-top:6px; display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px; background:var(--accent-soft);
  color:var(--accent); font-size:12.5px; font-weight:500; }
.dash__rows{ padding:4px 20px 18px; display:grid; gap:2px; }
.dash__row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.dash__ava{ width:28px; height:28px; border-radius:8px; display:grid;
  place-items:center; background:var(--paper); border:1px solid var(--line);
  font-size:12px; color:var(--ink-dim); }
.dash__row b{ font-size:14.5px; font-weight:400; }
.dash__row i{ font-style:normal; font-size:14.5px; font-weight:500;
  font-variant-numeric:tabular-nums; }
.dash__bar{ grid-column:1 / -1; height:4px; border-radius:2px; background:var(--line);
  overflow:hidden; }
.dash__bar span{ display:block; height:100%; background:var(--accent); border-radius:2px; }
@media (max-width:900px){ .upr{ grid-template-columns:1fr; } }

/* ───────── Узкая полоса (белая серия) ─────────
   Кадры сняты сверху на бесшовном белом: комнаты в кадре нет, поэтому
   полоса не требует высоты. Пропорция 4,3:1 — вдвое ниже прежних сцен.
   Исходники 21:9, лишнее срезается по вертикали: сюжет лежит в ряд по
   центру и от обрезки не страдает. */
.polosa{ margin-top:var(--s6); aspect-ratio:1564 / 360; }
.polosa img{ display:block; width:100%; height:100%; object-fit:cover;
  object-position:center; }
@media (max-width:720px){ .polosa{ aspect-ratio:3 / 1; } }

/* ───────── Ролик «бумага → плёнка» (02 / Форматы) ─────────
   Видео вместо картинки — тот случай, когда движение и есть содержание:
   превращение показать одним кадром нельзя.
   Ни рамки, ни тени, ни скругления: фон кадра измерен по клеткам и
   приведён к --paper с точностью до единицы, поэтому границы полосы не
   существует.
   Любая обводка тут же вернула бы прямоугольник. */
.rolik{ margin:var(--s6) 0 0; }
.rolik video{ display:block; width:100%; height:auto;
  background:var(--paper); }

/* ───────── Оплата ─────────
   Взято из концепта nc.firecode.ru: слева способы, справа макет счёта.
   Смысл — снять главный страх юрлица: «а бумаги-то будут?». Словами это
   на странице уже говорилось и не работало, потому что счёт нужно
   увидеть. Палитра наша, лайма из концепта нет. */
.pay{ margin-top:var(--s8); display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:var(--s6); align-items:start; }
.pay__ways{ display:grid; gap:var(--s3); }
.way{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-flat); }
.way .ic{ color:var(--ink-faint); }
.way{ width:100%; text-align:left; font:inherit; cursor:pointer; }
.way__h{ display:block; font-size:15.5px; font-weight:500; letter-spacing:-0.018em; }
.way__p{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-dim); }
.way:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.way__on{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line-2); }
.way--on{ border-color:var(--accent); background:var(--accent-soft); }
.way--on .ic{ color:var(--accent); }
.way--on .way__on{ border-color:var(--accent); background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center; }
.way--on .way__on .ic{ width:13px; height:13px; color:#fff; }

/* Счёт. Не скриншот из кабинета: настоящий документ пришлось бы
   вычищать от чужих реквизитов, а нарисованный читается при любой
   ширине и не устаревает. */
.bill{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-lift); overflow:hidden; }
.bill__hd{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); padding:20px 22px 18px; border-bottom:1px solid var(--line); }
.bill__co{ font-size:16px; font-weight:600; letter-spacing:-0.02em; }
.bill__co span{ display:block; margin-top:3px; font-size:12.5px; font-weight:400;
  letter-spacing:0; color:var(--ink-faint); }
.bill__no{ text-align:right; font-size:14px; font-weight:500;
  letter-spacing:-0.014em; font-variant-numeric:tabular-nums; }
.bill__no span{ display:block; margin-top:3px; font-size:12.5px; font-weight:400;
  color:var(--ink-faint); }
.bill__body{ padding:18px 22px 20px; display:grid; gap:var(--s4); }
.bill__row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:center; }
.bill__ooo{ width:38px; height:38px; border-radius:10px; background:var(--paper);
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--ink-faint); }
.bill__lab{ display:block; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); }
.bill__val{ display:block; margin-top:3px; font-size:15px; font-weight:500;
  letter-spacing:-0.018em; }
.bill__pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.bill__cell{ padding:12px 14px; background:var(--paper); border-radius:10px; }
.bill__sum{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.bill__sum b{ font-size:15px; font-weight:400; color:var(--ink-dim); }
.bill__sum i{ font-style:normal; font-size:26px; font-weight:500;
  letter-spacing:-0.026em; font-variant-numeric:tabular-nums; }
.bill__buh{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:center; padding:13px 15px; border:1px solid var(--line);
  border-radius:12px; }
.bill__buh .ic{ color:var(--accent); }
.bill__ready{ display:flex; align-items:center; gap:9px; padding:12px 16px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:500;
  letter-spacing:-0.014em; }
.bill__ready .ic{ width:16px; height:16px; }

/* Формула биллинга: одна строка вместо абзаца в «Как начать» */
.formula{ margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px var(--s4);
  font-size:17px; letter-spacing:-0.018em; }
.formula__lab{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); }
.formula b{ font-weight:500; }
.formula em{ font-style:normal; color:var(--accent); font-size:20px; }
@media (max-width:900px){
  .pay{ grid-template-columns:1fr; }
  .bill__pair{ grid-template-columns:1fr; }
}

/* ───────── 04. База знаний ───────── */
.kb{ margin-top:var(--s6); display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:var(--s8); align-items:start; }
.kb__list{ display:grid; gap:var(--s2); }
.kb__it{ display:flex; gap:12px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-flat); }
.kb__it .ic{ margin-top:2px; color:var(--accent); }
.kb__it h3{ margin:0; font-size:15px; font-weight:500; letter-spacing:-0.018em; }
.kb__it p{ margin-top:3px; font-size:13px; color:var(--ink-dim); }

.kb__box{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat); overflow:hidden; }
.kb__hd{ padding:16px 20px 0; font-size:15px; font-weight:500; letter-spacing:-0.018em; }
/* Цепочка: точка идёт по шагам, показывая, что происходит с файлом */
.kb__flow{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:16px 20px 20px; }
.kb__step{ position:relative; padding:14px 10px 12px; border-radius:10px;
  background:var(--paper); text-align:center;
  transition:background .3s ease, color .3s ease; }
.kb__step .ic{ margin:0 auto; color:var(--ink-faint); transition:color .3s ease; }
.kb__step span{ display:block; margin-top:8px; font-size:11.5px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .3s ease; }
.kb__step[data-on="true"]{ background:var(--accent); }
.kb__step[data-on="true"] .ic,
.kb__step[data-on="true"] span{ color:#fff; }
.kb__docs{ border-top:1px solid var(--line); padding:16px 20px 20px; background:var(--surface-2); }
.kb__docs > b{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); }
.kb__doc{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:11px 13px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.kb__doc .ic{ color:var(--accent); }
.kb__doc u{ text-decoration:none; font-size:13.5px; font-weight:500; letter-spacing:-0.012em; }
.kb__doc i{ font-style:normal; font-size:12px; color:var(--ink-dim); }
.kb__doc em{ margin-left:auto; font-style:normal; font-size:11.5px; padding:3px 9px;
  border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); }

/* ───────── Безопасность: второй тёмный перелом ───────── */
.sec--dark{ margin-top:var(--s24); padding:var(--s16) 0; background:var(--ink); color:#fff; }
.sec--dark .sec__title{ color:#fff; }
.sec--dark .sec__note{ color:#A7ADCB; }
.sec--dark .sec__kicker{ color:#8A90B4; }
.safe{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s3); }
.safe__it{ padding:20px 20px 22px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:background .18s ease, border-color .18s ease; }
.safe__it:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }
.safe__it .ic{ width:22px; height:22px; color:#fff; }
.safe__it h3{ margin-top:14px; font-size:16px; font-weight:500; letter-spacing:-0.02em; }
.safe__it p{ margin-top:6px; font-size:13.5px; line-height:1.5; color:#A7ADCB; }
.safe__foot{ margin-top:var(--s6); font-size:14px; color:#A7ADCB; }
.safe__foot a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.35); }

/* ───────── Как начать + призыв ───────── */
.steps{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(4, 1fr);
  counter-reset:step; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); box-shadow:var(--sh-flat); overflow:hidden; }
.step{ position:relative; padding:26px 24px 28px; }
.step + .step{ border-left:1px solid var(--line); }
.step::before{ counter-increment:step; content:counter(step);
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:13px; font-weight:500;
  font-variant-numeric:tabular-nums; }
.step h3{ margin-top:var(--s4); font-size:18px; font-weight:500; letter-spacing:-0.022em; }
.step p{ margin-top:var(--s2); font-size:14px; line-height:1.5; color:var(--ink-dim); }
.step b{ font-weight:500; color:var(--ink); }

.final{ position:relative; overflow:hidden; margin-top:var(--s16);
  padding:var(--s12) var(--s8); border-radius:var(--r-surface);
  background:var(--accent); color:#fff; text-align:center;
  box-shadow:0 40px 80px -60px rgba(42,20,180,.9); }
/* Мягкое свечение из угла, чтобы плашка не была плоской заливкой */
.final::before{ content:''; position:absolute; inset:-40% -10% auto auto;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%); }
.final > *{ position:relative; }
.final h2{ font-size:clamp(26px, 3.4vw, 38px); font-weight:500;
  letter-spacing:-0.03em; line-height:1.06; max-width:20ch; margin-inline:auto; }
.final p{ margin-top:var(--s4); font-size:16px; color:rgba(255,255,255,.82);
  max-width:60ch; margin-inline:auto; }
.final .cta{ justify-content:center; margin-top:var(--s6); }
.final .btn--lg{ background:#fff; color:var(--accent); box-shadow:var(--sh-flat); }
.final .btn--lg:hover{ box-shadow:0 10px 26px -8px rgba(0,0,0,.4); }
.final .btn--ghost{ background:transparent; color:#fff;
  border-color:rgba(255,255,255,.4); box-shadow:none; }
.final .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.final__small{ margin-top:var(--s4); font-size:13px; color:rgba(255,255,255,.62); }

@media (max-width:1100px){
  .mm{ grid-template-columns:1fr; }
  .kb{ grid-template-columns:1fr; gap:var(--s6); }
  .safe{ grid-template-columns:repeat(2, 1fr); }
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .step:nth-child(3){ border-left:none; }
  .step:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:720px){
  .safe{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step + .step{ border-left:none; border-top:1px solid var(--line); }
  .kb__flow{ grid-template-columns:repeat(2, 1fr); }
  .final{ padding:var(--s8) var(--s4); }
}

/* ───────── Общее для разделов ───────── */
.sec{ padding:var(--s24) 0 0; }
.sec__lead{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.sec__title{ font-size:clamp(28px, 4vw, 40px); font-weight:500;
  letter-spacing:-0.032em; line-height:1.03; max-width:19ch; }
.sec__note{ font-size:14px; color:var(--ink-dim); max-width:36ch; }

/* Переключатель механизма показа — часть макета, не примерочной:
   на живом сайте останется ровно один, здесь их видно рядом. */
.modes{ display:flex; gap:4px; margin-top:var(--s6); padding:4px;
  background:rgba(18,20,43,.045); border-radius:var(--r-pill); width:max-content; }
.modes button{ height:32px; padding:0 15px; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--ink-dim); font-size:14px; font-weight:500;
  cursor:pointer; transition:background .18s ease, color .18s ease; }
.modes button:hover{ color:var(--ink); }
.modes button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.modes button[aria-pressed="true"]{ background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-flat); }

/* ───────── Показ 1: вкладки над одной панелью ───────── */
.tabs{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(6, 1fr); gap:0 4px; }
.tab{ position:relative; text-align:left; background:none; border:0;
  padding:12px 14px 15px 0; cursor:pointer; color:var(--ink-dim); }
.tab__row{ display:flex; align-items:flex-start; gap:8px; }
.tab__ico{ margin-top:2px; flex:none; color:var(--ink-faint); transition:color .2s ease; }
.tab__ttl{ font-size:15px; font-weight:500; letter-spacing:-0.02em; color:var(--ink-dim);
  transition:color .2s ease; line-height:1.2; }
.tab__sub{ display:block; margin-top:var(--s1); font-size:13px; line-height:1.35;
  letter-spacing:-0.005em; color:#6B7190; }
.tab[aria-selected="true"] .tab__ttl{ color:var(--ink); }
.tab[aria-selected="true"] .tab__ico{ color:var(--accent); }
.tab:hover .tab__ttl{ color:var(--ink); }
.tab__ico{ transition:color .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1); }
.tab:hover .tab__ico{ color:var(--accent); transform:translateY(-1px); }
.tab__track{ transition:background .18s ease; }
.tab:hover .tab__track{ background:var(--line-2); }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.tab__track{ position:absolute; left:0; right:4px; bottom:0; height:2px;
  background:var(--line); overflow:hidden; }
.tab__fill{ display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left center; will-change:transform; }

/* Полоса «ещё»: четыре кадра, которые не поместились в шесть вкладок.
   Мелко, но в той же нарезке — читается как продолжение панели, а не
   как отдельная галерея. */
.eshche{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s3); }
.eshche__it{ background:var(--surface); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; box-shadow:var(--sh-flat); }
.eshche__pic{ display:block; aspect-ratio:1152 / 600; overflow:hidden;
  background:var(--paper); }
.eshche__pic img{ width:100%; height:100%; display:block; object-fit:cover;
  object-position:top left; }
.eshche__t{ padding:11px 14px 3px; font-size:14px; font-weight:500;
  letter-spacing:-0.016em; }
.eshche__n{ padding:0 14px 13px; font-size:12.5px; line-height:1.4;
  color:var(--ink-dim); }
@media (max-width:900px){ .eshche{ grid-template-columns:repeat(2, 1fr); } }

.app{ margin-top:var(--s6); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-surface);
  box-shadow:var(--sh-flat), var(--sh-lift);
  overflow:hidden; }
.app__bar{ display:flex; align-items:center; gap:14px; height:48px;
  padding:0 16px; border-bottom:1px solid var(--line); background:#FCFCFE; }
.app__title{ font-size:14px; font-weight:500; letter-spacing:-0.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.app__note{ margin-left:auto; font-size:13px; color:var(--ink-faint); white-space:nowrap; }

.stage{ position:relative; aspect-ratio:1152 / 600; background:var(--paper); }
.shot{ position:absolute; inset:0; }
.shot img{ width:100%; height:100%; display:block;
  object-fit:cover; object-position:top left; }
.fade{ animation:fade .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.app__cap{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line); background:#FCFCFE;
  font-size:14px; color:var(--ink-dim); }
.app__cap b{ font-weight:500; color:var(--ink); }
.app__step{ margin-left:auto; font-variant-numeric:tabular-nums; color:#6B7190; white-space:nowrap; }

/* ───────── Показ 2: плёнка ─────────
   Все одиннадцать снимков лежат в один ряд: видно объём, а не
   выборку из пяти. */
.film{ margin-top:var(--s6); }
.film__row{ display:flex; gap:20px; overflow-x:auto; padding:4px 0 22px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  scroll-padding-left:0; }
.film__row::-webkit-scrollbar{ display:none; }
.film__it{ flex:0 0 min(760px, 66vw); scroll-snap-align:start; }
.film__it:last-child{ padding-right:24px; }
.film__frame{ height:430px; border-radius:var(--r-surface); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--sh-lift);
  transition:border-color .2s ease; }
.film__frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.film__ttl{ margin-top:var(--s4); display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:500; letter-spacing:-0.022em; }
.film__ttl .ic{ color:var(--accent); }
.film__note{ margin-top:var(--s1); font-size:14px; color:var(--ink-dim); max-width:52ch; }
.film__nav{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.film__btn{ width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); cursor:pointer;
  transition:border-color .16s ease, transform .16s ease; }
.film__btn:hover{ border-color:var(--line-2); }
.film__btn:active{ transform:scale(.94); }
.film__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.film__btn[disabled]{ color:#8A8FA8; cursor:default; }
.film__btn--prev .ic{ transform:rotate(180deg); }
.film__cnt{ font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums; }

/* ───────── Показ 3: сцены по прокрутке ─────────
   Слева оглавление на липучке, справа снимки в полный рост.
   Пункт подсвечивается, когда его снимок доходит до середины окна. */
.scenes{ margin-top:var(--s6); display:grid; grid-template-columns:250px minmax(0,1fr); gap:46px; }
.scenes__rail{ position:sticky; top:96px; align-self:start; }
.scenes__rail button{ all:unset; display:block; width:100%; box-sizing:border-box;
  position:relative; padding:9px 0 9px 20px;
  font-size:14px; letter-spacing:-0.015em; color:var(--ink-dim);
  cursor:pointer; transition:color .22s ease; }
.scenes__rail button::before{ content:''; position:absolute; left:0; top:14px;
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background .22s ease, transform .22s ease; }
.scenes__rail button[aria-current="true"]{ color:var(--ink); }
.scenes__rail button[aria-current="true"]::before{ background:var(--accent); transform:scale(1.35); }
.scenes__rail button:hover{ color:var(--ink); }
.scenes__rail button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.scene + .scene{ margin-top:var(--s16); }
.scene__frame{ border-radius:var(--r-surface); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--sh-lift);
  opacity:.42; transform:translateY(18px) scale(.988);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.scene[data-on="true"] .scene__frame{ opacity:1; transform:none; }
.scene__frame img{ display:block; width:100%; }
.scene__ttl{ margin-top:16px; font-size:19px; font-weight:500; letter-spacing:-0.024em; }
.scene__note{ margin-top:var(--s2); font-size:14px; color:var(--ink-dim); max-width:62ch; }

/* ───────── Мелочи под показом ───────── */
.rest{ margin-top:var(--s16); padding-top:var(--s6); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px 26px; }
.rest h3{ font-size:14px; font-weight:500; letter-spacing:-0.012em; }
.rest p{ margin-top:var(--s2); font-size:14px; color:var(--ink-dim); }

.foot{ padding:var(--s24) 0; }

/* ───────── Анимация ─────────
   Включается примерочной: у каждого приёма свой признак на <html>,
   чтобы можно было посмотреть по одному. */
[data-a-rise="on"] .rise{ opacity:0; transform:translateY(14px);
  transition:opacity .66s cubic-bezier(.16,1,.3,1), transform .66s cubic-bezier(.16,1,.3,1); }
[data-a-rise="on"] .rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .scene__frame{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important;
     animation-duration:.01ms !important;
     animation-iteration-count:1 !important;
     scroll-behavior:auto !important; }
}

@media (max-width:1100px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .head__act{ margin-left:14px; }
  .tabs{ grid-template-columns:repeat(2, 1fr); }
  .rest{ grid-template-columns:repeat(2, 1fr); }
  .mgrid{ grid-template-columns:repeat(2, 1fr); }
  .facts__row{ grid-template-columns:repeat(2, 1fr); }
  .fact:nth-child(3){ border-left:none; }
  .fact:nth-child(n+3){ border-top:1px solid var(--line); }
  .scenes{ grid-template-columns:1fr; }
  .scenes__rail{ display:none; }
}
@media (max-width:1000px){
  /* width:100% обязателен рядом с height: без него браузер берёт ширину
     из aspect-ratio (высота × 1,92) и коробка вылезает за экран — на
     телефоне так терялось 45% снимка. */
  .stage{ width:100%; height:480px; }
  .film__frame{ height:320px; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .hero{ padding:40px 0 0; }
  .hero__title{ max-width:100%; letter-spacing:-0.03em; }
  .hero__sub{ font-size:16px; }
  .prompt__row{ padding:18px 16px 16px 18px; gap:12px; }
  .prompt__text{ font-size:16px; }
  .send{ width:40px; height:40px; }
  .chips{ padding:12px 16px 14px; }
  .cta{ flex-direction:column; align-items:stretch; }
  .btn--lg, .btn--ghost{ justify-content:center; }
  .terms{ grid-template-columns:1fr; gap:var(--s3); margin-top:var(--s6); }
  .term{ padding:var(--s4); gap:var(--s2); }
  .term__of{ font-size:21px; }
  .term__sub{ font-size:14px; }
  .link-quiet{ display:none; }   /* переехал в меню под бургером */
  /* Запрос на первом экране занимает на телефоне впятеро больше строк,
     чем на десктопе, и в две строки не помещался — обрывался на
     полуслове. Высота фиксированная (иначе первый экран прыгал бы при
     смене сценария), но рассчитана на длинный из них. */
  .prompt__box{ height:7.6em; align-items:flex-start; }
  .prompt__model{ height:auto; min-height:32px; padding-block:5px; }
  /* Подпись не только не влезала в полосу, но и врала: на телефоне
     снимок показан не в натуральную величину, а сильно уменьшенным. */
  .app__note{ display:none; }
  /* Пальцу нужно 44px; было 36 и 32. */
  .chip{ height:40px; }
  /* Самый мелкий кегль на телефоне поднят с 11–11,5 до 12,5. Ярусы
     подписей это не ломает: 12 и 12,5 остаются как были, а ниже
     двенадцати на вытянутой руке уже не читается. */
  .bill__lab, .dash__lab, .dept__lab, .footer__col h3, .formula__lab,
  .kb__doc em, .kb__docs > b, .kb__step span, .mcard__flag,
  .mm-file b, .mm-film__t, .pick__lab{ font-size:12.5px; }
  .sec{ padding:52px 0 0; }
  .tabs{ grid-template-columns:1fr; }
  .stage{ width:100%; height:320px; }
  .film__it{ flex:0 0 86vw; }
  .film__frame{ height:240px; }
  .rest{ grid-template-columns:1fr; }
  .mgrid{ grid-template-columns:1fr; }
  .facts__row{ grid-template-columns:1fr; }
  .fact + .fact{ border-left:none; border-top:1px solid var(--line); }
  /* Примерочная — инструмент подбора для широкого экрана. На телефоне
     она закрывала 76% окна: посетитель дев-домена упирался в неё
     вместо сайта. */
  .panel{ display:none; }
}
@media (max-width:560px){
  /* Шапка на телефоне не помещалась в экран: кнопка «Начать бесплатно»
     уезжала за правый край на 70px и обрезалась — главная кнопка сайта
     была видна наполовину. Виноваты не только буквы: просветы по 32px
     между знаком, бургером и кнопкой съедали ширину, которой нет, а
     бургеру оставалось 32px вместо сорока четырёх, нужных пальцу.
     В меню под бургером место есть — там подпись остаётся целиком. */
  .head__act .btn .btn__dlinno{ display:none; }
  .head__in{ gap:12px; }
  .burger{ flex:0 0 44px; margin-left:auto; }
}
@media (max-width:400px){
  .head__in{ gap:10px; }
  .head__act{ margin-left:10px; }
  .head__act .btn{ padding:0 14px; }
}
@media (max-width:400px){
  /* Самая длинная заготовка запроса на 320px разворачивается в девять
     строк. Высота коробки считается по ней: подстраивать её под каждый
     сценарий нельзя — первый экран прыгал бы при каждой смене. */
  .prompt__box{ height:9.4em; }
}

/* ───────── Примерочная ─────────
   Служебная панель, к макету отношения не имеет. Своя гарнитура,
   чтобы переключение шрифта страницы её не трогало. */
.panel[hidden]{ display:none; }   /* hidden сам по себе не спорит с position:fixed */
.panel{ position:fixed; right:18px; bottom:18px; z-index:60;
  width:332px; max-height:calc(100vh - 36px); overflow:auto;
  background:var(--ink); color:#fff;
  border-radius:14px; box-shadow:0 18px 44px -16px rgba(18,20,43,.66);
  font-family:'Golos Text', 'Golos Text Fallback', system-ui, sans-serif;
  font-size:13px; letter-spacing:-0.004em; }
.panel::-webkit-scrollbar{ width:8px }
.panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:4px }

.panel__head{ position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:9px;
  padding:11px 12px 11px 14px; background:var(--ink); }
.panel__head b{ font-weight:500; font-size:13px; }
.panel__head span{ opacity:.5; font-variant-numeric:tabular-nums; }
.panel__toggle{ margin-left:auto; width:24px; height:24px; border:0; border-radius:7px;
  background:rgba(255,255,255,.13); color:#fff; cursor:pointer; line-height:1; }
.panel__toggle:hover{ background:rgba(255,255,255,.26); }
.panel__body{ padding:2px 14px 14px; display:flex; flex-direction:column; gap:13px; }
.panel[data-open="false"] .panel__body{ display:none; }
.panel__sep{ height:1px; background:rgba(255,255,255,.12); margin:1px 0 0; }

.row__lbl{ display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; opacity:.55; margin-bottom:6px; }
.row__lbl b{ font-weight:500; opacity:1; color:#fff; text-align:right; }

.set{ display:flex; flex-wrap:wrap; gap:4px; }
.set button{ min-width:26px; height:26px; padding:0 8px; border:0; border-radius:7px;
  background:rgba(255,255,255,.13); color:#fff; cursor:pointer;
  font-size:12px; font-weight:500; white-space:nowrap;
  transition:background .16s ease; }
.set--wide button{ flex:1 1 auto; }
.set button:hover{ background:rgba(255,255,255,.28); }
.set button[aria-pressed="true"]{ background:#fff; color:var(--ink); }
.set button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.panel input[type="range"]{ width:100%; accent-color:#fff; margin:0; }
.panel__hint{ margin-top:var(--s2); opacity:.5; line-height:1.4; }
.panel__reset{ width:100%; height:30px; border:0; border-radius:8px;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  font-size:12px; transition:background .16s ease; }
.panel__reset:hover{ background:rgba(255,255,255,.22); }
.panel__reset:focus-visible{ outline:2px solid #fff; outline-offset:2px; }