:root {
  --demo-frame-width: calc(100% - 0px);
  --demo-frame-height: calc(100% - 0px);
  --demo-frame-position: translate(-50%, -50%);
  --demo-frame-border-width: var(--spacing-200);
}
@media (min-width: 992px) {
  :root {
    --demo-frame-width: calc(100% - 120px);
    --demo-frame-height: calc(100% - 120px);
    --demo-frame-position: translate(-50%, -45%);
    --demo-frame-border-width: var(--spacing-300);
  }
}

.car-demo {
  position: relative;
  width: 100%;
}
.car-demo--has-backdrop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  width: 90%;
  height: 90%;
  border-radius: 200px;
  box-shadow: 0 0 200px 0 var(--color-accent-light-300);
  z-index: var(--z-index-before-content);
}
.car-demo_hint {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  margin-left: 20px;
}
@media (min-width: 992px) {
  .car-demo_hint {
    display: none;
  }
}
.car-demo-frame {
  width: 100%;
  border: unset;
}
.car-demo-frame_desktop-slot {
  height: 100%;
}
.car-demo-frame--desktop, .car-demo-frame_desktop-slot {
  display: none;
}
@media (min-width: 992px) {
  .car-demo-frame--desktop, .car-demo-frame_desktop-slot {
    display: block;
  }
}
.car-demo-frame--mobile {
  display: block;
}
@media (min-width: 992px) {
  .car-demo-frame--mobile {
    display: none;
  }
}
.car-demo-frame_wrapper {
  position: relative;
  max-height: 80vh;
  max-height: 80svh;
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: var(--border-radius-700);
  overflow: clip;
}
.car-demo-frame_wrapper iframe {
  position: absolute;
  z-index: var(--z-index-above-before-content);
}
.car-demo-frame_wrapper + .car-demo-placeholder {
  display: none;
}
.car-demo-frame_wrapper--image {
  box-sizing: border-box;
  background-image: var(--demo-frame-background, url("/wp-content/uploads/2026/06/feature-ai-demo-background@2.jpg.webp"));
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 6rem 6rem 1.5rem;
}
.car-demo-frame_wrapper--image iframe {
  top: 50%;
  left: 50%;
  width: var(--demo-frame-width);
  height: var(--demo-frame-height);
  transform: var(--demo-frame-position);
}
.car-demo-frame_wrapper--border {
  width: auto;
  box-sizing: content-box;
  border: var(--demo-frame-border-width) solid var(--color-neutral-800);
  background: var(--color-neutral-default);
}
.car-demo-frame_wrapper--border iframe {
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
}