/* Device shells — the iPhone and laptop from the marketing animation
   (device-shells.jsx), rebuilt in CSS. Every dimension is a fraction of the
   shell's own width (cqw), so one width scales the whole device exactly as
   the animation's k = W/340 did. Screen content fills the positioned,
   overflow-hidden screen box; a screenshot uses .lp-phone__shot or fills the
   laptop screen directly.

   Markup:
     <div class="lp-phone">
       <span class="lp-phone__button lp-phone__button--action"></span>
       <span class="lp-phone__button lp-phone__button--up"></span>
       <span class="lp-phone__button lp-phone__button--down"></span>
       <span class="lp-phone__button lp-phone__button--power"></span>
       <div class="lp-phone__body"><div class="lp-phone__black"><div class="lp-phone__screen">
         …screen content…
         <span class="lp-phone__island"></span>
         <span class="lp-phone__time">10:54</span>
         <span class="lp-phone__status">…</span>
         <span class="lp-phone__home"></span>
       </div></div></div>
     </div>

     <div class="lp-laptop">
       <div class="lp-laptop__lid"><div class="lp-laptop__bezel"><div class="lp-laptop__screen">…</div></div></div>
       <div class="lp-laptop__hinge"></div>
       <div class="lp-laptop__foot"></div>
     </div> */

/* ---------- iPhone ---------- */

.lp-phone {
  --lp-phone-screen: #0b1130;
  --lp-phone-ink: #fff;

  position: relative;
  width: 100%;
  aspect-ratio: 72 / 150;
  container-type: inline-size;
}

.lp-phone__button {
  position: absolute;
  width: .85cqw;
  background: linear-gradient(90deg, #5a6673, #dce2e7 45%, #8c98a3);
  box-shadow: 0 .35cqw .4cqw rgb(0 0 0 / 35%);
}

.lp-phone__button--mute,
.lp-phone__button--action {
  left: -.75cqw;
  top: 31cqw;
  height: 6.5cqw;
  border-radius: 2px 0 0 2px;
}

.lp-phone__button--up {
  left: -.75cqw;
  top: 46cqw;
  height: 12cqw;
  border-radius: 2px 0 0 2px;
}

.lp-phone__button--down {
  left: -.75cqw;
  top: 62cqw;
  height: 12cqw;
  border-radius: 2px 0 0 2px;
}

.lp-phone__button--power {
  right: -.75cqw;
  top: 49cqw;
  height: 20cqw;
  border-radius: 0 2px 2px 0;
}

.lp-phone__button--camera {
  right: -.55cqw;
  top: 135cqw;
  width: .65cqw;
  height: 14cqw;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(90deg, #4d5965, #a8b3bd 60%, #62717f);
}

.lp-phone__body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.1cqw;
  border-radius: 15.5cqw;
  background: linear-gradient(112deg, #788590, #eef1f4 2%, #a5afb9 4%, #606c79 46%, #aeb9c3 93%, #e8edf1 98%, #73808c);
  box-shadow:
    inset 0 0 0 .3cqw rgb(244 249 255 / 70%),
    inset -.4cqw 0 .7cqw rgb(0 0 0 / 40%),
    .55cqw .3cqw 0 #596775,
    0 14cqw 28cqw rgb(0 0 0 / 48%);
}

/* Fine antenna breaks interrupt the metal rail without crossing the glass. */
.lp-phone__body::before,
.lp-phone__body::after {
  content: "";
  position: absolute;
  top: 24cqw;
  bottom: 24cqw;
  width: 1.1cqw;
  border-block: .65cqw solid #53606d;
  pointer-events: none;
}

.lp-phone__body::before {
  left: 0;
}

.lp-phone__body::after {
  right: 0;
}

.lp-phone__black {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.65cqw;
  border-radius: 14.4cqw;
  background: #020408;
  box-shadow: inset 0 0 0 .3cqw #232c35;
}

/* The receiver sits in the top glass edge, above the Dynamic Island. */
.lp-phone__speaker {
  position: absolute;
  top: .5cqw;
  left: 42%;
  width: 16%;
  height: .65cqw;
  border-radius: 1cqw;
  background: #202a34;
  box-shadow: inset 0 .2cqw .25cqw #000;
}

.lp-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12.75cqw;
  background: var(--lp-phone-screen);
  overflow: hidden;
  color: var(--lp-phone-ink);
  font-family: var(--lp-font);
}

/* Reflections stay faint so the actual dashboard remains easy to recognise. */
.lp-phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(118deg, rgb(232 243 255 / 9%), transparent 32%, transparent 72%, rgb(198 222 241 / 4%));
  box-shadow: inset .3cqw .3cqw .7cqw rgb(233 244 255 / 12%);
  pointer-events: none;
}

