/* ---- hero ---- */
.chead{padding:36px 0 0}
.chead__title{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.6vw,64px);
  line-height:1.04;letter-spacing:-.035em;margin:0 0 24px;max-width:22ch;text-wrap:balance}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:9px 16px}

.brief{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.brief__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 16px}
.brief__t{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.85vw,25px);
  line-height:1.38;letter-spacing:-.015em;margin:0;text-wrap:pretty}
.brief__t--dim{color:var(--ink-2)}
.brief__t b{color:var(--accent);font-weight:500}

.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--hair)}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.meta dd{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);margin:0;line-height:1.85}

/* ---- section chrome ---- */
.labelrow{margin:96px 0 40px}

/* ---- overview ---- */
.ov{display:grid;grid-template-columns:1.85fr 1fr;gap:20px;align-items:stretch}
.ov__shots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px}
.shot{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(11,11,12,.08)}
.shot--wide{grid-column:1 / -1}
.shot img{width:100%;height:auto;display:block}
.shot--empty{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background:#EFEDEA;box-shadow:none}
.shot--empty span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
/* подпись показываем, только если картинку не удалось загрузить */
.shot > span{display:none}
.shot--empty > span{display:block}

.facts{display:grid;grid-template-rows:repeat(3,1fr);gap:20px}
.fact{background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:26px 24px;display:flex;flex-direction:column;justify-content:center;
  transition:transform .32s cubic-bezier(.22,.8,.2,1),box-shadow .32s ease}
/* еле заметный подъём: даёт отклик, но не тянет внимание на себя */
.fact:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,11,12,.07)}
.fact__k{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 14px}
.fact__v{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.6vw,52px);
  letter-spacing:-.04em;line-height:1;margin:0 0 14px}
.fact__v small{font-size:.42em;font-weight:500;letter-spacing:-.01em;color:var(--ink-3);
  vertical-align:.28em;margin-right:.12em}
.fact__d{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;text-wrap:pretty}

.note{display:flex;gap:10px;margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.note b{font-weight:500;color:var(--ink)}

/* ---- phases ---- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.phase__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin:0 0 16px}
.phase__t{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);
  line-height:1.24;letter-spacing:-.02em;margin:0 0 12px}
.phase__d{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;text-wrap:pretty}
.phase__d b{color:var(--ink);font-weight:500}

/* ---- инсайты: те же мини-блоки, что и фазы, но в два ряда ---- */
.insights{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 64px}
.insight__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);
  margin:0 0 16px}
.insight__t{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);
  line-height:1.24;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.insight__d{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;text-wrap:pretty}
.insight__d b{color:var(--ink);font-weight:500}

@media (max-width:900px){
  .insights{grid-template-columns:1fr;gap:36px}
}

/* ---- JTBD: ситуация → требование → решение ---- */
.jtbd{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* Ховера нет намеренно: карточки некликабельны, и подъём с тенью обещал
   переход, которого не существует. То же правило, что у строк таблиц. */
.jtbd__card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:28px 28px 30px}
.jtbd__card .pill{display:inline-block;margin:0 0 22px}
.jtbd__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.jtbd__t{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;text-wrap:pretty}
/* стрелка держит цепочку: из задачи следует требование, из него — решение */
.jtbd__arrow{font-family:var(--mono);font-size:14px;line-height:1;color:var(--accent);
  margin:16px 0;user-select:none}
.jtbd__step--out .jtbd__k{color:var(--accent)}
.jtbd__step--out .jtbd__t{color:var(--ink);font-weight:500}

@media (max-width:900px){
  .jtbd{grid-template-columns:1fr;gap:20px}
  .jtbd__card{padding:24px 22px 26px}
  .jtbd__card .pill{margin-bottom:18px}
  .jtbd__arrow{margin:13px 0}
}

/* ---- заглушки будущих разделов ---- */
.stub{padding:0}
.stub__t{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.8vw,36px);
  letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.stub__d{font-size:15px;color:var(--ink-3);margin:0}

