/* NP. base3.css — СОБИРАЕТСЯ АВТОМАТИЧЕСКИ из prototype-2027/assets (tools/export_v3.py). Правки — в прототипе. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/merriweather-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/merriweather-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/merriweather-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/merriweather-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* =====================================================================
   NP. — дизайн-система, версия 2 (после критики 01.10.2026)
   Принцип: сначала вычитание. Один акцент (#0047AB, фирменный),
   две шрифтовые семьи (Inter + Merriweather), одна липкая панель,
   движение только для смены состояния. Светлая тема — единственная.
   ===================================================================== */

/* Запасные шрифты с метриками фирменных: пока Inter и Merriweather грузятся, текст набран
   Arial/Georgia той же ширины и высоты строки, поэтому подмена шрифта не сдвигает макет (CLS).
   Коэффициенты посчитаны fontTools по нашим woff2 на русской выборке. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 106.28%; ascent-override: 91.15%; descent-override: 22.70%; line-gap-override: 0%; }
@font-face { font-family: 'Merriweather Fallback'; src: local('Georgia'); size-adjust: 108.24%; ascent-override: 90.91%; descent-override: 25.22%; line-gap-override: 0%; }

/* ---------- 1. Токены ---------- */
:root {
  color-scheme: light;

  --bg: #F6F5F1;          /* фон страницы — тёплая бумага */
  --surface: #FFFFFF;     /* поверхности: карточки, меню, шторка */
  --sunk: #ECEAE4;        /* утопленные зоны */
  --ink: #121314;         /* основной текст и тёмные блоки */
  --ink-2: #4D4D4D;       /* вторичный текст, 8.4:1 */
  --ink-3: #6B6B6B;       /* подписи, 5.2:1 */
  --line: #E2DFD8;        /* линии */
  --line-2: #CDC9C0;      /* линии посильнее, рамки кнопок */
  --accent: #0047AB;      /* фирменный синий: ссылки, текущее состояние, главная кнопка */
  --accent-soft: #E6EDF8;
  --accent-on-ink: #8DB0F2; /* акцент на тёмном фоне, 8:1 */
  --ok: #1E7B4F;          /* только «сверено» */
  --live: #A85308;        /* только реально обновляемые данные */

  --f-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Merriweather', 'Merriweather Fallback', Georgia, serif;

  --t-display: clamp(2.125rem, 1.4rem + 3.6vw, 4.25rem);   /* 34 → 68 */
  --t-h1:      clamp(1.875rem, 1.45rem + 2vw, 3rem);       /* 30 → 48 */
  --t-h2:      clamp(1.5rem, 1.3rem + .9vw, 2rem);         /* 24 → 32 */
  --t-h3:      clamp(1.125rem, 1.07rem + .25vw, 1.25rem);  /* 18 → 20 */
  --t-lead:    clamp(1.125rem, 1.07rem + .3vw, 1.3125rem); /* 18 → 21 */
  --t-body:    1.0625rem;                                  /* 17 */
  --t-small:   .9375rem;                                   /* 15 */
  --t-meta:    .875rem;                                    /* 14 */

  /* Отступы: на телефоне в ходу четыре шага — 8, 16, 24, 40 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 64px; --s9: 96px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --measure: 42rem;
  --wide: 76rem;

  --r: 8px;
  --cut: 28px;            /* фирменный срезанный угол */
  --shadow-sm: 0 1px 2px rgb(18 19 20 / .04), 0 8px 24px rgb(18 19 20 / .06);
  --shadow-md: 0 2px 4px rgb(18 19 20 / .05), 0 22px 56px rgb(18 19 20 / .11);
  --bar-h: 60px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --dur: 200ms;
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 200; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r); }
.skip:focus { top: var(--s2); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--line); }

/* Подпись: обычный регистр, обычный шрифт, приглушённый цвет */
.meta { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); }
.meta--live { color: var(--live); }
.meta--ok { color: var(--ok); }
.muted:not(:where(.tool__app *)) { color: var(--ink-2); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); }

.go { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--accent); }
.go::after { content: "→"; transition: transform var(--dur) var(--ease); }
.go:hover::after { transform: translateX(3px); }

.btn:not(:where(.tool__app *)) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5); border-radius: var(--r); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center; transition: background var(--dur), border-color var(--dur), color var(--dur); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #003A8C; }
.btn--line { border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); }
.btn--line:hover { border-color: var(--ink); }

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s6); }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p { flex-basis: 100%; color: var(--ink-2); max-width: 40rem; }

/* ---------- 3. Шапка ---------- */
.bar { position: sticky; top: 0; z-index: 50; height: var(--bar-h); background: rgb(246 245 241 / .94); border-bottom: 1px solid var(--line); transition: transform 260ms var(--ease); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__in { height: 100%; display: flex; align-items: center; gap: var(--s5); }
.logo { font-weight: 900; font-size: 1.375rem; letter-spacing: -.03em; }
.logo span { color: var(--accent); }
.bar__nav { display: none; }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.menu-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r); font-weight: 600; font-size: .9375rem; background: var(--surface); }
.menu-btn i { width: 14px; height: 9px; border-block: 2px solid currentColor; }
.bar__cta { min-height: 42px; font-size: .9375rem; }
@media (min-width: 1024px) {
  .bar__nav { display: flex; gap: var(--s1); margin-left: var(--s5); }
  .bar__nav a { padding: var(--s2) var(--s3); border-radius: var(--r); font-weight: 500; font-size: .9375rem; color: var(--ink-2); }
  .bar__nav a:hover { color: var(--ink); background: var(--sunk); }
  .bar__nav a[aria-current] { color: var(--accent); font-weight: 600; }
  .menu-btn--mobile { display: none; }
}
@media (max-width: 1023.98px) { .bar__cta { min-height: 40px; padding: 0 var(--s4); } .bar__cta .lg { display: none; } }

/* Хлебные крошки: иерархия раздела, как в разметке BreadcrumbList */
.crumbs { padding-top: var(--s5); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; margin: 0; padding: 0; font-size: var(--t-meta); color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--line-2); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- 4. Меню сайта (dialog) ---------- */
.menu:not(:where(.tool__app *)) { margin: 0; padding: 0; border: 0; max-width: none; max-height: none; width: 100%; height: 100dvh; background: var(--bg); color: var(--ink); opacity: 0; transition: opacity 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.menu:not(:where(.tool__app *))[open] { opacity: 1; }
@starting-style { .menu:not(:where(.tool__app *))[open] { opacity: 0; } }
.menu:not(:where(.tool__app *))::backdrop { background: transparent; }
.menu__in { height: 100%; display: flex; flex-direction: column; }
.menu__top { height: var(--bar-h); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.menu__body { flex: 1; overflow-y: auto; padding-block: var(--s3) var(--s6); overscroll-behavior: contain; }
.menu__group { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.menu__group > a { display: block; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.menu__group > a[aria-current] { color: var(--accent); }
.menu__desc { margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-small); }
.menu__sub { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); font-size: var(--t-small); }
.menu__sub a { color: var(--ink-2); padding-block: 4px; }
.menu__sub a:hover { color: var(--accent); }
.menu__foot { padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.menu__foot .btn { width: 100%; }

/* ---------- 5. Контакт и футер (сквозные) ---------- */
.contact { padding-block: var(--section); border-top: 1px solid var(--line); }
.contact h2 { font-size: var(--t-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.contact h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--s5); background: var(--accent); }
.contact p { margin-top: var(--s4); color: var(--ink-2); max-width: 36rem; }
.contact__actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.contact__more { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-small); }
.contact__more a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.contact__more a:hover { color: var(--accent); text-decoration-color: currentColor; }
@media (max-width: 599.98px) { .contact__actions .btn { width: 100%; } }

.foot { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s7) calc(var(--s6) + env(safe-area-inset-bottom)); font-size: var(--t-small); }
.foot__grid { display: grid; gap: 0; }
.foot__col { border-bottom: 1px solid var(--line); }
.foot__col summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 700; color: var(--ink); cursor: pointer; }
.foot__col summary::-webkit-details-marker { display: none; }
.foot__col summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur) var(--ease); }
.foot__col[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.foot__col ul { list-style: none; padding: 0 0 var(--s4); margin: 0; }
.foot__col a { display: block; padding-block: 7px; color: var(--ink-2); }
.foot__col a:hover { color: var(--accent); }
.foot__col a.all { color: var(--accent); font-weight: 600; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s6); color: var(--ink-3); }
.foot__bottom address { font-style: normal; }
@media (min-width: 768px) {
  .foot__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); }
  .foot__col { border: 0; }
  .foot__col summary { min-height: 0; margin-bottom: var(--s3); cursor: default; pointer-events: none; }
  .foot__col summary::after { display: none; }
  .foot__col ul { padding: 0; }
  .foot__col a { padding-block: 5px; }
}
@media (min-width: 1200px) { .foot__grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 6. Главная: слой стиля (этап 2) ----------
   Ритм задают тональные режимы секций, а не рамки:
   бумага → поверхность → тёмная пауза → бумага.
   Фирменная форма — срезанный правый верхний угол. Только у главных
   объектов: сцена с портретом, главный кейс, главный материал. */

.section--surface { background: var(--surface); }
.section--sunk { background: var(--sunk); }
.section--ink { background: var(--ink); color: #F2F1EC; }
.section--surface + .section, .section + .section--surface, .section--ink + .section, .section + .section--ink { border-top: 0; }

/* Короткая синяя черта над заголовком секции — повторяющийся знак ритма */
.sec-head h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--s4); background: var(--accent); }
.section--ink .sec-head h2::before { background: var(--accent-on-ink); }

/* Срезанный угол: clip-path режет и рамку, и тень, поэтому тень даёт обёртка */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-wrap { display: block; filter: drop-shadow(0 1px 1px rgb(18 19 20 / .05)) drop-shadow(0 14px 28px rgb(18 19 20 / .08)); transition: transform 260ms var(--ease), filter 260ms var(--ease); }
a.cut-wrap:hover { transform: translateY(-3px); filter: drop-shadow(0 2px 2px rgb(18 19 20 / .06)) drop-shadow(0 22px 40px rgb(18 19 20 / .12)); }

/* Появление крупных блоков — один раз, только где нет prefers-reduced-motion.
   Без JS всё видно сразу: скрипт сам прячет (.rv-wait) только блоки ниже первого экрана,
   поэтому контент первого экрана не ждёт np3.js и не исчезает, если скрипт не загрузился. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .reveal.rv-wait { opacity: 0; transform: translateY(16px); }
}

/* Первый экран. Живой градиент (canvas 72×48, растянутый браузером — гладко и почти даром)
   на всю ширину; снизу маска растворяет его в бумагу, при прокрутке он гаснет и уезжает. */
