/* One shared, static sky remains visible throughout every customer page. */
html {
  background-color: #081323;
}

body {
  background: #081323;
  isolation: isolate;
}

body::before {
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-color: #081323;
  background-image:
    linear-gradient(180deg, rgba(3, 13, 28, .3), rgba(3, 13, 28, .43)),
    url('/assets/private-consults/celestial-clouds.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Let the sky continue through the private introduction and the lower sections. */
.nicasio-private {
  background: transparent;
}

.nicasio-private .np-values,
.nicasio-private .np-process,
.nicasio-private .np-digital-section {
  background: rgba(8, 19, 35, .56);
}

body > footer {
  background: rgba(8, 19, 35, .48);
}

/* Keep reading and payment panels calm against the brighter clouds. */
.panel {
  background: linear-gradient(145deg, rgba(13, 35, 66, .91), rgba(7, 24, 47, .86));
}

.checkout {
  background: rgba(8, 20, 39, .88);
}

.purchase {
  background: linear-gradient(120deg, rgba(18, 39, 68, .86), rgba(11, 25, 46, .82));
}

@media (max-width: 800px) {
  body::before {
    background-position: 68% center;
  }

  .price-card {
    background: linear-gradient(160deg, rgba(4, 17, 34, .8), rgba(1, 7, 16, .83));
  }
}