/* RoutingBg positioning — keeps the animated mesh behind copy and
   confined to specific sections instead of bleeding into gutters. */

.rl-bg-host {
  position: relative;
}
.rl-bg-host > .routing-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Fade top + bottom edges so the bg blends into the section above
     and below, rather than ending in a hard cut. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
}
.rl-bg-host > :not(.routing-bg) {
  position: relative;
  z-index: 1;
}

/* The dashboard visual in the hero needs a hint of separation so the
   bg doesn't read through it. */
.rl-bg-host .v4-hero .rlv3-dashboard-card {
  background: #FFFFFF;
}

/* Inside the dark CTA card, we want the mesh to sit between the ink
   surface and the copy. The card itself becomes the bg host. */
.rl-cta .rl-cta-card.rl-bg-host {
  overflow: hidden;
  isolation: isolate;
}
.rl-cta .rl-cta-card.rl-bg-host > .routing-bg {
  /* On dark, the fade can be stronger so packets feel like they
     emerge from the ink and recede back into it. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%);
}

/* "How it works" — make the bg a touch taller-feeling by giving the
   section more vertical breathing room when bg is active. */
.rl-bg-host.rl-bg-how .rl-how {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Hero: ensure the hero content sits above the bg cleanly. */
.rl-bg-host.rl-bg-hero .v4-hero {
  isolation: isolate;
}