/* the app window in the hero: a still of dusk bot's main window, and once someone reaches for it, the app itself
   (built from the app, served at /demo/) in a frame over it. one css pixel of the frame is one pixel of the real 1180 by
   680 window, scaled to the hero's width; phones get the app's own phone layout at real size. */
.ad { position: relative; height: calc(100cqw * 680 / 1180); overflow: hidden; background: #fcfcfc; }
.ad-start { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: default; }
.ad-start:focus-visible { outline: 2px solid #1084fe; outline-offset: -4px; }
.ad-still, .ad-still img { display: block; width: 100%; height: 100%; }
.ad-still img { object-fit: cover; object-position: top left; }
.ad-busy .ad-start { cursor: progress; }
.ad-frame { position: absolute; top: 0; left: 0; width: 1180px; height: 680px; border: 0; background: #fcfcfc; transform-origin: 0 0; opacity: 0; pointer-events: none; }
.ad-live .ad-frame { opacity: 1; pointer-events: auto; transition: opacity 0.18s ease-out; }
@media (max-width: 700px) {
  .ad { height: min(640px, calc(100cqw * 1.6)); }
  .ad-still img { object-position: top center; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-live .ad-frame { transition: none; }
}