/* ═══════════════════════════════════════════════════
   Affiliate banners — /css/affiliate/banner.css
   The look of the homepage Affiliate Program banner (.hp-aff-banner in
   /css/homepage.css), shared by the banners on every affiliate page. Add
   .aff-band to the banner element; the page's own class keeps its padding
   and type.
   ═══════════════════════════════════════════════════ */

/* Its purple ramp plus two faint circles bleeding off opposite corners. The
   circles take their size from the banner's own height, in the homepage
   banner's proportions, but stop at the sell page's 420px and 320px so a tall
   banner on a phone doesn't get a circle wider than the screen. */
.aff-band {
    /* Text on a yellow button inside the banner, as on the homepage's. */
    --aff-band-ink: #2e1065;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #2e1065 0%, #4c1d95 60%, #6d28d9 100%);
    color: #fff;
}

.aff-band::before,
.aff-band::after {
    content: '';
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

.aff-band::before {
    top: 0;
    right: 0;
    height: min(150%, 420px);
    transform: translate(20%, -20%);
    background: rgba(255, 255, 255, 0.06);
}

.aff-band::after {
    bottom: 0;
    left: 0;
    height: min(115%, 320px);
    transform: translate(-19%, 39%);
    background: rgba(255, 255, 255, 0.04);
}

/* The banner's content sits above the circles. */
.aff-band > * {
    position: relative;
    z-index: 1;
}