/* ══ Страница кейса «Разбор на полях» (тема 2.0.0) ═══════════════════════════
   Шаблон — single-rabota.php, ТЗ — Материалы/Кейсы-новые/ТЗ-страница-кейса.md.
   Подключается только на странице кейса. Цвета, шрифты и линии — из styles.css, новых нет.
   Три ширины: 1440 (от 1200), 834 (810–1199), 390 (до 809) — те же пороги, что в stranicy.css.
   Размеры шрифтов по ширинам — токены ниже: одно значение, один хозяин. */

.ds-kejs{
  --k-h1:72px;--k-h2:48px;--k-chislo:56px;--k-cel:120px;--k-skor:96px;--k-status:72px;
  --k-tekst:18px;--k-podpis:14px;--k-metka:13px;--k-ruka:24px;--k-knopka:56px;
  --k-pad:28px;--k-blok:56px;
}
@media (max-width:1199px){
  .ds-kejs{--k-h1:56px;--k-h2:40px;--k-chislo:48px;--k-cel:96px;--k-skor:80px;--k-status:56px;--k-tekst:17px;--k-ruka:22px}
}
@media (max-width:809px){
  .ds-kejs{--k-h1:40px;--k-h2:34px;--k-chislo:44px;--k-cel:72px;--k-skor:64px;--k-status:44px;--k-tekst:16px;--k-podpis:13px;--k-metka:12px;--k-ruka:20px;--k-knopka:52px;--k-pad:20px;--k-blok:40px}
}

/* Плашка под вырезкой персонажа. Позы лежат на сплошном белом: в светлой теме multiply убирает белое,
   в тёмной плашка остаётся белой, как у остальных персонажей сайта (parts/zz-plashki.css). Токен объявлен в обеих темах. */
