/* ── экран 01 ── */
#s01 .s01-in { justify-content:flex-start; }
#s01 .s01-logo { width:31cqw; color:#F4F5F6; margin-top:3.2cqh; }
#s01 .s01-logo svg { display:block; width:100%; height:auto; }
#s01 .s01-logo .dot { fill:#FFB23F; }
#s01 .s01-h { margin-top:7.5cqh; max-width:12ch; }
#s01 .s01-lead { margin-top:2.6cqh; max-width:30em; color:#D5DAE2; }
#s01 .s01-low { position:absolute; left:var(--pad); right:var(--pad); top:66cqh; display:grid; gap:1.6cqh; }
#s01 .s01-hint { font-family:var(--sans); font-size:max(15px,3.9cqw); line-height:1.35; color:#F4F5F6; letter-spacing:-.005em; }
#s01 .s01-hint-l { display:none; }
#s01 .s01-note { color:rgba(244,245,246,.6); max-width:34em; }
/* вступление: знак проявляется, когда точка поднимается с горизонта; своя точка знака — когда та долетела */
.js #s01.is-wait .s01-logo { opacity:0; }
.js #s01.is-wait.is-rise .s01-logo { opacity:1; transition:opacity .9s var(--ease) .15s; }
.js #s01.is-wait .s01-logo .dot { opacity:0; }
.js #s01.is-wait .dk-ph { opacity:0; }
.js #s01.is-wait.is-rise .dk-ph { opacity:1; transition:opacity .9s var(--ease); }
[data-o="l"] #s01 .s01-logo { width:13cqw; margin-top:3cqh; }
[data-o="l"] #s01 .s01-h { margin-top:9cqh; max-width:11ch; }
[data-o="l"] #s01 .s01-lead { max-width:34cqw; }
[data-o="l"] #s01 .s01-low { top:auto; bottom:calc(var(--uib) + 3cqh); right:auto; width:44cqw; }
[data-o="l"] #s01 .s01-hint { font-size:max(15px,1.15cqw); }
[data-o="l"] #s01 .s01-hint-p { display:none; }
[data-o="l"] #s01 .s01-hint-l { display:inline; }

/* ── экран 02 ── */
/* 02 · Задача: окно выбора подрядчика. Шкала в днях от события: на телефоне время идёт вниз, на широком вправо, как в КП.
   Порядок: точка встаёт в день 0, затем время бежит по шкале (линия, окно первой недели, метки недель),
   участники появляются, когда время доходит до их дня. --k: день метки, --span: дней на шкале.
   Место на шкале --q: первые --B дней занимают долю --a, остальные дни делят остаток. При --a = --B / --span шкала ровная
   (широкий экран, как в КП); в портрете недели 2–5 пусты, их сжимаем: первым неделям просторнее, под шкалой место для вывода и сноски. */
#s02 .s02-h { max-width:18ch; }
#s02 .s02-tl { --span:35; --B:14; --a:.55; --ax:22cqw; --S:.55s; --D:1.25s; position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:3.2cqh; }
#s02 .s02-tk, #s02 .s02-wl, #s02 .s02-mk { --q:calc(min(var(--k), var(--B)) / var(--B) * var(--a) + max(var(--k) - var(--B), 0) / (var(--span) - var(--B)) * (1 - var(--a))); }
#s02 .s02-wn { margin-left:calc(var(--ax) - 1px); max-width:31ch; }
#s02 .s02-ax { position:relative; flex:1 1 auto; margin:2.6cqh 0 6.4cqh; }
#s02 .s02-sc { position:absolute; inset:0; }
#s02 .s02-line { position:absolute; left:var(--ax); top:0; bottom:0; width:1px; background:var(--line2); transform-origin:center top; }
#s02 .s02-win { position:absolute; left:calc(var(--ax) - 1px); top:0; width:3px; height:calc(7 / var(--B) * var(--a) * 100%); background:var(--fg); transform-origin:center top; }
#s02 .s02-tk { position:absolute; top:calc(var(--q) * 100%); left:calc(var(--ax) - 5px); width:5px; height:1px; background:var(--line2); }
#s02 .s02-tk.w { left:calc(var(--ax) - 11px); width:11px; background:var(--mute); }
#s02 .s02-wl { position:absolute; top:calc(var(--q) * 100%); right:calc(100% - var(--ax) + 17px); transform:translateY(-50%); font:400 max(11px,3.05cqw)/1 var(--mono); color:var(--mute); white-space:nowrap; }
#s02 .x { display:none; }
#s02 .s02-nb { white-space:nowrap; }
#s02 .s02-dot { position:absolute; left:calc(var(--ax) + .5px); top:0; --ds:12px; margin:-6px 0 0 -6px; }
#s02 .s02-mk { position:absolute; left:var(--ax); right:0; top:calc(var(--q) * 100%); padding-left:6.2cqw;
  --t:calc(var(--S) + var(--D) * var(--q)); }
#s02 .s02-ld { position:absolute; left:1px; top:0; width:4.2cqw; height:1px; background:var(--mute); transform-origin:left center; }
#s02 .s02-n { margin-top:-.6em; font-weight:500; font-size:max(16px,4.6cqw); line-height:1.2; letter-spacing:-.012em; color:var(--fg); }
#s02 .s02-ds { margin-top:.5cqh; font-size:max(15px,3.95cqw); line-height:1.32; color:var(--soft); text-wrap:pretty; }
#s02 .s02-lead { margin-top:0; }
#s02 .s02-note { margin-top:1.6cqh; }
#s02 .s02-nl { display:none; }

/* телефон до 860px высотой: недели 2–5 сжаты (дневные засечки там убраны, недельные остаются), подпись окна в одну строку */
@container dk (max-height:860px) {
  [data-o="p"] #s02 .s02-tl { --a:.6; margin-top:2.8cqh; }
  [data-o="p"] #s02 .s02-tk.z { display:none; }
  [data-o="p"] #s02 .s02-wx { display:none; }
  [data-o="p"] #s02 .s02-wn { max-width:none; }
}
/* ниже 800px из абзаца под шкалой уходит первая фраза: её смысл уже в заголовке и подписи окна */
@container dk (max-height:800px) {
  [data-o="p"] #s02 .s02-l1 { display:none; }
}
/* низкий телефон (встроенный браузер соцсетей, главный вход из сторис): шкала сжата сильнее, вывод остаётся,
   сноска в одну строку («письмо без повода»), под рекламой место для двух строк её подписи */
@container dk (max-height:720px) {
  [data-o="p"] #s02 .s02-tl { --a:.64; margin-top:2.4cqh; }
  [data-o="p"] #s02 .s02-ax { margin:2.2cqh 0 8.6cqh; }
  [data-o="p"] #s02 .s02-note { margin-top:1.2cqh; }
  [data-o="p"] #s02 .s02-n2 { display:none; }
}

/* широкий экран: как слайд КП, шкала на шесть недель вправо, подписи над шкалой */
[data-o="l"] #s02 .s02-h { max-width:31ch; }
[data-o="l"] #s02 .s02-tl { --span:42; --a:calc(14 / 42); position:absolute; left:var(--pad); right:var(--pad); top:43cqh; height:16.6cqh; margin:0; display:block; }
[data-o="l"] #s02 .s02-ax { position:absolute; inset:0; margin:0; }
[data-o="l"] #s02 .s02-wn { position:absolute; left:0; top:calc(100% + 5.6cqh); margin:0; max-width:none; }
[data-o="l"] #s02 .x { display:block; }
[data-o="l"] #s02 .s02-line { left:0; right:0; top:auto; bottom:0; width:auto; height:1px; transform-origin:left center; }
[data-o="l"] #s02 .s02-win { left:0; top:auto; bottom:-1px; width:calc(7 / var(--span) * 100%); height:3px; transform-origin:left center; }
[data-o="l"] #s02 .s02-tk { top:auto; bottom:0; left:calc(var(--q) * 100%); width:1px; height:.6cqw; }
[data-o="l"] #s02 .s02-tk.w { height:1.25cqw; }
[data-o="l"] #s02 .s02-wl { top:calc(100% + 2.4cqh); right:auto; left:calc(var(--q) * 100%); transform:translateX(-50%); font-size:max(11px,.84cqw); }
[data-o="l"] #s02 .s02-wl[style="--k:0"] { transform:none; }
[data-o="l"] #s02 .s02-wl[style="--k:42"] { transform:translateX(-100%); }
[data-o="l"] #s02 .s02-dot { left:0; top:auto; bottom:1.05cqw; --ds:max(12px,.95cqw); margin:0; }
[data-o="l"] #s02 .s02-mk { left:calc(var(--q) * 100%); right:auto; top:0; bottom:0; width:24cqw; padding:0 0 0 1cqw; }
[data-o="l"] #s02 .s02-mk0 { width:calc(9 / 42 * 100% - 1.2cqw); padding-left:1.9cqw; }
[data-o="l"] #s02 .s02-mk2 { width:22cqw; }
[data-o="l"] #s02 .s02-ld { left:0; top:0; bottom:0; width:1px; height:auto; transform-origin:center bottom; }
[data-o="l"] #s02 .s02-n { margin-top:-.28em; font-size:max(18px,1.32cqw); }
[data-o="l"] #s02 .s02-ds { margin-top:.6cqh; font-size:max(17px,1.18cqw); line-height:1.4; max-width:21cqw; }
[data-o="l"] #s02 .s02-lead { position:absolute; left:var(--pad); top:71cqh; max-width:66cqw; }
[data-o="l"] #s02 .s02-note { position:absolute; left:var(--pad); top:83.4cqh; margin:0; }
[data-o="l"] #s02 .s02-nl { display:inline; }

/* телефон, повёрнутый горизонтально (кадр ниже 520px): вывод уже в заголовке, лид и сноска уходят, подписям над шкалой больше места */
@container dk (max-height:520px) {
  [data-o="l"] #s02 .s02-note, [data-o="l"] #s02 .s02-lead { display:none; }
  [data-o="l"] #s02 .s02-h { max-width:none; }
  [data-o="l"] #s02 .s02-tl { top:38cqh; height:31cqh; }
  [data-o="l"] #s02 .s02-wn { top:calc(100% + 7cqh); }
}

/* движение: точка встаёт в день 0, потом время бежит по шкале. Без JS и при «меньше движения»: сразу конечный вид */
.js #s02 .s02-dot { opacity:0; transform:translateY(-4.5cqh); transition:opacity .45s var(--ease) .3s, transform .8s var(--ease) .3s; }
.js #s02 .s02-line, .js #s02 .s02-win { transform:scaleY(0); }
.js #s02 .s02-line { transition:transform var(--D) linear var(--S); }
.js #s02 .s02-win { transition:transform calc(var(--D) * 7 / var(--B) * var(--a)) linear var(--S); }
.js #s02 .s02-tk, .js #s02 .s02-wl { opacity:0; transition:opacity .4s var(--ease) calc(var(--S) + var(--D) * var(--q)); }
.js #s02 .s02-ld { transform:scaleX(0); transition:transform .5s var(--ease) var(--t); }
.js #s02 .s02-mk .s02-n, .js #s02 .s02-mk .s02-ds { opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) calc(var(--t) + .12s), transform .8s var(--ease) calc(var(--t) + .12s); }
.js #s02 .s02-mk .s02-ds { transition-delay:calc(var(--t) + .2s); }
.js #s02 .s02-mk0 .s02-n, .js #s02 .s02-mk0 .s02-ds { transition-delay:.5s; }
.js #s02 .s02-wn { opacity:0; transition:opacity .6s var(--ease) calc(var(--S) + var(--D) * 7 / var(--B) * var(--a)); }
.js #s02 .s02-lead { opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease) 1.5s, transform .9s var(--ease) 1.5s; }
.js #s02 .s02-note { opacity:0; transition:opacity .7s var(--ease) 1.7s; }
.js [data-o="l"] #s02 .s02-line, .js [data-o="l"] #s02 .s02-win { transform:scaleX(0); }
.js [data-o="l"] #s02 .s02-ld { transform:scaleY(0); }
.js #s02.is-on .s02-in .s02-dot, .js #s02.is-on .s02-in .s02-line, .js #s02.is-on .s02-in .s02-win, .js #s02.is-on .s02-in .s02-ld,
.js #s02.is-on .s02-in .s02-n, .js #s02.is-on .s02-in .s02-ds, .js #s02.is-on .s02-in .s02-lead { opacity:1; transform:none; }
.js #s02.is-on .s02-in .s02-tk, .js #s02.is-on .s02-in .s02-wl, .js #s02.is-on .s02-in .s02-wn, .js #s02.is-on .s02-in .s02-note { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .js #s02 .s02-in * { transition:none !important; }
  .js #s02 .s02-dot, .js #s02 .s02-line, .js #s02 .s02-win, .js #s02 .s02-ld, .js #s02 .s02-n, .js #s02 .s02-ds, .js #s02 .s02-lead { opacity:1; transform:none !important; }
  .js #s02 .s02-tk, .js #s02 .s02-wl, .js #s02 .s02-wn, .js #s02 .s02-note { opacity:1; }
}

/* ── экран 03 ── */
/* 03 · Идея: ночь точками. Четыре дорожки источников, ось 00:00–08:00, точки рисует 03.js на холсте
   (места точек одинаковые при каждом показе). Порядок: точки высыпают по дорожкам слева направо, неподходящие гаснут,
   32 светлеют, последней загорается янтарная закупка в 07:26. Подписи и счётчики в легенде идут в такт.
   Поле .s03-f: дорожка i занимает четверть высоты, полоса точек .s03-bd: без места под подпись (--bt) и зазора (--bb). */
#s03 .s03-h { max-width:14ch; }
#s03 .s03-nb { white-space:nowrap; }
#s03 .s03-c1, #s03 .s03-c2 { display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }
#s03 .s03-v { --bt:24px; --bb:3px; --axh:30px; --tg:4px; --tagh:22px; --rr:30px;
  position:relative; flex:1 1 auto; min-height:0; margin-top:2.6cqh; }
#s03 .s03-lanes, #s03 .s03-f { position:absolute; left:0; right:0; top:0; bottom:calc(var(--axh) + var(--tg) + var(--tagh)); }
#s03 .s03-lanes { display:grid; grid-template-rows:repeat(4, minmax(0,1fr)); z-index:3; pointer-events:none; }
#s03 .s03-ln { display:flex; justify-content:space-between; align-items:baseline; gap:10px; min-width:0; }
#s03 .s03-n { font-weight:500; font-size:max(15px,4.1cqw); line-height:1.15; letter-spacing:-.01em; color:var(--fg); white-space:nowrap; }
#s03 .s03-c { white-space:nowrap; }
#s03 .s03-cl { display:none; }
#s03 .s03-bd { position:absolute; left:0; right:0; top:calc(var(--i) * 25% + var(--bt)); height:calc(25% - var(--bt) - var(--bb)); }
#s03 .s03-bd::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--cell); transform-origin:left center; }
#s03 .s03-cv { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; }
#s03 .s03-hit { position:absolute; left:calc(7.4333 / 8 * 100%); top:50%; z-index:2; }
#s03 .s03-ring { position:absolute; left:0; top:0; width:var(--rr); height:var(--rr); margin:calc(var(--rr) / -2) 0 0 calc(var(--rr) / -2); border:1.5px solid var(--acc); border-radius:50%; }
#s03 .s03-dot { position:absolute; left:0; top:0; --ds:10px; margin:-5px 0 0 -5px; }
#s03 .s03-lk { position:absolute; z-index:2; left:calc(7.4333 / 8 * 100%); width:1px; background:var(--acc);
  top:calc(87.5% + (var(--bt) - var(--bb)) / 2 + var(--rr) / 2); bottom:-9px; transform-origin:center top; }
#s03 .s03-ax { position:absolute; z-index:3; left:0; right:0; top:100%; height:var(--axh); border-top:1px solid var(--line2); }
#s03 .s03-ax i { position:absolute; top:0; left:calc(var(--h) / 8 * 100%); width:1px; height:6px; background:var(--line2); }
#s03 .s03-ax b { position:absolute; z-index:3; top:12px; left:calc(var(--h) / 8 * 100%); transform:translateX(-50%); padding:0 0 2px; background:var(--bg); font:400 max(11px,3.05cqw)/1 var(--mono); color:var(--mute); }
#s03 .s03-ax b:first-of-type { transform:none; }
#s03 .s03-ax b:last-of-type { transform:translateX(-100%); }
/* на телефоне подпись 08:00 легла бы на янтарную линию 07:26: конец оси без подписи, время 07:26 стоит на оси под линией,
   под осью строка события */
[data-o="p"] #s03 .s03-ax b:last-of-type { display:none; }
#s03 .s03-at { position:absolute; z-index:3; top:12px; left:calc(7.4333 / 8 * 100%); transform:translateX(-50%); padding:0 0 2px; background:var(--bg); font:400 max(11px,3.05cqw)/1 var(--mono); color:var(--fg); }
#s03 .s03-tag { position:absolute; right:0; top:calc(100% + var(--axh) + var(--tg)); text-align:right; font-size:max(15px,3.9cqw); line-height:1.3; letter-spacing:-.01em; color:var(--fg); white-space:nowrap; }
#s03 .s03-tag b { display:none; }
#s03 .s03-lg { margin-top:1.8cqh; }
#s03 .s03-note { margin-top:1.4cqh; }

/* низкий телефон (встроенный браузер соцсетей): заголовок того же размера, подписи дорожек плотнее, чтобы полосам точек
   хватило высоты; из сноски уходит вторая фраза, оговорка о демонстрационных данных остаётся */
@container dk (max-height:720px) {
  [data-o="p"] #s03 .s03-v { --bt:21px; margin-top:2cqh; }
  [data-o="p"] #s03 .s03-lg { margin-top:1.2cqh; }
  [data-o="p"] #s03 .s03-note { margin-top:.9cqh; }
}
/* вторая фраза сноски уходит там, где без неё сноска встаёт в одну строку (шире 370px); на 360px она и так в две строки */
@container dk (max-height:720px) and (min-width:370px) {
  [data-o="p"] #s03 .s03-nx { display:none; }
}

/* широкий экран: как слайд КП, подписи дорожек слева, поле точек справа */
[data-o="l"] #s03 .s03-h { max-width:34ch; }
[data-o="l"] #s03 .s03-v { --bt:.6cqh; --bb:.6cqh; --axh:4.6cqh; --tg:1.3cqh; --tagh:3.4cqh; --rr:4.4cqh;
  flex:none; height:calc(29cqh + var(--axh) + var(--tg) + var(--tagh)); margin-top:6.4cqh; }
