/* Song It Forward V15 — quiet, organic watercolor throughout the homepage.
   Each section gets its own transparent sage/apricot painted wash, not a
   repeated scene. No sun, cloud motif, dot pattern or grain layer.
   The original V14 landscape remains unchanged; form pages are unaffected. */

#main > .listen-section,
#main > .benefits-section,
#main > .how-section,
#main > .song-section,
#main > .message-section,
#main > .faq-section,
#main > .closing-section {
  position:relative;
  isolation:isolate;
}

/* Decorative artwork lives behind the content, without changing height or layout. */
#main > .listen-section::after,
#main > .benefits-section::after,
#main > .how-section::after,
#main > .song-section::after,
#main > .message-section::after,
#main > .faq-section::after,
#main > .closing-section::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:1;
}

/* Keep cards, links, headings and the audio player clearly above the washes. */
#main > .listen-section > .container,
#main > .benefits-section > .container,
#main > .how-section > .container,
#main > .song-section > .container,
#main > .message-section > .container,
#main > .faq-section > .container,
#main > .closing-section > .container {
  position:relative;
  z-index:1;
}

/* Warm edge around the song demo; no wash beneath the player text itself. */
.listen-section::after { background-image:url('/assets/section-wash-listen-v15.webp'); }
.benefits-section::after { background-image:url('/assets/section-wash-benefits-v15.webp'); }

/* Watercolor gently washes behind the already-distinct guide cards. */
.how-section::after { background-image:url('/assets/section-wash-how-v15.webp'); }

/* Sage is most noticeable around the song types, with apricot on the opposite edge. */
.song-section {
  background:linear-gradient(180deg,rgba(252,249,244,0) 0%,rgba(248,248,240,.48) 43%,rgba(252,249,244,0) 100%);
}
.song-section::after { background-image:url('/assets/section-wash-song-v15.webp'); }

/* Break up the flat gradient of the story/mission block without reducing readability. */
.message-section::after { background-image:url('/assets/section-wash-message-v15.webp'); }

/* FAQ gains a few restrained blush-and-sage edges. */
.faq-section::after { background-image:url('/assets/section-wash-faq-v15.webp'); }

/* Finish with a light complementary wash; retain existing hill-shaped footer edge. */
.closing-section::after { background-image:url('/assets/section-wash-closing-v15.webp'); }

/* On tall, narrow displays, the washes stay edge-focused instead of feeling
   like oversized flat blocks across the middle of the copy. */
@media(max-width:559px){
  #main > .listen-section::after,
  #main > .benefits-section::after,
  #main > .how-section::after,
  #main > .song-section::after,
  #main > .message-section::after,
  #main > .faq-section::after,
  #main > .closing-section::after {
    background-size:100% 100%;
    opacity:.88;
  }
}