/* ---------- итог ----------
   Светлый, как и вся страница: тёмная подложка делала из итога отдельный
   остров и заставляла глаз перестраиваться на последнем блоке. Иерархию
   держат кегль и разделители, а не смена фона. */
.outcome{padding:8px 0 0;color:var(--ink)}
.outcome__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 22px}
.outcome__t{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.9vw,38px);
  line-height:1.18;letter-spacing:-.03em;margin:0 0 56px;max-width:26ch;text-wrap:balance}

.outcome__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  padding-top:40px;border-top:1px solid var(--hair)}
.outcome__h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px}

/* колонка с непроверенным — лёгкая карточка, статус вынесен в плашку,
   а не в цвет заголовка: акцент точечный, не заливка целого блока */
.outcome__col--hypo{background:var(--surface);border:1px solid var(--hair);
  border-radius:12px;padding:18px}
.outcome__tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(228,87,58,.4);border-radius:3px;padding:2px 6px;line-height:1}
.outcome__col--hypo .outcome__tag{display:inline-block;margin:0 0 14px}

.outcome__list{margin:0;padding:0;list-style:none}
.outcome__list li{margin:0 0 16px;font-size:14px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.outcome__list li:last-child{margin-bottom:0}
.outcome__list li b{color:var(--ink);font-weight:600}

/* «что дальше» — трекер шагов, номер вместо квадрата: это план, а не факт */
.outcome__list--steps{counter-reset:step}
.outcome__list--steps li{position:relative;padding-left:26px}
.outcome__list--steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;color:var(--accent);opacity:.85}

.outcome__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid var(--hair)}
.outcome__foot p{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.outcome__links{display:flex;flex-wrap:wrap;gap:12px 28px}
.outcome__links a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-3);
  padding-bottom:3px;transition:color .2s,border-color .2s}
.outcome__links a:hover,.outcome__links a:focus-visible{color:var(--accent);border-color:var(--accent)}

@media (max-width:900px){
  .outcome{padding:4px 0 0}
  .outcome__t{margin-bottom:36px}
  .outcome__grid{grid-template-columns:1fr;gap:32px;padding-top:30px}
  .outcome__list li{font-size:15px}
  .outcome__foot{margin-top:36px}
}

.tail{height:180px}

/* ---- нижняя навигация по разделам ---- */
.secnav{position:fixed;left:0;right:0;bottom:18px;z-index:60;display:flex;justify-content:center;
  pointer-events:none;padding:0 16px}
.secnav__in{position:relative;pointer-events:auto;display:flex;gap:4px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  backdrop-filter:blur(24px) saturate(1.8);border:1px solid rgba(11,11,12,.09);
  box-shadow:0 10px 32px rgba(11,11,12,.10),
             inset 0 1px 0 rgba(255,255,255,.7);max-width:100%;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.secnav__in::-webkit-scrollbar{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .secnav__in{background:rgba(255,255,255,.95)}
}

/* Пилюля навигации центрирована и имеет фиксированную ширину по содержимому
   (~694px), а кнопка «Наверх» прижата к правому краю. Чем уже окно, тем ближе
   они сходятся: на 1000px между ними остаётся 9px, дальше — наложение.
   Поэтому ниже 1080px кнопка уезжает над навигацией, как на мобилке.
   Правило живёт в case.css, а не в base.css: на главной нижней навигации нет,
   и там поднимать кнопку не от чего. */
@media (max-width:1080px){
  .totop{bottom:78px}
}

/* Активный раздел — одна «пилюля», которая едет между пунктами.
   Раньше тёмная подложка гасла у одного и загоралась у другого, и переход
   читался как диссолв, а не как перемещение. */
.secnav__pill{position:absolute;top:6px;left:0;height:calc(100% - 12px);width:0;
  border-radius:999px;background:var(--dark);pointer-events:none;
  transform:translateX(0);opacity:0;
  transition:transform .44s cubic-bezier(.22,.8,.2,1),
             width .44s cubic-bezier(.22,.8,.2,1),
             opacity .2s ease}
.secnav__pill.on{opacity:1}
/* первая установка — без проезда через всю ленту */
.secnav__pill.no-anim{transition:none}

.secnav a{position:relative;z-index:1;flex:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);padding:11px 16px;border-radius:999px;
  transition:color .28s ease;white-space:nowrap}
