/* Hosts for the WebGL glass field (glass-wave.js). The shader paints the composition and
   its fade to white, so the older art's gradients, overlays and mirroring are switched off. */
.data-art { background: #fff; }
.data-art::after { display: none; }
.referral-art { transform: none; background: #fff; }
/* As in the reference, the closing field spans the data-types section and the referral section. */
.data-closing { position: relative; isolation: isolate; overflow: hidden; }
.glass-wave { position: absolute; inset: 0; }
.glass-wave-fallback { background: radial-gradient(ellipse at 100% 40%, #12a99a 0%, #7fdcc8 30%, #fff 64%); }
.referral-art .glass-wave-fallback { background: radial-gradient(ellipse at 0% 0%, #12a99a 0%, #7fdcc8 30%, #fff 60%); }
draems-flow-demo { display: block; width: 100%; height: 100%; }

/* Enterprise hero: the glass slab field reaches past the hero into the section after it, as the
   reference does under its first card, and washes to white there (see glass-slabs.js). */
.glass-slabs{position:absolute;inset:0}
.glass-slabs-fallback{background:radial-gradient(ellipse at 78% 74%,#d7f2eb,#fff 62%)}
.enterprise-hero .enterprise-art{bottom:auto;height:calc(100% + 480px)}
.enterprise-hero+.enterprise-section{position:relative}
@media(max-width:639px){.enterprise-hero .enterprise-art{background:#fff}}
/* The closing call to action sits under a mirrored field, as the reference's closer does: plain
   text on the page rather than a card, with the slabs in the room above it. */
.enterprise-page .enterprise-closing{position:relative;isolation:isolate;width:auto;max-width:none;padding-top:320px;padding-bottom:128px;border:0;border-radius:0;background:none}
.closing-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#fff;-webkit-mask-image:linear-gradient(transparent,#000 120px);mask-image:linear-gradient(transparent,#000 120px)}
@media(max-width:639px){.enterprise-page .enterprise-closing{padding-top:240px;padding-bottom:80px}}
/* The closing field fades in from white over its first 384px, as the reference's does above the
   industries card, so the field reads around the referral rather than behind the card. */
.data-closing::after{content:"";position:absolute;z-index:-1;inset:-13px 0 auto;height:384px;background:linear-gradient(to top,rgb(255 255 255 / 0),rgb(255 255 255 / .7),#fff);pointer-events:none}

/* As in the reference, one white box holds the use-cases card and the closer, with the mirrored
   field behind both: anchored under the card, which covers the top of the slabs. */
.enterprise-closer{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.enterprise-closer>.closing-art{-webkit-mask-image:none;mask-image:none}