/* One continuous surface prevents a hard seam between benefits and catalog. */
.pastel-surface {
 background-color:#fdfcfb;
 background-image:
  radial-gradient(ellipse 34vw 500px at 0% 210px,rgba(196,200,248,.28),transparent 100%),
  radial-gradient(ellipse 32vw 460px at 100% 300px,rgba(194,221,246,.28),transparent 100%),
  radial-gradient(ellipse 29vw 740px at 0% 1230px,rgba(255,205,184,.32),transparent 100%),
  radial-gradient(ellipse 29vw 780px at 100% 1370px,rgba(185,229,207,.31),transparent 100%),
  linear-gradient(180deg,#f0effb 0px,#f7f6fc 540px,#fdfcfb 1000px,#fdfcfb calc(100% - 220px),#f7f9fd 100%);
 background-repeat:no-repeat;
}
.pastel-surface > .benefits,.pastel-surface > .catalog {background:transparent;}
.pastel-surface .benefit-grid > article {background:rgba(255,255,255,.94);border-color:#e3e3ef;box-shadow:0 10px 28px rgba(36,42,80,.055);}
.pastel-surface > .benefits {padding-bottom:60px;}
.pastel-surface > .catalog {padding-top:60px;}
@media(max-width:700px){
 .pastel-surface {background-image:
 radial-gradient(ellipse 70vw 580px at -35% 1550px,rgba(255,205,184,.20),transparent 100%),
 radial-gradient(ellipse 70vw 580px at 135% 1700px,rgba(185,229,207,.20),transparent 100%),
 linear-gradient(180deg,#f0effb 0px,#f7f6fc 1000px,#fdfcfb 1500px,#fdfcfb calc(100% - 220px),#f7f9fd 100%);}
 .pastel-surface > .benefits {padding-bottom:34px;}
 .pastel-surface > .catalog {padding-top:42px;}
}