[data-o="l"] #s03 .s03-lanes { right:auto; width:18.5cqw; }
[data-o="l"] #s03 .s03-f { left:20cqw; }
[data-o="l"] #s03 .s03-ln { display:block; align-self:center; }
[data-o="l"] #s03 .s03-n { font-size:max(17px,1.18cqw); }
[data-o="l"] #s03 .s03-c { margin-top:.5cqh; }
[data-o="l"] #s03 .s03-cl { display:inline; }
[data-o="l"] #s03 .s03-cp { display:none; }
[data-o="l"] #s03 .s03-dot { --ds:max(11px,.75cqw); margin:calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2); }
[data-o="l"] #s03 .s03-ax i { height:.45cqw; }
[data-o="l"] #s03 .s03-ax b { top:1.6cqh; font-size:max(11px,.84cqw); }
[data-o="l"] #s03 .s03-at { display:none; }
[data-o="l"] #s03 .s03-lk { bottom:calc(-1 * (var(--axh) + var(--tg))); }
[data-o="l"] #s03 .s03-tag { font-size:max(17px,1.18cqw); }
[data-o="l"] #s03 .s03-tag b { display:inline; margin-right:.6em; font:400 max(13px,.95cqw)/1.35 var(--mono); }
[data-o="l"] #s03 .s03-lg { max-width:80cqw; margin-top:3.4cqh; }
[data-o="l"] #s03 .s03-note { margin-top:2.6cqh; }

/* телефон, повёрнутый горизонтально (кадр ниже 520px): сноска и числа дорожек уходят (итоги в легенде), дорожки плотнее */
@container dk (max-height:520px) {
  [data-o="l"] #s03 .s03-note { display:none; }
  [data-o="l"] #s03 .s03-c { display:none; }
  [data-o="l"] #s03 .s03-v { --tg:.8cqh; height:calc(22cqh + var(--axh) + var(--tg) + var(--tagh)); margin-top:2cqh; }
  [data-o="l"] #s03 .s03-lanes { width:23cqw; }
  [data-o="l"] #s03 .s03-f { left:24.5cqw; }
  [data-o="l"] #s03 .s03-ax b:last-of-type { display:none; }
  [data-o="l"] #s03 .s03-lg { margin-top:3.2cqh; }
}

/* движение DOM-частей; точки и счётчики ведёт 03.js. Без JS и при «меньше движения» всё сразу видно */
.js #s03 .s03-ln { opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) calc(.2s + var(--i) * .07s), transform .8s var(--ease) calc(.2s + var(--i) * .07s); }
.js #s03 .s03-bd::before { transform:scaleX(0); transition:transform .9s var(--ease) calc(.2s + var(--i) * .07s); }
.js #s03 .s03-ax { opacity:0; transition:opacity .6s var(--ease) .3s; }
.js #s03 .s03-l1, .js #s03 .s03-l2, .js #s03 .s03-l3, .js #s03 .s03-tag, .js #s03 .s03-at, .js #s03 .s03-note { opacity:0; }
.js #s03 .s03-l1 { transition:opacity .6s var(--ease) .3s; }
.js #s03 .s03-l2 { transition:opacity .6s var(--ease) 1.25s; }
.js #s03 .s03-l3 { transition:opacity .6s var(--ease) 1.8s; }
.js #s03 .s03-ring { opacity:0; transform:scale(.35); transition:opacity .5s var(--ease) 1.75s, transform .8s var(--ease) 1.75s; }
.js #s03 .s03-dot { opacity:0; transform:scale(.3); transition:opacity .3s var(--ease) 1.75s, transform .55s var(--ease) 1.75s; }
.js #s03 .s03-lk { transform:scaleY(0); transition:transform .45s var(--ease) 1.95s; }
.js #s03 .s03-tag, .js #s03 .s03-at { transition:opacity .55s var(--ease) 2.05s; }
.js #s03 .s03-note { transition:opacity .6s var(--ease) 2s; }
.js #s03.is-on .s03-in .s03-ln, .js #s03.is-on .s03-in .s03-bd::before, .js #s03.is-on .s03-in .s03-ring,
.js #s03.is-on .s03-in .s03-dot, .js #s03.is-on .s03-in .s03-lk { opacity:1; transform:none; }
.js #s03.is-on .s03-in .s03-ax, .js #s03.is-on .s03-in .s03-l1, .js #s03.is-on .s03-in .s03-l2, .js #s03.is-on .s03-in .s03-l3,
.js #s03.is-on .s03-in .s03-tag, .js #s03.is-on .s03-in .s03-at, .js #s03.is-on .s03-in .s03-note { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .js #s03 .s03-in *, .js #s03 .s03-in *::before { transition:none !important; }
  .js #s03 .s03-in .s03-ln, .js #s03 .s03-in .s03-bd::before, .js #s03 .s03-in .s03-ring, .js #s03 .s03-in .s03-dot, .js #s03 .s03-in .s03-lk,
  .js #s03 .s03-in .s03-ax, .js #s03 .s03-in .s03-l1, .js #s03 .s03-in .s03-l2, .js #s03 .s03-in .s03-l3, .js #s03 .s03-in .s03-tag, .js #s03 .s03-in .s03-at, .js #s03 .s03-in .s03-note { opacity:1; transform:none; }
}

/* ── экран 04 ── */
/* 04 · Поводы: ночное табло. Телефон: строка: время ячейками и источник, событие, «для кого» (моноширинное только время);
   широкий экран: таблица как в КП (время · источник · событие · кому это повод). Строки падают сверху по одной,
   ячейки времени перещёлкиваются, как на вокзальном табло (04.js), последней загорается точка первой строки. */
#s04 .s04-h { max-width:18ch; }
#s04 .s04-nb { white-space:nowrap; }
#s04 .s04-bd { margin-top:3cqh; background:var(--cell); padding:.3cqh 2.4cqw .3cqh 5.6cqw; }
#s04 .s04-r { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"t s" "e e" "w w";
  column-gap:3cqw; align-items:center; padding:.95cqh 0 1.05cqh; border-top:1px solid var(--line); }
#s04 .s04-r.s04-hd { display:none; }
#s04 .s04-rs > .s04-r:first-child { border-top:0; }
#s04 .s04-t { grid-area:t; display:flex; align-items:center; gap:2px; font-size:max(13px,3.55cqw); line-height:1; color:var(--mute); }
#s04 .s04-tt { display:flex; align-items:center; gap:2px; }
/* шов флажка табло лежит под цифрой (свой слой ячейки, шов на -1): цифры читаются чисто, не зачёркнутыми */
#s04 .s04-tt b { position:relative; z-index:0; display:inline-grid; place-items:center; width:1.16em; height:1.4em; background:var(--bg); font-weight:400; color:inherit; }
#s04 .s04-tt b::after { content:""; position:absolute; z-index:-1; left:0; right:0; top:50%; height:1px; background:var(--cell); }
#s04 .s04-tt i { font-style:normal; padding:0 1px; }
#s04 .s04-r0 .s04-t { color:var(--fg); }
#s04 .s04-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#s04 .s04-dot { grid-area:t; justify-self:start; --ds:8px; margin-left:calc(-2.8cqw - 4px); }
#s04 .s04-s { grid-area:s; font:400 max(13px,3.45cqw)/1.2 var(--sans); color:var(--mute); }
#s04 .s04-e { grid-area:e; margin-top:.6cqh; font-size:max(15px,3.95cqw); line-height:1.24; letter-spacing:-.01em; color:var(--fg); text-wrap:pretty; }
#s04 .s04-w { grid-area:w; margin-top:.3cqh; font:400 max(15px,3.85cqw)/1.3 var(--sans); color:var(--soft); text-wrap:pretty; }
#s04 .s04-wl { font-size:max(12.5px,3.3cqw); color:var(--mute); }
#s04 .s04-lead { margin-top:2.2cqh; }
#s04 .s04-ll { display:none; }
#s04 .s04-r.s04-rx { display:none; }
#s04 .s04-note { margin-top:1.4cqh; }

/* широкий экран: таблица КП. Колонка времени: четыре ячейки по 1,16em, двоеточие и зазоры = 5,24em + 10px */
[data-o="l"] #s04 .s04-h { max-width:none; }
[data-o="l"] #s04 .s04-bd { margin-top:6.2cqh; padding:.4cqh 2.3cqw .6cqh 3.2cqw; }
[data-o="l"] #s04 .s04-r { grid-template-columns:calc(5.3 * max(13px,1.02cqw) + 12px) max(11cqw,calc(8.4 * max(17px,1.18cqw))) minmax(0,1fr) 24cqw; grid-template-areas:"t s e w"; column-gap:1.25cqw; min-height:6.3cqh; padding:0; }
[data-o="l"] #s04 .s04-r.s04-hd { display:grid; min-height:4.8cqh; border-top:0; font-size:max(13px,.9cqw); color:var(--mute); }
[data-o="l"] #s04 .s04-r.s04-rx { display:grid; }
[data-o="l"] #s04 .s04-ll { display:inline; }
/* телефон и планшет в портрете: строки табло по высоте кадра (текст строк не мельче 15px, поэтому строк меньше):
   от 1100px шесть, обычно пять, ниже 760px четыре; на самом низком (360×640) уходит лид, четыре строки остаются */
@container dk (min-height:1100px) { [data-o="p"] #s04 .s04-r.s04-rx { display:grid; } }
/* телефон, повёрнутый горизонтально (кадр ниже 520px): четыре строки, лид уходит, сноска остаётся */
@container dk (max-height:520px) { [data-o="l"] #s04 .s04-r.s04-r5, [data-o="l"] #s04 .s04-r.s04-rx { display:none; } [data-o="l"] #s04 .s04-lead { display:none; } [data-o="l"] #s04 .s04-bd { margin-top:3cqh; } }
@container dk (max-height:760px) { [data-o="p"] #s04 .s04-r.s04-r5 { display:none; } }
@container dk (max-height:660px) { [data-o="p"] #s04 .s04-lead { display:none; } [data-o="p"] #s04 .s04-note { margin-top:2cqh; } }
[data-o="l"] #s04 .s04-rs > .s04-r:first-child { border-top:1px solid var(--line); }
[data-o="l"] #s04 .s04-t { font-size:max(13px,1.02cqw); }
[data-o="l"] #s04 .s04-dot { --ds:max(9px,.62cqw); margin-left:calc(-1.6cqw - var(--ds) / 2); }
[data-o="l"] #s04 .s04-s, [data-o="l"] #s04 .s04-w { margin:0; font:400 max(17px,1.18cqw)/1.3 var(--sans); color:var(--soft); }
[data-o="l"] #s04 .s04-e { margin:0; font-size:max(17px,1.2cqw); line-height:1.3; }
[data-o="l"] #s04 .s04-wl { display:none; }
[data-o="l"] #s04 .s04-lead { margin-top:5.4cqh; max-width:84cqw; }
[data-o="l"] #s04 .s04-note { margin-top:2.6cqh; }

/* движение: табло проявляется, строки падают по одной (--i), текст строки откидывается сверху, как флажок табло */
.js #s04 .s04-hd, .js #s04 .s04-rs > .s04-r, .js #s04 .s04-lead, .js #s04 .s04-note { opacity:0; }
.js #s04 .s04-bd { clip-path:inset(0 0 100% 0); transition:clip-path .65s linear .28s; }
.js #s04 .s04-hd { transition:opacity .5s var(--ease) .35s; }
.js #s04 .s04-rs > .s04-r { --at:calc(.45s + var(--i) * .13s); transition:opacity .25s linear var(--at); }
.js #s04 .s04-s, .js #s04 .s04-e, .js #s04 .s04-w { opacity:0; transform:perspective(500px) rotateX(-78deg); transform-origin:50% 0;
  transition:opacity .35s var(--ease) calc(var(--at) + .1s), transform .6s var(--ease) calc(var(--at) + .1s); }
.js #s04 .s04-e { transition-delay:calc(var(--at) + .15s); }
.js #s04 .s04-w { transition-delay:calc(var(--at) + .2s); }
.js #s04 .s04-dot { opacity:0; transform:scale(.3); transition:opacity .35s var(--ease) 1.62s, transform .6s var(--ease) 1.62s; }
.js #s04 .s04-lead { transform:translateY(10px); transition:opacity .7s var(--ease) 1.5s, transform .9s var(--ease) 1.5s; }
.js #s04 .s04-note { transition:opacity .7s var(--ease) 1.75s; }
.js #s04.is-on .s04-in .s04-bd { clip-path:inset(0 0 0 0); }
.js #s04.is-on .s04-in .s04-hd, .js #s04.is-on .s04-in .s04-rs > .s04-r, .js #s04.is-on .s04-in .s04-note { opacity:1; }
.js #s04.is-on .s04-in .s04-s, .js #s04.is-on .s04-in .s04-e, .js #s04.is-on .s04-in .s04-w, .js #s04.is-on .s04-in .s04-dot,
.js #s04.is-on .s04-in .s04-lead { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .js #s04 .s04-in * { transition:none !important; }
  .js #s04 .s04-in .s04-bd { clip-path:none; }
  .js #s04 .s04-in .s04-hd, .js #s04 .s04-in .s04-rs > .s04-r, .js #s04 .s04-in .s04-s, .js #s04 .s04-in .s04-e,
  .js #s04 .s04-in .s04-w, .js #s04 .s04-in .s04-dot, .js #s04 .s04-in .s04-lead, .js #s04 .s04-in .s04-note { opacity:1; transform:none; }
}

/* ── экран 05 ── */
/* 05 · восемь шагов: точка идёт по шагам и в 09:00 встаёт над разрывом линии («отправка»).
   Телефон — вертикальная линия сверху вниз, широкий экран — линия слева направо, как в КП. */
#s05 { --fs:max(15px,4.3cqw); --nc:12.6cqw; --cx:calc(var(--nc) + 4.6cqw); --ty:calc(var(--fs) * .62); --brk:13px; }
#s05 .s05-way { position:relative; flex:1 1 auto; min-height:0; margin-top:3.4cqh; }
#s05 .s05-st { height:100%; display:grid; grid-template-rows:repeat(9,1fr); }
#s05 .s05-i { position:relative; padding-left:var(--cx); min-width:0; }
#s05 .s05-n { position:absolute; left:0; top:0; width:calc(var(--nc) - 2.8cqw); text-align:right; font-family:var(--mono); font-size:max(11px,3.05cqw); line-height:calc(var(--fs) * 1.24); color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; }
#s05 .s05-nm { font-size:var(--fs); line-height:1.24; font-weight:500; letter-spacing:-.012em; color:var(--fg); }
#s05 .s05-d { margin-top:.15em; font-size:max(15px,3.85cqw); line-height:1.32; color:var(--soft); text-wrap:pretty; }
#s05 .s05-dl { display:none; }
/* линия: отрезок от засечки шага до следующей; поверх — пройденная часть (её ведёт точка) */
#s05 .s05-tk { position:absolute; left:calc(var(--nc) - 5px); top:var(--ty); width:11px; height:1px; background:var(--mute); }
#s05 .s05-i::after, #s05 .s05-i::before { content:""; position:absolute; left:var(--nc); top:var(--ty); width:1px; height:100%; background:var(--line2); transform-origin:center top; }
#s05 .s05-i::before { z-index:1; background:var(--soft); transform:scaleY(var(--p,1)); }
#s05 .s05-i:nth-child(8)::after, #s05 .s05-i:nth-child(8)::before { height:calc(100% - var(--brk)); }
#s05 .s05-go::before { display:none; }
#s05 .s05-go::after { top:calc(var(--ty) + var(--brk)); height:3.2cqh; background:var(--mute); }
#s05 .s05-go .s05-tk { left:calc(var(--nc) - var(--ds,11px) / 2 + .5px); top:calc(var(--ty) - var(--ds,11px) / 2 + .5px); width:var(--ds,11px); height:var(--ds,11px); background:var(--acc); }
#s05 .s05-go .s05-n { color:var(--fg); }
#s05 .s05-dot { position:absolute; left:0; top:0; z-index:2; margin:calc(var(--ds,11px) / -2) 0 0 calc(var(--ds,11px) / -2); opacity:0; pointer-events:none; }
#s05 .s05-note { margin-top:2.2cqh; text-wrap:balance; }
#s05 .s05-sp { font-family:var(--mono); color:var(--fg); font-variant-numeric:tabular-nums; }

/* движение: шаги проявляются по очереди приглушёнными, точка проходит и зажигает их */
.js #s05 .s05-i { opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) calc(.32s + var(--k) * .06s), transform .8s var(--ease) calc(.32s + var(--k) * .06s); }
.js #s05.is-on .s05-i { opacity:1; transform:none; }
.js #s05 .s05-nm, .js #s05 .s05-d, .js #s05 .s05-n, .js #s05 .s05-tk { transition:color .45s var(--ease), background-color .45s var(--ease); }
.js #s05 .s05-i:not(.is-lit) .s05-nm { color:var(--mute); }
.js #s05 .s05-i:not(.is-lit) .s05-d { color:var(--mute); }
.js #s05 .s05-i.is-lit:not(.s05-go) .s05-tk { background:var(--fg); }
.js #s05 .s05-i::before { transform:scaleY(var(--p,0)); }
.js #s05 .s05-go:not(.is-lit) .s05-n { color:var(--mute); }
.js #s05:not(.s05-done) .s05-go .s05-tk { opacity:0; }
.js #s05 .s05-dot.is-run { opacity:1; transition:opacity .3s var(--ease); }
.js #s05.s05-done .s05-dot { opacity:0; transition:none; }
.js #s05.s05-done .s05-i::before { transform:none; }

/* широкий экран: линия слева направо, номера над ней, шаги под ней; 09:00 — точка над разрывом */
[data-o="l"] #s05 { --fs:max(18px,1.36cqw); --ry:4.6cqh; --top:8.4cqh; --gx:3.4cqw; --brk:max(15px,.8cqw); }
[data-o="l"] #s05 .s05-h { max-width:62cqw; }
[data-o="l"] #s05 .s05-way { flex:0 0 auto; margin:auto 0; padding-bottom:3cqh; }
/* «Отправка» уже остальных (как в КП); поле между колонками не уже 1cqw, чтобы строки соседних шагов не читались подряд;
   описания 17px ложатся в 3–7 строк, «09:00» не выходит за край */
[data-o="l"] #s05 .s05-st { height:auto; grid-template-rows:none; grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,.78fr); }
[data-o="l"] #s05 .s05-i { padding:var(--top) 1cqw 0 0; }
[data-o="l"] #s05 .s05-n { left:0; top:0; width:auto; text-align:left; font-size:max(11px,.94cqw); line-height:1; }
[data-o="l"] #s05 .s05-d { margin-top:.6em; font-size:max(17px,1.18cqw); line-height:1.4; }
[data-o="l"] #s05 .s05-ds { display:none; }
[data-o="l"] #s05 .s05-dl { display:inline; }
[data-o="l"] #s05 .s05-tk { left:0; top:calc(var(--ry) - 9px); width:1px; height:18px; }
[data-o="l"] #s05 .s05-i::after, [data-o="l"] #s05 .s05-i::before { left:0; top:var(--ry); width:100%; height:1px; transform-origin:left center; }
[data-o="l"] #s05 .s05-i::before { transform:scaleX(var(--p,1)); }
.js [data-o="l"] #s05 .s05-i::before { transform:scaleX(var(--p,0)); }
.js [data-o="l"] #s05.s05-done .s05-i::before { transform:none; }
[data-o="l"] #s05 .s05-i:nth-child(8)::after, [data-o="l"] #s05 .s05-i:nth-child(8)::before { height:1px; width:calc(100% + var(--gx) - var(--brk)); }
[data-o="l"] #s05 .s05-go::after { left:calc(var(--gx) + var(--brk)); right:0; width:auto; top:var(--ry); height:1px; }
[data-o="l"] #s05 .s05-go .s05-tk { left:calc(var(--gx) - var(--ds) / 2); top:calc(var(--ry) - 2.3cqh - var(--ds) / 2); width:var(--ds); height:var(--ds); }
[data-o="l"] #s05 .s05-go .s05-n { left:calc(var(--gx) + 1.1cqw); top:-.15cqh; font-size:max(12px,1.04cqw); }
[data-o="l"] #s05 .s05-note { margin-top:0; }
/* кадр ноутбука уже 1420px: девять колонок не вмещают слова 17px («Круглосуточно,»), шаги идут в два ряда по пять,
   «Отправка» занимает две колонки, чтобы линия доходила до края; точка переходит на второй ряд скрытно (05.js) */
@container dk (orientation: landscape) and (max-width: 1420px) {
  [data-o="l"] #s05 .s05-st { grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:3.4cqh; }
  [data-o="l"] #s05 .s05-go { grid-column:span 2; }
  [data-o="l"] #s05 .s05-i { padding-right:1.6cqw; }
}
/* низкий широкий кадр (планшет боком, 1024×576): ряды плотнее, описания шагов короткие, как на телефоне */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s05 { --top:7cqh; --ry:3.8cqh; }
  [data-o="l"] #s05 .s05-way { margin-top:3cqh; padding-bottom:1.5cqh; }
  [data-o="l"] #s05 .s05-st { row-gap:2.4cqh; }
  [data-o="l"] #s05 .s05-ds { display:inline; }
  [data-o="l"] #s05 .s05-dl { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .js #s05 .s05-i { opacity:1; transform:none; transition:none; }
  .js #s05 .s05-nm, .js #s05 .s05-d, .js #s05 .s05-n, .js #s05 .s05-tk { transition:none; }
}

/* короткое окно телефона (встроенный браузер соцсети): заголовок чуть меньше, строки шагов плотнее; шрифт описаний не ниже 15px.
   Ниже 650px у «Отправки» описание встаёт в строку с названием, а у сноски остаётся главное: 00:00–09:00 ночью система готовит письма. */
@container dk (max-height: 760px) {
  [data-o="p"] #s05 .s05-h { font-size:6.6cqw; }
  [data-o="p"] #s05 .s05-way { margin-top:2.2cqh; }
  [data-o="p"] #s05 .s05-nm { line-height:1.2; }
  [data-o="p"] #s05 .s05-d { margin-top:0; line-height:1.24; }
  [data-o="p"] #s05 .s05-note { margin-top:1.4cqh; }
}
@container dk (max-height: 650px) {
  [data-o="p"] #s05 .s05-way { margin-top:1.6cqh; }
  [data-o="p"] #s05 .s05-go .s05-nm, [data-o="p"] #s05 .s05-go .s05-d { display:inline; }
  [data-o="p"] #s05 .s05-go .s05-d { margin-left:.35em; }
  [data-o="p"] #s05 .s05-st { grid-template-rows:repeat(8,1fr) auto; }
  [data-o="p"] #s05 .s05-go::after { height:1.4cqh; }
  [data-o="p"] #s05 .s05-nt { display:none; }
  [data-o="p"] #s05 .s05-note { margin-top:1.8cqh; }
}

/* ── экран 06 ── */
/* 06 · сбор: кадр «Источники» и янтарная рамка с разрывом, которая обходит строку неподключённого источника.
   Телефон — три нижние строки кадра: колонка названий и колонка статусов рядом (средние колонки с числами опущены),
   под ним пункты; широкий экран — пункты слева, весь кадр справа, как в КП. */
#s06 .s06-grid { flex:1 1 auto; display:flex; flex-direction:column; margin-top:2cqh; min-height:0; }
#s06 .s06-figure { margin:0; }
#s06 .s06-shot { width:100%; aspect-ratio:800 / 460; }
/* полотно кадра прижато к низу: если окно ниже, сверху срезается строка «Новости отрасли», рамка остаётся на месте */
#s06 .s06-cv { position:absolute; left:0; right:0; bottom:0; aspect-ratio:800 / 460; display:flex; }
#s06 .s06-pa { display:block; flex:0 0 65%; height:100%; }
#s06 .s06-pb { flex:1 1 0; min-width:0; }
/* подпись сразу под кадром (как на соседних экранах), вывод о рамке ниже */
#s06 .s06-why { margin-top:1.1cqh; font-size:max(15px,3.85cqw); line-height:1.4; color:var(--fg); text-wrap:pretty; }
#s06 .s06-pts { flex:1 1 auto; display:flex; flex-direction:column; margin-top:1.6cqh; }
#s06 .s06-pts li { flex:1 0 auto; border-top:1px solid var(--line); padding:.6cqh 0 .7cqh; }
#s06 .s06-pts li:last-child { border-bottom:1px solid var(--line); }
#s06 .s06-pn { font-size:max(16px,4.2cqw); line-height:1.25; font-weight:500; letter-spacing:-.012em; color:var(--fg); }
#s06 .s06-pd { margin-top:.2em; font-size:max(15px,3.85cqw); line-height:1.36; color:var(--soft); text-wrap:pretty; }
#s06 .s06-dl { display:none; }

/* рамка с разрывом в верхней грани; координаты — доли полотна кадра, строка «Форум отрасли» */
#s06 .s06-fr { --fx:1%; --fy:69.6%; --fw:98%; --fh:29.1%; --gx:60%; --lw:1.5px; --gh:13px;
  position:absolute; left:var(--fx); top:var(--fy); width:var(--fw); height:var(--fh); pointer-events:none; }
