/* ---------------- iPhone Air frame (2026-09-07) ----------------
   The five Customer Hub mobile captures sit inside a photographic
   iPhone Air render (Cloud White) rather than the CSS phone shell the
   pages drew before. The composite is a transparent 1380x2880 WebP:
   real hardware, the capture already seated in the 1260x2736 screen at
   (60,72) and masked to the screen's corner radius. Nothing here draws
   device chrome - it only takes the old shell back off.

   Loaded after each page's own <style> block, but every rule doubles the
   modifier class (.frame-phone.frame-phone--air, 0-2-0) so it outranks
   the existing .frame-phone / a.frame-phone / .fp-screen--app /
   .fp-screen--shot rules on specificity alone, whatever the load order.

   Sizing is deliberately absent: the pages keep their own widths and
   breakpoints, so the device lands at the height it had before. */

.frame-phone.frame-phone--air{
  background:none;
  border:0;
  padding:0;
  border-radius:0;
  overflow:visible;
}

/* the screen box stops being a box - the frame PNG carries its own
   bezel, corners and status area, so no ratio to clip against, no
   synthetic status strip to pad for, no fill behind it */
.frame-phone.frame-phone--air .fp-screen{
  position:relative;
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  aspect-ratio:auto;
  padding:0;
}

.frame-phone.frame-phone--air .fp-screen img{
  position:static;
  display:block;
  width:100%;
  height:auto;
  top:auto; left:auto; right:auto; bottom:auto;
  border-radius:0;
  /* shape-accurate because the source is transparent: the shadow
     follows the actual device silhouette, not a rectangle */
  filter:drop-shadow(0 10px 22px rgba(12,18,30,.18));
}

/* the drawn island / notch are now real hardware in the render */
.frame-phone.frame-phone--air .fp-island,
.frame-phone.frame-phone--air .fp-notch{display:none}

/* the homepage phone is a link with a hover peek. Its overlay was
   inset:0 on a rounded, clipping screen box; with the shell gone it has
   to be told where the screen is, or it would wash the bezel too.
   Insets are the composite's own geometry: 60/1380 and 72/2880. */
.frame-phone.frame-phone--air .peek-fade{
  inset:2.5% 4.35%;
  border-radius:18px;
}