html{ outline: 3px solid lime !important; }

/* Wave divider just above the footer */
footer { position: relative; z-index: 1; }

/* Tweak the wave by editing --wave-height and --wave-color */
footer::before{
  --wave-height: 48px;            /* height of the wave */
  --wave-color: #ffffff;          /* color of the wave (usually your page background) */
  content:"";
  position:absolute;
  top: calc(-1 * var(--wave-height));
  left:0; right:0;
  height: var(--wave-height);
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none">\
<path d="M0,64 C240,112 480,0 720,48 C960,96 1200,32 1440,80 L1440,120 L0,120 Z" fill="%23ffffff"/>\
</svg>') center / 100% 100% no-repeat;
  /* match the fill to --wave-color */
  -webkit-mask-image: none;
}

/* Optional: mobile—slightly shorter wave */
@media (max-width: 600px){
  footer::before{ --wave-height: 36px; }
}