/* v6 live stage. The v4 dial is back: one device sits inside the progress ring; real screens move inside it.
   --q (0..1 inside the current step) and --sp come from e-how.js. Only transform/opacity animate. */
.flow-return{display:block;margin-top:12px}.flow-return strong{display:block;margin-bottom:4px}
#how .ring{display:block}
#how .device-zone.live{position:relative;border:0;padding:0;display:grid;place-items:center;width:100%;height:100%}
.live .stage-box{position:relative;width:fit-content;max-width:100%}
.dev{position:relative;z-index:1;background:var(--surface);overflow:hidden;box-shadow:0 0 0 8px var(--ink-1),0 0 0 9px var(--hair),0 40px 70px -35px var(--shadow-deep)}
.dev.dev-phone{--ph:min(66svh,620px);height:var(--ph);width:calc(var(--ph) * 390 / 844);border-radius:28px}
.dev.dev-tab{--tw:min(calc(100vw - 48px),560px);width:var(--tw);height:calc(var(--tw) * 820 / 1180);border-radius:18px;box-shadow:0 0 0 7px var(--ink-1),0 0 0 8px var(--hair),0 36px 60px -32px var(--shadow-deep)}
.dev .scr{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
#how .live .sc{inset:0;padding:0;transition:opacity .35s ease,visibility .35s}
/* layer timing: p = entrance progress, pe = exit progress (1 while --o is beyond the step) */
.ly{--p:clamp(0,(var(--q) - var(--i)) / .1,1);--pe:clamp(0,(var(--o) - var(--q)) / .1,1);position:absolute;inset:0;opacity:calc(var(--p) * var(--pe))}
.ly.fr img{display:block;width:100%;height:auto}
.ly.fx-rise{transform:translateY(calc((1 - var(--p)) * 22px))}
.ly.fx-right{transform:translateX(calc((1 - var(--p)) * 100%));box-shadow:-24px 0 40px -24px var(--shadow)}
.ly.fx-pop{transform:scale(calc(.94 + var(--p) * .06))}
/* in-device scroll: the capture (taller than the screen) moves from --s0 to --s1 (% of its own height) between --a and --b */
.ly.fx-scroll img{--k:clamp(0,(var(--q) - var(--a)) / max(.01,var(--b) - var(--a)),1);transform:translateY(calc((var(--s0) + (var(--s1) - var(--s0)) * var(--k)) * -1%))}
.ly.tp{inset:auto;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px #fff,0 0 0 6px color-mix(in srgb,var(--flow-fill) 45%,transparent);transform:scale(calc(1.35 - var(--p) * .45))}
.ly.hl{inset:auto;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:14px;box-shadow:0 0 0 2.5px var(--flow-fill),0 0 0 7px color-mix(in srgb,var(--flow-fill) 22%,transparent)}
.ly.sweep{inset:auto;left:var(--l);top:var(--t);width:var(--w);height:var(--h);overflow:hidden;border-radius:12px}
.ly.sweep::after{content:'';position:absolute;left:0;right:0;height:38%;top:calc(var(--k) * 100% - 38%);--k:clamp(0,(var(--q) - var(--i)) / max(.01,var(--o) - var(--i)),1);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--flow-fill) 18%,transparent) 70%,#fff 100%)}
/* Esthetic: shop phone (step 01) and customer phone (step 04) in front of the tablet */
.side{position:absolute;z-index:3;width:23%;opacity:0;transition:opacity .35s;pointer-events:none}
.side .dev.dev-phone.dev-small{--ph:auto;width:100%;height:auto;aspect-ratio:390/844;border-radius:16px;box-shadow:0 0 0 5px var(--ink-1),0 0 0 6px var(--hair),0 20px 40px -22px var(--shadow-deep)}
.side.shop{left:-2%;bottom:-6%}.side.cust{right:-2%;bottom:-8%}
.side-tag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:650;color:var(--flow-fill);background:var(--surface);padding:3px 9px;border-radius:6px;border:1px solid var(--hair)}
.tab-zone[data-step="0"] .side.shop,.tab-zone[data-step="3"] .side.cust{opacity:1}
.tab-zone .side .ly.fx-rise{transform:translateY(calc((1 - var(--p)) * 60%))}
/* Callout: dot on the screen element, leader line, label chip. One per step. */
#how .live .co{--p:clamp(0,(var(--q) - var(--i)) / .12,1);position:absolute;inset:auto;left:var(--x);top:var(--y);z-index:4;width:0;height:0;padding:0;opacity:var(--p);visibility:hidden;transition:opacity .3s,visibility .3s}
#how .live .co.on{visibility:visible}
.co>i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--flow-fill);box-shadow:0 0 0 3px #fff}
.co>span{position:absolute;top:-16px;white-space:nowrap;font-size:13px;line-height:20px;font-weight:650;color:var(--ink-1);background:var(--surface);border:1px solid var(--hair);padding:5px 10px;border-radius:8px;box-shadow:0 6px 18px -10px var(--shadow)}
.co.r>span{left:36px}.co.l>span{right:36px}
.co::before{content:'';position:absolute;top:-1px;height:1.5px;background:var(--ink-3);width:30px}
.co.r::before{left:6px}.co.l::before{right:6px}
.co.r.up>span,.co.l.up>span{top:-40px}
#how .chips{position:absolute;left:calc(50% + 26px);bottom:-30px;width:max-content;max-width:60%;height:22px;pointer-events:none}
#how .chip{inset:auto;left:0;bottom:0;width:max-content;padding:3px 8px;visibility:visible;font-size:11px;line-height:1.3;color:var(--ink-3);background:var(--surface);border:1px solid var(--hair);border-radius:4px;opacity:0}
#how .chip.on{opacity:1}
.shot-sim{display:none}
.ly .gen-tag,.shot-figure .gen-tag,.c-dev .gen-tag{position:absolute;left:8px;top:8px;bottom:auto;right:auto;font-size:10px;background:var(--surface);color:var(--ink-3);padding:3px 6px;border:1px solid var(--hair);border-radius:4px}
#how .shot-action{color:var(--ink-1);font-weight:650}
/* Product cards: same device grammar, top of the key screen, one chip */
#products .c-vis{height:250px;padding:22px 0 0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.c-dev{position:relative;background:var(--surface);overflow:hidden;box-shadow:0 0 0 6px var(--ink-1),0 0 0 7px var(--hair),0 24px 40px -22px var(--shadow-deep)}
.c-dev.dev-phone{width:150px;height:269px;border-radius:18px 18px 0 0}
.c-dev.dev-tab{width:260px;height:141px;border-radius:12px 12px 0 0;box-shadow:0 0 0 5px var(--ink-1),0 0 0 6px var(--hair),0 24px 40px -22px var(--shadow-deep)}
.c-dev .scr{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.c-dev .ly{--p:1;--pe:1}
#products .c-vis .sim{bottom:10px;left:12px;right:auto}
/* Tech figures */
.shot-figure{position:relative;margin:0;width:100%;padding:0 0 34px}
.shot-figure>img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:8px;background:var(--surface);box-shadow:0 12px 28px -18px var(--shadow)}
.shot-label{position:absolute;right:4px;bottom:3px;display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px;line-height:20px;font-weight:650;color:var(--ink-1)}
.shot-label::before{content:'';width:32px;height:15px;border-left:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);transform:translateY(-5px)}
#tech .d-local,#tech .d-swap{height:330px;display:flex;justify-content:center;align-items:center;position:relative}
#tech .demo .shot-figure{width:180px;max-height:310px}
#tech .demo .shot-figure>img{height:270px;object-fit:cover;object-position:top}
#tech .d-swap>.shot-label{bottom:44px;right:12px;background:var(--surface)}
#tech-capture .shot-figure{max-width:280px;justify-self:center}
#tech-capture .more-in{grid-template-columns:1fr 1fr .65fr}
@media(min-width:900px) and (max-width:1199px){.dev.dev-tab{--tw:min(calc(100vw - 48px),480px)}.co>span{font-size:12px}}
@media(max-width:899px){
  #how .device-zone.live{padding:0 0 30px}
  .dev.dev-phone{--ph:min(46svh,calc(100svh - var(--hp-navh) - 278px),500px);border-radius:20px;box-shadow:0 0 0 6px var(--ink-1),0 0 0 7px var(--hair),0 30px 50px -30px var(--shadow-deep)}
  .dev.dev-tab{--tw:min(calc(100vw - 104px),420px)}
  .side{width:26%}.side.shop{left:-4%;bottom:-2%}.side.cust{right:-4%;bottom:-4%}
  .side-tag{font-size:10px;top:-24px;padding:2px 7px}
  #how .live .co{left:50%;top:auto;bottom:0;transform:translateX(-50%)}
  .co>i,.co::before{display:none}
  .co>span,.co.r>span,.co.l>span,.co.up>span{left:auto;right:auto;top:auto;position:relative;transform:translateX(-50%);font-size:12px;padding:4px 9px}
  #how .chips{display:none}
  .ly.tp{width:34px;height:34px;margin:-17px 0 0 -17px}
  #products .c-vis{height:220px}
  .c-dev.dev-phone{width:130px;height:233px}.c-dev.dev-tab{width:230px;height:125px}
  #tech-capture .more-in{grid-template-columns:1fr}
  #tech .demo .shot-figure{width:175px}
  #how.static .device-zone.live{min-height:520px}
}
@media(prefers-reduced-motion:reduce){#how .ly,#how .co,#how .side{transition:none}}