/* Живой градиент — приём веб-Gemini в цветах сайта: крупные размытые пятна одновременно
   меняют форму, вращаются, дышат и ездят по разным циклам 4–12 с, поэтому рисунок
   не повторяется. Слой фиксирован под страницей: виден за первым экраном и сквозь
   стекло блока задач, затем гаснет (--fade из скрипта). Курсор слегка тянет пятна (--mx/--my). */
.ambient { position: fixed; inset: 0; z-index: -1; opacity: calc(1 - var(--fade, 0)); pointer-events: none; }
.ambient.is-off .blob { animation-play-state: paused; }
.blobs { position: absolute; inset: 0; overflow: hidden; }
.blob { position: absolute; display: block; border-radius: 50%; background-size: 220% 220%; filter: blur(var(--blur, 90px)); will-change: transform, border-radius;
  translate: calc(var(--mx, 0) * var(--pull, 60px)) calc(var(--my, 0) * var(--pull, 60px)); transition: translate 1.4s var(--ease);
  animation: np-morph 7.3s ease-in-out infinite, np-scale 9.5s ease-in-out infinite, np-rotate 11.7s ease-in-out infinite, np-flow 14s ease-in-out infinite; }
/* ездят обёртки, чтобы перемещение складывалось с притяжением к курсору */
.ambient .b1 { width: max(64vw, 520px); height: max(54vw, 460px); right: -16vw; top: -18vw; opacity: .62; background-image: linear-gradient(135deg, #0047AB 0%, #4F86E8 30%, #B9D0F7 60%, #0047AB 100%); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep; animation-duration: 7.3s, 9.5s, 11.7s, 14s, 6s; }
.ambient .b2 { width: max(50vw, 420px); height: max(44vw, 380px); left: -16vw; top: 12vh; opacity: .95; --pull: -50px; background-image: linear-gradient(135deg, #F0DDBC 0%, #FFFFFF 45%, #E6D1AC 100%); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep2; animation-duration: 9.1s, 8.3s, 13.1s, 12s, 4.3s; animation-direction: reverse, normal, reverse, normal, normal; }
.ambient .b3 { width: max(42vw, 360px); height: max(36vw, 320px); right: 14vw; top: 46vh; opacity: .72; --pull: 90px; background-image: linear-gradient(135deg, #8DB0F2 0%, #DCE8FB 50%, #6E9BEE 100%); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep; animation-duration: 8.2s, 10.4s, 9.7s, 16s, 7.1s; animation-direction: normal, reverse, normal, reverse, reverse; }
/* То же за портретом — плотнее и синее, как студийный свет */
.stage { background: #DFE7F4; }
.blobs--stage .blob { --blur: 38px; --pull: 24px; }
.blobs--stage .b1 { width: 85%; height: 65%; left: 22%; top: -12%; background-image: linear-gradient(135deg, #FFFFFF, #EEF4FF 50%, #FFFFFF); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep3; animation-duration: 7.3s, 9.5s, 11.7s, 14s, 6s; }
.blobs--stage .b2 { width: 80%; height: 70%; left: -34%; bottom: -24%; opacity: .75; background-image: linear-gradient(135deg, #0047AB, #5B8FE6 50%, #0047AB); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep3; animation-duration: 9.1s, 8.3s, 13.1s, 12s, 4.3s; animation-direction: reverse, normal, reverse, normal, reverse; }
.blobs--stage .b3 { width: 70%; height: 55%; right: -26%; bottom: 4%; opacity: .7; background-image: linear-gradient(135deg, #8DB0F2, #F1E4CC 60%, #8DB0F2); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep3; animation-duration: 8.2s, 10.4s, 9.7s, 16s, 5.2s; }
@keyframes np-morph {
  0%, 100% { border-radius: 42% 58% 55% 45% / 60% 44% 56% 40%; }
  33% { border-radius: 58% 42% 38% 62% / 42% 60% 40% 58%; }
  66% { border-radius: 46% 54% 62% 38% / 55% 38% 62% 45%; }
}
@keyframes np-scale { 0%, 100% { scale: .88; } 50% { scale: 1.14; } }
@keyframes np-rotate { 0%, 100% { rotate: -14deg; } 50% { rotate: 20deg; } }
@keyframes np-flow { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
@keyframes np-sweep { 0%, 100% { transform: translate(-14vw, 0); } 50% { transform: translate(12vw, 3vw); } }
@keyframes np-sweep2 { 0%, 100% { transform: translate(9vw, -2vw); } 25% { transform: translate(-4vw, 2vw); } 50% { transform: translate(-10vw, -1vw); } 75% { transform: translate(4vw, 3vw); } }
@keyframes np-sweep3 { 0%, 100% { transform: translate(-12%, 0); } 50% { transform: translate(12%, 6%); } }
@media (max-width: 767.98px) { .blob { --blur: 60px; } .blobs--stage .blob { --blur: 30px; } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; transition: none; } }
/* Зерно поверх градиента: убирает полосы на дешёвых экранах и даёт фактуру бумаги */
.ambient::after, .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Блок задач — матовое стекло над градиентом */
.section--glass { background: rgb(255 255 255 / .42); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3); border-top: 1px solid rgb(255 255 255 / .7); }
.section--glass .router a:hover { background: linear-gradient(90deg, rgb(255 255 255 / .7), transparent 75%); }
.hero { padding-block: var(--s6) var(--s8); }
.hero__grid { display: grid; gap: var(--s6); }
.hero__name { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s4); }
.hero__name b { color: var(--ink); font-weight: 600; }
.hero h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.hero h1 span { color: var(--accent); }
.hero__sub { margin-top: var(--s5); font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 599.98px) { .hero__cta .btn { flex: 1 1 0; padding-inline: var(--s3); } }

/* Характеристики как у продукта: крупная цифра + подпись */
.spec-sheet { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s7); border-top: 1px solid var(--line-2); }
.spec-sheet div { padding: var(--s4) var(--s3) 0 0; }
.spec-sheet div:nth-child(n+3) { margin-top: var(--s4); }
.spec-sheet b { display: block; font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spec-sheet span { display: block; margin-top: var(--s1); font-size: var(--t-meta); color: var(--ink-2); line-height: 1.35; }
@media (min-width: 600px) { .spec-sheet { grid-template-columns: repeat(4, 1fr); } .spec-sheet div:nth-child(n+3) { margin-top: 0; } }

/* Сцена с портретом: тёплый свет, фигура стоит на нижней кромке.
   Сюда же встаёт сгенерированное видео. */
.stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(90% 75% at 62% 18%, #FFFFFF 0%, #EFEDE7 55%, #E3DFD6 100%); }
/* Портрет стоит на нижней кромке, размер от высоты сцены: фигура узкая, по ширине обрезалась бы голова */
.stage img, .stage video { position: absolute; z-index: 1; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); }
.stage video { inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.stage__plate { position: absolute; z-index: 2; left: var(--s4); bottom: var(--s4); padding: var(--s2) var(--s3); background: rgb(255 255 255 / .9); border-radius: 6px; font-size: .8125rem; line-height: 1.35; box-shadow: var(--shadow-sm); }
.stage__plate b { display: block; font-weight: 600; }
.stage__plate span { color: var(--ink-2); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--s8) var(--s9); }
  .hero__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s8); align-items: center; }
  .stage { aspect-ratio: 4 / 5; --cut: 40px; }
  .stage img { height: 93%; }
}

/* «С чем приходят»: строки-маршруты на белой поверхности */
.router { border-top: 1px solid var(--line); }
.router a { position: relative; display: grid; grid-template-columns: 1fr 24px; gap: var(--s2) var(--s4); padding: var(--s5) var(--s1); border-bottom: 1px solid var(--line); transition: background var(--dur); }
.router b { font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.router span { grid-column: 1; color: var(--ink-2); font-size: var(--t-small); }
.router span strong { color: var(--accent); font-weight: 600; }
.router a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.25rem; color: var(--ink-3); transition: transform var(--dur) var(--ease), color var(--dur); }
.router a:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 75%); }
.router a:hover::after { transform: translateX(4px); color: var(--accent); }
@media (min-width: 900px) {
  .router a { grid-template-columns: 1.1fr 1fr 32px; align-items: center; padding-inline: var(--s3); }
  .router span { grid-column: 2; }
  .router a::after { grid-column: 3; grid-row: 1; }
}

/* Доказательства: один главный кейс крупно + три коротких */
/* Главный кейс — история при прокрутке. График слева закреплён, шаги справа
   прокручиваются и переключают пометки маркером (data-step на figure). */
.story__in { display: grid; background: var(--surface); }
.story__fig { position: sticky; top: 0; z-index: 2; margin: 0; padding: var(--s5) var(--s4) var(--s4); background: linear-gradient(180deg, #FBFAF7, #F1EFE9); border-bottom: 1px solid var(--line); transition: top 260ms var(--ease); }
.bar-shown .story__fig { top: var(--bar-h); }
.story__fig .spec-line { margin-bottom: var(--s3); }
.spec-line { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-meta); color: var(--ink-3); }
.spec-line span + span::before { content: "·"; margin-right: var(--s3); color: var(--line-2); }
.art-note { margin-top: var(--s2); font-size: .75rem; color: var(--ink-3); }
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--f-sans); font-weight: 500; }
.chart--wide { display: none; }
.chart .grid line { stroke: var(--line); }
.chart .grid .tick { stroke: var(--line-2); }
.chart .grid text { fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .area { fill: var(--accent-soft); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
/* Линия дорисовывается по шагам: clip-path скрывает правую часть графика */
.chart .plot { clip-path: inset(-12px 0 -12px -12px); }
[data-step="1"] .plot { clip-path: inset(-12px var(--r1) -12px -12px); }
[data-step="2"] .plot { clip-path: inset(-12px var(--r2) -12px -12px); }
.chart .dot[data-s="3"] { opacity: 0; transition: opacity 300ms var(--ease) 900ms; }
[data-step="all"] .dot[data-s="3"], [data-step="3"] .dot[data-s="3"] { opacity: 1; }

/* Пометки маркером: вторая фирменная деталь после срезанного угла.
   Тот же класс .mark ляжет поверх настоящих скриншотов. */
.mark { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.note:not(:where(.tool__app *)) { fill: var(--accent); font-weight: 700; letter-spacing: -.01em; opacity: 0; transition: opacity 300ms var(--ease) 500ms; }
[data-step="all"] [data-s="1"], [data-step="all"] [data-s="3"],
[data-step="1"] [data-s="1"], [data-step="2"] [data-s="2"], [data-step="3"] [data-s="3"] { opacity: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .chart .plot { transition: clip-path 1200ms var(--ease); }
  .mark { transition: stroke-dashoffset 700ms var(--ease) 600ms, opacity 100ms 600ms; }
}

ol.story__steps { list-style: none; margin: 0; padding: 0 var(--s5); }
.story__step { padding-block: var(--s7); min-height: 52vh; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); border-bottom: 1px solid var(--line); transition: opacity 300ms var(--ease); }
.story__step:last-child { border-bottom: 0; }
.js-story .story__step { opacity: .3; }
.js-story .story__step.is-active { opacity: 1; }
.story__when { font-size: var(--t-meta); font-weight: 600; color: var(--accent); }
.story__step h3 { font-size: var(--t-h3); line-height: 1.35; }
.story__step p:not(.story__when):not(.feature__num) { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.story__step .go { margin-top: var(--s2); }
.feature__num { font-size: clamp(3.5rem, 2.6rem + 4vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .story { --cut: 40px; }
  .chart--narrow { display: none; }
  .chart--wide { display: block; }
  .story__fig { padding: var(--s6) var(--s7) var(--s5); }
  .bar-shown .story__fig { top: var(--bar-h); }
  /* на десктопе шаги — колонка под графиком со сдвигом: номер шага слева, текст справа */
  ol.story__steps { padding: 0 var(--s7); }
  .story__step { min-height: 46vh; display: grid; grid-template-columns: 220px 1fr; column-gap: var(--s7); align-content: center; }
  .story__step > * { grid-column: 2; }
  .story__step .story__when { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: .35em; }
}

.cases__more { display: grid; gap: var(--s4); margin-top: var(--s5); }
.mini { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--dur), transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.mini:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mini .mini__num { font-size: 2rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.mini__num small { font-size: .55em; font-weight: 700; margin-left: .1em; }
.mini p { font-size: var(--t-small); line-height: 1.45; }
.mini .spec-line { font-size: var(--t-meta); }
.mini .go { margin-top: auto; font-size: var(--t-small); }
@media (min-width: 768px) { .cases__more { grid-template-columns: repeat(3, 1fr); } }

/* Подход: тёмная пауза посреди страницы */
.statement { font: 400 clamp(1.375rem, 1.05rem + 1.5vw, 2.375rem)/1.38 var(--f-serif); letter-spacing: -.01em; max-width: 50rem; color: #F2F1EC; }
.statement mark { background: none; color: var(--accent-on-ink); }
.flow { list-style: none; padding: 0; margin: var(--s8) 0 0; display: grid; gap: var(--s6); position: relative; }
.flow::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: rgb(255 255 255 / .2); }
.flow::after { content: ""; position: absolute; left: 6px; top: 8px; width: 1px; height: calc((100% - 16px) * var(--p, 0)); background: var(--accent-on-ink); box-shadow: 0 0 12px var(--accent-on-ink); }
.flow li { position: relative; padding-left: var(--s7); transition: opacity 500ms var(--ease); }
/* Невключённый этап гаснет маркером и заголовком, но текст держит контраст ≥ 4,5:1 (WCAG AA) */
.js-flow .flow li::before { opacity: .45; }
.js-flow .flow li:not(.is-on) h3 { color: rgb(242 241 236 / .72); }
.js-flow .flow li.is-on::before { opacity: 1; }
.flow li.is-on::before { transform: scale(1.35); box-shadow: 0 0 0 6px rgb(141 176 242 / .18); }
.flow li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: var(--accent-on-ink); clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); transition: transform 400ms var(--ease), opacity 400ms var(--ease); }
.flow .meta { color: rgb(242 241 236 / .6); }
.flow h3 { margin-top: var(--s1); font-size: var(--t-h3); color: #fff; transition: color 500ms var(--ease); }
.flow p { margin-top: var(--s2); font-size: var(--t-small); color: rgb(242 241 236 / .75); }
.flow .go { margin-top: var(--s3); font-size: var(--t-small); color: var(--accent-on-ink); }
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
  .flow::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
  .flow::after { left: 0; top: 6px; height: 1px; width: calc(100% * var(--p, 0)); }
  .flow li { padding-left: 0; padding-top: var(--s7); }
}

/* База знаний: главный материал со схемой + темы */
.kb { display: grid; gap: var(--s6); }
.kb-feature__in { display: block; padding: var(--s6) var(--s5); background: var(--surface); }
.kb-feature h3 { margin-top: var(--s3); font-size: var(--t-h3); line-height: 1.35; }
.kb-feature p { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-small); }
.chain { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: 6px; position: relative; counter-reset: c; font-size: var(--t-small); }
.chain::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--line-2); }
.chain li { position: relative; display: flex; align-items: center; gap: var(--s3); counter-increment: c; }
.chain li::before { content: counter(c); position: relative; flex: none; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.chain li:last-child::before { border-color: var(--accent); background: var(--accent); color: #fff; }
.chain li:last-child { color: var(--accent); font-weight: 600; }
.kb-list { border-top: 1px solid var(--line); }
.kb-list a { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.kb-list b { font-size: 1.0625rem; font-weight: 600; }
.kb-list .n { font-size: 1.25rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kb-list span.d { grid-column: 1; font-size: var(--t-small); color: var(--ink-2); }
.kb-list a:hover b, .kb-list a:hover .n { color: var(--accent); }
@media (min-width: 1024px) { .kb { grid-template-columns: 1.1fr 1fr; gap: var(--s8); align-items: start; } .kb-feature { --cut: 40px; } .kb-feature__in { padding: var(--s7); } }

/* Инструменты: три «прибора» с превью интерфейса + остальные строкой */
.tools-grid { display: grid; gap: var(--s4); }
.tool { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color var(--dur); }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.tool__ui { margin: var(--s4) var(--s4) 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: .8125rem; box-shadow: var(--shadow-sm); }
.tool__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }
.tool__row + .tool__row { margin-top: 6px; }
.tool__row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tool__out { margin-top: 10px; padding: 8px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tool__code { margin: 0; font: 500 .75rem/1.55 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ink-2); white-space: pre; overflow: hidden; }
.tool__code em { font-style: normal; color: var(--accent); }
.tool__body { padding: var(--s4) var(--s5) var(--s5); }
.tool__body .meta { display: block; }
.tool__body b { display: block; margin-top: var(--s1); font-size: 1.0625rem; }
.tool__body p { margin-top: var(--s1); font-size: var(--t-small); color: var(--ink-2); }
.tools-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s5); font-size: var(--t-small); color: var(--ink-2); }
.tools-more a:not(.go) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tools-more a:not(.go):hover { color: var(--accent); }
@media (min-width: 768px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }

/* Опыт */
.chron { display: grid; border-top: 1px solid var(--line); }
.chron li { display: grid; gap: var(--s1); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.chron .when { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chron b { font-weight: 600; line-height: 1.4; }
.chron span.d { display: block; font-size: var(--t-small); color: var(--ink-2); }
@media (min-width: 768px) { .chron li { grid-template-columns: 8rem 1fr; gap: var(--s5); } }
@media (min-width: 1024px) { .trust { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s8); } .trust .sec-head { position: sticky; top: calc(var(--bar-h) + var(--s5)); align-self: start; display: block; } }

/* Вопросы */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s5); padding-block: var(--s5); cursor: pointer; font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 1.375rem; line-height: 1; color: var(--accent); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: var(--s5); color: var(--ink-2); max-width: 44rem; }

/* ---------- 7. Хаб ---------- */
.hub-head { padding-block: var(--s5) var(--s7); }
.hub-head h1 { font-size: var(--t-h1); letter-spacing: -.03em; margin-bottom: var(--s4); }
.hub-head .lead { max-width: 42rem; }

.paths { display: grid; gap: var(--s4); }
.paths a { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.paths a:hover { border-color: var(--ink-3); }
.paths b { font-size: 1.0625rem; line-height: 1.35; }
.paths ol { list-style: none; padding: 0; margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
.paths ol li::before { content: "→ "; color: var(--ink-3); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, 1fr); } }

.chips { position: sticky; top: 0; z-index: 40; background: rgb(246 245 241 / .96); border-block: 1px solid var(--line); transition: top 260ms var(--ease); }
body.bar-shown .chips { top: var(--bar-h); }
.chips__in { display: flex; gap: var(--s2); overflow-x: auto; padding-block: var(--s3); scrollbar-width: none; }
.chips__in::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
.chip .n { color: var(--ink-3); }
.chip:hover { border-color: var(--ink-3); }
.chip.is-active { border-color: var(--accent); color: var(--accent); }
.chip.is-active .n { color: inherit; }

.cluster { padding-block: var(--s7); }
.cluster + .cluster { border-top: 1px solid var(--line); }
.cluster__head { margin-bottom: var(--s5); }
.cluster__head h2 { font-size: var(--t-h2); }
.cluster__head p { margin-top: var(--s2); color: var(--ink-2); max-width: 40rem; }
.pillar { display: block; padding: var(--s5); border-radius: var(--r); background: var(--accent-soft); margin-bottom: var(--s4); }
.pillar b { display: block; margin-top: var(--s1); font-size: 1.25rem; line-height: 1.3; }
.pillar p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-small); }
.pillar .go { margin-top: var(--s3); }
.rows { border-top: 1px solid var(--line); }
.row:not(:where(.tool__app *)) { display: block; padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.row:not(:where(.tool__app *)) b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.row:not(:where(.tool__app *)):hover b { color: var(--accent); }
.row:not(:where(.tool__app *)) p { margin-top: var(--s1); font-size: var(--t-small); color: var(--ink-2); }
.row:not(:where(.tool__app *)) .meta { display: block; margin-top: var(--s2); }

/* ---------- 8. Статья ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }

.ctx { position: sticky; top: 0; z-index: 40; transition: top 260ms var(--ease); }
body.bar-shown .ctx { top: var(--bar-h); }
.ctx__btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-inline: var(--gutter); background: rgb(246 245 241 / .96); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--t-small); }
.ctx__t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx__i { flex: none; color: var(--accent); font-weight: 600; }
@media (min-width: 1200px) { .ctx { display: none; } }

.sheet { margin: auto 0 0; padding: 0; border: 0; width: 100%; max-width: none; max-height: 80dvh; border-radius: 14px 14px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -12px 40px rgb(0 0 0 / .15); transform: translateY(100%); transition: transform 280ms var(--ease), overlay 280ms allow-discrete, display 280ms allow-discrete; }
.sheet[open] { transform: none; }
@starting-style { .sheet[open] { transform: translateY(100%); } }
.sheet::backdrop { background: rgb(0 0 0 / .3); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s5) var(--gutter) var(--s3); }
.sheet__head b { font-size: 1.125rem; }
.sheet__close { min-height: 40px; padding: 0 var(--s3); color: var(--accent); font-weight: 600; }
.sheet__body { overflow-y: auto; max-height: calc(80dvh - 140px); padding: 0 var(--gutter) var(--s4); overscroll-behavior: contain; }
.sheet__foot { padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet__foot .btn { width: 100%; }
@media (min-width: 768px) { .sheet { max-width: 560px; margin-inline: auto; } }

.toc { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 10px 0 10px var(--s3); border-left: 2px solid transparent; color: var(--ink-2); font-size: var(--t-small); line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.doc__rail, .doc__aside { display: none; }
.doc__main { min-width: 0; }
@media (min-width: 1200px) {
  .doc__grid { grid-template-columns: 14rem minmax(0, var(--measure)) 14rem; gap: var(--s8); justify-content: center; }
  .doc__rail, .doc__aside { display: block; padding-top: var(--s7); }
  /* В HTML оглавление идёт после статьи (контент раньше навигации), визуально — слева */
  .doc__rail { grid-column: 1; grid-row: 1; } .doc__main { grid-column: 2; grid-row: 1; } .doc__aside { grid-column: 3; grid-row: 1; }
  .doc__rail > div, .doc__aside > div { position: sticky; top: calc(var(--bar-h) + var(--s5)); }
  .doc__rail .toc a { padding-block: 6px; }
  .rail-title { font-weight: 700; margin-bottom: var(--s3); }
}

.doc__head { padding-top: var(--s5); max-width: var(--measure); }
.doc__head .meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.doc h1 { font-size: var(--t-h1); letter-spacing: -.03em; line-height: 1.12; margin-block: var(--s4) var(--s5); }
.doc .abstract { font: 400 var(--t-lead)/1.65 var(--f-serif); }
.doc .abstract p + p { margin-top: var(--s4); font-size: .9em; color: var(--ink-2); }
.byline { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); padding-block: var(--s4); border-block: 1px solid var(--line); }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.byline div { font-size: var(--t-small); line-height: 1.4; }
.byline b { display: block; }
.byline span { color: var(--ink-3); }

.prose { margin-top: var(--s7); font-size: var(--t-body); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--t-h2); margin-top: 2.4em; line-height: 1.2; scroll-margin-top: calc(var(--bar-h) + 64px); }
.prose h2 + * { margin-top: .8em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: .6em; }
.prose b, .prose strong { font-weight: 650; }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-2); padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 2px solid var(--ink); }
.tbl td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td:first-child { font-weight: 600; }
@media (max-width: 599.98px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr:first-child { display: none; }
  .tbl tr { padding-block: var(--s4); border-bottom: 1px solid var(--line); }
  .tbl td { border: 0; padding: 0; }
  .tbl td + td { margin-top: var(--s2); }
  .tbl td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
  .tbl--2 td:not(:first-child)::before { display: none !important; }
  .tbl td:not(:first-child) { color: var(--ink-2); }
}

