/* Кейс-история (R510): разделы, схемы и снимки вместо сплошного текста.

   Первый такой кейс — «Цифра». Разметка — parts/story/, данные —
   inc/stories/. Здесь только то, чего нет в общих блоках: звено (.box),
   ряд, кнопка, плашка и цитата берутся из base.css и components.css.

   Язык схем — тот же, что у «Системы» (DESIGN.md → Components):
   звено в рамке, тонкая ортогональная связка между звеньями, главное
   залито акцентом, стрелка только там, где путь переносится на новый
   ряд или идёт на новый круг. Красного и зелёного нет: исход развилки
   подписан словами, риск — типом рамки и шкалой из квадратов. */

/* Строки внутри звена — абзацы, а отступы у звена свои: без сброса
   браузерные поля абзаца раздували звено, и в карте подпись входа
   вылезала за рамку фиксированной высоты. Сброс в :where() — без веса,
   чтобы отступы отдельных подписей ниже его перебивали. */
:where(.st .box) p { margin: 0; }
:where(.st .box) p + p { margin-top: var(--s1); }
/* Пояснение на залитом звене — полным цветом: с прозрачностью из base.css
   на светлом акценте чёрного поля контраст падал ниже 4,5. */
.st .box--key .box__s { opacity: 1; }

/* ─── первый экран ─── */
.st-hero { padding: var(--s5) 0 var(--s7); }
.st-hero .c-crumbs { margin-bottom: var(--s7); }
.st-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.st-hero__sep { color: var(--line); }
.st-hero { --st-h1: clamp(46px, 5.2vw, 76px); }
/* Две трети на заявление: «мешает потребителю» должно встать в одну строку,
   при 7 : 4 ему не хватало четырёх пикселей и заголовок шёл в четыре строки. */
.st-hero__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s7);
  align-items: start; }
.st-hero__client { margin: 0 0 var(--s4); font-size: 20px; line-height: 1.4; color: var(--ink-2); }
.st-hero__h { max-width: 14em; }
.st-hero__lead { margin: var(--s5) 0 0; max-width: 38em; }

/* Строки «ключ — значение», как у обычного кейса справа от текста.
   Верхняя линия — на высоте верха прописных первой строки заголовка (R511):
   у Oswald с интерлиньяжем 1,06 верх прописной ниже верха строки
   на 0,17 кегля. Число проверено замером в браузере. */
.st-facts { margin: calc(var(--st-h1) * var(--st-cap, .17)) 0 0;
  border-top: 1px solid var(--line); }
.st-facts__row { padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.st-facts__row dt { margin-bottom: var(--s1); }
.st-facts__row dd { margin: 0; font-size: 17px; line-height: 1.45; }

/* Путь покупателя звеньями. Реклама — фоновое звено, от неё путь идёт
   цельной связкой, а дальше каждая связка разорвана срезом в 45°. */
.st-path { list-style: none; margin: var(--s7) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.st-path__i { position: relative; display: flex; }
.st-path__box { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; padding: var(--s2) var(--s3); }
.st-path__box .box__t { font-size: 15px; }
.st-path__i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s4);
  border-top: 1px solid var(--ink); }
.st-path__i:nth-child(n+2):not(:last-child)::before { content: ""; position: absolute; z-index: 1;
  left: calc(100% + var(--s4) / 2 - 4px); top: calc(50% - 8px); width: 8px; height: 16px;
  background: var(--paper); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink);
  transform: skewX(-45deg); }

/* ─── строка разделов ───
   Липнет под шапкой сайта. Высоту шапки story.js кладёт в --st-top:
   после первого экрана шапка уплотняется, и строка поднимается за ней. */
.st-nav { position: sticky; top: var(--st-top, 0px); z-index: 20; background: var(--paper);
  border-bottom: 1px solid var(--hair); }
.st-nav__in { display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; }
.st-nav__in::-webkit-scrollbar { display: none; }
.st-nav__a { flex: none; display: flex; align-items: baseline; gap: var(--s1); padding: var(--s3) 0;
  margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  transition: color .15s ease-out, border-color .15s ease-out; }
.st-nav__n { color: var(--ink-2); }
.st-nav__a:hover, .st-nav__a:focus-visible { color: var(--ink); }
.st-nav__a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.st-nav__a[aria-current="true"] .st-nav__n { color: inherit; }

/* Якорь раздела опускается из-под шапки и строки разделов. */
.st-sec { scroll-margin-top: calc(var(--st-top, 72px) + 57px); }
.st-sec--white + .st-sec--white { border-top: 1px solid var(--hair); }

/* ─── шапка раздела ─── */
.st-head { margin-bottom: var(--s7); }
.st-head__k { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.st-head__n { color: var(--accent); }
.st-head__h { max-width: 20em; }
.st-head__intro { margin-top: var(--s5); max-width: 46em; }
.st-head__p { margin: 0; }
.st-head__p + .st-head__p { margin-top: var(--s3); }
/* Раздел со split: подпись над заголовком — своим рядом, а заголовок
   и текст справа — в одном ряду. Текст начинается по верху букв первой
   строки заголовка (R511): верх прописной Oswald — 0,17 кегля от верха
   строки, у абзаца 17/1,55 верх прописной — 7 px от верха строки. */
.st-head { --st-h2: clamp(34px, 3.2vw, 46px); }
.st-head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s7);
  grid-template-areas: "k ." "h i"; align-items: start; }
