/* ===== Shared persistent layer: phone (moves between slides) ===== */
  #phone-shared{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  /* Базовая CSS-позиция = позиция на слайде 2. Между слайдами едем через
     transform (x/y), а не left/top/width/height — так переход всегда плавный
     на GPU, без рывков и в обе стороны одинаково (см. js/phone-shared.js). */
  /* Увеличено в 1.3x, затем в 1.2x, затем ещё в 1.5x (по явной просьбе
     пользователя, "сверх предыдущих увеличений") относительно исходного
     (401x501 → 938.34x1172.34, суммарно ×2.34), left/top пересчитаны так,
     чтобы центр остался на том же месте (315.5, 412.5) — иначе подсветка
     "уехала" бы вниз-вправо при простом росте width/height.
     Дельта смещения к слайду 1 в js/phone-shared.js трогать не нужно —
     это чистый перенос (translate), который не зависит от размера бокса,
     пока размер одинаков на обоих слайдах. */
  /* ВАЖНО: бокс .color-back БОЛЬШЕ НИКОГДА не меняет width/height — вся
     геометрия между слайдами едет через transform (translate+scale), см.
     YHA.colorBackProps в js/phone-shared.js.
     Базовый бокс = САМОЕ БОЛЬШОЕ из состояний (Solution/App, 1501.95×1876.502),
     поэтому все scale ≤ 1 — картинка всегда сжимается, а не растягивается, и
     резкость не теряется. left/top держим на 0, смещение — тоже в transform,
     иначе пришлось бы вычитать базовые left/top из каждого состояния.
     transform-origin:0 0 — чтобы scale считался от левого верхнего угла и
     формула была просто (x=left, y=top, scale=width/базовая ширина).
     Значение transform ниже = состояние слайдов 1/2 (BASE_COLORBACK): нужно,
     чтобы до выполнения JS пятно не мигнуло в полный размер. */
  /* 🔴 ПЯТНО РИСУЕТСЯ CSS-ГРАДИЕНТАМИ, А НЕ КАРТИНКОЙ (правка 2026-08-08).
     Ровно та же замена, что уже сделана на мобильной ветке 2026-08-07 (см.
     .m-color-back в css/mobile.css) — теперь и здесь. Было: <img> с
     images/color-back.svg, внутри которого три feGaussianBlur со
     stdDeviation 64 в боксе 1501.95×1876.502. Что это стоило:
       • Firefox рисует такой фильтр по-своему, и пятно там выглядело
         заметно иначе, чем в Safari и Chrome (очная проверка пользователя
         2026-08-08: «в фаерфоксе совершенно другое пятно по виду»);
       • Safari при DPR 2 (Retina) уходит буфером фильтра за 3000 device-px
         по каждой стороне — ровно тот предел, на котором телефонный Safari
         молча перестал рисовать пятно ВООБЩЕ (баг мобильной ветки);
       • растеризация этих трёх блюров стоила 1735 мс на переходе 1→2 при
         39-160 мс на всех остальных переходах — самый дорогой кадр сайта.
     Градиенты не подобраны на глаз: геометрия пересчитана из мобильной
     версии (профили там сняты численно с самого SVG) умножением всех длин
     на 1501.95/719.559 = 2.08732 — оба бокса подобны исходным 657×757, так
     что коэффициент по X и по Y совпадает до пятого знака. Стопы заданы в
     процентах от радиуса, поэтому от масштаба не зависят вовсе.
     Сверка новой картинки с прежним SVG в том же боксе: расходится 38.6%
     каналов, максимум расхождения 6/255 при среднем 1.2 — на глаз
     неразличимо (проверка: /root/px/cb/cmp.js).
     Порядок слоёв в CSS ОБРАТНЫЙ порядку в SVG: первый фон — верхний. */
  .color-back{
    position:absolute; left:0; top:0; width:1501.95px; height:1876.502px;
    transform-origin:0 0;
    /* will-change:transform — элемент постоянно живёт в DOM и постоянно
       участвует в переходах, поэтому держим его отдельным GPU-слоем всё
       время: так браузер один раз кладёт готовый растр на GPU и дальше
       только двигает его, вместо того чтобы перерисовывать под каждый
       новый масштаб. */
    will-change:transform;
    transform:translate(-153.67px,-173.67px) scale(0.6247478,0.6247475);
    background-repeat:no-repeat;
    background-image:
      radial-gradient(624.1px 676.7px at 478.8px 516.8px, rgba(255,253,224,0.569) 0.0%, rgba(255,253,224,0.553) 7.1%, rgba(255,253,224,0.502) 14.3%, rgba(255,253,224,0.426) 21.4%, rgba(255,253,224,0.343) 28.6%, rgba(255,253,224,0.260) 35.7%, rgba(255,253,224,0.178) 42.9%, rgba(255,253,224,0.110) 50.0%, rgba(255,253,224,0.064) 57.1%, rgba(255,253,224,0.000) 64.3%),
      radial-gradient(720.1px 780.9px at 928.2px 1254.3px, rgba(96,211,218,0.875) 0.0%, rgba(96,211,218,0.855) 7.1%, rgba(96,211,218,0.798) 14.3%, rgba(96,211,218,0.708) 21.4%, rgba(96,211,218,0.588) 28.6%, rgba(96,211,218,0.457) 35.7%, rgba(96,211,218,0.331) 42.9%, rgba(96,211,218,0.222) 50.0%, rgba(96,211,218,0.128) 57.1%, rgba(96,211,218,0.065) 64.3%, rgba(96,211,218,0.029) 71.4%, rgba(96,211,218,0.000) 78.6%),
      radial-gradient(816.1px 885.0px at 669.8px 934.5px, rgba(255,142,140,0.988) 0.0%, rgba(255,142,140,0.978) 7.1%, rgba(255,142,140,0.945) 14.3%, rgba(255,142,140,0.880) 21.4%, rgba(255,142,140,0.783) 28.6%, rgba(255,142,140,0.654) 35.7%, rgba(255,142,140,0.500) 42.9%, rgba(255,142,140,0.345) 50.0%, rgba(255,142,140,0.214) 57.1%, rgba(255,142,140,0.114) 64.3%, rgba(255,142,140,0.051) 71.4%, rgba(255,142,140,0.016) 78.6%, rgba(255,142,140,0.004) 85.7%, rgba(255,142,140,0.000) 92.9%);
  }
  .phone-frame{
    position:absolute; left:158px; top:99.7px; width:300px; height:583.6px;
    border:9px solid var(--ink); border-radius:34px; box-sizing:border-box;
    /* backface-visibility нужен ради флипа Receive->Guest (см. .phone-frame-flip
       ниже) — на всех ОСТАЛЬНЫХ слайдах rotationX родителя всегда 0, свойство
       никак не проявляется (прячет элемент только при повороте >90deg). */
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  /* ===== Флип phone-frame Receive->Guest (Figma node 2892:2742) =====
     ЕДИНСТВЕННЫЙ переход в проекте, где рамка меняет ЦВЕТ не твином, а
     3D-флипом (rotateX) — геометрия между Receive (чёрный) и Guest (бирюзовый
     #0C838B) идентична (тот же RECEIVE_PHONE: left:130/top:88/width:1179/
     height:583.6/radius:34, см. js/phone-shared.js), поэтому вместо цветового
     твина .phone-frame крутится вместе с готовой статичной teal-стороной
     (.phone-frame-back) — тот же приём, что и у .cost-searchbar-flip
     (perspective на РОДИТЕЛЕ вращаемого элемента, transform-style:preserve-3d
     на нём самом, backface-visibility:hidden на обеих сторонах, back
     повёрнута на 180deg ЗАРАНЕЕ в CSS — см. комментарий у .cost-searchbar-face
     выше). transform-origin — явный центр RECEIVE_PHONE-бокса
     (130+1179/2, 88+583.6/2 = 719.5, 379.8), а НЕ дефолтный центр обёртки
     (inset:0 = центр всего канваса 720,380 — почти то же самое, но не
     гарантированно точно при будущих правках геометрии, поэтому не полагаемся
     на совпадение). Обёртки НЕ имеют собственного z-index (auto) — z-order
     этого поддерева целиком решает #phone-frame-layer снаружи (см. его
     комментарий), как и раньше с #phone-frame-parallax. */
  #phone-frame-flip-outer{ position:absolute; inset:0; perspective:1800px; pointer-events:none; }
  .phone-frame-flip{ position:absolute; inset:0; transform-style:preserve-3d; transform-origin:719.5px 379.8px; }
  .phone-frame-back{
    position:absolute; left:130px; top:88px; width:1179px; height:583.6px;
    /* #0C838B, а не исходный #10ABB5 (правка 2026-08-08). Единственное
       место, где на бирюзовом лежит ТЕКСТ — слайд «Что получает гость».
       Белый на #10ABB5 давал контраст 2.79:1 при норме 4.5 для мелкого
       текста и 3 для крупного: не проходил ни список 14px, ни заголовок
       64px. #0C838B — тот же тон (H и S не тронуты, снижена только
       светлота), контраст 4.53:1. Декоративные бирюзовые кружки на этих же
       слайдах НЕ трогали: на них текста нет, а рядом с затемнённой плашкой
       они читаются как акценты — так и задумано (решение пользователя
       2026-08-08, выбирал по трём отрисованным вариантам).
       ⚠️ Значение продублировано в js/phone-shared.js (setPhoneSlide8 и
       exitPhoneSlide8 твинят эту же заливку) и в TEAL в js/mobile-slides.js.
       Менять надо ВСЕ ТРИ места. */
    border-radius:34px; background:#0C838B; box-sizing:border-box;
    /* border-width:0 по умолчанию (виден только как заливка, как и было) —
       слайд 7/"Почему нас выбирают" (Figma 2820:1660) впервые твинит ЭТОТ
       элемент (left/top/width/height/border-radius/border-width/background)
       напрямую, см. SLIDE8_PHONE_BACK в js/phone-shared.js: пользователь
       явно попросил (см. AskUserQuestion) остаться на уже показанной
       (Guest, rotationX:180) бирюзовой стороне флипа и просто сжать её в
       тонкую тёмную обводку, а не расфликивать обратно на front. border-
       color фиксирован (не меняется между состояниями, значение видно
       только когда border-width>0), border-style обязателен — без него
       браузер не покажет border вообще, каким бы ни было border-width. */
    border-style:solid; border-color:#1A1A1C; border-width:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    transform:rotateX(180deg);
  }
  /* Точка "Question" (Figma 2898:5064/5065, слайд 7) — сосед .phone-frame-back
     ВНУТРИ того же флип-контейнера, с той же пред-поворотной компенсацией
     (transform:rotateX(180deg) + backface-visibility:hidden) — ПОЭТОМУ можно
     брать буквальные Figma-координаты (БЕЗ поправки на translate-1/2 — у
     "Question" в Figma только -translate-x-1/2, левое значение уже
     пересчитано вручную): calc(50%-586px)=134, минус половина собственной
     ширины 8/2=4 → 130. Обводка/точка НЕ пытаются "прилипнуть" к реальному
     краю экрана — см. отказ от real-fixed anchoring в js/phone-shared.js/
     памяти проекта, это просто design-space координаты. Общая система координат
     с .phone-frame-back (та же родительская cumulative-rotation 360°=0 при
     rotationX:180) — появляется/сидит на сжатой обводке ровно там, где
     нарисовано в Figma. opacity:0 по умолчанию — видна ТОЛЬКО на слайде 7
     (см. setPhoneSlide8/exitPhoneSlide8), на Receive/Guest всегда скрыта
     (там rotationX либо 0, либо 180 без этого элемента вообще участвующего). */
  .phone-frame-question{
    position:absolute; left:130px; top:123px; width:8px; height:8px;
    background:#1A1A1C; border-radius:50%; opacity:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    transform:rotateX(180deg);
    /* transform-origin ЯВНО привязан к той же точке (719.5,379.8), что и у
       .phone-frame-flip/.phone-frame-back (см. подробный комментарий у
       syncPhoneFrameBackOrigin в js/phone-shared.js) — левый/верхний край
       ЭТОГО элемента никогда не меняются (всегда left:130px/top:123px),
       поэтому, в отличие от .phone-frame-back, статичного
       значения достаточно (не нужен onUpdate): (719.5-130)px (379.8-123)px =
       589.5px 256.8px. Без этого дефолтный 50%/50% (центр СОБСТВЕННОГО 8×8
       бокса) не совпадал бы с точкой поворота родителя — та же поправка тем
       же способом пойманного бага (смещение на сотни px по Y после
       композиции двух rotateX(180) вокруг разных точек). */
    transform-origin:589.5px 256.8px;
  }