/* ================================================================ the phone (Oct 25, 2026)
   One phone for the whole site: an iPhone 17 Pro in Space Black. Every
   phone mockup on every page is this shell, so they all look the same.

     <div class="lr-phone" style="--w: 300px">       the titanium band and bezel
       <div class="lr-phone-scr">                    the glass (each page's own screen inside)
         <div class="lr-phone-isl"></div>            the Dynamic Island
         ...the page's screen...
       </div>
     </div>

   Set the size with --w only. Every part of the shell is a fraction of
   --w (1 unit = --w / 30), so the band, bezel, corners, island, buttons
   and shadow keep the same proportions at any size.

   The tilted version (Les, Saving, Employers) is the same shell laid back
   in 3D with the titanium sides stacked under it: .lr-tilt, below.

   Load this right after chrome.css, before the page's own stylesheet, so
   a page's --w always wins. No motion here: the shell never animates. */

.lr-phone {
  --w: 300px;
  --pu: calc(var(--w) / 30);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--w);
  aspect-ratio: 292 / 600;
  border-radius: calc(var(--pu) * 4.8);
  padding: calc(var(--pu) * .9);
  /* the titanium band: near black, catching light top left */
  background: linear-gradient(135deg, #5C6268 0%, #2B2F33 6%, #131517 20%, #0A0B0C 48%, #0D0F10 76%, #1A1D20 92%, #2E3236 100%);
  box-shadow:
    inset calc(var(--pu) * .09) calc(var(--pu) * .09) calc(var(--pu) * .07) rgba(255, 255, 255, .26),
    inset calc(var(--pu) * -.09) calc(var(--pu) * -.09) calc(var(--pu) * .1) rgba(0, 0, 0, .85),
    0 0 0 calc(var(--pu) * .05) #000,
    0 calc(var(--pu) * 1.2) calc(var(--pu) * 2) calc(var(--pu) * -.6) rgba(0, 0, 0, .55),
    0 calc(var(--pu) * 6) calc(var(--pu) * 10) calc(var(--pu) * -3) rgba(0, 0, 0, .72),
    0 0 calc(var(--pu) * 9) calc(var(--pu) * -1) rgba(168, 237, 196, .1);
  text-align: left;
}
/* the black bezel between the band and the glass */
.lr-phone::before {
  content: "";
  position: absolute;
  inset: calc(var(--pu) * .32);
  border-radius: calc(var(--pu) * 4.48);
  background: #010202;
  box-shadow: 0 0 0 calc(var(--pu) * .04) rgba(0, 0, 0, .9), inset 0 0 0 calc(var(--pu) * .05) rgba(255, 255, 255, .07);
  pointer-events: none;
}
/* the side buttons: action button and volume on the left, side button and
   camera control on the right, as subtle bumps just outside the band */
.lr-phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--pu) * -.2);
  right: calc(var(--pu) * -.2);
  pointer-events: none;
  background:
    linear-gradient(90deg, #474C51, #15171A) left 0 top calc(var(--pu) * 10.6) / calc(var(--pu) * .2) calc(var(--pu) * 2.4) no-repeat,
    linear-gradient(90deg, #474C51, #15171A) left 0 top calc(var(--pu) * 14.6) / calc(var(--pu) * .2) calc(var(--pu) * 4.4) no-repeat,
    linear-gradient(90deg, #474C51, #15171A) left 0 top calc(var(--pu) * 19.9) / calc(var(--pu) * .2) calc(var(--pu) * 4.4) no-repeat,
    linear-gradient(270deg, #2E3236, #0D0E10) right 0 top calc(var(--pu) * 16) / calc(var(--pu) * .2) calc(var(--pu) * 6.6) no-repeat,
    linear-gradient(270deg, #2E3236, #0D0E10) right 0 top calc(var(--pu) * 34) / calc(var(--pu) * .2) calc(var(--pu) * 3.4) no-repeat;
}

/* the glass */
.lr-phone-scr {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: calc(var(--pu) * 3.9);
  overflow: hidden;
  background: #030404;
  box-shadow: inset 0 0 0 calc(var(--pu) * .04) rgba(255, 255, 255, .05);
}
/* a very soft sheen across the glass, lit from the top left */
.lr-phone-scr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .028) 20%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 12%);
}

/* the Dynamic Island, with the camera lens at its right end */
.lr-phone-isl {
  position: absolute;
  z-index: 5;
  top: calc(var(--pu) * 1);
  left: 50%;
  width: 30%;
  height: calc(var(--pu) * 2.6);
  border-radius: calc(var(--pu) * 2);
  transform: translateX(-50%);
  background: #000;
  box-shadow: inset 0 0 0 calc(var(--pu) * .04) rgba(255, 255, 255, .05);
}
.lr-phone-isl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--pu) * .8);
  width: calc(var(--pu) * .85);
  height: calc(var(--pu) * .85);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 38% 34%, #1F2836 0%, #0C1018 40%, #040507 72%);
  box-shadow: inset 0 0 0 calc(var(--pu) * .06) rgba(255, 255, 255, .04);
}

/* ---------------------------------------------------------------- the tilted phone
   The same shell laid back in an isometric tilt, its titanium sides built
   from layers stacked under the face. 980 x 551 at 1440. */
.lr-tilt { position: relative; max-width: 980px; margin: 0 auto; }
.lr-tilt-stage { position: relative; height: 551px; perspective: 2400px; perspective-origin: 50% 30%; overflow: visible; }
.lr-tilt-body {
  --w: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  aspect-ratio: 292 / 600;
  transform-style: preserve-3d;
  transform: translate(-50%, -58%) rotateX(56deg) rotateZ(-58deg) translateZ(0);
}
.lr-tilt-edge {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) / 30 * 4.8);
  transform: translateZ(calc(var(--z) * var(--w) / -250));
  background: linear-gradient(145deg, #50565C 0%, #1C1F22 20%, #0A0B0C 52%, #15181B 80%, #3A3F44 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.lr-tilt-edge[style*="--z:10"] { box-shadow: 0 40px 80px -10px rgba(0, 0, 0, .9), 0 0 120px -20px rgba(168, 237, 196, .14); }
.lr-tilt-body > .lr-phone { --w: inherit; position: absolute; inset: 0; width: auto; aspect-ratio: auto; transform: translateZ(1px); }
.lr-tilt-tag { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; }
@media (max-width: 991px) {
  .lr-tilt-stage { height: 470px; }
  .lr-tilt-body { --w: 340px; }
}
@media (max-width: 767px) {
  .lr-tilt-stage { height: 230px; perspective: 1200px; }
  .lr-tilt-body { --w: 160px; }
  .lr-tilt-tag { bottom: 0; }
}