/* Dwa wspólne urządzenia. Zrzut zachowuje własne proporcje i pełną zawartość. */
.site-theme .device-frame {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  background: linear-gradient(145deg, #667387, #222c3e 20%, #101725 75%, #506077);
  border: 1px solid #7d8ba3;
  box-shadow: inset 0 0 0 1px #080e19, 0 24px 48px -18px #0008;
}
.site-theme .device-screen { overflow: hidden; position: relative; background: var(--app-bg); }
.site-theme .device-screen > img {
  display: block; width: 100%; height: auto; object-fit: contain;
  object-position: center; transform: none; border-radius: 0;
}
.site-theme .device-phone {
  --screen-ratio: 390 / 844;
  padding: 12px 6px 10px; border-radius: 30px;
  width: min(350px, 100%); overflow: visible;
}
.site-theme .device-phone .device-screen { border-radius: 22px; }
.site-theme .device-phone::before {
  content: ''; position: absolute; top: 5px; left: calc(50% - 14px);
  width: 28px; height: 2px; border-radius: 2px; background: #060b13;
  box-shadow: 0 1px 0 #ffffff24;
}
.site-theme .device-phone::after {
  content: ''; position: absolute; top: 18%; right: -3px;
  width: 2px; height: 10%; border-radius: 2px; background: #6b778b;
}
.site-theme .device-laptop {
  padding: 16px 10px 18px; border-radius: 22px 22px 12px 12px;
  width: 100%; margin-bottom: 18px; overflow: visible;
}
.site-theme .device-laptop .device-screen { border-radius: 8px; }
.site-theme .device-laptop::before {
  content: ''; position: absolute; top: 6px; left: calc(50% - 2px);
  width: 4px; height: 4px; border-radius: 50%; background: #08101e;
  box-shadow: inset 0 0 0 1px #61728e;
}
.site-theme .device-laptop::after {
  content: ''; position: absolute; left: -3%; bottom: -13px;
  width: 106%; height: 16px; border: 1px solid #8492a7;
  border-radius: 3px 3px 50% 50% / 3px 3px 12px 12px;
  background: linear-gradient(90deg, transparent 40%, #142031 40%, #142031 60%, transparent 60%) top center / 100% 3px no-repeat,
    linear-gradient(#bec8d7, #758298 36%, #3f4c62 85%, #293345);
  box-shadow: 0 16px 18px -9px #0007;
}
.site-theme .hero-visual .device-phone {
  position: absolute; width: 29%; right: -1%; bottom: -4%; z-index: 4;
  transform: rotate(3deg); border-radius: 24px; padding: 10px 5px 8px;
}
.site-theme .hero-visual .device-phone .device-screen { border-radius: 17px; }
.site-theme .hero-visual .device-laptop { width: 94%; transform: none; }
.site-theme .hero-insight.insight-right { right: 31%; bottom: 0; max-width: 220px; }
.site-theme .app-showcase-device.device-phone {
  aspect-ratio: auto; box-sizing: border-box; border-radius: 30px;
  transform: none; clip-path: none; width: min(350px, 86vw);
}
.site-theme .app-showcase-device .device-screen { aspect-ratio: var(--screen-ratio); }
.site-theme .device-screen > .product-shot {
  position: absolute; width: 100%; height: 100%; inset: 0; border-radius: 0;
  object-fit: contain; transform: none;
}
.site-theme .showcase { min-height: 820px; align-content: center; grid-template-rows: auto auto; gap: 20px; }
.site-theme .showcase .screen-caption { margin: 0; }
.site-theme .screen-proof { padding-inline: max(3%, 16px); }
.site-theme .screen-proof.rental-proof { max-width: 1180px; }
.site-theme .responsive-device.device-phone { margin-inline: auto; }
.site-theme .story-slide-image .device-phone { margin: auto; max-width: 320px; }
.site-theme .story-slide-image .device-screen > img { width: 100%; height: auto; max-height: none; }
@media (max-width: 640px) {
  .site-theme .hero-visual .device-phone { width: 30%; padding: 6px 3px 5px; border-radius: 13px; }
  .site-theme .hero-visual .device-phone .device-screen { border-radius: 9px; }
  .site-theme .hero-visual .device-phone::before { top: 2px; width: 16px; left: calc(50% - 8px); height: 1px; }
  .site-theme .hero-visual .device-laptop { padding: 8px 5px 9px; border-radius: 12px 12px 6px 6px; }
  .site-theme .hero-visual .device-laptop::before { top: 2px; width: 3px; height: 3px; }
  .site-theme .hero-visual .device-laptop::after { bottom: -7px; height: 9px; }
  .site-theme .showcase { min-height: 0; gap: 20px; }
  .site-theme .screen-proof { padding-inline: 0; }
}
/* Reset dawnych atrap monitora, aby nie nadpisywały wspólnej ramki. */
.site-theme .device-laptop::before,
.site-theme .device-laptop::after {
  display: block; transform: none; pointer-events: none; z-index: 1;
}
.site-theme .device-laptop::before { right: auto; bottom: auto; border: 0; }
.site-theme .device-laptop::after { top: auto; right: auto; }
.site-theme .audience-copy .section-preview-accent {
  overflow: visible; clip-path: none; background: none; border: 0; box-shadow: none;
}
.site-theme .audience-copy .section-preview-accent .device-screen > img {
  scale: 1; translate: none; transform: none; object-fit: contain;
}
.site-theme .audience-copy .section-preview-accent figcaption {
  position: static; margin-top: 24px; padding: 0 12px;
  background: none; border: 0; border-radius: 0; backdrop-filter: none;
  color: var(--app-text); text-align: center;
  font-size: .8125rem; font-weight: 600; line-height: 1.5;
  overflow-wrap: anywhere;
}