.secnav a:hover{color:var(--ink)}
.secnav a.active{color:var(--on-dark)}
@media (prefers-reduced-motion: reduce){
  .secnav__pill{transition:none}
}

@media (max-width:1000px){
  .ov{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(3,1fr);grid-template-rows:auto}
}
@media (max-width:900px){
  .chead{padding-top:24px}
  .brief{grid-template-columns:1fr;gap:32px}
  .meta{grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
  .labelrow{margin:68px 0 30px}
  .ov__shots{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr;gap:32px}
  .secnav{bottom:12px;padding:0 10px;justify-content:flex-start}
  .secnav a{padding:10px 13px;font-size:10px;letter-spacing:.1em}
  .tail{height:120px}
}

/* ---------- блок «Интервью» ---------- */
.iv__intro{max-width:64ch;margin:0 0 44px}

/* Таблица вопросов идёт по той же сетке, что и «что ответили»:
   одинаковая ширина левой колонки и одинаковая длина строки, поэтому
   текст в обеих таблицах начинается и переносится одинаково. */
.tbl--q{margin-bottom:76px}
.tbl--q th{width:132px;padding-top:24px}
.tbl--q td{font-size:17px;line-height:1.58;color:var(--ink)}

/* сравнение респондентов: два столбца, поля построчно */
.tbl--cmp thead th{padding-bottom:18px}
.tbl--cmp thead th:first-child{width:132px}
.tbl--cmp .tbl__who{display:block;font-family:var(--display);font-weight:500;font-size:17px;
  letter-spacing:-.015em;color:var(--ink);text-transform:none}
.tbl--cmp .tbl__who small{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--ink-3)}
.tbl--cmp th[scope=row]{width:132px}
.tbl--cmp td{width:calc((100% - 132px) / 2)}

/* цитата — голосом респондента, поэтому крупнее и не приглушённая */
.tbl__quote td{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.45;
  letter-spacing:-.015em;color:var(--ink)}

.iv__note{margin-top:52px}

/* ---------- конкурентный анализ ---------- */
/* Четыре системы рядом — колонок больше, поэтому кегль и отбивки плотнее,
   но сетка и разделители те же, что у остальных таблиц. */
/* левая колонка та же, что в остальных таблицах, — текст во всех начинается
   с одной вертикали */
.tbl--market{--label-col:132px}
.tbl--market thead th:first-child,.tbl--market th[scope=row]{width:var(--label-col)}
.tbl--market td{width:calc((100% - var(--label-col)) / 4);font-size:14px;line-height:1.6}
.tbl--market th,.tbl--market td{padding:22px 24px 24px}
.tbl--market th:first-child,.tbl--market td:first-child{padding-left:0}
.tbl--market th:last-child,.tbl--market td:last-child{padding-right:0}
.tbl--market .tbl__who{display:block;font-family:var(--display);font-weight:500;font-size:16px;
  letter-spacing:-.015em;color:var(--ink);text-transform:none}

@media (max-width:1100px){
  .tbl--market td{font-size:13px}
  .tbl--market th,.tbl--market td{padding:20px 12px 22px}
}

@media (max-width:760px){
  .tbl--q{margin-bottom:48px}
  .tbl--q th{width:56px}
  .tbl--q td{font-size:16px}
  .tbl th,.tbl td{padding:20px 14px 22px}
  .tbl caption{padding-bottom:20px}
  .iv__note{margin-top:36px}
  .tbl--market td{font-size:15px}
  .tbl--market .tbl__who{font-size:17px}
}

