/* A phone drawn to scale with its own width (cqw), so it stays in proportion at any size.
   Markup: .phone > .phone-body > (i.pb × 4 side buttons) + .phone-glass > .phone-screen > (.phone-status, img, i.phone-home) */
.phone { container-type: inline-size; }
.phone-body {
  position: relative; padding: 1.3cqw; border-radius: 17.5cqw;
  background: linear-gradient(135deg, #8d9099 0%, #3b3d45 18%, #17181c 45%, #55585f 72%, #24252a 100%);
  box-shadow: 0 0 0 0.25cqw rgba(0, 0, 0, 0.55), 0 12cqw 22cqw -8cqw rgba(10, 22, 51, 0.55), 0 30cqw 40cqw -22cqw rgba(10, 22, 51, 0.45);
}
.phone-body .pb { position: absolute; width: 1.1cqw; background: linear-gradient(90deg, #6b6e76, #2b2c32); }
.phone-body .pb:nth-of-type(1) { left: -0.9cqw; top: 34cqw; height: 8cqw; border-radius: 1cqw 0 0 1cqw; }
.phone-body .pb:nth-of-type(2) { left: -0.9cqw; top: 49cqw; height: 15cqw; border-radius: 1cqw 0 0 1cqw; }
.phone-body .pb:nth-of-type(3) { left: -0.9cqw; top: 68cqw; height: 15cqw; border-radius: 1cqw 0 0 1cqw; }
.phone-body .pb:nth-of-type(4) { right: -0.9cqw; top: 56cqw; height: 24cqw; border-radius: 0 1cqw 1cqw 0; background: linear-gradient(270deg, #6b6e76, #2b2c32); }
.phone-glass { padding: 2.7cqw; border-radius: 16.3cqw; background: #050506; }
.phone-screen { position: relative; overflow: hidden; border-radius: 13.6cqw; background: var(--scr, #F2EDDF); }
.phone-screen > img { display: block; width: 100%; }
.phone-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 26%); }
.phone-status { display: flex; align-items: center; justify-content: space-between; height: 13.6cqw; padding: 1.4cqw 8cqw 0 9.4cqw; color: var(--status, #111); font: 600 4.3cqw/1 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
.phone-status::before { content: ""; position: absolute; top: 3.1cqw; left: 50%; width: 31cqw; height: 9.2cqw; transform: translateX(-50%); border-radius: 5cqw; background: #050506; }
.phone-status svg { display: block; height: 3.3cqw; width: auto; }
.phone-status span:last-child { display: flex; align-items: center; gap: 1.6cqw; }
.phone-home { position: absolute; left: 50%; bottom: 2.2cqw; width: 35cqw; height: 1.35cqw; transform: translateX(-50%); border-radius: 1cqw; background: rgba(255, 255, 255, 0.92); }