/* ============================================================
   Device mockup - laptop frame (from device.css)
   ============================================================ */

.device-laptop {
  height: 432px;
  width: 740px;
}

.device-laptop .device-frame {
  background: #0d0d0d;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #c8cacb;
  height: 428px;
  margin: 0 auto;
  padding: 29px 19px 39px 19px;
  position: relative;
  width: 614px;
}

.device-laptop .device-frame::after {
  background: #272727;
  border-radius: 0 0 20px 20px;
  bottom: 2px;
  content: "";
  height: 26px;
  left: 2px;
  position: absolute;
  width: 610px;
}

/* "MacBook" label removed */
.device-laptop .device-frame::before {
  content: none;
}

.device-laptop .device-screen {
  border: 2px solid #121212;
  border-radius: 2px;
  height: 360px;
  width: 576px;
  overflow: hidden;
  position: relative;
}

.device-laptop .device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.device-laptop .device-power {
  background: #e2e3e4;
  border: solid #d5d6d8;
  border-radius: 2px 2px 0 0;
  border-width: 0 4px;
  height: 4px;
  margin-top: -10px;
  position: relative;
  width: 740px;
  z-index: 9;
}

.device-laptop .device-power::after,
.device-laptop .device-power::before {
  content: "";
  position: absolute;
}

.device-laptop .device-power::after {
  background: radial-gradient(circle at center, #e2e3e4 0, #e2e3e4 85%, #a0a3a7 100%);
  border: solid #adb0b3;
  border-width: 0 2px;
  height: 4px;
  left: 50%;
  margin-left: -60px;
  width: 120px;
}

.device-laptop .device-power::before {
  background: #a0a3a7;
  border-radius: 0 0 180px 180px / 0 0 10px 10px;
  box-shadow: inset 0 -2px 6px 0 #474a4d;
  height: 10px;
  left: -4px;
  margin: 0 auto;
  top: 4px;
  width: 740px;
}

/* ---- Space Gray variant ---- */
.device-laptop.device-spacegray .device-frame {
  box-shadow: inset 0 0 0 2px #767a7d;
}

.device-laptop.device-spacegray .device-power {
  background: #909496;
  border-color: #767a7d;
}

.device-laptop.device-spacegray .device-power::after {
  background: radial-gradient(circle at center, #909496 0, #909496 85%, #515456 100%);
  border-color: #5d6163;
}

.device-laptop.device-spacegray .device-power::before {
  background: #515456;
  box-shadow: inset 0 -2px 6px 0 black;
}