/* App Lens — the member pages' clickable feature points. */
.ml-stage{position:relative;display:flex;justify-content:center;padding:4px 0 8px;--pw:225px;--lw:212px}
.ml-phone{position:relative;width:var(--pw);aspect-ratio:760/1511;transform:translateX(-46px)}
.ml-screens{position:absolute;inset:0}
.ml-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .55s ease}
.ml-screens img.is-entering{opacity:0;transform:translateY(14px) scale(.97)}
.ml-screens img.is-leaving{opacity:0;transform:translateY(-10px) scale(.985)}
.ml-dim{position:absolute;inset:0 1.3% 0 1.4%;z-index:1;border-radius:15.7%/7.65%;background:rgba(6,9,5,.52);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) no-repeat 0 0/100% 100%,linear-gradient(#000 0 0) no-repeat var(--mx,50%) var(--my,50%)/var(--mw,0%) var(--mh,0%);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) no-repeat 0 0/100% 100%,linear-gradient(#000 0 0) no-repeat var(--mx,50%) var(--my,50%)/var(--mw,0%) var(--mh,0%);mask-composite:exclude;transition:-webkit-mask-position .6s cubic-bezier(.2,.8,.2,1),-webkit-mask-size .6s cubic-bezier(.2,.8,.2,1),mask-position .6s cubic-bezier(.2,.8,.2,1),mask-size .6s cubic-bezier(.2,.8,.2,1)}
.ml-ring{position:absolute;z-index:2;left:calc(var(--x,10)*1%);top:calc(var(--y,10)*1%);width:calc(var(--w,80)*1%);height:calc(var(--h,10)*1%);border:2px solid var(--mp-lime,#c8ff28);border-radius:12px;box-shadow:0 0 0 4px rgba(200,255,40,.12),0 0 26px rgba(200,255,40,.35);pointer-events:none;transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.ml-ring::after{content:"";position:absolute;inset:-2px;border:2px solid var(--mp-lime,#c8ff28);border-radius:inherit;animation:ml-pulse 2.2s ease-out infinite}
.ml-lens{position:absolute;z-index:3;left:64%;top:calc(var(--cy,40)*1%);width:min(var(--lw),calc(var(--w,80)*4%),calc(var(--ar,2)*var(--lh,150px)),var(--lmax,999px));transform:translateY(-50%);pointer-events:none;transition:top .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1)}
.ml-lens.is-below{top:calc((var(--y,10) + var(--h,10))*1% + 16px);transform:none}
.ml-lens.is-above{top:calc(var(--y,10)*1% - 16px);transform:translateY(-100%)}
.ml-lens.is-below::before,.ml-lens.is-above::before{display:none}
.ml-lens.is-above .ml-lens-tag{position:absolute;bottom:calc(100% + 10px);left:0;margin:0}
.ml-lens::before{content:"";position:absolute;right:calc(100% - 6px);top:50%;width:34px;height:2px;background:linear-gradient(90deg,transparent,var(--mp-lime,#c8ff28));transform:translateY(-50%)}
.ml-lens-view{position:relative;width:100%;border:1px solid rgba(200,255,40,.55);border-radius:16px;background-color:#10150e;background-repeat:no-repeat;box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 0 6px rgba(16,21,14,.7),0 0 40px rgba(200,255,40,.12)}
.ml-lens-tag{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:var(--lw);margin-top:12px;padding:6px 11px;border:1px solid #3d4a2e;border-radius:999px;background:#10150e;color:#e6ecdf;font-size:.75rem;line-height:1.3;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.ml-lens-tag b{color:var(--mp-lime,#c8ff28);font-weight:600;font-variant-numeric:tabular-nums}
.ml-lens-tag span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ml-lens.is-in{animation:ml-pop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes ml-pop{from{opacity:0;translate:-14px 0;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes ml-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
.ml-stage-inline{display:none}
/* Feature points as buttons. */
.member-page .ml-list{gap:6px}
.member-page .ml-list>li{display:block}
.ml-feature{position:relative;display:flex;align-items:flex-start;gap:20px;width:100%;margin:0;padding:18px 52px 18px 16px;border:1px solid transparent;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .35s ease,border-color .35s ease}
.ml-feature::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--mp-lime,#c8ff28);opacity:0;transform:scaleY(.2);transform-origin:top;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ml-feature h3{color:#b9c4ad;transition:color .3s ease}
.ml-feature p{opacity:.75;transition:opacity .3s ease}
.ml-feature-arrow{position:absolute;right:14px;top:18px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #3d4a2e;border-radius:50%;color:#8e9887;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .35s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
.ml-feature-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor}
.ml-feature:focus-visible{outline:2px solid var(--mp-lime,#c8ff28);outline-offset:2px}
@media(hover:hover){.ml-feature:hover{background:rgba(255,255,255,.025)}.ml-feature:hover h3{color:#f6f8f2}.ml-feature:hover .ml-feature-arrow{opacity:1;transform:none}}
.is-active>.ml-feature{border-color:rgba(200,255,40,.16);background:linear-gradient(90deg,rgba(200,255,40,.09),rgba(200,255,40,.01) 85%)}
.is-active>.ml-feature::before{opacity:1;transform:none}
.is-active>.ml-feature h3{color:#f6f8f2}
.is-active>.ml-feature p{opacity:1}
.is-active>.ml-feature .mp-feature-number{color:var(--mp-lime,#c8ff28)}
.is-active>.ml-feature .ml-feature-arrow{border-color:var(--mp-lime,#c8ff28);background:var(--mp-lime,#c8ff28);color:#10150e;opacity:1;transform:none}
@media(min-width:921px) and (max-height:850px){.mp-tour-aside .ml-stage{--pw:175px;--lw:180px;--lh:120px}}
@media(max-width:1100px){.mp-tour-aside .ml-stage{--pw:190px;--lw:176px}.mp-tour-aside .ml-phone{transform:translateX(-40px)}}
@media(max-width:800px){.ml-stage-inline{display:flex;margin:26px 0 6px;padding:18px 0 22px;--pw:152px;--lw:170px;--lh:112px;border:1px solid var(--mp-line,#ffffff16);border-radius:20px;background:radial-gradient(ellipse at 40% 60%,rgba(200,255,40,.07),transparent 70%),#10150e;overflow:hidden}.ml-stage-inline .ml-phone{transform:translateX(-62px)}.ml-stage-inline .ml-lens{left:58%}.ml-lens-tag{font-size:.6875rem}.ml-feature{padding:14px 44px 14px 12px;gap:12px}}
@media(prefers-reduced-motion:reduce){.ml-ring::after,.ml-lens.is-in{animation:none}.ml-ring,.ml-lens,.ml-dim,.ml-screens img{transition:none}}