.map { border-top: 1px solid var(--line); }
.map a { display: block; padding-block: var(--s4); border-bottom: 1px solid var(--line); text-decoration: none !important; }
.map a b { display: block; color: var(--ink); font-weight: 600; }
.map a span { display: block; font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s1); }
.map a:hover b { color: var(--accent); }
.prose .faq { margin-top: var(--s4); }

.next { margin-top: var(--s8); padding-top: var(--s6); border-top: 2px solid var(--ink); }
.next h2 { font-size: var(--t-h2); }
.next ul { list-style: none; padding: 0; margin: var(--s5) 0 0; }
.next li { padding-block: var(--s4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.next li a { color: var(--accent); font-weight: 600; }

.author { margin-top: var(--s7); display: flex; gap: var(--s4); font-size: var(--t-small); color: var(--ink-2); }
.author img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; }
.author b { color: var(--ink); }
.author a { color: var(--accent); }

.aside-card { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
.aside-card + .aside-card { margin-top: var(--s4); }
.aside-card > b { display: block; margin-bottom: var(--s2); }
.aside-card nav a { display: block; padding-block: 6px; color: var(--ink-2); line-height: 1.4; }
.aside-card nav a:hover { color: var(--accent); }
.aside-card nav a[aria-current] { color: var(--ink); font-weight: 600; }
.aside-card p { color: var(--ink-2); }
.aside-card .btn { width: 100%; margin-top: var(--s4); }

/* ---------- 9. Движение: только смена состояния ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Оглавление в тексте статьи: телефон и планшет, свёрнуто по умолчанию */
.toc-inline { margin-top: var(--s6); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.toc-inline summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 600; cursor: pointer; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur) var(--ease); }
.toc-inline[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.toc-inline nav { padding-bottom: var(--s3); }
@media (min-width: 1200px) { .toc-inline { display: none; } }

/* =====================================================================
   Статья, версия 3: стиль главной
   ===================================================================== */
/* Шапка: тот же живой градиент, тише и медленнее; уезжает вместе со страницей и растворяется в бумагу */
.cap { position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.blobs--calm .blob { --blur: 110px; --pull: 30px; }
.blobs--calm .b1 { width: max(56vw, 460px); height: max(40vw, 360px); right: -12vw; top: -14vw; opacity: .42; background-image: linear-gradient(135deg, #0047AB 0%, #4F86E8 30%, #B9D0F7 60%, #0047AB 100%); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep; animation-duration: 11s, 14s, 17s, 20s, 10s; }
.blobs--calm .b2 { width: max(46vw, 380px); height: max(34vw, 320px); left: -14vw; top: 20px; opacity: .95; background-image: linear-gradient(135deg, #F0DDBC 0%, #FFFFFF 45%, #E6D1AC 100%); animation-name: np-morph, np-scale, np-rotate, np-flow, np-sweep2; animation-duration: 13s, 12s, 19s, 18s, 8s; animation-direction: reverse, normal, reverse, normal, normal; }

/* «Главное»: короткий ответ в карточке со срезанным углом */
.keypoints { margin-top: var(--s6); max-width: var(--measure); }
.keypoints__in { padding: var(--s5) var(--s5) var(--s5); background: var(--surface); }
.keypoints h2 { font-size: var(--t-meta); font-weight: 700; letter-spacing: .01em; color: var(--accent); margin: 0 0 var(--s3); }
.keypoints h2::before { content: none; }
.keypoints ul { list-style: none; margin: 0; padding: 0; counter-reset: kp; }
.keypoints li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.55; color: var(--ink); counter-increment: kp; }
.keypoints li::before { content: counter(kp); position: absolute; left: 0; top: var(--s3); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 700; line-height: 22px; }
@media (min-width: 768px) { .keypoints { --cut: 32px; } .keypoints__in { padding: var(--s6) var(--s7) var(--s5); } }

/* Скриншоты с пометками маркером: SVG-слой с тем же viewBox, что у картинки, масштабируется вместе с ней.
   Пометки рисуются, когда кадр доходит до экрана; без скрипта видны сразу. */
.shot { margin: var(--s6) 0; }
.shot__frame { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.shot__frame img { display: block; width: 100%; height: auto; }
.shot__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shot .mark { opacity: 1; stroke-dashoffset: 0; stroke-width: 5; }
.shot .note { opacity: 1; font: 700 46px/1 var(--f-sans); }
.shot.rv-wait .mark { opacity: 0; stroke-dashoffset: 1; }
.shot.rv-wait .note { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .shot .mark { transition: stroke-dashoffset 900ms var(--ease) 350ms, opacity 100ms 350ms; }
  .shot .mark + .mark { transition-delay: 700ms; }
  .shot .note { transition: opacity 400ms var(--ease) 1000ms; }
}
.shot figcaption { margin-top: var(--s2); font-size: var(--t-meta); color: var(--ink-3); }

/* Карточка автора: портрет на живом свете, опыт по теме статьи */
.author-card { margin-block: var(--s8); }
.author-card__in { display: grid; grid-template-columns: 112px 1fr; background: var(--surface); }
.author-card .author-card__photo { aspect-ratio: auto; height: 100%; min-height: 160px; }
.author-card__photo img { height: 92%; max-width: none; } /* колонка уже фигуры: пропорции важнее, края обрежет overflow сцены */
.author-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.author-card__name { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; }
.author-card__role { font-size: var(--t-small); color: var(--ink-2); }
.author-card__facts { list-style: none; padding: 0; margin: var(--s3) 0 var(--s2); }
.author-card__facts li { padding-block: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.author-card .go { font-size: var(--t-small); }
@media (min-width: 600px) { .author-card { --cut: 32px; } .author-card__in { grid-template-columns: 200px 1fr; } .author-card__body { padding: var(--s6); } }
@media (min-width: 1024px) { .author-card .author-card__photo { aspect-ratio: auto; } .author-card__photo img { height: 92%; } }

/* =====================================================================
   Хаб базы знаний, версия 3: у каждой темы своя раскладка
   ===================================================================== */
.hub-hero { padding-block: var(--s5) var(--s7); }
.hub-hero h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.hub-hero .lead { margin-top: var(--s4); max-width: 40rem; }
.hub-hero .spec-sheet { max-width: 46rem; }
.hub-start { padding-bottom: var(--s8); }
.hub-kicker { margin-bottom: var(--s4); font-size: var(--t-meta); font-weight: 700; color: var(--accent); }

/* Маршруты по ролям: матовые карточки над градиентом шапки, внутри цепочка из трёх шагов */
.routes { display: grid; gap: var(--s4); }
.route { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r); background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgb(255 255 255 / .85); box-shadow: var(--shadow-sm); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.route:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.route__who { font-size: var(--t-meta); font-weight: 600; color: var(--accent); }
.route b { font-size: 1.125rem; line-height: 1.35; }
.route__steps { position: relative; display: grid; gap: 6px; margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
.route__steps::before { content: ""; position: absolute; left: 7px; top: .8em; bottom: .8em; width: 1px; background: var(--line-2); }
.route__steps li { position: relative; padding-left: 24px; }
.route__steps li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); }
.route__steps li:last-child::before { background: var(--accent); }
@media (min-width: 900px) { .routes { grid-template-columns: repeat(3, 1fr); } }

/* Темы: синяя черта над заголовком, как на главной */
.cluster { padding-block: var(--s8); }
.cluster__head { margin-bottom: var(--s6); }
@media (min-width: 1024px) { .cluster__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s8); align-items: end; } .cluster__head p { margin-top: 0; } .duo .cluster__head { display: block; } .duo .cluster__head p { margin-top: var(--s2); } }
.cluster__head h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--s4); background: var(--accent); }
.section--ink .cluster__head h2::before { background: var(--accent-on-ink); }
.section--ink .cluster__head p { color: rgb(242 241 236 / .7); }
.cluster--surface { background: var(--surface); }
.cluster--surface + .cluster, .section--ink + .duo .cluster { border-top: 0; }

/* 1. Бенто: большая карточка со схемой, «начните отсюда», плитки; у материалов с генератором — код */
.bento { display: grid; gap: var(--s4); }
.tile { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); min-height: 168px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color var(--dur); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.tile__t { font-size: 1.0625rem; font-weight: 650; line-height: 1.35; transition: color var(--dur); }
.tile:hover .tile__t { color: var(--accent); }
.tile__d { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.tile .spec-line { font-size: .75rem; }
.tile__flag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--accent); font-size: .75rem; font-weight: 700; }
.tile--hero { padding: 0; border: 0; background: none; min-height: 0; }
.tile--hero:hover { box-shadow: none; }
.tile--hero .tile__in { display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s6) var(--s5); background: var(--surface); }
.tile--hero .tile__t { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.tile--hero .chain { margin-block: var(--s3); }
.tile--hero .go { margin-top: auto; }
.tile--pillar { background: linear-gradient(140deg, #E3ECFA 0%, #F4F7FD 70%); border-color: #D3DFF3; }
.tile--pillar .tile__t { font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.32 var(--f-serif); letter-spacing: -.01em; }
.tile--pillar .spec-line { margin-top: auto; }
.tile--tool { background: var(--bg); }
.tile__code { margin: 0 0 var(--s2); padding: var(--s3) var(--s4); border-radius: 6px; background: var(--ink); color: #C9CCD2; font: 500 .75rem/1.6 ui-monospace, 'SF Mono', Menlo, monospace; white-space: pre; overflow: hidden; }
.tile__code em { font-style: normal; color: var(--accent-on-ink); }
.tile__tool { margin-top: auto; align-self: flex-start; justify-self: start; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--accent); font-size: .75rem; font-weight: 700; }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--hero, .tile--pillar { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .tile--hero { --cut: 40px; grid-column: span 2; grid-row: span 2; }
  .tile--hero .tile__in { padding: var(--s7); }
  .tile--pillar { grid-column: span 2; }
  .tile--tool { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--s5); }
  .tile--tool .tile__code { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: center; }
  .tile--tool > :not(.tile__code) { grid-column: 1; }
}

/* 2. Локальное SEO: опорная статья с настоящим скриншотом + маршрут из пяти шагов */
.local-pillar { margin-bottom: var(--s7); }
.local-pillar__in { display: grid; background: var(--bg); overflow: hidden; }
.local-pillar__body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5); }
.local-pillar .tile__t { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.local-pillar:hover .tile__t { color: var(--accent); }
.local-pillar__shot { margin: 0; padding: 0 var(--s5); max-height: 220px; overflow: hidden; }
.local-pillar__shot img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; border: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(10px) rotate(-1.5deg); transition: transform 400ms var(--ease); }
.local-pillar:hover .local-pillar__shot img { transform: translateY(0) rotate(0); }
@media (min-width: 900px) {
  .local-pillar { --cut: 40px; }
  .local-pillar__in { grid-template-columns: 1fr 1.1fr; align-items: end; }
  .local-pillar__body { padding: var(--s7); align-self: center; }
  .local-pillar__shot { max-height: none; padding: var(--s7) var(--s7) 0 0; }
}

/* Маршрут: линия заполняется при прокрутке, шаги загораются (тот же скрипт, что у этапов на главной) */
.track { position: relative; display: grid; gap: var(--s3); }
.track::before, .track::after { content: ""; position: absolute; left: 11px; top: 16px; width: 2px; border-radius: 2px; }
.track::before { bottom: 16px; background: var(--line); }
.track::after { height: calc((100% - 32px) * var(--p, 1)); background: var(--accent); }
.track li { position: relative; padding-left: 36px; }
.track li::before { content: ""; position: absolute; left: 5px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); transition: background var(--dur), transform 300ms var(--ease); }
.track li.is-on::before { background: var(--accent); transform: scale(1.1); }
.track a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), opacity 400ms var(--ease); }
.track a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.track a:hover b { color: var(--accent); }
.track__n { font-size: .75rem; font-weight: 700; color: var(--accent); }
.track b { font-size: 1rem; line-height: 1.35; }
.track p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
.track .meta { margin-top: auto; padding-top: var(--s2); font-size: .75rem; }
.js-track .track li:not(.is-on) a { opacity: .5; }
@media (min-width: 1024px) {
  .track { grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
  .track::before, .track::after { left: 0; top: 7px; height: 2px; width: auto; }
  .track::before { right: 0; bottom: auto; }
  .track::after { height: 2px; width: calc(100% * var(--p, 1)); }
  .track li { padding: 32px 0 0; }
  .track li::before { left: 0; top: 1px; }
}

/* 3. Данные проектов: тёмная пауза. Живые ленты (без пульсаций) и наборы данных с цифрой кейса */
.field:not(:where(.tool__app *)) { display: grid; gap: var(--s4); }
.live, .datum { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5); border-radius: var(--r); color: #F2F1EC; transition: transform 260ms var(--ease), border-color var(--dur), background var(--dur); }
.live { background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .12); }
.datum { background: rgb(141 176 242 / .07); border: 1px solid rgb(141 176 242 / .24); }
.live:hover, .datum:hover { transform: translateY(-3px); border-color: var(--accent-on-ink); }
.live__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: #9FDDB4; }
.live__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4BC97A; box-shadow: 0 0 0 4px rgb(75 201 122 / .18); }
.live b, .datum b { font-size: 1.1875rem; line-height: 1.3; color: #fff; }
.live p, .datum p { font-size: var(--t-small); color: rgb(242 241 236 / .72); }
.live .go { margin-top: auto; padding-top: var(--s3); color: var(--accent-on-ink); }
.datum__num { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--accent-on-ink); font-variant-numeric: tabular-nums; }
.datum__num small { font-size: .5em; margin-left: .05em; }
.datum__cap { margin-bottom: var(--s2); font-size: .8125rem; color: rgb(242 241 236 / .6); }
.datum .meta { margin-top: auto; padding-top: var(--s2); color: rgb(242 241 236 / .55); }
@media (min-width: 900px) {
  .field:not(:where(.tool__app *)) { grid-template-columns: 1.25fr 1fr; grid-auto-flow: column; grid-template-rows: auto auto; }
  .live { grid-column: 1; min-height: 220px; }
  .datum { grid-column: 2; }
}