.st-head--split .st-head__t { display: contents; }
.st-head--split .st-head__k { grid-area: k; }
.st-head--split .st-head__h { grid-area: h; }
.st-head--split .st-head__intro { grid-area: i; max-width: none;
  margin-top: calc(var(--st-h2) * var(--st-cap, .17) - var(--st-cap-p, 7px)); }

/* Подпись над схемой — моноширинным, как выноска на слайде. */
.st-label { margin: 0 0 var(--s4); }

/* ─── ключевой абзац: акцентная линейка без фона и рамки ─── */
.st-key { margin-top: var(--s5); padding-left: var(--s4); border-left: 3px solid var(--accent); }
.st-key__l { margin-bottom: var(--s2); }
.st-key__t { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 400; }

/* ─── источники сходятся в итог ─── */
.st-merge { --n: 4; }
.st-merge__in { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s4); }
.st-merge__i { position: relative; }
.st-merge__k { margin-bottom: var(--s2); }
.st-merge__i .box__s { margin-top: var(--s2); }
.st-merge__i::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--s5);
  border-left: 1px solid var(--ink); }
/* Шина: от середины первого источника до середины последнего. */
.st-merge__bus { height: var(--s5); border-bottom: 1px solid var(--ink);
  margin: 0 calc((100% - (var(--n) - 1) * var(--s4)) / (2 * var(--n))); }
.st-merge__out { position: relative; max-width: 420px; margin: var(--s5) auto 0; text-align: center; }
.st-merge__out::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: var(--s5);
  border-left: 1px solid var(--ink); }

/* ─── наблюдение со снимком ─── */
.st-ev { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: center;
  padding: var(--s6); border: 1px solid var(--line); }
.st-ev__src { margin-bottom: var(--s3); }
.st-ev__h { margin: 0 0 var(--s4); }
.st-ev .t { margin: 0; }
.st-ev__sub { margin: var(--s4) 0 var(--s2); font-family: Oswald, sans-serif; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase; font-size: 15px; line-height: 1.2; }
.st-ev .st-ev__todo { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.st-ev__todo-l { display: block; margin-bottom: var(--s2); color: var(--accent); }

/* Снимок — лист в тонкой рамке; нажатие открывает его целиком (seo.js). */
.st-shot { margin: 0; }
.st-shot__btn { display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: #FFFFFF;
  cursor: zoom-in; transition: border-color .15s ease-out; }
.st-shot__btn:hover, .st-shot__btn:focus-visible { border-color: var(--accent); }
.st-shot__btn img { width: 100%; height: auto; }
.st-shot__cap { margin-top: var(--s2); }

/* ─── наблюдения без снимка, по два ─── */
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.st-card { display: flex; flex-direction: column; padding: var(--s6); border: 1px solid var(--line); }
.st-card .t { margin: 0; }
.st-card__go { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: auto; padding-top: var(--s4); font-size: 15px; color: var(--accent); }
.st-card__go svg { width: 16px; height: 16px; transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
.st-card__go:hover svg, .st-card__go:focus-visible svg { transform: translateX(4px); }

.st-note { max-width: 60em; margin: var(--s4) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ─── абзацы под заголовком: полоса уже, как в статье ─── */
.st-text { max-width: 46em; margin-top: var(--s7); }
.st-text__h { margin: 0 0 var(--s4); }
.st-text .t { margin: 0; line-height: 1.7; }
.st-text .t + .t { margin-top: var(--s3); }
.st-text .st-text__status { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.st-text__status b { font-weight: 500; }

/* ─── вкладки слоёв карты ─── */
.st-layers { margin-top: var(--s7); }
.st-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.st-tab { appearance: none; margin: 0 -1px 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--ink); border-bottom: 0;
  background: transparent; cursor: pointer; font-family: Oswald, sans-serif; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase; font-size: 15px; line-height: 1.2; color: var(--ink-2);
  transition: color .15s ease-out, background .15s ease-out; }
.st-tab:hover { color: var(--ink); }
.st-tab[aria-selected="true"] { position: relative; z-index: 1; background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); }
.st-layer { padding-top: var(--s6); }

/* ─── карта пути ───
   Семь мест в ряду, два ряда. Звено этапа фиксированной высоты: связка
   идёт по его середине, и её не сбивает подпись в две строки. Перенос
   на второй ряд — по правому полю вниз, по зазору между рядами влево
   и стрелкой в первое звено второго ряда. */
.st-map { margin: 0; }
.st-map__head { margin-bottom: var(--s5); }
.st-map__title { margin: var(--s2) 0; }
.st-map__sub { margin: 0; font-size: 17px; color: var(--ink-2); }
.st-map__scroll { overflow-x: auto; }
.st-map__grid { --g: var(--s3); --box: 88px; --turn: var(--s6);
  list-style: none; margin: 0; padding: 0 var(--s4) 0 0; min-width: 1080px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--g); }
.st-map__c { position: relative; padding-bottom: var(--s4); }
.st-map__box { position: relative; height: var(--box); display: flex; flex-direction: column; justify-content: center;
  padding: var(--s2) var(--s3); }
.st-map__box .box__t { font-size: 15px; line-height: 1.15; }
.st-map__box--4 { border-width: 2px; padding: calc(var(--s2) - 1px) calc(var(--s3) - 1px); }
.st-map__k { margin-bottom: var(--s1); }
.box--key .st-map__k { color: inherit; }

/* связка к соседу по ряду */
.st-map__c > .st-map__box::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--g);
  border-top: 1px solid var(--ink); }
