/* Final campaign overrides: color dissolves into a shared white canvas.
   Only decorative backgrounds and photographs fade; content stays opaque. */
.campaign-page {
  --section-wash: 232 242 250;
  --section-warm: 255 242 232;
  background: #fff;
}

.campaign-page main > section,
.campaign-page main > .community-strip {
  border-block: 0;
}

/* Inset ellipses reach transparency before the section's upper/lower edges.
   This avoids both a horizontal color seam and a new divider overlay. */
.campaign-page main > section:not(.campaign-hero):not(.teachers-section):not(.campaign-close),
.campaign-page main > .community-strip {
  background-color: #fff;
  background-image:
    radial-gradient(ellipse 76% 47% at 28% 51%, rgb(var(--section-wash) / .65) 0%, rgb(var(--section-wash) / .3) 42%, transparent 84%),
    radial-gradient(ellipse 65% 43% at 88% 55%, rgb(var(--section-warm) / .45) 0%, transparent 82%);
  background-repeat: no-repeat;
}

/* The portrait continues to dissolve into the white behind it, preserving
   the current open framing, leftward position and the existing image mask. */
.campaign-page main > .daily-section,
.campaign-page main > .method-section,
.campaign-page main > .campaign-faq,
.campaign-page main > .awards-section {
  background: #fff;
}

.campaign-page main > .campaign-offer,
.campaign-page main > .guarantee-section,
.campaign-page main > .product-universe {
  background-image:
    radial-gradient(ellipse 80% 47% at 29% 53%, #e6f2fb 0%, #eef6fc99 44%, transparent 86%),
    radial-gradient(ellipse 63% 42% at 90% 50%, #fff0e4b3 0%, transparent 84%);
}

.campaign-page main > .library-showcase {
  background-image:
    radial-gradient(ellipse 56% 43% at 88% 52%, #fbe7db99 0%, transparent 86%),
    radial-gradient(ellipse 65% 44% at 12% 55%, #eaf3fa99 0%, transparent 87%);
}

/* Replace clipped circular plates at the library edges with the soft washes. */
.campaign-page .library-showcase::before,
.campaign-page .library-showcase::after {
  display: none;
}

/* These span the entire content width and formerly read as section rules. */
.campaign-page .section-conversion,
.campaign-page .journey-native__footer,
.campaign-page .footer-bottom {
  border-top: 0;
}

.campaign-page .more-screens,
.campaign-page .presentation-details {
  border-block: 0;
}

/* The recognition image is decorative and blends at its bottom as well as
   its top; the accompanying copy is never masked. */
.campaign-page .recognition-portrait > img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 79%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 79%, transparent 100%);
}

.campaign-page .recognition-portrait::after {
  background: linear-gradient(90deg, #fff 0%, #ffffff80 19%, transparent 42%);
  pointer-events: none;
}

.campaign-page .recognition-portrait .hand-note {
  color: #446582;
  text-shadow: 0 1px 8px #fff, 0 0 15px #ffffffb3;
}

/* Unequal elliptical washes make the navy dissolve at different depths
   across the page. A tiny edge fade joins the white canvas exactly; all
   washes finish within the padding before any foreground text begins. */
.campaign-page main > .teachers-section {
  --blend-long: 46px;
  --blend-short: 25px;
  background-color: #142b4b;
  background-image:
    linear-gradient(180deg, #fff 0, transparent 3px, transparent calc(100% - 3px), #fff 100%),
    radial-gradient(ellipse 74% var(--blend-long) at 16% top, #fff 0%, #fff 12%, #ffffffbf 38%, #ffffff66 60%, transparent 100%),
    radial-gradient(ellipse 65% var(--blend-short) at 90% top, #fff 0%, #ffffffdd 20%, #ffffff66 55%, transparent 100%),
    radial-gradient(ellipse 72% var(--blend-long) at 82% bottom, #fff 0%, #fff 12%, #ffffffbf 38%, #ffffff66 60%, transparent 100%),
    radial-gradient(ellipse 68% var(--blend-short) at 9% bottom, #fff 0%, #ffffffdd 20%, #ffffff66 55%, transparent 100%);
}

/* Blend the final photograph/tint without fading buttons or foreground text. */
.campaign-page main > .campaign-close {
  background: #fff;
}

.campaign-page .campaign-close > img {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
}

.campaign-page .campaign-close::after {
  background: linear-gradient(90deg, transparent 0%, #ffffff50 20%, #fffffff2 44%, #fff3e9);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  pointer-events: none;
}

/* The footer uses the same organic dissolve, with shorter depths suited to
   its 40px desktop / 30px mobile padding. */
.campaign-page .site-footer {
  --blend-long: 33px;
  --blend-short: 18px;
  border-top: 0;
  background-color: #10223e;
  background-image:
    linear-gradient(180deg, #fff 0, transparent 3px),
    radial-gradient(ellipse 73% var(--blend-long) at 81% top, #fff 0%, #fff 10%, #ffffffbf 38%, #ffffff66 60%, transparent 100%),
    radial-gradient(ellipse 66% var(--blend-short) at 8% top, #fff 0%, #ffffffdd 20%, #ffffff66 55%, transparent 100%);
}

@media (max-width: 650px) {
  .campaign-page main > .teachers-section {
    --blend-long: 28px;
    --blend-short: 15px;
  }

  .campaign-page .site-footer {
    --blend-long: 24px;
    --blend-short: 13px;
  }

  .campaign-page .site-footer .footer-grid > :first-child {
    border-bottom: 0;
  }
}