/* Song It Forward homepage — V12 editorial/story + customer clarity.
   Keeps the approved logo, watercolor hills, fonts, colors and demo media. */

/* 1. A clearer emotional opening with two distinct paths. */
.hero-description {
  max-width:630px;
  line-height:1.56;
  margin-bottom:22px;
  font-size:clamp(1rem,2.65vw,1.12rem);
}
.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
  z-index:5;
}
.hero-listen-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#415B55;
  font-weight:700;
  font-size:.88rem;
  text-underline-offset:4px;
  text-decoration:underline;
  text-decoration-color:rgba(112,133,111,.55);
  padding:5px 8px;
}
.hero-listen-link:hover{color:#B36A4C;text-decoration-color:currentColor}
.hero-listen-icon{
  color:#B56B4B;
  font-size:.63rem;
  display:grid;
  place-items:center;
  background:rgba(249,241,232,.93);
  width:23px;
  height:23px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(183,121,95,.36);
}

/* 2. Lead into the listening example as the product proof. */
.listen-intro{
  max-width:700px;
  text-align:center;
  margin:0 auto 15px;
  padding:0 4px;
}
.listen-intro .section-kicker{
  font-size:.67rem;
  letter-spacing:.16em;
  margin-bottom:5px;
}
.listen-intro .section-title{
  max-width:650px;
  font-size:clamp(1.62rem,4.3vw,2.55rem);
  line-height:1.18;
  margin:0 auto 4px;
}
.listen-intro .section-title em{
  font-style:italic;
  white-space:normal;
}
.listen-section.section-padding {padding-top:0;padding-bottom:9px}
.listen-section .demo-card{
  box-shadow:0 12px 28px rgba(64,55,48,.085);
  border:1px solid rgba(190,165,138,.28);
}
.demo-body h3{
  font:500 clamp(1.13rem,4.8vw,1.68rem)/1.14 var(--serif);
  letter-spacing:-.035em;
  color:var(--midnight);
  margin:0 0 6px;
}
.demo-body>p:not(.small-label):not(.demo-note){
  font-size:.76rem;
  line-height:1.48;
  margin:0;
  color:#5E6B69;
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
}
.demo-body .small-label{letter-spacing:.12em;font-size:.57rem}
.demo-body .audio-player{margin-top:10px}
.demo-body .play-button{
  width:45px;
  height:45px;
  min-width:45px;
  box-shadow:0 3px 12px rgba(157,91,64,.2);
}
.demo-body .play-button svg{width:19px;height:19px}
.deliverables-strip{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 17px;
  max-width:840px;
  margin:13px auto 4px;
  padding:0 8px;
  color:#52635D;
}
.deliverables-strip>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:.73rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
.deliverables-strip i{
  display:inline-grid;
  place-items:center;
  width:20px;height:20px;
  font-size:.88rem;
  border-radius:50%;
  color:#B77757;
  background:rgba(246,232,217,.84);
  font-style:normal;
}
.benefits-section{padding-top:4px;padding-bottom:20px}
.benefit-grid{max-width:785px}
.benefit-icon{color:var(--apricot-deep)}

/* 3. "How it works" is now a distinct visual journey, not three neutral boxes. */
.how-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:45px;
  padding-bottom:38px;
  background:
    radial-gradient(ellipse at 9% 5%, rgba(226,162,127,.18),transparent 50%),
    radial-gradient(ellipse at 94% 96%, rgba(164,179,155,.23),transparent 53%),
    linear-gradient(145deg,#F9F4EC 0%,#F6F4EC 56%,#F4F3EB 100%);
  border-block:1px solid rgba(174,156,137,.18);
}
.how-section::before{
  content:"";
  position:absolute;
  right:-105px;
  top:-145px;
  width:300px;height:300px;
  border:1px solid rgba(205,150,116,.11);
  border-radius:50%;
  box-shadow:0 0 0 45px rgba(229,191,158,.035),0 0 0 95px rgba(229,191,158,.025);
  pointer-events:none;
  z-index:-1;
}
.how-section .narrow-center{position:relative;z-index:1}
.how-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#6A826E;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:700;
  margin-bottom:10px;
}
.how-kicker::before,.how-kicker::after{
  content:"";
  width:23px;height:1px;
  background:rgba(183,117,80,.57);
}
.how-section .section-title{
  font-size:clamp(2.15rem,5.5vw,3.75rem);
  line-height:1.10;
  margin-bottom:12px;
}
.how-section .section-title em{
  font-weight:400;
  font-style:italic;
  color:#B86E4F;
}
.how-section .section-intro{
  max-width:580px;
  margin:0 auto 21px;
  line-height:1.56;
  font-size:.92rem;
  color:#576860;
}
.how-section .step-grid{position:relative;z-index:1;max-width:1050px}
.how-section .step-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(169,156,140,.26);
  background:linear-gradient(112deg,rgba(255,249,242,.97),rgba(252,243,233,.91));
  box-shadow:0 6px 24px rgba(77,70,61,.05);
  border-radius:20px;
}
.how-section .step-card::before{
  content:"";
  position:absolute;
  top:0;left:0;bottom:0;
  width:4px;
  background:#D39473;
}
.how-section .step-card-song{
  background:linear-gradient(108deg,rgba(243,247,238,.97),rgba(232,239,226,.88));
  border-color:rgba(142,165,136,.30);
}
.how-section .step-card-song::before{background:#94A88F}
.how-section .step-card-gift{
  background:linear-gradient(112deg,rgba(255,249,241,.98),rgba(246,235,222,.88));
}
.how-section .step-card-gift::before{background:#C19A70}
.how-section .step-top{position:relative;z-index:1}
.how-section .step-number{
  display:grid;place-items:center;
  font:500 1.38rem/1 var(--serif);
  width:43px;height:43px;
  border-radius:50%;
  color:#9D654A;
  background:rgba(235,207,191,.54);
}
.how-section .step-card-song .step-number{
  color:#627B5E;
  background:rgba(194,212,184,.52);
}
.how-section .step-card-gift .step-number{
  color:#9A754E;
  background:rgba(235,214,185,.55);
}
.how-section .step-symbol{
  border:0;background:transparent;
  color:#C18567;
  font-size:1.3rem;
}
.how-section .step-card-song .step-symbol{color:#7F9B7B}
.how-section .step-card-gift .step-symbol{color:#B28C65}
.how-section .step-card h3{
  font-size:clamp(1.29rem,3vw,1.48rem);
  line-height:1.22;
  margin-bottom:6px;
}
.how-section .step-card p{
  font-size:.84rem;
  line-height:1.51;
  color:#5A6966;
}
.how-outro{
  max-width:550px;
  text-align:center;
  margin:20px auto 0;
  padding:0 16px;
  color:#6B816E;
  letter-spacing:.015em;
  font:italic 400 .93rem/1.4 var(--serif);
}

/* 4. Available song paths feel like real options; future hymn is a quiet teaser. */
.song-section .section-title{margin-bottom:11px}
.song-intro{
  color:#63706F;
  font-size:.89rem;
  line-height:1.58;
  max-width:600px;
  margin:0 auto 20px;
}
.song-section .song-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.song-section .song-card{
  display:grid;
  grid-template-columns:51px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:19px 18px;
  border-radius:21px;
  border:1px solid rgba(197,157,137,.27);
  background:linear-gradient(132deg,#FFFCF9,#FDF4EF);
  box-shadow:0 7px 19px rgba(79,64,52,.05);
}
.song-section .song-card-scripture{
  background:linear-gradient(132deg,#FFFCF9,#F3F6F0);
  border-color:rgba(151,172,145,.35);
}
.song-section .song-icon{
  grid-column:1;
  width:49px;height:49px;
  margin:0;
  font-size:2rem;
  border-radius:15px;
}
.song-card-copy{grid-column:2;min-width:0}
.song-section .song-card h3{
  font-size:clamp(1.27rem,3vw,1.55rem);
  margin:0 0 6px;
}
.song-section .song-card p{
  font-size:.83rem;
  line-height:1.53;
  margin:0 0 9px;
}
.song-section .song-card a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.84rem;
  padding-bottom:3px;
  text-decoration:none;
  border-bottom:1px solid rgba(190,114,81,.7);
}
.song-section .song-card a:hover{
  color:#AB6044;
}
.hymn-teaser{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  max-width:820px;
  margin:13px auto 0;
  padding:12px 15px;
  background:rgba(240,240,231,.64);
  border:1px dashed rgba(133,157,127,.39);
  border-radius:16px;
}
.hymn-teaser-icon{
  display:grid;place-items:center;
  flex:none;
  width:34px;height:34px;
  color:#A78765;
  background:rgba(239,229,213,.65);
  border-radius:11px;
  font:400 1.35rem/1 Georgia,serif;
}
.hymn-teaser-copy{
  display:flex;
  flex-direction:column;
  flex:1;min-width:0;
  gap:1px;
}
.hymn-teaser-copy strong{font:500 1rem/1.3 var(--serif);color:#4F5D5B}
.hymn-teaser-copy span{font-size:.74rem;color:#757B74;line-height:1.4}
.hymn-teaser .soon-tag{
  align-self:center;
  flex:none;
  white-space:nowrap;
  font-size:.68rem;
  background:rgba(255,252,247,.5);
}

/* 5. Keep the statement, add a subtle original brand signature. */
.message-section{position:relative}
.mission-wave{
  display:block;
  width:min(235px,55%);
  height:auto;
  opacity:.60;
  margin:19px auto 0;
}

/* 6. A more consistent mobile rhythm and quieter footer. */
.faq-section.section-padding{padding-top:43px;padding-bottom:42px}
.closing-section{padding-top:45px;padding-bottom:51px}
.site-footer{padding-top:27px}
.footer-top{gap:18px}
.footer-logo{max-width:190px}
.footer-bottom{margin-top:20px}

@media(max-width:559px){
  .hero-description{line-height:1.57;margin-bottom:18px}
  .hero-actions{gap:9px}
  .hero-listen-link{font-size:.86rem}
  .listen-intro .section-title{max-width:355px;font-size:1.75rem}
  .listen-section .demo-card{grid-template-columns:96px minmax(0,1fr);gap:11px;padding:11px}
  .listen-section .demo-art{height:130px}
  .demo-body h3{font-size:1.17rem}
  .demo-body>p:not(.small-label):not(.demo-note){font-size:.71rem;line-height:1.4}
  .demo-body .audio-player{margin-top:8px}
  .demo-body .play-button{width:42px;height:42px;min-width:42px}
  .demo-body .audio-times{font-size:.62rem}
  .deliverables-strip{gap:4px 12px;margin:10px auto 4px}
  .deliverables-strip>span{font-size:.66rem}
  .benefits-section{padding-top:6px;padding-bottom:21px}
  .how-section{padding-top:40px;padding-bottom:32px}
  .how-section .step-grid{gap:10px}
  .how-section .step-card{
    display:grid;
    grid-template-columns:43px minmax(0,1fr);
    align-items:start;
    column-gap:15px;
    row-gap:0;
    padding:15px 17px 16px;
  }
  .how-section .step-top{grid-row:1;grid-column:1;display:block;margin:0}
  .how-section .step-copy{grid-row:1;grid-column:2}
  .how-section .step-card h3{font-size:1.33rem;margin-bottom:4px}
  .how-section .step-card p{font-size:.82rem;line-height:1.47}
  .how-section .step-symbol{display:none}
  .how-outro{margin-top:15px}
  .song-section .song-card{padding:17px 15px}
  .hymn-teaser{flex-wrap:wrap}
  .hymn-teaser .soon-tag{margin-left:46px}
  .mission-wave{margin-top:14px;width:min(200px,52%)}
}
@media(min-width:560px){
 .hero-actions{flex-direction:row;gap:19px}
 .listen-intro{margin-bottom:19px}
 .listen-section.section-padding{padding-bottom:11px}
 .listen-section .demo-card{grid-template-columns:125px minmax(0,1fr);gap:19px;padding:15px}
 .listen-section .demo-art{height:152px;min-height:0}
 .demo-body h3{font-size:1.55rem}
 .demo-body>p:not(.small-label):not(.demo-note){font-size:.84rem}
 .benefits-section{padding-bottom:27px}
 .how-section{padding-top:50px;padding-bottom:43px}
 .how-section .step-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
 .how-section .step-card{display:flex;flex-direction:column;padding:19px 20px 20px;min-height:214px}
 .how-section .step-card:last-child{grid-column:auto}
 .how-section .step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
 .how-section .step-copy{display:block}
 .song-section .song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .song-section .song-card{grid-template-columns:54px minmax(0,1fr);padding:22px 19px}
 .song-section .song-card:last-child{grid-column:auto}
 .hymn-teaser{padding:12px 18px}
}
@media(min-width:850px){
 .hero{padding-top:76px}
 .hero-description{max-width:680px}
 .listen-section .demo-card{grid-template-columns:150px minmax(0,1fr);gap:22px;padding:17px}
 .listen-section .demo-art{height:168px}
 .demo-body h3{font-size:1.72rem}
 .listen-intro .section-title{font-size:2.65rem}
 .benefits-section{padding-bottom:35px}
 .how-section{padding-top:66px;padding-bottom:58px}
 .how-section .step-grid{gap:18px}
 .how-section .step-card{padding:23px 23px 25px;min-height:217px}
 .song-section .song-card{padding:25px 24px;grid-template-columns:56px minmax(0,1fr)}
 .song-section .song-card h3{font-size:1.60rem}
 .song-section .song-card p{font-size:.9rem}
 .site-footer .footer-logo{max-width:200px}
}
@media(prefers-reduced-motion:reduce){
  .hero-listen-link{scroll-behavior:auto}
}

/* Keep the future hymn as a calm two-column mobile teaser, not a cramped card. */
@media(max-width:559px){
  .hymn-teaser{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
    row-gap:6px;
    align-items:start;
  }
  .hymn-teaser-icon{grid-column:1;grid-row:1}
  .hymn-teaser-copy{grid-column:2;grid-row:1}
  .hymn-teaser .soon-tag{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin:0;
  }
}