/* ---------- сравнение «было / стало» ---------- */
.cmp{--shot-w:2200;--shot-h:1564;--shot-fit:56vh;--pos:50%;margin:0 0 44px}
.cmp__stage{position:relative;
  aspect-ratio:var(--shot-w) / var(--shot-h);
  max-width:min(100%, calc(var(--shot-fit) * 1.4066));
  margin-inline:auto;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(11,11,12,.08);
  cursor:ew-resize;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.cmp__stage img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;pointer-events:none}
/* старый экран — маленький скриншот другой пропорции, поэтому вписываем
   целиком, а не режем по краям */
.cmp__before{position:absolute;inset:0;z-index:1;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp__before img{object-fit:contain;background:#E9E6E2}
.cmp__before span{display:none}
.cmp__before.is-missing{display:flex;align-items:center;justify-content:center;background:#E9E6E2}
.cmp__before.is-missing span{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

.cmp__tag{position:absolute;top:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  background:rgba(11,11,12,.74);color:var(--on-dark);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmp__tag{transition:opacity .2s ease,transform .2s ease}
.cmp__tag--before{left:14px}
.cmp__tag--after{right:14px}
.cmp.is-hide-before .cmp__tag--before,
.cmp.is-hide-after .cmp__tag--after{opacity:0;transform:translateY(-4px);pointer-events:none}
@media (prefers-reduced-motion: reduce){ .cmp__tag{transition:none} }

.cmp__bar{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;
  width:2px;margin-left:-1px;padding:0;border:0;
  background:var(--accent);cursor:ew-resize;
  display:flex;align-items:center;justify-content:center}
/* ручка — квадрат, тот же словарь, что у частиц */
.cmp__bar span{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:13px;line-height:1;
  box-shadow:0 4px 16px rgba(11,11,12,.3), 0 0 0 4px rgba(255,255,255,.6)}
.cmp__bar:focus-visible{outline:none}
.cmp__bar:focus-visible span{outline:2px solid var(--ink);outline-offset:3px}

/* Вводная строка раздела: держим в одну строку на десктопе,
   поэтому без ограничения по ширине — текст короткий сам по себе. */
/* balance, а не pretty: выравнивает строки между собой, поэтому на узком
   экране не остаётся короткого «хвоста» в две трети строки */
.lead{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0 0 32px;text-wrap:balance}

@media (max-width:760px){
  .cmp{--shot-fit:42vh}
  .cmp__tag{font-size:9px;padding:6px 10px;top:10px}
  .cmp__tag--before{left:10px}
  .cmp__tag--after{right:10px}
  .cmp__bar span{width:32px;height:32px}
}

/* ---------- аннотированный экран ---------- */
/* пропорция макета дашборда: 2200x1564 ≈ 1.4066 */
.anno{--shot-w:2200;--shot-h:1564;--shot-fit:62vh;margin:0}

/* Сцена не обрезает содержимое — иначе точки у краёв и выноски срезаются.
   Скругление и тень живут на внутренней рамке. */
.anno__stage{position:relative;
  /* держим высоту в пределах экрана, чтобы кнопки перелистывания и весь макет были видны */
  aspect-ratio:var(--shot-w) / var(--shot-h);
  max-width:min(100%, calc(var(--shot-fit) * 1.4066));
  margin-inline:auto}
.anno__frame{position:absolute;inset:0;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(11,11,12,.08)}
.anno__frame img{width:100%;height:100%;object-fit:cover;display:block}

.hs{position:absolute;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);
  border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:12px;font-weight:400;
  background:var(--accent);color:#fff;
  box-shadow:0 2px 10px rgba(11,11,12,.28), 0 0 0 3px rgba(255,255,255,.75);
  animation:hsPulse 2.8s ease-in-out infinite;
  transition:background .2s ease,color .2s ease,transform .2s ease;z-index:3}
.hs:nth-of-type(2){animation-delay:.35s}
.hs:nth-of-type(3){animation-delay:.7s}
.hs:nth-of-type(4){animation-delay:1.05s}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs.on{background:var(--ink);color:var(--on-dark);animation:none;
  box-shadow:0 2px 12px rgba(11,11,12,.4), 0 0 0 4px rgba(255,255,255,.9)}
.hs::after{content:"";position:absolute;inset:-9px;border-radius:50%}

/* медленная пульсация: видно, что точка есть и на неё можно нажать */
@keyframes hsPulse{
  0%,100%{box-shadow:0 2px 10px rgba(11,11,12,.28), 0 0 0 3px rgba(255,255,255,.75), 0 0 0 3px rgba(228,87,58,.45)}
  55%{box-shadow:0 2px 10px rgba(11,11,12,.28), 0 0 0 3px rgba(255,255,255,.75), 0 0 0 13px rgba(228,87,58,0)}
}
@media (prefers-reduced-motion: reduce){
  .hs{animation:none}
}

/* Выноска не «появляется готовой»: сначала прилетают квадратики и смыкаются
   в сплошную плитку цвета карточки — только потом под ними включается сам
   фон. Цвет совпадает, поэтому подмена холста на карточку не видна. */
.tip{position:absolute;z-index:4;width:min(330px,72vw);
  background:transparent;border:1px solid transparent;border-radius:14px;
  box-shadow:none;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .16s ease,visibility .16s,
    background .18s ease,border-color .18s ease,box-shadow .18s ease}
.tip.on{opacity:1;visibility:visible}
.tip.solid{background:var(--surface);border-color:var(--hair);
  box-shadow:0 20px 50px rgba(11,11,12,.20)}
/* холст живёт ПОД текстом, иначе квадратики сыплются поверх букв */
.tip__fx{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;border-radius:14px;z-index:1}
.tip__body{position:relative;z-index:2;opacity:0;transition:opacity .2s ease}
.tip.shown .tip__body{opacity:1}
.tip__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px}
.tip__t{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 16px;text-wrap:pretty}
.tip__k2{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.tip__t2{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;text-wrap:pretty}

.anno__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 0}
.anno__hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin:0;
  white-space:nowrap}
.anno__nav{display:flex;gap:8px}
/* стрелка не должна отрываться от слова — иначе кнопка ломается на две строки */
.anno__nav button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hair);border-radius:999px;padding:9px 14px;
  color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s}