.st-map__c--end > .st-map__box::after, .st-map__c:last-child > .st-map__box::after,
.st-map__c--in > .st-map__box--in2::after { content: none; }
/* Второй вход стоит под первым вплотную: связка от него вправо на полшага
   и вверх, на уровень первого. Высота известна — звено и зазор. */
.st-map__box--in2 { margin-top: var(--s2); }
.st-map__c--in > .st-map__box--in2::before { content: ""; position: absolute; left: 100%; bottom: 50%;
  width: calc(var(--g) / 2); height: calc(var(--box) + var(--s2)); border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink); }

/* перенос ряда: вправо от последнего звена, вниз по правому полю */
.st-map__c--end::after { content: ""; position: absolute; left: 100%; top: calc(var(--box) / 2);
  bottom: calc(var(--turn) / -2); width: var(--s3); border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
/* …влево по зазору и вниз, в первое звено второго ряда */
.st-map__turn { grid-column: 1 / -1; position: relative; height: var(--turn); }
.st-map__turn::before { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--s3));
  left: calc((100% - 6 * var(--g)) / 14); border-top: 1px solid var(--ink); }
.st-map__turn::after { content: ""; position: absolute; top: 50%; bottom: 0;
  left: calc((100% - 6 * var(--g)) / 14); border-left: 1px solid var(--ink); }
.st-map__turn i { position: absolute; bottom: 1px; left: calc((100% - 6 * var(--g)) / 14 - 4px); width: 9px; height: 9px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }

/* содержание этапа */
.st-map__dl { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.4; }
.st-map__dl dt { margin-top: var(--s3); }
.st-map__dl dt:first-child { margin-top: 0; }
.st-map__dl dd { margin: var(--s1) 0 0; }
.st-map__risk { display: flex; flex-direction: column; gap: var(--s1); }
.st-meter { display: inline-flex; gap: 3px; }
.st-meter i { width: 10px; height: 10px; border: 1px solid var(--line); }
.st-meter i.on { background: var(--accent); border-color: var(--accent); }
.st-map__ct { margin: var(--s3) 0 var(--s1); font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; font-size: 15px; line-height: 1.2; color: var(--accent); }
.st-map__p { margin: 0; font-size: 15px; line-height: 1.4; }
.st-map__cap { margin: var(--s4) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 60em; }

/* работа с базой: одно звено расходится на два исхода, замер — под ними */
.st-map__base { min-width: 1080px; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); column-gap: var(--s6); row-gap: var(--s5);
  align-items: center; }
.st-map__hub { position: relative; }
.st-map__hub::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--s6) / 2);
  border-top: 1px solid var(--ink); }
.st-map__out { position: relative; display: grid; grid-auto-rows: 1fr; gap: var(--s3); }
.st-map__out::before { content: ""; position: absolute; left: calc(var(--s6) / -2);
  top: calc((100% - var(--s3)) / 4); bottom: calc((100% - var(--s3)) / 4); border-left: 1px solid var(--ink); }
.st-map__o { position: relative; padding: var(--s3) var(--s4); }
.st-map__o::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--s6) / 2);
  border-top: 1px solid var(--ink); }
.st-map__measure { grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--hair); }

/* ─── ряд звеньев с пояснением ─── */
.st-chain { margin-top: var(--s7); }
.st-chain__in { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s4); }
.st-chain__i { position: relative; padding: var(--s3) var(--s4); }
.st-chain__i .box__t { font-size: 15px; }
.st-chain__i .box__s { margin-top: var(--s2); }
.st-chain__i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s4);
  border-top: 1px solid var(--ink); }

/* ─── сценарий ─── */
.st-scn { margin-top: var(--s6); padding: var(--s6); border: 1px solid var(--line); }
.st-scn__h { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s6); }
.st-scn__n { font-size: 54px; color: var(--accent); }
.st-scn__t { margin: 0 0 var(--s2); }
.st-scn__sub { margin: 0; color: var(--ink-2); }
.st-scn__foot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6);
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.st-scn__foot--one { grid-template-columns: 1fr; }
.st-scn__why { margin: 0; color: var(--ink-2); }
.st-scn__chg ul, .st-road__list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.st-scn__chg li, .st-road__list li { position: relative; margin-top: var(--s1); padding-left: var(--s4); font-size: 15px; line-height: 1.45; }
/* Маркер — квадрат: тот же знак, что у тем в ленте блога. */
.st-scn__chg li::before, .st-road__list li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; background: var(--accent); }

