/* Homepage V20 — faithful, restrained nature motif implementation.
 * Reference: approved 941x1672 watercolor mockup.
 * No watercolor artwork inside song option cards or individual steps.
 * IMPORTANT: approved hero and closing backgrounds are intentionally untouched.
 */

/* Remove the previous geometric ornament from HOW; keep the subtle kicker rules. */
#main > .how-section .steps-ornament {display:none}
#main > .how-section .how-kicker {margin-bottom:10px}

/* Refined step cards: no decorative patch, strip or pattern inside any box. */
#main > .how-section .step-card,
#main > .how-section .step-card-song,
#main > .how-section .step-card-gift {
  background:#FFFCF8;
  background-image:none;
  border:1px solid rgba(171,155,138,.21);
  box-shadow:0 8px 22px rgba(72,65,56,.045);
}
#main > .how-section .step-card::before {content:none;display:none}
#main > .how-section .step-number {border-radius:50%}

/* Take the approved soft pink flowering twig from the reference — it grows
   out of the bottom edge to hand off visually to the next section. */
#main > .how-section {
  padding-bottom:62px;
}
#main > .how-section::before {
  content:"";
  position:absolute;
  width:164px;
  height:191px;
  right:-15px;
  bottom:-55px;
  top:auto;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent url('/assets/nature-blossoms-v20.webp') center / contain no-repeat;
  opacity:.67;
  pointer-events:none;
  z-index:0;
}
#main > .how-section::after {
  background-image:
    url('/assets/nature-lower-wash-v20.webp'),
    url('/assets/section-wash-how-v15.webp');
  background-repeat:no-repeat,no-repeat;
  background-size:72% 62px,100% 100%;
  background-position:left bottom,center center;
}
#main > .how-section .how-outro {position:relative;z-index:1}

/* Replace the prior note in the Song Types header with a genuinely painted
   botanical twig. One decorative element for the section, not per-card art. */
#main > .song-section::before {
  content:"";
  display:block;
  position:absolute;
  left:-10px;
  right:auto;
  top:-4px;
  width:149px;
  height:112px;
  z-index:0;
  background:transparent url('/assets/nature-twig-v20.webp') top left / contain no-repeat;
  opacity:.80;
  pointer-events:none;
}

/* Both song-option rectangles are flat, clean parchment (not watercolor).
   No new art, patterns, flowers or patches are placed inside them. */
#main > .song-section .song-card,
#main > .song-section .song-card-scripture {
  display:block;
  background:#FFFCF8;
  background-image:none !important;
  border:1px solid rgba(188,170,151,.25);
  border-radius:23px;
  box-shadow:0 9px 22px rgba(76,66,56,.055);
  padding:20px 22px;
}
#main > .song-section .song-icon {display:none!important}
#main > .song-section .song-card-copy {
  display:block;
  grid-column:auto;
  min-width:0;
}
#main > .song-section .song-card h3 {
  margin-bottom:7px;
}
#main > .song-section .song-card p {
  margin-bottom:10px;
}
#main > .song-section .song-card a {
  margin-top:0;
}

/* The future hymn keeps a simple quiet teaser — no extra decorative tile. */
#main > .song-section .hymn-teaser {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  background:rgba(255,252,248,.88);
  border:1px solid rgba(188,170,151,.25);
  box-shadow:0 7px 17px rgba(76,66,56,.032);
  border-radius:21px;
  padding:17px 21px;
  gap:5px;
}
#main > .song-section .hymn-teaser-icon {display:none!important}
#main > .song-section .hymn-teaser-copy {
  flex:1 1 100%;
  gap:3px;
}
#main > .song-section .hymn-teaser-copy strong {
  font-size:1.19rem;
  color:var(--midnight);
}
#main > .song-section .hymn-teaser-copy span {
  font-size:.83rem;
}
#main > .song-section .hymn-teaser .soon-tag {
  margin:0;
  align-self:flex-start;
  white-space:nowrap;
}

/* Painterly transition at the foot of Song Types; no section boundary line.
   Artwork is sampled from the APPROVED nature mockup, not recreated. */
#main > .song-section.section-padding {
  padding-bottom:91px;
}
#main > .song-section::after {
  background-image:
    url('/assets/nature-divider-hills-v20.webp'),
    url('/assets/section-wash-song-v15.webp');
  background-repeat:no-repeat,no-repeat;
  background-size:100% 86px,100% 100%;
  background-position:center bottom,center center;
}
#main > .song-section .song-transition-lily {
  position:absolute;
  display:block;
  width:145px;
  height:auto;
  right:-14px;
  bottom:-88px;
  z-index:2;
  opacity:.86;
  pointer-events:none;
}

/* Scale drawings with screen size but retain readable central whitespace. */
@media(max-width:359px){
  #main > .song-section::before{width:113px;height:85px;top:0;opacity:.67}
  #main > .song-section .song-transition-lily{width:114px;bottom:-81px}
  #main > .how-section::before{width:133px;height:156px;bottom:-49px;opacity:.58}
  #main > .song-section .song-card{padding:18px 17px}
}
@media(min-width:560px){
  #main > .song-section::before{width:176px;height:137px;left:1%;top:0;opacity:.71}
  #main > .song-section .song-transition-lily{width:164px;right:1%;bottom:-90px}
  #main > .how-section::before{width:185px;height:215px;right:2%;bottom:-52px;opacity:.65}
  #main > .song-section.section-padding{padding-bottom:100px}
  #main > .song-section .song-card{padding:24px 25px}
  #main > .song-section .hymn-teaser {max-width:980px;padding:18px 24px}
}
@media(min-width:850px){
  #main > .song-section::before {width:205px;height:153px;left:max(1%,calc((100vw - 1240px)/2));}
  #main > .song-section .song-transition-lily {width:188px;right:4%;bottom:-98px}
  #main > .how-section::before{right:max(4%,calc((100vw - 1260px)/2));width:206px;height:239px}
  #main > .song-section .song-card {min-height:172px}
}

/* Final restraint: do not repeat decorative symbols inside step cards. */
#main > .how-section .step-symbol{display:none!important}
/* Keep the lily below the hymn card, not painted into its interior. */
#main > .song-section.section-padding{padding-bottom:115px}
#main > .song-section .song-transition-lily{bottom:-117px;opacity:.77}
@media(max-width:559px){
  #main > .song-section::before{left:-35px;top:-16px;width:138px;height:105px;opacity:.72}
  #main > .song-section.section-padding{padding-bottom:110px}
  #main > .song-section .song-transition-lily{bottom:-112px;width:139px}
}
@media(min-width:560px){
  #main > .song-section.section-padding{padding-bottom:120px}
  #main > .song-section .song-transition-lily{bottom:-122px}
}
@media(min-width:850px) {
  /* On desktop the larger lily must begin AFTER the hymn rectangle. */
  #main > .song-section.section-padding{padding-bottom:146px}
  #main > .song-section .song-transition-lily{bottom:-148px}
}