/* film.css — главная «Умереть красиво». Нижние экраны берут стили из site.css (прежняя сборка), шрифты переопределены здесь.
   Шрифты (решение Михаила): заголовки и крупные фразы — OffBit-DotBold заглавными (точечный: только крупно, от 28 px);
   рукописные акценты — Caveat; мелкий текст — Golos Text; подписи и цифры — JetBrains Mono. */
@font-face { font-family:'OffBit'; src:url('../fonts/OffBit-DotBold.woff2') format('woff2'), url('../fonts/OffBit-DotBold.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:block }
@font-face { font-family:'Caveat'; src:url('../fonts/Caveat.woff2') format('woff2'), url('../fonts/Caveat[wght].ttf') format('truetype'); font-weight:400 700; font-style:normal; font-display:block }
:root { --void:#0F1112; --concrete:#191B1C; --silk:#E9E7E1; --ash:#8E938F; --tint:#CF5C4E; --jade-bright:#41E0AF; --gut:clamp(16px,5vw,72px);
  --display:'OffBit','JetBrains Mono',monospace; --ease-out:cubic-bezier(0.23,1,0.32,1) }
html { scroll-padding-top:0 }
body { background:var(--void) }
::selection { background:rgba(65,224,175,.35); color:var(--silk) }

#film { position:relative }
#stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--concrete); isolation:isolate }
#media { position:absolute; inset:0 }
#media > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; visibility:hidden }
/* тень гроба в финале: та же поза, цвет ушёл */
/* эпилог: тихая подпись мелким моно, без крупной фразы */
.line[data-k="epi"] { width:auto; right:var(--gut) }
.line[data-k="epi"] span { margin:0; font:400 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--ash) }
#smoke { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2 }
/* притемнение снизу и сверху — фраза и счётчик читаются, кадр растворяется в бетоне */
#stage::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(15,17,18,.8) 0%, rgba(15,17,18,0) 36%), linear-gradient(to bottom, rgba(15,17,18,.45) 0%, rgba(15,17,18,0) 20%) }

/* ── фраза сцены: главное — OffBit заглавными, пояснение — Golos */
.lines { position:absolute; inset:0; z-index:5; pointer-events:none }
.line { position:absolute; left:var(--gut); bottom:clamp(72px,13vh,140px); bottom:clamp(72px,13svh,140px); margin:0; visibility:hidden; color:var(--silk);
  width:min(31vw,560px); will-change:opacity,transform }
.line b { display:block; font:400 clamp(30px,3vw,50px)/1.06 var(--display); font-synthesis:none; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance }
.line span { display:block; margin-top:.75em; font:500 clamp(17px,1.35vw,22px)/1.4 'Golos Text',system-ui,sans-serif; letter-spacing:-.01em; color:rgba(233,231,225,.74); text-wrap:pretty }
.line small { display:block; margin-top:1.1em; font:400 clamp(15px,1.15vw,18px)/1.5 'Golos Text',sans-serif; color:var(--ash); max-width:34ch }
/* точка выбора: крупно, столбиком в пустом бетоне слева от кресла */
.line[data-k="s2"] { bottom:auto; top:50%; translate:0 -50%; width:min(27vw,460px) }
.line[data-k="s2"] b { font-size:clamp(40px,4.8vw,84px); line-height:1.02 }
.line[data-k="s6"] b { font-size:clamp(40px,4.4vw,76px); line-height:1 }
/* компьютер: фразы у асан — в левом верхнем углу, в воздухе над фигурой (Михаил 08.10); на телефоне — внизу, как остальные */
@media (min-width:701px) { .line[data-k^="a"] { bottom:auto; top:clamp(96px,14vh,150px) ; top:clamp(96px,14svh,150px) }
  .line[data-k="a1"], .line[data-k="a3"] { top:clamp(40px,6vh,70px) ; top:clamp(40px,6svh,70px) } } /* 38 и 44 года — выше: в воине III текст залезал на пятку */

/* ── рукописные подписи асан */
.notes { position:absolute; inset:0; z-index:5; pointer-events:none }
.note { position:absolute; right:calc(var(--gut) + 2vw); bottom:clamp(96px,17vh,180px); bottom:clamp(96px,17svh,180px); margin:0; visibility:hidden; /* компьютер: справа внизу; телефон — слева вверху (ниже, в @media) */
  font:600 clamp(34px,3vw,50px)/1 'Caveat',cursive; color:var(--jade-bright); transform-origin:0 100%; will-change:opacity,transform }

/* ── счётчик возраста: одометр, цифры катятся вслед за прокруткой */
.age { position:absolute; z-index:6; top:clamp(20px,4vh,40px); top:clamp(20px,4svh,40px); right:var(--gut); display:grid; justify-items:end; gap:8px; color:var(--silk) }
.num { display:flex; font:400 clamp(48px,4.6vw,76px)/1 var(--display); font-synthesis:none; height:1em; overflow:hidden }
.odo { display:flex; flex-direction:column; align-items:center; will-change:transform }
.odo span { height:1em; line-height:1em }
.age .unit { font:400 12px/1 'JetBrains Mono',monospace; letter-spacing:.08em; color:var(--ash); text-transform:uppercase }
#dir { font:400 12px/1 'JetBrains Mono',monospace; letter-spacing:.04em; color:var(--tint) }
#dir::before { content:"↑"; display:inline-block; margin-right:.6em }
#stage[data-dir="вперёд"] #dir::before { content:"↓" }
#stage[data-dir="стоит"] #dir::before { content:"·" }
#hours-row { font:400 12px/1.3 'JetBrains Mono',monospace; color:var(--ash); opacity:0; text-align:right; font-variant-numeric:tabular-nums }
#hours-row b { color:var(--silk); font-weight:500 }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* ── тонкая полоса прогресса и подсказка */
.bar { position:absolute; z-index:6; left:0; right:0; bottom:0; height:2px; background:rgba(233,231,225,.08) }
#bar { position:absolute; inset:0; background:var(--tint); transform-origin:0 50%; transform:scaleX(0) }
.hint { margin:0; position:absolute; z-index:6; left:50%; bottom:clamp(22px,4vh,40px); bottom:clamp(22px,4svh,40px); translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:12px;
  pointer-events:none; opacity:calc(1 - var(--s0,0) * 6) }
/* подсказка первого экрана (Михаил 08.10): тем же точечным OffBit, что «Он умер в 58», и стрелка из точек, по которой сверху вниз течёт огонь */
.hint-text { margin:0; font:400 12px/1 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--ash); text-align:center; white-space:nowrap } /* надпись — как была, мелкая (Михаил 08.10) */