/* ─── схема сценария ───
   Звенья стоят на местах сетки (--r, --c), связки — линиями от звена:
   вправо к соседу, вниз к ответвлению, вправо к продолжению ответвления. */
.st-flow { --g: var(--s4); --rg: var(--s5);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--rg); }
.st-flow > * { grid-row: var(--r); grid-column: var(--c); }
.st-flow__b { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--s3); }
.st-flow__k { margin-bottom: var(--s1); color: var(--accent); }
.box--key .st-flow__k { color: inherit; }
.st-flow__t { margin: 0; font-size: 15px; line-height: 1.4; }
/* Вопрос развилки — двойная рамка: состояние типом рамки, а не цветом. */
.box--ask { outline: 1px solid var(--ink); outline-offset: -6px; }
.box--ask .st-flow__t { font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.st-flow__m:not(.st-flow__m--last)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--g);
  border-top: 1px solid var(--ink); }
.st-flow__d::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: var(--rg);
  border-left: 1px solid var(--ink); }
.st-flow__s::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--g);
  border-top: 1px solid var(--ink); }
/* Возврат ответвления в основной ряд: по ряду ответвлений вправо
   и вверх к середине звена, в которое оно возвращается. */
.st-flow__join { position: relative; }
.st-flow__join::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--g));
  right: calc((100% - (var(--k) - 1) * var(--g)) / (2 * var(--k))); border-top: 1px solid var(--ink); }
.st-flow__join::after { content: ""; position: absolute; top: calc(-1 * var(--rg)); height: calc(50% + var(--rg));
  right: calc((100% - (var(--k) - 1) * var(--g)) / (2 * var(--k))); border-right: 1px solid var(--ink); }

/* два входа → одно звено → два исхода */
.st-fork { --g: var(--s4); --v: var(--s5); }
.st-fork__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.st-fork__b { position: relative; }
.st-fork__b .box__s { margin-top: var(--s1); }
.st-fork__row--in .st-fork__b::after { content: ""; position: absolute; left: 50%; top: 100%; height: calc(var(--v) / 2);
  border-left: 1px solid var(--ink); }
.st-fork__row--in::after { content: ""; position: absolute; top: calc(100% + var(--v) / 2);
  left: calc((100% - var(--g)) / 4); right: calc((100% - var(--g)) / 4); border-top: 1px solid var(--ink); }
.st-fork__hub { position: relative; max-width: 520px; margin: var(--v) auto; text-align: center; }
.st-fork__hub::before, .st-fork__hub::after { content: ""; position: absolute; left: 50%; height: calc(var(--v) / 2);
  border-left: 1px solid var(--ink); }
.st-fork__hub::before { bottom: 100%; }
.st-fork__hub::after { top: 100%; }
.st-fork__row--out::before { content: ""; position: absolute; bottom: calc(100% + var(--v) / 2);
  left: calc((100% - var(--g)) / 4); right: calc((100% - var(--g)) / 4); border-top: 1px solid var(--ink); }
.st-fork__row--out .st-fork__b::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: calc(var(--v) / 2);
  border-left: 1px solid var(--ink); }

/* ─── сценарий под раскрытием ─── */
.st-more { margin-top: var(--s6); border-top: 1px solid var(--line); }
.st-more + .st-more { margin-top: 0; }
.st-more:last-child { border-bottom: 1px solid var(--line); }
.st-more__s { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; cursor: pointer; list-style: none; }
.st-more__s::-webkit-details-marker { display: none; }
.st-more__t { font-size: 20px; line-height: 1.2; }
.st-more__x { position: relative; flex: none; width: 20px; height: 20px; }
.st-more__x::before, .st-more__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px solid var(--ink); }
.st-more__x::after { transform: rotate(90deg); transition: transform .2s ease-out; }
.st-more[open] .st-more__x::after { transform: rotate(0deg); }
.st-more__s:hover .st-more__t { color: var(--accent); }
.st-more__b { padding: 0 0 var(--s6); }
.st-more__p { max-width: 46em; margin: 0 0 var(--s5); }
.st-more__chg { margin-top: var(--s5); }

/* ─── круг: опыт → отзыв → доверие → снова опыт ─── */
.st-loop { margin-top: var(--s7); }
.st-loop__p { max-width: 46em; margin: 0 0 var(--s5); }
.st-loop__in { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--s6); }
.st-loop__i { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 72px; padding: var(--s3) var(--s4); }
.st-loop__i .box__t { font-size: 15px; }
.st-loop__i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s6);
  border-top: 1px solid var(--ink); }
/* обратная связка: от середины последнего звена вниз, влево и вверх в первое */
.st-loop__back { position: relative; display: block; height: var(--s5);
  margin: 0 calc((100% - 2 * var(--s6)) / 6); border: 1px solid var(--ink); border-top: 0; }
.st-loop__back::after { content: ""; position: absolute; left: -5px; top: 1px; width: 9px; height: 9px;
  border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: rotate(45deg); }

/* ─── главный вывод строкой: общая цитата ─── */
.st-quote { margin-top: var(--s7); }
.st-quote .st-quote__q { margin: 0; max-width: 26em; }
.st-quote__after { margin: var(--s4) 0 0; padding-left: calc(var(--s4) + 3px); }

