/* cs-page-backdrop — full-bleed decorative artwork painted behind the rows
   that follow its own (zero-height) row. The layer is absolutely positioned
   from the top of its row and sized by the artwork's aspect ratio, so it
   spans as many of the following sections as the image is tall. */

/* The host row must take no space and must not clip the layer. */
.fl-row-content-wrap:has(.cs-page-backdrop) {
  padding-block: 0;
}
.fl-module-content:has(.cs-page-backdrop) {
  margin-block: 0;
}
/* BB floors every column at min-height: 1px; that 1px offsets the hero in the
   next row, so the page would start one pixel lower than every other page. */
.fl-col:has(.cs-page-backdrop) {
  min-height: 0;
}

.cs-page-backdrop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Pure-CSS "cool blue blobs" artwork ----------
   Rebuilt from the Figma cool-background (node 666:86) as two radial
   gradients: they fall off to fully transparent blue in every direction,
   so there are no box edges, blur seams, or clip lines at any viewport
   size. Canvas ratio 1470:5496; blob centers/radii match the Figma art. */
.cs-page-backdrop--gradient {
  aspect-ratio: 1470 / 5496;
  background-image:
    /* top-left blob */
    radial-gradient(
      ellipse 30% 20% at 20% 14%,
      rgba(147, 180, 222, 0.55) 0%,
      rgba(147, 180, 222, 0.28) 45%,
      rgba(147, 180, 222, 0) 78%
    ),
    /* bottom-right blob */
    radial-gradient(
      ellipse 30% 20% at 84% 82%,
      rgba(147, 180, 222, 0.55) 0%,
      rgba(147, 180, 222, 0.28) 45%,
      rgba(147, 180, 222, 0) 78%
    );
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  .cs-page-backdrop--desktop {
    display: none;
  }
}