/* Scoped refinement of the established website's artwork and phone component.
   iPhone 17 Pro Max display: 440 x 956 points (1320 x 2868 pixels).
   Native demo captures already reserve the top safe area; do not crop/stretch. */
.phone {
  --bezel: 7px;
  container-type: inline-size;
  padding: var(--bezel);
  border-radius: 16% / 7.55%;
  background: #07080a;
  box-shadow:
    0 0 0 1px #272b2f,
    0 0 0 2px #b8bec3,
    0 0 0 3px #51575c,
    0 1px 0 3px #d3d6d8,
    0 28px 56px -12px rgb(0 0 0 / .7),
    0 5px 12px -4px rgb(0 0 0 / .7);
}
.phone-screen {
  aspect-ratio: 440 / 956;
  border-radius: 14.2cqw;
  background: #fff;
  color: #101114;
  box-shadow: 0 0 0 1px #000;
}
.phone-screen img { object-fit: contain; }
.phone-screen::after { display: none; }
.phone::before, .phone::after, .phone .power,
.phone .action, .phone .camera-control {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5c6267, #d4d7d9 45%, #686f74);
  box-shadow: 0 0 0 .5px #25292c;
}
.phone::before { left: -5px; top: 24%; height: 5.5%; }
.phone::after { left: -5px; top: 31%; height: 5.5%; }
.phone .action { left: -5px; top: 17%; height: 3%; }
.phone .power { right: -5px; top: 26%; height: 9%; }
.phone .camera-control { right: -5px; top: 62%; height: 6%; background: #41484d; }
.phone-status {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.phone-home {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 3.55%;
  background: #fff;
  pointer-events: none;
}
.phone-home::after {
  content: '';
  position: absolute;
  bottom: 24%;
  left: 34.5%;
  width: 31%;
  height: 14.7%;
  border-radius: 99px;
  background: currentColor;
}
.phone[data-screens="spaces"] .phone-screen { background: #000; color: #fff; }
.phone[data-screens="spaces"] .phone-home { background: #1f1f22; }
.cast img { width: 100%; height: auto; }
.quality .q img { width: 76px; height: 88px; object-fit: contain; object-position: left bottom; }