/* ============================================================
   Sisters of the Heart Collective — Guest Page
   Design migrated as-is from the original GoHighLevel build.

   Type sizes that sat below the 16px readability floor have been
   raised to 16px (eyebrow, badge, tier "per", tier "fine", footer
   copyright). Everything else is unchanged.
   ============================================================ */

.sohc *{box-sizing:border-box;margin:0;padding:0}
.sohc{
  --teal:#5B9EA0; --teal-dark:#3D7A7C; --terra:#C05A3A; --terra-dark:#a8492e;
  --cream:#F9F6F1; --white:#ffffff; --ink:#3a3a3a; --soft:#6b6b6b;
  --line:rgba(61,122,124,0.18);
  font-family:'Jost',system-ui,sans-serif; color:var(--ink);
  font-size:19px; line-height:1.8; background:var(--white);
  width:100%; overflow:hidden;
}
.sohc .wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.sohc section{padding:72px 0}
.sohc .cream{background:var(--cream)}
.sohc h1,.sohc h2,.sohc h3,.sohc .serif{font-family:'Cormorant Garamond',Georgia,serif}
.sohc .eyebrow{font-size:16px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal-dark); display:inline-block; margin-bottom:14px}
.sohc h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:700; line-height:1.05;
  color:var(--teal-dark)}
.sohc h2{font-size:clamp(2.2rem,5vw,3.2rem); font-weight:600; color:var(--teal-dark); line-height:1.12}
.sohc h3{font-size:clamp(1.5rem,3vw,1.9rem); font-weight:600; color:var(--teal-dark)}
.sohc .tagline{font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.5rem,3vw,2rem); color:var(--terra); margin-top:6px}
.sohc p{margin:0 0 18px}
.sohc .lead{font-size:1.2rem; font-weight:500}
.sohc .center{text-align:center}
.sohc .rule{width:64px; height:3px; background:var(--terra); border:0; margin:20px auto 26px}
.sohc img{max-width:100%; height:auto; display:block}
/* Grid children default to min-width:auto, which lets wide content push a
   track past the screen edge. Zeroing it keeps every grid inside the phone. */
.sohc .hero-split>*,.sohc .split>*,.sohc .tiers>*,.sohc .gallery>*,
.sohc .quotes>*,.sohc .times>*{min-width:0}

/* Buttons */
.sohc .btn{display:inline-block; font-family:'Jost',sans-serif; font-weight:700;
  font-size:16px; letter-spacing:.02em; text-decoration:none; text-align:center;
  padding:16px 26px; border-radius:8px; cursor:pointer; border:0; line-height:1.4;
  transition:background .2s,transform .2s}
.sohc .btn-teal{background:var(--teal); color:#fff}
.sohc .btn-teal:hover{background:var(--teal-dark); transform:translateY(-2px)}
.sohc .btn-terra{background:var(--terra); color:#fff}
.sohc .btn-terra:hover{background:var(--terra-dark); transform:translateY(-2px)}
.sohc .btn-ghost{background:transparent; color:var(--teal-dark); border:2px solid var(--teal)}
.sohc .btn-ghost:hover{background:var(--teal); color:#fff}

/* Three-part CTA row: Thursday · text · Friday */
.sohc .cta-row{display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
  align-items:center; margin-top:30px}
.sohc .cta-row .mid{font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.35rem; color:var(--soft)}

/* Hero */
.sohc .hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--cream),var(--white)); text-align:center}
.sohc .hero .wrap{position:relative; z-index:2}
.sohc .hero .banner{width:100%; max-width:1000px; margin:0 auto 40px; border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.12); animation:sohc-breathe 7s ease-in-out infinite}

/* Two-column hero: portrait on the left, invitation + buttons on the right */
.sohc .hero-split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; text-align:left}
.sohc .hero-photo{text-align:center}
.sohc .hero-photo .caption{margin-top:14px}
/* Hero headline is an <h1> for SEO/semantics, but keeps the original
   hero size (the old design used an <h2> here) so the look is unchanged. */
.sohc .hero-copy h1{font-size:clamp(2.2rem,5vw,3.2rem); font-weight:600; line-height:1.12}
.sohc .hero-copy .rule{margin:16px 0 22px}
.sohc .hero-copy .details{margin:20px 0; max-width:none}
.sohc .hero-copy .cta-row{justify-content:flex-start; margin-top:26px}

/* Portrait — grounds the cut-out photo on a warm color wash, colored halo + floor shadow */
.sohc .portrait{position:relative; max-width:min(560px,100%); margin:0 auto; padding:34px 30px 26px;
  border-radius:26px;
  background:linear-gradient(160deg,#e9f5f4 0%,#f6ede3 55%,#f3e4d6 100%);
  box-shadow:0 22px 52px rgba(61,122,124,.18)}
/* soft colored halo directly behind the two figures */
.sohc .portrait::before{content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:80%; height:84%; border-radius:50%;
  background:radial-gradient(circle, rgba(91,158,160,.30), rgba(192,90,58,.12) 55%, rgba(255,255,255,0) 72%);
  filter:blur(8px); z-index:0}
.sohc .portrait::after{content:""; position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:58%; height:22px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(61,122,124,.28), rgba(61,122,124,0) 70%);
  filter:blur(3px); z-index:0}