:root{--ds-kejs-kadr:#fff}
:root[data-theme="dark"]{--ds-kejs-kadr:#fff}
/* Линия этапов «Как шла работа» (горизонтальная на 1440/834, вертикальная на 390): не меньше 3:1 к фону страницы.
   Светлая #7A8DAD на #fff — 3,36 (раньше --ds-gray-soft #8FA3C4 — 2,56); тёмная #6E7F99 на #0E1116 — 4,65. */
:root{--ds-kejs-liniya:#7A8DAD}
:root[data-theme="dark"]{--ds-kejs-liniya:#6E7F99}

/* заголовки и короткие подписи кейса: строки выравниваются по длине, висячих слов меньше */
.ds-kejs__h1,.ds-kejs__h2,.ds-kejs__polosa-h,.ds-kejs__sled-imya,.ds-kejs__etap-imya,.ds-kejs__cel-podpis,
.ds-kejs__sled-anons,.ds-kejs__podpis,.ds-kejs__vyrezka figcaption,.ds-kejs__vyrezka-ryadom figcaption{text-wrap:balance}

/* блок: боковые поля, нижняя линия, искры в верхних углах */
.ds-kejs section{position:relative;padding:var(--k-blok) var(--k-pad);border-bottom:1px solid var(--ds-line)}
.ds-kejs p{margin:0}

.ds-kejs__metka{margin:0 0 14px;color:var(--ds-blue-dark);font:500 var(--k-metka)/1.2 var(--ds-font-text);
  text-transform:uppercase;letter-spacing:.08em}
.ds-kejs__h2{margin:0;font:600 var(--k-h2)/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.005em}
.ds-kejs__abzac{margin-top:22px}
.ds-kejs__abzac p{margin:0 0 14px;font:400 var(--k-tekst)/1.62 var(--ds-font-text)}
.ds-kejs__abzac p:last-child{margin-bottom:0}
.ds-kejs__ruka{font:400 var(--k-ruka)/1.1 var(--ds-font-hand);color:var(--ds-blue-dark)}
.ds-kejs .ds-btn{min-height:var(--k-knopka);padding-top:0;padding-bottom:0;justify-content:center}

/* ── 1. Обложка ─────────────────────────────────────────────── */
.ds-kejs .ds-kejs__oblozhka{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;padding-top:40px;padding-bottom:40px}
.ds-kejs__oblozhka--bez-sceny{grid-template-columns:1fr}
.ds-kejs__h1{margin:0 0 18px;font:600 var(--k-h1)/.98 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}
.ds-kejs__lid{max-width:52ch;color:var(--ds-lead-ink);font:400 var(--k-tekst)/1.55 var(--ds-font-text)}
.ds-kejs__pasport{margin:28px 0;padding:0}
.ds-kejs__stroka{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--ds-line)}
.ds-kejs__stroka:last-child{border-bottom:1px solid var(--ds-line)}
.ds-kejs__stroka dt{color:var(--ds-gray);font:500 var(--k-metka)/1.5 var(--ds-font-text);text-transform:uppercase;letter-spacing:.06em}
.ds-kejs__stroka dd{margin:0;font:500 var(--k-tekst)/1.4 var(--ds-font-text);overflow-wrap:anywhere}
.ds-kejs__dejstvie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ds-kejs__sajt{margin-top:16px;font:400 15px/1.4 var(--ds-font-text)}
.ds-kejs__sajt a{color:var(--ds-blue-dark);text-underline-offset:3px}
.ds-kejs__scena{margin:0}
.ds-kejs__scena-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:var(--ds-badge)}
/* Пометка наклонена: коробка на всю ширину сцены при повороте выступала вниз на 5–11 px (ширина × sin 1.5° / 2).
   Коробка по тексту и поворот от левого нижнего угла: низ остаётся на месте, правый конец уходит вверх, в зазор над подписью. */
.ds-kejs__scena .ds-kejs__ruka{width:fit-content;max-width:100%;margin:14px 0 0 auto;text-align:right;transform:rotate(-1.5deg);transform-origin:left bottom}

/* строка цифр под обложкой */
.ds-kejs .ds-kejs__cifry{display:grid;grid-template-columns:repeat(var(--n,4),1fr);padding:0}
.ds-kejs .ds-kejs__cifry--n1{--n:1}
.ds-kejs .ds-kejs__cifry--n2{--n:2}
.ds-kejs .ds-kejs__cifry--n3{--n:3}
.ds-kejs__cifra{padding:30px var(--k-pad) 28px;border-right:1px solid var(--ds-line)}
.ds-kejs__cifra:last-child{border-right:0}
.ds-kejs__chislo{margin:0 0 8px;color:var(--ds-blue);font:600 var(--k-chislo)/1 var(--ds-font-display)}
.ds-kejs__podpis{color:var(--ds-gray);font:400 var(--k-podpis)/1.4 var(--ds-font-text)}

/* ── 2. Задача ──────────────────────────────────────────────── */
.ds-kejs .ds-kejs__zadacha{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.ds-kejs__celi{position:relative}
.ds-kejs__celi-spisok{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--ds-line)}
.ds-kejs__celi--n3 .ds-kejs__celi-spisok{grid-template-columns:repeat(3,1fr)}
.ds-kejs__cel{display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px;background:var(--ds-bg)}
.ds-kejs__cel-nomer{color:var(--ds-blue);font:600 var(--k-cel)/.9 var(--ds-font-display)}
.ds-kejs__cel-podpis{font:400 var(--k-tekst)/1.35 var(--ds-font-text)}
/* искры на пересечениях линий сетки целей */
.ds-kejs__celi .ds-spark{top:calc(50% - 6px);left:calc(50% - 6px);right:auto}
.ds-kejs__celi--n4 .ds-spark--tr{display:none}
.ds-kejs__celi--n3 .ds-spark{top:-6px}
.ds-kejs__celi--n3 .ds-spark--tl{left:calc(33.333% - 6px)}
.ds-kejs__celi--n3 .ds-spark--tr{left:calc(66.666% - 6px)}
.ds-kejs__celi--n2 .ds-spark{top:-6px}
.ds-kejs__celi--n2 .ds-spark--tr{display:none}
.ds-kejs__vyrezka-ryadom{margin:0}
.ds-kejs__vyrezka-ryadom img,.ds-kejs__vyrezka img{display:block;width:100%;height:auto;border:1px solid var(--ds-line);border-radius:14px}
.ds-kejs__vyrezka-ryadom figcaption,.ds-kejs__vyrezka figcaption{margin-top:12px;color:var(--ds-gray);font:400 var(--k-tekst)/1.4 var(--ds-font-text)}

/* ── 3. Главы-фишки ─────────────────────────────────────────── */
.ds-kejs .ds-glava{display:grid;column-gap:48px;align-items:start}
.ds-glava__golova{grid-area:golova}
.ds-glava__ekran{grid-area:ekran;margin:0}
.ds-glava__pometka{grid-area:pometka}
.ds-glava__stroki{grid-area:stroki;margin:26px 0 0;padding:0}
.ds-glava--brauzer.ds-glava--sleva{grid-template-columns:8fr 4fr;grid-template-rows:auto auto 1fr;
  grid-template-areas:"ekran golova" "ekran stroki" "ekran pometka"}
.ds-glava--brauzer.ds-glava--sprava{grid-template-columns:4fr 8fr;grid-template-rows:auto auto 1fr;
  grid-template-areas:"golova ekran" "stroki ekran" "pometka ekran"}
.ds-glava--telefon.ds-glava--sleva{grid-template-columns:4fr 6fr 2fr;grid-template-rows:auto auto 1fr;
  grid-template-areas:"ekran golova ." "ekran stroki ." "ekran pometka ."}
.ds-glava--telefon.ds-glava--sprava{grid-template-columns:2fr 6fr 4fr;grid-template-rows:auto auto 1fr;
  grid-template-areas:". golova ekran" ". stroki ekran" ". pometka ekran"}
.ds-glava__stroka{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--ds-line)}
.ds-glava__stroka:last-child{border-bottom:1px solid var(--ds-line)}
.ds-glava__stroka dt{color:var(--ds-blue-dark);font:600 var(--k-podpis)/1.5 var(--ds-font-text);text-transform:uppercase;letter-spacing:.06em}
.ds-glava__stroka dd{margin:0;font:400 var(--k-tekst)/1.5 var(--ds-font-text)}
/* пометка от руки: стрелка из колонки текста к ближнему краю рамки (одна на все главы) */
.ds-glava__pometka{display:flex;align-items:flex-start;gap:10px;margin-top:26px;max-width:360px;
  font:400 var(--k-ruka)/1.1 var(--ds-font-hand);color:var(--ds-blue-dark);transform:rotate(-2deg)}
.ds-glava--sprava .ds-glava__pometka{flex-direction:row-reverse;justify-self:end;text-align:right}
.ds-glava--sprava .ds-glava__strelka{transform:scaleX(-1)}
.ds-glava__strelka{flex:none;margin-top:6px}

/* рамка: браузер (три точки, без адресной строки) и телефон */
.ds-ramka{position:relative;overflow:hidden;border:1px solid var(--ds-line);border-radius:16px;background:var(--ds-bg-card)}
.ds-ramka--brauzer{padding-top:34px}
.ds-ramka__tochki{position:absolute;top:12px;left:16px;display:flex;gap:7px}
.ds-ramka__tochki i{width:10px;height:10px;border-radius:50%;background:var(--ds-gray-soft);opacity:.7}
.ds-ramka__okno{position:relative;aspect-ratio:16/10;background:var(--ds-badge)}
.ds-ramka--telefon{max-width:380px;margin-inline:auto;border:8px solid var(--ds-ink);border-radius:38px}
.ds-ramka--telefon .ds-ramka__okno{aspect-ratio:540/1170}
@media (min-width:1200px){
  .ds-glava--sleva.ds-glava--telefon .ds-ramka--telefon{margin-left:0}
  .ds-glava--sprava.ds-glava--telefon .ds-ramka--telefon{margin-right:0}
}
.ds-ramka__okno video,.ds-ramka__okno img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ds-ramka__metka{position:absolute;right:12px;bottom:14px;padding:6px 12px;border-radius:99px;
  background:var(--ds-ink);color:var(--ds-bg);font:500 13px/1 var(--ds-font-text);transition:opacity .2s}
.ds-ramka--igraet .ds-ramka__metka{opacity:0}
.ds-ramka__polosa{position:absolute;left:0;right:0;bottom:0;height:3px}
.ds-ramka__polosa i{display:block;width:0;height:100%;background:var(--ds-blue)}
.ds-glava__pokazat{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:max-content;max-width:calc(100% - 24px);
  white-space:nowrap;padding:14px 22px;border:0;border-radius:99px;
  background:var(--ds-ink);color:var(--ds-bg);font:600 15px/1 var(--ds-font-text);cursor:pointer}
.ds-glava__pokazat[hidden]{display:none}
.ds-ramka--mob{display:none}

/* ── 4 и 8. Полоса призыва ──────────────────────────────────── */
.ds-kejs .ds-kejs__polosa{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.ds-kejs__polosa-h{margin:0;font:600 var(--k-h2)/1 var(--ds-font-display);text-transform:uppercase}
.ds-kejs__polosa-p{margin-top:8px;max-width:44ch;color:var(--ds-lead-ink);font:400 var(--k-tekst)/1.45 var(--ds-font-text)}
.ds-kejs__polosa-dejstvie{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.ds-kejs .ds-kejs__polosa--pers{margin-top:88px;padding-right:calc(var(--k-pad) + 170px)}
.ds-kejs__pers{position:absolute;right:var(--k-pad);bottom:0;height:220px;width:auto;aspect-ratio:2/3;mix-blend-mode:multiply;pointer-events:none}
/* Тёмная тема: плашка персонажа — как у остальных плашек сайта (parts/zz-plashki.css): радиус --ds-pl-r и поле --ds-pl-p
   (28/24/20 на 1440/834/390 вместо 20 и 8). Фигура осталась прежнего размера (--pk-w × --pk-h: 131×204 / 91×144 / 77×124),
   плашка выросла на поля; место справа под неё добавлено к отступу полосы (--pk-zazor — прежний просвет). */
:root[data-theme="dark"] .ds-kejs{--pk-w:131px;--pk-h:204px;--pk-zazor:23px}
:root[data-theme="dark"] .ds-kejs__pers{mix-blend-mode:normal;background:var(--ds-kejs-kadr);box-sizing:border-box;object-fit:contain;
  padding:var(--ds-pl-p);border-radius:var(--ds-pl-r);aspect-ratio:auto;
  width:calc(var(--pk-w) + 2 * var(--ds-pl-p));height:calc(var(--pk-h) + 2 * var(--ds-pl-p))}
/* Плашка выросла на поля (+40 на 1440, +32 на 834) и растёт вверх от дна полосы: верхний отступ полосы растёт на столько же,
   чтобы зазор до линии предыдущего блока остался прежним (16 на ≥1200, 41 на 1130–1199, 121 на 810–1129 — как в светлой теме) */
@media (min-width:810px){
  :root[data-theme="dark"] .ds-kejs .ds-kejs__polosa--pers{padding-right:calc(var(--k-pad) + var(--pk-w) + 2 * var(--ds-pl-p) + var(--pk-zazor));
    margin-top:calc(64px + 32px)}
}
@media (min-width:1200px){
  :root[data-theme="dark"] .ds-kejs .ds-kejs__polosa--pers{margin-top:calc(88px + 40px)}
}
@media (max-width:1199px){
  :root[data-theme="dark"] .ds-kejs{--pk-w:91px;--pk-h:144px;--pk-zazor:18px}
}
@media (max-width:809px){
  :root[data-theme="dark"] .ds-kejs{--pk-w:77px;--pk-h:124px}
}

/* ── 5. Скорость и детали ───────────────────────────────────── */
.ds-kejs__skorost{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin-bottom:36px;padding-bottom:32px;border-bottom:1px solid var(--ds-line)}
.ds-kejs__skorost .ds-kejs__metka{flex:0 0 100%;margin-bottom:0}
.ds-kejs__skorost-chislo{color:var(--ds-blue);font:600 var(--k-skor)/.9 var(--ds-font-display)}
.ds-kejs__skorost-podpis{font:400 var(--k-tekst)/1.4 var(--ds-font-text)}
.ds-kejs__skorost-istochnik{margin-left:auto;max-width:46ch;text-align:right;color:var(--ds-gray);font:400 var(--k-podpis)/1.4 var(--ds-font-text)}
.ds-kejs__detali--skorost .ds-kejs__skorost{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ds-kejs__eshche{max-width:66.666%;margin-bottom:36px}
.ds-kejs__eshche .ds-kejs__abzac{margin-top:0}
.ds-kejs__mozaika{display:grid;grid-template-columns:7fr 5fr;gap:32px 24px;align-items:start}
.ds-kejs__vyrezka{margin:0}
.ds-kejs__mozaika--n3 .ds-kejs__vyrezka--1{grid-row:1 / 3}
.ds-kejs__eshche:last-child{margin-bottom:0}
/* вертикальная вырезка (снимок телефона): тонкая рамка телефона, колонка не шире 320 */
.ds-kejs__vyrezka--tel .ds-kejs__kadr{width:min(100%,320px);margin-inline:auto;overflow:hidden;
  border:1px solid var(--ds-line);border-radius:28px;background:var(--ds-badge)}
.ds-kejs__vyrezka--tel .ds-kejs__kadr img{border:0;border-radius:0}@media (min-width:1200px){
  /* две вырезки: колонки относятся как пропорции картинок (--r1 и --r2 пишет шаблон), картинки одной высоты, без обрезки и подложки.
     Телефонный снимок (исходник ≤ 800 px) в колонке шире 320 стоит рамкой 320 по центру; подписи выровнены по нижней линии */
  .ds-kejs__mozaika--n2{grid-template-columns:var(--c1,1.6fr) var(--c2,1fr);align-items:start}
  /* пара «обычная + телефон»: колонка телефона фиксированная (--c1/--c2 пишет шаблон), картинка в рамке по высоте строки;
     ширина картинки = ширина рамки, срезается низ длинного экрана */
  .ds-kejs__mozaika--tel .ds-kejs__vyrezka--tel{align-self:stretch;display:flex;flex-direction:column;min-height:0}
  .ds-kejs__mozaika--tel .ds-kejs__vyrezka--tel .ds-kejs__kadr{width:100%;margin:0;flex:1 1 0;min-height:0;position:relative}
  .ds-kejs__mozaika--tel .ds-kejs__vyrezka--tel .ds-kejs__kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  /* три вырезки: телефон не выше 560 px (две обычные справа стоят друг над другом) */
  .ds-kejs__mozaika--n3 .ds-kejs__vyrezka--tel .ds-kejs__kadr{max-height:560px}
  .ds-kejs__mozaika--n3 .ds-kejs__vyrezka--tel .ds-kejs__kadr img{height:560px;object-fit:cover;object-position:top}
}

/* ── 6. Как шла работа ──────────────────────────────────────── */
.ds-kejs__liniya{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(var(--n,5),1fr)}
.ds-kejs__etap{padding:0 20px}
.ds-kejs__etap:first-child{padding-left:0}
.ds-kejs__etap + .ds-kejs__etap{border-left:1px solid var(--ds-line)}
.ds-kejs__mesyac{margin-bottom:12px;color:var(--ds-gray);font:500 var(--k-metka)/1.2 var(--ds-font-text);text-transform:uppercase;letter-spacing:.06em}
.ds-kejs__mesyac:empty{display:none}
.ds-kejs__liniya--s-mesyacami .ds-kejs__mesyac{display:block;min-height:16px}
.ds-kejs__tochka{position:relative;display:block;height:14px;margin:0 -20px 18px}
.ds-kejs__etap:first-child .ds-kejs__tochka{margin-left:0}
.ds-kejs__tochka::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ds-kejs-liniya)}
.ds-kejs__tochka::after{content:"";position:absolute;left:20px;top:0;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--ds-blue);border-radius:50%;background:var(--ds-bg)}
.ds-kejs__etap:first-child .ds-kejs__tochka::after{left:0}
.ds-kejs__tochka--seychas::after{background:var(--ds-blue);box-shadow:0 0 0 5px var(--ds-tile)}
.ds-kejs__etap-nomer{margin-bottom:6px;color:var(--ds-blue);font:600 var(--k-chislo)/1 var(--ds-font-display)}
.ds-kejs__etap-imya{margin:0;font:600 18px/1.3 var(--ds-font-text)}
.ds-kejs__etap-imya--seychas{margin-top:6px}
.ds-kejs__etap-chto{margin-top:8px;color:var(--ds-gray);font:400 16px/1.45 var(--ds-font-text)}
.ds-kejs__ruka--seychas{margin-top:12px}
/* «Сейчас» со статусом (ТЗ, блок 6): метка вместо названия, статус крупно, итог под ним. Колонка «Сейчас» шире на 1440. */
.ds-kejs__liniya--status{grid-template-columns:repeat(var(--e,4),1fr) 1.6fr}
.ds-kejs__liniya--status .ds-kejs__etap-imya--seychas{color:var(--ds-blue-dark);font:500 var(--k-metka)/1.2 var(--ds-font-text);text-transform:uppercase;letter-spacing:.08em}
.ds-kejs .ds-kejs__status{margin-top:12px;color:var(--ds-ink);font:600 var(--k-status)/.9 var(--ds-font-display);text-transform:uppercase}
.ds-kejs__status-golova{display:block;color:var(--ds-blue)}
.ds-kejs .ds-kejs__itog{max-width:40ch;margin-top:16px;color:var(--ds-ink);font:400 var(--k-tekst)/1.5 var(--ds-font-text)}

/* ── 7. Отзыв ───────────────────────────────────────────────── */
.ds-kejs__otzyv figure{margin:0;max-width:66.666%}
.ds-kejs__otzyv-tekst{margin:0}
.ds-kejs__otzyv-tekst p{font:600 var(--k-h2)/1.05 var(--ds-font-display);text-transform:uppercase}
.ds-kejs__otzyv figcaption{margin-top:18px;color:var(--ds-gray);font:400 var(--k-tekst)/1.4 var(--ds-font-text)}

/* ── 8. Следующая работа ────────────────────────────────────── */
.ds-kejs .ds-kejs__sled{padding:var(--k-pad);border-bottom:0}
.ds-kejs__sled-ssylka{position:relative;display:block;color:inherit;text-decoration:none}
.ds-kejs__sled-scena{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--ds-badge)}
.ds-kejs__sled-scena img{display:block;width:100%;height:100%;object-fit:cover}
.ds-kejs__sled-kartochka{position:absolute;left:28px;bottom:28px;display:flex;flex-direction:column;gap:10px;width:520px;max-width:calc(100% - 56px);
  box-sizing:border-box;padding:26px 28px;border-radius:18px;background:var(--ds-bg)}
