/* Continuous light surfaces, with rounded forest regions that retain contrast.
   Background layers only: section spacing, content and graphics are unchanged. */
:root { --section-curve: 40px; }

/* Normalize the hero's lower edge without changing its established palette. */
#top.hero-v12 {
  background:
    linear-gradient(0deg, #063d37, #063d3700 72px),
    radial-gradient(ellipse at 50% 85%, #0d6a5350, transparent 65%),
    #063d37;
}

/* Match the existing rounded tracks surface, avoiding blurred transition bands. */
#clarity.clarity-section,
#esp-method.esp-hub,
#plan.daily-section,
#stories.sample-stories,
#technology.lx-technology,
#waitlist.final-section {
  position: relative;
  isolation: isolate;
}
#clarity.clarity-section::before,
#esp-method.esp-hub::before,
#plan.daily-section::before,
#stories.sample-stories::before,
#technology.lx-technology::before,
#waitlist.final-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}
#clarity.clarity-section { background: #063d37; }
#clarity.clarity-section::before {
  background: linear-gradient(180deg, #d5eee3 0%, #edf8f2 40%, #ffffff 90%);
}
#esp-method.esp-hub { background: #ffffff; }
#esp-method.esp-hub::before {
  background:
    linear-gradient(180deg, transparent 65%, #0b5d4c 100%),
    radial-gradient(ellipse at 50% 65%, #07856560, transparent 65%),
    linear-gradient(150deg, #063d37, #0b5d4c);
}

/* Tracks ends at #edf5f0. Carry that exact color into How it works, then
   gradually open to white and return to mint before the roadmap. */
#how-it-works.how09-review {
  background: linear-gradient(180deg, #edf5f0 0%, #f7fbf8 36%, #ffffff 100%);
}
#discoveries.discoveries-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 45%, #edf5f0 100%);
}

/* The underlying canvas matches the light region on each side. The forest
   stays rich behind the content; only the outer silhouette becomes softer. */
#plan.daily-section { background: linear-gradient(#edf5f0 50%, #ffffff 50%); }
#plan.daily-section::before {
  border-radius: var(--section-curve);
  background:
    radial-gradient(ellipse at 80% 15%, #126e5645, transparent 65%),
    linear-gradient(135deg, #073f35, #0b5a49);
}
#stories.sample-stories { background: #ffffff; }
#stories.sample-stories::before {
  border-radius: var(--section-curve);
  background:
    radial-gradient(ellipse at 85% 0%, #126c5744, transparent 65%),
    #073f35;
}
#technology.lx-technology { background: linear-gradient(#ffffff 50%, #f7fbf8 50%); }
#technology.lx-technology::before {
  border-radius: var(--section-curve);
  background:
    radial-gradient(ellipse at 70% 25%, #14735640, transparent 65%),
    linear-gradient(140deg, #073f35, #0b5948);
}
#waitlist.final-section { background: #e8f3ec; }
#waitlist.final-section::before {
  background:
    radial-gradient(ellipse at 50% 5%, #0e665345, transparent 65%),
    #063d37;
}

@media (max-width: 700px) {
  :root { --section-curve: 24px; }
}