/* iPhone 18 Pro Max, front — shape only, so it survives any resize.
   Apple: body 163.4 × 78.0 mm; display 6.9", 2868 × 1320 px @ 460 ppi = 72.89 × 158.36 mm (440 × 956 pt @3x).
   → bezel 2.55 mm ≈ 15.4 pt; body ≈ 471 × 986 pt. Dynamic Island ≈ 81 × 36 pt (smaller on the 18 Pro line).
   Not published by Apple (approximations): display corner radius 62 pt, body radius 77 pt (concentric), button positions.
   Every length below is a ratio of the body, so the phone keeps its true shape at any size. Finish: Silver. */
html body .phone {
  aspect-ratio: 78 / 163.4;
  height: auto;
  border-radius: 16.35% / 7.81%;                 /* 77 pt of 471 × 986 */
  padding: 0 !important;
  border: 3px solid transparent;                 /* the aluminium band */
  background:
    linear-gradient(#08090A, #08090A) padding-box,
    linear-gradient(150deg, #F2F4F6 0%, #B9C1C7 28%, #E6EAED 52%, #A3ACB3 78%, #DDE2E6 100%) border-box !important;
  box-shadow: 0 60px 80px -40px rgba(0, 30, 55, .38) !important;
  position: relative;
  isolation: isolate;
}
/* the display sits 15.4 pt in from every edge: 3.27 % of the width, 1.56 % of the height (positioned, so the % are the phone's own) */
html body .phone .screen { position: absolute; top: calc(1.56% - 3px); bottom: calc(1.56% - 3px); left: calc(3.27% - 3px); right: calc(3.27% - 3px);
  height: auto; border-radius: 14.09% / 6.49%; }   /* 62 pt of 440 × 956 */
/* Dynamic Island: 81 × 36 pt, 11 pt below the top of the display */
html body .phone::before {
  width: 17.5% !important;                       /* 81 pt of 471, measured against the box inside the 3px band */
  height: auto !important;
  aspect-ratio: 81 / 36;
  top: 2.68% !important;                         /* (15.4 + 11) pt of 986 */
  border-radius: 999px !important;
  background: #000 !important;
}
/* hardware on the band: left Action + volume up / down, right side button + Camera Control */
html body .phone::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -1.1%; right: -1.1%; pointer-events: none;
  background:
    linear-gradient(#B7C0C6, #B7C0C6) left  0 top 17.6% / 1.4% 3.6% no-repeat,   /* Action button */
    linear-gradient(#B7C0C6, #B7C0C6) left  0 top 24.4% / 1.4% 6.4% no-repeat,   /* volume up */
    linear-gradient(#B7C0C6, #B7C0C6) left  0 top 32.4% / 1.4% 6.4% no-repeat,   /* volume down */
    linear-gradient(#B7C0C6, #B7C0C6) right 0 top 27.0% / 1.4% 10% no-repeat,    /* side button */
    linear-gradient(#8E9AA3, #8E9AA3) right 0 top 57.0% / 1.0% 6.2% no-repeat;   /* Camera Control (flush sapphire) */
  border-radius: 2px;
}