/* Original xvector phone hardware from Magnific. Screens remain separate,
   unmodified high-resolution images. No perspective or image filters. */
.product-phone {
  position: relative; aspect-ratio: 938 / 1912; padding: 0; border: 0;
  border-radius: 15% / 7.4%; margin: 0; isolation: isolate; transform: none;
  background: url("../assets/devices/phone-15-pro.webp") center / 100% 100% no-repeat;
  box-shadow: 0 24px 44px -20px #00170bcc;
}
.device-glass {
  position: absolute; inset: 1.15% 3.6% 1.25%; border: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 13.5% / 6.7%; background: #fff;
}
.device-status {
  flex: 0 0 8%; position: relative; display: flex; align-items: center;
  justify-content: space-between; padding: 0 7%; color: #111;
  font: 600 10px/1 Arial,sans-serif; background: #fff;
}
.device-status svg { width: 34px; height: 11px; }
.device-island {
  position: absolute; width: 32.2%; height: 51%; left: 33.9%; top: 37%;
  border-radius: 30px;
  background: url("../assets/devices/phone-15-pro.webp") 48.17% 4.19% / 332.62% 2515.79%;
}
.device-island::after { content: none; }
.product-phone .device-screen {
  display: block; flex: 1; min-height: 0; width: 100%; height: auto;
  overflow: auto; scrollbar-width: none; overscroll-behavior: contain;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff;
  transform: none; filter: none;
}
.product-phone .device-screen::-webkit-scrollbar { display: none; }
.product-phone .device-screen img {
  display: block; width: 100%; max-width: none; height: auto;
  margin: 0 0 -16.6%; padding: 0; border: 0; border-radius: 0;
  transform: none; filter: none;
}
button.device-screen { cursor: pointer; touch-action: pan-y; }
button.device-screen:focus-visible { outline: 3px solid #16865e; outline-offset: -3px; }
.device-app-nav { position: relative; width: 100%; aspect-ratio: 6.025; flex-shrink: 0; overflow: hidden; background: #fff; }
.device-app-nav img { position: absolute; width: 100%; height: auto; bottom: 0; left: 0; border-radius: 0; }
.device-home { flex: 0 0 2%; background: #fff; padding-top: 1%; }
.device-home::after { content: ""; display: block; width: 32%; height: 3px; border-radius: 5px; background: #111; margin: auto; }
.device-key { display: none; }
.demo-stage { max-width: 470px; perspective: none; }
.capture-gallery, .business-intro .capture-gallery { max-width: 390px; }
.capture-badge { margin-bottom: 26px; letter-spacing: .18em; color: #bbd2c7; }
.device-scene {
  width: 100%; position: relative; padding-bottom: 28px;
  display: flex; justify-content: center; height: auto; perspective: none;
}
.device-scene .real-device, .business-intro .real-device {
  position: relative; width: 318px; margin: 0;
  transform: none; transition: none;
}
.capture-zoom {
  display: inline-flex; width: auto; min-height: 44px; align-items: center; justify-content: center; gap: 9px;
  background: transparent; color: #c5d9ce; border: 0; border-bottom: 1px solid #cfdfcf35;
  border-radius: 0; padding: 6px 3px; font: 500 12px/1.3 "DM Sans", sans-serif; cursor: zoom-in;
}
.capture-zoom > span { position: static; transform: none; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 16px; }
.capture-zoom .line-icon { width: 15px; height: 15px; }
.capture-zoom:hover { color: #c9f7a0; border-color: #c9f7a0; }
.capture-instruction { margin: 18px 0 12px; font-size: 11px; color: #a6bfb1; }
.capture-tabs {
  gap: 3px; padding: 4px; border: 1px solid #ffffff20; border-radius: 32px;
  background: #042a2280;
}
.capture-tabs button { border: 0; border-radius: 24px; background: transparent; min-height: 44px; padding: 10px 16px; }
.capture-tabs button[aria-selected="true"] { color: #173d32; background: #d8f5ba; box-shadow: 0 2px 5px #001c1920; }
.capture-state { margin: 13px 0 0; color: #c5d9ce; font-size: 10px; letter-spacing: .12em; min-height: 15px; }
.business-intro .capture-state { font-size: 10px; margin-top: 13px; }
.capture-note, .business-intro .capture-note { margin-top: 7px; opacity: .7; }
/* Same hardware and proportions in both HyperFrames compositions. */
.phone-subject.product-phone { width: 238px; margin-top: -16px; }
.phone-subject .device-status { font-size: 8px; }
.phone-subject .device-status svg { width: 27px; }
.phone-subject img.device-screen { object-fit: cover; object-position: top; }
@media (max-width: 1100px) {
  .device-scene .real-device, .business-intro .real-device { width: 294px; }
}
@media (max-width: 600px) {
  .capture-gallery, .business-intro .capture-gallery { max-width: 340px; }
  .device-scene .real-device, .business-intro .real-device { width: 284px; }
  .capture-badge { margin-bottom: 22px; }
  .device-scene { padding-bottom: 22px; }
  .capture-instruction { font-size: 11px; }
  .capture-tabs button { font-size: 12px; }
  .phone-subject.product-phone { width: 156px; margin-top: 0; }
  .phone-subject .device-status { font-size: 6px; }
  .phone-subject .device-status svg { width: 19px; }
  .phone-subject .device-home::after { height: 2px; }
}
@media (max-width: 370px) {
  .device-scene .real-device, .business-intro .real-device { width: 268px; }
}