/* ═════ ПЕРВАЯ СЦЕНА — три компоновки (body[data-first]) ═════ */
/* A — кадр во весь экран, фраза внизу слева, счётчик в углу. Тихо, как титр в кино. */
/* B — кадр в «окне» посреди бетона, фраза по центру под окном, возраст слева. Окно раскрывается к концу сцены. */
[data-first="b"] #media { inset:calc(var(--win,1) * 11vh) calc(var(--win,1) * 16vw) calc(var(--win,1) * 27vh) ; inset:calc(var(--win,1) * 11svh) calc(var(--win,1) * 16vw) calc(var(--win,1) * 27svh) }
[data-first="b"] #stage[data-scene="s0"] { background:var(--void) }
[data-first="b"] #stage[data-scene="s0"] #media { box-shadow:0 40px 120px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(233,231,225,.05) }
[data-first="b"] #stage:not([data-scene="s0"]) #media { inset:0 }
[data-first="b"] .line[data-k="s0"] { left:0; right:0; margin:auto; text-align:center; width:auto; max-width:30ch; bottom:clamp(56px,11vh,110px) ; bottom:clamp(56px,11svh,110px) }
[data-first="b"] .age { right:auto; left:var(--gut); top:50%; translate:0 -50%; justify-items:start }
/* C — возраст главный: огромные «58» поверх кадра, фраза сверху слева. К концу сцены цифры уменьшаются в обычный счётчик. */
[data-first="c"] .line[data-k="s0"] { top:clamp(24px,5vh,56px); top:clamp(24px,5svh,56px); bottom:auto }
[data-first="c"] .age { transform-origin:100% 100%; transform:scale(calc(1 + var(--win,1) * 3.2)); top:auto; bottom:clamp(30px,6vh,60px) ; bottom:clamp(30px,6svh,60px) }
[data-first="c"] #stage:not([data-scene="s0"]) .age { transform:none; bottom:auto; top:clamp(20px,4vh,40px) ; top:clamp(20px,4svh,40px) }
[data-first="c"] #stage[data-scene="s0"] .age .unit, [data-first="c"] #stage[data-scene="s0"] #dir { opacity:0 }

/* ═════ ТЕЛЕФОН: кадр 9:16 во весь экран, фраза внизу (лица в кадрах — в верхней половине) ═════ */
@media (max-width:700px) {
  #stage::after { background:linear-gradient(to top, rgba(15,17,18,.88) 0%, rgba(15,17,18,.55) 22%, rgba(15,17,18,0) 44%), linear-gradient(to bottom, rgba(15,17,18,.4) 0%, rgba(15,17,18,0) 16%) }
  .line, .line[data-k="s2"] { left:16px; right:16px; width:auto; bottom:calc(40px + env(safe-area-inset-bottom)); top:auto; translate:none }
  .line b { font-size:30px; line-height:1.08 }
  .line[data-k="s2"] b { font-size:36px }
  .line[data-k="s6"] b { font-size:40px }
  .line span { font-size:17px; margin-top:.55em }
  .line small { font-size:15px }
  /* подпись асаны — над фразой слева: сверху её задевают поднятые руки и ноги (треугольник, стойка на руках) */
  .note { left:20px; right:auto; bottom:auto; top:calc(21vh + env(safe-area-inset-top)); top:calc(21svh + env(safe-area-inset-top)); font-size:34px }
  .age { top:calc(14px + env(safe-area-inset-top)); right:16px; gap:5px; max-width:104px; text-align:right }
  /* узкий столбик справа: подписи переносятся, чтобы не заходить на голову героя в центре кадра */
  #dir, #hours-row { font-size:11px; line-height:1.35 }
  .num { font-size:44px }
  .hint { bottom:calc(16px + env(safe-area-inset-bottom)); gap:10px }
  /* первая фраза приподнята — под ней стрелка и подсказка */
  .line[data-k="s0"] { bottom:calc(112px + env(safe-area-inset-bottom)) }
  [data-first="b"] #media { inset:calc(var(--win,1) * 9vh) calc(var(--win,1) * 6vw) calc(var(--win,1) * 26vh) ; inset:calc(var(--win,1) * 9svh) calc(var(--win,1) * 6vw) calc(var(--win,1) * 26svh) }
  [data-first="b"] #stage[data-scene="s0"] .age { left:auto; right:16px; top:10px; translate:none; justify-items:end }
  [data-first="b"] #stage[data-scene="s0"] #dir { display:none }
  [data-first="c"] .age { transform:scale(calc(1 + var(--win,1) * 2.2)) }
}
@media (prefers-reduced-motion: reduce) {
  #smoke { display:none } #media { filter:none!important }
}

/* ═════ нижние экраны в новом тоне: заголовки OffBit заглавными (только крупно), без индексов-приборов ═════ */
main .idx { display:none }
h1, h2, h3, .logo { font-family:var(--display); font-weight:400; font-synthesis:none; text-transform:uppercase; letter-spacing:.01em; line-height:1.02 }
.big-h { font-size:clamp(40px,6vw,96px); font-weight:400; text-wrap:balance }
.steps b { font-family:var(--display); font-weight:400; font-size:28px; line-height:1.05; letter-spacing:.01em }
.feats h3 { font-size:28px; white-space:normal; line-height:1.05 }
.feats li { grid-template-columns:1fr }
.price .num { font-family:var(--display); font-weight:400; letter-spacing:0 }
.logo { font-size:28px }
.modal-t { font-size:28px }
.store { font-family:'Golos Text',sans-serif; font-weight:500; text-transform:none; font-size:16px }
.btn { font-family:'Golos Text',sans-serif; font-weight:600; font-size:16px; letter-spacing:.04em }
.foot-note b { color:var(--silk); font-weight:500 }
@media (max-width:700px) { .feats h3 { font-size:28px } .big-h { font-size:40px } }
.price .unit { font:500 22px/1 'Golos Text',sans-serif; text-transform:none; letter-spacing:0; color:var(--ash) }