/* ─── порядок действий ───
   Подсетка держит шапки этапов одной высоты — связка между ними идёт
   по середине, даже если название заняло две строки. */
.st-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: auto auto auto; column-gap: var(--s6); }
.st-road__c { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.st-road__box { position: relative; padding: var(--s4); }
.st-road__c:not(:last-child) .st-road__box::after { content: ""; position: absolute; left: 100%; top: 50%;
  width: var(--s6); border-top: 1px solid var(--ink); }
.st-road__k { margin-bottom: var(--s2); }
.box--key .st-road__k { color: inherit; }
.st-road__box .box__t { font-size: 20px; }
.st-road__list { margin-top: var(--s4); }
.st-road__list li { font-size: 17px; }
.st-road__why { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ─── участники и одна карточка заказа ─── */
.st-hub { --v: var(--s6); }
.st-hub__in { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--s6); }
.st-hub__i { position: relative; }
.st-hub__k { margin-bottom: var(--s2); }
.st-hub__i .box__s { margin-top: var(--s2); }
.st-hub__i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s6);
  border-top: 1px solid var(--ink); }
.st-hub__i::before { content: ""; position: absolute; left: 50%; top: 100%; height: var(--v);
  border-left: 1px solid var(--ink); }
.st-hub__rec { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--v); padding: var(--s4) var(--s5); }
.st-hub__rec .box__t { font-size: 20px; }
.st-hub__rec .box__s { margin: 0; }
.st-sec .st-hub + .st-key { margin-top: var(--s6); max-width: 46em; }

/* ─── что клиент получил: строки с номером ─── */
.st-out { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.st-out__r { display: grid; grid-template-columns: 72px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--s4);
  align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.st-out__n { font-size: 34px; color: var(--accent); }
.st-out__t { margin: 0; font-size: 20px; line-height: 1.2; }
.st-out__p { margin: 0; color: var(--ink-2); }

/* ─── итог диагностики одним чёрным листом ─── */
.st-sum { margin-top: var(--s7); padding: var(--s6); }
.st-sum__l { margin: 0 0 var(--s3); }
.st-sum__h { margin: 0; max-width: 22em; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.st-sum__p { margin: var(--s3) 0 0; max-width: 46em; color: var(--ink-2); }
.st-sum__route { margin-top: var(--s6); }
.st-sum__n { margin-bottom: var(--s2); color: var(--accent); }
.st-sum__pri { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.st-sum__pt { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 400; }
.st-sum__why { margin: var(--s2) 0 0; color: var(--ink-2); }

/* ─── точка А и точка Б на одной шкале (R521) ───
   Строка: слева подпись и число, справа полоса на всю оставшуюся ширину.
   Вилка «от — до»: заливка до нижней границы, штриховка 45° до верхней —
   неточность видна типом заливки, а не цветом. Пиковый месяц — риска
   поперёк полосы, подпись под ней. */
.st-scale { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.st-scale__cap { margin: 0 0 var(--s2); }
.st-scale__r { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  grid-template-areas: "k bar" "n bar"; column-gap: var(--s6); align-items: center; padding: var(--s4) 0; }
.st-scale__r + .st-scale__r { border-top: 1px solid var(--hair); }
.st-scale__k { grid-area: k; margin: 0 0 var(--s2); }
.st-scale__n { grid-area: n; margin: 0; font-size: 54px; white-space: nowrap; color: var(--ink-2); }
.st-scale__r--key .st-scale__n { color: var(--accent); }
.st-scale__bar { grid-area: bar; position: relative; height: 24px; }
.st-scale__fill, .st-scale__range { position: absolute; top: 0; bottom: 0; }
/* Короткая полоса — не тоньше двух пикселей, иначе «до» пропадает совсем. */
.st-scale__fill { left: 0; width: max(2px, var(--from)); background: var(--line); }
.st-scale__range { left: var(--from); width: calc(var(--to) - var(--from));
  background: repeating-linear-gradient(-45deg, var(--line) 0 1.5px, transparent 1.5px 6px); }
.st-scale__r--key .st-scale__fill { background: var(--accent); }
.st-scale__r--key .st-scale__range {
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1.5px, transparent 1.5px 6px); }
.st-scale__peak { position: absolute; left: var(--peak); top: calc(-1 * var(--s1)); bottom: calc(-1 * var(--s1));
  border-left: 1px solid var(--ink); }
.st-scale__pl { position: absolute; top: calc(100% + var(--s1)); right: 0; white-space: nowrap; }

/* ─── перечень в звене: строка с квадратными маркерами (R521) ───
   Главное звено ряда стоит по середине высоты: соседи с перечнями
   выше него, а связки идут по середине. */
.st-chain__list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s1) var(--s3); }
.st-chain__list li { position: relative; padding-left: var(--s3); font-size: 15px; line-height: 1.45; }
.st-chain__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  background: var(--accent); }
.st-chain__i.box--key { display: flex; flex-direction: column; justify-content: center; }

