/* Song It Forward V19 — artwork matched to the approved visual mockup.
 * Uses REAL raster watercolor/linework cut from the owner's approved
 * reference image, not vector redraws or procedural gradients.
 * The approved top hero + bottom CTA hill artwork/CSS is not modified. */

/* Soft painted sage and blush corners visible in the reference, staying
   outside the central message. Each asset has an organically feathered alpha. */
#main > .message-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
     url('/assets/mockup-mission_sage-v19.webp'),
     url('/assets/mockup-mission_peach-v19.webp');
  background-size:32% auto,36% auto;
  background-position:left top,right bottom;
  background-repeat:no-repeat;
  opacity:.95;
}

#main > .message-section .message-inner {position:relative;z-index:1}

/* Mockup's delicate watercolor sprig — smaller than our earlier SVG version. */
#main > .message-section .mission-sprout {
  width:33px;
  height:auto;
  margin:0 auto 8px;
  opacity:.94;
}

/* Use the approved mockup's actual pen/painted soundwave with generous width.
   No redrawing of its heart, arrow, timing or color transition. */
#main > .message-section .mission-wave {
  display:block;
  width:min(100%,820px);
  max-width:100%;
  height:auto;
  opacity:.99;
  margin:21px auto 0;
}

/* The botanical branch and open-book divider now use the original painted
   shapes extracted from the reference instead of simplified SVG outlines. */
#main > .faq-section::before {
  background-image:url('/assets/mockup-branch-v19.webp');
  width:103px;
  height:82px;
  right:1.5%;
  top:6px;
  opacity:.97;
}
#main > .faq-section .faq-book-rule img {
  width:45px;
  height:auto;
  opacity:.98;
}

/* Tiny painted sage hill/wash at the FAQ's lower-left edge as in mockup. */
#main > .faq-section::after {
  background-image:
    url('/assets/mockup-faq_sage-v19.webp'),
    url('/assets/section-wash-faq-v15.webp');
  background-repeat:no-repeat,no-repeat;
  background-position:left bottom,center center;
  background-size:42% 45px,100% 100%;
}

/* Keep the other ornamental motifs quiet; the painted assets are
   the focal points now rather than a collection of competing icons. */
#main > .song-section::before {opacity:.28}

/* Desktop: preserve reference artwork's edge-oriented composition. */
@media(min-width:560px) {
  #main > .message-section::before {
    background-size:25% auto,29% auto;
  }
  #main > .message-section .mission-sprout {width:37px}
  #main > .message-section .mission-wave {
    width:min(100%,820px);
    margin-top:25px;
  }
  #main > .faq-section::before {
    right:3.5%;
    width:130px;
    height:102px;
    opacity:.80;
  }
  #main > .faq-section .faq-book-rule img {width:52px}
  #main > .faq-section::after {background-size:33% 58px,100% 100%}
}
@media(max-width:359px) {
  #main > .message-section::before {
    background-size:31% auto,34% auto;
  }
  #main > .faq-section::before {
    width:85px;
    height:68px;
  }
  #main > .faq-section .faq-book-rule img {width:40px}
}