#s06 .s06-fr i { position:absolute; display:block; background:var(--acc); }
#s06 .s06-t2 { left:calc(var(--gx) + var(--gh)); right:0; top:0; height:var(--lw); transform-origin:left center; }
#s06 .s06-r { right:0; top:0; bottom:0; width:var(--lw); transform-origin:center top; }
#s06 .s06-b { left:0; right:0; bottom:0; height:var(--lw); transform-origin:right center; }
#s06 .s06-l { left:0; top:0; bottom:0; width:var(--lw); transform-origin:center bottom; }
#s06 .s06-t1 { left:0; right:calc(100% - var(--gx) + var(--gh)); top:0; height:var(--lw); transform-origin:left center; }
#s06 .s06-d { position:absolute; left:var(--gx); top:-17px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--acc); }
.js #s06 .s06-t2, .js #s06 .s06-t1, .js #s06 .s06-b { transform:scaleX(0); }
.js #s06 .s06-r, .js #s06 .s06-l { transform:scaleY(0); }
.js #s06 .s06-d { opacity:0; transform:translateY(6px) scale(.4); }
.js #s06 .s06-fr.is-draw i { transform:none; transition:transform var(--t,.2s) linear var(--dl,0s); }
.js #s06 .s06-fr.is-draw .s06-d { opacity:1; transform:none; transition:opacity .45s var(--ease) var(--dd,0s), transform .6s var(--ease) var(--dd,0s); }

/* широкий экран */
[data-o="l"] #s06 .s06-h { max-width:42cqw; }
[data-o="l"] #s06 .s06-grid { flex:0 0 auto; display:grid; grid-template-columns:33cqw minmax(0,1fr); column-gap:5.4cqw; align-items:start; margin-top:5cqh; }
[data-o="l"] #s06 .s06-pts { grid-column:1; grid-row:1; margin-top:0; display:block; }
[data-o="l"] #s06 .s06-fig { grid-column:2; grid-row:1; }
[data-o="l"] #s06 .s06-shot { aspect-ratio:2400 / 1340; }
[data-o="l"] #s06 .s06-cv { top:0; aspect-ratio:auto; display:block; }
[data-o="l"] #s06 .s06-pa { height:100%; }
[data-o="l"] #s06 .s06-pb { display:none; }
[data-o="l"] #s06 .s06-pts li { padding:1.7cqh 0 2.5cqh; }
[data-o="l"] #s06 .s06-pts li:last-child { border-bottom:0; }
[data-o="l"] #s06 .s06-pn { font-size:max(18px,1.4cqw); }
[data-o="l"] #s06 .s06-pd { margin-top:.4em; font-size:max(17px,1.18cqw); line-height:1.45; }
[data-o="l"] #s06 .s06-ds { display:none; }
[data-o="l"] #s06 .s06-dl { display:inline; }
[data-o="l"] #s06 .s06-why { margin-top:1.8cqh; font-size:max(18px,1.4cqw); line-height:1.45; color:var(--soft); }
[data-o="l"] #s06 .s06-fr { --fx:2.33%; --fy:79.4%; --fw:95.33%; --fh:12.46%; --gx:85%; --gh:max(13px,.72cqw); }
[data-o="l"] #s06 .s06-d { top:calc(-1 * max(17px,1.15cqw)); width:max(9px,.6cqw); height:max(9px,.6cqw); margin-left:calc(max(9px,.6cqw) / -2); }

@media (prefers-reduced-motion:reduce) {
  .js #s06 .s06-fr i, .js #s06 .s06-d { transform:none; opacity:1; transition:none !important; }
}

/* низкий широкий кадр (планшет боком, 1024×576): у пунктов короткие тексты, как на телефоне; у кадра срезано пустое
   поле под таблицей (полотно остаётся целым, рамка на месте), вывод под кадром помещается над шкалой */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s06 .s06-ds { display:inline; }
  [data-o="l"] #s06 .s06-dl { display:none; }
  [data-o="l"] #s06 .s06-grid { grid-template-columns:35cqw minmax(0,1fr); margin-top:1.6cqh; }
  [data-o="l"] #s06 .s06-pts li { padding:1.2cqh 0 1.6cqh; }
  [data-o="l"] #s06 .s06-shot { aspect-ratio:2400 / 1285; }
  [data-o="l"] #s06 .s06-cv { bottom:auto; aspect-ratio:2400 / 1340; }
  [data-o="l"] #s06 .s06-why { margin-top:1cqh; }
}
/* высокий телефон и планшет в портрете: места хватает на полные тексты пунктов из КП */
@container dk (orientation: portrait) and (min-height: 800px) {
  #s06 .s06-ds { display:none; }
  #s06 .s06-dl { display:inline; }
}
/* короткое окно телефона (встроенный браузер соцсети): кадр показывает две нижние строки, описания пунктов остаются
   (15px не уменьшаем); ниже 650px пункт «Неподходящий не подключаем» уходит: его говорит вывод под кадром и сама рамка. */
@container dk (max-height: 760px) {
  [data-o="p"] #s06 .s06-shot { aspect-ratio:800 / 320; }
  [data-o="p"] #s06 .s06-pts li { padding:.5cqh 0 .55cqh; }
}
@container dk (max-height: 650px) {
  [data-o="p"] #s06 .s06-h { font-size:6.6cqw; }
  [data-o="p"] #s06 .s06-grid { margin-top:1.4cqh; }
  [data-o="p"] #s06 .s06-pts li:nth-child(2) { display:none; }
}
/* кадр 600px (все окна ниже 600 px): у последнего пункта остаётся заголовок */
@container dk (max-height: 615px) {
  [data-o="p"] #s06 .s06-pts li:nth-child(4) .s06-pd { display:none; }
}

/* ── экран 07 ── */
/* 07 · атлас источников: шесть дорожек с числами (данные src/atlas.json, как в КП), числа бегут;
   янтарная рамка с разрывом ложится на неочевидный источник — планы-графики закупок. */
#s07 { --cf:max(16px,4.2cqw); --xf:max(15px,3.85cqw); }
#s07 .s07-lanes { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:2.6cqh; }
#s07 .s07-r { flex:1 0 auto; border-top:1px solid var(--line); padding:1.05cqh 0 1.15cqh; min-width:0; }
#s07 .s07-r:last-child { border-bottom:1px solid var(--line); }
#s07 .s07-c { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#s07 .s07-cn { font-size:var(--cf); line-height:1.25; font-weight:500; letter-spacing:-.012em; color:var(--fg); }
#s07 .s07-n { font-family:var(--mono); font-size:max(14px,3.9cqw); line-height:1; color:var(--soft); font-variant-numeric:tabular-nums; min-width:2ch; text-align:right; }
/* примеры источников: на телефоне первый, в одну строку; на широком экране все, как в КП */
#s07 .s07-l { display:flex; flex-wrap:wrap; column-gap:2.4cqw; margin-top:.45cqh; font-size:var(--xf); line-height:1.35; color:var(--mute); }
#s07 .s07-s { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#s07 .s07-s + .s07-s { display:none; }
#s07 .s07-r1 .s07-l { margin-top:max(20px,2.9cqh); }
#s07 .s07-r1 .s07-s { display:none; }
#s07 .s07-hl { position:relative; display:inline-grid; gap:.3cqh; padding:.95cqh 3.4cqw 1.1cqh; }
#s07 .s07-hn { font-size:var(--cf); line-height:1.25; color:var(--fg); }
#s07 .s07-ht { font-size:var(--xf); line-height:1.3; color:var(--soft); }
#s07 .s07-fr { position:absolute; inset:0; pointer-events:none; }
#s07 .s07-low { display:grid; gap:1.4cqh; margin-top:2.2cqh; }
#s07 .s07-t { font-size:max(15px,3.85cqw); line-height:1.42; color:var(--soft); text-wrap:pretty; }
#s07 .s07-dl { display:none; }
/* ссылкой служит только сам адрес: подпись над ним не нажимается, чтобы тап «дальше» в нижней части экрана не уводил на сайт */
#s07 .s07-a { display:grid; gap:5px; justify-items:start; }
#s07 .s07-al { font-size:max(13px,3.4cqw); line-height:1.3; color:var(--mute); }
#s07 .s07-au { font-size:max(16px,4.5cqw); line-height:1.2; font-weight:500; letter-spacing:-.015em; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line2); padding-bottom:3px; }
#s07 .s07-au:hover { border-color:var(--fg); }

/* широкий экран: как слайд КП — дорожка слева, примеры строкой справа */
[data-o="l"] #s07 { --cf:max(18px,1.36cqw); --xf:max(17px,1.18cqw); }
[data-o="l"] #s07 .s07-h { max-width:56cqw; }
[data-o="l"] #s07 .s07-lanes { margin-top:3.6cqh; }
[data-o="l"] #s07 .s07-r { display:grid; grid-template-columns:28cqw minmax(0,1fr); column-gap:2cqw; align-items:center; padding:1.5cqh 0; }
[data-o="l"] #s07 .s07-c { justify-content:flex-start; gap:1cqw; }
[data-o="l"] #s07 .s07-n { font-size:max(11px,.94cqw); color:var(--mute); min-width:0; text-align:left; }
[data-o="l"] #s07 .s07-l { margin-top:0; column-gap:2cqw; color:var(--soft); }
[data-o="l"] #s07 .s07-s + .s07-s { display:inline; }
/* примеры, которые не поместились в строку, уходят на скрытую вторую строку целиком */
[data-o="l"] #s07 .s07-r:not(.s07-r1) .s07-l { height:calc(var(--xf) * 1.35); overflow:hidden; }
[data-o="l"] #s07 .s07-r1 .s07-l { margin-top:0; align-items:center; }
[data-o="l"] #s07 .s07-r1 .s07-s { display:inline; }
[data-o="l"] #s07 .s07-hl { padding:.95cqh 1.1cqw 1.05cqh; margin:-.95cqh 0 -1.05cqh -1.1cqw; gap:.35cqh; }
[data-o="l"] #s07 .s07-hn { font-size:var(--xf); }
[data-o="l"] #s07 .s07-ht { font-size:var(--xf); }
[data-o="l"] #s07 .s07-low { grid-template-columns:minmax(0,1fr) auto; column-gap:6cqw; align-items:end; margin-top:3cqh; }
[data-o="l"] #s07 .s07-t { font-size:max(18px,1.4cqw); line-height:1.45; max-width:62cqw; }
[data-o="l"] #s07 .s07-ds { display:none; }
[data-o="l"] #s07 .s07-dl { display:inline; }
[data-o="l"] #s07 .s07-al { font-size:max(14px,1cqw); }
[data-o="l"] #s07 .s07-au { font-size:max(17px,1.5cqw); }

/* кадр ноутбука уже 1430px: в первой дорожке рядом с рамкой помещается один пример */
@container dk (orientation: landscape) and (max-width: 1430px) {
  [data-o="l"] #s07 .s07-r1 .s07-s + .s07-s { display:none; }
}

/* низкий широкий кадр (планшет боком, 1024×576): дорожки плотнее, у пояснения остаётся первая фраза */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s07 .s07-lanes { margin-top:2.4cqh; }
  [data-o="l"] #s07 .s07-r { padding:.9cqh 0; }
  [data-o="l"] #s07 .s07-low { margin-top:2cqh; }
  [data-o="l"] #s07 .s07-ds { display:inline; }
  [data-o="l"] #s07 .s07-dl { display:none; }
}

/* короткое окно телефона (встроенный браузер соцсети): шрифт не уменьшаем (примеры 15px), сначала плотнее дорожки,
   ниже 700px уходит пояснение над ссылкой, ниже 650px подпись ссылки; ниже 630px строки примеров у дорожек 2–6 не помещаются,
   и на их место возвращается пояснение «Под каждую отрасль свой набор». */