.anno__nav button:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.anno__nav button:disabled{opacity:.4;cursor:default}
.anno__nav .is-wide{border-color:var(--ink-3);color:var(--ink)}

/* ---- увеличенный просмотр макета (своя модалка, не нативный фулскрин) ---- */
.shade{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(11,11,12,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
.shade.on{opacity:1;visibility:visible}
/* .anno переезжает внутрь как есть — точки, выноски и кнопки едут с ним */
.shade > .anno{width:100%;--shot-fit:78vh}
.shade .anno__bar{max-width:min(100%, calc(var(--shot-fit) * 1.4066));
  margin-inline:auto;width:100%}
/* На широком экране выноска всплывает прямо на макете, нижняя не нужна.
   На узком — она единственный способ прочитать аннотацию, поэтому внутри
   модалки её обязательно оставляем (раньше пряталась и клик «не работал»). */
@media (min-width:761px){ .shade .anno__mobile{display:none} }
/* на тёмной подложке шкала надписей меняется */
.shade .anno__hint{color:var(--on-dark-3)}
.shade .anno__nav button{color:var(--on-dark-2);border-color:rgba(237,235,232,.26)}
.shade .anno__nav button:hover:not(:disabled){color:var(--on-dark);border-color:var(--on-dark-3)}
.shade .anno__nav .is-wide{color:var(--on-dark);border-color:var(--on-dark-3)}
body.shade-open{overflow:hidden}
/* На узком экране макет упирается в ширину, а под ним ещё выноска —
   поэтому подложка прокручивается, а не центрирует и обрезает. */
@media (max-width:760px){
  .shade{padding:12px;align-items:flex-start;overflow-y:auto;
    -webkit-overflow-scrolling:touch}
  .shade > .anno{margin:auto 0}
}
@media (prefers-reduced-motion: reduce){ .shade{transition:none} }

/* мобильный режим: выноска не поверх, а под картинкой */
.anno__mobile{display:none;margin-top:16px}
@media (max-width:760px){
  .anno{--shot-fit:52vh}
  .tip{display:none}
  /* кнопки в одну строку под подписью, стрелки не отрываются */
  .anno__bar{flex-direction:column;align-items:stretch;gap:12px}
  .anno__nav{order:1;gap:6px}
  .anno__nav button{flex:1 1 0;padding:11px 8px;font-size:10px;letter-spacing:.06em;
    text-align:center}
  .anno__hint{order:2;text-align:center}
  .anno__mobile{display:block}
  /* position:relative обязателен: холст внутри — absolute/inset:0, и при
     static он считался от .shade (position:fixed), растягиваясь на весь экран */
  .anno__mobile .tip{display:block;position:relative;width:auto}
  .anno__mobile .tip.solid{box-shadow:none}
  .anno__mobile .tip:not(.on){display:none}
  .anno__mobile .tip__fx{display:none}

  /* На телефоне выноска почти во весь экран — сборка из трёхсот квадратов
     по такой площади читается как вспышка. Вместо неё короткий выезд
     со стороны точки. */
  .anno__mobile .tip.on{opacity:0;transform:translateX(-16px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),
      background .28s ease,border-color .28s ease}
  .anno__mobile .tip.on.from-right{transform:translateX(16px)}
  .anno__mobile .tip.on.shown{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .anno__mobile .tip.on{transition:none;transform:none}
  }
  .hs{width:26px;height:26px;font-size:11px}
}

/* ---------- разбор флоу: лента шагов + закреплённый экран ----------
   Не карусель: шаги видны все сразу и остаются на месте, как записи
   в истории изменений — ровно то, что делает сама фича. */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:56px;align-items:start;margin:44px 0 0}
/* экран стоит первым в разметке (ради sticky на мобилке), а сетка ставит
   его справа — порядок в DOM и порядок на экране здесь независимы */
.flow__rail{grid-column:1;grid-row:1}
.flow__screen{grid-column:2;grid-row:1}

.flow__screen{position:sticky;top:96px}
/* Рамка вынесена отдельным слоем, а не лежит на .flow__screen: на десктопе
   .flow__screen растянут на высоту окна ради пина по центру, и картинки с
   inset:0 считались бы от него — растеклись бы на весь экран. Это грабли №1
   из PROJECT_CONTEXT, только с другой стороны. */
.flow__frame{position:relative;width:100%;
  aspect-ratio:2200 / 1564;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(11,11,12,.08)}
.flow__frame img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .34s ease}
.flow__frame img.on{opacity:1}

