/* Экраны 2 и 3: Кадр и Результат (раскадровка 4.2, 4.3) + лист оплаты */

.hdr--flow{ display:none; }
.flow{ padding-bottom:8px; }
.flow__side{ padding:16px var(--gut) 0; }

/* ───── 2.1 Большой пример: в край, радиус 0 (Nike) ───── */
.ex{ position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--s1); }
.ex--tall{ aspect-ratio:auto; height:min(70svh, 150vw); }
.ex__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ex::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(to bottom, rgba(11,12,14,0), rgba(11,12,14,.85)); pointer-events:none; }
.ex__top{ position:absolute; z-index:3; top:calc(12px + env(safe-area-inset-top)); left:12px; right:12px; display:flex; justify-content:space-between; }
.ex__chip{ position:absolute; z-index:3; top:calc(22px + env(safe-area-inset-top)); left:64px; }
.ex__v{ position:absolute; z-index:2; right:14px; top:96px; writing-mode:vertical-rl; color:rgba(244,245,242,.62); white-space:nowrap; font-size:10px; letter-spacing:.14em; }

/* ───── 2.2 Стеклянная плашка «название · параметры · рецепт» ───── */
.plate{ position:relative; z-index:4; margin:-84px var(--gut) 0; border-radius:var(--r-card); padding:16px; }
.plate.glass{ --tint:rgba(12,13,15,.34); background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%), var(--tint);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06), 0 18px 40px -16px rgba(0,0,0,.6); }
.plate .plate__t,.plate .plate__rec{ text-shadow:0 1px 10px rgba(0,0,0,.35); }
.plate__meta{ color:var(--text-2); }
.plate__t{ margin:8px 0 12px; }
.plate__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chip--line{ height:26px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); color:var(--text); background:rgba(255,255,255,.04); }
.plate__dash{ border:0; border-top:1px dashed rgba(255,255,255,.18); margin:14px 0 12px; }
.plate__lbl{ color:var(--text-2); }
.plate__rec{ margin:6px 0 8px; font-size:14px; line-height:1.4; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-mask:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.08)); mask:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.08)); }
.plate__lock{ margin:0; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); }
.plate__lock svg{ width:14px; height:14px; flex:none; }

/* ───── 2.3 Зона загрузки: единственный пунктир «сюда» ───── */
.up{ margin-top:16px; }
.up__zone{ background:var(--s1); border:1px dashed #3a3f44; border-radius:var(--r-card); padding:20px; }
.up__steps{ color:var(--text-3); }
.up__h{ margin:10px 0 6px; }
.up__p{ margin:0 0 16px; color:var(--text-2); font-size:15px; }
.up__btns{ display:flex; gap:8px; }
.up__btns .btn{ flex:1; padding:0 16px; }
.up__btns .btn svg{ width:18px; height:18px; }
.up__tips{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--text-2); }
.up__tips li{ display:inline-flex; align-items:center; gap:6px; }
.up__tips svg{ width:14px; height:14px; color:var(--text); }
.up__demo{ margin-top:14px; font-size:13px; color:var(--text-3); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; min-height:32px; }
.up__demo:hover{ color:var(--text); }

