/* Ракомат 24/7 · ГИБРИД (основа P2 + «ячейка открывается» из P1 на аппарате). Контракт: docs/redesign/v2/rakomat/MOTION-rakomat-HYBRID.md
   поверх MOTION-rakomat-P2.md.
   Токены и шрифты — ../../menu/menu.css (через оболочку ../../shell/shell.css). Двигаются только декоративные узлы:
   transform / opacity / stroke-dashoffset (+ clip-path ответа FAQ по тапу). Текст и кнопки неподвижны с 0 мс.
   Без класса .rk-motion (нет JS или reduced-motion) страница показывает «читательские» финалы §6, sticky выключен. */

:root {
  --bg: #f5fafd; --navy: #1d537a; --sky: #b5daeb; --red: #e91b1a; --cobalt: #2f66c0;
  --soft-io: cubic-bezier(.65, 0, .35, 1);
  --line: rgba(29, 83, 122, .2);
  --hdr: 64px;                       /* низ шапки оболочки на телефоне: 8 + 56 */
}
@media (min-width: 1024px) { :root { --hdr: 72px; } }
html { background: var(--bg); }
body.rk { background: var(--bg); }
.rk-motion { scroll-behavior: smooth; }
.rk-probe { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }
.rk-main { position: relative; padding-bottom: 40px; }
.rk-main h2 { margin: 6px 0 18px; font: italic 500 clamp(34px, 8.6vw, 40px)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rk-main h3 { margin: 26px 0 10px; font: italic 500 25px/1.1 var(--serif); color: var(--ink); }
.rk-eyebrow { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.rk-copy { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.rk-copy b, .rk-strong { font-weight: 600; }
.rk-note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.rk-lead { margin: 18px 0 8px; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.rk-form-t { margin: 0 !important; }
.rk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sh-btn { min-height: 52px; }
.sh-btn.is-off { cursor: default; color: rgba(23, 49, 61, .45); box-shadow: inset 0 0 0 1px var(--hair); background: transparent; }
.ph { color: var(--muted); font-family: var(--mono); font-size: .86em; letter-spacing: .01em; }
@media (max-width: 1023px) { .rk-acts .sh-btn { flex: 1 1 100%; } }

/* ═════════ A · блоки 1–2 ═════════ */
.rk-a { position: relative; display: flex; flex-direction: column; padding: 0 16px; }
.rk-a-head { order: 1; padding-top: calc(var(--hdr) + 16px); }
.rk-stage { order: 2; }
.rk-a-cta { order: 3; }
.rk-a-intro { order: 4; }
.rk-foot { order: 5; }
.rk-product { order: 6; }
.rk-a-tail { order: 7; height: 44px; }

.rk-a-head h1 { margin: 10px 0 10px; font: italic 500 44px/1 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.rk-sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 40ch; }
.rk-sub--s { margin-top: -6px; }

/* ═════════ Сцена A (гибрид): аппарат на мишени-тарелке → ячейка 10 → бокс → мишень → медальон → точка ═════════
   Вся геометрия в CSS (CLS 0): скрипт только читает размеры узлов и пишет transform / opacity / stroke-dashoffset.
   --hs: высота сцены; --hv: окно, которое остаётся видно в прилипшем состоянии (верх сцены уезжает под шапку);
   --band: полоса подписей выносок; --mh: высота кадра аппарата (пол = 4 + .9715·mh, под ним тарелка и полоса). */
.rk-stage { position: relative; z-index: 5; margin: 12px -16px 0; overflow: visible;
  --hs: clamp(290px, calc(100svh - 372px), 460px);
  --hv: min(var(--hs), 340px);
  --band: 48px;
  --mh: calc((var(--hs) - 58px) / 1.1112);
  --r3: min(calc(100vw - 24px), calc(var(--hv) - var(--band) - 16px));
  --cy: calc(var(--hs) - var(--hv) + (var(--hv) - var(--band)) / 2);
  --r2: calc(var(--r3) * .9); --r1: calc(var(--r3) * .8); --r0: calc(var(--r3) * .7);
  --W: calc(var(--r0) / 1.24);
  height: var(--hs); }
.rk-motion .rk-stage { position: sticky; top: calc(var(--hdr) - (var(--hs) - var(--hv))); }


/* аппарат: обёртка-пол режет его по низу кадра, аппарат уходит под пол transform-ом */
.rk-floor { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(var(--mh) + 4px); overflow: hidden; pointer-events: none; }
/* правка 01.10: низ аппарата уходит в тарелку «закруглённой стрелкой вниз»: эллипс маски висит от верха пола,
   по бокам аппарата граница проходит ровно по его колёсам (в покое ничего не срезано), к центру опускается на ~0,12·mh;
   растушёвка — последние 8 % луча. Маска статична, едет только аппарат. */
.rk-floor { height: calc(var(--mh) * 1.18 + 4px);
  -webkit-mask-image: radial-gradient(calc(var(--mh) * 1.04) calc(var(--mh) * 1.17) at 50% 0, #000 92%, transparent 100%);
  mask-image: radial-gradient(calc(var(--mh) * 1.04) calc(var(--mh) * 1.17) at 50% 0, #000 92%, transparent 100%); }
.rk-mach { position: absolute; left: 50%; top: 4px; height: var(--mh); width: calc(var(--mh) * .7407); margin-left: calc(var(--mh) * -.37035); }
.rk-mach .mach { display: block; width: 100%; height: 100%; max-width: none; user-select: none; }
/* дверца-контур ячейки 10 (проём x .7661–.9089, y .5322–.6844 кадра): 4 полоски navy 1,5 px, петля слева */
.door { position: absolute; left: calc(76.61% - 2px); top: calc(53.22% - 2px); width: calc(14.28% + 4px); height: calc(15.22% + 4px); container-type: size; }
.dr { position: absolute; background: var(--navy); }
.dr-l { left: 0; top: 0; width: 1.5px; height: 100%; }
.dr-t, .dr-b { left: 0; width: 100%; height: 1.5px; transform-origin: 0 50%; }
.dr-t { top: 0; } .dr-b { bottom: 0; }
.dr-r { right: 0; top: 0; width: 1.5px; height: 100%; }
.door.is-open .dr-t, .door.is-open .dr-b, .rk-static .dr-t, .rk-static .dr-b { transform: scaleX(0); }
.door.is-open .dr-r, .rk-static .dr-r { transform: translateX(calc(1.5px - 100cqw)); }

.rk-center { position: absolute; left: 50%; top: var(--cy); width: 0; height: 0; }
.rk-ring { position: absolute; z-index: 1; width: var(--d); height: var(--d); left: calc(var(--d) / -2); top: calc(var(--d) / -2); pointer-events: none; }
.rk-stage.is-up .rk-ring { z-index: 4; }   /* аппарат ушёл под пол: кольца над боксом (контракт: переключатель при t_A ≥ 0.28) */
.rk-ring[data-ring="0"] { --d: var(--r0); } .rk-ring[data-ring="1"] { --d: var(--r1); } .rk-ring[data-ring="2"] { --d: var(--r2); } .rk-ring[data-ring="3"] { --d: var(--r3); }
.ring-scrub, .ring-intro, .rk-ring svg { width: 100%; height: 100%; display: block; }
.ring-scrub, .ring-intro { transform-origin: 50% 50%; }
.rk-ring svg { overflow: visible; }
.rk-ring circle { fill: none; stroke: var(--navy); stroke-width: .6; stroke-dasharray: 1 1; stroke-dashoffset: 0; }  /* толщина в px ставится скриптом */
.rk-ring:not(.r0) circle { opacity: .75; stroke-dasharray: none; }

.rk-fly { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.rk-box { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.rk-box img { position: absolute; display: block; width: var(--W); height: calc(var(--W) * 1.1222); left: calc(var(--W) * -.5); top: calc(var(--W) * -.6818); max-width: none; user-select: none; }
.shutter { position: absolute; --D: calc(var(--W) * 2.2547); width: var(--D); height: var(--D); left: calc(var(--D) / -2); top: calc(var(--D) / -2);
  border-radius: 50%; overflow: hidden; isolation: isolate; transform-origin: 50% 50%; }
.shutter-in { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }

.head-orbit { position: absolute; z-index: 6; left: -6px; top: -6px; width: 12px; height: 12px; }
.head-birth, .head-scrub, .head-scrub svg { width: 12px; height: 12px; display: block; }
.head-scrub circle { fill: var(--red); }

.rk-callouts { position: absolute; z-index: 7; left: 0; top: 0; overflow: visible; pointer-events: none; }
.rk-callouts path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rk-knot { position: absolute; z-index: 7; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--navy); transform: scale(0); }
/* подписи выносок: нижняя полоса 2 × 2, вне колец; текст с 0 мс */
.rk-band { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: var(--band); padding: 4px 12px 6px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-items: center; }
.rk-tag { justify-self: start; max-width: 100%; padding: 1px 4px; background: var(--bg); color: var(--navy); font: 500 12px/1.25 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.rk-tag[data-c="1"], .rk-tag[data-c="3"] { justify-self: end; }
/* /motion-qa it1: слева короткая «с ручкой» сверху, длинный «контейнер» снизу: иначе выноска к нижней подписи шла под плашкой
   верхней и читалась как выноска к ней (плюс огрызок линии у «с ручкой») */
.rk-tag[data-c="2"] { grid-area: 1 / 1; } .rk-tag[data-c="0"] { grid-area: 2 / 1; }
.rk-tag[data-c="1"] { grid-area: 1 / 2; } .rk-tag[data-c="3"] { grid-area: 2 / 2; }
.rk-tag b { font-weight: 500; }
.rk-tag .pc { display: none; }
/* без режиссёра (reduced-motion / без JS): первый экран — аппарат на тарелке, ячейка открыта; выносок и их подписей нет */
.rk-static .rk-band, .rk-static .rk-callouts, .rk-static .rk-knot { display: none; }
html:not(.rk-motion):not(.rk-static) :is(.rk-center, .rk-band, .rk-callouts, .rk-knot) { display: none; }
/* qa-rm 02.10: статика: финал сцены «бокс в мишени» картинкой (строит hy.js buildBoxFig) и мягкое проявление блоков */
.rk-boxfig { display: none; }
.rk-static .rk-boxfig { display: block; position: relative; width: min(300px, 100%); aspect-ratio: 300 / 326; margin: 22px auto 30px; }
.rk-boxfig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rk-boxfig img { position: absolute; height: auto; max-width: none; }
.rk-boxfig .bf-r { fill: none; stroke: var(--navy); stroke-width: 1; opacity: .75; }
.rk-boxfig .bf-r0 { stroke-width: 1.3; opacity: 1; }
.rk-boxfig .bf-l { fill: none; stroke: var(--navy); stroke-width: 1; }
.rk-boxfig .bf-k { fill: var(--bg); stroke: var(--navy); stroke-width: 1.4; }
.rk-boxfig text { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; fill: var(--navy); }
.rk-static .rv { opacity: 0 !important; }
@media print { .rk-static .rv { opacity: 1 !important; } }

.rk-a-cta { display: grid; gap: 4px; margin-top: 12px; }
.rk-btn-main { width: 100%; }
.rk-btn-text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font: 600 15px/1 var(--sans); color: var(--gzhel-deep);
  text-decoration: underline; text-decoration-color: var(--gzhel-light); text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (hover: hover) { .rk-btn-text:hover { text-decoration-color: var(--gzhel-deep); } }

.rk-a-intro { padding-top: 22px; }
/* 5 преимуществ — одна моно-строка с ромбиками, переносится как текст */
.rk-perks { display: block; margin: 4px 0 0; padding: 0; list-style: none; font: 500 12px/1.75 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.rk-perks li { display: inline; }
.rk-perks li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 7px; transform: rotate(45deg); background: var(--navy); vertical-align: middle; }
.rk-perks--list { display: grid; gap: 8px; margin: 8px 0 18px; font: 400 16px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.rk-perks--list li { display: flex; align-items: baseline; gap: 10px; }
.rk-perks--list li::before, .rk-perks--list li + li::before { content: ""; display: block; flex: none; width: 6px; height: 6px; margin: 0; position: relative; top: -2px; transform: rotate(45deg); background: var(--navy); }
.rk-foot { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.rk-badge { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); font: 600 11px/1.5 var(--mono); letter-spacing: .06em; }

.rk-product { padding-top: 44px; }
@media (max-width: 1023px) {
  /* ход sticky сцены A: текст блоков 1–2 плотнее, чтобы полоса отпускалась раньше (контракт §4 A, лимит хода) */
  .rk-a h2 { margin-bottom: 12px; }
  .rk-a-intro { padding-top: 18px; }
}
.rk-ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rk-ledger li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.35; }
.rk-cell { margin: 16px 0 0; padding: 12px 14px; border: 1px dashed rgba(29, 83, 122, .35); border-radius: 16px; background: #fff; scroll-margin-top: 420px; }
.rk-cell-k { margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
.rk-cell-t { margin: 4px 0 8px; font: italic 500 20px/1.15 var(--serif); }
.rk-cell-ph { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ph-tag { padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--muted); font: 500 11.5px/1.4 var(--mono); letter-spacing: .02em; }
.rk-btn-assort { margin-top: 6px; justify-content: flex-start; }

#lead-dot { position: fixed; z-index: 55; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; opacity: 0; will-change: transform, opacity; }
#lead-dot i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.rk-static #lead-dot { display: none; }

/* ═════════ Тропа (телефон) ═════════ */
.rk-trail { position: absolute; z-index: auto; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; display: none; }
.rk-motion .rk-trail.is-on { display: block; }
.rk-trail svg { position: absolute; z-index: 1; overflow: visible; }
.rk-trail .tr-curtain { z-index: 1; }
.rk-trail .tr-in { z-index: 6; }   /* первый отрезок тропы — над сценой A: линия растёт прямо из точки, а не из-под кромки полосы */
.rk-trail path, .tr-desc path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }
.tr-seg path, .tr-desc path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.tr-curtain { position: absolute; left: 0; top: 0; width: 48px; background: var(--bg); will-change: transform; }
.rk-desc { position: relative; height: 0; display: none; }
.rk-desc svg { position: absolute; overflow: visible; }

/* ═════════ S3 · Как купить ═════════ */
.rk-s3 { position: relative; z-index: 2; padding: 60px 16px 24px 56px; }   /* итерация 1: первый изгиб тропы (52 px) проходит в этом отступе */
.rk-steps { position: relative; margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.rk-steps::before { content: ""; position: absolute; left: -32.75px; top: 16px; bottom: 60px; width: 1.5px; background: var(--navy); }
.rk-motion .rk-steps::before { display: none; }
.rk-step { position: relative; }
.rk-step h3 { margin: 10px 0 6px; font-size: 24px; }
.rk-step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.rk-pic { width: 32px; height: 32px; }
.rk-pic path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.rk-pic .fill { fill: var(--navy); stroke: none; }
.rk-node { position: absolute; z-index: 3; left: -48px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--navy);
  display: grid; place-items: center; }
.rk-node .n { font: 600 11px/1 var(--mono); letter-spacing: .02em; color: var(--navy); }
.rk-node .disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--navy); display: grid; place-items: center; }
.rk-node .disc .n { color: #fff; }
.rk-node--4 { left: -56px; top: -8px; width: 48px; height: 48px; }
.rk-node--4 .n { font-size: 12px; }
.rk-node .medal { position: absolute; inset: 2px; border-radius: 50%; overflow: hidden; }
.rk-node .medal img { position: absolute; width: 150%; height: auto; max-width: none; left: -25%; top: -48%; }
.rk-s3-btn { margin-top: 28px; width: 100%; }
.rk-wave { display: none; }

/* ═════════ S4 · Адреса ═════════ */
.rk-s4 { position: relative; z-index: 2; padding: 72px 16px 24px; scroll-margin-top: 0; }
.rk-s4-head { padding-left: 40px; }
.rk-city { margin: 6px 0 0; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.rk-map { position: relative; margin: 96px auto 0; width: 280px; }  /* под спуском тропы: кривая к центру (240 px) не пересекает строку «Москва» */
.rk-target { position: relative; width: 280px; height: 280px; }
.tg-ring { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.tg-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tg-ring circle { fill: none; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tg-ckad { width: 100%; height: 100%; left: 0; top: 0; }
.tg-mkad { width: 46%; height: 46%; left: 27%; top: 27%; }
.tg-ckad circle { stroke-dasharray: 3 5; }
/* подписи колец — текст, стоят на месте (на 3 часах), кольца под ними встают тарелкой */
.tg-lab { position: absolute; top: 50%; margin-top: -8px; font: 500 11px/16px var(--mono); letter-spacing: .08em; color: var(--navy); background: var(--bg); padding: 0 3px; }
.tg-lab--mkad { left: calc(73% + 4px); }
.tg-lab--ckad { left: calc(100% + 4px); }
.tg-center { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red); }
.tg-caption { position: absolute; left: 50%; top: calc(50% + 14px); transform: translateX(-50%); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }

.rk-cards { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.rk-link { display: inline-flex; min-height: 44px; align-items: center; font: 600 14px/1 var(--sans); color: var(--gzhel-deep); text-decoration: underline; text-decoration-color: var(--gzhel-light); text-underline-offset: 5px; }
.rk-first { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border: 1px dashed rgba(29, 83, 122, .35); border-radius: 14px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.rk-first i { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); }
.rk-notify { scroll-margin-top: 88px; margin-top: 28px; padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--rim); display: grid; gap: 12px; }
.rk-notify h3 { margin: 0; }
.rk-notify p { margin: 0; font-size: 15px; line-height: 1.5; }
.rk-fields2 { display: grid; gap: 12px; }
.rk-subject { margin: 0; font-size: 12.5px !important; line-height: 1.5; color: var(--muted); }
.rk-subject code { font: 500 12px/1.5 var(--mono); color: var(--navy); background: var(--mist); padding: 1px 5px; border-radius: 6px; }

/* ═════════ S5 · Для покупателей ═════════ */
.rk-s5 { position: relative; z-index: 2; overflow: clip; padding: 72px 16px 72px; background: var(--sky); border-top: 1px solid var(--line); }
.rk-motion .rk-s5 { background: transparent; }
.rk-s5.is-sky { background: var(--sky) !important; }
.rk-s5-disc { position: absolute; left: 50%; top: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; background: var(--sky); display: none; transform-origin: 50% 50%; }
.rk-motion .rk-s5-disc { display: block; transform: scale(.02); }
.rk-s5.is-sky .rk-s5-disc { display: none; }
.rk-s5-in { position: relative; }

.rk-occasions { margin: 4px 0 18px; padding: 0; list-style: none; }
.rk-occasions li { padding: 4px 0; font: italic 500 26px/1.15 var(--serif); color: var(--navy); }
.rk-s5-photo { margin: 28px auto 0; width: 240px; height: 240px; }
.ph-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(29, 83, 122, .35); }
.ph-in img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; }

/* ═════════ S6 · О ракомате ═════════ */
.rk-s6 { position: relative; z-index: 2; padding: 72px 16px 40px; }
.rk-s6-fig { display: flex; justify-content: center; margin: 22px 0 18px; }
.bp { position: relative; width: 250px; aspect-ratio: 480 / 720; margin: 0 34px 12px 0; }
.bp-floor { position: absolute; inset: 0; overflow: hidden; }
.bp-floor::after { content: ""; position: absolute; left: 2%; right: 2%; top: 89.6%; height: 1px; background: var(--line); }
.bp-mach { display: block; width: 100%; height: 100%; }
.bp-lines { position: absolute; left: 0; top: 0; overflow: visible; }
.bp-lines path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .25; }
.bp-dim { position: absolute; color: var(--navy); }
.bp-dim svg { position: absolute; overflow: visible; }
.bp-dim path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.bp-dim .tick { position: absolute; background: var(--navy); }
.bp-dim span { position: absolute; font: 500 12px/1 var(--mono); letter-spacing: .06em; background: var(--bg); padding: 2px 3px; }
.bp-h { top: 6%; bottom: 10.2%; right: -22px; width: 10px; }
.bp-h svg { left: 0; top: 0; width: 10px; height: 100%; }
.bp-h .tick { left: -1px; width: 12px; height: 1px; }
.bp-h .t1 { top: 0; } .bp-h .t2 { bottom: 0; }
.bp-h span { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.bp-w { left: 17%; right: 5.4%; bottom: calc(10.2% - 26px); height: 10px; }
.bp-w svg { left: 0; top: 0; width: 100%; height: 10px; }
.bp-w .tick { top: -1px; width: 1px; height: 12px; }
.bp-w .t1 { left: 0; } .bp-w .t2 { right: 0; }
.bp-w span { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rk-facts { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rk-facts li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.4; }
.rk-facts b { font: 600 14px/1 var(--mono); letter-spacing: .02em; color: var(--navy); }

/* лента «волна с точками» — граница B2C → B2B */
.rk-ribbon { position: relative; z-index: 2; height: 27px; margin: 40px 0; overflow: hidden; }
.rk-ribbon-track { height: 27px; width: max-content; }
.rk-ribbon-track svg { display: block; height: 27px; width: auto; }

/* ═════════ S7 · Для площадок ═════════ */
.rk-s7 { position: relative; z-index: 2; padding: 40px 16px 32px; scroll-margin-top: 60px; }
.rk-sq-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; margin: 8px 0 22px; }
.rk-sq { position: relative; grid-row: 1 / span 2; width: 120px; height: 120px; }
.sq-line { width: 100%; height: 100%; display: block; overflow: visible; }
.sq-line path { fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sq-head { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--navy); }
.rk-sq-num { margin: 0; font: italic 500 44px/1 var(--serif); color: var(--ink); }
.rk-sq-num .sup { font-size: .5em; vertical-align: .9em; margin-left: 1px; }
.sq-from { font-size: 24px; color: var(--muted); }
.rk-sq-volt { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.rk-sq-volt i { width: 36px; height: 1px; background: var(--navy); transform-origin: 0 50%; }
.rk-duty { margin: -4px 0 14px; font: 500 11.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }

.rk-form { margin-top: 34px; padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--rim); box-shadow: 0 22px 54px rgba(23, 49, 61, .06); display: grid; gap: 16px; scroll-margin-top: 80px; }
.rk-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: var(--mist); }
.rk-seg button { position: relative; z-index: 1; min-height: 44px; border: 0; background: none; border-radius: 999px; font: 600 14px/1 var(--sans); color: var(--gzhel-deep); transition: color .2s var(--soft); }
.rk-seg button[aria-checked="true"] { color: #fff; }
.seg-pill { position: absolute; left: 0; top: 4px; height: 44px; width: 100%; pointer-events: none; }
.seg-pill i { position: absolute; top: 0; height: 44px; background: var(--gzhel-deep); }
.seg-pill .pl { left: 0; width: 22px; border-radius: 22px 0 0 22px; }
.seg-pill .pm { left: 0; width: 1px; transform-origin: 0 50%; }
.seg-pill .pr { left: 0; width: 22px; border-radius: 0 22px 22px 0; }
.rk-sets { display: grid; }
.rk-set { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
.rk-set[hidden] { display: grid; visibility: hidden; }
.rk-filebtn { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border: 1px dashed rgba(29, 83, 122, .35); border-radius: 14px; cursor: pointer; }
.rk-filebtn .fb-t { font: 600 15px/1 var(--sans); color: var(--gzhel-deep); }
.rk-filebtn .fb-n { font-size: 13px; color: var(--muted); }
.rk-filebtn:focus-within { border-color: var(--gzhel); }
.rk-submit { position: relative; appearance: none; height: 52px; border: 0; padding: 0 24px; background: none; color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.rk-submit > span:not(.sb-t) { position: absolute; top: 0; height: 52px; background: var(--gzhel-deep); }
.rk-submit .sb-l { left: 0; width: 26px; border-radius: 26px 0 0 26px; }
.rk-submit .sb-m { left: 25.5px; right: 25.5px; }
.rk-submit .sb-r { right: 0; width: 26px; border-radius: 0 26px 26px 0; }
.rk-submit .sb-t { position: relative; }
.rk-submit .sb-ok { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; opacity: 0; }
.rk-submit .sb-ok path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rk-submit:active { transform: scale(.98); }
.rk-done { margin: 0; font-size: 14px; color: var(--gzhel-deep); font-weight: 600; }
.rk-err { margin: 0; font-size: 14px; line-height: 1.5; color: #b3261e; }
.rk-err a { color: inherit; }
.rk-form [aria-invalid="true"] { border-color: #b3261e; }

/* ═════════ S8 · Где ставить ═════════ */
.rk-s8 { position: relative; z-index: 2; padding: 56px 16px 24px; }
.rk-arc { position: relative; margin-top: 10px; }
.arc-line, .arc-dot { display: none; }
.rk-medals { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
.rk-medals li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.md { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--navy); text-decoration: none; }
.md svg { position: absolute; inset: 0; width: 64px; height: 64px; overflow: visible; }
.md circle { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform-origin: 32px 32px; }
.md b { font: italic 500 22px/1 var(--serif); }
.md-ic { position: relative; width: 36px; height: 36px; }
.md-ic path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.md-t { font-size: 13px; line-height: 1.3; color: var(--ink); max-width: 13ch; }
.md-you .md { background: #fff; }
.md-you .md circle { stroke: var(--navy); stroke-width: 2; }
.md-you .md b { font-style: normal; font-family: var(--sans); font-weight: 400; font-size: 26px; }
.md-pin { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.md-you .md-t { font-weight: 600; color: var(--navy); }
.rk-s8-foot { margin-top: 26px; }

/* ═════════ S9 · Производитель ═════════ */
.rk-s9 { position: relative; z-index: 2; padding: 56px 16px 24px; }
.rk-lens { position: relative; width: 300px; height: 300px; margin: 0 auto 26px; }
.lens-ring { position: absolute; inset: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--navy); }
.lens-w { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; }
.lens-in { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.lens-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-facts2 { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 16px; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.rk-facts2 b { font-weight: 700; }

/* ═════════ S10 · Нам доверяют ═════════ */
.rk-s10 { position: relative; z-index: 2; padding: 56px 0 16px; }
.rk-s10 > h2, .rk-s10 > .rk-copy { padding: 0 16px; }
.rk-s10-hair { display: none; }
.rk-logos { margin-top: 18px; }
/* площадки ракоматов: родные цвета на белых плашках; пунктирные ячейки — резерв под новые договоры */
.rk-logo-set { margin: 0; padding: 0 16px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rk-logo-set li { display: grid; place-items: center; height: 88px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(29, 83, 122, .12); }
.rk-logo-set img { width: min(100%, var(--lw, 124px)); height: auto; }
.rk-logo-set .rk-logo-soon { background: none; box-shadow: none; border: 1px dashed rgba(29, 83, 122, .35); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ═════════ S11 · FAQ ═════════ */
.rk-s11 { position: relative; z-index: 2; padding: 56px 16px 24px; }
.rk-faq { border-top: 1px solid var(--line); }
.rk-faq details { border-bottom: 1px solid var(--hair); }
.rk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font: italic 500 22px/1.2 var(--serif); color: var(--ink); }
.rk-faq summary::-webkit-details-marker { display: none; }
.rk-faq summary i { position: relative; flex: none; width: 18px; height: 18px; }
.rk-faq summary i::before, .rk-faq summary i::after { content: ""; position: absolute; left: 0; top: 8.5px; width: 18px; height: 1.5px; background: var(--navy); }
.rk-faq summary i::after { transform: rotate(90deg); }
.rk-faq details[open] summary i { transform: rotate(45deg); }
.rk-faq .ans p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; max-width: 62ch; }

/* ═════════ S12 · Финал ═════════ */
.rk-s12 { position: relative; z-index: 2; padding: 64px 16px 56px; }
.rk-s12 h2 { text-align: center; }
.rk-fork { position: relative; margin-top: 18px; }
.fk-top { position: relative; height: 56px; }
.fk-medal { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--navy); transform-origin: 50% 50%; }
.fk-medal-in { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.fk-medal img { position: absolute; width: 170%; height: auto; max-width: none; left: -35%; top: -52%; }
.fk-dot { position: absolute; left: 50%; top: 46px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red); }
.fk-lines { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fk-lines path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.fk-head { position: absolute; z-index: 3; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--red); display: none; }
.rk-motion .fk-head { display: block; }
.fk-cards { position: relative; display: grid; gap: 22px; padding: 30px 0 0 40px; }
.fk-card { position: relative; padding: 76px 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--rim); }
.fk-card h3 { margin: 0 0 8px; }
.fk-card p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; }
.fk-card .sh-btn { width: 100%; }
.fk-fig { position: absolute; left: 18px; top: 18px; width: 48px; height: 48px; }
.fk-fig--target .mt { position: absolute; transform-origin: 50% 50%; }
.fk-fig--target .mt2 { inset: 0; }
.fk-fig--target .mt1 { inset: 13px; }
.fk-fig .mt svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fk-fig .mt circle { fill: none; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fk-fig--target i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.fk-fig--sq svg { width: 48px; height: 48px; display: block; overflow: visible; }
.fk-fig--sq path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.fk-fig--sq b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 10.5px/1 var(--mono); color: var(--navy); letter-spacing: .02em; }
.fk-quiet { margin: 22px 0 0; padding-left: 40px; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.fk-quiet a { color: var(--gzhel-deep); text-decoration: underline; text-decoration-color: var(--gzhel-light); text-underline-offset: 4px; }

/* ═════════ Начальные состояния режима движения (кадр 0 до первого прохода режиссёра) ═════════ */
.rk-motion .rk-fly { visibility: hidden; }              /* до первого кадра режиссёра (позиция ячейки считается скриптом) */
.rk-stage.is-ready .rk-fly { visibility: visible; }
.rk-motion .shutter { transform: scale(.02); }
.rk-motion .shutter-in { transform: scale(50); }
.rk-motion .head-birth { transform: scale(0); }
.rk-motion .r0 circle { stroke-dashoffset: 1; }
.rk-motion .rk-ring:not(.r0) .ring-intro { opacity: 0; }
.rk-motion .rk-ring { visibility: hidden; }                /* тарелку ставит скрипт: до первого кадра колец нет */
.rk-stage.is-ready .rk-ring { visibility: visible; }

.rk-motion .rk-node .disc { transform: scale(.01); }
.rk-motion .tg-ring { transform: scaleY(.5); opacity: .4; }
.rk-motion .tg-center { opacity: 0; }
.rk-motion .bp-lines path { stroke-dashoffset: 1; opacity: 1; }
.rk-motion .bp-dim path { stroke-dashoffset: 1; }
.rk-motion .bp-dim .tick { transform: scale(0); }
.rk-motion .sq-line path { stroke-dashoffset: 1; }
.rk-motion .rk-sq-volt i { transform: scaleX(0); }
.rk-motion .md circle { stroke-dashoffset: 1; transform: rotate(-30deg); }
.rk-motion .lens-w { transform: scale(.68); }
.rk-motion .lens-in { transform: scale(1.588); }
.rk-motion .fk-medal { transform: scale(.3); }
.rk-motion .fk-medal-in { transform: scale(3.333); }
.rk-motion .fk-lines path, .rk-motion .fk-fig--sq path { stroke-dashoffset: 1; }
.rk-motion .fk-fig--target .mt { transform: scaleY(.5); }

/* ═════════ ПК ≥ 1024 ═════════ */
@media (min-width: 1024px) {
  :root { --side: max(40px, calc(50vw - 620px)); --k: 1; }
  .rk-main h2 { font-size: clamp(40px, 3.4vw, 50px); }
  .rk-copy { font-size: 18px; line-height: 1.6; }

  .rk-a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 0 var(--side) 0 0; column-gap: 0; }
  .rk-a > :not(.rk-stage) { grid-column: 2; padding-left: 8px; }
  .rk-a-head { order: 1; padding-top: 140px; }
  .rk-a-cta { order: 2; }
  .rk-a-intro { order: 3; }
  .rk-product { order: 5; }
  .rk-a-tail { order: 6; height: 0; }
  .rk-a-head h1 { font-size: clamp(60px, 5.4vw, 78px); line-height: .98; }
  .rk-sub { font-size: 20px; line-height: 1.4; max-width: 30ch; color: var(--ink); }
  .rk-a-intro { padding-top: 88px; }
  .rk-a-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; }
  .rk-btn-main { width: auto; padding: 0 28px; }
  .rk-product { padding-top: 80px; }
  .rk-cell { scroll-margin-top: 200px; }

  .rk-stage { grid-column: 1; grid-row: 1 / span 7; align-self: start; margin: 0; box-shadow: none;
    --hs: calc(100lvh - var(--hdr)); --hv: var(--hs); --band: 64px;
    --sw: calc((100vw - var(--side)) * 7 / 12);
    --mh: min(calc((var(--hs) - 74px) / 1.1112), calc(var(--sw) * .78 / .7407));
    --r3: min(calc(var(--sw) * .86), calc(var(--hs) - var(--band) - 24px));
    --cy: calc((var(--hs) - var(--band)) / 2); }
  .rk-motion .rk-stage { top: var(--hdr); }
  .rk-band { padding: 6px 40px 10px; }
  .rk-tag { font-size: 12.5px; padding: 3px 6px; }
  .rk-tag .ph { display: none; } .rk-tag .pc { display: inline; }

  /* S3: 4 колонки под «волной», sticky на 1·H */
  .rk-s3 { padding: 0 var(--side); }
  .rk-motion .rk-s3 { height: calc(200lvh - var(--hdr)); }
  .rk-s3-stage { position: relative; height: calc(100lvh - var(--hdr)); min-height: 720px; }
  .rk-motion .rk-s3-stage { position: sticky; top: var(--hdr); }
  .rk-s3-head { padding-top: 84px; }
  .rk-s3-head h2 { margin-bottom: 6px; }
  .rk-wave { display: block; position: absolute; left: calc(-1 * var(--side)); width: 100vw; top: 186px; height: 80px; overflow: visible; }
  .rk-wave path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }
  .rk-wave .w-base { stroke: var(--line); }
  .rk-motion .rk-wave .w-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .rk-steps { position: absolute; left: 0; right: 0; top: 210px; margin: 0; display: grid; gap: 0;
    grid-template-columns: 29fr 270fr 18fr 270fr 18fr 270fr 90fr 270fr; }
  .rk-steps::before { display: none; }
  .rk-step { grid-row: 1; text-align: center; padding: 50px 6px 0; display: flex; flex-direction: column; align-items: center; }
  .rk-step:nth-child(1) { grid-column: 2; } .rk-step:nth-child(2) { grid-column: 4; } .rk-step:nth-child(3) { grid-column: 6; } .rk-step:nth-child(4) { grid-column: 8; }
  .rk-node { left: 50%; top: 0; margin-left: -16px; }
  .rk-node--4 { margin-left: -24px; top: -8px; left: 50%; }
  .rk-step h3 { font-size: 26px; margin-top: 14px; }
  .rk-step p { font-size: 15.5px; max-width: 30ch; }
  .rk-s3-head .rk-sub--s { max-width: none; font-size: 17px; color: var(--muted); }
  /* центр без transform: у CTA с 0 мс transform = none (контракт #9) */
  .rk-s3-btn { position: absolute; left: 0; right: 0; width: fit-content; top: 620px; margin: 0 auto; }
  .rk-static .rk-s3-btn, html:not(.rk-motion) .rk-s3-btn { position: relative; left: auto; right: auto; bottom: auto; display: inline-flex; margin: 440px 0 40px; }
  .rk-desc { display: block; }

  /* S4: список 5 колонок слева, мишень 7 колонок справа (sticky) */
  .rk-s4 { padding: 0 var(--side); }
  .rk-s4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; }
  .rk-s4-head { grid-column: 1; grid-row: 1; padding: 96px 0 0; }
  .rk-s4-body { grid-column: 1; grid-row: 2; padding: 0 0 80px; }
  .rk-map { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: auto; margin: 0; height: calc(100lvh - var(--hdr)); display: grid; place-items: center; }
  .rk-motion .rk-map { position: sticky; top: var(--hdr); }
  .rk-target { width: calc(620px * var(--k)); height: calc(620px * var(--k)); }
  .tg-ring span { font-size: 12px; }
  .tg-caption { font-size: 11.5px; }

  /* S5 */
  .rk-s5 { padding: 110px var(--side) 110px; }
  .rk-s5-disc { left: 60%; }
  .rk-s5-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 60px; align-items: center; }
  .rk-occasions li { font-size: 38px; }
  .rk-s5-photo { width: 420px; height: 420px; margin: 0 auto; }
  .rk-acts .sh-btn { padding: 0 26px; }

  /* S6: аппарат 5 колонок слева, ведомость 7 справа */
  .rk-s6 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; padding: 110px var(--side) 60px; }
  .rk-s6-head { grid-column: 2; grid-row: 1; }
  .rk-s6-fig { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; }
  .rk-s6-text { grid-column: 2; grid-row: 2; }
  .bp { width: 400px; margin: 10px 56px 40px 0; }

  /* S7: условия 5 колонок слева, форма 7 справа */
  .rk-s7 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; padding: 40px var(--side) 40px; align-items: start; }
  .rk-form { margin-top: 0; padding: 28px; position: sticky; top: 96px; }
  .rk-sq { width: 160px; height: 160px; }
  .rk-sq-num { font-size: 64px; }
  .rk-fields2 { grid-template-columns: 1fr 1fr; }

  /* S8: 12 медальонов на дуге-улыбке */
  .rk-s8 { padding: 90px var(--side) 40px; }
  .rk-s8-head { max-width: 760px; }
  .rk-arc { margin-top: 24px; }
  /* дуга раскладывается скриптом (класс .is-arc); без JS — ровная сетка 6 × 2, подписи не слипаются */
  .rk-arc.is-arc { height: 420px; margin-top: 0; }
  .rk-medals { grid-template-columns: repeat(6, 1fr); gap: 28px 12px; }
  .is-arc .rk-medals li:nth-child(even):not(.md-you) { flex-direction: column-reverse; margin-top: calc(-32px - var(--lh, 0px)); }
  .is-arc .arc-line { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .arc-line path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .6; }
  .rk-motion .arc-line path { stroke-dashoffset: 1; }
  .arc-dot { display: block; position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--navy); }
  .rk-static .arc-dot, html:not(.rk-motion) .arc-dot { display: none; }
  .is-arc .rk-medals { position: absolute; inset: 0; display: block; }
  .is-arc .rk-medals li { position: absolute; left: 0; top: 0; width: 104px; margin-left: -52px; margin-top: -32px; }
  .md-t { font-size: 13px; }
  .rk-s8-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }

  /* S9: линза 5 колонок слева, текст 7 справа */
  .rk-s9 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; align-items: center; padding: 100px var(--side) 40px; }
  .rk-lens { width: 460px; height: 460px; margin: 0 auto; }

  /* S10: тихо — ряд из 8 */
  .rk-s10 { padding: 90px var(--side) 20px; }
  .rk-s10 > h2, .rk-s10 > .rk-copy { padding: 0; }
  .rk-s10-hair { display: block; height: 1px; margin: 26px 0 0; background: var(--navy); opacity: .35; transform-origin: 50% 50%; }
  .rk-motion .rk-s10-hair { transform: scaleX(0); }
  .rk-logo-set { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0; gap: 14px; margin-top: 26px; }
  .rk-logo-set li { height: 112px; padding: 14px 18px; }

  .rk-s11 { padding: 90px var(--side) 20px; }
  .rk-faq { max-width: 900px; }
  .rk-faq summary { font-size: 26px; }

  .rk-s12 { padding: 110px var(--side) 90px; }
  .fk-top { height: 60px; }
  .fk-cards { grid-template-columns: 1fr 1fr; gap: 40px; padding: 110px 0 0; max-width: 1000px; margin: 0 auto; }
  .fk-card { padding: 30px 30px 28px; padding-top: 86px; text-align: center; }
  .fk-fig { left: 50%; margin-left: -24px; top: 22px; }
  .fk-card .sh-btn { width: auto; padding: 0 28px; }
  .fk-quiet { padding-left: 0; text-align: center; }
}
@media (min-width: 1024px) and (max-width: 1339px) { :root { --k: .82; } }
@media (min-width: 1024px) and (max-width: 1179px) { :root { --k: .72; } }
@media (min-width: 1340px) and (max-height: 840px) { :root { --k: .88; } }

/* ═════════ reduced-motion / без JS: ни одной анимации ═════════ */
@media (prefers-reduced-motion: reduce) {
  .rk-faq details[open] summary i { transform: rotate(45deg); }
  .rk-seg button { transition: none; }
}

/* ═════════ Итерация 1 (контракт §«Итерация 1») ═════════ */
body.rk { --muted: #2f4a57; }                         /* ≈ 8,6 : 1 на фоне: бледно-серого текста нет */
.rk-copy { font-size: 16px; }
.rk-note { font-size: 16px; line-height: 1.55; color: var(--muted); }
.rk-lead { font-size: 16px; }
.rk-sub { font-size: 16px; color: var(--ink); }

/* сцена A: фон — отдельный слой-вуаль. Кромка вуали идёт за медальоном и открывает текст блока 2 под сценой */
.rk-veil { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.rk-veil-in { position: absolute; left: 0; right: 0; top: -14px; height: calc(100% + 14px); background: linear-gradient(to bottom, rgba(245, 250, 253, 0), var(--bg) 14px); will-change: transform; }
/* растушёвка под сценой: строка, уходящая под нижнюю кромку, гаснет, а не режется о подписи выносок */
.rk-fade { position: absolute; z-index: 0; left: 0; right: 0; top: 100%; height: 32px; background: linear-gradient(to bottom, var(--bg), rgba(245, 250, 253, 0)); pointer-events: none; }
.rk-static .rk-fade, html:not(.rk-motion) .rk-fade { display: none; }
.rk-tag { font: 500 14px/1.25 var(--sans); letter-spacing: 0; color: var(--navy); }
.rk-tag b { font: inherit; letter-spacing: 0; color: inherit; }
.rk-motion .rk-fade { opacity: 0; }
.rk-cell-k { font-size: 16px; }
.rk-cell-n { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rk-ledger li { font-size: 16px; }

/* S3: узлы — бисерины на рельсе, шаг 4 — медальон с боксом; номеров и иконок нет */
.rk-node { left: -39px; top: 9px; width: 14px; height: 14px; }
.rk-node--4 { left: -52px; top: -4px; width: 40px; height: 40px; }   /* вера 01.10: ⌀48 касался края экрана (x = 0), ⌀40 — поле 4 px, центр тот же */
.rk-step h3 { margin-top: 0; }
.rk-step p { font-size: 16px; }

/* S4 */
.rk-city { font: 400 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.tg-caption { font: 500 13px/1.3 var(--sans); letter-spacing: 0; color: var(--navy); }
.rk-first { font-size: 16px; }
.rk-notify p { font-size: 16px; }

/* S5: гостья у ракомата вместо стокового покупателя */
.rk-s5-photo { width: 300px; height: 300px; }
.ph-in img { object-position: 50% 38%; }
.rk-acts { align-items: center; }
.rk-acts .rk-btn-text { min-height: 48px; }
@media (max-width: 1023px) { .rk-acts .rk-btn-text { flex: 1 1 100%; } }

/* S6 */
.rk-facts li { font-size: 16px; }

/* S7 */
.rk-sq-volt { font: 400 17px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* S8: кадр аппарата на площадке + список форматов через волоски */
.rk-s8-body { margin-top: 18px; }
.rk-s8-photo { position: relative; margin: 0 auto 26px; width: min(100%, 360px); aspect-ratio: 4 / 5; }
.s8-w { position: absolute; inset: 0; border-radius: 180px 180px 18px 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(29, 83, 122, .3); transform-origin: 50% 100%; }
.s8-in { display: block; width: 100%; height: 100%; transform-origin: 50% 60%; }
.s8-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-venues { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rk-venues li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--hair); font: italic 500 22px/1.2 var(--serif); color: var(--ink); }
.rk-venues li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); }
.rk-venues .v-you a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px;   /* палец: 44 px зоны, строка списка не растёт */ color: var(--gzhel-deep); text-decoration: underline; text-decoration-color: var(--gzhel-light); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.rk-venues .v-you::before { background: var(--red); box-shadow: none; }
.rk-venues .v-you i { display: none; }
.rk-motion .s8-w { transform: scale(.9); }
.rk-motion .s8-in { transform: scale(1.18); }

/* S9: цифры серифом, не моно-капсом */
.rk-facts2 { gap: 10px 28px; margin: 0 0 18px; font: 400 16px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.rk-facts2 span { display: grid; }
.rk-facts2 b { font: italic 500 40px/1 var(--serif); color: var(--navy); }

/* S11–S12 */
.fk-card p { font-size: 16px; }
.fk-quiet { font-size: 16px; }

@media (min-width: 1024px) {
  .rk-copy, .rk-note, .rk-cell-n, .rk-first, .rk-notify p, .fk-card p, .fk-quiet, .rk-lead, .rk-ledger li, .rk-facts li, .rk-perks--list { font-size: 18px; }
  .rk-sub { font-size: 21px; }
  .rk-step p { font-size: 17px; }
  .rk-faq .ans p { font-size: 18px; }
  .rk-fade { display: none; }
  .rk-tag { font-size: 15px; }
  .rk-node { left: 50%; top: 9px; margin-left: -7px; }
  .rk-node--4 { left: 50%; top: -12px; width: 56px; height: 56px; margin-left: -28px; }
  .rk-step { padding-top: 62px; }
  .rk-s5-photo { width: 440px; height: 440px; }
  .rk-s8-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; align-items: center; margin-top: 30px; }
  .rk-s8-photo { width: 100%; max-width: 460px; margin: 0; }
  .rk-venues { columns: 2; column-gap: 40px; border-top: 0; }
  .rk-venues li { break-inside: avoid; font-size: 25px; }
  .rk-facts2 b { font-size: 52px; }
}
/* шаг 4: медальон с боксом виден всегда (пустое кольцо до прихода точки читалось заглушкой); бисерины 1–3 заливаются точкой */
.rk-node--4 .disc, .rk-node--4 .medal { transform: none !important; }
.rk-node--4 .disc { background: #fff; }
@media (min-width: 1024px) {
  .rk-cell-k, .rk-city { font-size: 18px; }
  .rk-s4-head { padding-top: 56px; }
}

/* /motion-qa it1: подпись «в центре …» не должна пересекать МКАД, пока кольцо лежит тарелкой (scaleY .5).
   МКАД 46 % → 56 % (сплюснутый эллипс шире подписи), подпись ближе к точке: +10 px от центра. */
.tg-mkad { width: 56%; height: 56%; left: 22%; top: 22%; }
.tg-lab--mkad { left: calc(78% + 4px); }
.tg-caption { top: calc(50% + 10px); }

/* ═════════ Итерация 2 (контракт §«Итерация 2»): два слоя никогда не делят одну строку экрана ═════════ */
/* шапка на этой странице непрозрачна: текст не просвечивает ни сквозь плашку, ни над ней */
body.rk .sh-top { background: var(--bg); }
body.rk .sh-bar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* подписи выносок: только вместе с линиями (t_A 0.42–0.68), крупнее и без моно */
.rk-motion .rk-band { opacity: 0; }
.rk-tag { font: 500 15px/1.25 var(--sans); padding: 1px 4px; }
.rk-sub { font-size: 17px; }

/* кромка окна сцены (телефон): сплошной фон 14 px + волосок, без градиента; видна, пока сцена прилипла */
.rk-fade { height: 15px; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }

/* S3: кнопка стала текстовой ссылкой сразу под шагом 4 */
.rk-s3-btn { width: auto; margin-top: 18px; justify-content: flex-start; }

/* S4: в центре мишени стоит сам ракомат (рифма с героем); поднимается из-под «пола» центра, когда точка села */
.tg-stand { position: absolute; left: 50%; bottom: 50%; width: 30%; margin-left: -15%; aspect-ratio: 480 / 630; overflow: hidden; }
.tg-mach { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.rk-motion .tg-mach { transform: translateY(102%); }
.tg-caption { top: calc(50% + 12px); font: 500 14px/1.3 var(--sans); color: var(--ink); background: var(--bg); padding: 0 4px; }
.tg-lab { font: 500 13px/16px var(--sans); letter-spacing: 0; }
.sh-field-label { font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* S5: без голубой заливки, на фарфоре, граница волоском */
.rk-s5, .rk-s5.is-sky { background: transparent !important; }
.rk-s5-disc { display: none !important; }
.rk-s5-link { margin: 14px 0 0; }
.rk-s5-link .rk-btn-text { justify-content: flex-start; min-height: 48px; font-size: 16px; }

/* S10: без резервных пунктирных ячеек */
.rk-logo-soon { display: none !important; }

/* S12: вторая ветвь — сам ракомат на волоске пола, карточка прозрачная с волоском (асимметрия) */
.fk-card[data-branch="2"] { background: transparent; border-color: var(--line); padding-top: 112px; }
.fk-fig--sq { width: 60px; height: 84px; top: 16px; }
.fk-fig--sq img { position: absolute; left: 0; top: 0; width: 60px; height: 81px; display: block; }
.fk-fig--sq svg { position: absolute; left: -14px; top: 80px; width: 88px; height: 4px; overflow: visible; }
.fk-fig--sq path { stroke-width: 1.2; vector-effect: non-scaling-stroke; }

@media (min-width: 1024px) {
  .rk-tag { font-size: 16px; }
  .rk-sub { font-size: 21px; }
  /* S3 без sticky: высота по содержанию; заголовок по центру (путь точки к узлу 1 идёт левее него); ссылка под шагом 4 */
  .rk-motion .rk-s3 { height: auto; }
  .rk-s3-stage, .rk-motion .rk-s3-stage { position: relative; top: auto; height: auto; min-height: 0; padding-bottom: 24px; }
  .rk-s3-head { height: 210px; box-sizing: border-box; padding-top: 84px; text-align: center; }
  .rk-steps { position: relative; top: auto; left: auto; right: auto; }
  .rk-s3-btn, .rk-static .rk-s3-btn, html:not(.rk-motion) .rk-s3-btn { position: relative; top: auto; left: auto; right: auto; display: flex; justify-content: center;
    width: calc(270 / 1245 * 100%); margin: 20px 0 0 auto; }
  .rk-s4-head { padding-top: 40px; }
  .fk-card[data-branch="2"] { padding-top: 124px; }
  .fk-fig--sq { margin-left: -30px; top: 20px; }
  .tg-caption { font-size: 15px; }
}
/* кромка вуали: мягкость 6 px (кромка ставится на верх блока, строка целиком под сплошным фоном) */
.rk-veil-in { top: -6px; height: calc(100% + 6px); background: linear-gradient(to bottom, rgba(245, 250, 253, 0), var(--bg) 6px); }
/* «В ячейках сейчас»: без пунктирной рамки (резалась кромкой сцены «огрызком»); волосок сверху, как у ведомости */
.rk-cell { margin: 22px 0 6px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.rk-cell-t { margin: 4px 0 6px; }
/* ракомат в мишени S4 целиком внутри МКАД (высота < радиуса кольца) */
.tg-stand { width: 21%; margin-left: -10.5%; }
/* мини-мишень развилки растёт кругом (сплюснутая читалась «глазом») */
.rk-motion .fk-fig--target .mt { transform: scale(.4); }
/* стыки S5 → S6 без пустого поля (заливки S5 больше нет) */
.rk-s5 { padding-bottom: 40px; }
.rk-s6 { padding-top: 56px; }
@media (min-width: 1024px) { .rk-s5 { padding-bottom: 60px; } .rk-s6 { padding-top: 72px; } .tg-stand { width: 20%; margin-left: -10%; } }
.tr-drop path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rk-static .tr-drop, html:not(.rk-motion) .tr-drop { display: none; }
@media (min-width: 1024px) { .rk-desc { z-index: 6; } }   /* нить спуска идёт поверх отпущенной сцены A (её фон-вуаль) */
@media (min-width: 1024px) { .rk-s4 { z-index: 7; } }       /* спуск S3 → S4 уходит за ракомат в центре мишени, а не поверх него. /motion-qa it2: z у .rk-map не работал (.rk-s4 z 2 — свой контекст наложения, нить .rk-desc z 6 шла поверх ракомата) */
@media (min-width: 1024px) { html:not(.rk-motion) .rk-stage { margin-top: var(--hdr); } }   /* reduced-motion: аппарат не под шапкой */
@media (max-width: 1023px) { .rk-map { margin-top: 64px; } }   /* поле между строкой «Первые точки» и мишенью ≤ 25 % экрана */

/* ═════════ Итерация 3 (контракт §«Итерация 3»): кромка окна не режет строки, точка всегда на нити ═════════ */
/* навигация оболочки на этой странице: без моно-капса с разрядкой */
body.rk .sh-link, body.rk .sh-act { font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; }
body.rk .sh-foot-label { font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* окно сцены (телефон): вуаль = [0, B + ext], низ двигает скрипт (две обёртки со встречным сдвигом, только transform) */
.rk-veil { inset: auto; left: 0; right: 0; top: 0; height: calc(var(--hs) + 160px); will-change: transform; }
.rk-veil-in { top: 0; height: 100%; background: var(--bg); }
.rk-fade { top: 0; height: 1px; background: var(--line); box-shadow: none; will-change: transform, opacity; }
@media (min-width: 1024px) { .rk-veil { height: 100%; } }

/* нить от медальона в левом поле к узлу 1 (телефон) */
.rk-thread { position: fixed; z-index: 54; left: 23.25px; top: 0; width: 1.5px; height: 1px; background: var(--navy); transform-origin: 0 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.rk-static .rk-thread, html:not(.rk-motion) .rk-thread { display: none; }
@media (min-width: 1024px) { .rk-thread { display: none; } }

/* подписи выносок: крупнее и тёмные (судья it2: «бледные мелкие») */
.rk-tag { font: 500 16px/1.25 var(--sans); color: var(--ink); padding: 1px 5px; }
.rk-stage { --band: 54px; }
@media (min-width: 1024px) { .rk-stage { --band: 64px; } .rk-tag { font-size: 18px; } }

@media (max-width: 1023px) {
  /* блок 2 в колонке шагов S3 (x = 56): левое поле свободно для медальона, нити и точки */
  .rk-product { padding-left: 40px; padding-top: 12px; }
  .rk-a-tail { height: 8px; }
  .rk-s3 { padding-top: 24px; padding-bottom: 8px; }
  .rk-s4 { padding-top: 36px; }
  .rk-hang { display: none; }
  .rk-s3-btn { margin-top: 6px; min-height: 44px; }
}

/* S3 ПК: заголовок в правой колонке (по тексту A), шаги — бирки на нити волны */
.rk-hang { display: none; position: absolute; left: 6.25px; top: 26px; bottom: 2px; width: 1.5px; background: var(--navy); opacity: .45; transform-origin: 50% 0; }
@media (min-width: 1024px) {
  .rk-hang { display: block; }
  .rk-s3-head { height: 210px; padding-top: 64px; text-align: left; margin-left: calc((100vw - var(--side)) * 7 / 12 + 8px - var(--side)); }
  .rk-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; padding: 0 0 0 calc(29 / 1235 * 100%); align-items: start; }
  .rk-step, .rk-step:nth-child(n) { grid-column: auto; grid-row: 1; text-align: left; display: block; padding: calc(var(--dl, 0px) + 34px) 0 0 28px; }
  .rk-step:nth-child(2), .rk-step:nth-child(4) { --dl: 72px; }
  .rk-step p { max-width: 28ch; }
  .rk-node, .rk-node--4 { margin-left: 0; }
  .rk-node { left: 0; top: 9px; }
  .rk-node--4 { left: -25px; top: -16px; width: 64px; height: 64px; }
  .rk-step--4 .rk-hang { top: 52px; }
  .rk-motion .rk-hang { transform: scaleY(0); }
  .rk-s3-btn, .rk-static .rk-s3-btn, html:not(.rk-motion) .rk-s3-btn { position: relative; display: inline-flex; width: auto; margin: 10px 0 0; justify-content: flex-start; }
}

/* S4: аппарат на тарелке (МКАД, ЦКАД — эллипсы на полу), точка садится к его подножию */
.rk-target { --W: 280px; position: relative; width: var(--W); height: calc(var(--W) * .80 + 40px); margin: 0 auto; }
.tg-ring { position: absolute; transform-origin: 50% 50%; }
.tg-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tg-ring ellipse { fill: none; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tg-ckad { left: 0; top: calc(var(--W) * .4864); width: var(--W); height: calc(var(--W) * .30); }
.tg-ckad ellipse { opacity: .7; }
.tg-mkad { left: calc(var(--W) * .22); top: calc(var(--W) * .5524); width: calc(var(--W) * .56); height: calc(var(--W) * .168); }
.tg-stand { position: absolute; z-index: 2; left: calc(50% - var(--W) * .2296); bottom: auto; top: 0; width: calc(var(--W) * .4592); height: calc(var(--W) * .6364 + 2px); margin: 0; aspect-ratio: auto; overflow: hidden; }
.tg-mach { position: absolute; left: 0; top: calc(var(--W) * .0341); width: 100%; height: auto; }
.tg-center { z-index: 4; left: 50%; top: calc(var(--W) * .6364); }
.tg-lab { position: absolute; z-index: 3; margin: 0; padding: 1px 5px; font: 500 16px/20px var(--sans); color: var(--ink); background: var(--bg); white-space: nowrap; }
.tg-lab--mkad { left: calc(var(--W) * .7294 + 4px); top: calc(var(--W) * .6846 - 10px); }
.tg-lab--ckad { left: calc(var(--W) * .9096 + 4px); top: calc(var(--W) * .7224 - 10px); }
.tg-caption { z-index: 3; left: 50%; top: calc(var(--W) * .7864 + 8px); transform: translateX(-50%); font: 600 17px/1.3 var(--sans); color: var(--ink); background: none; padding: 0; }
.rk-motion .tg-ring { transform: scale(.35); opacity: 0; }
@media (max-width: 1023px) { .rk-map { width: auto; margin-top: 48px; } .rk-target { margin-left: calc(50% - 150px); } }
@media (min-width: 1024px) {
  .rk-target { --W: calc(540px * var(--k)); }
  .rk-s4 { grid-template-rows: 1fr auto auto 1fr; padding-top: 40px; padding-bottom: 40px; }
  .rk-s4-head { grid-row: 2; padding-top: 0; }
  .rk-s4-body { grid-row: 3; padding-bottom: 0; }
  .rk-map, .rk-motion .rk-map { grid-row: 1 / span 4; position: relative; top: auto; height: auto; padding: 56px 0; align-self: center; }
}

/* S4 текст формы: крупнее и темнее */
.sh-field-label { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.sh-input::placeholder { color: #4f6873; }

/* S6: числа фактов без моно */
.rk-facts b { font: 600 1em/1 var(--sans); letter-spacing: 0; color: var(--navy); }

/* S12: без карточек. Ветвь 1 → бусина у «Забрать раков» и navy-кнопка; ветвь 2 → аппарат на волоске пола и текстовая ссылка */
.fk-cards { gap: 40px; }
.fk-card, .fk-card[data-branch="2"] { padding: 0; background: none; border: 0; border-radius: 0; text-align: left; }
.fk-card h3 { margin: 0 0 8px; }
.fk-fig { position: absolute; }
.fk-fig--target { left: -39px; top: 0; width: 14px; height: 28px; }
.fk-fig--target i { position: absolute; left: 0; top: 7px; width: 14px; height: 14px; margin: 0; border-radius: 50%; background: var(--red); transform-origin: 50% 50%; }
.rk-motion .fk-fig--target i { transform: scale(0); }
.fk-card[data-branch="2"] { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; align-items: start; padding-top: 0; }
.fk-fig--sq { position: relative; left: auto; top: auto; margin: 0; width: 84px; height: 116px; }
.fk-fig--sq img { position: absolute; left: 0; top: 0; width: 84px; height: auto; }
.fk-fig--sq svg { position: absolute; left: -8px; top: 113px; width: 100px; height: 4px; }
.fk-txt .rk-btn-text { justify-content: flex-start; min-height: 44px; font-size: 16px; }
@media (min-width: 1024px) {
  .fk-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 72px; padding: 120px 0 0 40px; max-width: 1040px; align-items: start; }
  .fk-card, .fk-card[data-branch="2"] { padding: 0; text-align: left; }
  .fk-fig--target { left: -32px; margin-left: 0; top: 2px; }
  .fk-card[data-branch="2"] { grid-template-columns: 120px minmax(0, 1fr); column-gap: 28px; padding-top: 0; }
  .fk-fig--sq { margin: -40px 0 0; left: auto; width: 120px; height: 166px; }
  .fk-fig--sq img { width: 120px; }
  .fk-fig--sq svg { left: -12px; top: 162px; width: 144px; }
  .fk-card .sh-btn { width: auto; }
}
.rk-motion .tg-lab { opacity: 0; }
.rk-motion .tg-mach { transform: none; }

/* итерация 3, S7: пустой квадрат читался заглушкой. Теперь это плитка пола 1,5 м² в перспективе, на ней стоит аппарат */
.sq-line path { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.sq-mach { position: absolute; z-index: 1; left: 50%; bottom: 14%; height: 84%; width: auto; transform: translateX(-50%); }
.sq-head { z-index: 2; background: var(--red); }
.rk-static .sq-head, html:not(.rk-motion) .sq-head { display: none; }
@media (max-width: 1023px) { .rk-s6 { padding-top: 24px; } }

/* /motion-qa it3: дуга ЦКАД задевала верх-лево строки «ЦКАД» (8 px видимого контура в строке, Pixel 7 и у «МКАД»).
   Плашка шире: дуга уходит под фон на 3 px дальше от букв, положение текста то же */
.tg-lab { padding: 4px 7px; margin: -3px 0 0 -2px; }

/* ═════════ Финальная доводка (контракт §«Финальная доводка», 2026-10-01) ═════════ */
/* 1. Этикетка: пункты пронумерованы (номер — серифом navy, текст с 0 мс). Телефон — поток коротких строк, ПК — строки-узлы веера */
.rk-label { counter-reset: lb; }
.rk-label li { position: relative; counter-increment: lb; }
.rk-label li::before { content: counter(lb); font: 600 16px/1 var(--sans); color: var(--navy); }
@media (max-width: 1023px) {
  .rk-label { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
  .rk-label li { display: inline-flex; align-items: baseline; gap: 7px; padding: 0; border: 0; white-space: nowrap; font-size: 16px; line-height: 1.4; }
  .rk-a .rk-lead { margin: 14px 0 6px; }
}
@media (min-width: 1024px) {
  .rk-label li { padding-left: 38px; }
  .rk-label li::before { position: absolute; left: 4px; top: 50%; margin-top: -11px; width: 24px; line-height: 22px; text-align: center; }
}
/* веер выносок к этикетке медальона (ПК): fixed-слой под шапкой; рисует режиссёр (renderLabel) */
.rk-lbl, .rk-lbl-knots { display: none; }
@media (min-width: 1024px) {
  .rk-motion .rk-lbl { display: block; position: fixed; z-index: 6; left: 0; top: 0; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
  .rk-lbl path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .rk-motion .rk-lbl-knots { display: block; position: fixed; z-index: 6; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
  .rk-lbl-knots i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--navy); transform: scale(0); }
}

/* 3. S7 ПК: тезис + 4 коротких пункта + текст рядом с формой; без ромбов */
.rk-s7-thesis { margin: 0 0 18px; font: italic 500 23px/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
.rk-s7-perks .rk-perks--list { gap: 0; margin: 4px 0 22px; padding: 0; border-top: 1px solid var(--line); }
.rk-s7-perks .rk-perks--list li { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.4; }
.rk-s7-perks .rk-perks--list li::before { display: none; }
.rk-s7-perks h3 { margin-top: 8px; }
@media (min-width: 1024px) {
  .rk-s7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head perks" "left form"; column-gap: 60px; row-gap: 36px; padding-top: 56px; }
  .rk-s7-head { grid-area: head; }
  .rk-s7-perks { grid-area: perks; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: start; padding-top: 10px; }
  .rk-s7-perks .rk-sq-row { grid-row: 1 / span 2; grid-template-columns: auto; margin: 0; }
  .rk-s7-perks .rk-sq-row .rk-sq { grid-row: auto; }
  .rk-s7-perks h3 { margin: 0 0 10px; }
  .rk-s7-perks .rk-perks--list { grid-template-columns: 1fr 1fr; column-gap: 28px; margin: 0; }
  .rk-s7-perks .rk-perks--list li { font-size: 19px; padding: 14px 0; }
  .rk-s7-left { grid-area: left; }
  .rk-s7 .rk-form { grid-area: form; }
  .rk-s7-thesis { font-size: 30px; line-height: 1.25; margin: 20px 0 0; }
  .rk-sq-row { column-gap: 22px; }
}

/* 5. S5 и S8: портретная рамка 4 : 5 со скруглением, аппарат не режется кругом / аркой */
.rk-s5-photo { width: 288px; height: 360px; }
.ph-in { border-radius: 24px; }
.ph-in img { object-position: 50% 0; }
.s8-w { border-radius: 24px; }
@media (min-width: 1024px) { .rk-s5-photo { width: 400px; height: 500px; } }

/* 8. стыки секций ПК: пустые полосы ≤ 0.15·H */
@media (min-width: 1024px) {
  .rk-s5 { padding-top: 80px; padding-bottom: 40px; }
  .rk-s6 { padding-top: 40px; }
  .rk-s8 { padding-top: 64px; padding-bottom: 24px; }
  .rk-s9 { padding-top: 56px; padding-bottom: 16px; }
  .rk-s10 { padding-top: 40px; } .rk-s11 { padding-top: 64px; }
  .rk-s12 { padding-top: 64px; padding-bottom: 48px; }
}

/* /motion-qa финала: на телефоне плашка «ЦКАД» накрывала «Д» у «МКАД» (рамки ≈ 10 × 16 px). «ЦКАД» опускается под рамку «МКАД» */
@media (max-width: 1023px) { .tg-lab--ckad { top: calc(var(--W) * .7224 + 10px); } }

/* ═════════ Правки владелицы 01.10 (контракт §«Правки владелицы 01.10»): её картинки крупно, листаются пальцем ═════════ */
/* 6. мишени паттерном (образец Натальи, inbox #108): светло-голубая и кобальтовая, тонко; только в полосах между блоками и по краям */
.rk-motif, .rk-acc--posters, .rk-s11 { --tgt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='56' viewBox='0 0 176 56'%3E%3Cg fill='none' stroke='%23b5daeb' stroke-width='5' opacity='.6'%3E%3Ccircle cx='44' cy='28' r='19.5'/%3E%3Ccircle cx='44' cy='28' r='9.5'/%3E%3C/g%3E%3Ccircle cx='44' cy='28' r='3.5' fill='%23b5daeb' opacity='.6'/%3E%3Cg opacity='.4'%3E%3Cg fill='none' stroke-width='5'%3E%3Ccircle cx='132' cy='28' r='19.5' stroke='%232f66c0'/%3E%3Ccircle cx='132' cy='28' r='14.5' stroke='%23b5daeb'/%3E%3Ccircle cx='132' cy='28' r='9.5' stroke='%232f66c0'/%3E%3C/g%3E%3Ccircle cx='132' cy='28' r='7' fill='%23b5daeb'/%3E%3Ccircle cx='132' cy='28' r='3.5' fill='%232f66c0'/%3E%3C/g%3E%3C/svg%3E"); }
.rk-motif { --step: 176px; position: relative; z-index: 2; height: 56px; margin: 12px 0; overflow: hidden; pointer-events: none; }
.rk-motif-track { position: absolute; left: 0; top: 0; width: calc(100% + var(--step)); height: 100%; background: var(--tgt) 0 50% / var(--step) 56px repeat-x; will-change: transform; }
@media (min-width: 1024px) {
  .rk-motif { --step: 252px; height: 80px; margin: 20px 0; }
  .rk-motif-track { background-size: var(--step) 80px; }
}

/* 1. S4: карточка реальной точки вместо формы «Сообщить об открытии» */
.rk-point { scroll-margin-top: 88px; margin-top: 28px; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(29, 83, 122, .16); }
.pt-photo { margin: 0; aspect-ratio: 720 / 538; background: var(--mist); }
.pt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-body { padding: 16px 18px 18px; }
.pt-mark, .s8-mark { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 600 15px/1.2 var(--sans); color: var(--navy); }
.pt-mark i, .s8-mark i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(233, 27, 26, .14); }
.rk-point h3 { margin: 0 0 4px; }
.pt-addr { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) { .rk-point { margin-top: 30px; } .pt-body { padding: 18px 22px 22px; } .pt-addr { font-size: 18px; } }

/* 7. вставки-акценты: её стол и постеры крупно между блоками (наплыв кадра — только transform внутри рамки) */
.rk-acc { position: relative; z-index: 2; margin: 0; }
.rk-acc .ac-in { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.rk-acc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-motion .rk-acc .ac-in { transform: scale(1.08); }
.rk-acc--feast { margin-top: 8px; aspect-ratio: 4 / 5; overflow: hidden; background: #1c2227; }
.rk-acc--posters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 48px 16px 0; }
.ac-poster { margin: 0; aspect-ratio: 720 / 1290; overflow: hidden; border-radius: 16px; background: #ece5dc; }
@media (min-width: 1024px) {
  .rk-acc--feast { margin: 24px var(--side) 0; aspect-ratio: 2 / 1; border-radius: 24px; }
  .rk-acc--posters { grid-template-columns: repeat(2, 340px); justify-content: center; gap: 28px; padding: 72px var(--side) 0; }
  /* по краям постеров — мишени паттерном: широкий шаг, низкий контраст, текста здесь нет */
  .rk-acc--posters::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: 240px; margin-top: -84px;
    background: var(--tgt) 50% 0 / 252px 80px repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 36%, transparent 64%, #000 70%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 36%, transparent 64%, #000 70%, #000 100%); }
}

/* 3. S6: карусель её кадров вместо чертежа. Телефон — рамки 4 : 5, видна кромка следующего кадра; ПК — кадры по своей пропорции */
.rk-gal { margin: 18px -16px 22px; }
.gl-track { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gl-track::-webkit-scrollbar { display: none; }
.gl-track::after { content: ""; flex: 0 0 6px; }
.gl-track:focus-visible { outline: 2px solid var(--gzhel); outline-offset: 4px; }
.gl-slide { flex: none; margin: 0; width: min(82vw, 420px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--mist); scroll-snap-align: start; }
.gl-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.gl-nav { display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.gl-arr { display: none; }
.gl-dots { display: flex; }
.gl-dots button { display: grid; place-items: center; width: min(44px, calc((100vw - 24px) / 8)); height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
/* точка; текущий кадр — мини-мишень (точка red в кольце navy) */
.gl-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 83, 122, .32); transition: background .3s var(--soft-io), box-shadow .3s var(--soft-io), transform .3s var(--soft-io); }
.gl-dots [aria-current="true"] i { background: var(--red); transform: scale(1.12); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--navy); }
.gl-dots button:focus-visible { outline: 2px solid var(--gzhel); outline-offset: -6px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .gl-dots i { transition: none; } }
@media (min-width: 1024px) {
  .rk-s6 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rk-s6-head { grid-column: 1 / -1; grid-row: 1; }
  .rk-gal { grid-column: 1 / -1; grid-row: 2; margin: 18px calc(-1 * var(--side)) 34px; }
  .gl-track { gap: 16px; padding: 0 var(--side); scroll-padding-inline: var(--side); }
  .gl-slide { width: auto; height: clamp(380px, calc(100vh - 300px), 560px); aspect-ratio: var(--ar); border-radius: 22px; }
  .gl-nav { justify-content: flex-start; gap: 6px; margin-top: 16px; padding: 0 var(--side); }
  .gl-arr { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(29, 83, 122, .3); color: var(--navy); cursor: pointer; }
  .gl-arr svg { width: 22px; height: 22px; }
  .gl-arr path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .gl-arr[aria-disabled="true"] { opacity: .35; cursor: default; }
  .gl-dots button { width: 44px; }
  .rk-s6-text { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 60px; }
  .s6-facts h3 { margin-top: 0; }
}

/* 2. S8: реальная точка целиком, 4 : 3, на всю ширину блока (телефон) и широко (ПК); пометка «Первая точка» */
.rk-s8-photo { width: 100%; max-width: none; aspect-ratio: 720 / 538; margin: 0 0 22px; }
.s8-w { border-radius: 20px; }
.s8-mark { position: absolute; z-index: 2; left: 12px; bottom: 12px; margin: 0; padding: 9px 13px 9px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(23, 49, 61, .14); }
@media (min-width: 1024px) {
  .rk-s8-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .rk-s8-photo { width: 100%; max-width: none; margin: 0; }
  .s8-w { border-radius: 24px; }
  .s8-mark { left: 18px; bottom: 18px; font-size: 16px; }
  .rk-venues { columns: 1; border-top: 1px solid var(--line); }
  .rk-venues li { font-size: 22px; padding: 9px 0 9px 24px; }
}

/* 4. S9: её широкий кадр вместо круга; телефон — от края до края 4 : 3, ПК — во всю ширину колонки */
.rk-chef { position: relative; margin: 0 -16px 24px; aspect-ratio: 4 / 3; }
.ch-w { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; }
.ch-in { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.ch-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-motion .ch-w { transform: scale(.94); }
.rk-motion .ch-in { transform: scale(1.149); }
@media (min-width: 640px) { .rk-chef { aspect-ratio: 2560 / 1086; } }
@media (min-width: 1024px) {
  .rk-s9 { display: block; }
  .rk-chef { margin: 0 0 40px; }
  .ch-w { border-radius: 24px; }
  .rk-s9-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; align-items: start; }
  .rk-s9-text > h2 { grid-column: 1; grid-row: 1; margin-top: 0; }
  .rk-s9-text > .rk-facts2 { grid-column: 1; grid-row: 2 / span 3; }
  .rk-s9-text > .rk-copy { grid-column: 2; }
}

/* 5. S10 «Наши партнёры»: 6 площадок (+ Одинцовское подворье, Гиперлента): телефон 2×3, ПК 3×2, широкий ПК 6 в ряд */
.rk-logo-set li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .rk-logo-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-logo-set li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1280px) {
  .rk-logo-set { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 6. ПК: мишени по правому краю FAQ (поле справа от колонки вопросов пустое) */
@media (min-width: 1280px) {
  .rk-s11::after { content: ""; position: absolute; z-index: -1; right: var(--side); top: 150px; bottom: 30px; width: 240px; pointer-events: none;
    background: var(--tgt) 0 0 / 240px 76px repeat-y;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
}

/* QA 01.10: телефон в нижней строке не рвётся «888-/05-88» на 390 */
.fk-quiet a[href^="tel:"] { white-space: nowrap; }

/* правки 01.10: «by THE RAKI» мелко (бренд-сборка), подписка на Telegram в карточке точки */
.rk-a-head h1 .h1-by { display: block; margin-top: 8px; font: 600 15px/1.2 var(--sans); font-style: normal; letter-spacing: .01em; text-transform: none; color: var(--gzhel-deep, #1d537a); }
@media (min-width: 1024px) { .rk-a-head h1 .h1-by { font-size: 17px; margin-top: 12px; } }
.pt-tg { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 14px; padding: 0 22px; border-radius: 999px; background: var(--gzhel-deep, #1d537a); color: #fff; font: 600 16px/1 var(--sans); text-decoration: none; }
.pt-tg:focus-visible { outline: 2px solid var(--gzhel-deep, #1d537a); outline-offset: 3px; }
.pt-tg-note { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); }

/* QA 02.10, узкие телефоны: подписи выносок 2 × 2 не помещались в ширину меньше ~373 px (колонки по min-content строк без переноса).
   На 360 «прозрачный контейнер» и «фирменный рассол» сливались в одну строку, на 320 «герметично» и «рассол» резались краем
   и страница уезжала вбок. Кегль идёт от ширины экрана с зазором 12 px между колонками; с 390 px (iPhone 13 и шире) всё как было */
@media (max-width: 389.98px) {
  .rk-tag { font-size: clamp(12px, calc(4.85vw - 2.7px), 16px); }
}
/* QA 02.10, 320 px: «ЦКАД» на карте выходила за правый край на 5 px (прокрутка вбок и в статике) */
@media (max-width: 339.98px) {
  .tg-lab { font-size: 14px; padding: 4px 5px; }
}

/* 02.10, владелица (скрин «Заберите бокс»): «заменить либо сделать круг больше, чтобы полностью было видно ведро с раками;
   внизу то же самое». Бокс в круге целиком, на белом, круги больше. Шаг 4 — только телефонная раскладка (на ПК от кромки
   бокса в медальоне идёт гребёнка линий, кадр там не трогаем); финал — везде. Рельс шагов на телефоне сдвинут на 12 px вправо,
   чтобы круг ⌀64 не упёрся в край экрана (центр рельса x = 36). */
@media (max-width: 1023px) {
  .rk-s3 { padding-left: 68px; }
  .rk-node--4 { left: -64px; top: -16px; width: 64px; height: 64px; }
  .rk-node--4 .medal { background: #fff; }
  .rk-node--4 .medal img { width: 64%; left: 18%; top: 12%; }
}
.fk-top { height: 100px; }
.fk-medal { width: 72px; height: 72px; margin-left: -36px; background: #fff; }
.fk-medal img { width: 64%; left: 18%; top: 12%; }
.fk-dot { top: 90px; }

/* 02.10, владелица: «страница ракомат ок… всё равно фон нужно чуток добавить» — лёгкий гжель-узор, как на её визитке
   (тот же pattern-tile, что в веере), видно ~10 %: белая вуаль 0,9 поверх узора */
body.rk { background-image: linear-gradient(rgba(245, 250, 253, .9), rgba(245, 250, 253, .9)), url("../../shell/pub/ornaments/pattern-tile.webp"); background-size: auto, 640px 640px; }
@media (min-width: 1024px) { body.rk { background-size: auto, 900px 900px; } }
/* 03.10: ассортимент по документу владелицы (#32, #33) — строки «что / значение» внутри карточки «В ячейках сейчас» */
.rk-assort { display: grid; gap: 10px; margin: 14px 0 16px; }
.rk-assort > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--hair, rgba(23, 49, 61, .12)); }
.rk-assort dt { font: 600 14px/1.4 var(--sans); color: var(--navy); }
.rk-assort dd { margin: 0; font: 400 16px/1.45 var(--sans); color: var(--ink); }
@media (min-width: 1024px) { .rk-assort dd { font-size: 17px; } }
.rk-assort .nw { white-space: nowrap; }