/* Gatepass workflow strip embed — phone frame fills 375×951 iframe (mobile strip on gatepass.html) */
html.embed-strip,
html.embed-strip body {
  margin: 0 !important;
  padding: 0 !important;
  width: 375px !important;
  height: 951px !important;
  min-height: 951px !important;
  max-height: 951px !important;
  overflow: hidden !important;
  background: #0f172a !important;
}

html.embed-strip body {
  display: block !important;
  min-height: 951px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* Hide page titles / marketing chrome outside the phone mockup */
html.embed-strip #showcase-header,
html.embed-strip #header-section,
html.embed-strip #header,
html.embed-strip body > header {
  display: none !important;
}

/* Decorative full-page backgrounds */
html.embed-strip body > .fixed,
html.embed-strip .fixed.inset-0.pointer-events-none {
  display: none !important;
}

/* Layout wrappers — fill iframe */
html.embed-strip #showcase-container,
html.embed-strip #main-showcase,
html.embed-strip body > main {
  width: 375px !important;
  height: 951px !important;
  max-width: 375px !important;
  max-height: 951px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: none !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* Phone device frames — edge-to-edge in strip */
html.embed-strip #device-frame,
html.embed-strip #mobile-device,
html.embed-strip #mobile-frame,
html.embed-strip .device-frame,
html.embed-strip #main-showcase > .relative,
html.embed-strip main.max-w-\[375px\] > .relative,
html.embed-strip main > .relative.w-full {
  width: 375px !important;
  height: 951px !important;
  min-height: 951px !important;
  max-height: 951px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  scale: 1 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  --tw-ring-shadow: none !important;
  aspect-ratio: auto !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  flex-shrink: 0 !important;
}

html.embed-strip #device-frame.scale-\[0\.85\] {
  transform: none !important;
}

/* gatepass_5 feature image */
html.embed-strip main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* Keep in-app scroll inside the phone UI only */
html.embed-strip #device-frame .overflow-y-auto,
html.embed-strip .device-frame .overflow-y-auto,
html.embed-strip #mobile-frame .overflow-y-auto {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}