.flow__rail{margin:0;padding:0;list-style:none}
.flow__step{position:relative;display:block;width:100%;text-align:left;
  background:transparent;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:0 0 30px 40px}
.flow__step:last-child{padding-bottom:0}
/* вертикальный пунктир из квадратиков — тот же словарь, что у .rule */
.flow__step::before{content:"";position:absolute;left:12px;top:24px;bottom:0;width:5px;
  background-image:repeating-linear-gradient(to bottom,
    rgba(11,11,12,.26) 0 5px, transparent 5px 12px)}
.flow__step:last-child::before{display:none}
/* маркер записи */
.flow__step::after{content:"";position:absolute;left:8px;top:5px;
  width:13px;height:13px;border-radius:4px;
  border:1px solid rgba(228,87,58,.45);background:var(--bg);
  transition:background .22s ease,border-color .22s ease}
.flow__step.on::after{background:var(--accent);border-color:var(--accent)}
.flow__step:focus-visible{outline:none}
.flow__step:focus-visible .flow__t{outline:2px solid var(--accent);outline-offset:4px}

.flow__n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.flow__t{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;
  letter-spacing:-.015em;color:var(--ink-3);margin:0 0 8px;
  transition:color .22s ease;text-wrap:balance}
.flow__d{font-size:14px;line-height:1.62;color:var(--ink-3);margin:0;max-width:48ch;
  transition:color .22s ease;text-wrap:pretty}