/* ─── табло цифр и кнопка к заявке внутри раздела (R521) ─── */
.st-panel { margin-top: var(--s7); }
.st-head + .st-panel, .st-head + .st-chain { margin-top: 0; }
.st-panel + .st-merge { margin-top: var(--s7); }
.st-merge + .st-key { margin-top: var(--s7); max-width: 46em; }
.st-cta { margin: var(--s6) 0 0; }

/* ─── элементы «Биозаряда» (R524): карта, шкалы, чек-лист, кривая, голос ───
   Первым после шапки раздела каждый встаёт без своего верхнего отступа:
   у шапки он уже есть. */
.st-mx, .st-meters, .st-check, .st-curve, .st-voice { margin-top: var(--s7); }
.st-head + .st-mx, .st-head + .st-meters, .st-head + .st-check, .st-head + .st-curve,
.st-head + .st-voice { margin-top: 0; }
.st-ev + .st-ev { margin-top: var(--s5); }
/* Соседи, у которых своего отступа нет: без этих правил таблица строк
   прилипала к абзацу над ней, а карточки — к итогу схемы. */
.st-merge + .st-cards, .st-curve + .st-out, .st-out + .st-road, .st-road + .st-ev { margin-top: var(--s7); }
.st-text + .st-out, .st-text + .st-road { margin-top: var(--s5); }
.st-chain + .st-key, .st-mx + .st-key { margin-top: var(--s6); max-width: 46em; }

/* Карта решений: таблица два на два. Слева подписи строк, снизу — столбцов,
   оси — линии цветом текста по краю, четверти разделены волосяной линией. */
.st-mx__grid { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 1fr); }
.st-mx__ax { margin: 0; color: var(--ink-2); }
.st-mx__ax--y { display: flex; align-items: center; padding: var(--s4) var(--s4) var(--s4) 0;
  border-right: 1px solid var(--ink); }
.st-mx__ax--x { padding: var(--s3) var(--s4) 0; border-top: 1px solid var(--ink); text-align: center; }
.st-mx__q { display: flex; align-items: center; justify-content: center; min-height: 190px; padding: var(--s4); }
.st-mx__q--tl, .st-mx__q--bl { border-right: 1px solid var(--hair); }
.st-mx__q--tl, .st-mx__q--tr { border-bottom: 1px solid var(--hair); }
.st-mx__b { width: 100%; max-width: 340px; padding: var(--s3) var(--s4); }
.st-mx__b .box__t { font-size: 15px; }
.st-mx__b .box__s { margin-top: var(--s2); }
.st-mx__tag { display: none; }

/* Шкалы голоса: строка — ось, квадраты, число и что это значит. */
.st-meters__in { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.st-meters__r { display: grid; grid-template-columns: minmax(0, 220px) auto minmax(0, 1fr); column-gap: var(--s5);
  align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.st-meters__t { margin: 0; font-size: 15px; line-height: 1.2; }
.st-meters__v { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.st-meters__m { gap: 4px; }
.st-meters__m i { width: 16px; height: 16px; }
.st-meters__n { min-width: 3.4em; font-size: 20px; }
.st-meters__s { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* Чек-лист: пункт и два состояния. Частично — штриховка 45°, да — заливка. */
.st-check__t { width: 100%; border-collapse: collapse; }
.st-check__t th, .st-check__t td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--hair);
  text-align: left; vertical-align: middle; }
.st-check__t thead th { padding-top: 0; border-bottom: 2px solid var(--ink); }
.st-check__t tbody th { font-weight: 400; font-size: 17px; line-height: 1.45; }
.st-check__t td { width: 150px; white-space: nowrap; }
.st-check__s { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: var(--s2);
  border: 1px solid var(--line); }
.st-check__s--half { border-color: var(--accent);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1.5px, transparent 1.5px 5px); }
.st-check__s--on { border-color: var(--accent); background: var(--accent); }
.st-check__w { font-size: 15px; color: var(--ink-2); }
.st-check__t tfoot th, .st-check__t tfoot td { padding-top: var(--s4); border-bottom: 0; }
.st-check__n { font-size: 34px; }
.st-check__n--key { color: var(--accent); }

/* Кривая эмоций: сетка от +2 до −2, линия через середины, разброс — отрезком. */
.st-curve__plot { position: relative; padding-left: 44px; }
.st-curve__y { position: absolute; left: 0; top: var(--y); margin: 0; transform: translateY(-50%); }
.st-curve__area { position: relative; height: 240px; }
.st-curve__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-curve__grid { stroke: var(--hair); stroke-width: 1; }
.st-curve__grid--zero { stroke: var(--line); }
.st-curve__range { stroke: var(--ink); stroke-width: 1; }
.st-curve__line { fill: none; stroke: var(--accent); stroke-width: 2; }
.st-curve__dot { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--accent); }
.st-curve__cols { list-style: none; margin: var(--s4) 0 0 44px; padding: 0; display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s3); }
.st-curve__c { padding-top: var(--s2); border-top: 1px solid var(--line); }
.st-curve__t { margin: 0; font-size: 15px; line-height: 1.2; }
.st-curve__v { margin: var(--s1) 0 0; color: var(--accent); }
.st-curve__s { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }

