/* ============================================================
   Страница кейса – перенос фрейма Figma 14:60 (база 1512x10961).

   Что взято из макета буквально:
   – фон страницы #F5F5F5, плашки разделов #FFFFFF и #191E1F, радиус 16;
   – шрифты: Inter (текст), Neucha (лиды и ремарки, 20), Andy MT Cyrillic
     Bold (заголовки разделов, 40) – рукописные, как в макете;
   – титул залит меш-градиентом (в Figma это SHADER: сетка 4x4, сверху
     теплая, снизу холодная) – здесь он собран из radial-gradient и наложен
     на текст через background-clip;
   – акценты: розовый #FE5978, зеленый #4EB617, красный #D14056 и синий
     #09598E в шкале сравнения;
   – кегли макета: титул 20, разделы 40, лид 20, шаги 28, текст 14,
     мелкий 11.8, подписи 9.8-10.

   Адаптив (mobile-first, один основной вариант):
   – базово одна колонка, ряды складываются;
   – 640px: открытия по две колонки;
   – 900px: пары «текст + графика» встают рядом;
   – 1000px: участники снова таблицей;
   – 1180px: раскладка макета – три карточки в ряд, открытия в три колонки.
   Размеры через clamp(), поэтому между переломами все тянется плавно.
   ============================================================ */

/* Рукописный Andy MT платный, поэтому шрифт НЕ подключается: все семь
   рукописных заголовков выгружены из макета в кривые и лежат в
   assets/case/spec/hand-*.svg. Файл шрифта в fonts/ оставлен только как
   исходник для повторной выгрузки. */

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.case-page {
  background: #f5f5f5; color: #161617;
  font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  --hand: "Andy MT Cyrillic", "Neucha", cursive;
  --note: "Neucha", "Inter", sans-serif;
  --pink: #fe5978;
  --green: #4eb617;
}