.ds-kejs__sled-kartochka .ds-kejs__metka{margin:0}
.ds-kejs__sled-imya{font:600 var(--k-h2)/1 var(--ds-font-display);text-transform:uppercase}
.ds-kejs__sled-anons{color:var(--ds-gray);font:400 16px/1.45 var(--ds-font-text)}
.ds-kejs__sled-strelka{color:var(--ds-blue-dark);font:600 16px/1 var(--ds-font-text);transition:translate .2s ease}
.ds-kejs__sled-ssylka:hover .ds-kejs__sled-strelka{translate:6px 0}

/* ── текст записи, когда глав нет ───────────────────────────── */
.ds-kejs__zapis--s-kadrom{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.ds-kejs__zapis .ds-prose > :first-child{margin-top:0}
.ds-kejs__zapis .ds-kejs__abzac{margin:0 0 24px}

/* ══ 834 ═══════════════════════════════════════════════════════ */
@media (max-width:1199px){
  .ds-kejs .ds-kejs__oblozhka,.ds-kejs .ds-kejs__zadacha,.ds-kejs__zapis--s-kadrom{grid-template-columns:1fr;gap:32px}
  .ds-kejs__scena{order:-1}
  .ds-kejs__cifra{padding-left:20px;padding-right:20px}
  .ds-kejs .ds-kejs__cifry--n4{--n:2}
  .ds-kejs__cifry--n4 .ds-kejs__cifra:nth-child(2n){border-right:0}
  .ds-kejs__cifry--n4 .ds-kejs__cifra:nth-child(-n+2){border-bottom:1px solid var(--ds-line)}

  /* главы: метка и H2, ролик во всю ширину, строки столбиком; пометка под роликом без стрелки */
  .ds-kejs .ds-glava{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"golova" "ekran" "pometka" "stroki";row-gap:0}
  .ds-glava__golova{margin-bottom:26px}
  .ds-glava__strelka{display:none}
  .ds-glava--sleva .ds-glava__pometka,.ds-glava--sprava .ds-glava__pometka{margin-top:20px;transform:none;justify-self:start;text-align:left;max-width:none}
  .ds-glava__stroka{grid-template-columns:1fr;gap:4px}
  .ds-ramka--telefon{max-width:300px;margin-inline:auto}

  .ds-kejs .ds-kejs__polosa{flex-wrap:wrap}
  .ds-kejs .ds-kejs__polosa--pers{margin-top:64px;padding-right:calc(var(--k-pad) + 125px)}
  .ds-kejs__pers{height:160px}

  .ds-kejs__skorost-istochnik{flex:0 0 100%;margin-left:0;max-width:none;text-align:left}
  .ds-kejs__eshche{max-width:none}
  .ds-kejs__mozaika{grid-template-columns:1fr 1fr}
  .ds-kejs__mozaika--n3 .ds-kejs__vyrezka--1{grid-column:1 / -1;grid-row:auto}
  .ds-kejs__mozaika--n2{grid-template-columns:7fr 5fr}

  .ds-kejs__liniya,.ds-kejs__liniya--status{grid-template-columns:1fr 1fr;row-gap:32px}
  .ds-kejs__etap,.ds-kejs__etap:first-child{padding:0 24px 0 0}
  .ds-kejs__etap + .ds-kejs__etap{border-left:0}
  .ds-kejs__tochka,.ds-kejs__etap:first-child .ds-kejs__tochka{margin:0 0 18px}
  .ds-kejs__tochka::after,.ds-kejs__etap:first-child .ds-kejs__tochka::after{left:0}
  .ds-kejs__etap--seychas{grid-column:1 / -1}
  /* со статусом: точка и метка на всю строку, ниже статус слева и итог справа, зазор 32, по верху */
  .ds-kejs__etap--status{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}
  .ds-kejs__etap--status > :not(.ds-kejs__status):not(.ds-kejs__itog){grid-column:1 / -1}
  .ds-kejs__etap--status .ds-kejs__status{grid-column:1}
  .ds-kejs__etap--status .ds-kejs__itog{grid-column:2;margin-top:12px}
  .ds-kejs__otzyv figure{max-width:none}

  .ds-kejs__sled-kartochka{position:static;width:auto;max-width:none;padding:22px 0 0;border-radius:0;background:none}
}

/* ══ 390 ═══════════════════════════════════════════════════════ */
@media (max-width:809px){
  /* обложка: сцена сверху во всю ширину экрана, без полей */
  .ds-kejs .ds-kejs__oblozhka{padding-top:0;gap:24px}
  .ds-kejs__scena{margin:0 calc(-1 * var(--k-pad))}
  .ds-kejs__scena-img{border-radius:0}
  .ds-kejs__scena .ds-kejs__ruka{padding:0 var(--k-pad)}
  .ds-kejs__dejstvie{flex-direction:column;align-items:stretch}
  .ds-kejs__dejstvie .ds-btn,.ds-kejs__polosa-dejstvie .ds-btn{width:100%}
  .ds-kejs__dejstvie .ds-reply,.ds-kejs__polosa-dejstvie .ds-reply{justify-content:center}
  .ds-kejs__stroka{grid-template-columns:88px 1fr;gap:12px}
  /* «Смотреть сайт»: зона касания не меньше 44 px по высоте (текст 15/21); отрицательные поля держат прежнюю высоту строки */
  .ds-kejs__sajt a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11.5px}

  .ds-kejs__cifra{padding-top:22px;padding-bottom:22px}
  /* две колонки; разделитель между рядами у всех, кроме последнего ряда; нечётная последняя — на всю строку */
  .ds-kejs .ds-kejs__cifry--n2,.ds-kejs .ds-kejs__cifry--n3,.ds-kejs .ds-kejs__cifry--n4{--n:2}
  .ds-kejs__cifra:nth-child(2n){border-right:0}
  .ds-kejs__cifra{border-bottom:1px solid var(--ds-line)}
  .ds-kejs__cifry:not(.ds-kejs__cifry--nechet) .ds-kejs__cifra:nth-last-child(-n+2){border-bottom:0}
  .ds-kejs__cifry--nechet .ds-kejs__cifra:last-child{grid-column:1 / -1;border-right:0;border-bottom:0}

  .ds-kejs__celi--n3 .ds-kejs__celi-spisok{grid-template-columns:1fr 1fr}
  .ds-kejs__celi--n3 .ds-kejs__cel:last-child{grid-column:1 / -1}
  .ds-kejs__celi--n3 .ds-spark,.ds-kejs__celi--n2 .ds-spark{top:calc(50% - 6px)}
  .ds-kejs__celi--n3 .ds-spark{top:calc(33% - 6px);left:calc(50% - 6px)}
  .ds-kejs__celi--n3 .ds-spark--tr{display:none}
  .ds-kejs__cel{padding:18px 16px 20px}

  /* главы: на телефоне — мобильная запись в рамке телефона 300, если она есть */
  .ds-kejs .ds-glava--est-mob .ds-ramka:not(.ds-ramka--mob){display:none}
  .ds-kejs .ds-glava--est-mob .ds-ramka--mob{display:block;width:300px;max-width:100%;margin-inline:auto}
  .ds-glava--est-mob.ds-glava--brauzer .ds-ramka--mob{max-width:300px}

  .ds-kejs .ds-kejs__polosa{flex-direction:column;align-items:stretch;gap:16px}
  .ds-kejs .ds-kejs__polosa--pers{margin-top:0;padding-right:var(--k-pad)}
  .ds-kejs__pers{position:static;order:-1;align-self:flex-end;height:140px;margin-bottom:-8px}
  .ds-kejs__polosa-dejstvie{flex-direction:column;align-items:stretch}

  .ds-kejs__skorost{gap:4px 16px}
  .ds-kejs__mozaika,.ds-kejs__mozaika--n2{grid-template-columns:1fr}
  .ds-kejs__mozaika--n3 .ds-kejs__vyrezka--1{grid-column:auto}

  /* линия вертикальная слева; этапы строками: месяц, номер и название, строка */
  .ds-kejs__liniya{display:block;margin-top:28px}
  .ds-kejs__etap,.ds-kejs__etap:first-child{position:relative;padding:0 0 28px 36px}
  .ds-kejs__etap:last-child{padding-bottom:0}
  .ds-kejs__etap::before{content:"";position:absolute;left:6px;top:8px;bottom:-6px;border-left:1px solid var(--ds-kejs-liniya)}
  .ds-kejs__etap:last-child::before{display:none}
  .ds-kejs__tochka,.ds-kejs__etap:first-child .ds-kejs__tochka{position:absolute;left:0;top:0;width:14px;height:14px;margin:0}
  .ds-kejs__tochka::before{display:none}
  .ds-kejs__tochka::after,.ds-kejs__etap:first-child .ds-kejs__tochka::after{left:0}
  .ds-kejs__etap-nomer{display:inline;margin:0 12px 0 0}
  .ds-kejs__etap-imya{display:inline}
  .ds-kejs__etap-chto{margin-top:10px}
  /* «Сейчас» со статусом: метка на уровне точки, статус 44 (токен), итог ниже с отступом 14 */
  .ds-kejs__etap--status{display:block}
  .ds-kejs__etap--status .ds-kejs__etap-imya--seychas{display:block;margin-top:0}
  .ds-kejs__etap--status .ds-kejs__itog{margin-top:14px}

  .ds-kejs .ds-kejs__sled{padding:0}
  .ds-kejs__sled-scena{aspect-ratio:16/10;border-radius:0}
  .ds-kejs__sled-kartochka{padding:20px var(--k-pad) 28px}
}