@container dk (max-height: 760px) {
  [data-o="p"] #s07 .s07-lanes { margin-top:2.2cqh; }
  [data-o="p"] #s07 .s07-r { padding:.55cqh 0 .65cqh; }
  [data-o="p"] #s07 .s07-l { margin-top:.15cqh; }
  [data-o="p"] #s07 .s07-r1 .s07-l { margin-top:20px; }
  [data-o="p"] #s07 .s07-hl { padding:.8cqh 3.4cqw .9cqh; }
  [data-o="p"] #s07 .s07-low { margin-top:1.6cqh; gap:1cqh; }
}
@container dk (max-height: 700px) {
  [data-o="p"] #s07 .s07-h { font-size:6.6cqw; }
  [data-o="p"] #s07 .s07-t { display:none; }
}
@container dk (max-height: 650px) {
  [data-o="p"] #s07 .s07-al { display:none; }
}
@container dk (max-height: 630px) {
  [data-o="p"] #s07 .s07-r:not(.s07-r1) .s07-l { display:none; }
  [data-o="p"] #s07 .s07-r { padding:.8cqh 0 .9cqh; }
  [data-o="p"] #s07 .s07-t, [data-o="p"] #s07 .s07-al { display:block; }
}

/* ── экран 08 ── */
/* 08 · Отбор: правила загораются по одному, счётчик в кадре панели падает 1 386 → 32 */
#s08 .s08-b { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:2.6cqh; }

/* правила: строки с волосяной линией, ключ приглушён, значение в свете */
#s08 .s08-nw { white-space:nowrap; }
#s08 .s08-rl { flex:none; font-size:max(15px,3.85cqw); line-height:1.3; letter-spacing:-.005em; }
#s08 .s08-rl > li { position:relative; display:grid; grid-template-columns:33% minmax(0,1fr); column-gap:3.2cqw; padding:.85cqh 0 .95cqh; }
#s08 .s08-k { color:var(--mute); }
#s08 .s08-v { color:var(--fg); font-weight:500; }
#s08 .s08-r::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line2); transform-origin:left center; }
.js #s08 .s08-k, .js #s08 .s08-v { color:var(--line2); transition:color .55s var(--ease) var(--d,0s); }
.js #s08 .s08-r::before { transform:scaleX(0); transition:transform .75s var(--ease) var(--d,0s); }
.js #s08.is-on .s08-k { color:var(--mute); }
.js #s08.is-on .s08-v { color:var(--fg); }
.js #s08.is-on .s08-r::before { transform:none; }

/* кадр панели: на телефоне вырезан счётчик, на широком экране кадр целиком.
   --ox/--oy/--cw — начало и ширина выреза в пикселях исходника p-rules.jpg (2256×1115) */
#s08 .s08-fig { flex:none; display:flex; flex-direction:column; margin-top:3cqh; }
#s08 .s08-cv { --ox:1300; --oy:184; --cw:920; --u:calc(100cqw / var(--cw)); position:relative; container-type:inline-size;
  aspect-ratio:920 / 312; }
#s08 .s08-shot { position:absolute; inset:0; }
#s08 .s08-shot picture { display:block; height:100%; }
#s08 .s08-pl { display:none !important; }
/* число поверх ячейки «прошли бы отбор»: фон панели #0E1116, шрифт и кегль как в панели */
#s08 .s08-n { position:absolute; display:flex; align-items:center; overflow:hidden;
  left:calc((1792 - var(--ox)) * var(--u)); top:calc((262 - var(--oy)) * var(--u));
  width:calc(380 * var(--u)); height:calc(88 * var(--u)); padding-left:calc(10 * var(--u));
  background:#0E1116; color:var(--fg); font:500 calc(74 * var(--u))/1 var(--sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* янтарная рамка с разрывом вокруг двух ячеек счётчика */
#s08 .s08-gap { position:absolute; left:calc((1320 - var(--ox)) * var(--u)); top:calc((228 - var(--oy)) * var(--u));
  width:calc(886 * var(--u)); height:calc(256 * var(--u)); }
html:not(.js) #s08 .s08-n, html:not(.js) #s08 .s08-gap { display:none; }
/* подпись панели «202 подходящих видов» с ошибкой согласования: закрыта фоном ячейки (#0E1116), как и число */
#s08 .s08-x { position:absolute; left:calc((1330 - var(--ox)) * var(--u)); top:calc((398 - var(--oy)) * var(--u));
  width:calc(290 * var(--u)); height:calc(32 * var(--u)); background:#0E1116; }
/* абзац под кадром: .dk-lead, как под главным кадром на других экранах; на телефоне кегль основного текста */
#s08 .s08-tx { flex:none; margin-top:1.8cqh; font-size:max(15px,3.85cqw); }

/* телефон: под кадром только первая фраза абзаца, вторая (о причине отсева) на широком экране.
   Если и первая не помещается над шкалой дня, 08.js убирает абзац (.s08-off): главное в правилах и кадре */
[data-o="p"] #s08 .s08-tx2 { display:none; }
#s08 .s08-tx.s08-off { display:none; }
@container dk (min-height:800px) {
  [data-o="p"] #s08 .s08-rl > li { padding:.95cqh 0 1.05cqh; }
}
/* низкий телефон: строки правил плотнее, ключ уже (длинные ключи в две строки, значения сумм и размера в одну) */
@container dk (max-height:780px) {
  [data-o="p"] #s08 .s08-rl > li { grid-template-columns:24% minmax(0,1fr); column-gap:2.4cqw; padding:.45cqh 0 .6cqh; }
  [data-o="p"] #s08 .s08-b { margin-top:2cqh; }
  [data-o="p"] #s08 .s08-fig { margin-top:2.2cqh; }
  [data-o="p"] #s08 .s08-tx { margin-top:1.4cqh; }
}
/* совсем низкое окно (встроенный браузер соцсети): заголовок в две строки */
@container dk (max-height:700px) {
  [data-o="p"] #s08 .s08-h { font-size:6.6cqw; }
  [data-o="p"] #s08 .s08-rl > li { padding:.4cqh 0 .5cqh; }
}
@container dk (max-height:680px) {
  [data-o="p"] #s08 .s08-b { margin-top:1.6cqh; }
  [data-o="p"] #s08 .s08-rl > li { padding:.3cqh 0 .42cqh; }
  [data-o="p"] #s08 .s08-fig { margin-top:1.4cqh; }
}

/* ── широкий экран 16:9: правила слева, кадр справа, как в КП ── */
[data-o="l"] #s08 .s08-h { max-width:64cqw; }
[data-o="l"] #s08 .s08-b { display:grid; grid-template-columns:31cqw minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:6.6cqw; align-content:start; margin-top:6.2cqh; }
[data-o="l"] #s08 .s08-rl { grid-column:1; grid-row:1 / 4; font-size:max(17px,1.18cqw); }
[data-o="l"] #s08 .s08-rl > li { grid-template-columns:11cqw minmax(0,1fr); column-gap:1.2cqw; padding:1.55cqh 0 1.75cqh; }
[data-o="l"] #s08 .s08-fig { grid-column:2; grid-row:1; margin:0; }
[data-o="l"] #s08 .s08-cv { --ox:0; --oy:0; --cw:2256; aspect-ratio:2256 / 1000; min-height:0; }
[data-o="l"] #s08 .s08-pp { display:none !important; }
[data-o="l"] #s08 .s08-pl { display:block !important; }
[data-o="l"] #s08 .s08-gap { left:calc(1320 * var(--u)); top:calc(226 * var(--u)); width:calc(926 * var(--u)); height:calc(258 * var(--u)); }
[data-o="l"] #s08 .s08-tx { grid-column:2; grid-row:2; margin-top:2.4cqh; font-size:max(18px,1.4cqw); max-width:50cqw; }
[data-o="l"] #s08 .s08-tx2 { display:inline; }

@media (prefers-reduced-motion:reduce) {
  #s08 .s08-k, #s08 .s08-v, #s08 .s08-r::before { transition:none !important; }
}

/* ── экран 09 ── */
/* 09 · Адресат: кадр «Кто решает» и пять проверок, «да» ставится по одной */
#s09 .s09-b { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:2.4cqh; }
#s09 .s09-fig { flex:none; display:flex; flex-direction:column; }
/* на телефоне кадр изнутри рамки «Кто решает»: заголовок блока и четыре строки, без обрезанной верхней грани */
#s09 .s09-shot { flex:none; aspect-ratio:904 / 436; --op:left top; }
#s09 .s09-shot picture { display:block; height:100%; }
#s09 .s09-pl { display:none !important; }

/* проверки: слева метка «да», справа что проверено */
#s09 .s09-ck { flex:none; margin-top:2.2cqh; }
#s09 .s09-c { position:relative; display:grid; grid-template-columns:2.3em minmax(0,1fr); align-items:baseline; column-gap:1.6cqw; padding:.95cqh 0 1.05cqh; border-top:1px solid var(--line); }
#s09 .s09-c:last-child { border-bottom:1px solid var(--line); }
#s09 .s09-y { grid-column:1; grid-row:1; align-self:baseline; color:var(--fg); font-size:max(12.5px,3.3cqw); line-height:1.3; }
#s09 .s09-n { grid-column:2; grid-row:1; font-size:max(15px,3.95cqw); line-height:1.3; font-weight:500; letter-spacing:-.01em; color:var(--fg); }
#s09 .s09-d { grid-column:2; grid-row:2; align-self:start; margin-top:.25cqh; font-size:max(15px,3.85cqw); line-height:1.38; color:var(--soft); text-wrap:pretty; }
/* ожидание проверки: короткая линия горизонта на месте «да» */
#s09 .s09-c::after { content:""; position:absolute; left:0; top:calc(.95cqh + .62em); width:1.15em; height:1px; background:var(--line2); font-size:max(12.5px,3.3cqw); opacity:0; }

.js #s09 .s09-c { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease) calc(var(--d) - .45s), transform .8s var(--ease) calc(var(--d) - .45s); }
.js #s09 .s09-c::after { opacity:1; transition:opacity .25s linear var(--d); }
.js #s09 .s09-y { clip-path:inset(0 100% 0 0); transition:clip-path .45s var(--ease) var(--d); }
.js #s09 .s09-n { color:var(--soft); transition:color .5s var(--ease) var(--d); }
.js #s09.is-on .s09-c { opacity:1; transform:none; }
.js #s09.is-on .s09-c::after { opacity:0; }
.js #s09.is-on .s09-y { clip-path:inset(0 0 0 0); }
.js #s09.is-on .s09-n { color:var(--fg); }

@container dk (max-height:780px) {
  /* кадр без строки «Почта», обрез между строками, а не по тексту */
  [data-o="p"] #s09 .s09-shot { aspect-ratio:904 / 352; }
  [data-o="p"] #s09 .s09-c { padding:.7cqh 0 .8cqh; }
  [data-o="p"] #s09 .s09-d { line-height:1.32; }
}

/* низкое окно (встроенный браузер соцсети): если пояснения не помещаются над шкалой дня, 09.js убирает их по одному
   (.s09-off), начиная со второстепенных; дольше всех остаются «откуда контакт» и «как проверен адрес» */
#s09 .s09-d.s09-off { display:none; }

/* ── широкий экран 16:9: кадр слева, проверки справа, как в КП ── */
[data-o="l"] #s09 .s09-h { max-width:70cqw; }
[data-o="l"] #s09 .s09-b { display:grid; grid-template-columns:41.6cqw minmax(0,1fr); column-gap:6.4cqw; align-items:start; margin-top:5.6cqh; }
[data-o="l"] #s09 .s09-shot { aspect-ratio:1516 / 1036; }
[data-o="l"] #s09 .s09-pp { display:none !important; }
[data-o="l"] #s09 .s09-pl { display:block !important; }
[data-o="l"] #s09 .s09-ck { margin-top:0; }
[data-o="l"] #s09 .s09-c { grid-template-columns:3.2cqw minmax(0,1fr); column-gap:.6cqw; padding:2.1cqh 0 2.3cqh; }
[data-o="l"] #s09 .s09-y, [data-o="l"] #s09 .s09-c::after { font-size:max(13px,.95cqw); }
[data-o="l"] #s09 .s09-c::after { top:calc(2.1cqh + .72em); }
[data-o="l"] #s09 .s09-n { font-size:max(17px,1.3cqw); }
[data-o="l"] #s09 .s09-d { margin-top:.6cqh; font-size:max(17px,1.18cqw); }

@media (prefers-reduced-motion:reduce) {
  #s09 .s09-c, #s09 .s09-c::after, #s09 .s09-y, #s09 .s09-n { transition:none !important; }
}

/* ── экран 10 ── */
/* 10 · Карточка возможности: янтарная рамка переходит по четырём зонам карточки.
   Телефон: камера над кадром (10.js двигает и приближает кадр к зоне), ниже зоны и описание активной.
   Широкий экран: кадр целиком слева, зоны с выносками справа, как в КП. */
#s10 .s10-b { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:2.4cqh; }
#s10 .s10-fig { flex:1 1 auto; min-height:22cqh; display:flex; flex-direction:column; }
#s10 .s10-cam { position:relative; flex:1 1 auto; min-height:0; }
/* фон окна — цвет карточки панели, чтобы края кадра не читались при отъезде камеры */
#s10 .s10-vp { position:absolute; inset:0; background:#11141B; }
/* кадр и серая точка карточки движутся одним слоем (10.js ставит transform) */
.js #s10 .s10-pic { position:absolute; left:0; top:0; width:1238px; height:1504px; transform-origin:0 0; transition:transform .5s var(--ease); }
.js #s10 .s10-img { width:100%; height:100%; max-width:none; }
/* своя янтарная точка карточки гаснет до серой: на экране одна янтарная вещь — рамка, на зоне 04 её точка встаёт сюда */
#s10 .s10-cd { position:absolute; left:610px; top:888px; width:19px; height:19px; border-radius:50%; background:#46505E; }
html:not(.js) #s10 .s10-vp { position:relative; }
html:not(.js) #s10 .s10-cd, html:not(.js) #s10 .s10-fr, html:not(.js) #s10 .s10-det { display:none; }
html:not(.js) #s10 .s10-zd { display:block; grid-column:2; margin-top:.4em; font-size:max(15px,3.85cqw); line-height:1.42; color:var(--mute); }

/* рамка с разрывом и точкой: пять отрезков по 1px и точка, только transform (10.js) */
#s10 .s10-fr { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
#s10 .s10-fr i { position:absolute; left:0; top:0; width:1px; height:1px; background:var(--acc); transform-origin:0 0; transform:scale(0); transition:transform .5s var(--ease); }
#s10 .s10-fr .s10-fd { width:8px; height:8px; border-radius:50%; }
#s10.fr-on .s10-fr { opacity:1; }
#s10.no-cam .s10-pic, #s10.no-cam .s10-fr i { transition:none !important; }

/* зоны: строки с волосяной линией, в каждой кнопка (нажатие показывает зону, а не листает).
   Кнопка только по ширине номера и названия: правая часть строки остаётся зоной «дальше» для большого пальца */
#s10 .s10-zs { flex:none; margin-top:2cqh; }
#s10 .s10-row { border-top:1px solid var(--line); transition:border-color .4s var(--ease); }
#s10 .s10-row:last-child { border-bottom:1px solid var(--line); }
#s10 .s10-row.is-a { border-top-color:var(--soft); }
#s10 .s10-z { appearance:none; -webkit-appearance:none; display:grid; grid-template-columns:2.6em auto; align-items:baseline; width:fit-content; max-width:100%; margin:0; padding:.95cqh 5cqw 1.05cqh 0;
  background:none; border:0; border-radius:0; text-align:left; cursor:pointer; color:var(--soft); font:inherit; }
#s10 .s10-i { grid-column:1; font-size:max(12.5px,3.2cqw); color:var(--mute); transition:color .4s var(--ease); }
#s10 .s10-zn { grid-column:2; font-size:max(15px,4cqw); line-height:1.3; letter-spacing:-.01em; transition:color .4s var(--ease); }
/* описание зоны в самой кнопке видно только на широком экране; на телефоне его показывает .s10-det, читалке — aria-describedby */
#s10 .s10-zd { display:none; }
#s10 .s10-z.is-a .s10-i { color:var(--fg); }
#s10 .s10-z.is-a .s10-zn { color:var(--fg); font-weight:500; }
#s10 .s10-z:focus-visible { outline-offset:-2px; }

/* описание активной зоны: четыре абзаца в одной ячейке, высота по самому длинному */
#s10 .s10-det { flex:none; display:grid; margin-top:1.3cqh; font-size:max(15px,3.85cqw); line-height:1.42; color:var(--soft); }
#s10 .s10-det p { grid-area:1 / 1; opacity:0; transition:opacity .35s var(--ease); text-wrap:pretty; }
#s10 .s10-det p.is-a { opacity:1; }
#s10 .s10-note { flex:none; margin-top:1.4cqh; }
#s10 .s10-ld { display:none; }

@container dk (max-height:780px) {
  [data-o="p"] #s10 .s10-note { display:none; }
  [data-o="p"] #s10 .s10-z { padding:.75cqh 5cqw .85cqh 0; }
}

/* ── широкий экран 16:9: координаты по сетке слайда КП 1920×1080 (x/19.2 cqw, y/10.8 cqh) ── */
[data-o="l"] #s10 .s10-b { position:static; margin:0; }
[data-o="l"] #s10 .s10-fig { position:absolute; left:5.2cqw; top:21.11cqh; width:28.75cqw; min-height:0; }
[data-o="l"] #s10 .s10-cam { flex:none; aspect-ratio:1238 / 1504; }
[data-o="l"] #s10 .s10-zs { position:absolute; left:44.79cqw; top:22.59cqh; width:47cqw; margin:0; }
[data-o="l"] #s10 .s10-row, [data-o="l"] #s10 .s10-row:last-child { border:0; }
[data-o="l"] #s10 .s10-z { display:grid; grid-template-columns:2.3cqw minmax(0,1fr); grid-template-rows:auto 1fr; align-content:start; width:100%; height:14.44cqh; padding:0; color:var(--soft); }
[data-o="l"] #s10 .s10-i { font-size:max(13px,.94cqw); }
[data-o="l"] #s10 .s10-zn { font-size:max(17px,1.4cqw); font-weight:500; color:var(--soft); }
[data-o="l"] #s10 .s10-zd { display:block; grid-column:2; margin-top:.8cqh; font-size:max(17px,1.18cqw); line-height:1.45; color:var(--mute); max-width:41cqw; transition:color .4s var(--ease); }
[data-o="l"] #s10 .s10-z.is-a .s10-zn { color:var(--fg); }
[data-o="l"] #s10 .s10-z.is-a .s10-zd { color:var(--soft); }
[data-o="l"] #s10 .s10-det { display:none; }
[data-o="l"] #s10 .s10-note { position:absolute; left:44.79cqw; top:80.4cqh; width:44cqw; margin:0; }
[data-o="l"] #s10 .s10-ld { display:block; position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#s10 .s10-ld path { fill:none; stroke:var(--line2); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .4s var(--ease); }
#s10 .s10-ld rect { fill:var(--mute); transition:fill .4s var(--ease); }
#s10[data-z="0"] .s10-ld path[data-z="0"], #s10[data-z="1"] .s10-ld path[data-z="1"], #s10[data-z="2"] .s10-ld path[data-z="2"], #s10[data-z="3"] .s10-ld path[data-z="3"] { stroke:var(--soft); }

