/* Screencast loops of the real app shown on a phone held in a hand. */
/* The glass quads are the ones measured for the v7 hand photos (landing-v7.css); the crop keeps the phone and grip. */
/* --s scales the 1024x1536 photo, --cx/--cy/--cw/--ch crop it in photo pixels, --fit (set by app.js) shrinks the shot to its column. */
.how-note{color:#A7BBB6;font-size:12px;line-height:1.6;margin:8px 0 0}
.how-v13.is-enhanced .how-step-copy{min-height:226px}
.how-v13.is-enhanced .how-layout{min-height:690px}

.hand-shot{--s:.51;--cx:30;--cy:40;--cw:994;--ch:1140;position:relative;flex:none;width:calc(var(--cw)*var(--s)*var(--fit,1)*1px);height:calc(var(--ch)*var(--s)*var(--fit,1)*1px);max-width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hand-sway{position:absolute;inset:0;transform-origin:50% 100%;animation:hand-sway 7s ease-in-out infinite alternate}
.hand-art{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;transform:scale(calc(var(--s)*var(--fit,1))) translate(calc(var(--cx)*-1px),calc(var(--cy)*-1px))}
.hand-art>img{position:absolute;left:0;top:0;width:1024px;height:1536px;max-width:none}
.hand-glass{position:absolute;left:0;top:0;width:278px;height:591px;border-radius:32px;overflow:hidden;background:#EEF1E4;transform-origin:0 0}
.hand-glass video{display:block;width:100%;height:100%;object-fit:cover}

.pose-client .hand-glass{transform:matrix3d(1.407426472,0.184079414,0,-0.000051613,-0.283838893,1.382266080,0,-0.000082808,0,0,1,0,317.411920116,98.473583838,0,1)}
.pose-order{--s:.56;--cx:120;--cy:50;--cw:904;--ch:1050}
.pose-order .hand-glass{transform:matrix3d(1.340506559,-0.189689306,0,0.000083401,0.270174879,1.346851330,0,-0.000038426,0,0,1,0,363.934947731,161.995835058,0,1)}
.pose-money{--s:.6;--cx:30;--cy:20;--cw:994;--ch:1000}
.pose-money .hand-glass{transform:matrix3d(1.270361562,0.125218655,0,0.000014294,-0.148865650,1.201994929,0,-0.000081493,0,0,1,0,283.293974310,64.034784417,0,1)}

@keyframes hand-sway{from{transform:rotate(-.8deg) translateY(3px)}to{transform:rotate(.7deg) translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.hand-sway{animation:none}}

.hand-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;margin-top:8px;padding:0 15px;border:1px solid #ffffff30;border-radius:18px;background:transparent;color:#C2D1CD;font:650 12px/1 Manrope,Arial,sans-serif;cursor:pointer}
.hand-toggle:hover{border-color:#ffffff60;color:#fff}
.hand-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.real-money{min-width:0}
.real-money .hand-shot{margin:0 auto}

@media(max-width:1100px){.real-money .pose-money{--s:.58;--cx:150;--cy:0;--cw:550;--ch:900}}
@media(max-width:1000px){
 .how-v13.is-enhanced .how-step-copy{min-height:240px}.how-v13.is-enhanced .how-layout{min-height:600px}
 .pose-client{--s:.46}.pose-order{--s:.5}.pose-money{--s:.52}
}
@media(max-width:700px){
 .how-note{font-size:11px}.how-v13.is-enhanced .how-step-copy{min-height:0}.how-v13.is-enhanced .how-layout{min-height:0}
 .how-v13.is-enhanced .how-screen{align-items:center}
 .pose-client{--s:.52;--cx:110;--cy:20;--cw:670;--ch:1060}
 .pose-order{--s:.547;--cx:320;--cy:40;--cw:640;--ch:990}
 .pose-money,.real-money .pose-money{--s:.6;--cx:150;--cy:0;--cw:550;--ch:900}
}
@media print{.hand-sway{animation:none}.hand-toggle{display:none}}