/* ═════ ЭКРАН ЗАГРУЗКИ (рисунок — js/loader.js; варианты #loader[data-v="a" | "b"]) ═════ */
html.loading, html.loading body { overflow:hidden; overscroll-behavior:none }
html.loading body { touch-action:none }
#loader { position:fixed; inset:0; z-index:200; background:var(--concrete); color:var(--silk); --p:0; overflow:hidden;
  transition:opacity .9s var(--ease-out), visibility 0s linear .9s }
#loader.done { opacity:0; visibility:hidden; pointer-events:none }
/* текст экрана загрузки — только когда пришли шрифты (иначе на миг мелькнёт чужой) */
#loader:not(.caveat-ok) .ld-phrase, #loader:not(.fonts-ok) .ld-pct { visibility:hidden } /* без своего шрифта — не рисуем вовсе */
/* зерно, как на всём сайте */
#loader::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") }
.ld-canvas { position:absolute; inset:0; width:100%; height:100% }
/* рукописная фраза: «чернила» идут слева направо вслед за загрузкой */
.ld-phrase { position:absolute; left:0; right:0; bottom:calc(13vh + 40px); bottom:calc(13svh + 40px); width:max-content; margin:0 auto; font:600 clamp(40px,4.4vw,64px)/1.05 'Caveat',cursive; white-space:nowrap }
#loader[data-v="b"] .ld-phrase { bottom:calc(6vh + 40px) ; bottom:calc(6svh + 40px) }
.ld-ghost { color:rgba(233,231,225,.09) }
/* поля под росчерки Caveat (хвост «У» уходит влево за букву) — иначе обрезаются краем блока и маской */
.ld-ghost, .ld-ink { padding:0 .3em }
.ld-ink { position:absolute; inset:0; clip-path:inset(-20% calc((1 - var(--p)) * 100%) -20% -0.3em); transition:clip-path .45s var(--ease-out) }
/* полоса и процент — только в спокойном режиме (prefers-reduced-motion): там холст не рисуется */
.ld-row { position:absolute; left:50%; top:50%; translate:-50% -50%; display:none; align-items:center; gap:16px; width:min(340px,76vw) }
.ld-bar { flex:1; height:1px; background:rgba(233,231,225,.12); overflow:hidden }
.ld-bar i { display:block; height:100%; background:var(--tint); transform-origin:0 50%; transform:scaleX(var(--p)) }
.ld-pct { font:400 28px/1 var(--display); font-synthesis:none; min-width:3.4ch; text-align:right }
.ld-msg { position:absolute; left:16px; right:16px; bottom:calc(5vh + 8px); bottom:calc(5svh + 8px); margin:0; font:400 12px/1.4 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--ash); text-align:center }
#loader:not(.err) .ld-msg { opacity:0 } /* в норме подписи рисует холст */
#loader.err .ld-msg { color:var(--tint); bottom:calc(5vh + 64px) ; bottom:calc(5svh + 64px) }
#loader.err .ld-ink { clip-path:none; opacity:.25 }
.ld-retry { position:absolute; left:50%; bottom:5vh; bottom:5svh; translate:-50% 0; min-height:44px; padding:0 20px; background:none; border:1px solid rgba(233,231,225,.25); border-radius:2px; color:var(--silk);
  font:500 15px/1 'Golos Text',sans-serif; cursor:pointer; transition:border-color .2s ease }
@media (hover:hover) and (pointer:fine) { .ld-retry:hover { border-color:var(--silk) } }
@media (prefers-reduced-motion: reduce) {
  #loader { transition:opacity .3s ease, visibility 0s linear .3s }
  .ld-canvas { display:none } .ld-row { display:flex } .ld-ink { transition:none }
  .ld-phrase { bottom:auto; top:calc(50% - 110px) }
}

/* ── мини-батарея ожидания: в левом верхнем углу, пока догружается ролик, до которого долистали */
#wait { position:absolute; z-index:7; top:clamp(20px,4vh,40px); top:clamp(20px,4svh,40px); left:var(--gut); display:grid; grid-template-columns:auto auto; align-items:center; gap:6px 12px;
  opacity:0; translate:0 -6px; pointer-events:none; transition:opacity .3s var(--ease-out), translate .3s var(--ease-out) }
