/* Keep the decorative hero out of navigation hit testing. */
body[data-page="home"] .site-header {
  z-index: 10;
}

body[data-page="home"] .scene,
body[data-page="home"] .scene-art {
  pointer-events: none;
}

body[data-page="home"] .power-control {
  pointer-events: auto;
}

/* Match the screen lettering: slightly rising baseline and right-leaning
   verticals, with both lines centered on the same slanted screen axis. */
body[data-page="home"] .phone-caption {
  left: 48%;
  width: 26%;
  transform: matrix(.98, -.035, -.20, 1, 0, 0);
  transform-origin: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  line-height: 1.4;
}

body[data-page="home"] .phone-caption > span {
  display: block;
  width: 100%;
  margin: 0;
  font-style: normal;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  body[data-page="home"] .phone-caption {
    gap: 4px;
  }
}