/* Голос бренда: как говорит и как нет. Отказ — зачёркиванием, не цветом. */
.st-voice { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s6); }
.st-voice__l { margin: 0 0 var(--s3); }
.st-voice__in { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.st-voice__in li { padding: var(--s3) 0; border-bottom: 1px solid var(--hair); font-size: 26px; line-height: 1.3; }
.st-voice__c--muted .st-voice__in { border-top-color: var(--line); }
.st-voice__c--muted .st-voice__in li { color: var(--ink-2); text-decoration: line-through;
  text-decoration-color: var(--line); text-decoration-thickness: 1px; }

/* Наблюдение со снимком во всю ширину: развороты контента. */
.st-ev--wide { grid-template-columns: 1fr; align-items: start; }
.st-ev--wide .st-ev__text { max-width: 46em; }

/* ═══ Адаптив: те же три ступени, что у всего сайта (DESIGN.md → Layout) ═══ */
@media (max-width: 1200px) {
  .st-hero__grid { column-gap: var(--s6); }
  .st-head--split { column-gap: var(--s6); }
  .st-ev { gap: var(--s5); padding: var(--s5); }
  .st-scn { padding: var(--s5); }
}

@media (max-width: 900px) {
  .st-hero__grid { grid-template-columns: 1fr; }
  .st-facts { margin-top: var(--s5); }
  .st-head--split { grid-template-columns: 1fr; grid-template-areas: "k" "h" "i"; }
  .st-head--split .st-head__intro { margin-top: var(--s5); }
  .st-ev { grid-template-columns: 1fr; }
  .st-cards { grid-template-columns: 1fr; }
  .st-scn__foot { grid-template-columns: 1fr; gap: var(--s4); }
  .st-out__r { grid-template-columns: 56px minmax(0, 1fr); row-gap: var(--s1); }
  .st-out__k, .st-out__t, .st-out__p { grid-column: 2; }
  .st-scale__r { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); column-gap: var(--s5); }
  .st-scale__n { font-size: 46px; }
  .st-mx__grid { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 1fr); }
  .st-mx__q { min-height: 170px; padding: var(--s3); }
  .st-meters__r { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); row-gap: var(--s1); }
  .st-meters__s { grid-column: 2; }
  .st-curve__cols { grid-template-columns: 1fr; gap: 0; margin-left: 0; }
  .st-curve__c { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: var(--s4);
    padding: var(--s2) 0; border-top: 0; border-bottom: 1px solid var(--hair); }
  .st-curve__t, .st-curve__v { grid-column: 1; }
  .st-curve__s { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .st-voice { grid-template-columns: 1fr; gap: var(--s5); }
  .st-voice__in li { font-size: 20px; }

  /* Ряды звеньев идут столбиком, связки — короткими отрезками вниз. */
  .st-path { grid-template-columns: 1fr; gap: var(--s2); max-width: 420px; }
  .st-path__box { min-height: 44px; }
  .st-path__i:not(:last-child)::after { left: 50%; top: 100%; width: 0; height: var(--s2);
    border-top: 0; border-left: 1px solid var(--ink); }
  .st-path__i:nth-child(n+2):not(:last-child)::before { left: calc(50% - 8px); top: calc(100% + var(--s2) / 2 - 4px);
    width: 16px; height: 8px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
    transform: skewY(-45deg); }

  .st-chain__in, .st-merge__in, .st-hub__in, .st-loop__in { grid-template-columns: 1fr; gap: var(--s3); }
  .st-chain__i:not(:last-child)::after, .st-hub__i:not(:last-child)::after, .st-loop__i:not(:last-child)::after {
    left: var(--s5); top: 100%; width: 0; height: var(--s3); border-top: 0; border-left: 1px solid var(--ink); }
  .st-merge__i::after, .st-merge__bus, .st-hub__i::before, .st-loop__back { display: none; }
  .st-merge__in { gap: var(--s2); }
  .st-merge__out { max-width: none; margin-top: var(--s4); text-align: left; }
  .st-merge__out::before { display: none; }
  .st-hub__i:last-child::after { content: ""; position: absolute; left: var(--s5); top: 100%; width: 0; height: var(--v);
    border-left: 1px solid var(--ink); }

  .st-road { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--s6); }
  .st-road__c { grid-row: auto; grid-template-rows: none; }
  .st-road__c:not(:last-child) .st-road__box::after { display: none; }

  /* Карта: этапы столбиком, путь — линией слева, как у шагов работы
     на телефоне; перенос ряда и прокрутка вбок больше не нужны. */
  .st-map__grid, .st-map__base { min-width: 0; }
  /* Отвод от линии к звену — на постоянной высоте, а не по середине:
     звено здесь растёт по тексту, а линия должна начинаться и кончаться
     ровно на отводе первого и последнего звена. */
  .st-map__grid { --stub: 28px; grid-template-columns: 1fr; padding: 0 0 0 var(--s5); }
  .st-map__c { padding-bottom: var(--s5); }
  .st-map__c::before { content: ""; position: absolute; left: calc(-1 * var(--s5) + 8px); top: 0; bottom: 0;
    border-left: 1px solid var(--ink); }
  .st-map__c:first-child::before { top: var(--stub); }
  .st-map__c:last-child::before { bottom: auto; height: var(--stub); }
  .st-map__c > .st-map__box::after { left: calc(-1 * var(--s5) + 8px); top: var(--stub); width: calc(var(--s5) - 8px); }
  .st-map__risk { flex-direction: row; align-items: center; gap: var(--s2); }
  .st-map__c--end > .st-map__box::after, .st-map__c:last-child > .st-map__box::after { content: ""; }
  .st-map__c--in > .st-map__box--in2::after { content: ""; }
  .st-map__c--in > .st-map__box--in2::before { content: none; }
  .st-map__c--end::after, .st-map__turn { display: none; }
  .st-map__box { height: auto; min-height: 56px; }
  .st-map__dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s2) var(--s3); }
  .st-map__dl dt, .st-map__dl dd { margin: 0; }
  .st-map__base { grid-template-columns: 1fr; }
  .st-map__hub::after, .st-map__out::before, .st-map__o::before { display: none; }

  /* Сценарий: звенья столбиком в порядке чтения, основной путь — линией
     слева; ответвление — со сдвигом вправо, от линии к нему отвод. */
  .st-flow { grid-template-columns: 1fr; row-gap: var(--s3); }
  .st-flow > * { grid-row: auto; grid-column: auto; }
  .st-flow__join { display: none; }
  .st-flow__m:not(.st-flow__m--last)::after { left: var(--s4); top: 100%; width: 0; height: var(--s3);
    border-top: 0; border-left: 1px solid var(--ink); }
  .st-flow__d, .st-flow__s { margin-left: var(--s6); }
  .st-flow__d::before { left: calc(var(--s4) - var(--s6)); bottom: auto; top: 50%; height: 0;
    width: calc(var(--s6) - var(--s4)); border-left: 0; border-top: 1px solid var(--ink); }
  .st-flow__s::before { right: auto; left: var(--s4); top: auto; bottom: 100%; width: 0; height: var(--s3);
    border-top: 0; border-left: 1px solid var(--ink); }
  .st-flow__d::after, .st-flow__s::after { content: ""; position: absolute; left: calc(var(--s4) - var(--s6));
    top: calc(-1 * var(--s3)); bottom: calc(-1 * var(--s3)); border-left: 1px solid var(--ink); }
}