/* ───── 2.4 Черновик ───── */
.dr__frame{ position:relative; aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; background:var(--s1); isolation:isolate; }
.dr__photo{ transition:filter var(--dur-base); }
.dr__photo,.dr__cv{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dr__cv{ opacity:0; }
.dr__frame.is-ready .dr__cv{ opacity:1; }
.dr__frame.is-ready .dr__photo{ opacity:0; }
.has-motion .dr__frame.is-ready .dr__cv{ animation:develop 700ms var(--ease-out) both; }
.has-motion .dr__frame.is-live.is-ready .dr__cv{ animation:develop 700ms var(--ease-out) both, kb 9s var(--ease-in-out) 700ms infinite alternate; }
@keyframes kb{ to{ transform:scale(1.08) translate(-1.5%, -1%); } }
.scan{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.scan::before{ content:""; position:absolute; left:0; right:0; top:-40px; height:40px; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.18)); }
.scan::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.7); }
.has-motion .scan{ animation:scanY 1400ms linear infinite; }
@keyframes scanY{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
.dr__frame:not(.is-scan) .scan{ opacity:0; transition:opacity var(--dur-base) var(--ease-in); }
.dr__frame.is-scan .dr__photo{ filter:brightness(.8); }
.dr__chips{ position:absolute; z-index:3; top:10px; left:10px; right:10px; display:flex; flex-wrap:wrap; gap:6px; }
.dr__face{ opacity:0; transform:translateY(-4px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dr__face.is-on{ opacity:1; transform:none; }
.dr__face svg{ width:12px; height:12px; }
.dr__frame:not(.is-ready) #drChip{ display:none; }
.dr__zone{ position:absolute; z-index:3; left:10px; right:106px; bottom:10px; border-radius:var(--r-in); padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:13px; line-height:1.35; color:var(--text); --tint:rgba(12,13,15,.38); }
.dr__zone svg{ width:18px; height:18px; flex:none; }
.dr__zone--big{ top:54%; align-items:flex-start; padding-top:16px; }
.dr__zone[hidden]{ display:none; }
.dr__pip{ position:absolute; z-index:3; right:10px; bottom:10px; width:88px; height:110px; border-radius:var(--r-in); overflow:hidden; box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 12px 24px -8px rgba(0,0,0,.6); opacity:0; transition:opacity var(--dur-slow) var(--ease-out); }
.dr__frame.is-ready .dr__pip{ opacity:1; }
.dr__pip img{ width:100%; height:100%; object-fit:cover; }
.dr__pip span{ position:absolute; left:0; right:0; bottom:0; padding:14px 6px 6px; font-size:9.5px; line-height:1.15; letter-spacing:.04em; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.85)); color:#fff; }
.dr__status{ margin:10px 0 0; }
.dr__foot{ margin-top:12px; }
.dr__cap{ margin:0; font-size:15px; }
.dr__row{ display:flex; align-items:center; justify-content:space-between; }
.dr__step{ color:var(--text-3); }

/* ───── 2.5 Действие ───── */
.act{ display:none; }
.act__fine{ text-align:center; margin:10px 0 0; }
.dock--act .btn{ --h:58px; }
.page-kadr .foot--flow, .page-result .foot--flow{ padding-bottom:110px; }
.foot--flow{ margin-top:64px; padding-top:24px; }

/* ───── Похожие ───── */
.similar .sec__head{ margin-bottom:16px; }

/* ───── Компьютер: две колонки 7/5, пример липкий слева ───── */
@media (min-width:900px){
  .hdr--flow{ display:flex; position:sticky; background:rgba(11,12,14,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 -1px 0 var(--line); }
  .hdr__crumb{ margin-left:32px; color:var(--text-2); font-size:15px; font-weight:500; }
  .hdr__crumb:hover{ color:var(--text); }
  .bal{ display:none; }
  .hdr--flow .hdr__login{ height:40px; }
  .flow__grid{ max-width:1280px; margin:0 auto; padding:24px var(--gut) 0; display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:start; }
  .flow__media{ position:sticky; top:calc(var(--hdr) + 24px); }
  .ex,.ex--tall{ aspect-ratio:auto; height:calc(100svh - var(--hdr) - 48px); min-height:560px; border-radius:var(--r-card); }
  .ex::after{ height:50%; }
  .ex__top a{ display:none; }
  .ex__top{ justify-content:flex-end; top:16px; right:16px; }
  .ex__chip{ top:16px; left:16px; }
  .ex__v{ right:22px; top:50%; translate:0 -50%; font-size:11px; }
  .plate{ position:absolute; left:24px; bottom:24px; width:420px; margin:0; }
  .flow__side{ padding:8px 0 0; }
  .up{ margin-top:0; }
  .up__zone{ padding:28px; }
  .up__h{ font-size:36px; }
  .dr__frame{ max-width:400px; }
  .act{ display:block; margin-top:20px; }
  .dock--act{ display:none; }
  .page-kadr .foot--flow, .page-result .foot--flow{ padding-bottom:40px; }
}

/* ───── 3.1 Шторка до/после ───── */
.ba{ position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--s1); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.ba img,.ba canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.ba__before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0); z-index:1; }
.ba__line{ position:absolute; z-index:2; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:rgba(255,255,255,.9); box-shadow:0 0 12px rgba(0,0,0,.35); }
.ba__knob{ position:absolute; z-index:3; left:var(--p); top:50%; width:44px; height:44px; translate:-50% -50%; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:600; letter-spacing:-.05em;
  touch-action:none; cursor:ew-resize; transition:background var(--dur-fast), scale var(--dur-fast) var(--ease-out); }
.ba__knob::after{ content:""; position:absolute; inset:-14px; }
.ba.is-drag .ba__knob{ background:var(--lime); color:var(--on-lime); scale:1.08; box-shadow:0 8px 24px -6px rgba(209,254,23,.45); }
.ba.is-settle .ba__knob{ transition:scale 160ms var(--ease-out); }
.ba__l{ position:absolute; z-index:3; left:12px; bottom:14px; } .ba__r{ position:absolute; z-index:3; right:12px; bottom:14px; }
.ba__wait{ z-index:4; opacity:0; pointer-events:none; transition:opacity var(--dur-slower) var(--ease-out); }
.ba.is-wait .ba__wait{ opacity:1; }
.ba.is-wait .ba__knob,.ba.is-wait .ba__line,.ba.is-wait .ba__l,.ba.is-wait .ba__r{ opacity:0; }
.has-motion .ba.is-done .ba__after{ animation:develop 700ms var(--ease-out) both; }
.ba .ex__top{ z-index:5; }
.prog{ height:3px; background:transparent; overflow:hidden; }
.prog span{ display:block; height:100%; background:var(--lime); transform-origin:left; transform:scaleX(0); }

/* ───── 3.0 Ожидание ───── */
.res__wait h1{ margin:4px 0 16px; }
.steps2{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; }
.steps2 li{ display:flex; align-items:center; gap:12px; color:var(--text-4); font-size:16px; transition:color var(--dur-base) var(--ease-out); }
.steps2 li.is-done{ color:var(--text-3); }
.steps2 li.is-now{ color:var(--text); }
.steps2__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.steps2 li.is-now .steps2__dot{ box-shadow:0 0 0 4px rgba(255,255,255,.12); }

/* ───── 3.1–3.6 ───── */
.res__h{ margin:4px 0 8px; }
.res__q{ margin:0 0 16px; }
.left{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:32px; margin-bottom:16px; }
.left__seg{ display:flex; gap:4px; }
.left__seg i{ width:24px; height:4px; border-radius:2px; background:var(--s3); }
.left__seg i.on{ background:var(--lime); }
.left__seg i.wide{ width:64px; }
.dl{ display:flex; gap:8px; }
.dl__btn{ flex:1; }
.ibtn--lg svg{ width:22px; height:22px; }
.more2{ display:flex; gap:20px; margin:6px 0 4px; flex-wrap:wrap; }
.fix{ display:flex; gap:8px; margin:4px 0 12px; }
.fix__in{ flex:1; min-width:0; height:40px; border-radius:999px; border:0; background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); padding:0 16px; font-size:15px; outline:none; }
.fix__in:focus{ box-shadow:inset 0 0 0 1px var(--lime-line); }
.live{ position:relative; margin-top:16px; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; background:var(--s1); isolation:isolate; }
.live__m{ position:absolute; inset:0; overflow:hidden; }
.live__m img{ width:100%; height:100%; object-fit:cover; }
.has-motion .live__m img{ animation:kb2 7s var(--ease-in-out) infinite alternate; }
@keyframes kb2{ from{ transform:scale(1.02); } to{ transform:scale(1.12) translate(-2%, -2.5%); } }
.live::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(to bottom, rgba(11,12,14,0), rgba(11,12,14,.92)); z-index:0; }
.live__chip{ position:absolute; z-index:2; left:12px; top:12px; }
.live__chip svg{ width:10px; height:10px; }
.live__b{ position:absolute; z-index:2; left:12px; right:12px; bottom:12px; }
.live__p{ margin:6px 0 14px; color:var(--text-2); font-size:15px; }
.live__ok{ margin:0; padding:12px 16px; border-radius:var(--r-in); background:rgba(10,11,12,.72); font-size:14px; }
.pack{ margin-top:8px; background:var(--s2); border-radius:var(--r-card); padding:16px; box-shadow:inset 0 0 0 1px var(--line); }
.pack__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pack__t{ display:block; font-weight:500; font-size:17px; margin-bottom:2px; }
.pack__alt{ margin:12px 0 0; }
.rate{ display:flex; align-items:center; gap:8px; margin-top:20px; flex-wrap:wrap; font-size:15px; }
.rate > span{ margin-right:4px; }
.rate__g{ margin:8px 0 0; }
.page-result .dock{ z-index:45; }
@media (min-width:900px){
  .ba{ aspect-ratio:auto; height:calc(100svh - var(--hdr) - 48px); min-height:560px; border-radius:var(--r-card); }
  .ba .ex__top a{ display:none; }
  .prog{ margin-top:8px; border-radius:3px; }
  .live{ aspect-ratio:16/10; }
  .live__b{ left:20px; right:20px; bottom:20px; display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:16px; }
  .live__b h2{ grid-column:1; } .live__p{ grid-column:1; margin-bottom:0; }
  .live__b .btn{ grid-column:2; grid-row:1 / span 2; width:auto; }
  .page-result .dock{ display:none; }
}
.hdr--flow::before,.hdr--flow::after{ display:none; }