/* The footer surface reused behind each page's introductory content. */
body { position: relative; isolation: isolate; padding-top: 32px; }
.hero-scene {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  height: var(--hero-scene-height, 0px);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  border-radius: 16px;
  background: #f3f3f3;
}
.hero-scene::before,
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #29272420 0.8px, transparent 1px) 0 0 / 12px 12px;
}
.hero-scene::after {
  background-image: radial-gradient(circle, #fff 1px, transparent 1.4px);
  mask-image: radial-gradient(circle 180px at var(--pointer-x, -300px) var(--pointer-y, -300px), #000, transparent);
  -webkit-mask-image: radial-gradient(circle 180px at var(--pointer-x, -300px) var(--pointer-y, -300px), #000, transparent);
  opacity: 0;
  transition: opacity 250ms ease;
}
.hero-scene.is-lit::after { opacity: 1; }
@supports (corner-shape: squircle) {
  .hero-scene { border-radius: 30px; corner-shape: squircle; }
}
@media (max-width: 768px) {
  .hero-scene { left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene::after { transition: none; }
}

/* Reserve the background's 24px extension plus 64px of clear space below it. */
body .gallery > .section-head,
body .pricing-intro,
body .cs-header,
body .wrap > .updated {
  margin-bottom: 88px;
}

/* Pricing uses the same balanced spacing as the home hero. */
body #gallery-pricing { padding-top: 0; }
body .pricing-intro {
  margin-top: 0;
  margin-bottom: 64px;
  padding: 76px 0;
}
@media (max-width: 768px) {
  body .pricing-intro { padding: 48px 0; }
}

/* Extra breathing room inside the inset hero surface on smaller screens. */
@media (min-width: 769px) and (max-width: 1024px) {
  body .hero,
  body .gallery > .section-head,
  body .pricing-intro {
    padding-inline: 32px;
  }
}
@media (max-width: 768px) {
  body .hero,
  body .gallery > .section-head,
  body .pricing-intro {
    padding-inline: 24px;
  }
}

.hero-heading { position: relative; }
.hero-heading > .hero-heading__gradient {
  position: absolute;
  inset: 0;
  display: block;
  padding: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  color: transparent;
  user-select: none;
  background:
    radial-gradient(ellipse at 25% 30%, #fff18a 0%, transparent 60%),
    linear-gradient(130deg, #ffda22 10%, #ffe864 35%, #39baf5 68%, #2463df 90%);
  background-size: 440px 440px;
  background-repeat: no-repeat;
  background-position: calc(var(--word-x, 0px) - 220px) calc(var(--word-y, 0px) - 220px);
  background-clip: text;
  -webkit-background-clip: text;
  mask-image: radial-gradient(circle 190px at var(--word-x, -300px) var(--word-y, -300px), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 190px at var(--word-x, -300px) var(--word-y, -300px), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.hero-heading.is-gradient-lit > .hero-heading__gradient { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .hero-heading > .hero-heading__gradient { transition: none; }
}

/* Navigation owns its 20px top and bottom spacing. */
body:has(.site-head) { padding-top: 0; }