/* Real Blender-rendered hardware. The display remains live HTML/video beneath it. */
.ad-device-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 1680;
  isolation: isolate;
  pointer-events: none;
  flex: none;
}
.ad-device-screen {
  position: absolute;
  left: 6.83787037%;
  top: 5.31481481%;
  width: 86.32425926%;
  height: 89.37037037%;
  border-radius: 14.8664274% / 6.837961%;
  overflow: hidden;
  container-type: inline-size;
  background: #080909;
}
.ad-device-preview .ad-device-hardware {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
  border-radius: 0;
}
.ad-device-preview .native-reel {
  width: 100%;
  height: 100%;
}
.ad-device-preview .phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.ad-device-preview .reel-status {
  top: 1.5%;
  left: 6%;
  right: 6%;
  font-size: 3.5cqw;
}
.ad-device-preview .reel-status-icons { font-size: 3cqw; letter-spacing: .4cqw; }
.ad-device-preview .reel-top { top: 6%; left: 6%; right: 6%; }
.ad-device-preview .reel-top strong { font-size: 6cqw; letter-spacing: -.05cqw; }
.ad-device-preview .reel-top svg { width: 7cqw; height: 7cqw; }
.ad-device-preview .reel-rail { right: 4%; bottom: 31%; gap: 6cqw; }
.ad-device-preview .reel-rail > span,
.ad-device-preview .reel-rail svg { width: 8cqw; height: 8cqw; }
.ad-device-preview .reel-sound { font-size: 6cqw; line-height: 8cqw; border-radius: 1.5cqw; }
.ad-device-preview .reel-details { bottom: 8%; left: 5%; right: 5%; }
.ad-device-preview .reel-account { gap: 2.5cqw; margin-bottom: 3.5cqw; }
.ad-device-preview .reel-avatar { width: 10cqw; height: 10cqw; font-size: 3cqw; }
.ad-device-preview .reel-account strong { font-size: 3.5cqw; letter-spacing: -.05cqw; }
.ad-device-preview .reel-follow { font-size: 3cqw; padding: 1.7cqw 2.7cqw; border-radius: 1.5cqw; margin-left: 0; }
.ad-device-preview .reel-details > p {
  font: 400 3.5cqw/1.4 -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  max-width: 88%;
  padding: 0;
  margin: 0 0 3cqw;
  color: #fff;
}
.ad-device-preview .reel-details > small { font-size: 2.6cqw; margin: 0 0 3cqw; color: #fffc; }
.ad-device-preview .reel-native-cta { font-size: 3.5cqw; min-height: 11cqw; padding: 3cqw 4cqw; border-radius: 2cqw; }
.ad-device-preview .reel-native-cta > span { font-size: 5cqw; }
.ad-device-preview .reel-bottom { height: 7%; padding: 0 5%; }
.ad-device-preview .reel-bottom svg { width: 8cqw; height: 8cqw; }
.ad-device-preview .reel-profile { width: 7cqw; height: 7cqw; font-size: 3cqw; line-height: 7cqw; }

.demo-ad-video {
  height: 210px;
  padding: 3px 0;
  display: flex;
  justify-content: center;
  background: radial-gradient(ellipse at center, #e6d2d9, #f3e2e6 70%);
}
.demo-ad-video > .ad-device-preview { height: 100%; width: auto; }
.demo-gallery-device { padding: 12px 10px 0; background: #f4eee8; }
.demo-gallery-device > .ad-device-preview { max-width: 138px; margin: auto; }
.demo-ad-gallery article { overflow: visible; }
.demo-ad-gallery .demo-gallery-device { border-radius: 14px 14px 0 0; }
.demo-ad-gallery .demo-ad-description { line-height: 1.5; }
@media (min-width: 761px) {
  .features-panel:has(.ad-device-preview) { top: 20px; }
}
.features-panel .franchise-research-grid { padding: 10px 18px; gap: 20px; }
.franchise-research-location { width: 100%; text-align: center; }
.franchise-research-location > .ad-device-preview { max-width: clamp(72px, 12svh, 112px); margin: auto; }
.franchise-research-location small { margin-top: 5px; }
.creative-device-fan {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 18px;
  gap: 0;
  max-width: 520px;
  margin: auto;
}
.preview-variation {
  flex: 0 1 clamp(72px, 11svh, 118px);
  margin-inline: -7px;
  transform: rotate(var(--preview-rotation));
  filter: drop-shadow(0 12px 16px #47302225);
}
.ad-test-devices {
  display: grid;
  grid-template-columns: minmax(0, 155px) 36px minmax(0, 155px);
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px auto 0;
}
.ad-test-label {
  display: block;
  text-align: center;
  font: 600 10px/1.5 Manrope, sans-serif;
  color: #66544d;
  margin-top: 6px;
}
.ad-test-vs { text-align: center; font: italic 28px/1 "Instrument Serif", serif; color: #a9877c; }
@media (max-width: 760px) {
  .demo-ad-video { height: 175px; }
  .demo-gallery-device { padding: 8px 4px 0; }
  .demo-gallery-device > .ad-device-preview { max-width: 106px; }
  .features-panel .franchise-research-grid { gap: 10px; padding: 7px 10px; }
  .franchise-research-location > .ad-device-preview { max-width: 90px; }
  .franchise-research-location strong { font-size: 9px; }
  .franchise-research-location > span { font-size: 7px; }
  .creative-device-fan { padding: 12px 6px; }
  .preview-variation { flex-basis: clamp(65px, 10svh, 91px); margin-inline: -6px; }
  .ad-test-devices { grid-template-columns: minmax(0, 115px) 22px minmax(0, 115px); gap: 12px; margin-top: 14px; }
  .ad-test-label { font-size: 8px; }
}