/* Только для страницы заказчика 9737 /test-live/ (копия /variant/ с 9300 — tools/publish-client-live.mjs подключает этот
   файл после variant.css). 9300 не меняется.
   04.11, владелец: шрифты — из папки «ТЦ XL\ШРИФТЫ» (поиграть, нынешний не нравится); на телефоне текст плохо читается —
   плашки, как на numeeed.ru (матовое стекло, внутри текст); девушка и логотип на телефоне — чуть меньше. */

/* ── шрифты: три сочетания, ?font=1|2|3 (по умолчанию — 1) ────────────────────────────────────────────────────────
   В каждом файле одно начертание: заголовочный шрифт отдаётся на все толщины (без поддельного жирного), у текстового
   обычное — до 500, жирное (подписи, пункты, кнопки) — жирный заголовочный.
   1 — Zurich Bold + AV Fontimer: чистый строгий гротеск и чёткий текст, лучше всего читается на телефоне
   2 — Helios Cond Bold + Lorenzo Sans: узкие заголовки (на телефоне девушке больше места), плотный текст
   3 — Zurich Bold + Geologica: заголовки как в 1, текст светлее и воздушнее */
@font-face { font-family: 'DK Head Z'; src: url(fonts/zurich-bold.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DK Head H'; src: url(fonts/helios-cond-bold.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DK Text 1'; src: url(fonts/av-fontimer.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'DK Text 1'; src: url(fonts/zurich-bold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'DK Text 2'; src: url(fonts/lorenzo-sans-medium.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'DK Text 2'; src: url(fonts/helios-cond-bold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'DK Text 3'; src: url(fonts/geologica.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'DK Text 3'; src: url(fonts/zurich-bold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }

/* 05.11 — шрифты из папки владельца «ШРИФТЫ ДК» (tools/prep_fonts.py): Patefon (только жирный — заголовки и всё жирное),
   Chetty (только обычный — текст), TikTok Sans Light (текст светлее). Educational Gothic (детские буквы «в», «т» —
   не для клиники) и Gehaks (только заглавные с засечками, нет № и ₽) не взяты */
@font-face { font-family: 'DK Head P'; src: url(fonts/patefon-bold.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DK Head C'; src: url(fonts/chetty.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DK Text 4'; src: url(fonts/chetty.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'DK Text 4'; src: url(fonts/patefon-bold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'DK Text 5'; src: url(fonts/tiktok-sans-light.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: 'DK Text 5'; src: url(fonts/patefon-bold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }

html[data-font="1"] { --font: 'DK Text 1', system-ui, -apple-system, sans-serif; --head: 'DK Head Z'; }
html[data-font="4"] { --font: 'DK Text 4', system-ui, -apple-system, sans-serif; --head: 'DK Head P'; }
html[data-font="5"] { --font: 'DK Text 5', system-ui, -apple-system, sans-serif; --head: 'DK Head C'; }
html[data-font="6"] { --font: 'DK Text 5', system-ui, -apple-system, sans-serif; --head: 'DK Head P'; }
/* ширина строки «Чистая и здоровая кожа» в кеглях (замер в браузере): у Patefon — 12,1, у Chetty — 11,7 (прежний — 11,4);
   по ней кегль заголовка на компьютере, чтобы строка заняла колонку и не вышла за плашку */
html[data-font="4"], html[data-font="6"] { --tr: 12.25; }
html[data-font="5"] { --tr: 11.8; }
html[data-font="4"] .th-title, html[data-font="6"] .th-title { letter-spacing: -0.01em; line-height: 1.04; }
/* 05.11, владелец: «текст „Чистая и здоровая кожа…“ — чуть менее жирным, а текст снизу с логотипами — чуть-чуть совсем
   более жирным». У Patefon одно начертание (жирное) — заголовок первого экрана набран фирменным Involve SemiBold (гайдлайн
   «Люстры», формы букв как у Patefon, но легче); пункты — тот же шрифт, на волос плотнее (тонкая обводка цветом текста) */
html[data-font="4"] .variant .th-title, html[data-font="6"] .variant .th-title { font-family: 'Involve', var(--font); font-weight: 600; }
/* 05.11, владелец: «текст „Чистая и здоровая кожа…“ сделай полностью синим — тем, который в нём уже есть» (как «кожа»,
   «10 визитов») */
.variant .th-title { color: var(--blue); }
.variant .th-list li { -webkit-text-stroke: 0.3px currentColor; }
html[data-font="2"] { --font: 'DK Text 2', system-ui, -apple-system, sans-serif; --head: 'DK Head H'; }
html[data-font="3"] { --font: 'DK Text 3', system-ui, -apple-system, sans-serif; --head: 'DK Head Z'; }
.th-title, .h2, .zoom-n { font-family: var(--head), var(--font); }
.th-title { letter-spacing: -0.015em; line-height: 1.02; }
html[data-font="2"] .th-title { letter-spacing: 0; line-height: 1; }
/* Helios узкий (строка «Чистая и здоровая кожа» — 10,1 кегля против 11,4 у прежнего) — на компьютере крупнее, на всю колонку
   (колонка — без полей плашки, --cp) */
@media (min-width: 761px) { html[data-font="2"] .th-title { font-size: clamp(36px, min(calc((var(--col-w, 46vw) - 2 * var(--cp, 0px)) / 10.1), 9vh), 104px); } }
.manifest-text { letter-spacing: -0.01em; }
.th-list li { font-size: clamp(16px, 1.9vh, 18px); }

.vr-card { display: none; }

/* ── компьютер (05.11, заказчик): текст первого экрана — тоже на стеклянной плашке, как «Подход»; стекло обеих — как на
   телефоне (тёплый белый 0,36 → 0,5, лёгкое размытие 4 px: прозрачнее прежнего стекла 0,7 / 24 px) ───────────────── */
@media (min-width: 761px) {
  /* плашка — слой под текстом (::before): проявляется вместе с текстом на входе (--hc, variant.js) и тает вместе с ним
     при прокрутке (--hv — уход первого экрана); колонка та же, текст внутри — с полями --cp, кегль заголовка — от колонки
     без полей */
  .variant .th-copy { --cp: clamp(28px, 2.6vw, 44px); padding: var(--cp); }
  .variant .th-copy::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 28px;
    opacity: calc(var(--hc, 1) * var(--hv, 1)); }
  .variant .th-title { font-size: clamp(36px, min(calc((var(--col-w, 46vw) - 2 * var(--cp)) / var(--tr, 11.4)), 8vh), 96px); }
  .variant .th-copy::before, .variant .manifest.glass {
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
    box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  /* 09.11 ночь, владелец (компьютер): «логотип в хедере пусть сразу будет обведён формой» — плашка у знака с первого экрана,
     как после прокрутки (раньше — только с .scrolled) */
  .variant .brand { background-color: rgba(255, 255, 255, 0.58); border-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 #fff, 0 10px 30px -18px rgba(22, 41, 74, 0.45); }
  /* 09.11 ночь, владелец: «текст „Чистая и здоровая кожа…“ выбивается из общей канвы, и только он; цвет нормальный, но не
     смотрится именно здесь — сделай читабельным, но не борщи, без белых обводок». Он единственный был набран лёгким
     Involve и целиком одним синим — остальные заголовки сайта: фирменный Patefon в два тона (глубокий + акцент). Теперь так
     же, в той же синей гамме: строка — глубоким синим (--blue-dd), «кожа» и «10 визитов!» — фирменным синим. Без обводок */
  html[data-font="4"] .variant .th-title, html[data-font="6"] .variant .th-title { font-family: var(--head), var(--font); font-weight: 700; }
  .variant .th-title { color: var(--blue-dd); letter-spacing: -0.012em; line-height: 1.06; --tr: 13.4; }
  .variant .th-title .acc { color: var(--blue); }
  /* слова «Подхода» — без размытия: проявляются прозрачностью (variant.js; размытие ~40 слоёв на каждом кадре давало
     подтормаживание перехода 1→2 на встроенной видеокарте) */
  .variant .manifest-text .w { filter: none; will-change: opacity; }
}

/* наезд к порам — один свайп (04.11, заказчик: «слишком много крутить до приближения»): прокрутка под наезд — 0,6 экрана
   (было 3 на компьютере и 2,6 на телефоне), сам наезд доигрывает плавно (variant.js, poresCam); на телефоне «Подход»
   закреплён на 1,2 экрана прокрутки (было 1,6) — от текста до наезда меньше пустой прокрутки. Короче не надо: по нему
   идёт её движение рукой к вороту, при 0,9 экрана кадры быстрее и распаковка отставала заметнее (замер 04.11) */
.vr-pores { height: 60vh; }
/* макро её щеки (variant.js — updateFace): снимок, стоящий ровно на щеке в кадре видео, — в слое во весь экран, без
   масштаба слоя; снимок только уменьшается до своего места (края самого снимка растворяются в видео).
   06.11 вечер: был круг 600×600 с мягкой маской, растянутый CSS-масштабом ×4–5, — Safari растягивал уже нарисованную
   маленькую картинку, и на iPhone щека была мыльной (Chrome перерисовывает под итоговый размер — в эмуляторе было резко).
   Маска была не видна (её непрозрачная середина доходила до дальнего угла экрана) — убрана */
.vr-flens { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; visibility: hidden;
  pointer-events: none; will-change: opacity; }
.vr-flens-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.vr-flens-in img { display: block; width: 1254px; height: 1254px; max-width: none; }
/* свет лампы врача (как в «Свете»): тёплое пятно мягким светом поверх кожи — ходит у щеки, на компьютере за курсором;
   края экрана темнеют. Только сдвиг и прозрачность (updateLamp) */
.vr-vig { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; will-change: opacity;
  background: radial-gradient(125% 100% at 50% 46%, rgba(38, 20, 10, 0) 42%, rgba(38, 20, 10, 0.34) 78%, rgba(30, 15, 8, 0.62) 100%); }
.vr-lamp { position: fixed; left: 0; top: 0; z-index: 1; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none;
  opacity: 0; visibility: hidden; will-change: transform, opacity; mix-blend-mode: soft-light;
  background: radial-gradient(circle closest-side, rgba(255, 150, 70, 0.95) 0%, rgba(255, 128, 52, 0.55) 34%, rgba(255, 112, 40, 0.18) 66%, rgba(255, 100, 30, 0) 100%); }
@media (max-width: 760px) {
  /* 05.11 вечер, владелец: «после того как форма „Первый шаг“ появилась, зачем три скролла до следующего блока» — наезд
     и плашка играют по времени (и держит фиксация, variant.js scrollLock), длина разделов им не нужна: 60 → 40svh */
  .vr-pores { height: 40svh; }
  /* 05.11 (заказчик: «между 2 и 3 блоком при скролле всё чуть быстрее»): «Подход» закреплён на 0,95 экрана прокрутки
     (было 1,2) — от прочитанного текста до наезда ~0,76 экрана вместо ~0,96; движение руки к вороту идёт по тому же
     отрезку (78 % закрепления), чуть быстрее; сам наезд — 1,8 с (было 2,2; variant.js, zoomT) */
  .variant[data-flow="plates"] .s-manifest { height: 195svh; }
  /* от первого экрана к «Подходу» — один свайп (04.11, заказчик): прокрутка первого экрана 0,45 экрана (было 1,3 —
     первый экран 100svh + пустой отрезок «только лицо» 30svh); «Подход» проявлен целиком к ~0,7 экрана прокрутки */
  .variant[data-flow="plates"] .s-hero { height: 45svh; min-height: 0; }
  .variant[data-flow="plates"] .vr-face { height: 0; }
}

/* ── 3 · «Наша цель» (05.11, /variant/): после наезда на коже — стеклянная плашка с цитатой с их сайта; появляется и
   уходит волной по буквам (variant.js — GOAL). Раздел — только длина прокрутки: плашка проявляется сама, когда наезд
   доигран, и уходит, когда листают дальше (или назад, к наезду) ───────────────────────────────────────────────────── */
/* плашка записи стоит, пока листают этот раздел; дальше — четвёртый блок «Результаты» */
.vr-goal { height: 70vh; }
/* Плашка на коже после наезда. Путь (05.11): цитата «Наша цель» → «цвет текста плохой» (тёмно-синий на стекле над оранжевой
   кожей грязнел) → синий → «прозрачность у всех форм одинаковая» (стекло как у первого экрана и «Подхода») → «убери белое
   свечение» → «сделай красиво» (тонкий шрифт, тёплые тона — ?goal=3) → «верни цвет» → с 14:31 вместо цитаты — запись на
   бесплатную консультацию: текст как во втором блоке («Подход»), ключевые слова синим, кнопка (полоска и пункты со
   значками — убраны по просьбе владельца). Цитата — в бэкапах на T: */
.vr-goal-card { position: fixed; z-index: 3; right: var(--pad); top: 50%; width: min(600px, 42vw); margin: 0; transform: translateY(-50%);
  padding: clamp(30px, 2.8vw, 46px); border-radius: 28px; opacity: 0; visibility: hidden; will-change: opacity, transform;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
  box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.vr-goal-card .label { margin-bottom: 20px; }
.vr-goal-card .label::before { opacity: var(--lb, 1); }
.vr-goal-q { margin: 0; font-family: var(--font); font-weight: 400; font-size: clamp(26px, 2.2vw, 40px); line-height: 1.18; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: pretty; }
.vr-goal-q .acc { color: var(--blue); }
.vr-goal-go { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.vr-goal-go p { font-size: 15px; line-height: 1.4; color: var(--ink2); }
html[data-goal="3"] .vr-goal-card .label { color: #a27a3c; }
html[data-goal="3"] .vr-goal-q { color: #3a271c; }
html[data-goal="2"] .vr-goal-card { background: linear-gradient(160deg, rgba(74, 42, 24, 0.36) 0%, rgba(64, 36, 20, 0.44) 100%);
  border-color: rgba(255, 236, 216, 0.3); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 34px 80px -40px rgba(40, 20, 8, 0.6), inset 0 1px 0 rgba(255, 236, 216, 0.25); }
html[data-goal="2"] .vr-goal-card .label { color: rgba(255, 238, 220, 0.92); }
html[data-goal="2"] .vr-goal-q { color: #fffaf3; text-shadow: 0 1px 18px rgba(50, 24, 10, 0.25); }
.vr-goal .ch { display: inline; }
/* переключатель вариантов четвёртого блока (/variant-2/) — служебный: под шапкой справа */
.b4-switch { position: fixed; z-index: 41; right: var(--pad); top: calc(var(--hdr) + 10px); display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; white-space: nowrap; background: rgba(22, 41, 74, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.b4-switch-l { padding: 0 10px 0 12px; font: 600 10px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.b4-switch a { padding: 8px 12px; border-radius: 999px; font-size: 12.5px; line-height: 1; color: rgba(255, 255, 255, 0.86); transition: background .3s, color .3s; }
.b4-switch a:hover { background: rgba(255, 255, 255, 0.12); }
.b4-switch a.on { background: #fff; color: var(--ink); }
@media (max-width: 760px) { .b4-switch { right: 12px; top: 66px; } .b4-switch-l { display: none; } .b4-switch a { padding: 7px 10px; font-size: 11.5px; } }
/* ── 4 · «Результаты» (05.11): слева на студии (она справа и движется по прокрутке — variant.js), варианты подачи — b4.js:
   a «Шторка» (одна карточка с фирменной кривой), b «Лента» (пары едут справа налево), c «Стопка» (пары веером) ── */
.vr-res { height: 260vh; }
.vr-res-head, .vr-res-stage, .vr-res-fine, .vr-res-glass { position: fixed; z-index: 3; opacity: 0; visibility: hidden; will-change: opacity; }
.vr-res-glass { display: none; }
.vr-res-head { left: var(--pad); top: calc(var(--hdr) + 3.5vh); width: min(620px, 44vw); }
.vr-res-head .label { margin-bottom: 14px; }
.vr-res-t { margin: 0; color: var(--ink); }
.vr-res-t .acc { color: var(--blue); }
.vr-res-stage { left: var(--pad); bottom: 11vh; height: 50vh; width: 46vw; }
.vr-res-fine { left: var(--pad); bottom: 3.2vh; width: min(560px, 40vw); font-size: 12px; line-height: 1.45; color: var(--ink3); }
/* пара «до | после» (ленты и стопки): два снимка рядом в светлой рамке, подписи — внизу на снимке */
.b4-pair { display: flex; gap: 6px; height: 100%; margin: 0; padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 30px 60px -36px rgba(66, 40, 20, 0.55); }
.b4-ph { position: relative; height: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 17px; background: #e9e1d9; }
.b4-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.b4-ph span { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; font: 600 11px/1 var(--font); letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; background: rgba(22, 41, 74, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.b4-ph + .b4-ph span { background: rgba(39, 93, 167, 0.85); }
/* a · шторка: карточка 4:5, смена пациентов наплывом */
.b4a-card { position: absolute; left: 0; bottom: 0; height: 100%; aspect-ratio: 4 / 5; margin: 0; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 34px 70px -38px rgba(66, 40, 20, 0.6); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.b4a-who { position: absolute; left: calc(50vh * 0.8 + 26px); bottom: 6px; font-size: 15px; line-height: 1.4; color: var(--ink2); }
/* b · лента: у её плеча пары растворяются */
.b4-b .vr-res-stage { left: 0; width: 100vw; height: 46vh;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 46%, transparent 60%); mask-image: linear-gradient(to right, #000 0, #000 46%, transparent 60%); }
.b4b-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: 28px; will-change: transform; }
/* c · стопка веером */
.b4c-stack { position: absolute; left: 0; bottom: 0; height: 100%; width: calc(50vh * 1.5 + 22px); }
.b4c-stack .b4-pair { position: absolute; left: 0; bottom: 0; transform-origin: 50% 100%; will-change: transform, opacity; }

/* ── 4 · «Фокус на результате» (/variant-2/, data-b4="focus", 05.11 17:20) — основа: блок «Результаты» главной 9300.
   Слева крупный снимок «до/после» в стеклянной рамке (как на главной), справа на стекле (как «Подход» и «Первый шаг») —
   заголовок, ещё три случая и запись; она за ними — в расфокусе (variant.js, uBlur). Всё закреплено, ход — b4.js ───── */
.vr-res.rs { height: 260vh; }
.rs-veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; will-change: opacity;
  background: radial-gradient(90% 80% at 30% 50%, rgba(252, 248, 242, 0.34) 0%, rgba(252, 248, 242, 0.14) 60%, rgba(252, 248, 242, 0.06) 100%); }
.rs-grid { position: fixed; z-index: 3; left: var(--pad); right: var(--pad); top: calc(var(--hdr) + 2.2vh); bottom: 6.5vh; max-width: 1640px; margin: 0 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 3.6vw, 72px); visibility: hidden; }
.rs-main-w { height: 100%; display: flex; align-items: center; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.rs-main { height: min(100%, 80vh); width: auto; max-width: 48vw; border: 8px solid rgba(255, 255, 255, 0.7); border-radius: 30px;
  box-shadow: 0 50px 100px -46px rgba(66, 40, 20, 0.5), 0 0 0 1px rgba(22, 41, 74, 0.04); }
.rs-copy { align-self: center; max-width: 780px; padding: clamp(28px, 2.6vw, 46px); border-radius: 28px; opacity: 0; visibility: hidden;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
  box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.rs-copy > * { will-change: transform, opacity; }
.rs-copy .label { margin-bottom: 18px; }
.rs-t { margin: 0; font-family: var(--font); font-weight: 400; font-size: clamp(32px, 3vw, 54px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); }
.rs-t .acc { color: var(--blue); }
.rs .ch { display: inline; }
.rs-lead { margin: 16px 0 0; max-width: 32em; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.42; color: var(--ink2); text-wrap: pretty; }
.rs-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); margin-top: clamp(18px, 3vh, 30px); }
.rs-cases .ba { border-radius: 18px; border: 5px solid rgba(255, 255, 255, 0.7); box-shadow: 0 24px 50px -30px rgba(22, 41, 74, 0.5); }
.rs-cases .ba-tag { top: 10px; padding: 6px 9px; font-size: 10px; }
.rs-cases .ba-l { left: 10px; } .rs-cases .ba-r { right: 10px; }
.rs-cases .ba-knob { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.rs-cases .ba-knob::before { left: 8px; } .rs-cases .ba-knob::after { right: 8px; }
.rs-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(18px, 3vh, 30px); }
.rs-act .more { margin-top: 0; }
/* правая колонка: стекло с текстом и под ним — пометка о снимках (09.11 ночь, владелец: «текст „Изображения размещены…“
   сделать более видимым и сместить правее, под форму, ровно»; была внизу слева экрана, мелко и бледно) */
.rs-side { align-self: center; max-width: 780px; min-width: 0; }
.rs-side .rs-copy { max-width: none; }
.rs-fine { margin: 14px 0 0; padding: 0 4px; font-size: 13px; line-height: 1.5; color: var(--ink2); opacity: 0; visibility: hidden; text-wrap: pretty; }
/* телефонная колонка (.rs-m, b4.js) — только на узком экране */
.rs-m { display: none; }
/* снимок крупно (телефон): поверх всей страницы, вырастает из сетки; палец ведёт границу «до/после», страница не листается */
.rs-zoom { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: calc(70px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); touch-action: none; overscroll-behavior: contain; }
.rs-zoom-bg { position: absolute; inset: 0; background: rgba(243, 235, 226, 0.92); opacity: 0; transition: opacity 0.45s ease; }
.rs-zoom.on .rs-zoom-bg { opacity: 1; }
.rs-zoom-box { position: relative; width: min(100%, 540px, calc((100svh - 222px) * 500 / 640)); display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.rs-zoom-ba { width: 100%; border: 6px solid rgba(255, 255, 255, 0.88); border-radius: 26px; box-shadow: 0 44px 80px -40px rgba(22, 41, 74, 0.55);
  touch-action: none; transform-origin: 0 0; }
.rs-zoom-ba .ba-knob { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.rs-zoom-hint { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ink2); text-align: center; }
.rs-zoom-cta { width: 100%; height: 54px; font-size: 16px; }
.rs-zoom-hint, .rs-zoom-cta { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.5s var(--ease); }
.rs-zoom.on .rs-zoom-hint, .rs-zoom.on .rs-zoom-cta { opacity: 1; transform: none; transition-delay: 0.22s; }
.rs-zoom-x { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 24px -12px rgba(22, 41, 74, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.rs-zoom.on .rs-zoom-x { opacity: 1; transition-delay: 0.15s; }
.rs-zoom-x::before, .rs-zoom-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: var(--ink); }
.rs-zoom-x::before { transform: rotate(45deg); } .rs-zoom-x::after { transform: rotate(-45deg); }
html.rs-zoom-open, html.rs-zoom-open body { overflow: hidden; }
/* полоса прокрутки (Windows) не исчезает и не возвращается, когда страница на время останавливается (запись, меню, снимок
   крупно): место под неё всегда оставлено — ширина страницы и переносы строк не меняются, ничего не дёргается (09.11) */
html { scrollbar-gutter: stable; }
/* компьютер: шапка появляется, когда она встала на место — вход доигран (09.11, владелец: «почему до того, как она
   встала на место, хедер уже видно»). Пока идёт вход — html.hdr-wait (variant.js start → introFinished) */
@media (min-width: 761px) {
  .variant .hdr { transition: opacity 1s cubic-bezier(0.33, 0, 0.2, 1), transform 1.2s var(--ease); }
  html.hdr-wait .variant .hdr { opacity: 0; transform: translate3d(0, -14px, 0); }
  html.hdr-wait .variant .hdr > * { pointer-events: none; }
}
/* «Наверх» (09.11, была «Повторить вход»): закреплена на экране (variant.js выносит её из первого экрана), на первом экране
   не видна — проступает, когда с него ушли (.on); место то же — компьютер справа внизу, телефон под шапкой справа.
   Нажатие — страница сама плавно едет наверх (variant.js, startTop); пока едет и пока открыто меню — кнопки нет */
.variant .vr-again { position: fixed; z-index: 39; opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity 0.5s ease, transform 0.6s var(--ease), visibility 0s linear 0.5s; }
.variant .vr-again.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.menu-open .variant .vr-again.on { opacity: 0; visibility: hidden; }
/* (телефон: прежняя фиксация html.vr-lock убрана 06.11 — первые три блока теперь листаются стоянками, variant.js SN) */
/* невысокий экран ноутбука: малые снимки — уже, чтобы колонка поместилась */
@media (min-width: 761px) and (max-height: 760px) {
  .rs-cases { width: 86%; }
  .rs-t { font-size: clamp(28px, 2.3vw, 40px); }
}

@media (max-width: 760px) {
  .vr-goal { height: 30svh; } /* (было 70svh — после плашки шла пустая прокрутка) */
  .vr-res { height: 200svh; }
  /* телефон: всё — в стекле внизу (как плашки первых экранов), её лицо — над ним */
  .vr-res-glass { display: block; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: calc(36svh + 150px); border-radius: 26px;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
    box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  .vr-res-head { left: 32px; right: 32px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom) + 36svh + 60px); }
  .vr-res-head .label { margin-bottom: 8px; }
  .vr-res-t { font-size: 19px !important; line-height: 1.22 !important; }
  .vr-res-stage { left: 32px; width: calc(100vw - 64px); bottom: calc(12px + env(safe-area-inset-bottom) + 48px); height: 34svh; }
  .vr-res-fine { left: 32px; right: 32px; width: auto; bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 10px; line-height: 1.35; }
  .b4a-who { left: calc(34svh * 0.8 + 14px); font-size: 13px; }
  .b4-b .vr-res-stage { left: 32px; width: calc(100vw - 64px); height: 34svh; -webkit-mask-image: linear-gradient(to right, #000 0, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 80%, transparent 100%); }
  .b4b-track { gap: 14px; }
  .b4-pair { padding: 5px; gap: 4px; border-radius: 18px; }
  .b4-ph { border-radius: 13px; }
  .b4-ph span { left: 6px; bottom: 6px; padding: 4px 7px; font-size: 9px; }
  .b4c-stack { width: calc(34svh * 1.5 + 14px); }
  /* «Фокус на результате», телефон (05.11 вечер, владелец: «сначала блок „Результаты пациентов“, снизу картинки по две
     друг под другом, чуть крупнее; нажатие — увеличить и водить; переход мягче, без микролагов»): обычная колонка поверх
     неё (она закреплена и в расфокусе): стекло с заголовком → снимки 2×2 → запись → пометка; разметку .rs-m строит
     b4.js, закреплённая раскладка компьютера на телефоне не показывается. Сверху — отступ на переход (плашка записи
     уходит, камера плавно отходит от кожи, она расплывается). Стекло — без размытия под собой (фон за ним и так в
     расфокусе, а размытие под стеклом при прокрутке пересчитывалось каждый кадр) */
  /* отступ сверху — только на сам переход (плашка записи уходит, щека переходит в размытую девушку): плашка
     «Результаты наших пациентов» въезжает, пока девушка расплывается — пустого кадра «только размытая девушка» нет
     (05.11, владелец: «между 3 и 4 блоком остаётся кадр, где девушка полностью в блюре — зачем») */
  .vr-res.rs { height: auto; position: relative; padding: 12svh 14px calc(26px + env(safe-area-inset-bottom)); }
  .rs > .rs-grid, .rs > .rs-fine { display: none !important; }
  /* вуаль: внизу плотнее — размытые плечи и руки не дают оранжевых пятен под стеклом */
  .rs-veil { background: linear-gradient(to bottom, rgba(252, 248, 242, 0.12) 0%, rgba(252, 248, 242, 0.3) 45%, rgba(252, 246, 238, 0.55) 100%); }
  .rs-m { display: block; position: relative; z-index: 3; }
  .rs-m > *, .rs-m-ba { opacity: 0; visibility: hidden; }
  .rs-m-plate { padding: 22px 20px 20px; border-radius: 26px;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.6) 0%, rgba(250, 246, 239, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  /* надпись «Результаты наших пациентов» — чуть крупнее обычной подписи раздела (05.11, владелец) */
  .rs-m-plate .label { margin-bottom: 12px; font-size: clamp(12.5px, 3.5vw, 14px); letter-spacing: 0.11em; gap: 10px; white-space: nowrap; }
  .rs-m-plate .label::before { width: 20px; height: 20px; }
  .rs-m-t { font-size: clamp(27px, 7.6vw, 32px); line-height: 1.08; }
  .rs-m .rs-lead { margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .rs-m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; opacity: 1; visibility: visible; }
  .rs-m-ba { border: 4px solid rgba(255, 255, 255, 0.78); border-radius: 18px; box-shadow: 0 24px 46px -30px rgba(22, 41, 74, 0.5); }
  .rs-m-ba .ba-tag { display: none; }
  .rs-m-ba .ba-knob { width: 32px; height: 32px; margin: -16px 0 0 -16px; pointer-events: none; }
  .rs-m-ba .ba-knob::before { left: 8px; } .rs-m-ba .ba-knob::after { right: 8px; }
  /* весь снимок — кнопка «открыть крупно»; в углу — значок увеличения */
  .rs-m-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: inherit; background: transparent; -webkit-tap-highlight-color: transparent; }
  .rs-m-open::after { content: ''; position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23275da7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 15px no-repeat;
    box-shadow: 0 6px 16px -8px rgba(22, 41, 74, 0.5); }
  .rs-m-ba.rs-m-away { visibility: hidden !important; }
  /* (06.11 вечер: пометка — сразу под снимками, ниже — «Все результаты», затем запись) */
  .rs-m-act { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
  .rs-m-act .cta { width: 100%; height: 54px; padding: 0 16px; font-size: 16px; }
  .rs-m-act .more { align-self: center; margin-top: 0; }
  .rs-m-fine { margin: 12px 6px 0; font-size: 11px; line-height: 1.4; color: var(--ink2); }
  .vr-goal-card { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; padding: 20px 20px 18px; border-radius: 26px; }
  .vr-goal-card .label { margin-bottom: 10px; }
  .vr-goal-go { margin-top: 16px; }
  .vr-goal-go .cta { width: 100%; height: 50px; font-size: 15px; }
  .vr-goal-go p { display: none; }
}

/* ── 3 · «Под лупой: с чем приходят» (05.11; с 05.11 13:21 — только на /variant-2/, копии прежней /variant/) ──────
   Раздел — только длина прокрутки: 5 точек + итог, по 0,5 экрана на шаг (variant.js — skin*). Плашка — закреплённое
   стекло как у первого экрана и «Подхода»; тексты внутри сменяются наплывом, высота плашки идёт за текстом. Точки на
   коже — кольцо с белой точкой (знак «точка фокуса»), подпись — стеклянная капсула; у текущей точки кольцо дышит */
.vr-skin { height: 320vh; }
.vr-notes { position: fixed; z-index: 3; left: var(--pad); top: 50%; width: min(470px, 36vw); height: 300px; margin-top: -150px;
  padding: clamp(26px, 2.3vw, 36px); padding-bottom: 64px; border-radius: 28px; opacity: 0; visibility: hidden;
  transition: height .55s var(--ease), margin-top .55s var(--ease); will-change: opacity;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
  box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.vr-note { position: absolute; left: clamp(26px, 2.3vw, 36px); right: clamp(26px, 2.3vw, 36px); top: clamp(26px, 2.3vw, 36px);
  opacity: 0; visibility: hidden; }
.vr-note .label { margin-bottom: 16px; }
.vr-note-t { font-family: var(--head), var(--font); font-weight: 600; font-size: clamp(28px, 2.3vw, 38px); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 14px; text-wrap: balance; }
.vr-note p:not(.label) { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.vr-note-end .vr-note-t { color: var(--blue); }
.vr-note-go { margin-top: 22px; }
.vr-note .vr-note-fine { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink3); }
/* низ плашки: пять точек (где мы сейчас; нажать — перейти) и подсказка */
.vr-hint { position: absolute; left: clamp(26px, 2.3vw, 36px); right: clamp(26px, 2.3vw, 36px); bottom: 22px; display: flex; align-items: center; gap: 14px;
  font-size: 12.5px; line-height: 1.3; color: var(--ink3); transition: opacity .4s; }
.vr-dots { display: flex; gap: 6px; flex: none; }
.vr-dots button { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.vr-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(22, 41, 74, 0.22); transition: background .3s, transform .3s var(--ease); }
.vr-dots button.on::before { background: var(--blue); transform: scale(1.35); }
.vr-dots button:hover::before { background: var(--blue); }
/* выше main (у него свой слой z-index 2 — иначе раздел перехватывал наведение), ниже шапки (40); под плашкой точки
   скрывает variant.js */
.vr-marks { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vr-mk { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto; cursor: pointer; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.vr-mk::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(39, 93, 167, 0.12), 0 8px 22px -8px rgba(70, 35, 12, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.18); transition: transform .5s var(--ease); }
.vr-mk i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 1px 6px rgba(70, 35, 12, 0.35); }
.vr-mk.on::before { animation: vr-mk-breathe 2.6s ease-in-out infinite; }
.vr-mk:hover::before, .vr-mk:focus-visible::before { transform: scale(1.18); }
@keyframes vr-mk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.vr-mk b { position: absolute; left: 50px; top: 50%; padding: 8px 13px; border-radius: 999px; white-space: nowrap; transform: translateY(-50%);
  font: 600 12px/1 var(--font); letter-spacing: 0.04em; color: var(--ink); opacity: var(--lo, 0); transition: opacity .35s;
  background: rgba(250, 246, 239, 0.62); border: 1px solid rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px -16px rgba(66, 47, 25, 0.5); }
.vr-mk.l b { left: auto; right: 50px; }
.vr-mk:hover b, .vr-mk:focus-visible b { opacity: 1; }
@media (max-width: 760px) {
  .vr-skin { height: 320svh; }
  .vr-notes { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); margin-top: 0;
    padding: 18px 20px 54px; border-radius: 26px; transition: height .5s var(--ease); }
  .vr-note { left: 20px; right: 20px; top: 18px; }
  .vr-note .label { margin-bottom: 10px; }
  .vr-note-t { font-size: 24px; margin-bottom: 8px; }
  .vr-note p:not(.label) { font-size: 14.5px; line-height: 1.45; }
  .vr-note-go { margin-top: 14px; width: 100%; height: 50px; font-size: 15px; }
  .vr-note .vr-note-fine { margin-top: 8px; font-size: 12px; }
  .vr-hint { left: 20px; right: 20px; bottom: 14px; font-size: 12px; }
  .vr-mk b { font-size: 11.5px; padding: 7px 11px; left: 46px; }
  .vr-mk.l b { right: 46px; }
}

/* ── телефон ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* логотип с названием — чуть меньше (×0,9), кнопка меню — той же высоты, ряд ровный */
  .variant .brand { height: 44px; padding: 0 12px; gap: 9px; }
  .variant .brand-mark { width: 30px; height: 30px; }
  .variant .brand-t { gap: 4px; }
  .variant .brand-name { width: 124px; height: 16.7px; }
  .variant .brand-d { font-size: 8px; }
  .variant .menu-btn { height: 44px; }

  /* Одна плашка как на numeeed.ru (матовое стекло: тёплый белый ~60 %, лёгкое размытие, светлая рамка, скругление 26,
     мягкая тень) на всю прокрутку — .vr-card; её высоту и прозрачность ведёт variant.js (platesAt), в ней сменяются
     тексты первого экрана и «Подхода» (сами блоки текста — прозрачные). Низ плашки — у 100svh: не прыгает, когда
     прячется панель адреса. Светлая полоса под текстом больше не нужна */
  .vr-floor { display: none !important; }
  /* кадр девушки (вырез 1260×1080 — вся фигура): ниже подбородка мягко растворяются руки по бокам — иначе в полях
     у плашки по краям экрана видны оранжевые пятна рук; голова, шея и плечи — целиком. Две маски складываются: верх
     кадра целиком + средняя полоса (лицо по кадрам — 48–50 % ширины выреза) */
  .vr-flat { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 76%), linear-gradient(to right, transparent 10%, #000 27%, #000 71%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 76%), linear-gradient(to right, transparent 10%, #000 27%, #000 71%, transparent 88%); }
  /* с 04.11 телефон — на вертикальных роликах (data-set="v" у body, набор seq-v): фигура в кадре до бёдер, низ кадра —
     под экраном при любой панели Safari. Маски выше не нужны: она продолжается под стеклом плашки до низа экрана */
  [data-set="v"] .vr-flat { -webkit-mask-image: none; mask-image: none; }
  /* 04.11, владелец: «формы с текстом — прозрачнее»: белого меньше (0,6 → 0,36) и размытие слабее (7 → 4 px) — от одной
     прозрачности стекло матовым и осталось бы, матовость держит размытие */
  [data-set="v"] .vr-card { background: linear-gradient(to bottom, rgba(250, 246, 239, 0.36) 0%, rgba(250, 246, 239, 0.4) 50%, rgba(250, 246, 239, 0.5) 100%);
    border-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05); }
  /* «Подход» проявляется по буквам мягкой волной (variant.js — LT): слова и пункты сами по себе полные, без своих слоёв
     (зажигание по словам выглядело как лаг); значок подписи и линия над пунктами — вместе с волной (--lb, --pl) */
  [data-flow="plates"] .manifest-text .w, [data-flow="plates"] .points li { opacity: 1; will-change: auto; }
  [data-flow="plates"] .manifest .label::before { opacity: var(--lb, 1); }
  /* буквы пунктов — не пояснения (.points span: на телефоне скрыты, свой кегль и цвет) */
  [data-flow="plates"] .points .ch { display: inline; font: inherit; color: inherit; letter-spacing: inherit; }
  [data-flow="plates"] .manifest .points { border-top-color: rgba(22, 41, 74, calc(0.12 * var(--pl, 1))); }
  .vr-card { display: block; position: fixed; z-index: 1; left: 12px; right: 12px; top: calc(100svh - 12px - env(safe-area-inset-bottom));
    height: 280px; transform: translateY(-100%); opacity: 0; pointer-events: none; will-change: opacity;
    /* стекло к низу плотнее: там на телефонах с панелями заканчивается видео — тело растворяется, но не просвечивает */
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.6) 0%, rgba(250, 246, 239, 0.62) 45%, rgba(250, 246, 239, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 26px;
    -webkit-backdrop-filter: blur(7px) saturate(1.08); backdrop-filter: blur(7px) saturate(1.08);
    box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  .variant .th-copy, .variant .manifest.glass {
    left: 12px; right: 12px; top: calc(100svh - 12px - env(safe-area-inset-bottom)); bottom: auto; transform: translateY(-100%);
    padding: 20px 20px 18px; background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* первый экран — собранно: заголовок, тонкая линия, три пункта со знаком, кнопка во всю ширину; ритм 12 / 14 / 16 */
  .variant .th-title { font-size: clamp(27px, 7.6vw, 31px); line-height: 1.04; }
  .variant .th-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(22, 41, 74, 0.1); gap: 7px; }
  .variant .th-list li { color: var(--ink); font-size: 13.5px; line-height: 1.35; padding-left: 23px; }
  .variant .th-list li::before { width: 13px; height: 13px; top: 0.16em; }
  .variant .th-go { margin-top: 16px; height: 50px; font-size: 12.5px; letter-spacing: 0.04em; }
  /* Patefon шире прежнего: надпись кнопки в одну строку (замер: 323 px при 12,5 px — на 390 px кнопке не помещалась) */
  html[data-font="4"] .variant .th-go, html[data-font="6"] .variant .th-go { font-size: 11.5px; letter-spacing: 0.01em; padding: 0 12px; }
  /* вход (09.11 вечер, владелец: «появление — как у формы во втором разделе»): текст — волной по буквам (variant.js,
     heroWave), как «Подход»; линия над пунктами и значки пунктов — вместе с волной (--pl, --mk) */
  [data-flow="plates"].variant .th-title .ch, [data-flow="plates"].variant .th-list .ch { display: inline; }
  [data-flow="plates"].variant .th-list { border-top-color: rgba(22, 41, 74, calc(0.1 * var(--pl, 1))); }
  [data-flow="plates"].variant .th-list li::before { opacity: var(--mk, 1); }

  /* «Подход» — те же отступы */
  .variant .manifest .label { margin-bottom: 10px; }
  .variant .manifest-text { font-size: clamp(18px, min(5.2vw, 2.6svh), 21px); line-height: 1.24; }
  .variant .points b { color: var(--ink); }
  .variant .manifest .more { margin-top: 14px; height: 42px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .variant .th-copy, .variant .manifest.glass { padding: 16px 16px 14px; }
  .variant .th-title { font-size: clamp(25px, 7vw, 28px); }
  .variant .th-list { margin-top: 10px; padding-top: 10px; gap: 5px; }
  .variant .th-list li { font-size: 12.5px; }
  .variant .th-go { height: 46px; margin-top: 12px; }
}

/* ── экран загрузки (09.11 ночь, владелец: «сейчас он максимально обычный — сделай прямо красиво, в стилистике сайта»).
   Разметка — delo-src/partials/v-pre.html, ход и уход — variant.js (preShow, preExit). Замысел — «в студии включается
   свет»: молочное поле студии с мягкой виньеткой, за знаком — золотистый подсвет (как за её головой), по полю медленно
   плывут размытые золотистые линии света (как волны на фоне сайта); знак прорисовывается тонкой синей линией по ходу
   загрузки и наливается цветом в конце, следом — название, подпись, линия хода и число. Всё, что движется само, — только
   transform/opacity (слои видеокарты): во время загрузки процессор занят распаковкой кадров, а это не тормозит ────────── */
/* фон — стена студии (как под холстом волн, пока он не нарисовал первый кадр; без WebGL — так и остаётся) */
.pre2 { overflow: hidden; background: radial-gradient(115% 100% at 50% 44%, #ede2d5 0%, #dad0c6 50%, #bfb0a4 100%); }
/* золотистые волны (09.11 ночь, владелец: «сделай такой же фон, как на сайте — красивые золотистые волны, чётко»): живой
   холст с шейдером волн сцены (partials/v-pre.html, скрипт там же); проявляется с первым кадром */
.pre-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.pre-cv.on { opacity: 1; }
/* плёночное зерно — как на сцене: статичная плитка шума, рисуется один раз */
.pre2::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pre-glow { position: absolute; left: 50%; top: 44%; width: 128vmin; height: 128vmin; margin: -64vmin 0 0 -64vmin; border-radius: 50%; pointer-events: none;
  /* (прозрачнее, чем было: у света волны на сайте самые яркие — подсвет их не закрывает, только мягко светлит знак) */
  background: radial-gradient(circle closest-side, rgba(255, 246, 232, 0.5) 0%, rgba(255, 238, 214, 0.26) 32%, rgba(255, 230, 200, 0.08) 60%, rgba(255, 228, 196, 0) 100%);
  opacity: 0; will-change: transform, opacity; animation: pre-glow-in 1.4s cubic-bezier(.22, .61, .36, 1) 0.05s forwards, pre-breathe 6.5s ease-in-out 1.4s infinite alternate; }
@keyframes pre-glow-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes pre-breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.pre2 .pre-c { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.pre-mark { width: clamp(104px, 15vmin, 150px); height: clamp(104px, 15vmin, 150px); overflow: visible; }
/* блик по налитому знаку (в конце): полоса света проходит слева направо, только по знаку (clip-path) */
.pre-shine { transform: translateX(-160px); }
.pre2.pre-done .pre-shine { transform: translateX(430px); transition: transform 1.25s cubic-bezier(.45, .05, .25, 1) 0.2s; }
.pre-fill { fill: var(--blue); opacity: 0; transition: opacity 0.5s ease; }
.pre-line { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; transition: opacity 0.6s ease 0.15s; }
.pre-line > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pre-name { display: block; width: clamp(196px, 26vmin, 292px); height: calc(clamp(196px, 26vmin, 292px) * 0.1349); margin-top: clamp(24px, 3.6vmin, 34px); color: var(--blue);
  opacity: 0; transform: translate3d(0, 10px, 0); animation: pre-up 1s cubic-bezier(.22, .61, .36, 1) 0.35s forwards; }
.pre-d { margin: clamp(11px, 1.6vmin, 15px) 0 0; font: 600 clamp(9.5px, 1.4vmin, 12.5px)/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink2);
  white-space: nowrap; opacity: 0; transform: translate3d(0, 8px, 0); animation: pre-up 1s cubic-bezier(.22, .61, .36, 1) 0.55s forwards; }
@keyframes pre-up { to { opacity: 1; transform: none; } }
.pre-bar { position: relative; width: clamp(120px, 15vmin, 170px); height: 1px; margin-top: clamp(26px, 3.6vmin, 34px); overflow: hidden; border-radius: 1px;
  background: rgba(39, 93, 167, 0.16); opacity: 0; animation: pre-up 0.9s ease 0.7s forwards; }
.pre-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(39, 93, 167, 0.35), var(--blue)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.pre2 .pre-n { position: static; margin-top: 12px; font: 500 11px/1 var(--font); letter-spacing: 0.18em; color: var(--ink2); font-variant-numeric: tabular-nums;
  opacity: 0; animation: pre-up 0.9s ease 0.8s forwards; }
.pre2 .pre-n::after { content: ' %'; letter-spacing: 0.04em; }
/* конец: знак наливается цветом, линия хода и число гаснут (preExit) */
.pre2.pre-done .pre-fill { opacity: 1; }
.pre2.pre-done .pre-line { opacity: 0; }
.pre2.pre-done .pre-bar, .pre2.pre-done .pre-n { opacity: 0 !important; transition: opacity 0.4s ease; animation: none; }
/* уход: подсвет разгорается шире, знак и подпись чуть приближаются и тают — сцена под ним уже «включает свет» */
.pre2.pre-out .pre-glow { animation: none; opacity: 0; transform: scale(1.55); transition: transform 1.2s cubic-bezier(.22, .61, .36, 1), opacity 1.1s ease 0.1s; }
.pre2.pre-out .pre-c { opacity: 0; transform: scale(1.05); transition: transform 1s cubic-bezier(.22, .61, .36, 1), opacity 0.7s ease; }
@media (max-width: 760px) {
  /* телефон: подсвет меньше — иначе он закрывал волны почти на всём узком экране */
  .pre-glow { top: 42%; width: 104vmin; height: 104vmin; margin: -52vmin 0 0 -52vmin; }
  .pre-d { letter-spacing: 0.2em; }
}