/* Homepage V22: resolve empty space after removing benefit icons,
   move the lily INTO How It Works, and show two honest demo placeholders.
   Approved hero and closing hills are NOT touched. */

/* Three demonstrations: one real playable sample, two visually compact
   non-interactive concepts. No audio sources or false play buttons. */
#main > .listen-section .upcoming-demos{
  max-width:835px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin:14px auto 0;
}
#main > .listen-section .demo-preview{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:146px;
  padding:15px 17px 14px;
  border-radius:19px;
  border:1px solid rgba(162,159,135,.29);
  background:rgba(252,250,246,.93);
  box-shadow:0 5px 16px rgba(62,58,48,.038);
  text-align:left;
}
#main > .listen-section .demo-preview-scripture{
  border-color:rgba(140,166,134,.28);
  background:rgba(246,249,243,.95);
}
#main > .listen-section .demo-preview-encouragement{
  border-color:rgba(204,159,135,.28);
  background:rgba(252,247,241,.95);
}
#main > .listen-section .demo-preview-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin:0 0 6px;
}
#main > .listen-section .demo-preview-type {
  font-size:.57rem;
  letter-spacing:.12em;
  color:#798677;
  font-weight:700;
  line-height:1.35;
}
#main > .listen-section .demo-preview-encouragement .demo-preview-type {color:#A47860}
#main > .listen-section .demo-preview-notes {color:#B69A7D;font-size:1rem;line-height:1}
#main > .listen-section .demo-preview h3 {
  font:500 clamp(1.07rem,2vw,1.34rem)/1.21 var(--serif);
  color:var(--midnight);
  margin:0 0 5px;
  letter-spacing:-.018em;
}
#main > .listen-section .demo-preview p {
  font-size:.73rem;
  line-height:1.42;
  color:#65716b;
  margin:0 0 11px;
}
#main > .listen-section .demo-preview-status{
  margin-top:auto;
  align-self:flex-start;
  display:inline-block;
  font-size:.65rem;
  line-height:1.3;
  padding:4px 9px;
  border:1px solid rgba(151,144,128,.34);
  border-radius:30px;
  color:#7E8175;
  background:rgba(255,255,255,.52);
}

/* Compact the gap from Song Types CTA down to the next section. */
#main > .song-section.section-padding{padding-bottom:34px}
#main > .song-section::after{
  background-size:100% 59px,100% 100%;
}
#main > .how-section{
  padding-top:27px;
  padding-bottom:20px;
}
/* The existing flowering twig is replaced by the user's favored LILY.
   Keep lily in How, at lower-right, behind the text/cards. */
#main > .how-section::before{display:none!important;content:none!important}
#main > .how-section .how-transition-lily{
  position:absolute;
  display:block;
  width:122px;
  height:auto;
  bottom:-21px;
  right:-26px;
  z-index:0;
  opacity:.78;
  pointer-events:none;
}
#main > .how-section .narrow-center,
#main > .how-section .step-grid,
#main > .how-section .how-outro {position:relative;z-index:1}
#main > .how-section .how-outro{margin-top:10px}
#main > .how-section::after{
  background-size:72% 42px,100% 100%;
}
/* Pull mission up against the painted handoff, not an empty band. */
#main > .message-section.section-padding {padding-top:21px}
@media(max-width:559px){
  #main > .listen-section .upcoming-demos{gap:9px;margin-top:12px}
  #main > .listen-section .demo-preview{padding:12px 11px;min-height:160px;border-radius:16px}
  #main > .listen-section .demo-preview h3{font-size:1.04rem;line-height:1.18}
  #main > .listen-section .demo-preview p{font-size:.69rem;line-height:1.37}
  #main > .listen-section .demo-preview-type{font-size:.50rem;letter-spacing:.09em}
  #main > .listen-section .demo-preview-notes{font-size:.85rem}
  #main > .listen-section .demo-preview-status{font-size:.61rem;padding:4px 7px}
  #main > .song-section.section-padding{padding-bottom:27px}
  #main > .how-section{padding-top:23px;padding-bottom:16px}
  #main > .how-section .how-transition-lily{width:115px;bottom:-15px;right:-29px;opacity:.72}
  #main > .message-section.section-padding {padding-top:18px}
}
@media(min-width:560px){
  #main > .listen-section .demo-preview{min-height:128px}
  #main > .how-section .how-transition-lily{width:146px;bottom:-24px;right:0;opacity:.69}
  #main > .song-section.section-padding{padding-bottom:36px}
  #main > .how-section{padding-top:31px;padding-bottom:24px}
  #main > .message-section.section-padding {padding-top:24px}
}
@media(min-width:850px){
  #main > .listen-section .demo-preview{min-height:128px}
  #main > .song-section.section-padding{padding-bottom:41px}
  #main > .how-section{padding-top:39px;padding-bottom:29px}
  #main > .how-section .how-transition-lily{width:164px;right:1%;bottom:-28px}
  #main > .message-section.section-padding{padding-top:29px}
}
/* Keep the lily visibly INSIDE How It Works, up in its outer corner
   rather than clipped beneath the final step/section edge. */
#main > .how-section .how-transition-lily{
  top:5px;
  bottom:auto;
  right:-19px;
  width:150px;
  opacity:.69;
}
@media(max-width:559px){
  #main > .how-section .how-transition-lily{
    top:1px;
    bottom:auto;
    right:-28px;
    width:128px;
    opacity:.60;
  }
}
@media(min-width:850px){
  #main > .how-section .how-transition-lily{
    top:10px;
    bottom:auto;
    right:2%;
    width:180px;
    opacity:.71;
  }
}