@media (prefers-reduced-motion:reduce) {
  #s10 .s10-pic, #s10 .s10-fr, #s10 .s10-fr i, #s10 .s10-row, #s10 .s10-z, #s10 .s10-z *, #s10 .s10-det p, #s10 .s10-ld * { transition:none !important; }
}

/* ── экран 11 ── */
/* 11 · Письмо: лист в утреннем свете (фото — визуализация), письмо из КП печатается на бумаге.
   Лист берёт светлые переменные через data-tone="day" на самом листе; янтарь один — точка у 07:41. */
/* затемнение фото: в портрете сильнее, светлый угол листа попадает под третью строку заголовка */
#s11 .s11-ph { --dim:.46; }
[data-o="p"] #s11 .s11-ph { --dim:.56; }
#s11 .s11-ph img { object-position:50% 40%; }
#s11 .s11-r { flex:none; margin-top:2.6cqh; }

/* лист: бумага, прямые углы, без тени */
#s11 .s11-lt { position:relative; background:var(--bg); color:var(--soft); padding:4.4cqw 5.2cqw 4cqw; }
#s11 .s11-lt b { font-weight:500; color:var(--fg); }
#s11 .s11-hd { padding-bottom:1.1cqh; border-bottom:1px solid var(--line); font-size:max(15px,3.85cqw); line-height:1.45; }
#s11 .s11-hd p { display:grid; grid-template-columns:3.3em minmax(0,1fr); }
#s11 .s11-l { color:var(--mute); }
#s11 .s11-bd { display:flex; flex-direction:column; gap:1cqh; padding-top:1.4cqh; font-size:max(15px,3.85cqw); line-height:1.45; letter-spacing:-.003em; }
#s11 .s11-u { margin-top:1.3cqh; font-size:max(12.5px,3.2cqw); line-height:1.4; color:var(--mute); }
#s11 .s11-n { margin-top:1.3cqh; padding-top:1cqh; border-top:1px solid var(--line); font-size:max(12.5px,3.2cqw); line-height:1.4; color:var(--mute); }

/* момент: точка и время, письмо уйдёт в 09:11 */
#s11 .s11-at-t { text-wrap:balance; }
#s11 .s11-at { display:flex; align-items:baseline; gap:2.4cqw; margin-top:1.7cqh; font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); }
#s11 .s11-dot { --ds:9px; flex:none; transform:translateY(-1px); }
#s11 .s11-tm { font-family:var(--mono); color:var(--fg); margin-right:.35em; font-variant-numeric:tabular-nums; }

#s11 .s11-pn { display:none; }

@container dk (max-height:780px) {
  [data-o="p"] #s11 .s11-bd { gap:.8cqh; }
}

/* совсем низкое окно: лист плотнее */
@container dk (max-height:700px) {
  [data-o="p"] #s11 .s11-r { margin-top:2cqh; }
  [data-o="p"] #s11 .s11-bd { gap:.6cqh; line-height:1.4; }
  [data-o="p"] #s11 .s11-hd { line-height:1.4; padding-bottom:.9cqh; }
  [data-o="p"] #s11 .s11-lt { padding:3.6cqw 4.6cqw 3.4cqw; }
  [data-o="p"] #s11 .s11-u { margin-top:1cqh; }
  [data-o="p"] #s11 .s11-n { margin-top:1cqh; padding-top:.8cqh; }
}
@container dk (max-height:680px) {
  [data-o="p"] #s11 .s11-r { margin-top:1.4cqh; }
  [data-o="p"] #s11 .s11-lt { padding:3.2cqw 4.6cqw 3cqw; }
  [data-o="p"] #s11 .s11-bd { padding-top:1cqh; }
  [data-o="p"] #s11 .s11-u { margin-top:.8cqh; }
  [data-o="p"] #s11 .s11-n { margin-top:.8cqh; padding-top:.7cqh; }
}
/* если лист с подписями не помещается над шкалой дня, 11.js убирает второстепенное по очереди (.s11-off):
   строку «07:41 письмо собрано», подпись, строку «От», в последнюю очередь пометку «Выделено…».
   Тема, обращение, оба абзаца письма и строка отписки остаются всегда */
#s11 .s11-off { display:none !important; }

/* ── широкий экран 16:9: заголовок и пометки слева, лист справа, как в КП (x/19.2 cqw, y/10.8 cqh) ── */
[data-o="l"] #s11 .s11-h { max-width:40cqw; }
/* лист по высоте текста (без пустой бумаги внутри), строка «07:41» остаётся внизу, где под ней тёмный фон, а не светлый лист фото */
[data-o="l"] #s11 .s11-r { position:absolute; left:52.08cqw; top:10.6cqh; width:42.7cqw; margin:0; display:flex; flex-direction:column; min-height:74.8cqh; }
[data-o="l"] #s11 .s11-lt { flex:none; padding:3.7cqh 2.7cqw 3.2cqh; }
[data-o="l"] #s11 .s11-hd { padding-bottom:1.8cqh; font-size:max(17px,1.18cqw); line-height:1.5; }
[data-o="l"] #s11 .s11-bd { gap:1.5cqh; padding-top:2.4cqh; font-size:max(17px,1.18cqw); line-height:1.5; }
[data-o="l"] #s11 .s11-u { margin-top:2cqh; font-size:max(13px,.9cqw); }
[data-o="l"] #s11 .s11-n { margin-top:2.2cqh; padding-top:1.5cqh; font-size:max(13px,.9cqw); }
[data-o="l"] #s11 .s11-at { margin-top:auto; padding-top:2.6cqh; gap:.9cqw; font-size:max(17px,1.18cqw); }
[data-o="l"] #s11 .s11-dot { --ds:max(10px,.75cqw); }
[data-o="l"] #s11 .s11-pn { display:block; position:absolute; left:5.2cqw; top:64cqh; width:31.25cqw; }
[data-o="l"] #s11 .s11-pn li { padding:1.15cqh 0 1.35cqh; border-top:1px solid var(--line); font-size:max(17px,1.18cqw); line-height:1.4; color:var(--soft); }

/* ── экран 12 ── */
/* 12 · Актуальность: письмо идёт по линии от 07:41 к 09:11 и проходит шесть проверок; в конце линия размыкается, точка выходит.
   Телефон: линия вертикальная, проверки строками; широкий экран: линия горизонтальная, проверки свисают с неё, как в КП. */
#s12 .s12-h { max-width:none; }
#s12 .s12-mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; color:var(--fg); }

/* телефон: вертикальная линия слева, текст колонкой справа */
#s12 .s12-tl { --sx:5px; --tx:8.4cqw; --gh:11px; --exit:calc(var(--tx) - var(--sx) + 5px);
  position:relative; flex:1 1 auto; min-height:0; margin-top:2.6cqh; padding-left:var(--tx);
  display:grid; grid-template-rows:28px minmax(0,1fr) 52px; }
#s12 .s12-line { position:absolute; left:var(--sx); top:14px; bottom:0; width:1px; background:var(--soft); }
#s12 .s12-t0 { position:absolute; left:calc(var(--sx) - 5px); top:14px; width:11px; height:1px; background:var(--soft); }
#s12 .s12-gapx { position:absolute; left:calc(var(--sx) - 3px); width:7px; bottom:calc(30px - var(--gh)); height:calc(var(--gh) * 2); background:var(--bg); }
#s12 .s12-start { grid-row:1; font-size:max(13.5px,3.5cqw); line-height:28px; color:var(--mute); white-space:nowrap; }
#s12 .s12-start .s12-mono { margin-right:.45em; }
#s12 .s12-checks { grid-row:2; display:grid; grid-template-rows:repeat(6, auto); align-content:space-between; min-height:0; padding:1cqh 0 .6cqh; }
#s12 .s12-checks li { position:relative; }
#s12 .s12-checks li::before { content:""; position:absolute; left:calc(var(--sx) - var(--tx)); top:calc(max(15px,3.95cqw) * .66); width:calc(var(--tx) - var(--sx) - 8px); height:1px; background:var(--soft); }
#s12 .s12-checks b { display:block; font-weight:500; font-size:max(15px,3.95cqw); line-height:1.3; letter-spacing:-.012em; color:var(--fg); }
#s12 .s12-checks span { display:block; margin-top:.12em; font-size:max(15px,3.85cqw); line-height:1.34; color:var(--soft); text-wrap:pretty; }
#s12 .s12-checks .s12-s { display:none; }
/* точка: .s12-run — дорожка от 07:41 до разрыва, точка <i> на её конце; движение — сдвиг дорожки на её собственную длину (transform) */
#s12 .s12-run { position:absolute; z-index:1; left:calc(var(--sx) + .5px); top:14px; bottom:30px; width:0; }
#s12 .s12-run i { position:absolute; left:0; bottom:0; width:11px; height:11px; margin:0 0 -5.5px -5.5px;
  border-radius:50%; background:var(--acc); transform:translateX(var(--exit)); }
#s12 .s12-end { position:absolute; left:calc(var(--tx) + 21px); bottom:20px; font-size:max(13.5px,3.5cqw); line-height:20px; color:var(--soft); white-space:nowrap; }
#s12 .s12-end .s12-mono { margin-right:.3em; }
#s12 .s12-note { margin-top:2.4cqh; font-size:max(15px,3.95cqw); max-width:30em; }

/* широкий экран: линия поперёк, шесть проверок колонками под ней, разрыв и точка у правого края */
[data-o="l"] #s12 .s12-h { max-width:25ch; }
[data-o="l"] #s12 .s12-tl { --ly:6.4cqh; --gh:13px; --drop:7.6cqh; display:block; flex:0 0 auto; margin:auto 0; padding:var(--ly) 0 0; }
[data-o="l"] #s12 .s12-line { left:0; right:0; top:var(--ly); bottom:auto; width:auto; height:1px; }
[data-o="l"] #s12 .s12-t0 { left:0; top:calc(var(--ly) - 9px); width:1px; height:19px; }
[data-o="l"] #s12 .s12-gapx { left:calc(95% - var(--gh)); width:calc(var(--gh) * 2); top:calc(var(--ly) - 3px); bottom:auto; height:7px; }
[data-o="l"] #s12 .s12-start { position:absolute; left:0; top:calc(var(--ly) - 4.2cqh); font-size:max(13px,1.04cqw); line-height:1.2; }
[data-o="l"] #s12 .s12-checks { display:grid; grid-template-rows:none; padding:0; grid-template-columns:repeat(6, minmax(0,1fr)); margin-left:7.74%; width:85.74%; }
[data-o="l"] #s12 .s12-checks li { padding:calc(var(--drop) + 2.2cqh) 1.5cqw 0 0; }
[data-o="l"] #s12 .s12-checks li::before { left:0; top:0; width:1px; height:var(--drop); background:var(--line2); }
[data-o="l"] #s12 .s12-checks li::after { content:""; position:absolute; left:0; top:-9px; width:1px; height:9px; background:var(--soft); }
[data-o="l"] #s12 .s12-checks b { font-size:max(17px,1.32cqw); }
[data-o="l"] #s12 .s12-checks span { margin-top:.5cqh; font-size:max(17px,1.18cqw); line-height:1.42; }
[data-o="l"] #s12 .s12-run { left:0; right:5%; top:var(--ly); bottom:auto; width:auto; height:0; }
[data-o="l"] #s12 .s12-run i { left:auto; right:0; top:0; bottom:auto; width:max(11px,.78cqw); height:max(11px,.78cqw);
  margin:calc(max(11px,.78cqw) / -2) calc(max(11px,.78cqw) / -2) 0 0; transform:translateY(-24px); }
[data-o="l"] #s12 .s12-end { position:static; }
[data-o="l"] #s12 .s12-end .s12-mono { position:absolute; right:calc(5% + 2cqw); top:calc(var(--ly) - 24px - .62em); margin:0; font-size:max(13px,1.04cqw); line-height:1.2; }
[data-o="l"] #s12 .s12-end .s12-go { position:absolute; right:0; top:calc(var(--ly) + 1.8cqh); font-size:max(13px,1.04cqw); line-height:1.2; }
[data-o="l"] #s12 .s12-note { margin-top:0; max-width:62cqw; font-size:max(18px,1.4cqw); }

/* небольшой широкий экран (кадр 16:9 ниже 620 px: планшет 1024×768): колонки проверок почти во всю линию, чтобы длинные
   слова («Ликвидирована», «Руководитель») помещались при тексте 17 px; засечки над линией убраны, чтобы не задеть «07:41».
   Кадр уже 1000 px: слова переносятся по слогам */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s12 .s12-checks { margin-left:2.5%; width:97.5%; }
  [data-o="l"] #s12 .s12-checks li { padding-right:.6cqw; }
  [data-o="l"] #s12 .s12-checks li::after { display:none; }
}
@container dk (orientation: landscape) and (max-width: 1000px) {
  [data-o="l"] #s12 .s12-checks b, [data-o="l"] #s12 .s12-checks span { -webkit-hyphens:auto; hyphens:auto; }
}

/* невысокий телефон (и широкий относительно высоты, как во встроенном браузере Instagram/Telegram): плотнее */
@container dk (orientation: portrait) and ((max-height: 780px) or (min-aspect-ratio: 19/40)) {
  #s12 .s12-tl { margin-top:1.8cqh; grid-template-rows:26px minmax(0,1fr) 50px; }
  #s12 .s12-checks span { line-height:1.3; margin-top:0; }
  #s12 .s12-note { margin-top:1.6cqh; line-height:1.4; }
}
/* короткий телефон (встроенный браузер Instagram/Telegram, 390×700 … 360×640): у каждой проверки короткое пояснение из текста КП */
@container dk (orientation: portrait) and ((max-height: 720px) or (min-aspect-ratio: 27/50)) {
  #s12 .s12-checks .s12-d { display:none; }
  #s12 .s12-checks .s12-s { display:block; }
}

/* движение: линия прочерчивается, точка идёт по ней и на каждой проверке ставит отметку, в 09:11 линия размыкается */
@media (prefers-reduced-motion: no-preference) {
  .js #s12 .s12-line { transform:scaleY(0); transform-origin:center top; transition:transform 1.25s var(--ease) .35s; }
  .js [data-o="l"] #s12 .s12-line { transform:scaleX(0); transform-origin:left center; }
  .js #s12 .s12-t0, .js #s12 .s12-start { opacity:0; transition:opacity .6s var(--ease) .3s; }
  .js #s12 .s12-gapx { opacity:0; transition:opacity .3s var(--ease) 1.86s; }
  .js #s12 .s12-end { opacity:0; transition:opacity .6s var(--ease) 1.95s; }
  .js #s12 .s12-run { opacity:0; transition:opacity .3s var(--ease) .42s; }
  .js #s12 .s12-run i { transform:none; transition:transform .55s var(--io) 1.86s; }
  .js #s12 .s12-checks li::before { transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease) var(--d); }
  .js [data-o="l"] #s12 .s12-checks li::before { transform:scaleY(0); transform-origin:center top; }
  .js #s12 .s12-checks li::after { opacity:0; transition:opacity .25s var(--ease) var(--d); }
  .js #s12 .s12-checks b, .js #s12 .s12-checks span { opacity:0; transform:translateX(-8px);
    transition:opacity .6s var(--ease) calc(var(--d) + .08s), transform .8s var(--ease) calc(var(--d) + .08s); }
  .js [data-o="l"] #s12 .s12-checks b, .js [data-o="l"] #s12 .s12-checks span { transform:translateY(10px); }
  .js #s12.is-on .s12-line, .js #s12.is-on .s12-checks li::before, .js #s12.is-on .s12-checks b, .js #s12.is-on .s12-checks span { transform:none; }
  .js #s12.is-on .s12-t0, .js #s12.is-on .s12-start, .js #s12.is-on .s12-gapx, .js #s12.is-on .s12-end,
  .js #s12.is-on .s12-checks li::after, .js #s12.is-on .s12-checks b, .js #s12.is-on .s12-checks span { opacity:1; }
  .js #s12.is-on .s12-run { opacity:1; animation:s12-run-p 1.3s linear .55s backwards; }
  .js #s12.is-on .s12-run i { transform:translateX(var(--exit)); }
  .js [data-o="l"] #s12.is-on .s12-run { animation-name:s12-run-l; }
  .js [data-o="l"] #s12.is-on .s12-run i { transform:translateY(-24px); }
}
@keyframes s12-run-p { from { transform:translateY(-100%); } to { transform:none; } }
@keyframes s12-run-l { from { transform:translateX(-100%); } to { transform:none; } }

/* ── экран 13 ── */
/* 13 · Контроль отправки: очередь писем набирается строка за строкой, рамка с разрывом встаёт на первое письмо в 09:11.
   Кадр панели p-queue (2256×1353). Широкий экран: кадр до конца строки 09:47 (высота 1287), рамка на ячейке «09:11 первое письмо».
   Телефон: вырезка s13-queue-m (x 40–776, y 620–1126) — колонки «Уйдёт» и «Кому» целиком, без обрезанного «Повода»;
   рамка на строке «09:11 Кирилл Сергеевич». --cx --cy --cw --ch — окно кадра в пикселях исходника, --fx --fy --fw --fh — рамка;
   по ним стоят шторки строк и рамка. */