#wait.on { opacity:1; translate:0 0 }
#wait canvas { width:72px; height:28px }
.wait-pct { font:400 28px/1 var(--display); font-synthesis:none; color:var(--silk) }
.wait-msg { grid-column:1 / -1; font:400 11px/1.3 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--ash) }
@media (max-width:700px) { #wait { top:calc(14px + env(safe-area-inset-top)); left:16px } }
@media (prefers-reduced-motion: reduce) { #wait { transition:none } }

/* ── светлый финал (stage[data-tone="light"]): кадры v13–v14 светлые — текст тёмный, подложка снизу светлая и тонкая */
#stage::after { transition:opacity .5s var(--ease-out) }
#stage::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .5s var(--ease-out);
  background:linear-gradient(to top, rgba(243,236,224,.7) 0%, rgba(243,236,224,0) 34%) }
#stage[data-tone="light"]::after { opacity:0 }
#stage[data-tone="light"]::before { opacity:1 }
#stage[data-tone="light"] .line, #stage[data-tone="light"] .age { color:#191B1C }
#stage[data-tone="light"] .line span { color:rgba(25,27,28,.74) }
#stage[data-tone="light"] .line small, #stage[data-tone="light"] .line[data-k="epi"] span,
#stage[data-tone="light"] .age .unit, #stage[data-tone="light"] #hours-row { color:#4E534F }
#stage[data-tone="light"] #hours-row b { color:#191B1C }
#stage[data-tone="light"] #dir { color:#0C7A5B }
.line, .age, .line span, .line small, #dir, #hours-row { transition:color .4s ease }
/* стрелка вниз у подсказки на первом экране: мягко покачивается, зовёт листать (08.10) */
.hint-arrow { display:block; overflow:visible }
.hint-arrow circle { fill:rgba(233,231,225,.22); animation:hint-fire 1.9s linear infinite; animation-delay:calc(var(--i) * .14s) }
/* огонь бежит по точкам сверху вниз: пепел → коралл → тёплый свет → пепел */
@keyframes hint-fire {
  0%   { fill:rgba(233,231,225,.22); filter:none }
  18%  { fill:#CF5C4E; filter:drop-shadow(0 0 3px rgba(207,92,78,.9)) }
  30%  { fill:#F0C08A; filter:drop-shadow(0 0 5px rgba(240,192,138,.95)) }
  48%  { fill:#CF5C4E; filter:drop-shadow(0 0 2px rgba(207,92,78,.6)) }
  70%,100% { fill:rgba(233,231,225,.22); filter:none } }
@media (prefers-reduced-motion: reduce) { .hint-arrow circle { animation:none; fill:#CF5C4E } }

/* два абзаца подряд в блоке «Покажи мне, что может твоё тело» — с воздухом между ними */
.lead + .lead { margin-top:1.1em }

/* ── 03 / приложение: два телефона — слева бесплатно, справа по подписке; между ними «ЧТО ВНУТРИ»; экраны листаются вместе (08.10) */
.tour { position:relative; height:calc(var(--n) * 80vh + 100vh); height:calc(var(--n) * 80svh + 100svh); border-top:1px solid rgba(233,231,225,.08) }
.tour-pin { position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-rows:1fr auto; overflow:hidden; padding:clamp(20px,4vh,48px) 0 clamp(14px,3vh,28px) ; padding:clamp(20px,4svh,48px) 0 clamp(14px,3svh,28px) }
.duo-stage { display:grid; grid-template-columns:auto auto auto; justify-content:center; align-items:center; gap:clamp(32px,6vw,120px); padding:0 var(--gut); min-height:0 }
.duo-col { display:grid; justify-items:center; gap:clamp(12px,2vh,22px) ; gap:clamp(12px,2svh,22px) }
.duo-tag { margin:0; font:400 clamp(22px,2vw,34px)/1 var(--display); font-synthesis:none; text-transform:uppercase; letter-spacing:.02em }
.duo-col.free .duo-tag { color:var(--jade-bright) }
.duo-col.paid .duo-tag { color:#CF5C4E } /* коралловый, как «а дам-ка…» (Михаил 08.10) */
.duo-col.paid .duo-tag::after { content:""; display:block; margin:8px auto 0; width:28px; height:2px; background:#CF5C4E }
.duo-h { margin:0; text-align:center; font:400 clamp(40px,4.6vw,80px)/1 var(--display); font-synthesis:none; text-transform:uppercase; letter-spacing:.01em }
/* телефон — как настоящий: титановая рамка с бликами по граням, тонкая чёрная рамка экрана, «островок» сверху, кнопки сбоку,
   мягкий отблеск стекла и тень на полу. Без свечений: премиум — это сдержанность (impeccable / emil-design-eng). */
.tour-phone { --r:clamp(30px,3.6vh,50px); --r:clamp(30px,3.6svh,50px); position:relative; height:min(58vh,640px); height:min(58svh,640px); aspect-ratio:620/1342; border-radius:var(--r);
  background:linear-gradient(135deg,#8E9296 0%,#3A3D40 14%,#1C1E20 34%,#2B2E31 52%,#16181A 70%,#6D7175 92%,#A7ABAF 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.6) inset, 0 50px 70px -40px rgba(0,0,0,.95), 0 22px 40px -24px rgba(0,0,0,.7) }
.tour-phone::before { content:""; position:absolute; inset:clamp(3px,.35vh,4px); inset:clamp(3px,.35svh,4px); border-radius:calc(var(--r) - 3px); background:#050506; box-shadow:0 0 0 1px rgba(255,255,255,.05) }
.tour-screen { position:absolute; inset:clamp(8px,1vh,12px); inset:clamp(8px,1svh,12px); border-radius:calc(var(--r) - 9px); overflow:hidden; background:#191B1C; isolation:isolate }
.ph-island { position:absolute; z-index:3; top:1.6%; left:50%; translate:-50% 0; width:29%; height:2.6%; border-radius:999px; background:#000 }
.ph-glare { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.035) 100%) }
.ph-btn { position:absolute; width:3px; border-radius:2px; background:linear-gradient(90deg,#55595D,#2A2D30) }
.ph-act { left:-2px; top:17%; height:4% } .ph-vol1 { left:-2px; top:24%; height:7.5% } .ph-vol2 { left:-2px; top:33%; height:7.5% } .ph-pow { right:-2px; top:27%; height:11% }
.duo-col.free .duo-tag::after { content:""; display:block; margin:8px auto 0; width:28px; height:2px; background:var(--jade-bright) }
.tour-strip { position:absolute; inset:0; will-change:transform }
.tour-strip img { position:absolute; left:0; width:100%; height:100%; object-fit:contain; object-position:top center; display:block }
.duo-caps { position:relative; width:100%; min-width:min(26vw,300px); height:3.4em; margin:0; padding:0; list-style:none; text-align:center }
.duo-caps li { position:absolute; inset:0; display:grid; gap:4px; align-content:start; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .45s cubic-bezier(.23,1,.32,1), transform .45s cubic-bezier(.23,1,.32,1), visibility 0s .45s }
.duo-caps li.on { opacity:1; visibility:visible; transform:none; transition-delay:0s }
.duo-caps b { font:600 clamp(16px,1.25vw,20px)/1.2 'Golos Text',system-ui,sans-serif }
.duo-caps span { font:400 clamp(13px,1vw,16px)/1.35 'Golos Text',system-ui,sans-serif; color:var(--ash) }
.tour-more { margin:0; text-align:center; color:var(--ash); font-size:12px; letter-spacing:.04em }
@media (max-width:700px) {
  .tour { height:calc(var(--n) * 90vh + 100vh) ; height:calc(var(--n) * 90svh + 100svh) }
  .tour-pin { padding:calc(16px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)) }
  .duo-stage { grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:14px 12px; padding:0 14px; align-items:start }
  .duo-h { grid-column:1 / -1; grid-row:1; font-size:38px } .duo-h br { display:none }
  .duo-col { grid-row:2 } .duo-col.free { grid-column:1 } .duo-col.paid { grid-column:2 }
  .duo-tag { font-size:18px }
  .tour-phone { height:auto; width:100%; max-height:52vh; max-height:52svh; max-width:calc(52vh * 620 / 1342) ; max-width:calc(52svh * 620 / 1342) }
  .duo-caps { min-width:0; height:4.6em }
  .duo-caps b { font-size:14px } .duo-caps span { font-size:12px }
  .tour-more { display:none }
}
@media (prefers-reduced-motion: reduce) { .duo-caps li { transition:none } }

/* выделение в тексте коралловым — как «время идёт назад» (Михаил 08.10) */
.accent { font-style:normal; color:#CF5C4E }

/* ── обо мне: фото на всю ширину, текст лежит на тёмной нижней части фото; телефон — фото по лицу, текст под ним (08.10) */
.about { position:relative; background:#0F1112; overflow:hidden }
.about-photo { display:block; position:relative }
.about-photo img { display:block; width:100%; height:min(100vh,56.25vw); height:min(100svh,56.25vw); object-fit:cover; object-position:60% 30% }
.about-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,17,18,0) 62%, rgba(15,17,18,.8) 88%, #0F1112 100%) }
.about-text { position:relative; margin-top:calc(-1 * clamp(150px,19vh,230px)); margin-top:calc(-1 * clamp(150px,19svh,230px)); padding-bottom:clamp(64px,10vh,120px) ; padding-bottom:clamp(64px,10svh,120px) }
.about-text .big-h { margin:0 0 .45em; max-width:14ch }
.about-text .lead { max-width:46ch; margin:0 0 1.6em; color:rgba(233,231,225,.86) }
.about-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 48px; max-width:980px }
.about-list li { position:relative; padding-left:22px; font:500 clamp(15px,1.15vw,18px)/1.45 'Golos Text',system-ui,sans-serif; color:rgba(233,231,225,.8) }
.about-list li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:#CF5C4E }
@media (max-width:700px) {
  .about-photo img { height:auto; aspect-ratio:9/16; object-position:center }
  .about-photo::after { display:none } /* у телефонного фото своя дуга затемнения внизу */
  .about-text { margin-top:-34vw; padding-bottom:64px }
  .about-text .big-h { font-size:38px }
  .about-list { grid-template-columns:1fr; gap:12px }
}
.about-who { margin:0 0 .9em; font:400 13px/1.4 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--jade-bright) }
/* компьютер (Михаил 08.10): заголовок — на светлой стене слева от головы, подпись — справа от головы; внизу остаются абзац и список */
@media (min-width:701px) {
  .about { --ph:min(100vh,56.25vw) ; --ph:min(100svh,56.25vw) }
  .about-text { position:static; margin-top:calc(-1 * clamp(40px,5vh,70px)) ; margin-top:calc(-1 * clamp(40px,5svh,70px)) }
  .about-text .lead, .about-list { position:relative; z-index:2 }
  .about-text .big-h { position:absolute; z-index:2; top:calc(var(--ph) * .1); right:53%; margin:0; max-width:none; text-align:right;
    font-size:clamp(32px,3.2vw,58px); line-height:1.04; color:#191B1C }
  .about-who { position:absolute; z-index:2; top:calc(var(--ph) * .3); left:74.5%; max-width:15vw; margin:0; color:#191B1C; font-size:13px; line-height:1.5 }
}
/* кнопка «Пропустить историю» — всегда видна поверх фильма, сразу к блоку о Михаиле (08.10) */
.skip { position:absolute; z-index:7; top:clamp(20px,4vh,40px); top:clamp(20px,4svh,40px); left:var(--gut); padding:9px 14px; border:1px solid rgba(233,231,225,.28); border-radius:999px;
  font:400 12px/1 'JetBrains Mono',monospace; letter-spacing:.06em; color:var(--silk); text-decoration:none; background:rgba(15,17,18,.35); backdrop-filter:blur(6px);
  transition:border-color .2s, color .2s, background .2s }
.skip:hover { border-color:var(--jade-bright); color:var(--jade-bright) }
.skip:focus-visible { outline:2px solid var(--jade-bright); outline-offset:3px }
#stage[data-tone="light"] .skip { color:#191B1C; border-color:rgba(25,27,28,.3); background:rgba(243,236,224,.5) }
@media (max-width:700px) { .skip { top:calc(14px + env(safe-area-inset-top)); left:16px; padding:8px 12px; font-size:11px } }
/* телефон (Михаил 08.10): заголовок одной строкой под надписью MIHAILUSTIN на футболке, подпись — на стене справа между софтбоксом и камерой;
   абзац и список поднимаются выше. Положение — в долях высоты фото 9:16 (ширина экрана × 16/9). */
@media (max-width:700px) {
  .about { --phH:calc(100vw * 16 / 9) }
  .about-text { position:static; margin-top:-44vw }
  .about-text .lead, .about-list { position:relative; z-index:2 }
  .about-text .big-h { position:absolute; z-index:2; top:calc(var(--phH) * .675); left:0; right:0; margin:0; max-width:none; text-align:center; white-space:nowrap;
    font-size:5.4vw; line-height:1; color:#F3EEE6; text-shadow:0 1px 10px rgba(0,0,0,.35) }
  .about-text .big-h br { display:none }
  .about-who { position:absolute; z-index:2; top:calc(var(--phH) * .145); right:10px; max-width:22vw; margin:0; text-align:right; font-size:9px; line-height:1.45; letter-spacing:.03em; color:#191B1C }
}
/* ── ролик про фасции: обложка с кнопкой, по нажатию — плеер YouTube (08.10) */
.vid .big-h { max-width:16ch }
.vid-frame { position:relative; margin-top:clamp(20px,3vh,36px); margin-top:clamp(20px,3svh,36px); max-width:1100px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(233,231,225,.1), 0 40px 80px -40px rgba(0,0,0,.9) }
.vid-poster { all:unset; position:absolute; inset:0; cursor:pointer; display:block }
.vid-poster img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.23,1,.32,1), filter .3s }
.vid-poster:hover img { transform:scale(1.02); filter:brightness(1.05) }
.vid-poster:focus-visible { outline:2px solid var(--jade-bright); outline-offset:-4px }
.vid-play { position:absolute; left:50%; top:50%; width:clamp(64px,7vw,92px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:rgba(207,92,78,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .25s cubic-bezier(.23,1,.32,1) }
.vid-play::after { content:""; position:absolute; left:54%; top:50%; translate:-50% -50%; border-style:solid; border-width:13px 0 13px 21px; border-color:transparent transparent transparent #fff }
.vid-poster:hover .vid-play { transform:scale(1.06) }
.vid-poster:active .vid-play { transform:scale(.97) }
.vid-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.vid-meta { margin:14px 0 0; color:var(--ash); font-size:12px; letter-spacing:.04em }
.vid-meta a { color:var(--jade-bright) }
/* правки Михаила 08.10: «Покажи мне…» — нефритовым, как в приложении; меньше пустоты между «о себе» и методикой;
   в телефоне абзац про простатит и сына — нефритовым, чтобы отличался от списка */
#path-h { color:#41E0AF }
#path { padding-top:clamp(32px,5vh,56px) ; padding-top:clamp(32px,5svh,56px) }
.about { padding-bottom:0 }
.about-text { padding-bottom:clamp(40px,6vh,64px) ; padding-bottom:clamp(40px,6svh,64px) }
@media (max-width:700px) {
  #path { padding-top:28px }
  .about-text { padding-bottom:32px }
  .about-text .lead { color:#41E0AF }
}
/* ролик на компьютере: заголовок слева, видео справа — блок целиком в одном экране (08.10) */
@media (min-width:701px) {
  .vid .wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); grid-template-rows:auto auto 1fr; column-gap:clamp(32px,4vw,72px); align-items:start }
  .vid .idx { grid-column:1; grid-row:1 }
  .vid .big-h { grid-column:1; grid-row:2; font-size:clamp(34px,3.2vw,56px); max-width:none }
  .vid .vid-meta { grid-column:1; grid-row:3; align-self:start }
  .vid-frame { grid-column:2; grid-row:1 / span 3; margin-top:0; max-width:none; width:100% }
}
/* у ролика верхняя подпись нужна: «ещё сомневаешься?…» */
main .vid .idx { display:block; margin:0 0 .9em; font-size:12px; letter-spacing:.06em }
/* телефон, правки Михаила 08.10: подпись нефритовая, левее стойки софтбокса, «USTIN» отдельной строкой; список в две колонки, как на компьютере */
.ph-only { display:none }
@media (max-width:700px) {
  .ph-only { display:inline }
  .about-who { right:9.5vw; max-width:19vw; top:calc(var(--phH) * .155); color:#111; font-weight:500; font-size:8px; letter-spacing:.02em }
  .about-list { grid-template-columns:1fr 1fr; gap:12px 14px }
  .about-list li { font-size:13.5px; line-height:1.4; padding-left:16px }
  .about-list li::before { width:6px; height:6px; top:.55em }
}
/* соцсети в подвале (08.10) */
.foot-soc { display:flex; flex-wrap:wrap; gap:10px 28px; margin:6px 0 0; font:400 clamp(20px,1.8vw,28px)/1 var(--display); font-synthesis:none; text-transform:uppercase; letter-spacing:.02em }
.foot-soc a { color:var(--silk); text-decoration:none; transition:color .2s }
.foot-soc a:hover { color:#41E0AF }
.foot-meta { opacity:.6; font-size:10px }
.vid-soc { margin-top:clamp(18px,3vh,32px) ; margin-top:clamp(18px,3svh,32px) }
@media (min-width:701px) { .vid .vid-soc { grid-column:1; grid-row:4; flex-direction:column; gap:14px } .vid .wrap { grid-template-rows:auto auto auto 1fr } .vid-frame { grid-row:1 / span 4 } }
/* ── отзывы: карусель на весь экран (08.10) */
.reviews-sec { position:relative; height:100vh; height:100svh; background:#0F1112 }
.reviews-sec iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block }


.dust-layer { position:absolute; inset:0; width:100%; height:100%; z-index:7; pointer-events:none } /* размер холста в css задаём явно, иначе на iPhone (плотный экран) частицы вдвое крупнее */

/* правки Михаила 08.10 (телефон): фраза в 42 года (и все фразы асан) и «Умереть красиво» — ниже, чтобы не заходить на ноги и коврик;
   подпись эпилога — в правый нижний угол столбиком, на плечо героя: на светлой рубашке читается легче */
@media (max-width:700px) {
  .line[data-k^="a"], .line[data-k="s6"] { bottom:calc(14px + env(safe-area-inset-bottom)) }
  .line[data-k="epi"] { left:auto; right:16px; bottom:calc(28px + env(safe-area-inset-bottom)); text-align:right }
  .line[data-k="epi"] span { font-size:13px; line-height:1.6 }
  .line[data-k="epi"] .sep { display:none }
}
.sep { font-style:normal }
/* «придумал, как обычному пользователю…» — главный пункт (Михаил 08.10): текст коралловый, точка нефритовая */
.about-list li.hl { color:#CF5C4E }
.about-list li.hl::before { background:#41E0AF }

/* «Что внутри», правки Михаила 08.10: телефон листается нажатием и свайпом; подписи под экранами крупнее и светлее;
   на узком экране телефоны идут друг под другом (сначала бесплатно, потом по подписке) и секция не прилипает;
   вокруг платного — нефритовые частицы (js/swarm.js) */
.tour-strip img { -webkit-user-drag:none; pointer-events:none }
.tour-phone { cursor:pointer; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent }
.tour-phone:focus-visible { outline:2px solid var(--jade-bright); outline-offset:6px }
.swarm { position:absolute; z-index:-1; pointer-events:none }
.duo-dots { display:flex; gap:7px; justify-content:center; margin-top:-4px }
.duo-dots i { width:6px; height:6px; border-radius:50%; background:rgba(233,231,225,.22); transition:background .3s, transform .3s }
.duo-dots i.on { background:var(--jade-bright); transform:scale(1.25) }
.duo-caps { height:4.2em }
.duo-caps b { font-size:clamp(18px,1.45vw,23px); color:var(--silk) }
.duo-caps span { font-size:clamp(15px,1.1vw,17px); color:#C9C7C0 }
.duo-caps .jade { color:var(--jade-bright) }
@media (max-width:700px) {
  .tour { height:auto }
  .tour-pin { position:static; height:auto; overflow:visible; padding:72px 0 56px }
  .duo-stage { grid-template-columns:1fr; grid-template-rows:none; gap:28px; padding:0 16px; justify-items:center }
  .duo-h { grid-column:auto; font-size:40px; margin-bottom:8px }
  .duo-col, .duo-col.free, .duo-col.paid { grid-column:auto; grid-row:auto; width:100%; gap:14px }
  .duo-col.paid { margin-top:40px }
  .duo-tag { font-size:24px }
  .tour-phone { width:min(72vw,300px); max-width:none; max-height:none; height:auto }
  .duo-caps { height:4.4em; max-width:340px }
  .duo-caps b { font-size:19px } .duo-caps span { font-size:15px }
}

/* телефон, «Умереть красиво» (Михаил 08.10): заголовок — вверху слева, над фигурой; абзац — внизу под стопами. Так текст не ложится на человека */
@media (max-width:700px) {
  .line[data-k="s6"] { top:calc(56px + env(safe-area-inset-top)); bottom:calc(14px + env(safe-area-inset-bottom)); right:140px }
  .line[data-k="s6"] b { position:absolute; top:0; left:0; right:0 }
  .line[data-k="s6"] small { position:absolute; bottom:0; left:0; right:-124px; margin:0 }
}

/* ── мазки каллиграфии Михаила (стиль Покраса Лампаса) по углам секций: белые, видны на ~10 % (просьба Михаила 09.10) */
.lampas { position:absolute; z-index:0; width:clamp(170px,22vw,360px); height:auto; opacity:.1; pointer-events:none; user-select:none; -webkit-user-drag:none }
.has-lampas { position:relative; overflow:hidden }
.has-lampas > .wrap, .foot > *:not(.lampas) { position:relative; z-index:1 }
.lampas.tl { top:-4%; left:-3%; transform:rotate(-12deg) }
.lampas.br { right:-4%; bottom:-6%; transform:rotate(9deg) }
.lampas.tr { top:3%; right:-5%; transform:rotate(13deg) }
.lampas.bl { left:-5%; bottom:-3%; transform:rotate(-8deg) }
.about .lampas.man { width:clamp(120px,13vw,210px); left:2%; bottom:4%; transform:none; z-index:1 } /* мужская фигура, меньше, слева внизу — не выше плеча (Михаил 09.10) */
.lampas.whole { right:3%; bottom:4%; transform:none } /* круг целиком в кадре */
@media (min-width:701px) { .lampas.whole { bottom:auto; top:38%; right:6%; width:clamp(260px,26vw,440px) } } /* компьютер: справа от текста, где воздух (Михаил 09.10) */
.tour .lampas { width:clamp(140px,16vw,260px) }
.tour .lampas.ml { left:1.5%; top:16%; transform:rotate(-10deg) } /* компьютер: слева, ближе к верху телефона (Михаил 09.10) */
.tour .lampas.mr { right:auto; left:calc(100% + 6px); top:auto; bottom:17%; width:clamp(130px,12.5vw,200px); transform:rotate(10deg) } /* компьютер: сразу правее телефона, ближе к его низу (Михаил 09.10) */
@media (max-width:700px) {
  .lampas { width:40vw }
  .about .lampas.man { width:28vw; left:auto; right:6%; bottom:2% } /* телефон: справа внизу под списком (Михаил 09.10) */
  .lampas.whole { width:34vw; right:4%; bottom:3% }
  .tour .lampas { width:34vw }
  .tour .lampas.ml { top:clamp(120px,17vh,170px); top:clamp(120px,17svh,170px); left:3%; width:30vw; transform:rotate(-10deg) } /* телефон: ниже заголовка, слева на уровне «Бесплатно» (Михаил 09.10) */ .tour .lampas.mr { bottom:1%; right:4%; width:30vw } /* телефон: складка целиком в правом нижнем углу (Михаил 09.10) */
}
/* слева у бесплатного телефона — своя фигура под каждый экран, меняются плавно при листании (Михаил 09.10) */
.lampas-set { aspect-ratio:1/1; opacity:1 }
/* колесо (Михаил 09.10): текущая уходит вверх и гаснет, следующая выезжает снизу */
.lampas-set img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:translateY(55%); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.8,.3,1) }
.lampas-set img.on { opacity:.1; transform:none }
.lampas-set img.out { opacity:0; transform:translateY(-55%) }
@media (prefers-reduced-motion: reduce) { .lampas-set img { transition:opacity .4s; transform:none } }

/* ── «самая вкусная конфетка»: золотая плашка про 1000 ₽ за платёж друга (Михаил 09.10) — тёмная, в золотых крапинках,
   золотой кант переливается, по плашке идёт блик, вокруг медленно вращаются лучи, крапинки мерцают */
.ref.gold { position:relative; isolation:isolate; overflow:hidden; border-left:0; border-radius:18px; padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px);
  background: radial-gradient(130% 90% at 18% 0%, rgba(255,214,120,.16), transparent 55%), 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='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .5 .5 .9 .2 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg,#1B1711,#0F0E0C 58%,#171309);
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 40px 80px -40px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,240,200,.08) }
.ref.gold::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:linear-gradient(120deg,#7A5C18,#F3DC8E 25%,#B8902E 45%,#FFF3C4 62%,#A37E22 80%,#7A5C18); background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:gold-rim 7s linear infinite }
.ref.gold::after { content:""; position:absolute; top:-60%; bottom:-60%; left:-70%; width:38%; pointer-events:none; z-index:2;
  background:linear-gradient(100deg, transparent 0%, rgba(255,243,205,.05) 35%, rgba(255,243,205,.26) 50%, rgba(255,243,205,.05) 65%, transparent 100%);
  transform:skewX(-18deg); animation:gold-sheen 6s cubic-bezier(.4,0,.2,1) infinite }
.gold-rays { position:absolute; inset:-45%; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.9;
  background:conic-gradient(from 0deg, transparent 0 18%, rgba(255,226,150,.13) 21%, transparent 24%, transparent 47%, rgba(255,226,150,.08) 50%, transparent 53%, transparent 74%, rgba(255,226,150,.11) 77%, transparent 80%);
  animation:gold-spin 18s linear infinite }
.gold-sparks { position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image: radial-gradient(circle, #FFF6D2 0 1px, transparent 1.8px), radial-gradient(circle, #FFE9A6 0 .8px, transparent 1.6px), radial-gradient(circle, #FFF6D2 0 1.2px, transparent 2px), radial-gradient(circle, #F6D77A 0 .9px, transparent 1.7px), radial-gradient(circle, #FFF6D2 0 .7px, transparent 1.4px);
  background-size: 160px 140px, 120px 170px, 210px 190px, 90px 110px, 140px 90px; background-position: 12px 20px, 60px 80px, 30px 110px, 80px 15px, 100px 60px;
  animation:gold-twinkle 2.8s ease-in-out infinite alternate }
.ref.gold > p { position:relative; z-index:4 }
.ref.gold .idx { color:#E6C86A }
.gold-sum { margin:0 }
.gold-sum b { display:block; font:400 clamp(44px,4.6vw,70px)/1 var(--display); letter-spacing:0;
  background:linear-gradient(180deg,#FFF4C8 0%,#F0CF6E 48%,#B8902E 72%,#F6DE92 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(240,207,110,.38)) }
.gold-sum span { display:block; margin-top:10px; font:600 clamp(15px,1.15vw,18px)/1.35 'Golos Text',sans-serif; color:#F3EAD0 }
.ref.gold p:last-child { margin-top:14px; color:rgba(243,234,208,.78) }
@keyframes gold-sheen { 0%, 48% { left:-70% } 100% { left:140% } }
@keyframes gold-spin { to { transform:rotate(360deg) } }
@keyframes gold-rim { to { background-position:300% 0 } }
@keyframes gold-twinkle { from { opacity:.35 } to { opacity:1 } }
@media (prefers-reduced-motion: reduce) { .ref.gold::before, .ref.gold::after, .gold-rays, .gold-sparks { animation:none } }
/* телефон, «Что внутри» (Михаил 09.10: не видно «Бесплатно» сверху и подписи снизу — макет выше экрана с панелями браузера):
   метка прилипает к верху экрана, подпись — к низу, пока листаешь колонку; сам макет чуть меньше */
@media (max-width:700px) {
  .tour .duo-col { position:relative; gap:10px }
  .tour .duo-col .duo-tag { position:static; width:100%; margin:0; padding:6px 0 4px; text-align:center; background:none } /* без прилипания и подложки: блок и так помещается, а тёмная подложка давала прямоугольник на золотом свете (Михаил 09.10) */
  .tour .duo-col .tour-phone { width:min(64vw,260px) }
  .tour .duo-col .duo-caps { height:auto; min-height:4.2em; padding:12px 0 8px } /* без прилипания: иначе подпись платного телефона всплывала под бесплатным */
}
@media (max-width:700px) {
  /* макет по высоте экрана с панелями браузера (svh): метка + телефон + точки + подпись помещаются целиком даже в Safari и Telegram */
  .tour .duo-col .tour-phone { height:min(calc(100vh - 250px), 560px); height:min(calc(100svh - 250px), 560px); width:auto; max-width:72vw; aspect-ratio:620/1342 }
  .tour .duo-col .duo-caps { min-height:3.6em; padding:10px 0 6px }
  .tour .duo-col .duo-dots { margin-top:-2px }
}

/* ── платный телефон «По подписке»: тёплый золотой свет из центра по бокам, чтобы экран выделялся (Михаил 09.10) */
.duo-col.paid { position:relative; isolation:isolate }
.duo-col.paid::before { content:""; position:absolute; inset:0 -60%; z-index:-2; pointer-events:none; /* по вертикали — в пределах колонки: свет гаснет до границы с соседним блоком (Михаил 09.10) */
  background:radial-gradient(closest-side at 50% 46%, rgba(243,215,128,.36), rgba(243,215,128,.18) 34%, rgba(243,215,128,.07) 60%, rgba(243,215,128,.02) 82%, rgba(243,215,128,0) 100%) } /* closest-side: к краю бокса гаснет ровно в ноль — без прямоугольника; бокс шире, чтобы свет был как раньше (Михаил 09.10) */
.duo-col.paid::after { content:""; position:absolute; inset:-45% -60%; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:conic-gradient(from 0deg, transparent 0 16%, rgba(255,226,150,.10) 19%, transparent 22%, transparent 46%, rgba(255,226,150,.07) 49%, transparent 52%, transparent 73%, rgba(255,226,150,.09) 76%, transparent 79%);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent 100%); mask:radial-gradient(closest-side, #000 30%, transparent 100%); /* лучи тоже гаснут к краю */
  animation:gold-spin 32s linear infinite }
@media (prefers-reduced-motion: reduce) { .duo-col.paid::after { animation:none } }
/* телефон: правый набор фигур у стыка колонок резался фоном прилипающей метки — на телефоне его не показываем */
@media (max-width:700px) { .tour .lampas-set.mr { top:auto; left:auto; bottom:-8px; right:2%; width:30vw; transform:rotate(8deg) } /* телефон: справа внизу у подписи (Михаил 09.10) */ .duo-col.paid::before { inset:-4% -70% } .duo-col.paid::after { inset:-10% -60%; -webkit-mask:radial-gradient(closest-side, #000 20%, transparent 100%); mask:radial-gradient(closest-side, #000 20%, transparent 100%) } }
/* «придумал, как обычному пользователю…» — текст и точка золотом, палитра плашки 1000 ₽ (Михаил 09.10) */
.about-list li.hl { color:transparent; background:linear-gradient(180deg,#FFF4C8 0%,#F0CF6E 55%,#C9A24A 100%); -webkit-background-clip:text; background-clip:text }
.about-list li.hl::before { background:linear-gradient(180deg,#FFF4C8,#E2B94B); box-shadow:0 0 8px rgba(240,207,110,.55) }
/* подпись под золотой плашкой — рукописно, как подписи асан (Михаил 09.10) */
.gold-note { margin:-20px 0 0 6px; font:500 clamp(19px,1.6vw,26px)/1.3 'Caveat',cursive; color:#E6C86A; opacity:.92; white-space:nowrap } /* каждая строка — одной строкой (Михаил 09.10) */
.gold-note b { font-weight:700; color:#F3DC8E }
@media (max-width:360px) { .gold-note { font-size:17px } }
.join-side { gap:40px } .join-side .gold-note + .stores { margin-top:-6px }
.gold-note-more { margin-top:-26px; white-space:normal; max-width:44ch; font-size:clamp(17px,1.35vw,22px); opacity:.95; color:var(--jade-bright) } /* пояснение — с переносами, нефритовым (Михаил 09.10) */
.duo-caps .goldtxt { color:transparent; background:linear-gradient(180deg,#FFF4C8 0%,#F0CF6E 55%,#C9A24A 100%); -webkit-background-clip:text; background-clip:text; font-weight:600 } /* золотом, как плашка (Михаил 09.10) */