.phone-stage{isolation:isolate;position:relative}.phone-stage:before{content:"";pointer-events:none;background:radial-gradient(44% 46% at 56% 47%,#dcd3fa,#ebe5fc 48%,#0000),radial-gradient(30% 39% at 30% 60%,#d8eef4,#0000);position:absolute;inset:13% -5% 7%}.phone-body{border-radius:12%/5.7%;position:relative}.phone-body:before{content:"";border-radius:inherit;transform:translate(var(--case-offset,2px), var(--case-depth,3px));background:linear-gradient(173deg,#bbb8af,#686764 12%,#878780 35%,#4a4b50 76%,#9d9d98 94%,#4d4f55);border:1px solid #44454b;position:absolute;inset:0;box-shadow:inset 0 1px 1px #fff5,2px 5px 7px #1b23401c,7px 15px 28px #1b234029}.phone-frame{border-radius:inherit;background:url(/brand/phone-rim.webp) 50%/100% 100% no-repeat,#181a22;padding:8px;position:relative;box-shadow:inset 0 0 0 1px #adb0bc44}.phone-frame:after{content:"";background:#484d61;border-radius:2px;block-size:38px;inline-size:2px;position:absolute;inset-block-start:25%;inset-inline-end:-3px}.phone-frame img{border-radius:1rem 1rem .625rem .625rem;width:100%}@media (width>=701px){.phone-body{--case-offset:6px;--case-depth:5px;transform:perspective(1400px) rotateX(var(--phone-pitch,4deg)) rotateY(var(--phone-turn,-12deg)) rotateZ(var(--phone-lean,-4deg))}.phone-body:after{content:"";inset:auto auto calc(2px - var(--case-depth)) calc(50% + var(--case-offset) / 2);background:linear-gradient(#22242c,#22242c) 50%/22px 100% no-repeat,radial-gradient(circle,#23252c 1px,#0000 1.4px) 0/5px 3px repeat-x;width:62px;height:3px;position:absolute;transform:translate(-50%)}.phone-frame:after{background:linear-gradient(90deg,#3a3e50,#828799);inline-size:4px;inset-inline-end:-5px;box-shadow:0 0 0 1px #292e4055}.pattern-visual .phone-body{--case-offset:6px;--phone-turn:-12deg;--phone-lean:-6deg}}@media (width>=901px){.hero-visual .phone-stage:before{inset-inline:-24%}.phone-body{--case-depth:7px;--phone-pitch:6deg}.hero-visual .phone-body{--case-offset:10px;--phone-turn:-17deg;--phone-lean:-5deg}.hero-visual .phone-frame:after{inset-inline-end:-8px}.pattern-visual .phone-body{--case-offset:10px;--phone-turn:-18deg;--phone-lean:-9deg;--phone-pitch:7deg}.pattern-visual .phone-frame:after{inset-inline-end:-8px}}@media (width>=1120px){.hero-pair .phone-body{--case-offset:-8px;--phone-turn:15deg;--phone-lean:8deg;--phone-pitch:7deg}.hero-pair .phone-frame:after{inset-inline:-7px auto}.hero-pair .pair-today .phone-body{--case-offset:-10px;--phone-turn:19deg;--phone-lean:13deg;--phone-pitch:10deg}}@media (width>=701px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.phone-body{transition:translate .24s ease-out}.phone-body:before{transition:box-shadow .24s ease-out}.phone-frame:before{content:"";z-index:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(128deg,#0000 37%,#f8edce5c 46%,#fff8e4b3 50%,#0000 60%) 50% 20%/100% 210%;transition:opacity .24s ease-out,background-position .52s ease-out;position:absolute;inset:0;mask:url(/brand/phone-rim.webp) 50%/100% 100% no-repeat}.phone-frame>:is(img,.screen-stack){z-index:1;position:relative}.phone-stage:hover .phone-body{translate:0 -5px}.phone-stage:hover .phone-body:before{box-shadow:inset 0 1px 1px #fff5,3px 7px 10px #1b234024,11px 23px 37px #1b234043}.phone-stage:hover .phone-frame:before{opacity:.5;background-position:50% 68%}}