.design-footer[data-footer-transition],.footer-transition-surface{position:relative}
.footer-transition-surface{background:linear-gradient(110deg,var(--design-primary,#155eaa),var(--design-secondary,var(--design-text,#172b4d)))}
[data-footer-transition="arc"]::before{background:#fff;mask:url('footer-arc-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="cloud-wave"]::before{background:#fff;mask:url('footer-cloud-wave-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="layered-wave"]::before{background:#fff;mask:url('footer-layered-wave-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="curved-cut"]::before{background:#fff;mask:url('footer-curved-cut-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="mountains"]::before{background:#fff;mask:url('footer-mountains-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="city"]::before{background:#fff;mask:url('footer-city-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="diagonal-cut"]::before{background:#fff;mask:url('footer-diagonal-cut-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="dunes"]::before{background:#fff;mask:url('footer-dunes-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="clouds"]::before{background:#fff;mask:url('footer-clouds-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="crystal"]::before{background:#fff;mask:url('footer-crystal-cut.svg') top center/100% 100% no-repeat;height:var(--footer-art-height,80px)}
[data-footer-transition="cloud-wave"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-cloud-wave-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="layered-wave"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-layered-wave-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="curved-cut"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-curved-cut-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="mountains"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-mountains-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="diagonal-cut"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-diagonal-cut-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="dunes"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-dunes-bands.svg') top center/100% 100% no-repeat}
[data-footer-transition="crystal"]::after{content:"";position:absolute;inset:0 0 auto;height:var(--footer-art-height,80px);pointer-events:none;background:color-mix(in srgb,var(--design-primary,#155eaa) 50%,white);mask:url('footer-crystal-bands.svg') top center/100% 100% no-repeat}
@media(max-width:650px){.design-footer[data-footer-transition]::after{height:48px}}
.design-footer[data-footer-transition]:not([data-footer-transition="none"]){border-top:0;padding-top:26px}
:where([data-footer-transition]:not([data-footer-transition="none"]))::before{content:"";position:absolute;inset:0 0 auto;height:26px;background:#fff;pointer-events:none}
[data-footer-transition="brush"]::before{mask:url('footer-brush.svg') top center/100% 100% no-repeat}
[data-footer-transition="wave"]::before{mask:url('footer-wave.svg') top center/100% 100% no-repeat}
[data-footer-transition="slant"]::before{clip-path:polygon(0 0,100% 0,100% 100%)}
[data-footer-transition="zigzag"]::before{mask:url('footer-zigzag.svg') top left/48px 100% repeat-x}
.footer-transition-preview{display:block;height:100px;background:#fff;border-radius:5px;overflow:hidden;padding-top:28px}
/* Illustrated transitions use the same assets in cards and on the site. */
.design-footer[data-footer-transition]:is([data-footer-transition="arc"],[data-footer-transition="cloud-wave"],[data-footer-transition="layered-wave"],[data-footer-transition="curved-cut"],[data-footer-transition="mountains"],[data-footer-transition="city"],[data-footer-transition="diagonal-cut"],[data-footer-transition="dunes"],[data-footer-transition="clouds"],[data-footer-transition="crystal"]){padding-top:80px}
.footer-transition-surface{--footer-art-height:52px}
@media(max-width:650px){.design-footer{--footer-art-height:48px}.design-footer[data-footer-transition]:is([data-footer-transition="arc"],[data-footer-transition="cloud-wave"],[data-footer-transition="layered-wave"],[data-footer-transition="curved-cut"],[data-footer-transition="mountains"],[data-footer-transition="city"],[data-footer-transition="diagonal-cut"],[data-footer-transition="dunes"],[data-footer-transition="clouds"],[data-footer-transition="crystal"]){padding-top:48px}}
@media(max-width:650px){.design-footer[data-footer-transition]:not([data-footer-transition="none"]){padding-top:18px}.design-footer[data-footer-transition]::before{height:18px}}
@media(max-width:650px){.design-footer[data-footer-transition]:is([data-footer-transition="arc"],[data-footer-transition="cloud-wave"],[data-footer-transition="layered-wave"],[data-footer-transition="curved-cut"],[data-footer-transition="mountains"],[data-footer-transition="city"],[data-footer-transition="diagonal-cut"],[data-footer-transition="dunes"],[data-footer-transition="clouds"],[data-footer-transition="crystal"]){padding-top:48px}.design-footer[data-footer-transition]:is([data-footer-transition="arc"],[data-footer-transition="cloud-wave"],[data-footer-transition="layered-wave"],[data-footer-transition="curved-cut"],[data-footer-transition="mountains"],[data-footer-transition="city"],[data-footer-transition="diagonal-cut"],[data-footer-transition="dunes"],[data-footer-transition="clouds"],[data-footer-transition="crystal"])::before{height:48px}}

.footer-transition-surface{display:block;height:72px}