/* Homepage V18 — sparse branded linework and botanical ornaments.
   IMPORTANT: this file does not style .hero, .closing-section, or .site-footer.
   Do not edit the approved top/bottom watercolor hills. */

/* Let the audio sample breathe with a tiny painterly melodic divider. */
.listen-intro::after {
  content:"";
  display:block;
  width:min(170px,48%);
  height:19px;
  margin:6px auto 2px;
  background:url('/assets/ornament-demo-v18.svg') center / contain no-repeat;
  opacity:.76;
}

/* Three-step journey: a different, minimal motif from the song and FAQ. */
.steps-ornament {
  display:block;
  width:135px;
  height:auto;
  margin:0 auto 8px;
  opacity:.75;
  pointer-events:none;
}
.how-section .how-kicker { margin-bottom:9px; }

/* Song types: faint handwritten music in a corner, never under a button. */
#main > .song-section::before {
  content:"";
  position:absolute;
  right:max(2%,calc((100vw - 1120px)/2 + 6px));
  top:10px;
  width:100px;
  height:79px;
  background:url('/assets/ornament-music-v18.svg') center / contain no-repeat;
  opacity:.45;
  pointer-events:none;
  z-index:0;
}
#main > .song-section > .container { position:relative;z-index:1; }

/* The approved wave/heart/arrow artwork itself remains the same; only its
   presentation enlarges, letting the continuous line reach across the section. */
.mission-sprout {
  display:block;
  width:49px;
  height:auto;
  margin:0 auto 5px;
  opacity:.78;
}
.message-inner .section-kicker {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.message-inner .section-kicker::before,
.message-inner .section-kicker::after {
  content:"";
  width:28px;
  height:1px;
  background:rgba(184,138,90,.57);
}
.message-section .mission-wave {
  display:block;
  width:min(100%,830px);
  max-width:none;
  height:auto;
  opacity:.71;
  margin:17px auto 0;
}
.message-section .message-inner > p:not(.section-kicker) {
  margin:0 auto;
  max-width:690px;
  color:#52615d;
  line-height:1.72;
}

/* FAQ: fine book-centered rule + a single translucent botanical accent,
   staying clear of text and the accordion interaction. */
.faq-book-rule {
  display:flex;
  align-items:center;
  gap:9px;
  width:min(100%,540px);
  margin:9px 0 10px;
  pointer-events:none;
}
.faq-book-rule span {
  display:block;
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(184,138,90,.68));
}
.faq-book-rule span:last-child {
  background:linear-gradient(90deg,rgba(184,138,90,.68),transparent);
}
.faq-book-rule img {
  flex:none;
  width:48px;
  height:auto;
  opacity:.74;
}
#main > .faq-section::before {
  content:"";
  position:absolute;
  right:2%;
  top:4px;
  width:94px;
  height:72px;
  background:url('/assets/ornament-branch-v18.svg') center / contain no-repeat;
  opacity:.58;
  pointer-events:none;
  z-index:0;
}
#main > .faq-section > .container { position:relative;z-index:1; }
.faq-inner > div:first-child { min-width:0; }
.faq-section .section-title { margin-bottom:0; }

@media(min-width:560px) {
  .steps-ornament {width:156px;margin-bottom:9px}
  .mission-sprout {width:53px;margin-bottom:8px}
  .message-section .mission-wave {width:min(100%,760px);margin-top:24px}
  #main > .song-section::before {top:22px;width:115px;height:96px;opacity:.36}
  .faq-book-rule {margin-top:18px;margin-bottom:7px}
  .faq-book-rule img {width:58px}
  #main > .faq-section::before {width:112px;height:83px;right:4%;top:0;opacity:.42}
}
@media(min-width:850px) {
  .faq-inner > div:first-child {position:relative}
  #main > .faq-section::before {right:calc((100vw - min(1120px,100vw - 60px))/2 + 14px);top:-17px;opacity:.21}
  .message-section .mission-wave {width:min(100%,800px)}
}
@media(max-width:359px) {
  #main > .song-section::before {width:76px;height:60px;right:1%;top:4px;opacity:.28}
  #main > .faq-section::before {width:72px;height:57px;right:1%;top:3px;opacity:.35}
  .faq-book-rule img {width:43px}
}