/* 4–5. Аналитика и Справочное рядом */
.duo { display: grid; }
.duo .cluster { padding-inline: 0; }
.duo__cards { display: grid; gap: var(--s4); }
.ref { display: flex; flex-direction: column; gap: var(--s2); min-height: 220px; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.ref:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ref:hover b { color: var(--accent); }
.ref b { font-size: 1.125rem; }
.ref p { font-size: var(--t-small); color: var(--ink-2); }
.ref__glyph { margin-bottom: auto; padding-bottom: var(--s4); font: 700 clamp(3rem, 2.4rem + 2vw, 4rem)/1 var(--f-serif); letter-spacing: -.02em; color: var(--accent); }
.ref__books { display: flex; align-items: flex-end; gap: 6px; height: 104px; margin-bottom: auto; padding-bottom: var(--s4); }
.ref__books i { display: block; width: 30px; padding: 10px 0; border-radius: 3px; writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: #fff; text-align: center; transition: transform 300ms var(--ease); }
.ref__books i:nth-child(1) { height: 94px; background: var(--accent); }
.ref__books i:nth-child(2) { height: 80px; background: #2B2F36; }
.ref__books i:nth-child(3) { height: 88px; background: #A88653; }
.ref:hover .ref__books i:nth-child(3) { transform: rotate(186deg) translateX(-4px); }
@media (min-width: 640px) { .duo__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .duo { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } .duo .cluster + .cluster { border-top: 0; } }

/* ---------- 10. Компоненты статей базы знаний (перенос 24 материалов, 01.10.2026) ----------
   Старые классы статей сведены к нескольким компонентам: врезка, код, формула, цифры,
   пример «проигрывает / выживает», граф триплетов, связанные материалы и три виджета. */
.callout:not(:where(.tool__app *)) { padding: var(--s4) var(--s5); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r) var(--r) 0; font-size: var(--t-small); line-height: 1.6; }
.callout:not(:where(.tool__app *)) > * + * { margin-top: .7em; }
.callout__t { display: block; font-weight: 700; color: var(--ink); }
.callout--quiet { border-left-color: var(--line-2); background: var(--surface); }
.prose .callout a { font-weight: 600; }

.code { margin: 0; padding: var(--s4); overflow-x: auto; background: var(--ink); color: #E8E7E2; border-radius: var(--r); font: 400 .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.code code { font: inherit; white-space: pre; }
/* Подсветка: c-c комментарий, c-k ключ, c-v значение (не путать с виджетом .ck) */
.code .c-c { color: #8E9AAF; } .code .c-k { color: var(--accent-on-ink); } .code .c-v { color: #E6C98F; }
.prose :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--sunk); font: .875em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.formula:not(:where(.tool__app *)) { padding: var(--s4) var(--s5); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.stats:not(:where(.tool__app *)) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); padding-block: var(--s5); border-block: 1px solid var(--line-2); }
.stats:not(:where(.tool__app *)) b { display: block; font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats:not(:where(.tool__app *)) span { display: block; margin-top: var(--s1); font-size: var(--t-meta); color: var(--ink-2); line-height: 1.35; }
@media (min-width: 720px) { .stats:not(:where(.tool__app *)) { grid-template-columns: repeat(4, 1fr); } }

.ex { padding: var(--s4) var(--s5); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-small); }
.ex__t { display: block; margin-bottom: var(--s2); font-weight: 700; }
.ex--bad .ex__t { color: #A2362B; } .ex--good .ex__t { color: var(--ok); }
.ex--good { border-color: rgb(30 123 79 / .35); }
.tbl td.bad { color: #A2362B; }

.triplets { display: grid; gap: var(--s3); }
.triplets > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.triplets .node { padding: 6px var(--s3); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-weight: 600; font-size: var(--t-small); }
.triplets .edge-label { color: var(--accent); font-size: var(--t-meta); font-weight: 600; }
.triplets .edge-label::before { content: "→ "; } .triplets .edge-label::after { content: " →"; }

.related { margin-top: var(--s7); }
.related__t { font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); }
.related ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); font-size: var(--t-small); }
.related a { color: var(--accent); }

/* Виджеты статей: чек-лист карточки, проверка текста, калькулятор воронки */
.ck, .rc, .fc { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
.ck-h { font-weight: 700; margin: var(--s5) 0 var(--s2); } .ck-h:first-child { margin-top: 0; }
.ck label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid var(--line); cursor: pointer; line-height: 1.5; }
.ck input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.ck-bar { height: 8px; background: var(--sunk); border-radius: 8px; overflow: hidden; margin: var(--s2) 0; }
.ck-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.ck-out, .fc-out { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--ink); color: #E8E7E2; font-size: var(--t-small); line-height: 1.6; }
.ck-out b, .fc-out b { color: #fff; }
.ck-out textarea { width: 100%; min-height: 110px; margin-top: var(--s2); padding: var(--s3); background: #000; color: var(--accent-on-ink); border: 1px solid #333; border-radius: 6px; font: .8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ck-btn { margin-top: var(--s2); padding: var(--s2) var(--s4); border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: 600 var(--t-meta) var(--f-sans); cursor: pointer; }
.rc textarea { width: 100%; min-height: 150px; padding: var(--s3); border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); font: inherit; }
.rc-count { margin: var(--s2) 0 var(--s3); color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.rc ul { list-style: none; padding: 0; margin: 0; }
.rc li { padding: var(--s2) var(--s3); border-radius: 6px; line-height: 1.5; }
.rc li + li { margin-top: var(--s2); }
.rc .ok { background: #EAF4EE; } .rc .warn { background: #FBF1DE; } .rc .bad { background: #FBE9E6; }
.fc table { width: 100%; border-collapse: collapse; }
.fc td, .fc th { padding: var(--s2); text-align: left; border-bottom: 1px solid var(--line); }
.fc table { table-layout: fixed; }
.fc input { width: 100%; max-width: 140px; padding: 6px var(--s2); border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }
@media (max-width: 599.98px) { .fc { padding: var(--s4); } .fc td, .fc th { padding: var(--s2) var(--s1); } .fc th { font-size: var(--t-meta); } .fc td:first-child { width: 38%; } }
.data { padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
.tbl .col-method { font: .8125rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); }
.tbl small { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-meta); }

/* Словарь: указатель терминов под заголовком и карточки терминов */
.gl-index { display: grid; gap: var(--s5); margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
@media (min-width: 600px) { .gl-index { grid-template-columns: 1fr 1fr; } }
.gl-index__t { font-weight: 700; } .gl-index__t a { color: var(--ink); }
.gl-index ul { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: var(--s1); }
.gl-index ul a { color: var(--accent); }
.gl-part { scroll-margin-top: calc(var(--bar-h) + 24px); }
.gl .term { padding-block: var(--s5); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 24px); }
.gl .term > * + * { margin-top: .7em; }
.gl .term h3 { font-size: var(--t-h3); }
.term__rel { font-size: var(--t-small); color: var(--ink-2); }

/* Библиотека: полка карточек, обложки в фирменной палитре по темам */
.lib { padding-bottom: var(--s8); }
.lib__head { max-width: var(--measure); }
.lib__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.shelf { display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 720px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .shelf { grid-template-columns: repeat(3, 1fr); } }
.book { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.book[hidden] { display: none; }
.book__cover { display: flex; align-items: flex-end; height: 136px; padding: var(--s2); border-radius: 3px 6px 6px 3px; color: #fff; box-shadow: inset 6px 0 0 rgb(0 0 0 / .18), var(--shadow-sm); }
.book__cover--seo { background: var(--accent); } .book__cover--strategy { background: #2B2F36; }
.book__cover--psychology { background: #7A5F35; } .book__cover--logic { background: var(--ink); }
.book__spine { font-size: .75rem; font-weight: 700; line-height: 1.25; }
.book__badge { font-size: var(--t-meta); font-weight: 600; color: var(--accent); }
.book h2 { margin-top: var(--s1); font-size: var(--t-h3); line-height: 1.25; }
.book__author { margin-top: var(--s1); font-size: var(--t-small); color: var(--ink-2); }
.book__insight { grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.book__insight b { color: var(--ink); }
.lib__foot { max-width: var(--measure); }

/* Живые данные: метка «обновляется» (статичная точка, без пульса), лента событий, таблица ботов */
.meta--live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.badge { display: inline-block; padding: 2px var(--s2); border-radius: 999px; background: var(--sunk); color: var(--ink-2); font-size: .75rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge + .badge { margin-left: var(--s1); }
.s-google, .b-agent, .b-hybrid { background: var(--accent-soft); color: var(--accent); }
.s-yandex, .b-training { background: #FBE9E6; color: #A2362B; }
.s-ai { background: var(--ink); color: #fff; }
.s-bing, .b-search { background: #EAF4EE; color: var(--ok); }
.s-ddg { background: #FBF1DE; color: var(--live); }
.new-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: .6875rem; font-weight: 700; vertical-align: middle; }
.seen-fresh { color: var(--ok); font-weight: 600; } .seen-stale { color: var(--live); } .seen-old, .seen-none, .seen-ok { color: var(--ink-2); }
.feed { margin-top: var(--s5); border-left: 2px solid var(--line-2); }
.ev { position: relative; padding: 0 0 var(--s6) var(--s5); }
.ev[hidden] { display: none; }
.ev::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.ev > * + * { margin-top: var(--s2); }
.ev .d { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev .t { font-weight: 700; font-size: var(--t-h3); line-height: 1.3; }
.ev .cm { padding: var(--s2) var(--s3); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 6px 6px 0; font-size: var(--t-small); }
.ev .src-link { font-size: var(--t-meta); }
/* Широкая таблица (6 колонок): на планшете и десктопе прокручивается внутри колонки текста */
@media (min-width: 600px) { .tbl-scroll { overflow-x: auto; } .tbl--wide { min-width: 760px; } }

/* ---------- 11. Услуги: шапка с действием, разделы с правилом над H2, шаги, карточки форматов ---------- */
.svc { padding-bottom: var(--s8); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.svc__main { min-width: 0; max-width: var(--measure); }
.svc__aside { display: none; }
@media (min-width: 1100px) {
  .svc__grid { grid-template-columns: minmax(0, var(--measure)) 17rem; justify-content: center; }
  .svc__aside { display: block; padding-top: var(--s7); }
  .svc__aside > div { position: sticky; top: calc(var(--bar-h) + var(--s5)); }
}
.svc__head { padding-top: var(--s5); }
.svc__head h1 { margin-block: var(--s4) var(--s5); font-size: var(--t-h1); letter-spacing: -.03em; line-height: 1.12; }
.svc__head h1 .text-accent { color: var(--accent); }
.svc__head .abstract { font: 400 var(--t-lead)/1.65 var(--f-serif); }
.svc__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 599.98px) { .svc__cta .btn { flex: 1 1 0; padding-inline: var(--s3); } }
.svc-sec { margin-top: var(--s8); font-size: var(--t-body); line-height: 1.7; }
.svc-sec > * + * { margin-top: 1.1em; }
.svc-sec h2 { font-size: var(--t-h2); line-height: 1.2; }
.svc-sec h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: var(--s4); background: var(--accent); }
.svc-sec h3 { font-size: var(--t-h3); line-height: 1.3; }
.svc-sec a:not(.btn):not(.go) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.checks { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.svc-steps { list-style: none; padding: 0; counter-reset: st; display: grid; gap: var(--s6); }
.svc-steps > li { counter-increment: st; position: relative; padding-left: 52px; }
.svc-steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%); }
.svc-steps > li > * + * { margin-top: .8em; }
.svc-cards { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
.svc-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.svc-card h3 a { color: var(--ink) !important; text-decoration: none !important; }
.svc-card h3 a:hover { color: var(--accent) !important; }
.svc-card p { font-size: var(--t-small); color: var(--ink-2); }
.svc-card .go { margin-top: auto; font-size: var(--t-small); }
.svc-toc { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.svc-toc__t { font-weight: 700; }
.svc-toc ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); font-size: var(--t-small); }
.svc-when { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .svc-when { grid-template-columns: 1fr 1fr; } }
.svc-when ul { padding-left: 1.2em; margin-top: var(--s2); }
.svc-when li + li { margin-top: var(--s2); }
.svc-not { padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--sunk); }
.go--back::after { display: none; }
.svc .author-card { margin-top: var(--s8); }

/* ---------- 12. Кейсы: цифры с источником, схемы, график из Метрики, каталог проектов ---------- */
.case-stats { margin-top: var(--s6); }
@media (min-width: 720px) { .case-stats { grid-template-columns: repeat(3, 1fr); } }
.case-stats b { color: var(--ink); }
.stats-src { margin-top: var(--s2); font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
.stats-src a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.case-visit { margin-top: var(--s5); }
.flowline ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.flowline li { padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-weight: 600; font-size: var(--t-small); }
.flowline li small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-meta); }
.flowline li + li::before { content: "→"; margin-right: var(--s2); color: var(--accent); }
.flowline li + li { display: flex; align-items: center; }
.flowline figcaption, .silo figcaption { margin-top: var(--s2); font-size: var(--t-meta); color: var(--ink-3); }
.silo { padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
.silo figcaption { margin: 0 0 var(--s3); }
.silo ul { list-style: none; padding-left: var(--s5); border-left: 1px solid var(--line-2); margin: var(--s2) 0 0; }
.silo > ul { padding-left: 0; border: 0; margin: 0; }
.silo li + li { margin-top: var(--s2); }
.stack { display: grid; gap: var(--s1); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--t-small); }
.stack div { display: flex; gap: var(--s3); } .stack dt { font-weight: 700; min-width: 6.5rem; } .stack dd { margin: 0; color: var(--ink-2); }
.case-chart { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.case-chart figcaption { margin-top: var(--s3); font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
@media (min-width: 900px) { .doc .case-chart .chart--narrow { display: block; } .doc .case-chart .chart--wide { display: none; } }
.cases { padding-bottom: var(--s8); }
.cases__head { max-width: var(--measure); }
.cases__grid { display: grid; gap: var(--s4); margin-top: var(--s7); }
@media (min-width: 720px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cases__grid { grid-template-columns: repeat(3, 1fr); } }
.case-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.case-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.case-card__tags { font-size: var(--t-meta); font-weight: 600; color: var(--accent); }
.case-card h2 { font-size: var(--t-h3); line-height: 1.3; }
.case-card p:not([class]) { font-size: var(--t-small); color: var(--ink-2); }
.case-card__num { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.case-card__num b { display: block; font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.case-card__num span { display: block; margin-top: var(--s1); font-size: var(--t-meta); color: var(--ink-2); }
.cases__src { max-width: var(--measure); margin-top: var(--s5); }

/* ---------- 13. Инструменты: шапка, виджет как есть, текст статьи под ним ----------
   Стили виджета живут в файле страницы и изолированы префиксом .tool__app.
   Общие компоненты (.btn, .callout, .menu, .note, .row, .field, .formula, .stats, .muted)
   выше ограничены :not(:where(.tool__app *)) — внутри виджета их не видно. */
main.tp { padding-bottom: var(--s8); }  /* было main.tool: класс совпадал с карточкой каталога .tool, страница получала её рамку, overflow:hidden и подъём при наведении */
.tool__head { max-width: var(--measure); }
.tool__head .meta a { color: var(--accent); }
.tool__head > :not(.meta):not(h1):not(.abstract) { margin-top: var(--s4); font-size: var(--t-small); }
.tool__app { max-width: 60rem; margin-top: var(--s7); font-size: 1rem; line-height: 1.6; }
.tool__app :is(label, .lbl) { text-transform: none !important; letter-spacing: normal !important; }
.tool__text { max-width: var(--measure); margin-top: var(--s8); }
.tool__text .prose { margin-top: 0; }
.tool__text .author-card { margin-top: var(--s8); }
.author-card__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
/* Каталог инструментов, версия 3: ритм хаба базы знаний — шапка с цифрами, маршруты по задачам,
   липкие разделы, главный калькулятор крупно, белая поверхность, тёмная пауза, пара разделов, вопросы */
.tool__t { display: block; margin-top: var(--s1); font-size: 1.0625rem; font-weight: 650; line-height: 1.35; transition: color var(--dur); }
.tool:hover .tool__t { color: var(--accent); }
.tool__out span { margin-left: .75em; font-weight: 600; }
.tool__ui .tool__row + .tool__code { margin-top: 10px; }
.tool__ui .tool__code { padding: 8px; border-radius: 4px; background: var(--accent-soft); color: var(--ink-2); }
.tool__ui--qr { display: flex; align-items: center; gap: var(--s4); color: var(--ink); }
.tool__ui--qr svg { flex: none; }
.tool__qr-meta { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.cluster--surface .tool { background: var(--bg); }

/* 1. Главный калькулятор со срезанным углом + два рядом */
.kit { display: grid; gap: var(--s4); }
.kit__hero-in { display: grid; gap: var(--s5); height: 100%; padding: var(--s6) var(--s5); background: var(--surface); }
.kit__hero-body { display: flex; flex-direction: column; gap: var(--s3); }
.kit__hero .tile__t { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.kit__hero:hover .tile__t { color: var(--accent); }
.kit__hero .go { margin-top: auto; }
.kit__ui { margin: 0; align-self: center; font-size: .875rem; }
@media (min-width: 640px) { .kit:not(.kit--ink) { grid-template-columns: 1fr 1fr; } .kit__hero { grid-column: 1 / -1; } }
@media (min-width: 768px) { .kit__hero-in { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Десктоп: главный калькулятор слева на две строки, два других справа — превью слева, текст справа */
@media (min-width: 1100px) {
  .kit:not(.kit--ink) { grid-template-columns: 1.1fr 1fr; }
  .kit__hero { grid-column: 1; grid-row: span 2; --cut: 40px; }
  .kit__hero-in { grid-template-columns: 1fr; align-content: space-between; padding: var(--s7); }
  .kit__ui { align-self: end; max-width: 26rem; }
  .kit > .tool { flex-direction: row; align-items: center; }
  .kit > .tool .tool__ui { flex: 0 0 13.5rem; margin: var(--s4) 0 var(--s4) var(--s4); }
}

/* 3. SEO и ИИ-поиск на тёмной паузе: чеклист крупно, генераторы с кусочком результата */
.gen { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r); background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .12); color: #F2F1EC; transition: transform 260ms var(--ease), border-color var(--dur); }
.gen:hover { transform: translateY(-3px); border-color: var(--accent-on-ink); }
.gen .meta { color: rgb(242 241 236 / .6); }
.gen .tool__t { margin-top: 0; color: #fff; }
.gen:hover .tool__t { color: var(--accent-on-ink); }
.gen p { font-size: var(--t-small); line-height: 1.5; color: rgb(242 241 236 / .72); }
.gen .tile__code { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); }
.gen--lead { padding: var(--s6) var(--s5); background: rgb(141 176 242 / .07); border-color: rgb(141 176 242 / .24); }
.gen--lead .tool__t { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.gen__check { display: grid; gap: 6px; margin-top: var(--s3); font-size: var(--t-small); }
.gen__check li { position: relative; display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 10px 7px 32px; border: 1px solid rgb(255 255 255 / .1); border-radius: 4px; color: rgb(242 241 236 / .82); }
.gen__check li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid var(--accent-on-ink); border-radius: 3px; }
.gen__check li.is-done::before { background: var(--accent-on-ink); }
.gen__check b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.gen__out { margin-top: var(--s2); padding: 8px 10px; border-radius: 4px; background: rgb(141 176 242 / .16); color: var(--accent-on-ink); font-size: var(--t-small); font-weight: 700; }
.gen .go { margin-top: auto; padding-top: var(--s3); color: var(--accent-on-ink); }
@media (min-width: 640px) { .kit--ink { grid-template-columns: 1fr 1fr; } .gen--lead { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .kit--ink { grid-template-columns: 1.2fr 1fr 1fr; } .gen--lead { grid-column: 1; grid-row: span 2; } }

/* 4. Предложить инструмент: карточка-справка, как «Словарь» в базе знаний */
.ref--idea .ref__glyph { font-family: var(--f-sans); font-weight: 300; }
@media (min-width: 1100px) { .duo--wide { grid-template-columns: 1.5fr 1fr; } }

/* 5. Текст и вопросы: заголовок слева закреплён, ответы справа */
.tools-faq__in { display: grid; gap: var(--s5); }
.tools-faq .cluster__head { display: block; margin-bottom: 0; }
.tools-faq .prose { margin-top: 0; }
.tools-faq__q { margin: var(--s7) 0 var(--s3); font-size: var(--t-h3); }
.faq .a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .tools-faq__in { grid-template-columns: 1fr 1.5fr; gap: var(--s8); }
  .tools-faq__head { position: sticky; top: calc(var(--bar-h) + var(--s5)); align-self: start; }
}

/* ---------- 14. «Обо мне» (версия 3: ритм хаба) и 404 ---------- */
.about-hero { display: grid; gap: var(--s7); padding-block: var(--s5) var(--s7); align-items: center; }
.about-hero h1 { margin-top: var(--s4); font-size: var(--t-display); letter-spacing: -.04em; line-height: 1.02; font-weight: 800; }
.about-hero__lead { margin-top: var(--s4); font: 400 var(--t-lead)/1.5 var(--f-serif); }
.about-hero__tags { margin-top: var(--s4); font-size: var(--t-small); font-weight: 600; color: var(--accent); }
.about-hero .spec-sheet { max-width: 40rem; }
.spec-sheet b small { font-size: .6em; margin-left: .05em; }
.about-hero__photo { max-width: 420px; }
.about-hero__stage { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .about-hero { grid-template-columns: 1fr 400px; gap: var(--s8); }
  .about-hero__photo { --cut: 40px; }
  .about-hero__stage { aspect-ratio: 4 / 5; }
}
.about-case__tags { font-size: var(--t-meta); font-weight: 600; color: var(--accent); }

/* Биография: заголовок закреплён слева, первый абзац — серифное утверждение */
.about-bio { display: grid; gap: var(--s5); }
.about-bio .cluster__head { display: block; margin-bottom: 0; }
.about-bio__text { margin-top: 0; max-width: var(--measure); }
.about-bio__text > p:first-child { font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.5 var(--f-serif); letter-spacing: -.01em; }
@media (min-width: 1024px) {
  .about-bio { grid-template-columns: 1fr 1.6fr; gap: var(--s8); }
  .about-bio__head { position: sticky; top: calc(var(--bar-h) + var(--s5)); align-self: start; }
}

/* Проекты: свежий кейс крупно со срезанным углом, два рядом; большая цифра — из текста кейса */
.proj { display: grid; gap: var(--s4); }
.proj__in, .proj__card article { display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s5); background: var(--bg); }
.proj__in { padding: var(--s6) var(--s5); }
.proj__card article { border: 1px solid var(--line); border-radius: var(--r); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color var(--dur); }
.proj__card:hover article { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.proj__num { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.proj__num small { font-size: .5em; margin-left: .05em; }
.proj__hero .tile__t { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.proj a:hover .tile__t { color: var(--accent); }
.proj p:not([class]) { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
.proj p b, .proj p strong { color: var(--ink); font-weight: 650; }
.proj code { padding: 1px 5px; border-radius: 4px; background: var(--sunk); font: .875em ui-monospace, SFMono-Regular, Menlo, monospace; }
.proj .go { margin-top: auto; padding-top: var(--s2); }
@media (min-width: 768px) { .proj { grid-template-columns: 1fr 1fr; } .proj__hero { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .proj { grid-template-columns: 1.4fr 1fr 1fr; } .proj__hero { grid-column: auto; --cut: 40px; } .proj__in { padding: var(--s7) var(--s6); } }

/* Опыт: тёмная пауза, линия по годам (компонент .flow с главной) */
.about-flow { margin-top: 0; }
.about-flow .about-flow__co { margin-top: var(--s1); font-weight: 600; color: rgb(242 241 236 / .9); }
.about-flow .about-flow__key { margin-top: var(--s3); }
.about-flow__key a { color: var(--accent-on-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Образование и документы */
.edu:hover { transform: none; box-shadow: none; }
.edu .ref__glyph { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); }
.edu__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); margin: var(--s2) 0 0; font-size: var(--t-small); }
.edu__dl dt { color: var(--ink-3); }
.edu__dl dd { margin: 0; }
.docs { border-top: 1px solid var(--line); }
.docs li > * { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--s1); border-bottom: 1px solid var(--line); }
.docs b { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.docs div b { font-weight: 500; color: var(--ink-2); }
.docs a:hover b { color: var(--accent); }
.docs__tag { flex: none; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--accent); font-size: .75rem; font-weight: 700; }

.nf-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nf-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.nf-card p { font-size: var(--t-small); color: var(--ink-2); }
.nf-card .go { margin-top: auto; padding-top: var(--s3); font-size: var(--t-small); }
.nf { padding-bottom: var(--s8); }
.nf__head { max-width: var(--measure); }
.nf__head code { padding: 1px 6px; border-radius: 4px; background: var(--sunk); font: .875em ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.nf__routes { display: grid; gap: var(--s4); margin-top: var(--s7); }
@media (min-width: 640px) { .nf__routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .nf__routes { grid-template-columns: repeat(4, 1fr); } }
.nf__routes h2 { font-size: var(--t-h3); }
.nf__more { margin-top: var(--s6); color: var(--ink-2); }
.nf__more a { color: var(--accent); text-decoration: underline; }

/* ---------- 15. Рабочее место инструмента (02.10.2026, пилот: калькулятор ER) ----------
   Телефон: короткая шапка, лист на всю ширину экрана, поля по два в ряд, итог в липкой
   плашке снизу, пока сам блок результатов за пределами экрана. Компьютер: ввод слева,
   результат справа и прилипает. Поля принимают выражения: 15+12+12, 1,2К, столбец из таблицы. */
.tp__head { max-width: var(--measure); padding-top: var(--s2); }
.tp__head .meta a { color: var(--accent); }
.tp__head .meta { display: none; gap: var(--s4); }  /* на телефоне дублирует крошки */
.tp__head h1 { margin-top: var(--s2); font-size: var(--t-h1); font-weight: 800; letter-spacing: -.035em; }
.tp__lede { margin-top: var(--s3); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.tp__lede kbd { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); font: 600 .875rem var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ink); }

.ws { margin-top: var(--s5); margin-inline: calc(var(--gutter) * -1); padding: var(--s4) var(--gutter) var(--s6); background: var(--surface); border-block: 1px solid var(--line); }
.ws [hidden] { display: none !important; }
.seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 10px; background: var(--sunk); }
.seg button { min-height: 40px; padding: 4px 6px; line-height: 1.15; overflow-wrap: anywhere; border-radius: 7px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(18 19 20 / .08), 0 2px 8px rgb(18 19 20 / .06); }

.ws__group { margin: var(--s5) 0 0; padding: 0; border: 0; min-width: 0; }
.ws__group > legend { padding: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.ws__group > legend span { margin-left: var(--s2); font-size: var(--t-meta); font-weight: 500; color: var(--ink-3); }
.ws__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.ws__grid--1 { grid-template-columns: 1fr; }

.xf { min-width: 0; }
.xf__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.xf label { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.xf__echo { overflow: hidden; font-size: .8125rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.xf.is-bad .xf__echo { color: #B3261E; font-weight: 600; }
.xf__box { position: relative; margin-top: 6px; }
.xf input, .xf textarea { width: 100%; min-width: 0; height: 52px; padding: 0 50px 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 600 1.125rem/1 var(--f-sans); font-variant-numeric: tabular-nums; transition: border-color var(--dur), box-shadow var(--dur); }
.xf input::placeholder, .xf textarea::placeholder { color: #A3A09A; font-weight: 500; }
.xf input:focus, .xf textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.xf.is-bad input { border-color: #B3261E; }
.xf input:not([data-x]) { padding-right: 14px; font-weight: 500; font-size: 1.0625rem; }
.xf label .meta { margin-left: 4px; font-weight: 500; }
.xf__plus { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 1.375rem; font-weight: 600; line-height: 40px; text-align: center; transition: background var(--dur); }
.xf__plus:hover { background: #D5E1F4; }
.xf__hint { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }

.ws__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line-2); font-size: var(--t-meta); color: var(--ink-2); }
.ws__sum b { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ws__more { margin-top: var(--s5); }
.ws__more > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--accent); }
.ws__more > summary::-webkit-details-marker { display: none; }
.ws__more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur); }
.ws__more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ws__more > summary span { font-weight: 500; color: var(--ink-3); }

.ws__out { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.ws__out-h { font-size: 1rem; font-weight: 700; }
.res { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.res__card { min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.res__card--main { grid-column: 1 / -1; padding: var(--s5); border: 0; background: var(--accent-soft); }
.res__lbl { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.res__val { margin-top: 2px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.res__card--main .res__val { font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); color: var(--accent); }
.res__val.is-empty { color: #A3A09A; }
.res__band { display: flex; align-items: center; overflow-wrap: anywhere; gap: 6px; margin-top: var(--s2); font-size: var(--t-meta); font-weight: 600; line-height: 1.35; color: var(--ink-3); }
.res__band::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.res__band:empty { display: none; }
.res__band[data-tone="ok"] { color: #1E7B4F; }
.res__band[data-tone="mid"] { color: #8A5300; }
.res__band[data-tone="low"] { color: #B3261E; }
.res__band[data-tone="wait"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.res__f { margin-top: var(--s2); font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.res__alias { margin-top: var(--s1); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.res__alias b { font-weight: 700; }
.res__mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); }
.res__mini > div { min-width: 0; padding: var(--s3); }
.res__mini > div + div { border-left: 1px solid var(--line); }
.res__mini .res__val { font-size: 1.25rem; }
.res__mini .res__lbl { font-size: .8125rem; }

.ws__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.ws__acts .btn { flex: 1 1 auto; min-height: 44px; padding: 0 var(--s4); font-size: .9375rem; }
.ws__acts .btn--ghost { color: var(--ink-2); }
.ws__acts .btn--ghost:hover { color: var(--accent); }
.ws__note { margin-top: var(--s3); font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }

/* Несколько постов: таблица строк с выражениями и ERR каждого поста */
.pr-head, .pr { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 54px 32px; gap: var(--s2); align-items: center; }
.pr-head { margin-top: var(--s3); font-size: .75rem; letter-spacing: -.01em; font-weight: 600; color: var(--ink-3); }
.pr { margin-top: var(--s2); }
.pr__n { font-size: .8125rem; font-weight: 600; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.pr .xf input { height: 44px; padding: 0 10px; font-size: 1rem; }
.pr__err { font-size: .875rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pr.is-best .pr__err { color: var(--accent); }
.pr__del { width: 32px; height: 44px; border-radius: 6px; color: var(--ink-3); font-size: 1.25rem; }
.pr__del:hover { color: #B3261E; background: #FBEDEC; }
.pr-add { margin-top: var(--s3); }
.paste { margin-top: var(--s4); }
.paste textarea { display: block; width: 100%; min-height: 112px; margin-top: 6px; padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg); font: 500 .9375rem/1.5 var(--f-sans); font-variant-numeric: tabular-nums; resize: vertical; }
.paste textarea:focus { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.bars { grid-column: 1 / -1; position: relative; display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: var(--s2); padding-top: var(--s2); border-bottom: 1px solid var(--line-2); }
.bars i { flex: 1 1 0; max-width: 28px; min-height: 2px; border-radius: 3px 3px 0 0; background: #B9CBE8; }
.bars i.is-best { background: var(--accent); }
.bars__med { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink-2); }
.bars__med span { position: absolute; right: 0; bottom: 2px; padding: 0 4px; background: var(--surface); font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.bars-cap { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-3); }

/* Сравнение аккаунтов: карточка ввода и рейтинг с полосой ER */
.acc { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.acc__top { display: flex; align-items: center; gap: var(--s2); }
.acc__n { flex: none; width: 22px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.acc__name { flex: 1; min-width: 0; height: 40px; padding: 0 var(--s2); border: 0; border-bottom: 1px dashed var(--line-2); background: transparent; font: 700 1rem var(--f-sans); color: var(--ink); }
.acc__name:focus { outline: none; border-bottom: 1.5px solid var(--accent); }
.acc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .6fr); gap: var(--s2); margin-top: var(--s2); }
.acc .xf input { height: 44px; padding: 0 10px; font-size: 1rem; }
.acc .xf label { font-size: .75rem; }
.acc .xf__top { display: block; }
.acc .xf__echo { display: block; min-height: 1.35em; font-size: .75rem; line-height: 1.35; }
.rank { display: grid; margin-top: var(--s2); }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.rank__pos { font-size: .8125rem; font-weight: 600; color: var(--ink-3); text-align: right; }
.rank__name { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.rank__val { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rank li:first-child .rank__val { color: var(--accent); }
.rank__bar { grid-column: 2 / -1; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.rank__bar i { display: block; height: 100%; border-radius: 3px; background: #B9CBE8; }
.rank li:first-child .rank__bar i { background: var(--accent); }
.rank__meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); font-size: .8125rem; color: var(--ink-3); }
.rank__meta .res__band { margin-top: 0; font-size: .8125rem; }
.rank__empty { padding: var(--s3) 0; font-size: var(--t-small); color: var(--ink-3); }

/* Генераторы: выбор канала чипами, вывод ссылки и кода с копированием */
.chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chan button { min-height: 44px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: border-color var(--dur), background var(--dur), color var(--dur); }
.chan button:hover { border-color: var(--ink); color: var(--ink); }
.chan button[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.chan [data-ch="share"] { grid-column: 1 / -1; }  /* седьмая кнопка — отдельная задача, на телефоне на всю ширину */
.seg--sm { margin-top: var(--s3); }
.seg--sm button { min-height: 36px; font-size: .875rem; }
.tbl-formats code { font-size: .8125rem; overflow-wrap: anywhere; }
.lo { margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lo__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 6px 6px 6px 12px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.lo__h button { min-height: 36px; padding: 0 12px; border-radius: 6px; background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 600; }
.lo__h button:hover { background: #003A8C; }
.lo__h button.is-done { background: #1E7B4F; }
.lo code { display: block; padding: 12px; font: 500 .875rem/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.lo code.is-empty { color: #A3A09A; }
.ws__note:empty { display: none; }
.ws__note--warn { color: #8A5300; }

/* Липкая плашка итога на телефоне: видна, пока лист в кадре, а блок результатов нет */
.dock { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--s3); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(18 19 20 / .08); transform: translateY(110%); transition: transform 240ms var(--ease); }
.dock.is-on { transform: none; }
.dock__m { display: flex; flex: 1; gap: var(--s4); min-width: 0; }
.dock__m div { min-width: 0; }
.dock__m span { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.dock__m b { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock__m div:first-child b { color: var(--accent); }
.dock__m b.dock__url { overflow: hidden; font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; }
.dock .btn { min-height: 44px; padding: 0 var(--s4); font-size: .9375rem; }

.tp .tool__text { margin-top: var(--s7); }
.ws--app { padding-top: var(--s5); }
.ws--app > .tool__app { max-width: none; margin-top: 0; }
.tp__head > :not(.meta):not(h1):not(.tp__lede) { margin-top: var(--s3); font-size: var(--t-small); }
@media (max-width: 899px) {
  /* Старые виджеты внутри листа: отступы панелей 22–30px съедали ширину телефона */
  .ws--app .tool__app :is(.panel, .group, .cat, .result, .utm-builder, .result-box) { padding: var(--s4); }
  .ws--app .tool__app :is(.panel, .utm-builder) { padding: 0; border: 0; background: none; box-shadow: none; }
  .ws--app .tool__app .panel + .panel { padding-top: var(--s5); border-top: 1px solid var(--line); border-radius: 0; }
  .ws--app .tool__app :is(.grid, .builder, .calc) > * { min-width: 0; }
  .ws--app .tool__app :is(input, select, textarea) { min-width: 0; max-width: 100%; }
}
.tp__about { color: var(--ink-2); }

@media (min-width: 900px) {
  .tp__head .meta { display: flex; }
  .chan { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .chan [data-ch="share"] { grid-column: auto; }
  .ws { max-width: 68rem; margin: var(--s6) 0 0; padding: var(--s5) var(--s6) var(--s6); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
  .seg { max-width: 26rem; }
  .ws__mode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--s7); align-items: start; }
  .ws__out { position: sticky; top: var(--s5); margin-top: var(--s5); padding-top: 0; border-top: 0; transition: top 260ms var(--ease); }
  body.bar-shown .ws__out { top: calc(var(--bar-h) + var(--s5)); }
  .dock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dock, .seg button { transition: none; } }

/* =====================================================================
   Слой живого сайта (добавляется только в inc/base3.css при экспорте)
   ===================================================================== */
/* Порядок кода «контент → шапка» (см. inc/header.php): шапка и крошки стоят
   в HTML после </main>, наверх экрана их ставит CSS. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > * { flex: none; }
body > .skip { order: -4; }
body > .bar { order: -3; }
body > .np-breadcrumbs { order: -2; }

/* Хлебные крошки из np_breadcrumbs() (inc/config.php) */
.np-breadcrumbs { padding-top: var(--s5); }
.np-breadcrumbs .site-wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.np-bc { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; margin: 0; padding: 0; font-size: var(--t-meta); color: var(--ink-3); }
.np-bc__item + .np-bc__item::before { content: "/"; margin-right: var(--s2); color: var(--line-2); }
.np-bc a { color: var(--ink-2); }
.np-bc a:hover { color: var(--accent); text-decoration: underline; }
.np-bc [aria-current] { color: var(--ink); }
.doc .np-breadcrumbs, .np-breadcrumbs + main .crumbs { display: none; }