:root{--accent:#FF7A1A;--bg:#F7F4EF;--ink:#16130F;--ink-2:#6A6357;--line:#E5DFD3}

@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbmono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

html{-webkit-text-size-adjust:100%}
/* Длинные русские слова на узком экране. Без этого «Диспетчерская» на экране
   360 уходила за край на 51 пиксель, а «договорённости» — на 71: заголовок
   выглядел оборванным на середине слова. Замер: 20 обрезанных мест на 320 и 360.
   Разрыв слова оставлен страховкой на случай совсем длинного слова. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
/* Кегль заголовка на узком экране. В разметке он задан как clamp(38px,6vw,72px)
   и на телефоне всегда упирается в нижнюю границу 38px — при ней длинные слова
   в строку не помещаются. Переносы по слогам это лечили, но крупный дисплейный
   заголовок с тремя дефисами подряд читается хуже, чем тот же заголовок кеглем
   поменьше: 34px на экране 360 — всё ещё вдвое крупнее основного текста.
   Инлайн-стиль иначе не перебить: в разметке размер вписан в сам элемент. */
@media (max-width:400px){
  h1{font-size:clamp(28px,8.6vw,34px)!important}
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
*{box-sizing:border-box}
img{max-width:100%}
::selection{background:#E8D9C8}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.nav-l:hover{box-shadow:inset 0 -2px 0 var(--accent);text-decoration:none}
.btn-p:hover{background:color-mix(in oklab, var(--accent) 90%, var(--ink))!important;transform:translateY(-1px);text-decoration:none}
.btn-s:hover{background:rgba(22,19,15,.05)!important;text-decoration:none}
.card:hover{border-color:var(--ink)!important;text-decoration:none}
.node:hover{border-color:var(--ink)!important}
.node-h:hover{border-color:var(--accent)!important}
a:hover [data-arrow]{transform:translateX(5px);color:var(--accent)}
a:hover [data-arrow][data-back]{transform:translateX(-5px)}

/* Примагничивание прокрутки к началу секций снято 11.09.2026 (решение
   координатора). Приём рассчитан на блоки, которые помещаются в экран целиком:
   тогда прокрутка красиво «ставит» блок на место. У нас наоборот — на экране
   360×740 ПЯТЬ секций из восьми выше экрана, а «Работы» — пять экранов подряд.
   Примагничивать к началу блока, который в экран не влезает ни при каких
   условиях, значит дёргать страницу и обрезать содержимое: человек видит рывок
   и начало блока, конец которого остаётся за кадром. На широком экране лучше
   ненамного — там выше экрана три секции из восьми.
   Отступ сверху при переходе по якорю оставлен: липкая шапка высотой 72px
   иначе накрывает заголовок, к которому человек перешёл. Со снятым
   примагничиванием он ни на что другое не влияет. */
html{scroll-padding-top:76px}

@keyframes om-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes om-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes om-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes om-fade{from{opacity:0}to{opacity:1}}
@keyframes om-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){[data-chart] [data-anim]{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}}

.no-js [data-menu-open],.no-js [data-menu]{display:none!important}
.js [data-nav-row]{display:none!important}
[data-menu][hidden]{display:none!important}
.js [data-desc]{max-height:0;opacity:0;overflow:hidden}
.no-js [data-play]{display:none!important}

@media (min-width:1120px){[data-nav-row]{display:none!important}[data-menu-open]{display:none!important}}
@media (max-width:1119px){[data-nav-desktop]{display:none!important}}

@media (max-width:767px){
  /* Почтовая ссылка в тексте политики — цель высотой 22 пикселя при пороге 44:
     пальцем по ней попадают не с первого раза. Растим область касания
     вертикальными полями и гасим их отрицательным отступом, иначе строка в
     абзаце разъедется. Размер и вид ссылки при этом не меняются. */
  p a[href^="mailto:"]{display:inline-block;padding:11px 0;margin:-11px 0}
  /* Строки консоли на телефоне переносятся, а не обрезаются многоточием. На
     широком экране обрезка уместна — строка лога и должна быть одной строкой.
     На экране 360 в неё влезает меньше половины события: «изменение у
     конкурента → в отчёт» теряло 101 пиксель текста, то есть смысл самого
     события. Замер обрезок: 5 мест только на главной. */
  [data-panel-card] span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  [data-map-row]{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  [data-seg]{width:1px!important;height:18px!important}
  [data-mosaic],[data-panels]{grid-template-columns:minmax(0,1fr)!important}
  [data-span2]{grid-column:auto!important}
  [data-flagship]{grid-column:auto!important;grid-row:auto!important}
  [data-trust-grid],[data-data-grid],[data-footer-grid]{grid-template-columns:minmax(0,1fr)!important}
  [data-demo-head]{display:none!important}
  [data-demo-row]{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  /* Подпись столбца, подставляемая перед значением: тем же серым #A9A196 она
     давала контраст 2,3 при норме 4,5. Берём канонический вторичный цвет. */
  [data-demo-row] [data-h]::before{content:attr(data-h) " · ";color:#6A6357}
  /* Вкладки «Диспетчерской» на телефоне встают в два ряда, а между рядами было
     4 пикселя: соседняя вкладка ловит палец вместо нужной. Сами вкладки высотой
     48 — с ними порядок, дело в зазоре. */
  [role="tablist"]{gap:10px 8px!important}
  [data-stage-rail],[data-flow-rail]{display:none!important}
  [data-stage-num],[data-step-num]{display:block!important}
}

@media (max-width:1023px){
  [data-stage-rail],[data-flow-rail]{display:none!important}
  [data-stage-num],[data-step-num]{display:block!important}
}

@media print{[data-menu],[data-menu-open]{display:none!important}}