.case {
  max-width: 1472px; margin: 0 auto;
  --case-edge: clamp(10px, 1.3vw, 20px);
  /* сверху – место под фиксированную шапку сайта; высоту дает js/nav.js */
  /* просвет под шапкой вдвое меньше прежнего (было + clamp(18,2vw,30)) */
  /* viewport-fit=cover рисует страницу под вырезом и скругленными углами.
     env() на устройствах без выреза равен нулю, поэтому max() ничего не
     меняет на обычных экранах и отводит поля только там, где вырез есть */
  padding: calc(var(--nav-h, 64px) + clamp(8px, 1vw, 15px))
           max(var(--case-edge), env(safe-area-inset-right))
           max(var(--case-edge), env(safe-area-inset-bottom))
           max(var(--case-edge), env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: max(10px, 1.4cqw);
}

/* ---------- титул со стрелкой назад ---------- */
.case__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: clamp(10px, 1.2vw, 20px);
  /* справа поля нет: оговорка в макете прижата к правому краю контента */
  padding: clamp(6px, 1vw, 14px) 0 clamp(6px, .8vw, 12px) clamp(4px, .6vw, 10px);
}
/* в макете оговорка стоит СПРАВА, на одной линии с титулом (x 4382, ширина 437) */
@media (min-width: 1000px) {
  /* третья колонка – по содержимому: коэффициенты 1fr и 437fr сжимали титул
     в вертикальную полоску, потому что fr делят место пропорционально */
  .case__head { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.back {
  display: grid; place-items: center;
  width: clamp(30px, 2.4vw, 36px); height: clamp(30px, 2.4vw, 36px);
  border-radius: 50%; color: #161617; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.back svg { width: clamp(18px, 1.6vw, 24px); height: auto; display: block; }
.back:hover { background: rgba(22, 22, 23, .07); transform: translateX(-2px); }
.back:focus-visible { outline: 2px solid #161617; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .back { transition: none; } }

/* Меш-градиент титула: палитра из SHADER-заливки макета, собранная
   радиальными пятнами по углам и середине */
.case__title {
  font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.32;
  letter-spacing: -.005em; max-width: 44ch;
  /* Градиент титула снят с макета попиксельно (figma-spec/ref-25_18.png):
     верхняя строка идет от розово-пурпурного через персиковый к оливковому,
     нижняя – от голубого к бирюзовому. Прошлый вариант я собрала на глаз, и в
     нем была желто-оранжевая зона, которой в макете нет. Стык полос попадает
     в межстрочный интервал, поэтому перехода не видно. */
  background-image:
    linear-gradient(90deg, #ca5c8b 5%, #cc6c87 15%, #d27f80 25%, #da9079 35%,
                    #e29f76 45%, #ebae74 55%, #ecb671 65%, #e4ba6c 75%,
                    #cfbb64 85%, #a9b85c 95%),
    linear-gradient(90deg, #4f9cae 5%, #4ba2ac 15%, #48a6aa 25%, #40a9a7 35%,
                    #2fa9a1 45%, #1da799 55%, #0ea397 65%, #009d9c 100%);
  background-size: 100% var(--warm, 52%), 100% calc(100% - var(--warm, 52%));
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .case__title { background: none; color: CanvasText; }
}

@media (max-width: 1199px) {
  .case-page .case__title {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.22;
    letter-spacing: -.015em;
  }
  .case-page .case__note {
    font-size: clamp(12.5px, 3.5vw, 14px);
    line-height: 1.45;
  }
}

/* ---------- когнитивный кейс: единый мобильный язык блоков ----------
   Любая подпись вида «иконка + серый капс» является одним компонентом.
   Размеры взяты из отдельного мобильного фрейма Figma 6:262: иконка 18px,
   подпись 10px, зазор 8px. Компонент не масштабируется вместе со сценой. */
.map-mobile-label, .map__mobile { display: none; }

@media (max-width: 1199px) {
  .case-page .map-mobile-label {
    position: absolute; z-index: 100; top: clamp(14px, 4.87vw, 20px); left: clamp(14px, 5.13vw, 21px);
    right: 8px; width: auto;
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font: 500 clamp(6.3px, 1.95vw, 8.5px)/1.2 "Inter", -apple-system, sans-serif;
    letter-spacing: -.01em; text-transform: uppercase; color: rgba(24, 24, 26, .6);
    /* Перенос РАЗРЕШЕН: с nowrap длинные подписи не переносились и уезжали за
       карточку – «20 ПРОЕКТОВ С НАИБОЛЕЕ ПОКАЗАТЕЛЬНЫМИ ПРОФИЛЯМИ
       УСТОЙЧИВОСТИ», «РАСПРЕДЕЛЕНИЕ 186 ПРОЕКТОВ ПО УСТОЙЧИВОСТИ», «ЗАКАЗЫ ПО
       ЭТАПАМ И УРОВНЮ ОТКЛОНЕНИЯ ОТ НОРМАТИВА», «НЕЗАВИСИМОЕ ИССЛЕДОВАНИЕ НА
       ОСНОВЕ ОТКРЫТЫХ РЫНОЧНЫХ ДАННЫХ». Короткие подписи и так стоят в одну
       строку, поэтому вид блоков с ними не меняется. */
    white-space: normal; overflow-wrap: anywhere;
  }
  /* подпись занимает свою строку целиком: правый край – поле карточки */
  .case-page .map-mobile-label span { min-width: 0; }
  .case-page .map-mobile-label img {
    display: block; width: clamp(16px, 4.62vw, 18px); height: clamp(16px, 4.62vw, 18px);
    flex: 0 0 auto; object-fit: contain;
  }
  .case-page .map-mobile-label--light { color: #fff; }
  .case-page .map-mobile-label--light img { filter: brightness(0) invert(1); }
  .case-page .map-label-source,
  .case-page .map-label-icon-source { display: none !important; }

  /* У табличного блока подпись теперь тот же компонент и занимает собственную
     строку над карточками, поэтому старую текстовую копию скрываем. */
  .case-page .map:has(.map__cards) > .map-mobile-label {
    position: static; margin: 0 0 16px; width: auto;
  }
  .case-page .map:has(> .map-mobile-label) .tc__label { display: none; }

  /* Сложные широкие сцены имеют отдельную мобильную раскладку. Десктопные
     узлы остаются в DOM и без изменений возвращаются от 1200px. */
  .case-page--cognitive .map--has-mobile {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--cognitive .map--has-mobile > .map__stage { display: none; }
  .case-page--cognitive .map--has-mobile > .map__mobile {
    display: block; position: static; width: 100%;
  }

  /* min-height снят: текст под заголовками поднят до эталонных 14px, и в жесткие
     516px он больше не влезал (запас был 59.6px, прирост 67.2px) – карточка
     дорастает по содержимому, как эталонная «Архитектура». */
  .readiness-mobile {
    padding: 19px 0 19px; font-family: "Inter", -apple-system, sans-serif;
  }
  .readiness-mobile > .map-mobile-label {
    position: static; width: auto; margin: 0 21px;
  }
  .readiness-mobile__scale {
    display: block; position: static; width: min(385px, calc(100% - 14px)); height: auto;
    margin: 36px auto 0;
  }
  .readiness-mobile__items { display: grid; gap: 20px; margin: 30px 24px 0; }
  .readiness-mobile__items article { margin: 0; }
  .readiness-mobile__items h3 {
    margin: 0 0 10px; font-size: clamp(18px, 5.13vw, 20px); font-weight: 300;
    line-height: 1; letter-spacing: -.018em; color: #161617;
  }
  /* Кегль эталонного абзаца (14/21): на 12px в строку набивалось 41-50 знаков
     против эталонных 28-35, и клиент читала это как ранний обрез. */
  .readiness-mobile__items p {
    margin: 0; width: 100%; max-width: none; font-size: 14px; font-weight: 300;
    line-height: 1.5; color: #161617;
  }

  /* Исследовательские этапы повторяют удачную мобильную архитектуру:
     номер в компактной капсуле, название в одну строку и текст до правого
     поля карточки. Исходные узкие ширины Figma здесь давали ранний обрез. */
  .case-page [aria-labelledby="research"] .research-stage-title,
  .case-page [aria-labelledby="research"] .research-stage-body {
    width: 85.5% !important;
  }
  .case-page [aria-labelledby="research"] .research-stage-title {
    white-space: nowrap !important;
  }

  /* Во внутреннем мобильном макете продукта изображение чуть компактнее,
     но внешняя геометрия карточки остается общей для всей колонки. */
  .case-page--cognitive [aria-labelledby="product"] .m-img {
    scale: .9; transform-origin: center bottom;
  }

  .architecture-mobile {
    padding: clamp(20px, 6.15vw, 24px); font-family: "Inter", -apple-system, sans-serif;
  }
  .architecture-mobile__title {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    font-size: clamp(28px, 8.2vw, 32px); font-weight: 300; line-height: 1.04;
    letter-spacing: -.02em;
  }
  .architecture-mobile__title img {
    display: block; flex: 0 0 auto; width: 22px; height: 22px; margin-top: .16em;
  }
  .architecture-mobile__lead {
    margin: 24px 0 30px; font-size: 15px; font-weight: 500; line-height: 1.35;
  }
  .architecture-step { padding: 0 0 28px; }
  .architecture-step + .architecture-step { padding-top: 28px; border-top: 1px solid rgba(24, 24, 26, .14); }
  .architecture-step:last-child { padding-bottom: 0; }
  .architecture-step__head {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start;
    gap: 12px; margin-bottom: 20px;
  }
  .architecture-step__head span {
    display: grid; place-items: center; min-height: 30px; border: 1px solid rgba(24, 24, 26, .2);
    border-radius: 999px; font-size: 14px; line-height: 1;
  }
  .architecture-step__head h3 {
    margin: 0; font-size: clamp(23px, 6.65vw, 26px); font-weight: 300;
    line-height: 1.06; letter-spacing: -.015em;
  }
  .architecture-step p {
    margin: 0 0 12px 58px; font-size: 14px; font-weight: 300; line-height: 1.5;
  }
  .architecture-step p:last-child { margin-bottom: 0; }

  /* Эти два названия имеют заданное клиентом число строк. Встроенный reflow
     не должен снимать nowrap и сужать их до исходной рамки Figma. */
  .case-page--cognitive #context { width: 70% !important; white-space: nowrap !important; }
  .case-page--cognitive #result { width: 60% !important; white-space: nowrap !important; }

  /* ---------- единый мобильный язык блоков с этапами ----------
     Ровно те же метрики, что у эталона .architecture-mobile: он единственный
     работал именно потому, что на узком экране выключает масштабируемую сцену
     и рисует поток с РЕАЛЬНЫМИ пикселями. Раскладку собирает buildStageFlow()
     в js/case-fit.js из тех же узлов макета. */
  .case-page .map--stage-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page .map--stage-flow > .map__stage { display: none; }
  .case-page .map--stage-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }
  /* Заголовок блока дает сам поток – вынесенная метка была бы вторым таким же.
     Но если у блока заголовка в макете нет (как у «фундаментальных
     направлений»), метка остается единственным именем блока: скрывать ее нельзя,
     иначе поток берет ее за заголовок и рисует 32px вместо 10. */
  .case-page .map--stage-flow:has(.stage-flow__title) > .map-mobile-label { display: none; }

  .stage-flow {
    padding: clamp(20px, 6.15vw, 24px); font-family: "Inter", -apple-system, sans-serif;
  }
  /* поток без заголовка: сверху резерв под абсолютную метку (ее верх + высота
     иконки + зазор), иначе первый этап встает под метку с наложением 13px */
  .stage-flow--no-title {
    padding-top: calc(clamp(14px, 4.87vw, 20px) + clamp(16px, 4.62vw, 18px) + 12px);
  }
  .stage-flow__title {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    font-size: clamp(28px, 8.2vw, 32px); font-weight: 300; line-height: 1.04;
    letter-spacing: -.02em;
  }
  .stage-flow__title img {
    display: block; flex: 0 0 auto; width: 22px; height: 22px; margin-top: .16em;
  }
  /* В эталоне зазор до первого этапа дает вводный абзац (margin 24/30px). Там,
     где вводного абзаца в макете нет, заголовок ложился прямо на капсулу
     первого этапа: зазор 0px по рамке и −2.7px по глифам. Держим тот же ритм
     сами, а при наличии лида/полосы отдаем зазор им. */
  .stage-flow__title { margin-bottom: 30px; }
  .stage-flow__title:has(+ .stage-flow__lead),
  .stage-flow__title:has(+ .stage-flow__intro),
  .stage-flow__title:has(+ .stage-flow__band) { margin-bottom: 0; }
  .stage-flow__lead {
    margin: 24px 0 30px; font-size: 15px; font-weight: 500; line-height: 1.35;
  }
  .stage-flow__intro {
    margin: 0 0 24px; font-size: 14px; font-weight: 300; line-height: 1.5;
  }
  /* Полоса статистики: в сцене это ряд из шести чисел, который на узком экране
     не читался. В потоке – сетка по три, числа стоят друг под другом. */
  .stage-flow__band {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px; margin: 26px 0 30px;
  }
  .stage-flow__num {
    display: block; font-size: clamp(24px, 7vw, 28px); font-weight: 300;
    line-height: 1.1; letter-spacing: -.02em;
  }
  .stage-flow__cap {
    display: block; margin-top: 6px; font-size: 11px; font-weight: 300;
    line-height: 1.35; color: rgba(24, 24, 26, .6); overflow-wrap: anywhere;
  }
  .stage-flow__step { padding: 0 0 28px; }
  .stage-flow__step + .stage-flow__step {
    padding-top: 28px; border-top: 1px solid rgba(24, 24, 26, .14);
  }
  .stage-flow__step:last-child { padding-bottom: 0; }
  .stage-flow__head {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start;
    gap: 12px; margin-bottom: 20px;
  }
  .stage-flow__head span {
    display: grid; place-items: center; min-height: 30px;
    border: 1px solid rgba(24, 24, 26, .2); border-radius: 999px;
    font-size: 14px; line-height: 1;
  }
  /* «Этап 1» вместо «01» в 46px не влезает: капсуле дана своя фиксированная
     колонка 72px – тогда индент абзацев считается от нее (72+12=84px) и остается
     единым для всего блока. Раньше у таких блоков margin-left обнулялся, и на
     одном сайте выходило два разных языка этапов: индент 58px в одних блоках и
     0px в других. */
  .stage-flow__head:has(span.is-long) { grid-template-columns: 72px minmax(0, 1fr); }
  .stage-flow__head span.is-long { padding: 0 8px; white-space: nowrap; }
  /* Нижняя граница 20px, а не эталонные 23px: на 320px под текст остается 202px,
     а «Фокус исследования» при 23px просит 227px и уходит в две строки – клиент
     требует одну строку на всех ширинах. От 345px и выше работает та же
     формула, что у эталона (6.65vw), поэтому язык блоков не расходится.
     overflow-wrap нужен для длинных слов вроде «экспериментального»: на 320px
     оно не переносилось и вылезало за карточку на 31px. */
  .stage-flow__head h3 {
    margin: 0; font-size: clamp(20px, 6.65vw, 26px); font-weight: 300;
    line-height: 1.06; letter-spacing: -.015em; overflow-wrap: anywhere;
  }
  .stage-flow__step p {
    margin: 0 0 12px 58px; font-size: 14px; font-weight: 300; line-height: 1.5;
  }
  .stage-flow__step p:last-child { margin-bottom: 0; }
  /* у растянутой капсулы индент считается от ее колонки: 72 + 12 = 84 */
  .stage-flow__step:has(span.is-long) p { margin-left: 84px; }

  /* темный блок: те же метрики, светлые чернила из макета */
  .case-page .map--dark .stage-flow__cap { color: rgba(244, 244, 244, .65); }
  .case-page .map--dark .stage-flow__head span { border-color: rgba(244, 244, 244, .3); }
  .case-page .map--dark .stage-flow__step + .stage-flow__step {
    border-top-color: rgba(244, 244, 244, .16);
  }
  .case-page .map--dark .stage-flow__title img { filter: brightness(0) invert(1); }

/* ---------- кейс «портфель»: единая шапка блоков ----------
     Рукописный заголовок и подпись под ним уезжают из масштабируемой сцены в
     поток – только так у них получается ОДИН размер во всех блоках. Внутри
     сцены размер задавал подъем кегля, который у каждого блока упирался в свое
     наложение: подпись гуляла от 5.6 до 11.0px при одном макетном кегле 20,
     а буквы заголовка – от 7.5 до 10.5px (замеры в js/case-fit.js).

     Заголовку кегль задает ВЫСОТА кривой: она одна на все блоки, поэтому
     буквы везде одинаковые, а ширина у каждой надписи своя – какой длины
     фраза. Самая длинная («математическая архитектура модели», 483x30)
     упирается в ширину карточки, и тогда max-width сам уменьшает высоту.
     Размер подписи – тот, который клиент отметила как идеальный: 11px на
     карточке 370 (блок «нечеткие оценки»), дальше растет вместе с карточкой. */
  /* Высота задана ПРЕДЕЛОМ, а не фиксированным значением: при фиксированной
     высоте max-width обрезает только ширину, и на 320px три самые длинные
     надписи сжимались по горизонтали на 15% (замер: 245x18 при природных
     483x30). С парой max-height/max-width браузер держит пропорцию сам. */
  .head-out__title, .arch-flow__title {
    display: block; width: auto; height: auto; margin: 0 auto;
    max-width: 100%; max-height: clamp(18px, 5.4cqw, 30px);
  }
  /* Хвост под чернилами надписи: в кривых каждой фразы под последней буквой
     остается своя пустота (замер getBBox по шести файлам: 0.1 / 0.5 / 1.0 /
     0.3 / 0.9 / 0.6 единицы при высоте рамки 30-42). Из-за нее чернильный
     зазор до подписи гулял от 11.0 до 12.5px. Отрицательное поле снимает эту
     пустоту, и расстояние считается от самих букв – одинаково во всех шести
     карточках. Эталон взят у «нечетких оценок» (просьба клиента). */
  .head-out__title, .arch-flow__title { margin-bottom: calc(var(--ink-tail, 0) * -1px); }
  .head-out__lead, .arch-flow__lead {
    margin: clamp(10px, 3.2cqw, 14px) 0 0;
    font-family: "Neucha", "Inter", sans-serif; font-weight: 400;
    font-size: clamp(11px, 2.97cqw, 15px); line-height: 1.1;
    letter-spacing: -.01em; text-align: center;
  }
  /* «Сильная заявка может не войти в портфель…» – второй абзац правой выноски
     блока «зависимости». Клиент: на маленьких экранах не выводить, оставить
     только на ПК. Первый абзац той же выноски остается. */
  .case-page--portfolio .pf-desk-only { display: none; }

  .case-page--portfolio .map--head-out { aspect-ratio: auto; }
  .case-page--portfolio .map--head-out > .head-out {
    display: block; position: static; width: auto;
    padding: clamp(20px, 6.15vw, 24px) clamp(20px, 6.15vw, 24px) 0;
  }
  .case-page--portfolio .map--head-out .head-out-source { display: none !important; }
  /* Сцена встает В ПОТОК под шапку. Ее верх пуст ровно на макетный отступ
     первого оставшегося узла (--head-cut ставит js/case-fit.js) – снимаем его
     отрицательным полем в масштабе сцены и оставляем 18px воздуха. */
  .case-page--portfolio .map--head-out > .map__stage {
    position: relative !important;
    margin-top: calc(18px - var(--head-cut, 0) * 1px * var(--k, 1));
  }

/* ---------- «математическая архитектура модели» (узел 25:344, 1432x997) ----------
     Единственный блок кейса, который на телефоне разваливался: таблица
     обозначений и вывод стоят в макете справа от этапов, поэтому в столбик
     они вставали МЕЖДУ вторым и третьим этапом, а сама сцена ужималась в
     0.2479 – названия этапов 8.1px, абзацы 4.1px.
     Порядок в потоке задан клиентом: заголовок, подпись, схема слоев,
     обозначения, вывод, «три уровня», три этапа подряд. Этапы набраны общим
     мобильным языком блоков (.stage-flow__step), поэтому кегли и отступы у
     них те же, что во всех остальных блоках сайта. */
  .case-page--portfolio .map--arch-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--portfolio .map--arch-flow > .map__stage { display: none; }
  .case-page--portfolio .map--arch-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }
  .arch-flow {
    padding: clamp(20px, 6.15vw, 24px); font-family: "Inter", -apple-system, sans-serif;
  }
  /* Кадр макета внутри рамки задан процентами, поэтому пропорция рамки (--iar)
     переносит его в любую ширину без искажения */
  .arch-flow__pic {
    display: block; background-repeat: no-repeat;
    aspect-ratio: var(--iar, 1 / 1); border-radius: 10px;
  }
  /* Обе картинки входят в карточку целиком, без горизонтальной прокрутки.
     Схема слоев – во всю ширину строки, таблица обозначений уже: в макете она
     втрое мельче схемы (400 против 915 единиц), во всю ширину она выглядела
     непропорционально большой. */
  .arch-flow__pic--layers { width: 100%; margin: clamp(18px, 5vw, 24px) 0 0; }
  .arch-flow__pic--table {
    width: 75%; margin: clamp(18px, 5vw, 24px) auto 0;
  }
  .arch-flow__note {
    margin: clamp(14px, 4vw, 18px) 0 0;
    font-family: "Neucha", "Inter", sans-serif; font-weight: 400;
    font-size: clamp(11px, 2.97cqw, 15px); line-height: 1.25; letter-spacing: -.01em;
  }
  /* «три уровня» – подзаголовок внутри блока, поэтому мельче заголовка блока */
  .arch-flow__sub {
    display: block; width: auto; height: auto;
    max-width: 60%; max-height: clamp(15px, 4.3cqw, 24px);
    margin: clamp(26px, 7vw, 34px) 0 clamp(18px, 5vw, 22px);
  }

/* ---------- «Результат модели» (узел 6:515, 1432x624): шапка живьем ----------
     Замер причины: блок самый широкий на странице, k=0.2584 при 390px, и кегли
     макета 28/16/10 давали 7.24/4.13/2.58px. Подъем кегля отклонялся на всех 12
     шагах из-за наложения «заголовок x лид»: растр волны (top 18.59%, height
     81.41%) склеивает композицию в ОДИН ряд раздвижки, а у титула до лида
     всего 72 макетных px, то есть две строки. Поэтому шапка живет в потоке
     (js/case-fit.js, buildEvidenceResultHead), а сцена с волной и капсулами
     остается без единого сдвига. */
  .case-page--evidence .map[aria-labelledby="result"] { aspect-ratio: auto; }
  .case-page--evidence .map[aria-labelledby="result"] > .result-head {
    display: block; position: static; width: auto;
    /* сверху резерв под абсолютную метку блока: ее верх + высота иконки + 12,
       ровно как у .stage-flow--no-title */
    padding: calc(clamp(14px, 4.87vw, 20px) + clamp(16px, 4.62vw, 18px) + 12px)
             clamp(20px, 6.15vw, 24px) 0;
    font-family: "Inter", -apple-system, sans-serif;
  }
  /* Заголовок – в 1.5 раза мельче макетных 28px, ровно 18.7px на ЛЮБОЙ ширине
     (просьба клиента, второй заход). Прошлая правка ставила кегль классу
     .res-head на узле сцены, а этот узел на телефоне скрыт (.result-head-source),
     то есть не применялась вовсе: живой замер давал прежние 28px.
     Лид рядом остается 16px – эталон «Единицей прогресса…». */
  .case-page--evidence .map[aria-labelledby="result"] > .result-head h2 {
    margin: 0; font-size: 18.7px; font-weight: 300;
    line-height: 1.15; letter-spacing: -.02em; color: #161617;
  }
  .case-page--evidence .map[aria-labelledby="result"] > .result-head p {
    margin: 24px 0 0; font-size: clamp(14px, 4.1vw, 16px); font-weight: 300;
    line-height: 1.5; letter-spacing: -.01em; color: #747475;
  }
  .case-page--evidence .map[aria-labelledby="result"] .result-head-source { display: none !important; }
  /* Сцена встает В ПОТОК под шапку. Высоту сцены НЕ трогаем: top у всех ее
     узлов задан в процентах от нее, и любая правка height роняет композицию
     (проверено: при height: calc(624px * var(--k)) капсулы уехали вверх на 295-302
     макетных px). Пустой верх сцены срезаем отрицательным margin, так что зазор
     до графики одинаков на всех ширинах. 44 = 74 (верх белой плашки с blur в
     макетных px) минус 30 (радиус blur): выше белая дымка дошла бы до последней
     строки лида и выбелила бы ее. */
  .case-page--evidence .map[aria-labelledby="result"] > .map__stage {
    position: relative !important; margin-top: calc(-44px * var(--k, 1));
  }
  /* Подписи на волне остаются РОВНО макетными (10px). Белые прямоугольники под
     ними – маски поверх капсул, впечатанных в растр, поэтому крупнее 11.5
     макетных px текст из капсулы вылезает. Правило нужно и потому, что после
     выноса шапки boost больше не натыкается на наложение и поднимает --tk до 3.4. */
  .case-page--evidence .map[aria-labelledby="result"] > .map__stage > .t {
    font-size: calc(var(--fs-px, 10) * 1px) !important;
  }

/* ---------- «Ретроспективная проверка» (узел 6:481, 706x500) ----------
     Лид живет в потоке ровно как шапка «Результата модели», и стиль у него тот
     же, что у абзаца «Единицей прогресса…»: 16px, вес 300, интерлиньяж 1.5,
     трекинг −0.01em, цвет #747475 (просьба клиента – «этот цвет этот размер»).
     Внутри сцены он давал ТРИ строки вместо двух макетных, лежал на градиенте
     (49px по вертикали) и упирался в выноски.
     Картинка – последний узел сцены и в макете кончается ровно на краю рамки
     (13% + 87% = 100%), поэтому карточке снят нижний отступ (map--flush-bottom
     в js/case-fit.js): под градиентом больше нет 21px белого поля. */
  .case-page--evidence .map[aria-labelledby="retrocheck"] { aspect-ratio: auto; }
  .case-page--evidence .map[aria-labelledby="retrocheck"] > .rc-head {
    display: block; position: static; width: auto;
    /* сверху резерв под абсолютную метку блока – как у .result-head */
    padding: calc(clamp(14px, 4.87vw, 20px) + clamp(16px, 4.62vw, 18px) + 12px)
             clamp(20px, 6.15vw, 24px) 0;
    font-family: "Inter", -apple-system, sans-serif;
  }
  .case-page--evidence .map[aria-labelledby="retrocheck"] > .rc-head p {
    margin: 0; font-size: clamp(14px, 4.1vw, 16px); font-weight: 300;
    line-height: 1.5; letter-spacing: -.01em; color: #747475;
  }
  .case-page--evidence .map[aria-labelledby="retrocheck"] .rc-head-source { display: none !important; }
  /* Сцена встает В ПОТОК под лид. Высоту сцены не трогаем – top всех ее узлов
     задан в процентах от нее. Пустой верх сцены (13% рамки = 65 макетных px)
     и есть зазор до градиента: 34px на 390. */
  .case-page--evidence .map[aria-labelledby="retrocheck"] > .map__stage {
    position: relative !important;
  }

/* ---------- «Структура доказательности проекта»: поток вместо сцены ----------
     Легенда стоит ПОД заголовком одной строкой из трех равных колонок, а полосы
     нарисованы штриховкой (шаг 4px, штрих 3/2/1px – числа макета), поэтому
     штрихи не расходятся ни при каком масштабе. Раскладку собирает
     buildBarsFlow() в js/case-fit.js из тех же узлов макета. */
  .case-page .map--bars-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page .map--bars-flow > .map__stage { display: none; }
  .case-page .map--bars-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }
  .bars-flow {
    padding: clamp(20px, 6.15vw, 24px); font-family: "Inter", -apple-system, sans-serif;
    color: #161617;
  }
  /* заголовок блока – штатная метка «иконка + капс», в потоке она обычная строка */
  .bars-flow > .map-mobile-label { position: static; width: auto; margin: 0; }
  /* Легенда: три РАВНЫЕ колонки в одну строку. Иконка стоит НАД подписью: рядом
     с ней «Подтверждено» (одно слово, 12 знаков) просит 94px, а на 320px
     колонка всего 80px – слово вылезало бы на соседнюю. */
  .bars-flow__legend {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; margin: 20px 0 0; padding: 0; list-style: none;
  }
  .bars-flow__legend li {
    margin: 0; font-size: clamp(10px, 3.05vw, 13px); font-weight: 500;
    line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere;
  }
  /* иконка тона – четыре штриха 10x1px с шагом 2.33px, как на ПК */
  .bars-flow__key {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 10px; height: 8px; flex: 0 0 auto;
  }
  .bars-flow__legend .bars-flow__key { margin: 0 0 6px; }
  .bars-flow__key > i { display: block; height: 1px; background: currentColor; }
  .bars-flow__key--yes { color: #161617; }
  .bars-flow__key--maybe { color: rgba(24, 24, 26, .6); }
  .bars-flow__key--no { color: rgba(24, 24, 26, .4); }

  /* критерии идут друг за дружкой, ритм таблицы участников (css/map.css .tc) */
  .bars-flow__row { padding: 16px 0; border-top: 1px solid rgba(24, 24, 26, .12); }
  .bars-flow__row:first-of-type { margin-top: 20px; }
  .bars-flow__row:last-child { padding-bottom: 0; }
  .bars-flow__row h3 {
    margin: 0 0 12px; font-size: 14px; font-weight: 400; line-height: 1.35;
  }
  /* Полоса: пять штрихов шагом 4px, толщина 3/2/1px по тону – геометрия узлов
     6:157…6:177. Рисуется заливкой, поэтому штрихи не могут «слететь». */
  .bars-flow__bar { display: flex; height: 19px; }
  .bars-flow__seg { display: block; height: 19px; flex: 0 0 auto; }
  .bars-flow__seg--yes {
    background-image: repeating-linear-gradient(to bottom, #161617 0 3px, transparent 3px 4px);
  }
  .bars-flow__seg--maybe {
    background-image: repeating-linear-gradient(to bottom, rgba(24, 24, 26, .6) 0 2px, transparent 2px 4px);
  }
  .bars-flow__seg--no {
    background-image: repeating-linear-gradient(to bottom, rgba(24, 24, 26, .4) 0 1px, transparent 1px 4px);
  }
  /* Проценты в макете стоят чипами ВНУТРИ сегментов. На телефоне узкий сегмент
     их не вмещает (9% от полосы 79% – это 18.7px при чипе «9%» в 27px), поэтому
     они идут строкой под полосой, каждый со своей иконкой тона: кегль 14px и ни
     одного наложения. */
  .bars-flow__values {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0;
    font-size: 14px; font-weight: 300; line-height: 1.2;
  }
  .bars-flow__values span { display: inline-flex; align-items: center; gap: 6px; }

}

@media (min-width: 420px) and (max-width: 1199px) {
  .case-page .map-mobile-label { font-size: clamp(8.5px, 2vw, 10px); letter-spacing: .01em; }
}

/* ПУНКТ 6. Абзац блока «Как сигнал появляется раньше проблемы» получает кегль
   и зазор соседа по ряду – блока «скорость против надежности». Оба блока стоят
   в одном ряду и на узком экране считаются В ОДНОМ масштабе (signal идет в
   режиме is-eq по ширине 409 узкого соседа), поэтому достаточно совпадения
   МАКЕТНЫХ величин: кегль 12 вместо 14 и зазор 14px вместо 24px под
   заголовком 36px (25 + 36 + 14 = 75px от верха рамки 620 = 12.097%).
   var(--tk) сохраняет пропорцию, если блок все же попадет в режим подъема
   кегля is-big. Десктоп от 1200px не тронут – правило живет только здесь. */
@media (max-width: 1199px) {
  .case-page--signals2 .map[aria-labelledby="signal"] .signals-lead {
    font-size: calc(12px * var(--tk, 1)) !important;
    top: 12.097% !important;
  }
}

/* ПУНКТ 7. «ПОРОГ ФОРМИРОВАНИЯ ДОКАЗАТЕЛЬНОЙ ГИПОТЕЗЫ» (узел 1:2407, 1433x371).
   Метрики – эталон «Профиля проектной готовности» (.readiness-mobile) один в
   один: padding 19px 0, метка 0 21px, картинка min(385px, 100% − 14px) по
   центру, items gap 20px / margin 30px 24px 0, названия clamp(18px,5.13vw,20px)
   и абзацы 14px/1.5. Правила стоят отдельно, а не дописаны в селекторы эталона,
   чтобы когнитивный кейс нельзя было задеть вообще никак. */
@media (max-width: 1199px) {
  /* карточка растет по содержимому: высоту в атрибут style пишет fit() */
  .case-page--signals2 .map--signals-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--signals2 .map--signals-flow > .map__stage { display: none; }
  .case-page--signals2 .map--signals-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }

  .threshold-mobile {
    padding: 19px 0 19px; font-family: "Inter", -apple-system, sans-serif;
  }
  .threshold-mobile > .map-mobile-label {
    position: static; width: auto; margin: 0 21px;
  }
  /* 36px эталонного отступа под метку отданы числу, картинке остается 12px:
     суммарный ритм «метка → графика» тот же 36px, что у эталона */
  .threshold-mobile__value {
    margin: 36px 24px 0; font-size: clamp(28px, 9.23vw, 36px); font-weight: 300;
    line-height: 1; letter-spacing: -.01em; text-align: center; color: #161617;
  }
  /* кадрирование градиента осталось инлайновым (background-size/position
     макета), поэтому здесь только раскладка и пропорция 779/231 */
  .threshold-mobile__scale {
    display: block; position: static; width: min(385px, calc(100% - 14px));
    aspect-ratio: var(--iar, 779 / 231); height: auto; margin: 12px auto 0;
  }
  .threshold-mobile__items { display: grid; gap: 20px; margin: 30px 24px 0; }
  .threshold-mobile__items article { margin: 0; }
  .threshold-mobile__items h3 {
    margin: 0 0 10px; font-size: clamp(18px, 5.13vw, 20px); font-weight: 300;
    line-height: 1; letter-spacing: -.018em; color: #161617;
  }
  .threshold-mobile__items p {
    margin: 0; width: 100%; max-width: none; font-size: 14px; font-weight: 300;
    line-height: 1.5; color: #161617;
  }
}

/* ПУНКТ 8. «СЕМЬ ФОРМ, КОТОРЫЕ ИЩЕТ СИСТЕМА» (узел 1:2424, 1004x486, темный).
   Одна строка макета – три столбца, значит на телефоне три строки: название,
   описание, метод. Мини-график и стрелка идут вместе со своей формой, формы
   разделены линией – ровно как в таблице «Главного вопроса исследования».
   Кегли – принятый язык блоков: заголовок clamp(28px,8.2vw,32px) как у
   «Архитектуры», названия clamp(18px,5.13vw,20px) и абзацы 14px как у «Профиля
   проектной готовности». Мельче 14px в блоке нет ничего. */
@media (max-width: 1199px) {
  /* эти три правила общие с пунктом 7 – если тот блок уже вставлен, повторять
     их не нужно */
  .case-page--signals2 .map--signals-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--signals2 .map--signals-flow > .map__stage { display: none; }
  .case-page--signals2 .map--signals-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }

  .forms-flow {
    padding: clamp(20px, 6.15vw, 24px); font-family: "Inter", -apple-system, sans-serif;
  }
  .forms-flow__title {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 30px;
    font-size: clamp(28px, 8.2vw, 32px); font-weight: 300; line-height: 1.04;
    letter-spacing: -.02em; color: #fff;
  }
  .forms-flow__title img {
    display: block; flex: 0 0 auto; width: 22px; height: 22px; margin-top: .16em;
  }
  .forms-flow__row { padding: 0 0 24px; }
  .forms-flow__row + .forms-flow__row {
    padding-top: 24px; border-top: 1px solid rgba(244, 244, 244, .16);
  }
  .forms-flow__row:last-child { padding-bottom: 0; }
  /* рамка мини-графика ОДНА для всех семи форм – 96x34 из макета, 1:1 в
     пикселях экрана (на десктопе она рисовалась 83x30) */
  .forms-flow__chart {
    display: block; position: relative; width: 96px; height: 34px; margin: 0 0 14px;
  }
  .forms-flow__chart img { position: absolute; display: block; margin: 0; }
  /* волосяная линия макета имеет height 0: без своего минимума ее подменяет
     общее правило .m-rule, считающее толщину от масштаба сцены */
  .forms-flow__chart img.m-rule { min-height: 1px; }
  .forms-flow__name {
    margin: 0 0 10px; font-size: clamp(18px, 5.13vw, 20px); font-weight: 300;
    line-height: 1; letter-spacing: -.018em; text-transform: uppercase; color: #fff;
  }
  .forms-flow__desc {
    margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5;
    color: rgba(244, 244, 244, .85);
  }
  /* стрелка макета осталась при методе, поэтому видно, что идет после нее */
  .forms-flow__method {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
    font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(244, 244, 244, .62);
  }
  .forms-flow__method img {
    flex: 0 0 auto; width: 16px; height: auto; margin-top: .45em;
  }
}

/* ПУНКТ 6. «КАК ДОКАЗАТЬ РАБОТОСПОСОБНОСТЬ СИСТЕМЫ» (узел 1:2523, 844x531).
   Поток собирает ensureLeadTimeFlow() в js/case-fit.js из ТЕХ ЖЕ узлов макета.

   Почему поток, а не кегли. Блок вписывался в колонку масштабом k=0.44, и лид
   рисовался 5.3px. Подъем кеглей внутри сцены (прошлая правка, классы .mp-lead
   и .mp-params-*) читаемость дал, но композицию сломал: замер на 390 – лид
   налезал на подпись «время опережения» на 43.4x4.7px и на все четыре подписи
   засечек на 17.9-42.6 x 32.3px, всего 14 наложений на 390 и 21 на 320. В
   масштабируемой сцене места под крупный текст нет физически: восемь подписей
   графика по 14px просят около 600px против 322px содержимого карточки.

   Порядок как просила клиент: заголовок, лид, СХЕМА по центру, семь параметров
   друг за дружкой. Метрики – принятый язык блоков: заголовок и лид от
   .stage-flow, абзацы 14px, ничего мельче 12px в блоке нет. */
@media (max-width: 1199px) {
  .case-page--signals2 .map--lead-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--signals2 .map--lead-flow > .map__stage { display: none; }
  .case-page--signals2 .map--lead-flow > .map__mobile {
    display: block; position: static; width: 100%;
  }
  /* имя блока дает заголовок потока – вынесенная метка была бы вторым таким же */
  .case-page--signals2 .map--lead-flow > .map-mobile-label { display: none; }

  /* подпись раздела внутри потока: тот же капс, что у метки блока */
  .lead-flow__cap {
    margin: 0 0 16px; font-size: 12px; font-weight: 500; line-height: 1.3;
    letter-spacing: .01em; text-transform: uppercase; color: rgba(24, 24, 26, .6);
  }
  /* «время опережения» держит свой цвет из макета (#9E681B) */
  .lead-flow__cap--lead { color: #9e681b; }

  /* общий .stage-flow__intro отдает зазор заголовку сверху (margin-bottom у
     титула обнуляется), здесь заголовок и лид иначе слипались вплотную */
  .lead-flow > .stage-flow__intro { margin-top: 24px; }

  /* «работоспособности» – слово в 17 знаков, самое длинное среди заголовков
     блоков. Замер на общих clamp(28px, 8.2vw, 32px): слово просит 260px против
     228px колонки на 320, 274 против 264 на 360 и 297 против 290 на 390 – три
     ширины с обрезом у края карточки. Свой clamp дает запас на всех трех
     (217/244/264px), а от 438px кегль тот же, что у соседних блоков.
     overflow-wrap – страховка: перенос внутри слова лучше обреза. */
  .lead-flow > .stage-flow__title {
    font-size: clamp(23px, 7.3vw, 32px); overflow-wrap: anywhere;
  }

  .lead-flow__chart { display: block; margin: 6px 0 0; }
  .lead-stops { display: block; margin: 0; padding: 0; list-style: none; }
  /* Засечки друг за дружкой: точка и вертикальная связка слева, подписи
     справа – ни одна подпись не встает рядом с другой, поэтому наложений
     между ними быть не может по построению. */
  .lead-stop { position: relative; padding: 0 0 20px 26px; }
  .lead-stop:last-child { padding-bottom: 0; }
  .lead-stop__dot {
    position: absolute; left: 0; top: 5px; width: 10px; height: 10px;
    border-radius: 999px; background: var(--dot, #388311);
  }
  /* линия оси – та же, что в макете: #18181A при 12% */
  .lead-stop__rail {
    position: absolute; left: 4.5px; top: 15px; bottom: 0; width: 1px;
    background: rgba(24, 24, 26, .12);
  }
  .lead-stop:last-child .lead-stop__rail { display: none; }
  /* бежевая полоса макета (#E0A24A при 18%) накрывает те же засечки, что и на
     ПК: связка «подтверждение вторым источником → проблема стала очевидной» */
  .lead-stop.is-lead .lead-stop__rail {
    left: 3.5px; width: 3px; border-radius: 999px;
    background: rgba(224, 162, 74, .45);
  }
  .lead-stop__name {
    margin: 0; font-size: 14px; font-weight: 400; line-height: 1.35;
    letter-spacing: -.01em; color: #161617;
  }
  .lead-stop__note {
    margin: 4px 0 0; font-size: 14px; font-weight: 300; line-height: 1.4;
  }

  .lead-flow__check { display: block; margin: 30px 0 0; }
  .lead-flow__list { display: block; margin: 0; padding: 0; list-style: none; }
  /* по одному пункту в строку, между пунктами линия – образец .forms-flow */
  .lead-flow__list li {
    padding: 14px 0; font-size: 14px; font-weight: 300; line-height: 1.5;
    color: rgba(24, 24, 26, .6);
  }
  .lead-flow__list li:first-child { padding-top: 0; }
  .lead-flow__list li + li { border-top: 1px solid rgba(24, 24, 26, .12); }
  .lead-flow__list li:last-child { padding-bottom: 0; }
}

/* Вопрос AI-кейса читается последовательно на всех экранах: роль, затем ее
   четыре пункта. Это убирает разрывы, которые создавала абсолютная таблица. */
.case-page--proof .map--proof-flow > .proof-question-flow { display: none; }
.proof-question-flow__title {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  font-size: clamp(28px, 3.1vw, 36px); font-weight: 300; line-height: 1;
  letter-spacing: -.01em;
}
.proof-question-flow__title img { width: 27px; height: 27px; object-fit: contain; flex: 0 0 auto; }
.proof-question-flow__question {
  margin: clamp(22px, 3vw, 34px) 0; max-width: 900px;
  font-size: clamp(18px, 2vw, 26px); font-weight: 500; line-height: 1.25;
  background: linear-gradient(90deg, #437cb3, #01898b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-question-flow__roles { display: grid; gap: 20px; }
.proof-question-flow__role { padding-top: 20px; border-top: 1px solid rgba(24, 24, 26, .12); }
.proof-question-flow__role:first-child { padding-top: 0; border-top: 0; }
.proof-question-flow__role h3 {
  display: inline-flex; align-items: center; min-height: 34px; margin: 0 0 14px;
  padding: 7px 16px; border: 1px solid rgba(24, 24, 26, .2); border-radius: 999px;
  font-size: 14px; font-weight: 300; line-height: 1; text-transform: uppercase;
}
.proof-question-flow__role ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.proof-question-flow__role li { font-size: 14px; font-weight: 300; line-height: 1.45; }

@media (max-width: 1199px) {
  .case-page--proof .map--proof-flow {
    height: auto !important; aspect-ratio: auto !important; display: block;
  }
  .case-page--proof .map--proof-flow > .map__stage { display: none; }
  .case-page--proof .map--proof-flow > .proof-question-flow {
    display: block; position: static; width: 100%;
    padding: clamp(22px, 4vw, 46px); font-family: "Inter", -apple-system, sans-serif;
  }
  .case-page--proof [aria-labelledby="design"] .proof-closed-pilot {
    width: 40% !important; white-space: nowrap !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .proof-question-flow__roles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .proof-question-flow__role,
  .proof-question-flow__role:first-child {
    padding: 0 14px; border-top: 0; border-left: 1px solid rgba(24, 24, 26, .12);
  }
  .proof-question-flow__role:first-child { padding-left: 0; border-left: 0; }
  .proof-question-flow__role:last-child { padding-right: 0; }
  .proof-question-flow__role h3 { display: flex; justify-content: center; text-align: center; }
}

.case__note {
  font-size: clamp(11px, .85vw, 12px); font-weight: 300; line-height: 1.5;
  color: #9a9a9a; max-width: 62ch; grid-column: 2;
}
@media (min-width: 1000px) {
  /* в макете оговорка прижата к правому краю контента, ширина 437 из 1432 */
  .case__note { grid-column: 3; justify-self: end; width: min(437px, 31vw); max-width: none; }
}

/* ---------- плашка раздела ---------- */
.tile {
  background: #fff; border-radius: 16px;
  padding: clamp(16px, 1.7vw, 25px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px);
  min-width: 0; container-type: inline-size;
}
.tile--dark { background: #191e1f; color: #f4f4f4; }
.tile--ink { background: #13161a; color: #f4f4f4; }
.tile--plain { background: none; padding-inline: clamp(4px, .6vw, 10px); }

/* ярлык плашки: иконка + подпись капсом (в макете 9.8-10 Medium) */
.label {
  /* wrap обязателен: длинная подпись рядом с иконкой не переносилась и
     раздувала страницу на узких экранах */
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0;
  font-size: clamp(9.5px, .72vw, 10px); font-weight: 500;
  text-transform: uppercase; letter-spacing: .02em; color: #18181a;
}
.label img { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.tile--dark > .label, .tile--ink > .label, .label--light { color: #fff; }
/* иконки макета нарисованы темными: на темном инвертируем */
.tile--dark > .label img, .tile--ink > .label img, .label--light img { filter: invert(1) brightness(1.8); }

/* ---------- ряд из трех карточек (макет: 408 / 448 / 535) ---------- */
.trio { display: grid; gap: clamp(10px, 1.2vw, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1180px) {
  .trio { grid-template-columns: minmax(0, 408fr) minmax(0, 448fr) minmax(0, 535fr); }
}

.tile__text { font-size: clamp(11px, .9vw, 11.8px); font-weight: 300; line-height: 1.5; }
.tile__h2 {
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.15;
  letter-spacing: -.02em; margin-top: auto;
}
/* заголовки «Исследование» и «Карта системных противоречий»: в макете это
   Inter Light 36 со звездочкой-вектором слева, а не рукописный шрифт */
.h-section {
  /* звездочка стоит у ПЕРВОЙ строки заголовка, как в макете */
  display: flex; align-items: flex-start; gap: clamp(8px, .9vw, 14px);
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.15;
  letter-spacing: -.02em; color: #161617;
}
.h-section svg {
  flex: 0 0 auto; width: clamp(17px, 1.8vw, 27px); height: auto;
  color: #1f1f1f; margin-top: .18em;
}

/* параметры проекта: подпись с иконкой слева, значение справа */
.params { display: grid; }
.params__row {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline; gap: 6px 16px;
  padding: 7px 0; border-bottom: 1px solid #ededed;
}
.params__row:last-child { border-bottom: 0; }
.params dt {
  display: flex; align-items: center; gap: 7px;
  font-size: clamp(9px, .7vw, 9.8px); font-weight: 500;
  text-transform: uppercase; letter-spacing: .02em;
}
.params dt img { width: 11px; height: 11px; display: block; }
.params dd {
  font-size: clamp(9.5px, .74vw, 9.8px); font-weight: 300; line-height: 1.45;
  text-align: right;
}
@media (max-width: 480px) {
  .params__row { grid-template-columns: minmax(0, 1fr); }
  .params dd { text-align: left; }
}

/* ---------- карточка с космосом ---------- */
.tile--space {
  position: relative; overflow: clip; color: #fff;
  background: #05070d center/cover no-repeat;
  background-image: url("../assets/case/space.webp");
  justify-content: space-between;
  min-height: clamp(230px, 24vw, 308px);
}
.tile--space .tile__text { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }

/* ---------- шкала «исходный подход → новая модель» ---------- */
.scale { display: grid; gap: clamp(8px, .9vw, 13px); margin-top: auto; }
.scale__legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font-size: clamp(8px, .64vw, 9px); font-weight: 300;
}
.scale__legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.dot--from { background: #d14056; }
.dot--to { background: #09598e; }

.scale__row { display: grid; align-items: center; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .scale__row { grid-template-columns: minmax(72px, 22.6%) minmax(0, 1fr) minmax(72px, 22.6%); }
}
.chip {
  border: 1px solid #ededed; border-radius: 50px;
  padding: 5px 10px; min-height: 27px;
  display: grid; place-items: center; text-align: center;
  font-size: clamp(8.5px, .68vw, 9.5px); font-weight: 300; line-height: 1.25;
  background: #fff; overflow-wrap: anywhere;   /* длинные слова не растягивают чип */
}
/* линия со сдвигом точек: положение в процентах взято из макета */
.track { position: relative; height: 12px; }
.track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: #e4e4e4;
}
.track .dot { position: absolute; top: 0; transform: translateX(-50%); }
@media (max-width: 619px) { .track { order: 3; } }

/* ---------- участники: таблица макета ---------- */
.actors-table { width: 100%; border-collapse: collapse; }
.actors-table th {
  text-align: left; vertical-align: bottom;
  padding: 0 14px 10px 0; border-bottom: 1px solid #ededed;
}
.actors-table td {
  padding: 14px 14px 14px 0; border-bottom: 1px solid #ededed; vertical-align: top;
  font-size: clamp(9.5px, .74vw, 10px); font-weight: 400; line-height: 1.5;
}
.actors-table tr:last-child td { border-bottom: 0; }
.actors-table ul { margin: 0; padding-left: 14px; }
.actors-table li + li { margin-top: 3px; }
.actor-role { display: flex; align-items: flex-start; gap: 10px; }
.actor-mark { flex: 0 0 auto; width: 15px; height: 15px; background: #18181a; margin-top: 2px; }
.actor-mark--circle { border-radius: 50%; }
.actor-mark--triangle {
  background: none; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid #18181a;
}
.actor-quote { color: #4a4a4a; }

/* до 1000px таблица разворачивается в карточки: подписи колонок – в data-label */
@media (max-width: 999px) {
  /* прячем шапку целиком: у absolute-варианта ячейки все равно раздували
     scrollWidth страницы на 69px. Подписи колонок в этом режиме показывает
     ::before у ячеек (data-label), поэтому смысл не теряется */
  .actors-table thead { display: none; }
  .actors-table, .actors-table tbody, .actors-table tr, .actors-table td { display: block; width: 100%; }
  .actors-table tr {
    border: 1px solid #ededed; border-radius: 12px;
    padding: clamp(12px, 1.6vw, 16px); margin-bottom: 12px;
  }
  .actors-table tr:last-child { margin-bottom: 0; }
  .actors-table td { border: 0; padding: 8px 0 0; }
  .actors-table td:first-child { padding-top: 0; }
  .actors-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 9px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .05em; color: #8a8a8a;
  }
}

/* ---------- заголовки разделов (рукописный шрифт макета) ---------- */
.hand {
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(24px, 2.9vw, 40px); line-height: 1.1;
  color: var(--pink);
}
.hand--green { color: var(--green); }
.hand--white { color: #fff; }
.hand--sub { font-size: clamp(20px, 2.2vw, 32px); }
.hand--center { text-align: center; }

/* лид и ремарки – Neucha 20, как в макете */
.note-text {
  font-family: var(--note);
  font-size: clamp(14px, 1.35vw, 20px); font-weight: 400; line-height: 1.35;
  max-width: 66ch;
}
.note-text--center { text-align: center; margin-inline: auto; max-width: 78ch; }
.note-text--pink { color: var(--pink); }
.note-text--green { color: var(--green); }

/* ---------- обычный текст раздела ---------- */
.body-text {
  font-size: clamp(12px, .98vw, 14px); font-weight: 300; line-height: 1.55; max-width: 78ch;
}
.tile--dark .body-text, .tile--ink .body-text { font-weight: 400; }
.body-text + .body-text { margin-top: .8em; }

/* ---------- шаги 01 / 02 / 03 ---------- */
.steps { display: grid; gap: clamp(18px, 2vw, 30px); }
.step { display: grid; gap: 10px; min-width: 0; }
.step__head { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); }
.step__no {
  flex: 0 0 auto; display: grid; place-items: center;
  min-width: 45px; height: 30px; padding: 0 10px;
  border: 1px solid #dadada; border-radius: 50px;
  font-size: clamp(11px, .85vw, 12px); color: #6f6f6f;
}
.step__title {
  font-size: clamp(19px, 2vw, 28px); font-weight: 300; line-height: 1.2; letter-spacing: -.01em;
}
.step__body {
  padding-left: clamp(0px, 3.4vw, 52px);
  border-top: 1px solid #ededed; padding-top: clamp(10px, 1.2vw, 16px);
}
.tile--dark .step__no { border-color: rgba(244, 244, 244, .35); color: rgba(244, 244, 244, .75); }
.tile--dark .step__body { border-top-color: rgba(244, 244, 244, .18); }

/* короткая черта-разделитель из макета */
.rule { width: 34px; height: 3px; background: #18181a; border: 0; margin: clamp(8px, 1vw, 14px) 0; }

/* ---------- пары «текст + графика» ---------- */
.split { display: grid; gap: clamp(14px, 1.8vw, 28px); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-first { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .split--wide-last { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .split--mock-563-849 { grid-template-columns: minmax(0, 563fr) minmax(0, 849fr); }
}
.split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 22px); min-width: 0; align-content: start; }
/* колонки независимы: плашки не тянутся по высоте соседней колонки, иначе
   в конце короткой колонки образуется пустота */
.columns { display: grid; gap: clamp(10px, 1.3vw, 20px); align-items: start; }
@media (min-width: 1000px) {
  .columns { grid-template-columns: minmax(0, 563fr) minmax(0, 849fr); }
}
.columns > * { display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 20px); min-width: 0; }

/* На узких экранах колонки складываются, но порядок делаем читаемым:
   сначала сам раздел «Исследование», затем его графика, потом карта
   противоречий и ключевые открытия. Для этого колонки «растворяются»
   (display: contents), а плашки получают собственный порядок */
@media (max-width: 999px) {
  /* align-items: stretch обязателен: у сетки выше стоит start, а во flex это
     поперечная ось – плашки сжимались по содержимому до 32px */
  .columns { display: flex; flex-direction: column; align-items: stretch; }
  .columns > div { display: contents; }
  .columns > div:nth-child(2) > *:nth-child(1) { order: 1; }   /* исследование */
  .columns > div:nth-child(1) > *:nth-child(1) { order: 2; }   /* график выборки */
  .columns > div:nth-child(1) > *:nth-child(2) { order: 3; }   /* распределение */
  .columns > div:nth-child(1) > *:nth-child(3) { order: 4; }   /* карта противоречий */
  .columns > div:nth-child(2) > *:nth-child(2) { order: 5; }   /* ключевые открытия */
}

/* ---------- графика ---------- */
.plate { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* min-width: 0 обязателен: внутри flex значение auto равно ширине содержимого,
   и широкая картинка раздувала страницу вместо прокрутки внутри рамки */
.plate__scroll { min-width: 0; max-width: 100%; }
.plate > img, .plate__scroll > img { display: block; width: 100%; height: auto; }
.plate figcaption {
  font-size: clamp(9.5px, .74vw, 10px); font-weight: 400; line-height: 1.4; color: #8a8a8a;
  min-width: 0; overflow-wrap: anywhere;
}
.tile--ink .plate figcaption, .tile--dark .plate figcaption { color: rgba(244, 244, 244, .8); }
.plate--radius > img, .plate--radius .plate__scroll > img { border-radius: 10px; }
/* доли ширины из макета: схема слоев 915/1432, калибровка 975/1432,
   формула 744/1432 – графика стоит по центру плашки, а не во всю ширину */
.plate--fit { width: 100%; max-width: var(--fit, 100%); margin-inline: auto; }
.plate figcaption img { width: 16px; height: 16px; }   /* иконка подписи, не картинка */
@media (max-width: 900px) { .plate--fit { max-width: 100%; } }

/* детальная инфографика: до 900px прокручивается ВНУТРИ рамки, а не сжимается
   до нечитаемого; страница при этом не двигается */
.plate__hint { display: none; font-size: 11px; font-weight: 300; line-height: 1.4; color: #8a8a8a; }
.tile--dark .plate__hint, .tile--ink .plate__hint { color: rgba(244, 244, 244, .6); }
@media (max-width: 900px) {
  .plate__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .plate__scroll img { width: auto; max-width: none; min-width: 680px; }
  .plate__hint { display: block; }
}

/* ---------- ключевые открытия: три колонки с разделителями ---------- */
.findings { display: grid; gap: clamp(18px, 2.2vw, 34px); }
@container (min-width: 520px) { .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 760px) { .findings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finding { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); min-width: 0; }
@container (min-width: 760px) {
  .finding + .finding { border-left: 1px solid rgba(244, 244, 244, .18); padding-left: clamp(14px, 2cqi, 30px); }
}
.finding__title {
  font-size: clamp(10.5px, .82vw, 11.5px); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}
.finding__art { margin: 0; }
.finding__art img { display: block; width: clamp(104px, 34cqi, 185px); max-width: 100%; height: auto; }
.finding dl { display: grid; gap: 12px; }
.finding dt {
  font-size: clamp(9.5px, .74vw, 10px); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(244, 244, 244, .55);
}
.finding dd + dt { margin-top: 10px; }
.finding dd { font-size: clamp(10.5px, .8vw, 11.5px); font-weight: 300; line-height: 1.45; padding-left: 14px; }

/* ---------- карта противоречий ---------- */
.points { display: grid; gap: clamp(14px, 1.7vw, 24px); }
@container (min-width: 620px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.point { display: grid; gap: 6px; min-width: 0; }
.point__title { font-size: clamp(14px, 1.25vw, 18px); font-weight: 500; line-height: 1.25; }
.point__text { font-size: clamp(12px, .98vw, 14px); font-weight: 300; line-height: 1.5; }

/* ---------- аннотации вокруг графики ---------- */
.notes { display: grid; gap: clamp(12px, 1.5vw, 22px); }
@container (min-width: 560px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .notes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.note-block {
  font-size: clamp(11px, .88vw, 13px); font-weight: 300; line-height: 1.5;
  padding-top: 10px; border-top: 1px solid #ededed; min-width: 0;
}
.tile--dark .note-block, .tile--ink .note-block { border-top-color: rgba(244, 244, 244, .18); font-weight: 400; }
.note-block strong { display: block; margin-bottom: 4px; font-weight: 500; }

/* ---------- вопросы целевой функции ---------- */
.questions { display: grid; gap: clamp(12px, 1.4vw, 20px); }
@container (min-width: 560px) { .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.question {
  font-family: var(--note);
  font-size: clamp(13px, 1.1vw, 20px); font-weight: 400; line-height: 1.3;
  padding-left: 14px; border-left: 1px solid rgba(244, 244, 244, .25); min-width: 0;
}

/* ---------- итоговый дашборд ---------- */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.shot figcaption {
  margin-top: 10px; font-size: clamp(9.5px, .74vw, 10.5px); font-weight: 300;
  line-height: 1.45; color: #8a8a8a;
}

/* ============================================================
   Кегли макета рассчитаны на 1512px: 8.5-10px на телефоне не читаются.
   До 900px поднимаем самые мелкие строки до 10-12px – текст остается
   компактным, но глазами берется без увеличения.
   ============================================================ */
@media (max-width: 900px) {
  .chip { font-size: 10px; }
  .scale__legend { font-size: 10px; }
  .params dt, .params dd { font-size: 10.5px; }
  .actors-table td { font-size: 11px; }
  .tile__text { font-size: 12px; }
  .label { font-size: 10px; }
  .plate figcaption, .shot figcaption, figure.plate > figcaption { font-size: 10.5px; }
  .finding dd { font-size: 11.5px; }
  .finding dt { font-size: 10px; }
  .note-block { font-size: 12px; }
  .step__no { font-size: 12px; }
}


/* ============================================================
   Сетка разделов: все зазоры – 20px при ширине контента 1432, то есть
   1.4% ширины. Одинаковый шаг во всех рядах и колонках, поэтому плашки
   стоят по сетке на любом разрешении и пустот между ними не возникает.
   ============================================================ */
.case { container-type: inline-size; }
.case > * + * { margin-top: 0; }
/* пропорции колонок приходят из макета через --cols (их ставит сборщик) */
.row { display: grid; gap: max(10px, 1.4cqw); align-items: start; grid-template-columns: minmax(0, 1fr); }
/* Ряды из макета работают только на десктопе. Ниже 1200px карточки идут друг
   за другом – там же, где табличный раздел показывает карточки. Чтобы блоки
   при этом не раздувались крупнее макета, ширина колонки ограничена. */
@media (min-width: 1200px) { .row { grid-template-columns: var(--cols, minmax(0, 1fr)); } }
@media (max-width: 1199px) {
  .case { max-width: 640px; margin-inline: auto; }
  /* В столбик блоки идут в порядке, заданном макетом (data-mo), а не «сначала
     вся левая колонка, потом вся правая». display: contents поднимает обертки
     разделов в этот флекс-контейнер, поэтому order у них работает. */
  .case { display: flex; flex-direction: column; }
  .case > .row, .case .col { display: contents; }
  .case > .case__head { order: -1; }
  .map-fit, .case > .tile, .case .map { order: var(--mo, 50); }
  .map-fit__hint { order: var(--mo, 50); }
}
.col { display: grid; gap: max(10px, 1.4cqw); align-content: start; min-width: 0; }


/* обертка вписывания: в ряду она занимает место раздела */
.row > .map-fit, .col > .map-fit { min-width: 0; }

/* Пункты 9-11: график «времени опережения» внизу блока, цепочка summary в две
   строки, заголовок resource в одну – все только на узком экране. */
@media (max-width: 1199px) {
/* Две строки на любом телефоне. Кегль в eq-режиме жестко 16px, поэтому
     решает только ширина бокса: 420px против 393.4px самой длинной строки.
     important обязателен – ширину бокса reflow() пишет в атрибут style. */
  .case-page--signals2 .map[aria-labelledby="summary"] .summary-chain {
    width: 420px !important;
  }

/* Одна строка на всех телефонах. Кегль считается в МАКЕТНЫХ пикселях сцены и
     делится на масштаб --k, поэтому на экране получается ровно нужный размер:
     потолок 14px экрана, а если строка в карточку не влезает – столько, сколько
     влезает (100cqw = 706 макетных px сцены, 8.215cqw = отступ слева 58px,
     12px/--k = резерв справа, 26.6 = ширина строки на 1px кегля).
     Селектор с id обязателен: у .map__stage.is-big .t и .t.is-wrap в map.css
     стоит important, а map.css подключается ПОСЛЕ case.css. */
  .case-page--cognitive .map[aria-labelledby="resource"] #resource {
    width: auto !important;
    white-space: nowrap !important;
    font-size: min(calc(14px / var(--k, 1)),
                   calc((91.785cqw - 12px / var(--k, 1)) / 26.6)) !important;
  }
}

/* ============================================================
   Ряд «Как меняется подход к отбору» (portfolio, узел 25:71) на узком экране.
   Кегль подписи в капсуле считает js/case-fit.js (переменная --shift-fs в
   макетных единицах сцены) – капсулы одного размера требуют одного кегля,
   а в макете у одной из десяти подписей он на единицу мельче.
   Легенде запрещаем перенос: обе подписи стоят в одну строку.
   ============================================================ */
@media (max-width: 1199px) {
  .case-page--portfolio .map[aria-labelledby="shift"] .map__stage .t.is-shift-fs {
    font-size: calc(var(--shift-fs, 8) * 1px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .case-page--portfolio .map[aria-labelledby="shift"] .map__stage .t.is-shift-legend {
    white-space: nowrap !important;
  }
}

/* ============================================================
   Мобильные кегли по списку клиента (2026-08-09). Все размеры – ЭКРАННЫЕ:
   деление на var(--k) снимает масштаб сцены, поэтому на 320 и на 1199 текст
   одинаковый. Классы ставит js/case-fit.js по тексту узлов.
   Десктоп от 1200px не тронут – блок целиком в мобильном медиа.
   ============================================================ */
@media (max-width: 1199px) {
  /* «Как доказать работоспособность системы» кеглями внутри сцены больше не
     чинится: блок собран в поток (.lead-flow), правила .mp-lead и .mp-params-*
     удалены – они и давали наложение текста на схему. */

  /* «Ретроспективная проверка»: лид уехал в поток (.rc-head ниже) – внутри
     сцены он налезал на градиент и на выноски. Здесь остались только
     подписи-выноски: мельче и по центру своей капсулы. */
  .case-page--evidence .map[aria-labelledby="retrocheck"] .t.rc-pin {
    font-size: calc(7.6px / var(--k, 1)) !important;
    text-align: center !important;
  }

  /* «Как сигнал появляется раньше проблемы» – три строки вместо четырех */
  .case-page--signals2 .map[aria-labelledby="signal"] .t.signal-head-3 {
    font-size: calc(27px / var(--k, 1)) !important;
  }
}