/* protocol-ai.ru — страница продукта.
   Экран 1: одна фраза-выгода, строка пояснения, одна кнопка; фон — «нити практики», сходящиеся в кнопке.
   Дальше одна история на реальном ответе Protocol: иск → обезличивание → понимание дела → похожие дела →
   лестница судов → как решал конкретный суд → позиции → что поменять в плане → план → проверка ссылок.
   Низ — тот же язык интерфейса: сообщения-примеры лентами и поле ввода, как в самом чате.
   Цвета и знак — от интерфейса Protocol (монохром, Фемида); заголовки — Literata. */
:root {
  --bg: #000;
  --raise: #0e0e10;
  --bar: #18181b;
  --line: #232328;
  --line-strong: #36363d;
  --ink: #f3f3f4;
  --ink-2: #b6b6bd;
  --mute: #7b7b84;
  --accent: #7ea6e6;
  --ok: #6cc59a;
  --bad: #e0715f;
  --warn: #e2b25e;
  --k1: #e2b25e;
  --k2: #7ea6e6;
  --k3: #6cc59a;
  --cta-bg: #f3f3f4;
  --cta-ink: #000;
  --glow: rgba(126, 166, 230, .12);
  --shadow: rgba(0, 0, 0, .6);
  --paper: #f4f1ea;
  --paper-ink: #2a2723;
  --display: "Literata", "PT Serif", Georgia, "Times New Roman", serif;
  --text: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
  --wordmark: "Times New Roman", Tinos, "Liberation Serif", Times, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f7;
    --raise: #fff;
    --bar: #ececf0;
    --line: #e2e2e8;
    --line-strong: #cdcdd5;
    --ink: #0e0e10;
    --ink-2: #3c3c43;
    --mute: #6c6c75;
    --accent: #26599B;
    --ok: #1f7a55;
    --bad: #b8432f;
    --warn: #9a5f06;
    --k1: #a8690a;
    --k2: #26599B;
    --k3: #1f7a55;
    --cta-bg: #0e0e10;
    --cta-ink: #fff;
    --glow: rgba(38, 89, 155, .08);
    --shadow: rgba(20, 20, 30, .14);
    --paper: #fbfaf7;
    --paper-ink: #24221f;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mark-on-light { display: none !important; }
@media (prefers-color-scheme: light) {
  .mark-on-light { display: block !important; }
  .mark-on-dark { display: none !important; }
}

/* ── Шапка: только знак ────────────────────────────────────────── */
.top { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: calc(34px + env(safe-area-inset-top, 0px)) 20px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: block; }
.brand-word { font-family: var(--wordmark); font-size: 25px; line-height: 1; }
/* Русское название рядом с латинским — того же размера и начертания (168-ФЗ: дубль на русском равнозначен по оформлению) */
.brand-sep { width: 1px; height: 22px; background: currentColor; opacity: .3; }

/* ── Экран 1 ───────────────────────────────────────────────────── */
.hero {
  position: relative; max-width: 1160px; margin: 0 auto;
  padding: clamp(56px, 10vh, 112px) 20px clamp(40px, 8vh, 90px); text-align: center;
  display: flex; flex-direction: column; align-items: center; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 30%;
  width: min(900px, 100%); height: 420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
h1 {
  margin: 0; font-family: var(--display); font-weight: 500; font-optical-sizing: auto;
  font-size: clamp(32px, 4.3vw, 60px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; max-width: 24ch;
}
.lead {
  margin: 22px auto 0; max-width: 58ch; color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; text-wrap: pretty;
}

/* Появление первого экрана (v7). Заголовок «пишется»: слова проявляются слева направо, как строка из-под пера,
   длинное слово пишется дольше, следующее начинается, пока предыдущее дописывается (js/landing.js, inkTitle).
   Под заголовком от центра проводится тонкая линия-подчерк, пояснение выходит сверху вниз, как лист из-под пресса,
   кнопка встаёт последней. Только opacity / transform / clip-path.
   Без скрипта и при «уменьшить движение» всё стоит на месте; если скрипт не сработал, заголовок покажется сам. */
.js .hero h1 { animation: h1-wait 0s 1.4s both; }
@keyframes h1-wait { from { opacity: 0; } to { opacity: 1; } }
.hero h1.ink { animation: none; }
/* слова остаются строчными (inline): так переносы строк точно те же, что без анимации */
.hero h1.ink .w { animation: ink var(--d, .5s) cubic-bezier(.33, .08, .2, 1) var(--t, 0s) both; }
@keyframes ink {
  from { opacity: 0; clip-path: inset(-.3em 100% -.35em -.1em); }
  40% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-.3em -.2em -.35em -.1em); }
}
.hero h1 { position: relative; }
.hero h1::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 168px; height: 1px; margin-left: -84px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent);
}
.js .hero h1::after { animation: rule 1.1s var(--ease) var(--rule-t, 1.3s) both; }
@keyframes rule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
.js .hero .lead { animation: press 1s var(--ease) var(--lead-t, 1.1s) both; }
@keyframes press { from { opacity: 0; transform: translateY(-5px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -.3em 0); } }
.js .hero .cta-btn { animation: settle .9s var(--ease) var(--cta-t, 1.4s) both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Фон первого экрана (рисует js/landing.js): «архив практики», вариант — «нити» */
.hero-bg {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -140px; width: 100vw; height: calc(100% + 140px); transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 36% 34% at 50% 52%, rgba(0,0,0,.08) 40%, #000 100%), linear-gradient(to bottom, transparent 0, transparent 20%, #000 42%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 36% 34% at 50% 52%, rgba(0,0,0,.08) 40%, #000 100%), linear-gradient(to bottom, transparent 0, transparent 20%, #000 42%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; transition: opacity 1.6s var(--ease) .3s;
}
.hero-bg.on { opacity: 1; }

/* «Коридор архива»: две стены листов актов уходят в глубину, свет поиска, найденные листы (js/landing.js, archive) */
.hero-scene {
  --pg-bg: #0d0d10; --pg-edge: rgba(255, 255, 255, .08); --pg-ink: #8e8e98; --pg-head: #d4d4da;
  --sheen: rgba(190, 210, 255, .28); --glow-c: rgba(126, 166, 230, .2); --pg-shadow: rgba(0, 0, 0, .75);
  --s: 1;
  position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
  left: 50%; top: -140px; width: 100vw; height: calc(100% + 140px); transform: translateX(-50%);
  perspective: 1000px; perspective-origin: 50% 52%;
  -webkit-mask-image: radial-gradient(ellipse 26% 34% at 50% 54%, rgba(0,0,0,0) 35%, #000 100%), linear-gradient(to bottom, transparent 0, transparent 10%, #000 30%, #000 84%, transparent 100%);
          mask-image: radial-gradient(ellipse 26% 34% at 50% 54%, rgba(0,0,0,0) 35%, #000 100%), linear-gradient(to bottom, transparent 0, transparent 10%, #000 30%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; transition: opacity 2.2s var(--ease) .2s;
}
@media (prefers-color-scheme: light) {
  .hero-scene {
    --pg-bg: #ffffff; --pg-edge: rgba(20, 20, 40, .08); --pg-ink: #74747e; --pg-head: #1c1c22;
    --sheen: rgba(38, 89, 155, .12); --glow-c: rgba(38, 89, 155, .1); --pg-shadow: rgba(20, 24, 40, .14);
  }
}
.hero-scene.on { opacity: 1; }
.stage3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.scene-glow {
  position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-c), transparent 75%);
  opacity: 0; will-change: transform, opacity; transition: opacity .9s linear;
}
.pg {
  --l: 0; --lift: 0px; --turn: 0deg; --ex: 0px; --dl: 0s;
  position: absolute; left: 50%; top: 54%;
  width: calc(210px * var(--s)); height: calc(297px * var(--s)); padding: calc(18px * var(--s)) calc(17px * var(--s));
  overflow: hidden; border-radius: 2px;
  background: var(--pg-bg); border: 1px solid var(--pg-edge);
  box-shadow: 0 40px 70px -40px var(--pg-shadow);
  font-family: var(--display); color: var(--pg-ink);
  transform: translate(-50%, -50%) translateX(calc(var(--tx) + var(--ex))) translateZ(calc(var(--z) * 1px + var(--lift))) rotateY(calc(var(--ry) * 1deg + var(--turn)));
  /* «конвейер» (v7, 21.10): переезд на соседнее место — долгий, с мягким стартом и мягкой посадкой;
     --dl — сдвиг по времени, чтобы листы трогались по очереди. Размытие глубины убрано (filter не анимируем) —
     глубину даёт дымка ::before. */
  transition: transform 2.4s cubic-bezier(.45, .05, .15, 1) var(--dl), opacity 1.2s ease, border-color 1s var(--ease), box-shadow 1s var(--ease);
}
/* туман глубины поверх непрозрачного листа: дальние листы растворяются в фоне, свет их проявляет */
.pg::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; background: var(--bg);
  opacity: calc(1 - var(--o) * (.55 + var(--l) * .45));
  transition: opacity 2.4s cubic-bezier(.45, .05, .15, 1) var(--dl, 0s);
}
.pg.found::before { opacity: 0; transition: opacity 1s ease .5s; }   /* проявляется из дымки ближе к концу пути */
/* скользящий блик по поверхности листа */
.pg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%) no-repeat;
  background-size: 320% 100%; background-position: calc(var(--sx, 50) * 1%) 0;
  opacity: var(--l); z-index: 3;
}
.pg p { margin: 0; transition: opacity .45s ease; }
.pg.swap p { opacity: 0; }
.pg-court { padding: 0 calc(34px * var(--s)); font: 500 calc(7px * var(--s)) / 1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.pg-kind { margin-top: calc(10px * var(--s)) !important; font: 600 calc(10px * var(--s)) / 1.25 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--pg-head); text-align: center; }
.pg-body {
  margin-top: calc(13px * var(--s)) !important; font: 400 calc(6.7px * var(--s)) / 1.55 var(--display);
  text-align: justify; hyphens: auto; text-indent: 1.6em;
}
.pg .k {
  color: var(--pg-head);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0% 1.2px;
  transition: background-size 1.1s var(--ease) .5s, color .8s var(--ease) .5s;
}
.pg-stamp {
  position: absolute; right: calc(10px * var(--s)); top: calc(9px * var(--s)); z-index: 1;
  padding: 0 calc(6px * var(--s)); border-radius: 1px; border: 1px solid var(--accent);
  font: 600 calc(6.6px * var(--s)) / 1.7 var(--text); letter-spacing: .06em; color: var(--accent);
  opacity: 0; transform: translateY(-3px); transition: opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s;
}
/* найденный лист разворачивается к зрителю и выходит вперёд */
.pg.found { --turn: calc(var(--ry) * -.5deg); transition: transform 1.9s cubic-bezier(.45, .05, .15, 1), border-color 1s ease .6s, box-shadow 1s ease .6s; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 50px 90px -40px var(--pg-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.pg.found .k { color: var(--accent); background-size: 100% 1.2px; }
.pg.found .pg-stamp { opacity: 1; transform: none; }
/* возврат: сначала гаснут отметка и подчёркивание */
.pg.leaving .pg-stamp { opacity: 0; transform: translateY(-3px); transition: opacity .3s ease, transform .3s ease; }
.pg.leaving .k { color: var(--pg-head); background-size: 0% 1.2px; transition: background-size .35s ease, color .35s ease; }
/* уход назад: лист отъезжает вглубь и в сторону от коридора и растворяется; затем невидимо встаёт в конец */
.pg.out { opacity: 0; transition: transform 1.6s cubic-bezier(.4, 0, .6, 1), opacity .9s ease .1s; }
.pg.warp, .pg.warp::before { transition: none !important; }
@media (max-width: 899px) {
  .hero-scene { perspective: 700px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 10%, #000 30%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, transparent 10%, #000 30%, #000 84%, transparent 100%); }
  .pg::before { opacity: calc(1 - var(--o) * (.3 + var(--l) * .35)); }
  .pg.found::before { opacity: .25; }
}

/* Одна большая кнопка */
.cta-btn {
  position: relative; margin-top: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 300px; height: 64px; padding: 0 34px; border: 0; border-radius: 3px; text-decoration: none; cursor: pointer;
  background: var(--cta-bg); color: var(--cta-ink);
  font: 600 18px/1 var(--text); letter-spacing: .005em;
  box-shadow: 0 16px 44px -24px var(--shadow);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), outline-color .3s var(--ease), outline-offset .3s var(--ease);
}
/* Главная кнопка — с тонкой второй рамкой на отступе, как двойная линия оттиска */
.hero .cta-btn { outline: 1px solid color-mix(in srgb, var(--cta-bg) 24%, transparent); outline-offset: 5px; }
.hero .cta-btn:hover { outline-color: color-mix(in srgb, var(--cta-bg) 55%, transparent); outline-offset: 6px; }
.hero .cta-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.cta-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 54px -24px var(--shadow); }
.cta-btn:hover svg { transform: translateX(4px); }
.cta-btn:active { transform: translateY(0) scale(.985); }

/* ── Общие заголовки ───────────────────────────────────────────── */
.h2 {
  margin: 0; text-align: center; font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -.025em;
}
.sub { margin: 14px auto 0; max-width: 56ch; text-align: center; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.kicker { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ── История: шаги слева, «окно» справа ────────────────────────── */
.story { max-width: 1160px; margin: clamp(60px, 9vh, 110px) auto 0; padding: 0 20px; }
.story-head { text-align: center; }
.story-grid {
  --p: 1;                                   /* 0 — окно по центру, шаги скрыты; 1 — окно справа (скрипт) */
  margin-top: 40px; display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: 0 56px;
}
.steps { list-style: none; margin: 0; padding: 0; grid-column: 1; grid-row: 1; opacity: var(--p); }
.step {
  min-height: 58vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .25; transition: opacity .5s var(--ease);
}
.step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 12vh; }
.step.active { opacity: 1; }
.step-n { display: flex; align-items: baseline; gap: 12px; max-width: 36ch; font: 600 13px/1 var(--text); letter-spacing: .1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.step-n::before { content: "\00a7"; margin-right: -5px; font: 400 16px/1 var(--display); letter-spacing: 0; color: var(--mute); }
.step-n::after { content: ""; flex: 1; height: 1px; align-self: center; background: var(--line); transition: background-color .5s var(--ease); }
.step.active .step-n::after { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.step h3 { margin: 12px 0 10px; font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.step > p { margin: 0; max-width: 36ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.step > .panel { display: none; }

/* Высота окна — по содержимому активного шага (скрипт, плавно); здесь — высота без скрипта и потолок */
.stage {
  grid-column: 2; grid-row: 1; position: sticky; top: max(72px, calc(50vh - 320px)); align-self: start;
  height: min(640px, calc(100vh - 96px)); max-height: min(640px, calc(100vh - 96px)); transition: height .5s var(--ease), top .5s var(--ease);
}
.stage-frame {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 3px; background: var(--raise); border: 1px solid var(--line);
  box-shadow: 0 40px 90px -70px var(--shadow);
  transform-origin: 50% 0; will-change: transform;
}
/* Шапка — как шапка документа: знак продукта | вид документа … номер листа.
   Под ней — шкала из девяти листов (засечки), заполненная часть — пройденные шаги. */
.stage-bar { display: flex; align-items: baseline; gap: 14px; padding: 16px 22px 12px; }
.sb-title { font-family: var(--wordmark); font-size: 16px; line-height: 1; color: var(--ink); }
.sb-kind, .sb-step { font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sb-kind { padding-left: 14px; border-left: 1px solid var(--line-strong); }
.sb-step { margin-left: auto; font-variant-numeric: tabular-nums; }
.sb-prog {
  position: relative; height: 6px; margin: 0 22px; border-right: 1px solid var(--line-strong);
  background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat,
              repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 11.111%);
}
.sb-prog i { position: absolute; left: 0; bottom: 0; height: 2px; width: 11.1%; background: var(--accent); transition: width .6s var(--ease); }

/* Верх окна: меняется по шагам (скрипт выставляет высоту по активному варианту) */
.stage-head { position: relative; flex: none; height: 76px; transition: height .5s var(--ease); }
.sh {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .35s;
}
.sh.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease) .12s, transform .5s var(--ease) .12s, visibility 0s; }
.stage-q {
  margin: 16px 22px 0 auto; left: auto; right: 22px; max-width: 84%; padding: 11px 16px; border-radius: 3px;
  background: var(--bar); color: var(--ink); font-size: 15px; line-height: 1.55;
}
.q-file {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 7px; margin: 0 0 8px; padding: 5px 10px 5px 8px;
  border-radius: 2px; background: var(--raise); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
}
.q-file::before { content: ""; width: 10px; height: 12px; border-radius: 0; border: 1.5px solid var(--accent); }
.sh-upload { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0 42px; }
.sh-file { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 11px; border-radius: 2px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--ink); }
.sh-file svg, .pp-file svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; }
.sh-scan { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.sh-scan i { position: relative; width: 90px; height: 2px; background: var(--line); overflow: hidden; }
.sh-scan i::after { content: ""; position: absolute; inset: 0; width: var(--scan, 0%); background: var(--ok); transition: width .1s linear; }
/* Строка дела — как реквизиты в шапке документа: через тонкие вертикальные линии, под чертой */
.sh-case { left: 42px; right: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 18px 0 11px; border-bottom: 1px solid var(--line); }
.sh-case span { padding: 0 12px; border-left: 1px solid var(--line-strong); font-size: 13px; line-height: 1.25; color: var(--ink-2); white-space: nowrap; }
.sh-case .cs-k { border: 0; padding-left: 0; padding-right: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sh-case .cs-k + span { border-left: 0; padding-left: 0; }

.stage-body { position: relative; flex: 1; }
.stage-body::before { content: ""; position: absolute; left: 26px; top: 8px; bottom: 22px; width: 1px; background: var(--line); }
.stage-body .panel {
  position: absolute; inset: 0; padding: 16px 26px 24px 42px; overflow: auto; scrollbar-width: thin;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear .45s;
}
.stage-body .panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .55s var(--ease) .1s, visibility 0s; }
.stage-body .pn-q { display: none; }            /* в окне сообщение юриста — в верхней части */
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage-lines path { fill: none; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease), opacity .6s var(--ease); }

/* Пары фрагментов (шаг 3): цвет, подчёркивание, номер */
mark[data-k] {
  color: inherit; padding: 1px 3px; margin: 0 -1px; border-radius: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: color-mix(in srgb, var(--k) 20%, transparent); box-shadow: inset 0 -2px 0 var(--k);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
mark[data-k="1"] { --k: var(--k1); }
mark[data-k="2"] { --k: var(--k2); }
mark[data-k="3"] { --k: var(--k3); }
mark[data-k]::after { content: attr(data-k); font: 600 10px/1 var(--text); color: var(--k); vertical-align: super; margin-left: 3px; transition: opacity .4s; }
/* В окне фрагменты решения «загораются», когда к ним приходит линия */
:is(.stage-body .pn-match, .pn-match.anim) .pn-doc mark { background: transparent; box-shadow: inset 0 -2px 0 transparent;
  transition: background-color .8s ease-in-out, box-shadow .8s ease-in-out; }   /* перед повтором подсветка гаснет ровно, без щелчка */
:is(.stage-body .pn-match, .pn-match.anim) .pn-doc mark::after { opacity: 0; transition: opacity .8s ease-in-out; }
:is(.stage-body .pn-match, .pn-match.anim).lit-1 .pn-doc mark[data-k="1"], :is(.stage-body .pn-match, .pn-match.anim).lit-2 .pn-doc mark[data-k="2"], :is(.stage-body .pn-match, .pn-match.anim).lit-3 .pn-doc mark[data-k="3"] {
  background: color-mix(in srgb, var(--k) 20%, transparent); box-shadow: inset 0 -2px 0 var(--k); animation: lit-pulse .9s var(--ease);
}
@keyframes lit-pulse { from { background-color: transparent; box-shadow: inset 0 0 0 var(--k); } }   /* подчерк проступает, как чернила */
:is(.stage-body .pn-match, .pn-match.anim).lit-1 .pn-doc mark[data-k="1"]::after, :is(.stage-body .pn-match, .pn-match.anim).lit-2 .pn-doc mark[data-k="2"]::after, :is(.stage-body .pn-match, .pn-match.anim).lit-3 .pn-doc mark[data-k="3"]::after { opacity: 1; }

/* ── Содержимое панелей ────────────────────────────────────────── */
.pn-q { margin: 0 0 16px auto; max-width: 94%; padding: 11px 16px; border-radius: 3px; background: var(--bar); color: var(--ink); font-size: 15px; line-height: 1.55; }
.pn-title { margin: 0 0 14px; font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.01em; }
.pn-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.ref { display: inline-block; padding: 0 5px; border-radius: 1px; border: 1px solid var(--line-strong); font-size: 12px; line-height: 1.5; color: var(--accent); font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* Шаг 1. Документ и обезличивание */
.pn-paper {
  position: relative; overflow: hidden; border-radius: 2px; background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -34px var(--shadow);
}
.pp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 13px; }
.pp-file { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pp-state { color: #1f7a55; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6.4em; text-align: right; }   /* «0» и «16 скрыто» одной ширины — шапка не переносится на ходу */
.pp-body { padding: 14px 18px 16px; font: 400 13.5px/1.62 var(--display); }
.pp-body p { margin: 0 0 7px; }
.pp-body b { font-weight: 600; }
.pp-court { text-align: right; font-style: italic; opacity: .75; }
.pp-ask { margin-top: 10px !important; padding-top: 9px; border-top: 1px dashed rgba(0, 0, 0, .14); }
.pii .o { display: none; }
.pii .p {
  display: inline; padding: 1px 6px; border-radius: 1px; font: 600 11.5px/1.5 var(--text); letter-spacing: .02em; white-space: nowrap;
  color: #fff; background: #26599B;
}
.pii[data-c="d"] .p { background: #7a4b9c; }
.pii[data-c="a"] .p { background: #1f7a55; }
.pii[data-c="c"] .p { background: #9a5f06; }
.pii.orig .o { display: inline; background: rgba(184, 67, 47, .14); box-shadow: inset 0 -1.5px 0 rgba(184, 67, 47, .55); border-radius: 3px;
  transition: background-color .17s linear, box-shadow .17s linear; }
.pii.hit .o { background: rgba(38, 89, 155, .2); box-shadow: inset 0 -1.5px 0 rgba(38, 89, 155, .7); }   /* кромка полосы дошла до строки */
.pii.orig .p { display: none; }
.pii.flip .p { animation: chip-in .45s var(--ease); }
@keyframes chip-in { from { clip-path: inset(0 100% 0 0); opacity: .35; } to { clip-path: inset(0 0 0 0); opacity: 1; } }   /* метка ложится слева направо, как полоса маркера */
/* Полоса сканера: положение задаёт landing.js (runMask) кадр за кадром — по нему же меняются данные */
.pp-scan { position: absolute; left: 0; right: 0; top: 0; height: 46px; pointer-events: none; opacity: 0; will-change: transform;
  background: linear-gradient(to bottom, transparent, rgba(38, 89, 155, .14) 70%, rgba(38, 89, 155, .55) 100%);
  transition: opacity .4s var(--ease); }
.pn-paper.scanning .pp-scan { opacity: 1; transition-duration: .25s; }
/* Повтор: лист гаснет, возвращается к исходному тексту и проявляется */
.pp-body, .pp-count { transition: opacity .42s var(--ease); }
.pn-paper.resetting .pp-body { opacity: .08; }
.pn-paper.resetting .pp-count { opacity: .2; }
/* Итог — строкой таблицы: графы через тонкие линии, цифры набраны как в документе */
.pn-pii { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pn-pii li { padding: 9px 12px 10px 14px; border-left: 1px solid var(--line); font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.pn-pii li:first-child { border-left: 0; padding-left: 0; }
.pn-pii b { display: block; font: 500 24px/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* Шаг 2. Понимание дела */
.pn-kv { margin: 0; }
.pn-kv > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.pn-kv dt { font-size: 13px; color: var(--mute); }
.pn-kv dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.src { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 1px; font: 500 11px/1.6 var(--text); font-style: normal; letter-spacing: .04em; color: var(--mute); background: var(--bar); vertical-align: 1px; }
.pn-key { margin: 14px 0 0; padding: 13px 0 4px; border-top: 3px double color-mix(in srgb, var(--accent) 70%, transparent); font: 500 17px/1.45 var(--display); }   /* двойная черта — как перед резолютивной частью */
.pn-key b { display: block; margin-bottom: 4px; font: 600 11.5px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* Шаг 3. Найденное решение */
.pn-doc { padding: 14px 18px 16px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--bg); }
.pn-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pn-label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.m-real {
  /* отметка — как штамп «сверено»: прямоугольник с двойной рамкой */
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border-radius: 1px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 60%, transparent);
  outline: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); outline-offset: 2px;
}
.m-real svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pn-doc-title { margin: 12px 0 8px; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.35; }
.pn-doc-q { margin: 0; padding-left: 12px; border-left: 2px solid var(--line-strong); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pn-doc-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); font-family: var(--display); font-style: italic; }
.pn-doc-foot a { font-family: var(--text); font-style: normal; color: var(--accent); text-decoration: none; font-weight: 500; }
.pn-doc-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Шаг 4. Лестница судов — ступени */
/* Строки рассуждения — как пункты: короткая черта-засечка вместо плашки */
.pn-line { margin: 0 0 12px; padding: 0 0 0 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); position: relative; }
.pn-line::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--accent); }
.pn-line.warn::before { background: var(--warn); }
/* Ступени: чем выше суд, тем правее ступень; число — дел в подборке */
.pn-ladder { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; }
.pn-ladder li {
  --w: calc(100% - var(--l) * 15%);
  justify-self: end; width: var(--w); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-radius: 0; font-size: 14px; color: var(--ink);
  background: color-mix(in srgb, var(--accent) calc(4% + var(--l) * 5%), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) calc(20% + var(--l) * 14%), transparent);
}
.pn-ladder b { font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.stage-body .panel .pn-ladder li { opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.stage-body .panel.on .pn-ladder li { opacity: 1; transform: none; }
.stage-body .panel.on .pn-ladder li:nth-child(4) { transition-delay: .05s; }
.stage-body .panel.on .pn-ladder li:nth-child(3) { transition-delay: .2s; }
.stage-body .panel.on .pn-ladder li:nth-child(2) { transition-delay: .35s; }
.stage-body .panel.on .pn-ladder li:nth-child(1) { transition-delay: .5s; }

/* Шаг 5. Как решал конкретный суд */
.pn-case { padding: 16px 18px 18px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--bg); }
.pc-court { margin: 0; font: 500 18px/1.3 var(--display); }
.pc-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin: 6px 0 0; font-size: 13px; color: var(--mute); }
.pc-out { color: var(--ok); }
.pc-sub { margin: 16px 0 10px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pc-age { position: relative; height: 26px; margin: 0 6px 6px; }
.pc-age i { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 50%, var(--line-strong) 50% 100%); border-radius: 2px; }
.pc-age b { position: absolute; top: 0; left: calc(var(--x) * 50%); transform: translateX(-50%); padding-top: 16px; font: 500 11.5px/1 var(--text); color: var(--mute); white-space: nowrap; }
.pc-age b:first-of-type { transform: none; }
.pc-age b::before { content: ""; position: absolute; left: 50%; top: 3px; width: 8px; height: 8px; margin-left: -4px; background: var(--raise); border: 1.5px solid var(--accent); transform: rotate(45deg); }
.pc-age b:first-of-type::before { left: 0; margin-left: 0; background: var(--accent); }
.pc-phases { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; border-top: 1px solid var(--line); }
.pc-phases div { padding: 10px 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.pc-phases div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.pc-phases span { display: block; margin-bottom: 3px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pc-same { margin-top: 14px; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); }
.pc-same p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pc-same b { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; }

/* Шаг 6. Весы */
.pn-scales { position: relative; }
.sc-top { position: relative; height: 40px; }
.sc-top i { position: absolute; display: block; }
.sc-post { left: 50%; top: 10px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--mute); border-radius: 2px; }
.sc-pivot { left: 50%; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--raise); border: 2px solid var(--mute); }
.sc-arm { left: calc(25% - 6px); right: calc(25% - 6px); top: 9px; height: 2px; background: var(--line-strong); border-radius: 2px; transform-origin: 50% 50%; transition: transform 1.1s var(--ease) .25s; }
.sc-arm::before, .sc-arm::after { content: ""; position: absolute; top: 0; width: 2px; height: 30px; background: var(--line-strong); }
.sc-arm::before { left: 0; }
.sc-arm::after { right: 0; }
.sc-pans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-pans > div { padding: 12px 14px; border: 1px solid var(--line); border-top-color: var(--c); box-shadow: inset 0 1px 0 var(--c); transition: transform 1.1s var(--ease) .25s; }
.sc-pans b { display: block; margin-bottom: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.sc-pans p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sc-pans p:last-child { margin-bottom: 0; }
.sc-for { --c: var(--ok); }
.sc-against { --c: var(--bad); align-self: start; }
.pn-scales.tilt .sc-arm { transform: rotate(-4deg); }
.pn-scales.tilt .sc-for { transform: translateY(10px); }
.pn-scales.tilt .sc-against { transform: translateY(-10px); }
/* «Перевес» (21.10): из наклона чаши почти выравниваются, качаются и снова перевешивают в вашу пользу.
   Начало и конец — то же положение наклона, поэтому повтор бесшовный. */
.pn-scales.tilt.weigh .sc-arm { animation: sc-arm 2.4s var(--ease); }
.pn-scales.tilt.weigh .sc-for { animation: sc-for 2.4s var(--ease); }
.pn-scales.tilt.weigh .sc-against { animation: sc-against 2.4s var(--ease); }
@keyframes sc-arm { 0% { transform: rotate(-4deg); } 30% { transform: rotate(-.6deg); } 58% { transform: rotate(-5.2deg); } 78% { transform: rotate(-3.5deg); } 100% { transform: rotate(-4deg); } }
@keyframes sc-for { 0% { transform: translateY(10px); } 30% { transform: translateY(1.5px); } 58% { transform: translateY(13px); } 78% { transform: translateY(8.8px); } 100% { transform: translateY(10px); } }
@keyframes sc-against { 0% { transform: translateY(-10px); } 30% { transform: translateY(-1.5px); } 58% { transform: translateY(-13px); } 78% { transform: translateY(-8.8px); } 100% { transform: translateY(-10px); } }
.pn-opp { margin-top: 18px; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); display: grid; gap: 8px; }
.pn-opp p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pn-opp b, .pn-plan b { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--mute); }

/* Шаг 7. Что поменять в плане + сценарии */
.pn-pivot { padding: 13px 0 14px; border-top: 3px double color-mix(in srgb, var(--accent) 70%, transparent); border-bottom: 1px solid var(--line); }
.pv-label { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pv-was { margin: 0; font-size: 15px; color: var(--mute); }
.pv-was s { text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.pv-now { margin: 6px 0 0; font: 500 17px/1.45 var(--display); color: var(--ink); }
.pv-arrow { display: inline-block; margin-right: 8px; color: var(--ok); font-family: var(--text); font-weight: 700; }
.stage-body .panel .pv-was s { text-decoration-color: transparent; transition: text-decoration-color .4s var(--ease) .5s; }
.stage-body .panel.on .pv-was s { text-decoration-color: var(--bad); }
.stage-body .panel .pv-now { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease) .9s, transform .6s var(--ease) .9s; }
.stage-body .panel.on .pv-now { opacity: 1; transform: none; }
/* Сценарии — графами: оценка в левой колонке, как в таблице */
.pn-sc { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.pn-sc li { position: relative; padding: 11px 0 11px 148px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pn-sc b { position: absolute; left: 0; top: 13px; width: 132px; font-size: 11px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.pn-sc .sc-a { color: var(--ink); }
.pn-sc .sc-a b { color: var(--ok); }
.pn-sc .sc-b b { color: var(--k1); }
.pn-sc .sc-c b { color: var(--bad); }

/* Шаг 8. План — линия времени */
.pn-plan { list-style: none; margin: 0; padding: 0; counter-reset: s; position: relative; }
.pn-plan::before { content: ""; position: absolute; left: 40px; top: 6px; bottom: 16px; width: 1px; background: var(--line); }
.pn-plan li { position: relative; counter-increment: s; padding: 0 0 15px 58px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pn-plan li::before {
  content: counter(s, upper-roman) "."; position: absolute; left: 0; top: 0; width: 30px; text-align: right;
  font: 500 15.5px/1.45 var(--display); color: var(--accent);
}
.pn-plan li::after { content: ""; position: absolute; left: 37px; top: .78em; width: 7px; height: 1px; background: var(--line-strong); }
.pn-plan b { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 15.5px; margin-bottom: 3px; }

/* Шаг 9. Проверка */
.pn-srcs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pn-srcs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.45 var(--display); color: var(--ink); }
.pn-srcs .ref { justify-self: start; font-family: var(--text); }
.pn-check { list-style: none; margin: 0; padding: 0; display: grid; }
.pn-check li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.pn-check li::before { flex: none; width: 20px; text-align: center; font-weight: 700; }
.pn-check .ok::before { content: "\2713"; color: var(--ok); }
.pn-check .cut::before { content: "\2715"; color: var(--bad); }
.pn-check .cut { color: var(--ink-2); }
.pn-check s { color: var(--bad); text-decoration-thickness: 2px; }

/* Пошаговое появление строк в активной панели */
.stage-body .panel :is(.pn-srcs li, .pn-line, .pn-opp, .pn-sc li, .pn-check li, .pn-kv > div, .pn-key, .pn-doc, .pn-case, .pc-same, .pn-plan li, .pn-pii li, .pn-pivot) {
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.stage-body .panel.on :is(.pn-srcs li, .pn-line, .pn-opp, .pn-sc li, .pn-check li, .pn-kv > div, .pn-key, .pn-doc, .pn-case, .pc-same, .pn-plan li, .pn-pii li, .pn-pivot) { opacity: 1; transform: none; }
.stage-body .panel.on :is(.pn-srcs li, .pn-sc li, .pn-check li, .pn-kv > div, .pn-plan li, .pn-pii li):nth-child(2) { transition-delay: .15s; }
.stage-body .panel.on :is(.pn-srcs li, .pn-sc li, .pn-check li, .pn-kv > div, .pn-plan li, .pn-pii li):nth-child(3) { transition-delay: .3s; }
.stage-body .panel.on :is(.pn-kv > div, .pn-plan li, .pn-pii li):nth-child(4) { transition-delay: .45s; }
.stage-body .panel.on .pn-key { transition-delay: .65s; }
.stage-body .panel.on .pn-sc { transition-delay: .2s; }
.stage-body .panel.on .pn-sc li { transition-delay: 1.2s; }
.stage-body .panel.on .pn-sc li:nth-child(2) { transition-delay: 1.35s; }
.stage-body .panel.on .pn-sc li:nth-child(3) { transition-delay: 1.5s; }
.stage-body .panel.on .pc-same { transition-delay: .5s; }
.stage-body .panel.on .pn-opp { transition-delay: .9s; }
.stage-body .panel.on .pn-line.warn { transition-delay: .6s; }
.stage-body .panel.on .pn-line.warn ~ .pn-line { transition-delay: .75s; }
.stage-body .panel.on .pn-pii li:nth-child(n) { transition-delay: calc(2.2s + var(--i, 0) * .1s); }

/* Невысокий экран (например, 1366×768 с панелями браузера): окно истории чуть выше и плотнее, чтобы
   панели шагов помещались целиком, без прокрутки внутри. Тексты те же (v7, 21.10). */
@media (min-width: 901px) and (max-height: 820px) {
  .stage { top: max(20px, calc(50vh - 320px)); height: min(640px, calc(100vh - 40px)); max-height: min(640px, calc(100vh - 40px)); }
  .stage-bar { padding: 12px 22px 9px; }
  .sb-prog { height: 5px; }
  .sh-upload { padding-top: 12px; }
  .sh-file { padding: 7px 12px 7px 10px; font-size: 13.5px; }
  .stage-q { margin-top: 12px; max-width: 92%; padding: 8px 14px; font-size: 14px; line-height: 1.5; }
  .stage-q .q-file { margin-bottom: 6px; padding: 3px 9px 3px 7px; }
  .sh-case { padding-top: 13px; padding-bottom: 9px; }
  .stage-body .panel { padding-top: 10px; padding-bottom: 12px; }
  .stage-body .pn-title { margin-bottom: 8px; font-size: 19px; }
  .stage-body .pn-kv > div { padding: 6px 0; }
  .stage-body .pn-kv dd { font-size: 14px; line-height: 1.45; }
  .stage-body .pn-key { margin-top: 10px; padding-top: 9px; font-size: 16px; line-height: 1.4; }
  .stage-body .pp-head { padding: 8px 14px; }
  .stage-body .pp-body { padding: 10px 16px 11px; font-size: 13px; line-height: 1.55; }
  .stage-body .pp-body p { margin-bottom: 5px; }
  .stage-body .pp-ask { margin-top: 7px !important; padding-top: 7px; }
  .stage-body .pn-pii { margin-top: 10px; }
  .stage-body .pn-pii li { padding-top: 6px; padding-bottom: 7px; }
  .stage-body .pn-pii b { font-size: 21px; }
  .stage-body .pn-note { margin-top: 8px; }
}

/* ── Начните со своего дела ────────────────────────────────────── */
.ask { margin: clamp(110px, 16vh, 170px) 0 0; }
.ask > .h2, .ask > .sub { padding: 0 20px; }
.ribbons { display: grid; gap: 12px; margin-top: 34px; }
.ribbon {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ribbon-track {
  list-style: none; margin: 0; padding: 2px 0;
  display: flex; gap: 12px; width: max-content;
  animation: ribbon var(--dur, 76s) linear infinite;
}
.ribbon[data-dir="right"] .ribbon-track { animation-direction: reverse; }
.ribbon:nth-child(2) .ribbon-track { --dur: 88s; }
.ribbon:nth-child(3) .ribbon-track { --dur: 70s; }
.ribbons:hover .ribbon-track, .ribbons:focus-within .ribbon-track { animation-play-state: paused; }
@keyframes ribbon { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
/* Пример — как сообщение в чате: тот же «пузырь», что в окне истории */
.bub {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 10px 16px 10px 14px; border-radius: 2px; text-decoration: none;
  background: var(--raise); border: 1px solid var(--line);
  font-size: 15px; line-height: 1.3; color: var(--ink-2);
  transition: color .2s, border-color .2s, transform .25s var(--ease);
}
.bub b {
  font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
  padding: 2px 12px 2px 0; border-right: 1px solid var(--line-strong);
}
.bub:hover, .bub:focus-visible { color: var(--ink); border-color: var(--line-strong); transform: translateY(-2px); }
.bub.picked { color: var(--ink); border-color: var(--accent); }

/* Поле ввода — как в чате */
.composer {
  position: relative; max-width: 760px; margin: 34px auto 0; padding: 16px 16px 14px 20px;
  border-radius: 24px; background: var(--raise); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -50px var(--shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);
  transition: border-color .3s, box-shadow .4s var(--ease);
}
.ask .composer { margin-inline: max(20px, calc((100% - 760px) / 2)); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line-strong)); box-shadow: 0 40px 90px -50px var(--shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
.composer textarea {
  display: block; width: 100%; min-height: 56px; max-height: 220px; resize: none; border: 0; outline: 0; padding: 4px 0;
  background: transparent; color: var(--ink); font: 400 17px/1.55 var(--text);
}
.composer textarea::placeholder { color: var(--mute); }
.composer.typing textarea::placeholder { color: var(--ink-2); }
.cmp-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.cmp-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--mute); }
.cmp-hint svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp-send { margin: 0; min-width: 0; height: 50px; padding: 0 22px; font-size: 16px; gap: 10px; flex: none; border-radius: 999px; }   /* строка ввода — как в v6 */
.cmp-send svg { width: 18px; height: 18px; }
.composer.flash { animation: flash .9s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 40px 90px -50px var(--shadow), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 40px 90px -50px var(--shadow), 0 0 0 14px transparent; } }

.cmp-note { max-width: 760px; margin: 12px auto 0; padding: 0 20px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--mute); }
.cmp-note a { color: var(--ink-2); text-underline-offset: 3px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 26px auto 0; padding: 0 20px; font-size: 14px; color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 9px; }
.facts li::before { content: ""; width: 14px; height: 1px; background: var(--ok); }

.disclaimer {
  max-width: 760px; margin: 80px auto 0; padding: 0 20px;
  font-size: 13px; line-height: 1.6; color: var(--mute); text-align: center;
}

.dock { display: none; }

/* ── Подвал ────────────────────────────────────────────────────── */
.foot {
  max-width: 1160px; margin: 40px auto 0; padding: 28px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.65; color: var(--mute);
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; }
.foot-title { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.foot p { margin: 0; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-links { display: grid; gap: 4px; align-content: start; justify-items: start; }
.foot-copy { margin-top: 22px !important; font-size: 12.5px; }

/* ── Окно о cookie ─────────────────────────────────────────────── */
.ck {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 380px; margin-left: auto;
  background: var(--raise); color: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 18px; padding: 16px 18px; font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 24px 60px -20px var(--shadow);
  animation: ck-in .45s var(--ease) both;
}
.ck p { margin: 0 0 12px; }
.ck a { color: var(--ink); text-underline-offset: 3px; }
.ck-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ck button {
  font: 500 13.5px/1 var(--text); padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
}
.ck button.ck-yes { background: var(--cta-bg); color: var(--cta-ink); border-color: var(--cta-bg); }
@keyframes ck-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Планшет: карточки друг под другом ─────────────────────────── */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 8px auto 0; }
  .steps { opacity: 1; }
  .stage { display: none; }
  .step, .step:first-child { min-height: 0; opacity: 1; padding: 44px 0 0; justify-content: flex-start; }
  .step > .panel { display: block; margin-top: 20px; padding: 18px; border-radius: 2px; background: var(--raise); border: 1px solid var(--line); }
  .pn-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── Телефон ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .hero { padding-top: 44px; }
  .lead { margin-top: 18px; }
  .hero .cta-btn { width: 100%; min-width: 0; height: 60px; font-size: 17px; margin-top: 30px; }
  .pn-pii { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-pii li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pn-pii li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pc-phases, .sc-pans { grid-template-columns: minmax(0, 1fr); }
  .pc-phases div + div { margin-top: 10px; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pn-sc li { padding-left: 0; }
  .pn-sc b { position: static; display: block; width: auto; margin-bottom: 2px; }
  .sc-top { display: none; }
  .pn-scales.tilt .sc-for, .pn-scales.tilt .sc-against { transform: none; }
  /* без коромысла чаши стоят друг под другом — «перевес» показывает акцентная линия «За вас» */
  .pn-scales.tilt.weigh .sc-for { animation: sc-for-m 2.4s var(--ease); }
  .pn-scales.tilt.weigh .sc-against { animation: sc-against-m 2.4s var(--ease); }
  .bub { font-size: 14px; padding: 8px 14px 8px 12px; }
  .composer { padding: 14px 14px 12px 16px; border-radius: 20px; }
  .cmp-bar { flex-direction: column; align-items: stretch; }
  .cmp-send { width: 100%; }
  .facts { flex-direction: column; align-items: center; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .ck { max-width: none; }

  .dock {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 62%, transparent);
    transform: translateY(110%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  .dock.show { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .dock .cta-btn { width: 100%; min-width: 0; height: 56px; margin: 0; }
  body.has-dock .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes sc-for-m { 0%, 100% { box-shadow: inset 0 1px 0 var(--c); } 45% { box-shadow: inset 0 3px 0 var(--c), 0 10px 26px -18px var(--c); } }
@keyframes sc-against-m { 0%, 100% { opacity: 1; } 45% { opacity: .62; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ribbon { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .ribbon-track { padding-inline: 20px; }
}
.stage-body .panel.on .pn-check li { transition-delay: .55s; }
.stage-body .panel.on .pn-check li:nth-child(2) { transition-delay: .7s; }
.stage-body .panel.on .pn-check li:nth-child(3) { transition-delay: .85s; }