/* One desktop viewport anchor serves C02-C11, outside the animation layers. */
.page-brand {
  position: fixed;
  z-index: 650;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: max(clamp(28px, 3vw, 64px), env(safe-area-inset-left, 0px));
  display: block;
  width: 96px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* No small corner logo on the sky intro or mall landing, including first paint. */
.page-brand[hidden] {
  display: none;
}

/* Keep the original white artwork and its transparent silhouette.
   Scope this to page branding; logos inside the phone/kiosk demos stay intact. */
.page-brand,
.opening-logo,
.landing-lockup > img {
  filter: none;
}

.site-copyright {
  position: absolute;
  z-index: 3;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: 5vw;
  right: 200px;
  margin: 0;
  color: #334c5b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 1023px), (max-height: 680px), (max-aspect-ratio: 4/3), (min-aspect-ratio: 5/2) {
  .page-brand {
    display: none;
  }

  /* Keep construction labels and copy clear of the Back to start control. */
  .build-page-label,
  .landing-visual .build-page-label {
    top: calc(66px + env(safe-area-inset-top, 0px));
  }
  .phone-chapter,
  .people-scene {
    padding-top: calc(116px + env(safe-area-inset-top, 0px));
  }
  .people-scene > h2 { margin-top: 0; }

  .site-copyright {
    position: relative;
    inset: auto;
    max-width: 760px;
    margin: 40px auto 0;
  }
}