/* ══ 600–809 («2+1» на 768) ═════════════════════════════════════
   Раскладка «две колонки и последняя на всю строку» нужна только телефону (ТЗ, 390). На 600–809 три цифры и три цели
   стоят в один ряд, как на 834 (ТЗ: «3 цели — 3 в ряд»); четыре — по-прежнему 2×2, две — в ряд. Сирот нет. */
@media (min-width:600px) and (max-width:809px){
  .ds-kejs .ds-kejs__cifry--n3{--n:3}
  .ds-kejs__cifry--n3 .ds-kejs__cifra:nth-child(2n){border-right:1px solid var(--ds-line)}
  .ds-kejs__cifry--n3 .ds-kejs__cifra:last-child{border-right:0}
  .ds-kejs__cifry--n3 .ds-kejs__cifra{border-bottom:0}
  .ds-kejs__cifry--n3.ds-kejs__cifry--nechet .ds-kejs__cifra:last-child{grid-column:auto}

  .ds-kejs__celi--n3 .ds-kejs__celi-spisok{grid-template-columns:repeat(3,1fr)}
  .ds-kejs__celi--n3 .ds-kejs__cel:last-child{grid-column:auto}
  .ds-kejs__celi--n3 .ds-spark{top:-6px}
  .ds-kejs__celi--n3 .ds-spark--tl{left:calc(33.333% - 6px)}
  .ds-kejs__celi--n3 .ds-spark--tr{display:block;left:calc(66.666% - 6px)}
  /* две цели в ряд: искра на верху вертикальной линии, как у трёх и на 834 (на 390 она посередине — это телефонная раскладка 2+1/2×2) */
  .ds-kejs__celi--n2 .ds-spark{top:-6px}
}