/* Section textures: one quiet pattern per section, like the dots behind the 30+ and "What's changing",
   but different in each. Every pattern is a single brand colour at low opacity and fades out across its section. */
.wma-band.wma-band-1::after,.wma-band.wma-band-2::after,.wma-band.wma-band-3::after,.wma-band.wma-band-4::after,
.wma-rebuilt.wma-final::before{content:"";position:absolute;inset:0;width:auto;height:auto;max-height:none;border-radius:0;z-index:0;pointer-events:none;background-repeat:repeat}

/* Discover: fine graph-paper grid, top right. */
.wma-band.wma-band-1::after{
 background-image:linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);
 background-size:32px 32px;
 -webkit-mask-image:radial-gradient(ellipse 60% 55% at 88% 8%,#000,transparent 78%);mask-image:radial-gradient(ellipse 60% 55% at 88% 8%,#000,transparent 78%)}

/* Decide: small plus marks, top left. */
.wma-band.wma-band-2::after{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M19 15v8M15 19h8' stroke='%2375fb9f' stroke-opacity='.2' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
 background-size:38px 38px;
 -webkit-mask-image:radial-gradient(ellipse 58% 60% at 10% 12%,#000,transparent 80%);mask-image:radial-gradient(ellipse 58% 60% at 10% 12%,#000,transparent 80%)}

/* Trust: diagonal hatching, top right. */
.wma-band.wma-band-3::after{
 background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--web) 9%,transparent) 0 1px,transparent 1px 16px);
 -webkit-mask-image:radial-gradient(ellipse 55% 60% at 92% 10%,#000,transparent 80%);mask-image:radial-gradient(ellipse 55% 60% at 92% 10%,#000,transparent 80%)}

/* Purchase: rings rippling out from the top-left corner. */
.wma-band.wma-band-4::after{
 background-image:repeating-radial-gradient(circle at 6% 0%,color-mix(in srgb,var(--ink) 8%,transparent) 0 1px,transparent 1px 30px);
 -webkit-mask-image:radial-gradient(ellipse 62% 66% at 6% 0%,#000,transparent 82%);mask-image:radial-gradient(ellipse 62% 66% at 6% 0%,#000,transparent 82%)}

/* Closing: flowing contour lines, bottom left. */
.wma-rebuilt.wma-final::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26'%3E%3Cpath d='M0 13 C27 3 53 3 80 13 S133 23 160 13' fill='none' stroke='%2375fb9f' stroke-opacity='.16' stroke-width='1.1'/%3E%3C/svg%3E");
 background-size:160px 26px;
 -webkit-mask-image:radial-gradient(ellipse 60% 62% at 12% 92%,#000,transparent 80%);mask-image:radial-gradient(ellipse 60% 62% at 12% 92%,#000,transparent 80%)}

@media (max-width:900px){
 .wma-band.wma-band-1::after,.wma-band.wma-band-2::after,.wma-band.wma-band-3::after,.wma-band.wma-band-4::after,.wma-rebuilt.wma-final::before{
  -webkit-mask-size:100% 70%;mask-size:100% 70%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
}
