/* Final visual polish against the approved four-panel mockup. */

/* Keep the retreat masthead fully visible on laptop widths. */
.retreat-masthead{
  width:min(100% - 36px,980px)!important;
  grid-template-columns:minmax(220px,.95fr) 150px minmax(300px,1.25fr)!important;
  gap:20px!important;
  overflow:visible!important;
}
.retreat-logo strong{font-size:clamp(32px,4vw,54px)!important;}
.retreat-heartline{width:150px!important;max-width:none!important;}
.retreat-tagline{min-width:0!important;}
.retreat-tagline .main{font-size:clamp(20px,2.45vw,31px)!important;white-space:normal!important;}
.retreat-tagline small{font-size:9px!important;letter-spacing:.2em!important;white-space:normal!important;}

/* Match the approved panel proportions: wider, slightly shorter-feeling care card. */
.shell{
  width:min(100% - 30px,650px)!important;
  margin-top:14px!important;
  padding-bottom:22px!important;
  border-radius:20px!important;
}
.topbar{min-height:68px!important;padding:0 24px!important;}
body:has(#app) .content,
body:has(#friday-app) .content,
body:has(#saturday-app) .content,
body:has(#sunday-app) .content{
  margin:24px 54px 10px!important;
  padding:28px 30px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.985)!important;
}

/* Replace the hard L-shaped color fields with soft watercolor edge washes. */
body:has(#app) .shell::before{
  background:
    radial-gradient(ellipse 26% 44% at -2% 26%,rgba(255,47,135,.40) 0 30%,rgba(255,117,178,.23) 50%,transparent 72%),
    radial-gradient(ellipse 22% 30% at 2% 82%,rgba(183,91,215,.18) 0 30%,transparent 72%),
    radial-gradient(ellipse 18% 20% at 96% 12%,rgba(34,198,211,.10) 0 25%,transparent 72%)!important;
}
body:has(#friday-app) .shell::before{
  background:
    radial-gradient(ellipse 28% 45% at -2% 28%,rgba(34,198,211,.42) 0 30%,rgba(91,216,225,.24) 50%,transparent 72%),
    radial-gradient(ellipse 24% 26% at 5% 84%,rgba(34,198,211,.16) 0 30%,transparent 72%)!important;
}
body:has(#saturday-app) .shell::before{
  background:
    radial-gradient(ellipse 28% 45% at -2% 30%,rgba(153,220,0,.40) 0 30%,rgba(198,235,88,.23) 50%,transparent 72%),
    radial-gradient(ellipse 24% 28% at 5% 84%,rgba(34,198,211,.18) 0 30%,transparent 72%)!important;
}
body:has(#sunday-app) .shell::before{
  background:
    radial-gradient(ellipse 28% 46% at 102% 28%,rgba(180,90,216,.38) 0 30%,rgba(255,82,157,.20) 52%,transparent 72%),
    radial-gradient(ellipse 24% 30% at 98% 84%,rgba(255,47,135,.23) 0 30%,transparent 72%)!important;
}

/* Subtle botanical line-art, like the approved preview, kept behind content. */
body:has(#app) .shell,
body:has(#friday-app) .shell,
body:has(#saturday-app) .shell,
body:has(#sunday-app) .shell{background-color:#fff!important;}

/* Typography scale closer to the mockup. */
body:has(#friday-app) h1,
body:has(#saturday-app) h1,
body:has(#sunday-app) h1{font-size:clamp(44px,6vw,62px)!important;line-height:.98!important;}
body:has(#app) h1{font-size:clamp(42px,5.6vw,60px)!important;line-height:1!important;}
body:has(#app) h2,
body:has(#friday-app) h2,
body:has(#saturday-app) h2,
body:has(#sunday-app) h2{line-height:1.04!important;}
.lead,.intro,.welcome-copy,.reflection-copy{line-height:1.48!important;}

/* Button text gets the approved centered treatment. */
.primary,.primary-button{display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;}

.exact-footer{margin-top:4px!important;margin-bottom:20px!important;}

@media(max-width:980px){
  .retreat-masthead{
    width:min(100% - 28px,820px)!important;
    grid-template-columns:1fr 130px 1.2fr!important;
    gap:14px!important;
  }
  .retreat-logo strong{font-size:40px!important;}
  .retreat-heartline{width:125px!important;}
  .retreat-tagline .main{font-size:24px!important;}
}

@media(max-width:760px){
  .retreat-masthead{display:block!important;text-align:center!important;width:min(100% - 24px,620px)!important;}
  .retreat-logo{align-items:center!important;}
  .retreat-heartline,.retreat-tagline{display:none!important;}
  .shell{width:min(100% - 18px,610px)!important;}
  body:has(#app) .content,
  body:has(#friday-app) .content,
  body:has(#saturday-app) .content,
  body:has(#sunday-app) .content{margin:22px 30px 8px!important;padding:25px 22px!important;}
}

@media(max-width:430px){
  .retreat-logo strong{font-size:36px!important;}
  .retreat-logo small{font-size:8px!important;}
  body:has(#app) .content,
  body:has(#friday-app) .content,
  body:has(#saturday-app) .content,
  body:has(#sunday-app) .content{margin-left:16px!important;margin-right:16px!important;}
  body:has(#friday-app) h1,
  body:has(#saturday-app) h1,
  body:has(#sunday-app) h1{font-size:43px!important;}
}