/* заголовок в две строки: «Вы решаете, что уходит» / «от вашего имени» (первая строка входит и в 360 px) */
#s13 .s13-h { text-wrap:wrap; }
#s13 .s13-nw { white-space:nowrap; }
#s13 .s13-body { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:2.6cqh; }
#s13 .s13-win { --cx:40; --cy:620; --cw:736; --ch:506; --fx:54; --fy:724; --fw:708; --fh:106; position:relative; }
#s13 .s13-shot { height:0; padding-top:calc(var(--ch) / var(--cw) * 100%); background:#0E1116; border-color:var(--line2); }
#s13 .s13-shot picture, #s13 .s13-shot img { position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
#s13 .s13-cov { display:none; position:absolute; left:0; right:0; top:calc((var(--y0) - var(--cy)) / var(--ch) * 100%); height:calc((var(--y1) - var(--y0)) / var(--ch) * 100%); background:#0E1116; }
/* рамка с разрывом на первом письме; на тёмном кадре — светлый янтарь */
#s13 .s13-gap { --acc:#FFB23F; position:absolute; left:calc((var(--fx) - var(--cx)) / var(--cw) * 100%); width:calc(var(--fw) / var(--cw) * 100%);
  top:calc((var(--fy) - var(--cy)) / var(--ch) * 100%); height:calc(var(--fh) / var(--ch) * 100%); }
#s13 .s13-cap { margin-top:7px; }
#s13 .s13-pts { margin-top:2.2cqh; }
#s13 .s13-pts > li { padding:1.05cqh 0 1.2cqh; }
#s13 .s13-pts b { display:block; font-weight:500; font-size:max(15px,3.95cqw); line-height:1.3; letter-spacing:-.012em; color:var(--fg); }
#s13 .s13-pts span { display:block; margin-top:.2em; font-size:max(15px,3.85cqw); line-height:1.38; color:var(--soft); text-wrap:pretty; }

/* широкий экран: пункты слева, кадр очереди целиком справа, как в КП */
[data-o="l"] #s13 .s13-body { display:grid; grid-template-columns:minmax(0,34fr) minmax(0,58fr); column-gap:5.6cqw; align-items:start; margin-top:7.4cqh; }
[data-o="l"] #s13 .s13-fig { grid-column:2; grid-row:1; }
[data-o="l"] #s13 .s13-pts { grid-column:1; grid-row:1; margin-top:0; }
[data-o="l"] #s13 .s13-win { --cx:0; --cy:0; --cw:2256; --ch:1287; --fx:796; --fy:400; --fw:248; --fh:176; }
[data-o="l"] #s13 .s13-pts > li { padding:2.3cqh 0 2.6cqh; }
[data-o="l"] #s13 .s13-pts b { font-size:max(17px,1.32cqw); }
[data-o="l"] #s13 .s13-pts span { margin-top:.45em; font-size:max(17px,1.18cqw); line-height:1.45; }

/* невысокий телефон (360×740) и телефон, широкий относительно высоты (встроенный браузер Instagram/Telegram): плотнее */
@container dk (orientation: portrait) and ((max-height: 780px) or (min-aspect-ratio: 19/40)) {
  #s13 .s13-body { margin-top:2cqh; }
  #s13 .s13-pts { margin-top:1.4cqh; }
  #s13 .s13-pts > li { padding:.8cqh 0 .95cqh; }
  #s13 .s13-pts span { margin-top:.1em; line-height:1.32; }
}
/* телефон ниже 780 px (360×740 и встроенный браузер Instagram/Telegram): в кадре две строки очереди.
   Пояснения к пунктам остаются, на самом низком (360×640) без пояснения к повторной проверке: её смысл несёт заголовок пункта */
@container dk (orientation: portrait) and (max-height: 780px) {
  #s13 .s13-win { --ch:346; }
}
@container dk (orientation: portrait) and (max-height: 660px) {
  #s13 .s13-pts > li:nth-child(3) span { display:none; }
}
/* совсем низкий кадр (маленький экран, уменьшенный каркасом до 600 px): из пояснений остаётся порог, который задаёте вы */
@container dk (orientation: portrait) and (max-height: 620px) {
  #s13 .s13-pts > li:not(:nth-child(2)) span { display:none; }
}
/* небольшой широкий экран (кадр 16:9 ниже 620 px: планшет 1024×768, нетбук): колонка текста шире, пункты плотнее */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s13 .s13-body { grid-template-columns:minmax(0,40fr) minmax(0,52fr); column-gap:4cqw; margin-top:5cqh; }
  [data-o="l"] #s13 .s13-pts > li { padding:1.2cqh 0 1.4cqh; }
}

/* движение: строки очереди проявляются по одной, затем рамка ложится на 09:11 */
@media (prefers-reduced-motion: no-preference) {
  .js #s13 .s13-cov { display:block; opacity:1; transition:opacity .55s var(--ease) var(--d); }
  .js #s13.is-on .s13-cov { opacity:0; }
  .js #s13 .s13-gap { opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease) 1.5s, transform .8s var(--ease) 1.5s; }
  .js #s13.is-on .s13-gap { opacity:1; transform:none; }
}

/* ── экран 14 ── */
/* 14 · Доставляемость: 98,6 % и 861 бегут, отправка по почтовым службам прочерчивается по часам 09:00–18:00
   (одна отметка — одно письмо, каждые 12 минут в службу, службы со сдвигом), янтарная точка — первое письмо в 09:11. */
#s14 .s14-body { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:2.6cqh; }
#s14 .s14-nums { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:5cqw; row-gap:1.3cqh; }
#s14 .s14-big { font-weight:500; font-size:13.4cqw; line-height:.92; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap; }
#s14 .s14-big small { font-size:.42em; letter-spacing:-.02em; margin-left:.05em; }
#s14 .s14-nl { margin-top:.9cqh; font-size:max(15px,3.85cqw); line-height:1.35; color:var(--soft); text-wrap:pretty; }
#s14 .s14-src { grid-column:1 / -1; }
#s14 .s14-x { display:none; }
#s14 .s14-pace { margin-top:2.8cqh; }
#s14 .s14-pt { font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
#s14 .s14-chart { margin-top:2cqh; display:grid; row-gap:.9cqh; }
#s14 .s14-lane { display:grid; grid-template-columns:16cqw minmax(0,1fr); align-items:center; column-gap:2cqw; }
#s14 .s14-ln { font-size:max(12.5px,3.2cqw); line-height:1; color:var(--mute); white-space:nowrap; }
#s14 .s14-tr { position:relative; display:block; height:max(16px,2.3cqh); }
#s14 .s14-tk { position:absolute; inset:0; display:block; }
#s14 .s14-svg { display:block; width:100%; height:100%; overflow:visible; }
#s14 .s14-svg path { fill:none; stroke-width:1; vector-effect:non-scaling-stroke; shape-rendering:crispEdges; }
#s14 .s14-base { stroke:var(--line2); }
#s14 .s14-ticks { stroke:var(--fg); }
#s14 .s14-dot { position:absolute; left:calc(11 / 540 * 100%); top:-8px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--acc); }
#s14 .s14-axis .s14-tr { height:22px; align-self:start; }
#s14 .s14-axsvg { height:6px; }
#s14 .s14-axsvg path { stroke:var(--soft); }
#s14 .s14-axis b { position:absolute; top:10px; transform:translateX(-50%); font:400 max(11px,2.8cqw)/1 var(--mono); color:var(--mute); }
#s14 .s14-axis b:first-of-type { transform:none; }
#s14 .s14-axis b:last-of-type { transform:translateX(-100%); }
/* правила на телефоне: заголовок в строку с текстом */
#s14 .s14-rules { margin-top:2.4cqh; }
#s14 .s14-rules li { border-top:1px solid var(--line); padding:.8cqh 0 .9cqh; font-size:max(15px,3.85cqw); line-height:1.38; }
#s14 .s14-rules li:last-child { border-bottom:1px solid var(--line); }
#s14 .s14-rules b { font-weight:500; letter-spacing:-.01em; color:var(--fg); }
#s14 .s14-rules b::after { content:"."; }
#s14 .s14-rules li > span { margin-left:.3em; color:var(--soft); }
/* у правил два пояснения: полное из КП (.s14-d) и короче из тех же слов (.s14-s) для невысоких телефонов */
#s14 .s14-rules li > .s14-s { display:none; }

/* широкий экран: числа слева, справа ритм отправки и четыре правила 2×2, как в КП */
[data-o="l"] #s14 .s14-body { display:grid; grid-template-columns:minmax(0,29fr) minmax(0,65fr); grid-template-rows:auto 1fr; column-gap:6cqw; margin-top:6.6cqh; }
[data-o="l"] #s14 .s14-nums { grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; align-items:flex-start; }
[data-o="l"] #s14 .s14-n + .s14-n { margin-top:6.4cqh; }
[data-o="l"] #s14 .s14-big { font-size:7.6cqw; }
[data-o="l"] #s14 .s14-nl { margin-top:1.6cqh; font-size:max(17px,1.3cqw); }
[data-o="l"] #s14 .s14-src { margin-top:6.4cqh; max-width:22em; }
[data-o="l"] #s14 .s14-x { display:inline; }
[data-o="l"] #s14 .s14-pace { grid-column:2; grid-row:1; margin-top:.6cqh; }
[data-o="l"] #s14 .s14-pt { font-size:max(17px,1.18cqw); line-height:1.45; max-width:58em; }
[data-o="l"] #s14 .s14-chart { margin-top:3.6cqh; row-gap:2.4cqh; }
[data-o="l"] #s14 .s14-lane { grid-template-columns:6.6cqw minmax(0,1fr); column-gap:1.2cqw; }
[data-o="l"] #s14 .s14-ln { font-size:max(13px,.9cqw); }
[data-o="l"] #s14 .s14-tr { height:3.4cqh; }
[data-o="l"] #s14 .s14-dot { top:-14px; width:max(9px,.66cqw); height:max(9px,.66cqw); margin-left:calc(max(9px,.66cqw) / -2); }
[data-o="l"] #s14 .s14-axis { margin-top:.6cqh; }
[data-o="l"] #s14 .s14-axis .s14-tr { height:max(24px,3cqh); }
[data-o="l"] #s14 .s14-axsvg { height:max(6px,.9cqh); }
[data-o="l"] #s14 .s14-axis b { top:max(11px,1.5cqh); font-size:max(11px,.82cqw); }
[data-o="l"] #s14 .s14-rules { grid-column:2; grid-row:2; align-self:start; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto; grid-auto-flow:column; column-gap:3.4cqw; margin-top:5.2cqh; }
[data-o="l"] #s14 .s14-rules li { padding:2cqh 0 2.2cqh; font-size:max(17px,1.18cqw); line-height:1.45; }
[data-o="l"] #s14 .s14-rules li:last-child { border-bottom:0; }
[data-o="l"] #s14 .s14-rules b { display:block; font-size:max(17px,1.32cqw); line-height:1.3; letter-spacing:-.012em; }
[data-o="l"] #s14 .s14-rules b::after { content:none; }
[data-o="l"] #s14 .s14-rules li > .s14-d { display:block; margin:.45em 0 0; }

/* небольшой широкий экран (кадр 16:9 ниже 620 px, например планшет 1024×768): плотнее, без фразы про лимит ящика,
   правила с короткими пояснениями, как на телефоне */
@container dk (orientation: landscape) and (max-height: 620px) {
  [data-o="l"] #s14 .s14-x, [data-o="l"] #s14 .s14-y, [data-o="l"] #s14 .s14-rules li > .s14-d { display:none; }
  [data-o="l"] #s14 .s14-rules li > .s14-s { display:block; margin:.45em 0 0; }
  [data-o="l"] #s14 .s14-body { margin-top:4.6cqh; }
  [data-o="l"] #s14 .s14-chart { margin-top:2.2cqh; row-gap:1.3cqh; }
  [data-o="l"] #s14 .s14-rules { margin-top:3cqh; }
  [data-o="l"] #s14 .s14-rules li { padding:1.2cqh 0 1.4cqh; }
}

/* невысокий телефон и телефон, широкий относительно высоты (встроенный браузер Instagram/Telegram): плотнее, числа чуть меньше */
@container dk (orientation: portrait) and ((max-height: 780px) or (min-aspect-ratio: 19/40)) {
  #s14 .s14-body { margin-top:2cqh; }
  #s14 .s14-big { font-size:12cqw; }
  #s14 .s14-nl { margin-top:.6cqh; }
  #s14 .s14-pace { margin-top:2cqh; }
  #s14 .s14-chart { margin-top:1.8cqh; row-gap:.6cqh; }
  #s14 .s14-rules { margin-top:1.6cqh; }
  #s14 .s14-rules li { padding:.7cqh 0 .8cqh; line-height:1.34; }
}
/* 360×740 и встроенный браузер Instagram/Telegram: правила с короткими пояснениями из тех же слов КП */
@container dk (orientation: portrait) and ((max-height: 780px) or (min-aspect-ratio: 27/50)) {
  #s14 .s14-rules li > .s14-d { display:none; }
  #s14 .s14-rules li > .s14-s { display:inline; }
}
/* 360×740, 375×667 и ниже: без второй фразы про дневной лимит ящика (390×700 она ещё входит) */
@container dk (orientation: portrait) and (((max-height: 760px) and (max-width: 385px)) or (max-height: 690px)) {
  #s14 .s14-y { display:none; }
}
/* 375×667 и ниже: отступы плотнее */
@container dk (orientation: portrait) and (max-height: 690px) {
  #s14 .s14-pace { margin-top:1.6cqh; }
  #s14 .s14-chart { margin-top:1.4cqh; }
  #s14 .s14-tr { height:14px; }
  #s14 .s14-axis .s14-tr { height:20px; }
  #s14 .s14-rules { margin-top:1.2cqh; }
  #s14 .s14-rules li { padding:.6cqh 0 .7cqh; }
}
/* 360×640 и ниже: у отписки в один клик без пояснения (смысл несёт заголовок), у ответов без уведомления менеджеру */
@container dk (orientation: portrait) and (max-height: 655px) {
  #s14 .s14-rules li:nth-child(3) > .s14-s, #s14 .s14-z { display:none; }
  #s14 .s14-rules li:nth-child(3) b::after { content:none; }
}
/* совсем низкий кадр (маленький экран, уменьшенный каркасом до 600 px): пояснение только у автостопа */
@container dk (orientation: portrait) and (max-height: 620px) {
  #s14 .s14-rules li:nth-child(2n+1) > .s14-s, #s14 .s14-rules li:nth-child(4) > .s14-s { display:none; }
  #s14 .s14-rules li:nth-child(2n+1) b::after, #s14 .s14-rules li:nth-child(4) b::after { content:none; }
}

/* движение: числа бегут (data-count), отметки писем прочерчиваются по часам слева направо, точка встаёт на 09:11 */
@media (prefers-reduced-motion: no-preference) {
  .js #s14 .s14-tk { clip-path:inset(0 100% 0 0); transition:clip-path 1.5s linear var(--d); }
  .js #s14 .s14-ln, .js #s14 .s14-axis { opacity:0; transition:opacity .6s var(--ease) .6s; }
  .js #s14 .s14-dot { opacity:0; transform:scale(.4); transition:opacity .4s var(--ease) .82s, transform .6s var(--ease) .82s; }
  .js #s14.is-on .s14-tk { clip-path:inset(0 0 0 0); }
  .js #s14.is-on .s14-ln, .js #s14.is-on .s14-axis, .js #s14.is-on .s14-dot { opacity:1; }
  .js #s14.is-on .s14-dot { transform:none; }
}

/* ── экран 15 ── */
/* 15 · Ответы: в 18:58 сверху в списке ответов появляется новая строка (остальные съезжают вниз), затем карточка ответа.
   Список собран из трёх вырезок кадра p-replies (2256×897): шапка, новая строка (465–590), остальные строки (590–897).
   Список всегда кончается на границе строки: --sh — высота окна под шапкой (новая строка 125 + строки ниже: 249 — ещё одна
   на телефоне, 374 — ещё две на широком экране). На телефоне вырезки уже (s15-*-m: x 40–818, колонки «Когда» и «От кого» целиком, без обрезанного «Ответа»;
   текст ответа читается в карточке ниже), шапка только с подписями колонок. --hh — высота шапки, --cw — ширина вырезки.
   Карточка p-reply (1520×1178) обрезана по чистым границам: 1075 (после темы нашего письма), 940 (до строки «От:»),
   720 (до «Наше письмо»). На широком экране список и карточка стоят рядом одной высоты, подпись одна под обоими. */
#s15 .s15-nw { white-space:nowrap; }
#s15 .s15-mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; color:var(--fg); margin-right:.45em; }
#s15 .s15-body { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:2.6cqh; }
#s15 .s15-new { font-size:max(13.5px,3.5cqw); line-height:1.3; color:var(--mute); }
/* на телефоне кадры не шире 0,53 высоты сцены: в широком и низком кадре (414×660) они не выталкивают текст вниз */
#s15 .s15-fig { margin-top:1.4cqh; max-width:53cqh; }
#s15 .s15-tab { --cw:778; --hh:73; --sh:249; background:#0E1116; border-color:var(--line2); }
#s15 .s15-w { position:relative; overflow:hidden; height:0; background:#0E1116; }
#s15 .s15-w picture { display:block; }
#s15 .s15-w img { position:absolute; left:0; top:0; width:100%; height:auto; object-fit:fill; }
#s15 .s15-head { padding-top:calc(var(--hh) / var(--cw) * 100%); }
#s15 .s15-slot { position:relative; overflow:hidden; height:0; padding-top:calc(var(--sh) / var(--cw) * 100%); }
#s15 .s15-slot > .s15-w { position:absolute; left:0; right:0; top:0; }
#s15 .s15-row { padding-top:calc(125 / var(--cw) * 100%); }
#s15 .s15-rest { padding-top:calc(307 / var(--cw) * 100%); z-index:1; }
#s15 .s15-slot > .s15-rest { top:calc(125 / var(--sh) * 100%); }
#s15 .s15-cshot { margin-top:2.6cqh; aspect-ratio:1520 / 1075; border-color:var(--line2); background:#11141B; }
#s15 .s15-cshot img { object-position:left top; }
#s15 .s15-cap { margin-top:7px; }
#s15 .s15-lead { margin-top:3.2cqh; font-size:max(15px,3.95cqw); }

/* широкий экран: список ответов целиком слева, карточка справа той же высоты (колонки 1,9 : 1 — карточка кончается
   около 1075, после темы письма), подпись одна под обоими, текст под ними, как в КП */
