/* Customer switch, persistent stage and device shells. Screen surfaces remain white. */
#how{--flow-color:var(--p-brand);--flow-count:4}
#how[data-flow="pro"]{--flow-color:var(--p-pro)}
#how[data-flow="me"]{--flow-color:var(--p-me)}
#how>.wrap,.flow-body{position:relative}
#how .how-track{height:calc(var(--flow-count) * 95vh + 40vh);overflow-anchor:none}
#how .how-stage{grid-template-rows:auto minmax(0,1fr);align-items:stretch}
.flow-picks{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 12px;z-index:4}
.flow-picks button{--pick:var(--p-brand);min-height:44px;padding:10px 20px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:14px;font-weight:750;color:var(--ink);background:var(--soft)}
.flow-picks [data-flow="pro"]{--pick:var(--p-pro)}
.flow-picks [data-flow="me"]{--pick:var(--p-me)}
.flow-picks button[aria-pressed="true"]{background:var(--pick);color:#fff;border-color:var(--pick)}
.flow-picks button:focus-visible,#how .s-go:focus-visible{outline:3px solid var(--flow-color);outline-offset:4px}
.flow-body{min-height:0}
#how .how-in{gap:clamp(28px,4vw,64px)}
#how .scene{min-width:0;min-height:0}
#how .step{transition:opacity .35s}
#how .step p{transition:opacity .35s}
#how .step.on .s-num,#how .zone-tag{color:var(--flow-color)}
#how .s-bar,#how .logo-pill{background:var(--flow-color)}
#how .r-track,#how .r-ticks{stroke:var(--line)}
#how .r-fill{stroke:var(--flow-color)}
#how .rm{background:var(--soft);color:var(--muted);transition:none}
#how .rm.lit{background:var(--flow-color);color:#fff}
#how .device-zone{border-color:var(--line)}
#how .phone{box-shadow:0 0 0 8px var(--ink),0 0 0 9px var(--line),0 40px 70px -35px var(--line)}
#how .sc{transition:opacity .35s;pointer-events:none}
#how .sim{bottom:3%;right:0;left:auto;max-width:100%;font-size:11px;background:var(--soft);color:var(--muted)}
.flow-ghost{position:absolute!important;pointer-events:none!important;z-index:3}
#how.static .how-track{height:auto}
#how.static .how-stage{grid-template-rows:auto auto;overflow:visible}
#how.static .flow-body{min-height:640px}
#how.static .how-in{min-height:640px}
#how.static .scene{align-self:stretch;min-height:540px}
#how.static .sc,#how.static .step,#how.static .step p{transition:none}
/* Landscape tablet: 4:3, one shared screen. Both small phones have scene-specific roles. */
.f-pro{width:calc(100% - 38px);max-width:530px;padding:15px;border-radius:var(--r-room);container-type:inline-size}
.f-tablet{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);background:#fff;box-shadow:0 0 0 8px var(--ink),0 0 0 9px var(--line),0 36px 60px -32px var(--line);overflow:hidden}
.f-tablet-top{position:absolute;inset:0 0 auto;height:16%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 5%;border-bottom:1px solid var(--line);font-size:clamp(10px,2.7cqw,14px);font-weight:760}
.f-tablet-top>span{color:var(--flow-color)}
.f-tablet-top small{font-size:clamp(8px,2cqw,11px);color:var(--muted);font-weight:500}
.f-tablet-screen{position:absolute;inset:16% 0 0}
.f-tablet .sc{padding:5%;font-size:clamp(9px,2.7cqw,14px);line-height:1.55}
.f-screen-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4%;font-size:clamp(11px,3.2cqw,17px);letter-spacing:-.035em}
.f-initial{width:24px;aspect-ratio:1;display:inline-grid;place-items:center;border-radius:50%;background:var(--soft);font-size:10px;color:var(--flow-color);font-weight:750;flex:none}
.f-columns{display:grid;grid-template-columns:1fr 1fr;gap:4%;height:66%}
.f-panel{border:1px solid var(--line);border-radius:var(--r-btn);padding:8%;background:#fff;min-width:0}
.f-panel h4{font-size:1.05em;color:var(--flow-color);margin-bottom:9%;letter-spacing:-.03em}
.f-panel small{font-size:.8em;color:var(--muted)}
.f-tint{background:var(--soft)}
.f-line{--reveal:clamp(0,(var(--q) - .12 - var(--i) * .13) * 5,1);display:flex;align-items:flex-start;gap:6px;margin-top:9%;font-size:.88em;opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal)) * 8px))}
.f-line>i{width:3px;height:1.1em;margin-top:.2em;flex:none;border-radius:var(--r-xs);background:var(--flow-color)}
.f-side-phone{position:absolute;z-index:3;width:24%;aspect-ratio:9/18;border-radius:var(--r-card);background:#fff;padding:7px;box-shadow:0 0 0 5px var(--ink),0 16px 32px -18px var(--line);font-size:clamp(8px,2.3cqw,12px);opacity:0;pointer-events:none;overflow:hidden}
.f-shop{left:-5%;bottom:-10%}
.f-customer{right:-4%;bottom:-14%}
.f-side-label{font-size:.9em;font-weight:750;padding:5px 0 7px;color:var(--flow-color)}
.f-face{position:relative;overflow:hidden;border-radius:var(--r-btn);aspect-ratio:3/3.8;background:var(--soft)}
.f-face img{width:100%;height:100%;object-fit:cover;display:block}
.f-face-guide{position:absolute;inset:14% 16%;border:1px solid #fff;border-radius:50%;transform:scaleY(clamp(.15,var(--q) * 5,1));opacity:clamp(0,var(--q) * 7,1)}
.f-face-guide i{position:absolute;width:12px;height:12px;border:solid #fff;border-width:2px 0 0 2px;left:-12%;top:-8%}
.f-face-guide i:nth-child(2){left:auto;right:-12%;transform:rotate(90deg)}
.f-face-guide i:nth-child(3){top:auto;bottom:-8%;transform:rotate(-90deg)}
.f-face-guide i:nth-child(4){left:auto;right:-12%;top:auto;bottom:-8%;transform:rotate(180deg)}
.f-generated{position:absolute;left:4px;bottom:4px;border-radius:var(--r-xs);padding:2px 4px;background:#fff;color:var(--muted);font-size:8px}
.f-checks{display:grid;gap:4px;margin-top:7px}
.f-check{display:flex;gap:5px;align-items:center;font-size:.85em}
.f-check>i{font-style:normal;background:var(--flow-color);color:#fff;border-radius:50%;width:1.4em;height:1.4em;display:grid;place-items:center;opacity:clamp(.12,(var(--q) - .2 - var(--i) * .09) * 9,1);transform:scale(clamp(.65,(var(--q) - .2 - var(--i) * .09) * 9,1))}
.f-pro[data-step="0"] .f-shop,.f-pro[data-step="3"] .f-customer{opacity:1}
.f-photo-transfer{position:absolute;z-index:4;width:16%;aspect-ratio:3/4;left:1%;top:48%;padding:3px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);pointer-events:none;opacity:0}
.f-photo-transfer img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-xs)}
@media(max-width:899px){
  #how .how-track{height:calc(var(--flow-count) * 90vh + 40vh)}
  .flow-picks{gap:6px;padding:12px 0}
  .flow-picks button{padding:8px 10px;font-size:clamp(10px,2.9vw,14px);flex:1;white-space:nowrap}
  #how .how-in{gap:10px;grid-template-rows:148px minmax(0,1fr);padding:6px 0 24px}
  #how .steps{max-width:none}
  #how .steps::before{background:var(--line)}
  #how .steps::after{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--flow-color);transform-origin:left;transform:scaleX(var(--sp))}
  #how .step p{font-size:14px;line-height:1.55;max-width:38em}
  #how .step h3{font-size:21px}
  #how .phone{height:min(46svh,calc(100svh - var(--hp-navh) - 278px),500px)}
  #how .ring{width:min(88vw,52svh,430px)}
  #how .rm{display:grid;width:26px;height:26px;margin:-13px 0 0 -13px;font-size:10px}
  #how .device-zone{padding:12px}
  #how .f-pro{width:calc(100% - 44px);max-width:480px;border-radius:var(--r-card)}
  #how .sim{bottom:0}
  #how.static .how-in{grid-template-rows:auto auto;min-height:0}
  #how.static .flow-body{min-height:0}
  #how.static .steps{display:grid;gap:8px}
  #how.static .step{min-height:44px;padding-top:10px}
  #how.static .scene{min-height:540px}
  #how.static .phone{height:min(56svh,460px)}
}
@media(max-height:620px) and (min-width:900px){
  #how .step{padding-top:10px;padding-bottom:10px}
  #how .step h3{font-size:22px}
  #how .step p{font-size:13px}
  #how .s-num{top:12px}
  #how .f-pro{max-width:400px}
  #how .phone{height:62svh}
}
@media(prefers-reduced-motion:reduce){
  #how .how-track{height:auto}
  #how .how-stage{position:relative;top:0;height:auto}
  #how *,#how *::before,#how *::after{animation:none!important;transition:none!important}
}