/* Keep both safe areas clear; the capture retains its original aspect ratio. */
.lp-phone__shot {
  position: absolute;
  inset: 18cqw 0 10cqw;
  width: 100%;
  height: calc(100% - 28cqw);
  object-fit: cover;
  object-position: top;
}

.lp-phone__island {
  position: absolute;
  top: 3.5cqw;
  left: 50%;
  width: 29cqw;
  height: 8.5cqw;
  border-radius: 5.3cqw;
  background: #010204;
  box-shadow: inset 0 .3cqw .4cqw rgb(136 158 184 / 15%);
  transform: translateX(-50%);
}

.lp-phone__island::before {
  content: "";
  position: absolute;
  top: 3.3cqw;
  left: 4cqw;
  width: 11cqw;
  height: 1.7cqw;
  border-radius: 2cqw;
  background: #090e16;
}

.lp-phone__island::after {
  content: "";
  position: absolute;
  top: 2.3cqw;
  right: 2.5cqw;
  width: 3.9cqw;
  height: 3.9cqw;
  border: .45cqw solid #15283b;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7895ae, #153451 25%, #04070c 66%);
  box-shadow: 0 0 0 .45cqw #060a11;
}

.lp-phone__time {
  position: absolute;
  top: 5cqw;
  left: 8cqw;
  font-size: 4.1cqw;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--lp-phone-ink);
}

.lp-phone__status {
  position: absolute;
  top: 6.1cqw;
  right: 7.5cqw;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  color: var(--lp-phone-ink);
}

.lp-phone__status i {
  font-size: 2.9cqw;
}

.lp-phone__battery {
  position: relative;
  width: 7cqw;
  height: 3.5cqw;
  padding: .44cqw;
  border: .44cqw solid rgb(255 255 255 / 90%);
  border-radius: 1.18cqw;
}

.lp-phone__battery::after {
  content: "";
  position: absolute;
  top: .7cqw;
  right: -1.25cqw;
  width: .7cqw;
  height: 1.2cqw;
  border-radius: 0 .3cqw .3cqw 0;
  background: var(--lp-phone-ink);
  opacity: .6;
}

.lp-phone__battery i {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: .5cqw;
  background: var(--lp-phone-ink);
}

.lp-phone__home {
  position: absolute;
  bottom: 3.1cqw;
  left: 50%;
  width: 34cqw;
  height: 1.3cqw;
  border-radius: .9cqw;
  background: rgb(255 255 255 / 90%);
  transform: translateX(-50%);
}

/* Contact shadow under a floating phone. */
.lp-phone__shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -8cqw;
  height: 16cqw;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 60%), transparent 70%);
  filter: blur(5cqw);
}


/* ---------- Laptop ---------- */

.lp-laptop {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.lp-laptop::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -5.9cqw;
  height: 9.2cqw;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 70%), transparent 70%);
  filter: blur(2.45cqw);
}

.lp-laptop__lid {
  position: relative;
  padding: 1.22cqw;
  border-radius: 2.24cqw;
  background: linear-gradient(160deg, #2a2f3d, #101319 45%, #22262f);
  box-shadow: 0 6.1cqw 14.3cqw rgb(0 0 0 / 65%), inset 0 0 0 1px rgb(255 255 255 / 10%), inset 0 1px 0 rgb(255 255 255 / 22%);
}

.lp-laptop__bezel {
  position: relative;
  padding: 1.22cqw;
  border-radius: 1.22cqw;
  background: #050710;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
}

.lp-laptop__bezel::before {
  content: "";
  position: absolute;
  top: .3cqw;
  left: 50%;
  width: .71cqw;
  height: .71cqw;
  border-radius: 50%;
  background: #0a0f1c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), inset 0 0 4px rgb(80 140 255 / 35%);
  transform: translateX(-50%);
}

.lp-laptop__screen {
  position: relative;
  aspect-ratio: 2554 / 1236;
  border-radius: .61cqw;
  background: var(--lp-panel);
  overflow: hidden;
}

.lp-laptop__screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lp-laptop__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 3%) 28%, transparent 46%);
}

.lp-laptop__hinge {
  position: relative;
  width: 98.5%;
  height: 1.43cqw;
  margin: 0 auto;
  border-radius: 0 0 1.43cqw 1.43cqw;
  background: linear-gradient(180deg, #33384a, #171a25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 .6cqw 1.4cqw rgb(0 0 0 / 40%);
}

.lp-laptop__hinge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12.2cqw;
  height: .51cqw;
  border-radius: 0 0 .61cqw .61cqw;
  background: #0a0d16;
  transform: translateX(-50%);
}

.lp-laptop__foot {
  width: 42%;
  height: .51cqw;
  margin: 0 auto;
  border-radius: 0 0 1.22cqw 1.22cqw;
  background: linear-gradient(180deg, #1a1e2b, #0a0d16);
}