@media (max-width: 600px) {
  .st-hero .c-crumbs { margin-bottom: var(--s5); }
  .st-hero__client { font-size: 17px; }
  .st-head { margin-bottom: var(--s6); }
  .st-ev, .st-card, .st-scn { padding: var(--s4); }
  .st-scn__n { font-size: 34px; }
  .st-tab { flex: 1 1 100%; margin: 0 0 -1px; text-align: left; border-bottom: 1px solid var(--ink); }
  .st-tabs { border-bottom: 0; }
  .st-key__t, .st-sum__pt { font-size: 20px; }
  /* Шкала: подпись, число, под ними полоса во всю ширину; под полосой
     с пиком — место для его подписи. */
  .st-scale__r { grid-template-columns: 1fr; grid-template-areas: "k" "n" "bar"; }
  .st-scale__n { font-size: 34px; }
  .st-scale__bar { margin-top: var(--s3); height: 18px; }
  .st-scale__r--peak .st-scale__bar { margin-bottom: var(--s4); }
  /* Карта решений: четверти списком, место каждой — подписью над звеном. */
  .st-mx__grid { grid-template-columns: 1fr; }
  .st-mx__ax, .st-mx__corner { display: none; }
  .st-mx__q { display: block; min-height: 0; padding: var(--s2) 0; }
  .st-mx__q--tl, .st-mx__q--bl, .st-mx__q--tr { border: 0; }
  .st-mx__tag { display: block; margin: 0 0 var(--s2); }
  .st-mx__b { max-width: none; }
  .st-meters__r { grid-template-columns: 1fr; }
  .st-meters__s { grid-column: 1; }
  .st-check__t tbody th { font-size: 15px; }
  .st-check__t th, .st-check__t td { padding-right: var(--s2); }
  .st-check__t td { width: auto; }
  .st-check__w { display: block; margin-top: var(--s1); font-size: 12px; }
  .st-check__n { font-size: 26px; }
  .st-curve__area { height: 180px; }
  .st-curve__c { grid-template-columns: 1fr; }
  .st-curve__s { grid-column: 1; grid-row: auto; margin-top: var(--s1); }
  .st-sum { padding: var(--s5) var(--s4); }
  .st-map__dl { grid-template-columns: 1fr; gap: var(--s1); }
  .st-map__dl dt { margin-top: var(--s2); }
  .st-map__dl dt:first-child { margin-top: 0; }
  .st-fork__row { grid-template-columns: 1fr; gap: var(--s2); }
  .st-fork__row--in::after, .st-fork__row--out::before, .st-fork__row--in .st-fork__b::after,
  .st-fork__row--out .st-fork__b::before { display: none; }
  .st-fork__hub { margin: var(--s3) 0; text-align: left; max-width: none; }
  .st-fork__hub::before, .st-fork__hub::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-nav__a, .st-tab, .st-shot__btn, .st-more__x::after, .st-card__go svg { transition: none; }
}