/* Separate, offset film windows frame the device and leave the copy clear. */
:root { color-scheme:light; color:#111; background:#fff; }
body { background:#fff; }
.exchange-hero { position:relative; }
.exchange-film {
  position:absolute;
  z-index:0;
  right:3%;
  top:50%;
  width:min(62vw, 900px);
  height:min(76svh, 760px);
  transform:translateY(-45%);
  pointer-events:none;
}
.exchange-film-tile {
  position:absolute;
  overflow:hidden;
  border-radius:3px;
  background:#171a1e center / cover no-repeat;
}
.exchange-film-tile::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,11,15,.25);
}
.film-city { left:3%; top:0; width:56%; height:30%; background-image:url('media/collage-city.jpg'); }
.film-phone { right:0; top:11%; width:30%; height:46%; background-image:url('media/collage-phone.jpg'); }
.film-hardware { left:0; top:47%; width:45%; height:31%; background-image:url('media/collage-hardware.jpg'); }
.film-architecture { right:6%; top:67%; width:25%; height:31%; background-image:url('media/collage-architecture.jpg'); }
.exchange-film video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; transition:opacity .35s ease; }
.exchange-film-tile[data-state="loading"] video,
.exchange-film-tile[data-state="static"] video,
.exchange-film-tile[data-state="blocked"] video,
.exchange-film-tile[data-state="error"] video { opacity:0; }
.project-label, .exchange-connection, .related-link { color:#656b70; }
.page-header :focus-visible, .exchange-hero-copy :focus-visible { outline-color:#111; }
.capability-dialog { color-scheme:light; }
/* The phone shell's existing white surround matches the page; its App keeps its own theme. */
.exchange-phone-experience-header > button:hover { color:#111; }
.exchange-phone-experience-header > button:focus-visible { outline-color:#111; }
@media (max-width:700px) {
  .exchange-film { right:0; top:50%; width:55%; height:min(76svh,660px); transform:translateY(-46%); }
  .film-city { left:2%; top:0; width:88%; height:24%; }
  .film-phone { right:0; top:30%; width:40%; height:36%; }
  .film-hardware { left:0; top:80%; width:59%; height:18%; }
  .film-architecture { right:3%; top:73%; width:31%; height:24%; }
}
@media (prefers-reduced-motion:reduce) { .exchange-film video { transition:none; } }