[data-o="l"] #s15 .s15-body { justify-content:center; margin-top:3cqh; padding-bottom:2cqh; }
[data-o="l"] #s15 .s15-new { font-size:max(13px,1.04cqw); }
[data-o="l"] #s15 .s15-fig { max-width:none; display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); column-gap:4.4cqw; margin-top:1.4cqh; }
[data-o="l"] #s15 .s15-tab { --cw:2256; --hh:465; --sh:374; grid-column:1; grid-row:1; }
[data-o="l"] #s15 .s15-cshot { grid-column:2; grid-row:1; margin-top:0; aspect-ratio:auto; }
[data-o="l"] #s15 .s15-cshot picture { position:absolute; inset:0; }
[data-o="l"] #s15 .s15-cap { grid-column:1 / -1; grid-row:2; margin-top:8px; }
[data-o="l"] #s15 .s15-lead { margin-top:4.4cqh; max-width:34em; font-size:max(18px,1.4cqw); }

/* невысокий телефон (360×740, встроенный браузер Instagram/Telegram): плотнее, карточка до строки «От: [Ваша компания]» */
@container dk (orientation: portrait) and (max-height: 780px) {
  #s15 .s15-cshot { margin-top:1.6cqh; aspect-ratio:1520 / 940; }
  #s15 .s15-fig { margin-top:1.1cqh; }
  #s15 .s15-lead { margin-top:2cqh; }
}
/* короткий телефон (390×700 … 360×640): карточка до рамки ответа */
@container dk (orientation: portrait) and ((max-height: 720px) or (min-aspect-ratio: 27/50)) {
  #s15 .s15-cshot { aspect-ratio:1520 / 720; }
}
/* 360×640 и ниже (и кадр шире 0,6 высоты, где кадры панели выше): плотнее, текст без выгрузки в CRM
   (главное — ответ, письмо и событие в одной карточке, клиент в работе) */
@container dk (orientation: portrait) and ((max-height: 655px) or (min-aspect-ratio: 3/5)) {
  #s15 .s15-body { margin-top:1.8cqh; }
  #s15 .s15-cshot { margin-top:1.2cqh; }
  #s15 .s15-lead { margin-top:1.6cqh; }
  #s15 .s15-x { display:none; }
}
/* совсем низкий или широкий кадр (маленький экран, уменьшенный каркасом до 600 px; 414×620): в списке только новая строка,
   прежняя уезжает вниз под неё, без строки подписей колонок */
@container dk (orientation: portrait) and ((max-height: 620px) or (min-aspect-ratio: 13/20)) {
  #s15 .s15-head { display:none; }
  #s15 .s15-tab { --sh:125; }
}

/* движение: остальные строки съезжают вниз, освобождая место, новая строка проявляется; затем карточка ответа */
@media (prefers-reduced-motion: no-preference) {
  .js #s15 .s15-rest { transform:translateY(calc(-125 / 307 * 100%)); transition:transform .8s var(--ease) .95s; }
  .js #s15 .s15-row { opacity:0; transition:opacity .6s var(--ease) 1.12s; }
  .js #s15 .s15-new { opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) 1s, transform .8s var(--ease) 1s; }
  .js #s15.is-on .s15-rest, .js #s15.is-on .s15-new { transform:none; }
  .js #s15.is-on .s15-row, .js #s15.is-on .s15-new { opacity:1; }
}

/* ── экран 16 ── */
/* 16 · Аналитика: сводка утра; столбики ночи растут от базовой линии по часам, с 00:00 до 07:00.
   Шторки над столбиками заданы в пикселях исходника p-summary.jpg (2256×902), --k переводит их в размер кадра.
   Шторки кончаются над осью (648,5), ось видна сразу; у 07:00 янтарная точка «сейчас» открыта с начала,
   по бокам от неё две короткие шторки (--dur) уходят в первые доли секунды проявления столбика. */
#s16 .s16-h { max-width:15ch; }
#s16 .s16-fig { margin-top:3cqh; }
/* подпись кадра в одну строку и на 360 px */
#s16 .s16-fig .dk-cap { letter-spacing:-.012em; }
#s16 .s16-shot { --x0:52; --y0:296; --cw:1046; --ch:460; --k:calc(100cqw / var(--cw));
  aspect-ratio:var(--cw) / var(--ch); container-type:inline-size; background:#0E1116; }
#s16 .s16-shot picture { display:block; width:100%; height:100%; }
/* шторка над столбиком: фон графика и две линии сетки в тех же строках, что на кадре; уходит снизу вверх */
#s16 .s16-cv { position:absolute; left:calc((var(--x) - var(--x0)) * var(--k)); top:calc((var(--y) - var(--y0)) * var(--k));
  width:calc(var(--w,82) * var(--k)); height:calc(var(--h) * var(--k));
  background:linear-gradient(#1F2228,#1F2228) 0 calc((393 - var(--y)) * var(--k)) / 100% calc(2 * var(--k)) no-repeat,
    linear-gradient(#1E2127,#1E2127) 0 calc((520.5 - var(--y)) * var(--k)) / 100% calc(2 * var(--k)) no-repeat, #0D1116; }
.js #s16 .s16-cv { clip-path:inset(0 0 0 0); transition:clip-path var(--dur,.9s) cubic-bezier(.45,0,.2,1) calc(.75s + var(--i) * 85ms); }
.js #s16.is-on .s16-cv { clip-path:inset(0 0 100% 0); }
html:not(.js) #s16 .s16-cv { display:none; }
#s16 .s16-nw { white-space:nowrap; }
/* абзац под кадром: на телефоне его смысл несут строки ниже, на широком экране он есть */
#s16 .s16-lead { display:none; margin-top:2.2cqh; }
#s16 .s16-rows { margin-top:2.4cqh; }
#s16 .s16-rows li { display:grid; gap:.25cqh; padding:1.05cqh 0 1.15cqh; border-top:1px solid var(--line); }
#s16 .s16-rows li:last-child { border-bottom:1px solid var(--line); }
#s16 .s16-rows b { font-weight:500; font-size:max(16px,4.1cqw); line-height:1.25; letter-spacing:-.01em; color:var(--fg); }
#s16 .s16-rows span { font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }

[data-o="l"] #s16 .s16-in { display:grid; grid-template-columns:minmax(0,30fr) minmax(0,62fr); grid-template-rows:auto auto 1fr; column-gap:5cqw; align-content:start; }
[data-o="l"] #s16 .s16-h { grid-column:1 / -1; max-width:none; }
[data-o="l"] #s16 .s16-rows { grid-column:1; grid-row:2 / 4; margin-top:6.5cqh; align-self:start; }
[data-o="l"] #s16 .s16-rows li { padding:1.7cqh 0 1.9cqh; gap:.5cqh; }
[data-o="l"] #s16 .s16-rows b { font-size:max(18px,1.32cqw); }
[data-o="l"] #s16 .s16-rows span { font-size:max(17px,1.18cqw); }
[data-o="l"] #s16 .s16-fig { grid-column:2; grid-row:2; margin-top:6.5cqh; }
/* широкий кадр: сводка целиком до блока «Источники этой ночью» (кадр 2256×772) */
[data-o="l"] #s16 .s16-shot { --x0:0; --y0:0; --cw:2256; --ch:772; }
[data-o="l"] #s16 .s16-lead { display:block; grid-column:2; grid-row:3; margin-top:3cqh; max-width:40em; }

/* короткий телефон (встроенный браузер Instagram/VK/Telegram, 390×700, 375×667) и телефон пошире при небольшой высоте:
   пояснение идёт в строку за названием, как на 17 и 20 */
@container dk (orientation: portrait) and ((max-height: 720px) or ((min-aspect-ratio: 101/200) and (max-height: 860px))) {
  #s16 .s16-fig { margin-top:2.2cqh; }
  #s16 .s16-rows { margin-top:1.8cqh; }
  #s16 .s16-rows li { display:block; padding:.85cqh 0 .95cqh; font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
  #s16 .s16-rows b, #s16 .s16-rows span { font-size:inherit; line-height:inherit; letter-spacing:0; }
  #s16 .s16-rows b::after { content:"."; }
}

/* ещё ниже (360×640, окно ниже 600, которое каркас уменьшает): строки плотнее */
@container dk (orientation: portrait) and (max-height: 660px) {
  #s16 .s16-fig { margin-top:1.8cqh; }
  #s16 .s16-rows { margin-top:1.4cqh; }
  #s16 .s16-rows li { padding:.6cqh 0 .7cqh; line-height:1.35; }
}

/* небольшой широкий экран (планшет лёжа, 1024×576): строки плотнее */
@container dk (orientation: landscape) and (max-height: 640px) {
  [data-o="l"] #s16 .s16-rows, [data-o="l"] #s16 .s16-fig { margin-top:4.4cqh; }
  [data-o="l"] #s16 .s16-rows li { padding:1.1cqh 0 1.3cqh; gap:.3cqh; }
  [data-o="l"] #s16 .s16-rows span { line-height:1.35; }
}

@media (prefers-reduced-motion:reduce) { .js #s16 .s16-cv { display:none; } }

/* ── экран 17 ── */
/* 17 · Надёжность: сутки на шкале, сторож отмечается каждые 20 минут; в 14:20 проход замирает,
   сторож снимает паузу (янтарная точка) и идёт дальше до 24:00. */
#s17 .s17-h { max-width:17ch; }
#s17 .s17-sc { margin-top:3.4cqh; display:grid; }
#s17 .s17-cap { font-size:max(13.5px,3.6cqw); line-height:1.4; color:var(--mute); }
#s17 .s17-ev { margin-top:1.6cqh; font-size:max(13.5px,3.6cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
#s17 .s17-ev-t { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--fg); margin-right:.2em; }

/* шкала: ряд сторожа, линия суток, часы, подписи */
#s17 .s17-tr { --wh:2cqw; --gp:3cqw; --hh:1.4cqw; --ly:calc(var(--wh) + var(--gp)); --lt:calc(var(--ly) + var(--hh) + 1.6cqw);
  --bt:var(--lt); position:relative; height:calc(var(--lt) + 4cqw); margin-top:1.8cqh; }
#s17 .s17-w { position:absolute; left:0; right:0; top:0; height:var(--wh); }
#s17 .s17-w i, #s17 .s17-hr i { position:absolute; top:0; width:1px; height:100%; margin-left:-.5px; }
#s17 .s17-w i { background:var(--line2); }
#s17 .s17-dot { position:absolute; --ds:3.3cqw; left:59.722%; top:calc(var(--wh) / 2); margin:calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2); }
#s17 .s17-ln { position:absolute; left:0; right:0; top:var(--ly); height:1px; background:var(--fg); }
#s17 .s17-hr { position:absolute; left:0; right:0; top:var(--ly); height:var(--hh); }
#s17 .s17-hr i { background:var(--mute); }
#s17 .s17-lb { position:absolute; left:0; right:0; top:var(--lt); }
#s17 .s17-lb b, #s17 .s17-bk-l { position:absolute; top:0; font:400 max(11px,3.05cqw)/1 var(--mono); color:var(--mute); white-space:nowrap; }
#s17 .s17-lb b { transform:translateX(-50%); }
#s17 .s17-lb b:first-child { transform:none; }
#s17 .s17-lb b:last-child { transform:translateX(-100%); }
#s17 .s17-lb b:not(:last-child) { display:none; }
#s17 .s17-bk { position:absolute; left:12.5%; top:var(--ly); }
#s17 .s17-bk i { position:absolute; left:-.5px; top:0; width:1px; height:calc(var(--hh) * 2.2); background:var(--fg); }
#s17 .s17-bk-l { top:calc(var(--lt) - var(--ly)); left:-.5px; font-family:var(--sans); font-size:max(12.5px,3.3cqw); color:var(--soft); }
#s17 .s17-bk-t { font-family:var(--mono); font-size:max(11px,3.05cqw); color:var(--fg); margin-right:.35em; }

/* проход сторожа: отметки слева направо, в 14:20 пауза, точка, дальше до конца суток */
.js #s17 .s17-w i { opacity:0; transition:opacity .3s linear calc(.5s + var(--t)); }
.js #s17.is-on .s17-w i { opacity:1; }
.js #s17 .s17-dot { opacity:0; transform:scale(.2); transition:opacity .3s var(--ease) 1.12s, transform .6s var(--ease) 1.12s; }
.js #s17.is-on .s17-dot { opacity:1; transform:none; }

/* шесть опор: на телефоне имя и пояснение в одну строку текста, хвосты пояснений только на широком
   (у «0 обходов защиты» хвост есть и на высоком телефоне) */
#s17 .s17-x { display:none; }
#s17 .s17-st { margin-top:2.8cqh; }
#s17 .s17-st li { display:grid; grid-template-columns:16.5cqw minmax(0,1fr); column-gap:2.6cqw; align-items:baseline; padding:.95cqh 0 1.05cqh; border-top:1px solid var(--line); }
#s17 .s17-st li:last-child { border-bottom:1px solid var(--line); }
#s17 .s17-v { font-weight:500; font-size:5cqw; line-height:1.1; letter-spacing:-.035em; color:var(--fg); white-space:nowrap; font-variant-numeric:tabular-nums; }
#s17 .s17-u { font-size:.62em; letter-spacing:-.02em; }
#s17 .s17-st p { font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
#s17 .s17-st b { font-weight:500; color:var(--fg); }
#s17 .s17-st b::after { content:"."; }

[data-o="l"] #s17 .s17-h { max-width:none; }
[data-o="l"] #s17 .s17-sc { margin-top:6cqh; grid-template-columns:59.722% minmax(0,1fr); align-items:end; }
[data-o="l"] #s17 .s17-cap { grid-column:1; grid-row:1; font-size:max(13px,1.04cqw); }
[data-o="l"] #s17 .s17-ev { grid-column:2; grid-row:1; margin:0; padding-left:1.4cqw; max-width:30cqw; font-size:max(13px,1.04cqw); }
[data-o="l"] #s17 .s17-tr { grid-column:1 / -1; --wh:.75cqw; --gp:1.25cqw; --hh:.6cqw; --lt:calc(var(--ly) + var(--hh) + .8cqw); --bt:var(--lt);
  height:calc(var(--lt) + 1.6cqw); margin-top:2.2cqh; }
[data-o="l"] #s17 .s17-dot { --ds:max(12px,.95cqw); }
[data-o="l"] #s17 .s17-lb b { font-size:max(11px,.82cqw); }
[data-o="l"] #s17 .s17-lb b:nth-child(n) { display:block; }
[data-o="l"] #s17 .s17-bk-l { font-size:max(13px,.92cqw); }
[data-o="l"] #s17 .s17-bk-t { font-size:max(11px,.82cqw); }
[data-o="l"] #s17 .s17-st { margin-top:6.5cqh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column; column-gap:4.4cqw; }
[data-o="l"] #s17 .s17-st li { grid-template-columns:10cqw minmax(0,1fr); column-gap:1.6cqw; align-items:start; padding:1.7cqh 0 1.9cqh; }
[data-o="l"] #s17 .s17-st li:nth-child(3), [data-o="l"] #s17 .s17-st li:last-child { border-bottom:1px solid var(--line); }
[data-o="l"] #s17 .s17-v { font-size:2.5cqw; }
[data-o="l"] #s17 .s17-x { display:inline; }
[data-o="l"] #s17 .s17-st p { font-size:max(17px,1.18cqw); }
[data-o="l"] #s17 .s17-st b { display:block; margin-bottom:.5cqh; font-size:max(18px,1.32cqw); line-height:1.25; letter-spacing:-.01em; }
[data-o="l"] #s17 .s17-st b::after { content:none; }

/* короткий телефон (встроенный браузер, 390×700) и телефон пошире при небольшой высоте: плотнее, все пояснения на месте */
@container dk (orientation: portrait) and ((max-height: 760px) or ((min-aspect-ratio: 101/200) and (max-height: 860px))) {
  #s17 .s17-sc { margin-top:2.4cqh; }
  #s17 .s17-ev { margin-top:1.2cqh; }
  #s17 .s17-st { margin-top:2cqh; }
  #s17 .s17-st li { padding:.8cqh 0 .9cqh; }
  #s17 .s17-x2 { display:none; }
}
/* ниже (375×667, 360×740 и уже): у сторожа и автотестов только название, сторожа уже описывает шкала выше */
@container dk (orientation: portrait) and ((max-height: 690px) or ((min-aspect-ratio: 57/100) and (max-height: 730px)) or ((max-width: 370px) and (max-height: 760px))) {
  #s17 .s17-lm p > span { display:none; }
  #s17 .s17-lm b::after { content:none; }
}
/* ещё ниже (360×640, окно ниже 600, которое каркас уменьшает): у ежедневного бэкапа только название */
@container dk (orientation: portrait) and (max-height: 660px) {
  #s17 .s17-lc p > span { display:none; }
  #s17 .s17-lc b::after { content:none; }
}
/* узкое окно ниже 600 (360×560: каркас собирает кадр 386×600 и уменьшает): у 2FA тоже только название */
@container dk (orientation: portrait) and (max-height: 620px) and (max-width: 395px) {
  #s17 .s17-lz p > span { display:none; }
  #s17 .s17-lz b::after { content:none; }
}

/* небольшой широкий экран (планшет лёжа, 1024×576): плотнее; 06:00 прячем, иначе встречается с «03:00 бэкап базы» */
@container dk (orientation: landscape) and (max-width: 1300px) {
  [data-o="l"] #s17 .s17-lb b:nth-child(2) { display:none; }
}
@container dk (orientation: landscape) and (max-height: 640px) {
  [data-o="l"] #s17 .s17-sc { margin-top:3.4cqh; }
  [data-o="l"] #s17 .s17-st { margin-top:3.4cqh; }
  [data-o="l"] #s17 .s17-st li { padding:1cqh 0 1.2cqh; }
  [data-o="l"] #s17 .s17-st b { margin-bottom:.2cqh; }
  [data-o="l"] #s17 .s17-st p { line-height:1.35; }
  [data-o="l"] #s17 .s17-x, [data-o="l"] #s17 .s17-x2 { display:none; }
}

@media (prefers-reduced-motion:reduce) { .js #s17 .s17-w i, .js #s17 .s17-dot { opacity:1; transform:none; transition:none; } }

/* ── экран 18 ── */
/* 18 · Цифры первого внедрения: фото прибора как атмосфера, шесть чисел бегут по очереди.
   Телефон: заголовок на своём месте сверху, как на остальных экранах, под ним полоса фото, ниже числа.
   Полоса фото забирает свободную высоту кадра (от 8 до 24 cqh), поэтому числа и сноска стоят над шкалой без пустой полосы. */
#s18 .s18-h { max-width:12ch; }
#s18 .s18-ph { position:relative; flex:1 1 0; min-height:8cqh; max-height:24cqh; margin-top:2.4cqh; overflow:hidden; background:#0E1116; }
#s18 .s18-ph picture { display:block; width:100%; height:100%; }
#s18 .s18-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:52% 46%; }
#s18 .s18-vis { position:absolute; left:2.6cqw; bottom:1.2cqh; font:400 12.5px/1 var(--sans); color:rgba(244,245,246,.62); }
#s18 .s18-body { margin-top:2cqh; }
#s18 .s18-g { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:4cqw; }
#s18 .s18-g li { padding:1.1cqh 0 1.3cqh; border-top:1px solid var(--line); }
#s18 .s18-n { font-weight:500; font-size:8.6cqw; line-height:1; letter-spacing:-.045em; color:var(--fg); white-space:nowrap; font-variant-numeric:tabular-nums; }
#s18 .s18-p { margin-right:.04em; }
#s18 .s18-u { font-size:.62em; letter-spacing:-.02em; }
#s18 .s18-l { margin-top:.8cqh; font-size:max(15px,3.85cqw); line-height:1.35; color:var(--soft); text-wrap:pretty; }
#s18 .s18-note { margin-top:1.6cqh; max-width:34em; }

/* широкий экран: фото слева во всю высоту, справа заголовок и числа по центру */
[data-o="l"] #s18 .s18-in { display:grid; grid-template-columns:minmax(0,35fr) minmax(0,57fr); grid-template-rows:1fr auto auto 1fr; column-gap:6cqw; }
[data-o="l"] #s18 .s18-ph { grid-column:1; grid-row:1 / -1; min-height:0; max-height:none; margin-top:0; }
[data-o="l"] #s18 .s18-ph img { object-position:50% 50%; }
[data-o="l"] #s18 .s18-vis { left:1.2cqw; bottom:1.6cqh; font-size:13px; }
[data-o="l"] #s18 .s18-h { grid-column:2; grid-row:2; max-width:none; }
[data-o="l"] #s18 .s18-body { grid-column:2; grid-row:3; margin-top:5cqh; }
[data-o="l"] #s18 .s18-g { column-gap:3.2cqw; }
[data-o="l"] #s18 .s18-g li { padding:1.8cqh 0 2.4cqh; }
[data-o="l"] #s18 .s18-n { font-size:4.6cqw; }
[data-o="l"] #s18 .s18-l { margin-top:1.2cqh; font-size:max(17px,1.18cqw); }
[data-o="l"] #s18 .s18-note { margin-top:3.2cqh; max-width:none; }

/* короткий телефон (встроенный браузер, 390×700, 375×667) и телефон пошире при небольшой высоте: сетка плотнее */
@container dk (orientation: portrait) and ((max-height: 720px) or ((min-aspect-ratio: 101/200) and (max-height: 760px))) {
  #s18 .s18-ph { margin-top:2cqh; }
  #s18 .s18-body { margin-top:1.4cqh; }
  #s18 .s18-g li { padding:.8cqh 0 .9cqh; }
  #s18 .s18-n { font-size:8cqw; }
  #s18 .s18-l { margin-top:.5cqh; line-height:1.3; }
  #s18 .s18-note { margin-top:1.2cqh; }
}
/* небольшой широкий экран (планшет лёжа, 1024×576): сетка плотнее */
@container dk (orientation: landscape) and (max-height: 640px) {
  [data-o="l"] #s18 .s18-body { margin-top:3.6cqh; }
  [data-o="l"] #s18 .s18-g li { padding:1.4cqh 0 1.8cqh; }
  [data-o="l"] #s18 .s18-note { margin-top:2.4cqh; }
}

/* ── экран 19 ── */
/* 19 · Что вы получаете и за счёт чего: шесть строк по одной, у первой янтарная точка. */
#s19 .s19-h { max-width:13ch; }
#s19 .s19-nw { white-space:nowrap; }
#s19 .s19-hd { display:none; }
#s19 .s19-rows { margin-top:2.8cqh; }
#s19 .s19-rows li { position:relative; display:grid; gap:.35cqh; padding:.9cqh 0 1.05cqh 6.4cqw; border-top:1px solid var(--line); }
#s19 .s19-rows li:last-child { border-bottom:1px solid var(--line); }
#s19 .s19-rows b { font-weight:500; font-size:max(16px,4.1cqw); line-height:1.25; letter-spacing:-.01em; color:var(--fg); }
#s19 .s19-rows li > span:last-child { font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
#s19 .s19-dot { --ds:2.6cqw; position:absolute; left:.4cqw; top:calc(.9cqh + max(16px,4.1cqw) * .625); margin-top:calc(var(--ds) / -2); }

[data-o="l"] #s19 .s19-h { max-width:none; }
[data-o="l"] #s19 .s19-hd { display:grid; grid-template-columns:minmax(0,34fr) minmax(0,58fr); column-gap:3cqw; margin-top:6.5cqh; padding:0 0 1.4cqh 2.4cqw;
  font-size:max(13px,.9cqw); line-height:1.2; color:var(--mute); }
[data-o="l"] #s19 .s19-rows { margin-top:0; }
[data-o="l"] #s19 .s19-rows li { grid-template-columns:minmax(0,34fr) minmax(0,58fr); column-gap:3cqw; align-items:baseline; padding:2.6cqh 0 2.8cqh 2.4cqw; }
[data-o="l"] #s19 .s19-rows b { font-size:max(18px,1.42cqw); }
[data-o="l"] #s19 .s19-rows li > span:last-child { font-size:max(17px,1.18cqw); }
[data-o="l"] #s19 .s19-dot { --ds:max(11px,.78cqw); left:.1cqw; top:calc(2.6cqh + max(18px,1.42cqw) * .625); }

/* короткий телефон (встроенный браузер, 390×700, 375×667), 360×740 и телефон пошире при небольшой высоте:
   длинные пояснения без хвостов, строки плотнее */
@container dk (orientation: portrait) and ((max-height: 760px) or ((min-aspect-ratio: 101/200) and (max-height: 860px))) {
  #s19 .s19-rows { margin-top:2cqh; }
  #s19 .s19-rows li { gap:.15cqh; padding:.7cqh 0 .8cqh 6.4cqw; }
  #s19 .s19-dot { top:calc(.7cqh + max(16px,4.1cqw) * .625); }
  #s19 .s19-x { display:none; }
}
/* ниже (375×667): без хвостов и у писем */
@container dk (orientation: portrait) and (max-height: 690px) {
  #s19 .s19-w { display:none; }
}
/* ещё ниже (360×640, окно ниже 600, которое каркас уменьшает): пояснения короче */
@container dk (orientation: portrait) and (max-height: 660px) {
  #s19 .s19-y { display:none; }
  #s19 .s19-rows { margin-top:1.4cqh; }
  #s19 .s19-rows li { padding:.5cqh 0 .6cqh 6.4cqw; }
  #s19 .s19-dot { top:calc(.5cqh + max(16px,4.1cqw) * .625); }
}
/* небольшой широкий экран (планшет лёжа, 1024×576): строки плотнее */
@container dk (orientation: landscape) and (max-height: 640px) {
  [data-o="l"] #s19 .s19-hd { margin-top:4cqh; padding-bottom:1cqh; }
  [data-o="l"] #s19 .s19-rows li { padding:1.2cqh 0 1.4cqh 2.4cqw; }
  [data-o="l"] #s19 .s19-dot { top:calc(1.2cqh + max(18px,1.42cqw) * .625); }
}

/* ── экран 20 ── */
/* 20 · Внедрение: что меняется под вас и четыре шага; точка идёт по шагам из-под горизонта и восходит к первым письмам. */
#s20 .s20-h { max-width:12ch; }
#s20 .s20-nw { white-space:nowrap; }
#s20 .s20-lb { margin-top:2.2cqh; font-size:max(13.5px,3.6cqw); line-height:1.3; color:var(--mute); }
#s20 .s20-ch { margin-top:1cqh; }
#s20 .s20-ch li { padding:.45cqh 0 .55cqh; border-top:1px solid var(--line); font-size:max(15px,3.85cqw); line-height:1.35; color:var(--fg); }
#s20 .s20-ch li:last-child { border-bottom:1px solid var(--line); }
#s20 .s20-way { margin-top:auto; padding-top:1.6cqh; }

/* горизонт: узлы шагов, призраки пройденных положений, точка восходит */
#s20 .s20-hz { --hy:8.2cqw; --l0:1.9cqw; --l1:0px; --l2:-3cqw; --l3:-6.2cqw; --x0:0%; --x1:20%; --x2:40%; --x3:60%; --ds:3.2cqw;
  position:relative; height:calc(var(--hy) + 8.4cqw); }
