@import url("tokens.css");

/* Decorative band pinned to the bottom of the auth/parent-flow pages.
   This used to be an <img> pointing at background.svg - a 390x153 SVG
   wrapping a tiled, low-resolution raster pattern, so stretching it to
   width:100% on a wide desktop viewport upscaled that raster several
   times over and looked visibly blurry. A soft gradient needs no asset
   at all, so it's crisp at any width and any pixel density, and it
   picks up the brand palette via tokens. */

.footer-image {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 140px;
    z-index: -1;
    pointer-events: none;
    /* Both ends in the brand greens: a navy end was fine on the old white
       page but reads as a smudge on the tinted --color-page. */
    background:
        radial-gradient(ellipse 70% 100% at 8% 100%, var(--color-primary) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at 92% 100%, #6FCBB0 0%, transparent 65%);
    opacity: 0.14;
}

@media (min-width: 600px) {
    .footer-image {
        height: 220px;
    }
}