.iphone{margin:0;position:relative;container-type:inline-size}.iphone-body{background:linear-gradient(150deg,#6f7178 0%,#4a4c52 30%,#3d3f45 60%,#56585e 100%);border-radius:15.6cqi;padding:2.1cqi;box-shadow:inset 0 0 0 .25cqi #ffffff1f,inset 0 0 0 .7cqi #00000040,0 0 0 1px #0009,0 60px 120px -30px #000c,0 22px 44px -18px #0009}.iphone-glass{background:#000;border-radius:13.7cqi;padding:1.2cqi;box-shadow:inset 0 0 0 .2cqi #ffffff12}.iphone-screen{background:#000;border-radius:12.8cqi;position:relative;overflow:hidden}.iphone-screen img{width:100%;height:auto;display:block}.iphone-island{aspect-ratio:125/37;background:#000;border-radius:999px;width:31%;margin-top:2.7%;position:absolute;top:0;left:50%;translate:-50%}.iphone-glare{pointer-events:none;background:linear-gradient(118deg,#ffffff09 0%,#0000 30%);position:absolute;inset:0}.iphone-key{background:linear-gradient(90deg,#3c3e44,#6a6c72 55%,#45474d);border-radius:.5cqi;width:.9cqi;position:absolute}.iphone-action{height:7cqi;top:36cqi;left:-.6cqi}.iphone-vol-up{height:13cqi;top:50cqi;left:-.6cqi}.iphone-vol-down{height:13cqi;top:66cqi;left:-.6cqi}.iphone-side{height:21cqi;top:56cqi;right:-.6cqi}.iphone-camera{background:linear-gradient(90deg,#1a1b1f,#55575d);width:.6cqi;height:15cqi;top:118cqi;right:-.3cqi}.iphone-antenna{background:#00000073;width:.5cqi;height:1.6cqi;position:absolute}.iphone-antenna-top{top:24cqi;right:0}.iphone-antenna-bottom{bottom:24cqi;left:0}
.hp{aspect-ratio:580/560;width:min(100%,580px);margin:0 auto;position:relative}.hp .hp-phone{width:42%;animation:.9s cubic-bezier(.16,1,.3,1) both hp-in,7s ease-in-out 1s infinite hp-phone-float;position:absolute}.hp .hp-phone-a{top:12%;left:3%;transform:perspective(1400px)rotateY(14deg)rotate(-7deg)}.hp .hp-phone-b{animation-duration:.9s,8.5s;animation-delay:.15s,1.6s;top:0;right:3%;transform:perspective(1400px)rotateY(-14deg)rotate(6deg)}.hp-chip{z-index:3;color:#0b0b10;white-space:nowrap;background:#f4f4f7;border-radius:12px;align-items:center;gap:7px;padding:8px 12px 8px 10px;font-size:13px;font-weight:550;animation:.5s cubic-bezier(.16,1,.3,1) both hp-pop,6s ease-in-out infinite hp-float;display:inline-flex;position:absolute;box-shadow:0 14px 30px -12px #000c,inset 0 0 0 1px #fff9}.hp-chip b{font-weight:700}.hp-chip svg{color:#0b0b10;flex:none}.hp-chip-review{animation-delay:1.1s,2s;top:3%;left:36%}.hp-chip-median{animation-delay:1.3s,2.6s;top:44%;right:-4%}.hp-chip-downloads{animation-delay:.9s,3.2s;top:78%;left:-5%}@keyframes hp-in{0%{opacity:0;translate:0 26px}to{opacity:1;translate:none}}@keyframes hp-pop{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:none}}@keyframes hp-float{50%{translate:0 -5px}}@keyframes hp-phone-float{0%,to{translate:0}50%{translate:0 -8px}}@media (min-width:901px){.hp{aspect-ratio:580/605}.hp .hp-phone{width:45.36%}.hp .hp-phone-a{left:0}.hp .hp-phone-b{right:0}.hp-chip-review{left:37%}.hp-chip-median{top:37%;right:-5.5%}.hp-chip-downloads{top:71.5%;left:-6%}}@media (max-width:900px){.hp{width:min(100%,460px)}}@media (max-width:520px){.hp-chip{gap:5px;padding:6px 9px 6px 8px;font-size:11.5px}.hp-chip svg{width:13px;height:13px}.hp-chip-median{right:-1%}.hp-chip-downloads{left:0}}@media (prefers-reduced-motion:reduce){.hp .hp-phone,.hp-chip{animation:none}}.hp+.guide-caption{margin-top:48px}