#s20 .s20-ln { position:absolute; left:0; right:0; top:var(--hy); height:1px; background:var(--fg); }
#s20 .s20-gh { position:absolute; left:var(--x); top:calc(var(--hy) + var(--l)); width:var(--ds); height:var(--ds); margin-top:calc(var(--ds) / -2);
  border:1px solid var(--mute); border-radius:50%; }
#s20 .s20-n { position:absolute; left:var(--x); top:calc(var(--hy) + 5cqw); font:400 max(11px,3.05cqw)/1 var(--mono); color:var(--mute); }
/* точка едет по рельсу во всю ширину горизонта: сдвиг transform в процентах рельса = доля ширины горизонта */
#s20 .s20-rail { position:absolute; left:0; right:0; top:var(--hy); height:0; transform:translate(var(--x3), var(--l3)); }
#s20 .s20-dot { position:absolute; left:0; top:0; margin-top:calc(var(--ds) / -2); }
#s20 .s20-fl { position:absolute; left:calc(var(--x3) + var(--ds) + 2.4cqw); top:calc(var(--hy) + var(--l3)); transform:translateY(-50%);
  font-size:max(13.5px,3.6cqw); line-height:1; color:var(--fg); white-space:nowrap; }
@keyframes s20-go {
  0%, 8% { transform:translate(var(--x0), var(--l0)); }
  34%, 42% { transform:translate(var(--x1), var(--l1)); }
  66%, 74% { transform:translate(var(--x2), var(--l2)); }
  100% { transform:translate(var(--x3), var(--l3)); }
}
.js #s20 .s20-dot { opacity:0; transition:opacity .3s var(--ease) .45s; }
.js #s20.is-on .s20-dot { opacity:1; }
.js #s20.is-on .s20-rail { animation:s20-go 1.35s var(--io) .55s both; }
.js #s20 .s20-fl { opacity:0; transform:translate(-1cqw,-50%); transition:opacity .6s var(--ease) 1.85s, transform .8s var(--ease) 1.85s; }
.js #s20.is-on .s20-fl { opacity:1; transform:translate(0,-50%); }

/* шаги */
#s20 .s20-st { margin-top:.4cqh; }
#s20 .s20-st li { padding:.75cqh 0 .85cqh; border-top:1px solid var(--line); }
#s20 .s20-i { display:none; font:400 max(11px,3.05cqw)/1.75 var(--mono); color:var(--mute); }
#s20 .s20-st p { font-size:max(15px,3.85cqw); line-height:1.4; color:var(--soft); text-wrap:pretty; }
#s20 .s20-st b { font-weight:500; color:var(--fg); }
#s20 .s20-st b::after { content:"."; }

[data-o="l"] #s20 .s20-h { max-width:none; }
[data-o="l"] #s20 .s20-lb { margin-top:5.4cqh; font-size:max(13px,1.04cqw); }
[data-o="l"] #s20 .s20-ch { margin-top:1.4cqh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:3.4cqw; }
[data-o="l"] #s20 .s20-ch li { padding:1.5cqh 0 1.6cqh; font-size:max(17px,1.2cqw); }
[data-o="l"] #s20 .s20-ch li:nth-child(4) { border-bottom:1px solid var(--line); }
[data-o="l"] #s20 .s20-way { padding-top:3cqh; }
[data-o="l"] #s20 .s20-hz { --g:3cqw; --hy:5.8cqw; --l0:.8cqw; --l1:0px; --l2:-1.9cqw; --l3:-4.6cqw;
  --x1:calc((100% + var(--g)) / 4); --x2:calc((100% + var(--g)) / 2); --x3:calc((100% + var(--g)) * .75); --ds:max(12px,.95cqw); height:calc(var(--hy) + 2.1cqw); }
[data-o="l"] #s20 .s20-n { display:none; }
[data-o="l"] #s20 .s20-fl { left:calc(var(--x3) + var(--ds) + 1cqw); font-size:max(17px,1.2cqw); }
[data-o="l"] #s20 .s20-st { margin-top:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:3cqw; }
[data-o="l"] #s20 .s20-st li { display:block; padding:0; border:0; }
[data-o="l"] #s20 .s20-i { display:block; font-size:max(11px,.86cqw); line-height:1; }
[data-o="l"] #s20 .s20-st p { margin-top:1.4cqh; font-size:max(17px,1.18cqw); }
[data-o="l"] #s20 .s20-st b { display:block; margin-bottom:.9cqh; font-size:max(18px,1.42cqw); line-height:1.2; letter-spacing:-.01em; }
[data-o="l"] #s20 .s20-st b::after { content:none; }

/* короткий телефон (встроенный браузер, 390×700, 375×667), 360×740 и телефон пошире при небольшой высоте:
   шаги с короткими пояснениями (у запуска остаётся «первые недели каждое письмо с вашим подтверждением»), всё плотнее */
@container dk (orientation: portrait) and ((max-height: 760px) or ((min-aspect-ratio: 101/200) and (max-height: 860px))) {
  #s20 .s20-lb { margin-top:1.6cqh; }
  #s20 .s20-ch { margin-top:.6cqh; }
  #s20 .s20-ch li { padding:.35cqh 0 .45cqh; }
  #s20 .s20-way { padding-top:1cqh; }
  #s20 .s20-hz { height:calc(var(--hy) + 7.4cqw); }
  #s20 .s20-n { top:calc(var(--hy) + 4.4cqw); }
  #s20 .s20-st li { padding:.6cqh 0 .7cqh; }
  #s20 .s20-x { display:none; }
}
/* короткий телефон (390×700, 375×667) и телефон пошире: у встречи и запуска тоже короткие пояснения */
@container dk (orientation: portrait) and ((max-height: 720px) or ((min-aspect-ratio: 101/200) and (max-height: 860px))) {
  #s20 .s20-w { display:none; }
}
/* 375×667 и ниже: список и горизонт плотнее */
@container dk (orientation: portrait) and (max-height: 690px) {
  #s20 .s20-ch li { padding:.25cqh 0 .35cqh; }
  #s20 .s20-hz { --hy:6.8cqw; --l0:1.6cqw; --l2:-2.4cqw; --l3:-5cqw; }
}

/* ещё ниже (360×640, окно ниже 600, которое каркас уменьшает): без подписи над списком */
@container dk (orientation: portrait) and (max-height: 660px) {
  #s20 .s20-lb { display:none; }
  #s20 .s20-ch { margin-top:1.6cqh; }
  #s20 .s20-ch li { padding:.25cqh 0 .35cqh; }
}

/* небольшой широкий экран (планшет лёжа, 1024×576): список плотнее, у шагов короткие пояснения, как на коротком телефоне */
@container dk (orientation: landscape) and (max-height: 640px) {
  [data-o="l"] #s20 .s20-lb { margin-top:3.4cqh; }
  [data-o="l"] #s20 .s20-ch li { padding:.9cqh 0 1cqh; }
  [data-o="l"] #s20 .s20-way { padding-top:1.4cqh; }
  [data-o="l"] #s20 .s20-hz { --hy:4.8cqw; --l0:.6cqw; --l2:-1.5cqw; --l3:-3.6cqw; }
  [data-o="l"] #s20 .s20-st p { margin-top:1cqh; line-height:1.35; }
  [data-o="l"] #s20 .s20-st b { margin-bottom:.5cqh; }
  [data-o="l"] #s20 .s20-x, [data-o="l"] #s20 .s20-w { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .js #s20 .s20-dot { opacity:1; transition:none; }
  .js #s20 .s20-rail { animation:none; }
  .js #s20 .s20-fl { opacity:1; transform:translateY(-50%); transition:none; }
}

/* ── экран 21 ── */
#s21 .s21-h { margin-top:4cqh; max-width:13ch; }
#s21 .s21-h .dk-mute { color:var(--mute); }
#s21 .s21-lead { margin-top:2.4cqh; color:#D5DAE2; max-width:30em; }
#s21 .s21-low { position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--uib) + 1.6cqh); display:grid; gap:1.6cqh; }
#s21 .s21-btns .dk-b1 { flex:1 1 100%; justify-content:center; }
#s21 .s21-btns .dk-b2 { flex:1 1 0; justify-content:center; }
#s21 .s21-links { display:flex; flex-wrap:wrap; gap:0 18px; font-size:max(15px,3.9cqw); line-height:1; color:#F4F5F6; }
#s21 .s21-links span { display:none; }
#s21 .s21-links a { display:inline-flex; align-items:center; min-height:40px; }
#s21 .s21-links a { text-decoration:none; border-bottom:1px solid rgba(244,245,246,.35); }
#s21 .s21-note { color:rgba(244,245,246,.55); }
[data-o="l"] #s21 .s21-h { margin-top:6cqh; max-width:12ch; }
[data-o="l"] #s21 .s21-lead { max-width:38cqw; }
[data-o="l"] #s21 .s21-low { bottom:calc(var(--uib) + 2cqh); right:auto; width:52cqw; }
[data-o="l"] #s21 .s21-btns .dk-b1, [data-o="l"] #s21 .s21-btns .dk-b2 { flex:0 0 auto; }

/* телефон: фото выше, чтобы горизонт с точкой (56% высоты) не уходил под кнопки внизу */
[data-o="p"] #s21 .dk-ph img { transform-origin:50% 0; transform:translateY(-29%) scale(1.29); }
#s21 .s21-btns .dk-b2 small { margin-left:2px; }
[data-o="l"] #s21 .s21-links { font-size:max(15px,1.05cqw); }
#s21 .s21-pl { display:none; }
[data-o="l"] #s21 .s21-pl { display:inline; }
/* короткое окно телефона: без сноски и повтора @имени, ниже 690px — без строки ссылок */
@container dk (max-height: 760px) {
  [data-o="p"] #s21 .s21-note, [data-o="p"] #s21 .s21-links a:last-child { display:none; }
}
@container dk (max-height: 690px) {
  [data-o="p"] #s21 .s21-h { font-size:9.8cqw; margin-top:2.5cqh; }
  [data-o="p"] #s21 .s21-links { display:none; }
}