/* Extend the filled edge past the viewport and overlap the next color field.
   This keeps subpixel antialiasing from exposing a horizontal seam. */
.wave-sep {
  width: 100%;
  height: clamp(40px, 7vw, 116px);
  position: relative;
  z-index: 1;
  margin: 0 0 -2px;
  border: 0;
  line-height: 0;
  overflow: hidden;
  background: var(--wave-from);
}
.wave-sep svg { display: block; position: absolute; inset: 0 -2px auto; width: calc(100% + 4px); max-width: none; height: calc(100% + 2px); border: 0; }
.wave-sep path { fill: var(--wave-to); stroke: none; }
.wave-sep::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--wave-to); }
@media(max-width:760px) { .wave-sep { height: 43px; } }