/* Keep the standalone pages on the same background and point system as home. */
[data-home-background] {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Quicksand, sans-serif;
  font-size: var(--type-body);
  line-height: 1.7;
}

[data-home-background] :is(p, li, dt, dd, address) {
  font-size: var(--type-body);
}

[data-home-background] :is(.pricing__heading, .faq-intro, .contact-intro, .simulator-intro) h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.3;
}

[data-home-background] :is(.faq-intro, .contact-intro) h1 > span {
  box-sizing: border-box;
  max-width: 100%;
}

.pricing-page[data-home-background] {
  padding-top: var(--home-header-height, 66px);
}

.faq-page[data-home-background] {
  padding-top: calc(var(--home-header-height, 66px) + clamp(2rem, 6vw, 5rem));
}

.contact-page[data-home-background] {
  padding-top: calc(var(--home-header-height, 66px) + clamp(3rem, 7vw, 6rem));
}

.pricing-page[data-home-background],
.faq-page[data-home-background],
.contact-page[data-home-background],
.simulator-page[data-home-background] {
  background:
    radial-gradient(circle at 78% 18%, rgb(105 183 143 / 22%), transparent 28%),
    radial-gradient(circle at 12% 82%, rgb(190 225 198 / 24%), transparent 34%),
    linear-gradient(120deg, rgb(255 255 255 / 16%), transparent 52%, rgb(255 255 255 / 24%)),
    linear-gradient(135deg, #edf7ef 0%, #cdddd5 46%, #f2f6df 100%) #cdddd5;
}

.pricing-page[data-home-background] #pricing {
  background: transparent;
}

.pricing-page[data-home-background] :is(.pricing__package, .pricing__consumption, .pricing__example, .pricing__modes article),
.faq-page[data-home-background] .faq-item,
.contact-page[data-home-background] .contact-card,
.simulator-page[data-home-background] .simulator-panel {
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 28%));
  box-shadow: 0 1rem 2rem rgb(69 107 89 / 12%), inset 0 1px rgb(255 255 255 / 45%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

.pricing-page[data-home-background] .pricing__package--best {
  border: 2px solid #00d4fc;
}

.faq-page[data-home-background] .faq-item[open] summary {
  background: rgb(255 255 255 / 20%);
}

[data-home-background] > .hero-points {
  position: fixed;
  z-index: 2;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}

[data-home-background] > :not(.hero-points) {
  position: relative;
  z-index: 3;
}