/* Dedicated divider bands: visible layout elements, not subtle overlays. */
.section-divider {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* Cream services -> blue Social Club: deep postage-stamp scallops. */
.section-divider--scallop {
  height: 42px;
  margin-bottom: -1px;
  background: var(--blue);
}

.section-divider--scallop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 34px;
  background: radial-gradient(circle at 21px 0, var(--cream) 0 21px, transparent 22px) 0 0 / 42px 34px repeat-x;
}

/* Dark audience panel -> yellow How it works: a large ticket notch. */
.section-divider--notch {
  height: 54px;
  margin-block: -1px;
  background: var(--yellow-band);
}

.section-divider--notch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 31% 0, 37% 100%, 63% 100%, 69% 0, 100% 0);
  filter: drop-shadow(0 4px 0 rgba(33, 27, 46, .18));
}

/* Yellow How it works -> coral Promise: a bold tilted paper seam. */
.section-divider--tilt {
  height: 58px;
  margin-block: -1px;
  background: var(--brand);
}

.section-divider--tilt::before {
  content: "";
  position: absolute;
  top: -35px;
  left: -4%;
  width: 108%;
  height: 72px;
  border-bottom: 4px solid var(--ink);
  background: var(--yellow-band);
  transform: rotate(-1.35deg);
  transform-origin: 50% 100%;
}

/* Coral Promise -> cream About: two deliberately uneven bubble drops. */
.section-divider--bubbles {
  height: 58px;
  margin-block: -1px;
  background: var(--cream);
}

.section-divider--bubbles::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 55px;
  background:
    linear-gradient(var(--brand), var(--brand)) top / 100% 7px no-repeat,
    radial-gradient(ellipse 155px 50px at 18% 0, var(--brand) 98%, transparent 100%),
    radial-gradient(ellipse 225px 58px at 77% -2px, var(--brand) 98%, transparent 100%);
}

/* Blue Careers -> cream FAQ: a long folded edge plus coral tape mark. */
.section-divider--fold {
  height: 68px;
  margin-block: -1px;
  background: var(--cream);
}

.section-divider--fold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 16%, 74% 100%, 43% 42%, 0 84%);
}

.section-divider--fold::after {
  content: "";
  position: absolute;
  top: 29px;
  right: 9%;
  width: 104px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--brand);
  transform: rotate(-5deg);
}

/* Disable the earlier overlay approach if an older stylesheet is cached. */
.social-club-preview::after,
#how::before,
.promise::before,
.about::before,
.faq::before,
.faq::after { content: none !important; }

.promise,
.about,
.faq { padding-top: var(--section-pad); }

@media (max-width: 700px) {
  .section-divider--scallop { height: 29px; }
  .section-divider--scallop::before {
    height: 24px;
    background: radial-gradient(circle at 14px 0, var(--cream) 0 14px, transparent 15px) 0 0 / 28px 24px repeat-x;
  }

  .section-divider--notch { height: 36px; }
  .section-divider--notch::before { clip-path: polygon(0 0, 22% 0, 30% 100%, 70% 100%, 78% 0, 100% 0); }

  .section-divider--tilt { height: 38px; }
  .section-divider--tilt::before { top: -28px; height: 53px; border-bottom-width: 3px; transform: rotate(-.9deg); }

  .section-divider--bubbles { height: 39px; }
  .section-divider--bubbles::before {
    height: 38px;
    background:
      linear-gradient(var(--brand), var(--brand)) top / 100% 5px no-repeat,
      radial-gradient(ellipse 82px 33px at 16% 0, var(--brand) 98%, transparent 100%),
      radial-gradient(ellipse 118px 39px at 81% -2px, var(--brand) 98%, transparent 100%);
  }

  .section-divider--fold { height: 44px; }
  .section-divider--fold::before { clip-path: polygon(0 0, 100% 0, 100% 18%, 74% 100%, 39% 40%, 0 80%); }
  .section-divider--fold::after { top: 19px; right: 7%; width: 62px; height: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-divider--tilt::before,
  .section-divider--fold::after { transform: none; }
}