/* Transparent hardware surrounds exact-ratio app captures; it never covers their content. */
.device-frame {
  aspect-ratio: var(--frame-ratio);
  background: transparent;
}
.device-frame--desktop {
  --frame-ratio: 1920 / 1250;
  --screen-left: 1.25%;
  --screen-top: 1.92%;
  --screen-width: 97.5%;
  --screen-height: 84.24%;
  --screen-radius: 0.5%;
}
.device-frame--laptop {
  --frame-ratio: 1440 / 940;
  --screen-left: 4.861111%;
  --screen-top: 3.404255%;
  --screen-width: 90.277778%;
  --screen-height: 86.43617%;
  --screen-radius: 0.55%;
}
.device-frame--tablet {
  --frame-ratio: 1100 / 1460;
  --screen-left: 2.909091%;
  --screen-top: 2.739726%;
  --screen-width: 94.181818%;
  --screen-height: 94.65914%;
  --screen-radius: 2.1%;
}
.device-frame--phone {
  --frame-ratio: 430 / 908;
  --screen-left: 4.651163%;
  --screen-top: 3.524229%;
  --screen-width: 90.697674%;
  --screen-height: 92.951542%;
  --screen-radius: 8.9% / 4.1%;
}
.device-frame .device-screen {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  padding: 0;
  border: 0;
  border-radius: var(--screen-radius);
  background: transparent;
  overflow: hidden;
}
.device-frame .device-screen::before {
  content: none;
}
.device-frame .device-screen picture {
  display: block;
  width: 100%;
  height: 100%;
}
.device-frame .device-screen img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.device-frame > .device-frame__hardware {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.site-capture {
  margin: 36px 0;
  width: 100%;
  max-width: var(--capture-width, 100%);
  min-width: 0;
  background: transparent;
}
.site-capture__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.site-capture__link:hover {
  text-decoration: none;
}
.site-capture .device-frame {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 12px 20px #00000018);
}
.site-capture--phone {
  max-width: min(var(--capture-width, 300px), 300px);
  margin-left: auto;
  margin-right: auto;
}
.site-capture__detail {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
}
.site-capture__detail picture {
  display: block;
}
.site-capture .site-capture__detail img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}
.site-capture figcaption {
  margin-top: 15px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.product-screenshot.site-capture {
  margin: 0;
}
:root[data-theme="dark"] .site-capture .device-frame {
  filter: drop-shadow(0 12px 20px #00000045);
}
@media (max-width: 480px) {
  .site-capture--phone {
    max-width: min(var(--capture-width, 290px), 290px);
  }
  .site-capture__detail {
    padding: 6px;
  }
}