/* активный шаг набирает контраст, остальные уходят в фон */
.flow__step.on .flow__t{color:var(--ink)}
.flow__step.on .flow__d{color:var(--ink-2)}
.flow__step:hover .flow__t{color:var(--ink)}

/* ---- десктоп: экран приколот по центру окна ----
   Шаги раньше стояли в 130px друг от друга, и второй включался прежде, чем
   успевали дочитать первый. Теперь каждый шаг занимает по высоте пол-окна —
   это и есть его время на чтение, ~470px прокрутки вместо 130.

   Пин держится, пока не кончится грид-ячейка, то есть вся лента шагов.
   Хвост в конце ленты нужен именно для этого: без него картинка отлипала
   бы раньше, чем включается последний шаг, — ячейка кончается на 100vh
   раньше своего низа, потому что столько занимает сам приколотый экран. */
@media (min-width:901px){
  .flow__screen{top:0;height:100vh;display:flex;align-items:center}
  /* Отступ снизу, а не min-height. Кнопка центрирует содержимое по вертикали,
     когда она выше него, — с min-height текст уезжал вниз на полбокса, а
     маркер на пунктире оставался наверху, и подпись отрывалась от своей
     засечки. С padding-bottom содержимое остаётся прижатым к верху. */
  .flow__step{padding-bottom:36vh}
  .flow__rail{padding-bottom:70vh}
}

@media (max-width:900px){
  /* На узком экране экран не уезжает наверх, а прилипает под навбаром:
     листаешь шаги — картинка всё время перед глазами и меняется на месте.
     display:block обязателен — в гриде sticky липнет только внутри своей
     ячейки и отпустил бы экран сразу за первой строкой. */
  .flow{display:block;margin-top:32px}
  .flow__screen{position:sticky;top:70px;z-index:2;margin:0 0 28px}
  .flow__step{padding:0 0 24px 34px}
  .flow__d{font-size:15px;max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .flow__screen img,.flow__step::after,.flow__t,.flow__d{transition:none}
}

/* ---------- проверяемый факт + оговорка ---------- */
.claim{margin:44px 0 0;padding:28px;border:1px solid var(--hair);border-radius:16px;
  background:var(--surface)}
.claim__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.claim__t{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.6vw,21px);
  line-height:1.45;letter-spacing:-.01em;margin:0;text-wrap:pretty}
.claim__t b{color:var(--accent);font-weight:500}
/* пояснение под утверждением: отдельным абзацем, а не хвостом в одну строку */
.claim__d{font-size:15px;line-height:1.62;color:var(--ink-2);margin:14px 0 0;max-width:72ch;
  text-wrap:pretty}
.claim__d b{font-weight:500;color:var(--ink)}
.caveat{margin:18px 0 0}
.caveat__btn{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px dashed var(--ink-3);border-radius:999px;padding:8px 14px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);transition:border-color .2s,color .2s}
.caveat__btn:hover,.caveat__btn:focus-visible{border-color:var(--accent);color:var(--accent)}
.caveat__body{max-height:0;overflow:hidden;transition:max-height .32s ease,opacity .28s ease;opacity:0}
.caveat.open .caveat__body{max-height:200px;opacity:1}
.caveat__body p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:14px 0 0;max-width:62ch}
@media (prefers-reduced-motion: reduce){
  .caveat__body,.tip{transition:none}
  .fact{transition:none}
  .fact:hover{transform:none}
}