.phone-frame{transform:perspective(1300px) rotateY(var(--phone-turn,0deg)) rotateZ(var(--phone-lean,0deg));background:#262832 url(/brand/phone-rim.webp) 50%/100% 100% no-repeat;border-radius:12%/5.6%;padding:clamp(5px,.8vw,8px);position:relative;box-shadow:2px 4px #73737c,0 13px 24px #1b234026}.phone-frame img{border-radius:10%/4.6%;inline-size:100%}[data-hero-phone]{--case-offset:2px;--case-depth:3px;border-radius:12%/5.7%;position:relative}[data-hero-phone]:before{content:"";border-radius:inherit;transform:translate(var(--case-offset), var(--case-depth));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}[data-hero-phone] .phone-frame{border-radius:inherit;background-color:#181a22;padding:8px;transform:none;box-shadow:inset 0 0 0 1px #adb0bc44}[data-hero-phone] .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}[data-hero-phone] .phone-frame img{border-radius:1rem 1rem .625rem .625rem}@media (width>=701px){[data-hero-phone]{--case-offset:6px;--case-depth:5px;transform:perspective(1400px) rotateX(var(--phone-pitch,4deg)) rotateY(var(--phone-turn,-12deg)) rotateZ(var(--phone-lean,-4deg))}[data-hero-phone]: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%)}[data-hero-phone] .phone-frame:after{background:linear-gradient(90deg,#3a3e50,#828799);inline-size:4px;inset-inline-end:-5px;box-shadow:0 0 0 1px #292e4055}}@media (width>=901px){[data-hero-phone]{--case-offset:10px;--case-depth:7px;--phone-pitch:6deg;--phone-turn:-17deg;--phone-lean:-5deg}[data-hero-phone] .phone-frame:after{inset-inline-end:-8px}}@media (width>=1120px){[data-hero-phone]{--case-offset:-8px;--phone-turn:15deg;--phone-lean:8deg;--phone-pitch:7deg}[data-hero-phone=today]{--case-offset:-10px;--phone-turn:19deg;--phone-lean:13deg;--phone-pitch:10deg}[data-hero-phone] .phone-frame:after{inset-inline:-7px auto}}