/* 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 {
  /* Height tracks the 1470:5496 canvas up to 1440px viewports, then CAPS —
     wider screens must not keep scaling the artwork, or the blobs grow into
     giant slabs with a visible edge at the layer top (client-reported at
     ~2900px). Blob radii cap at their 1440px design size too, and the top
     blob is centered below the hero (~1400px) instead of behind it. */
  height: min(calc(100vw * 5496 / 1470), 5496px);
  background-image:
    /* top-left blob — below the hero */
    radial-gradient(
      ellipse min(30%, 440px) min(20%, 1080px) at 20% min(28%, 1400px),
      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 min(30%, 440px) min(20%, 1080px) at 84% min(82%, 4500px),
      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;
  }
}