/* Shared approved FormCheck Athlete device component. One 12:25 chassis for every capture.
   Only --device-width changes the overall size (240 / 320 / 400px).
   Hardware dimensions use the chassis container's units to scale together.

   The capture viewport fits the complete application area proportionally.
   Capture metadata excludes browser chrome, never application controls:
   A01/A02/A04/A06 have a baked-in 15px outer scrollbar gutter.
   A02 also has a nested gutter at x346–359, y67–728, masked separately.
   Original JPEG files remain untouched; captions link to the originals.
*/
.device-iphone{
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:var(--device-width,320px);
  aspect-ratio:12 / 25;
  margin-inline:auto;
  border-radius:16% / 7.68%;
  background:linear-gradient(110deg,#a7a8a8 0%,#646666 3%,#292b2d 8%,
    #5c5e60 45%,#252729 73%,#8c8e8f 96%,#bfc0be 100%);
  container-type:inline-size;
  isolation:isolate;
}
.device-iphone--small{--device-width:240px}
.device-iphone--medium{--device-width:320px}
.device-iphone--large{--device-width:400px}

/* Titanium edge, fine outer highlight, inset black glass and studio shadow. */
.device-iphone__hardware{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 .3cqw #c5c6c2,
    inset 0 0 0 .65cqw #343638,inset 0 0 0 1.05cqw #838585,
    inset 0 0 0 1.7cqw #101214,
    2.2cqw 3.5cqw 5cqw -1.5cqw rgb(18 22 27 / .25),
    .2cqw .7cqw 1.2cqw rgb(18 22 27 / .22);
}
.device-iphone__buttons{position:absolute;inset:0;pointer-events:none;z-index:-1}
.device-iphone__button{
  position:absolute;
  width:1.15cqw;
  border-radius:.5cqw;
  background:linear-gradient(90deg,#27292b,#8e9091 44%,#424547 75%,#16181a);
  box-shadow:inset 0 0 0 .22cqw #333638;
}
.device-iphone__button--action{left:-.85cqw;top:17.5%;height:4.3cqw}
.device-iphone__button--volume-up{left:-.85cqw;top:25%;height:9cqw}
.device-iphone__button--volume-down{left:-.85cqw;top:31.3%;height:9cqw}
.device-iphone__button--side{right:-.85cqw;top:26%;height:15cqw}

/* Fixed aperture; the screenshot cannot determine any hardware geometry. */
.device-iphone__screen{
  position:absolute;
  box-sizing:border-box;
  inset:1.65% 3.4%;
  overflow:hidden;
  border-radius:13.5% / 6.25%;
  background:linear-gradient(180deg,#151a20,transparent 10%),var(--screen-background,#0b0e13);
  box-shadow:0 0 0 1cqw #030405,inset 0 0 0 .2cqw #202326;
}
.device-iphone__island{
  position:absolute;
  z-index:2;
  top:2%;
  left:33%;
  width:34%;
  height:4.15%;
  border-radius:999px;
  background:#000;
  box-shadow:0 0 0 .2cqw rgb(50 54 58 / .55);
  pointer-events:none;
}
.device-iphone__island::after{
  content:'';
  position:absolute;
  right:10%;
  top:31%;
  width:10%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#1c344c 0%,#0b1725 22%,#020409 48%,#0b0f14 70%,#000 72%);
  box-shadow:0 0 0 .15cqw #080b10;
}
.device-iphone__screen::after{
  content:'';
  position:absolute;
  bottom:1.25%;
  left:34%;
  width:32%;
  height:.5%;
  border-radius:999px;
  background:#e4e5e7;
  pointer-events:none;
}

/* Reserve empty space for the island and home indicator. Fit by BOTH axes,
   with one uniform scale. Even square screenshot corners remain visible. */
.device-iphone__content{
  position:absolute;
  inset:8.5% 2.5% 4.5%;
  container-type:size;
}
.device-iphone__capture{
  position:absolute;
  top:0;
  left:50%;
  width:min(100cqw,calc(100cqh * var(--capture-width) / var(--capture-height)));
  aspect-ratio:var(--capture-width) / var(--capture-height);
  transform:translateX(-50%);
  overflow:clip;
  background:var(--screen-background,#0b0e13);
}
.device-iphone__capture img{
  display:block;
  box-sizing:content-box;
  width:calc(100% * var(--source-width) / var(--capture-width));
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  filter:none;
  opacity:1;
  transform:none;
}
/* A02's nested browser scrollbar is already encoded in the bitmap.
   Cover ONLY its gutter; retain the complete header, footer and set card. */
.device-iphone__capture--nested-scrollbar::after{
  content:'';
  position:absolute;
  right:0;
  top:calc(100% * 67 / 812);
  width:calc(100% * 14 / 360);
  height:calc(100% * 662 / 812);
  background:#0b0e13;
  pointer-events:none;
}

/* Public-site composition only. Hardware above is the approved prototype.
   Keep .device-media separate from the internal light-gray QA surface. */
.device-media{
  width:100%;
  max-width:420px;
  min-width:0;
  margin-inline:auto;
  padding:20px 18px;
  border-radius:24px;
}
.device-media--small{--device-width:240px;max-width:320px}
.device-media--large{--device-width:400px;max-width:480px}
.device-media__link{display:block;text-decoration:none}
.device-media__link:focus-visible{outline-offset:7px}
.device-media figcaption{text-align:center}
.device-media figcaption .text-link{margin-top:8px;font-size:13px}
@media (max-width:600px){
  .device-media{padding:16px 14px}
}