.sohc .portrait picture{position:relative; z-index:1; display:block}
.sohc .portrait .directors{position:relative; z-index:1; max-width:min(470px,100%); margin:0 auto; display:block}
.sohc .hero .caption{font-family:'Cormorant Garamond',serif; font-size:1.25rem;
  color:var(--soft); letter-spacing:.04em}
.sohc .details{font-family:'Cormorant Garamond',serif; font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--ink); margin:22px auto; max-width:760px}
.sohc .details .z{color:var(--teal-dark); font-weight:600}

/* Ambient motion layer */
.sohc .ambient{position:absolute; inset:0; z-index:1; pointer-events:none}
.sohc .orb{position:absolute; border-radius:50%; filter:blur(38px); opacity:.5}
.sohc .orb1{width:260px; height:260px; top:-40px; left:-60px;
  background:radial-gradient(circle,#7ED8D4,transparent 70%); animation:sohc-drift 16s ease-in-out infinite}
.sohc .orb2{width:320px; height:320px; bottom:-80px; right:-70px;
  background:radial-gradient(circle,#e2c98f,transparent 70%); animation:sohc-drift 21s ease-in-out infinite reverse}
.sohc .orb3{width:200px; height:200px; top:38%; right:16%;
  background:radial-gradient(circle,#C05A3A,transparent 72%); opacity:.22; animation:sohc-drift 19s ease-in-out infinite}
.sohc .twinkle{position:absolute; width:7px; height:7px; border-radius:50%;
  background:#c9a96e; box-shadow:0 0 8px 2px rgba(201,169,110,.7); opacity:0; animation:sohc-twinkle 5s ease-in-out infinite}
.sohc .t1{top:14%; left:12%; animation-delay:.2s}
.sohc .t2{top:22%; right:18%; animation-delay:1.4s}
.sohc .t3{top:60%; left:9%; animation-delay:2.6s}
.sohc .t4{top:70%; right:12%; animation-delay:.9s}
.sohc .t5{top:8%; left:46%; animation-delay:3.3s}
.sohc .t6{top:52%; right:40%; animation-delay:2s}

/* Pricing */
.sohc .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:38px}
.sohc .tier{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:34px 26px; text-align:center; position:relative; display:flex; flex-direction:column}
.sohc .tier.feat{border:2px solid var(--terra); box-shadow:0 12px 34px rgba(192,90,58,.14)}
.sohc .tier .badge{position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  background:var(--terra); color:#fff; font-size:16px; font-weight:700; letter-spacing:.08em;
  padding:6px 16px; border-radius:20px; white-space:nowrap}
.sohc .tier .name{font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:600;
  color:var(--teal-dark)}
.sohc .tier .price{font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:700;
  color:var(--ink); line-height:1; margin:12px 0 2px}
.sohc .tier .per{font-size:16px; color:var(--soft); letter-spacing:.04em; text-transform:uppercase}
.sohc .tier .strike{color:var(--soft); text-decoration:line-through; font-size:1.05rem}
.sohc .tier .save{color:var(--terra); font-weight:600}
.sohc .tier .desc{margin:16px 0 20px; font-size:1.05rem; flex-grow:1}
.sohc .tier .fine{font-size:16px; color:var(--soft); margin-top:14px; margin-bottom:0}

/* Share */
.sohc .share{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:26px}

/* Meeting times */
.sohc .times{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px;
  margin:0 auto 34px}
.sohc .timecard{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:30px; text-align:center}
.sohc .timecard .day{font-family:'Cormorant Garamond',serif; font-size:1.9rem;
  font-weight:600; color:var(--terra); margin-bottom:8px}

/* Gallery */
.sohc .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:38px}
.sohc .gcard{text-align:center}
.sohc .gcard img{border-radius:12px; margin-bottom:12px; box-shadow:0 8px 22px rgba(0,0,0,.08)}
.sohc .gcard .gcap{font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--teal-dark)}
.sohc .soar-hero{max-width:min(620px,100%); margin:0 auto 30px; border-radius:12px}

/* Split (ebook) */
.sohc .split{display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:center}
.sohc .split img{border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); max-width:min(360px,100%); margin:0 auto}

/* Testimonials */
.sohc .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:38px}
.sohc .quote{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 28px}
.sohc .quote .mark{font-family:'Cormorant Garamond',serif; font-size:3.4rem; line-height:.6;
  color:var(--teal); height:26px}
.sohc .quote p{font-size:1.08rem; font-style:italic; color:#4a4a4a}
.sohc .quote .who{font-family:'Cormorant Garamond',serif; font-style:normal; font-weight:600;
  color:var(--terra); font-size:1.2rem; margin:0}
.sohc .note{font-size:1rem; color:var(--soft); font-style:italic; margin-top:10px}

/* FAQ */
.sohc .faq{max-width:820px; margin:34px auto 0}
.sohc details{background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:0; margin-bottom:14px; overflow:hidden}
.sohc summary{list-style:none; cursor:pointer; padding:22px 26px; font-family:'Cormorant Garamond',serif;
  font-size:1.4rem; font-weight:600; color:var(--teal-dark); display:flex; justify-content:space-between;
  align-items:center; gap:16px}
.sohc summary::-webkit-details-marker{display:none}
.sohc summary .plus{color:var(--terra); font-weight:700; font-size:1.6rem; flex-shrink:0; transition:transform .25s ease}
.sohc details[open] summary .plus{transform:rotate(45deg)}
.sohc details .ans{padding:0 26px 24px; font-size:1.08rem}

/* Footer */
.sohc .foot{background:var(--teal-dark); color:#fff; text-align:center; padding:56px 22px}
.sohc .foot .fname{font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600}
.sohc .foot .ftag{font-style:italic; color:#e6f0f0; margin:6px 0 22px}
.sohc .foot .fcontact{font-size:1rem; color:#dbeceb}
.sohc .foot a{color:#fff; text-decoration:underline}
.sohc .foot .copy{font-size:1rem; color:#cfe3e2; margin-top:20px}

/* Keyboard focus — visible for anyone tabbing through the page */
.sohc a:focus-visible,.sohc button:focus-visible,.sohc summary:focus-visible{
  outline:3px solid var(--terra); outline-offset:3px; border-radius:6px}

/* ---- Keyframes (contemplative, slow) ---- */
@keyframes sohc-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}
@keyframes sohc-twinkle{0%,100%{opacity:0;transform:scale(.6)}45%,55%{opacity:.9;transform:scale(1)}}
@keyframes sohc-breathe{0%,100%{box-shadow:0 14px 40px rgba(0,0,0,.12)}50%{box-shadow:0 20px 54px rgba(91,158,160,.28)}}
@keyframes sohc-sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sohc-shimmer{0%{left:-140%}60%,100%{left:140%}}
@keyframes sohc-fadein{to{opacity:1}}

/* ---- Button shimmer sweep ---- */
.sohc .btn-teal,.sohc .btn-terra{position:relative; overflow:hidden}
.sohc .btn-teal::after,.sohc .btn-terra::after{content:""; position:absolute; top:0; left:-140%;
  width:60%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  animation:sohc-shimmer 6s ease-in-out infinite}
.sohc .tier .badge{overflow:hidden}
.sohc .tier .badge::after{content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  transform:skewX(-20deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  animation:sohc-shimmer 4.5s ease-in-out infinite}

/* ---- Scroll reveal (only active once JS marks the page ready) ---- */
.sohc.anim-ready .reveal{opacity:0; transform:translateY(26px)}
.sohc.anim-ready .reveal.in{opacity:1; transform:none;
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1)}
.sohc.anim-ready .hero{opacity:0; animation:sohc-fadein 1.2s ease forwards}

/* Gentle hover lift on cards/images */
.sohc .tier,.sohc .gcard img,.sohc .quote{transition:transform .35s ease, box-shadow .35s ease}
.sohc .gcard img:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 16px 34px rgba(0,0,0,.16)}
.sohc .quote:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(61,122,124,.14)}
.sohc .tier:hover{transform:translateY(-5px)}

/* ---- Respect reduced-motion: stillness for those who want it ---- */
@media (prefers-reduced-motion:reduce){
  .sohc *,.sohc *::after,.sohc *::before{animation:none !important; transition:none !important}
  .sohc.anim-ready .reveal{opacity:1 !important; transform:none !important}
  .sohc.anim-ready .hero{opacity:1 !important}
  .sohc .ambient{display:none}
}

@media (max-width:860px){
  .sohc .tiers{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto}
  .sohc .gallery{grid-template-columns:repeat(2,1fr)}
  .sohc .quotes{grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto}
  .sohc .split{grid-template-columns:1fr; text-align:center}
  .sohc .times{grid-template-columns:1fr; max-width:420px}
  .sohc section{padding:52px 0}
  /* Hero returns to a single centered column on small screens */
  .sohc .hero-split{grid-template-columns:1fr; gap:30px; text-align:center; max-width:520px; margin:0 auto}
  .sohc .hero-copy .caption{margin-top:6px}
  .sohc .hero-copy .rule{margin:16px auto 22px}
  .sohc .hero-copy .cta-row{justify-content:center}
}

/* On a phone the CTA buttons stack full-width — easier to tap. */
@media (max-width:520px){
  .sohc .cta-row{gap:14px}
  .sohc .cta-row .btn{width:100%}
  .sohc .share .btn{width:100%}
}