#csh-root {
    all: initial;
    font-family: var(--font-sans);
    color: var(--text);
  }

#csh-root,
#csh-root *{
  box-sizing:border-box;
}

/* ===== HERO LAYOUT ===== */

.hero{
  position: relative;
  padding: 24px 18px 70px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.hero--brand{
  background:
  linear-gradient(to bottom, rgba(31,111,74,.025), rgba(31,111,74,0) 180px),
  radial-gradient(circle at 50% 0%, rgba(31,111,74,.035), transparent 48%),
  var(--bg);
}

.heroInner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

  .heroMark{
    display:flex;
    justify-content:center;
    margin:0 auto 18px;
  }

  .heroMark img{
    width:72px;
    height:72px;
    display:block;
  }

  .heroPromise{
  font-weight:900;
  color:var(--btn);
  text-align:center;
  /* margin:26px auto 18px; */
  margin-top: 1.6rem;
  font-size:18px;
}


.heroBottomCta{
  display:flex;
  justify-content:center;
  opacity:0;
  animation: riseFade 520ms ease-out forwards;
  animation-delay:320ms;
}


/* ===== TYPE ===== */

.hero h1{
  font-size:clamp(36px,5vw,54px);
  line-height:1.03;
  letter-spacing:-0.03em;
  font-weight:900;
  margin:0;
  text-wrap: balance; /* ok if ignored */
  opacity:0;
  animation: riseFade 520ms ease-out forwards;
}

.hero .sub{
  margin:14px auto 0;
  font-size:18px;
  color:var(--muted);
  max-width:700px;
  opacity:0;
  animation: riseFade 520ms ease-out forwards;
  animation-delay:90ms;
}

.heroField{
  position:absolute;
  inset:-60px -8% -20px -8%;
  z-index:1;
  pointer-events:none;
  opacity:.62;
  background:
  radial-gradient(circle at 49% 11%, rgba(31,111,74,.13), transparent 16%),
  radial-gradient(circle at 43% 21%, rgba(31,111,74,.10), transparent 20%),
  radial-gradient(circle at 58% 23%, rgba(31,111,74,.09), transparent 19%),
  radial-gradient(circle at 47% 34%, rgba(31,111,74,.06), transparent 27%),
  radial-gradient(circle at 56% 37%, rgba(31,111,74,.05), transparent 25%);
  filter: blur(20px);
  transform: translateY(-8px);
}


.hero .sub b{ color:var(--text); }


/* ===== BENEFITS ===== */

.benefitGrid{
  margin-top: 2.4rem;
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  opacity:0;
  animation: riseFade 560ms ease-out forwards;
  animation-delay:250ms;
}


/* ===== ANIMATIONS ===== */

@keyframes riseFade{
  from { opacity:0; transform:translateY(10px); filter: blur(1px); }
  to   { opacity:1; transform:translateY(0);    filter: blur(0); }
}



.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
  opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
  transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--slow {
  transition-duration: 750ms;
}

.reveal--delay-1 { transition-delay: 90ms; }
.reveal--delay-2 { transition-delay: 180ms; }
.reveal--delay-3 { transition-delay: 270ms; }
.reveal--delay-4 { transition-delay: 360ms; }



/* COMMONSHUB TITLE — keep authoritative */
.commonshubTitle{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* --- Engine titles: override the existing .benefit h3 rule --- */
.benefit h3.engineTitle{
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.45rem !important;
}

/* --- Your content: make it feel deliberate (not wimpy) --- */
.benefit.yourContent strong{
  font-size: 1.05rem;
  font-weight: 850;
}

/* --- New community: make the internal title the hero --- */
.newCommunity .title{
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
/* utility */
.muted{ color: var(--muted); }



/* center the content layer so it doesn't feel "wimpy" */
.benefit.yourContent{
  text-align: center;
}
.benefit.yourContent strong{
  display:block;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 4px;
}
.benefit.yourContent .muted{
  display:block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.benefit.yourContent .note{
  font-size: 0.95rem;
}

/* reduce engine body copy size a hair */
.engineCopy{
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
.engineCopy b{ color: var(--text); }

/* commonshub copy: tighter and balanced */
.commonCopy{
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0.35rem 0 0;
}


/* Host Panel  */
.hostPanelIntro{
  max-width:760px;
  margin:0 auto 18px;
  text-align:center;
  font-size:18px;
  line-height:1.45;
  color:var(--muted);
}

.hostSection{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}

.hostHeadline{
  font-size: clamp(20px,2.2vw,26px);
  font-weight:650;
  letter-spacing:-0.015em;
  line-height:1.2;
  margin-bottom:10px;
}

.hostIntro{
  max-width:760px;
  margin:0 auto 12px;
  font-size:17px;
  line-height:1.45;
  color:var(--muted);
}


.hostPanel{
  position:relative;
}

.hostPanel::after{
  content:"";
  position:absolute;
  right:18px;
  top:78px;
  width:40px;
  height:44px;
  pointer-events:none;
  background:linear-gradient(to right, rgba(238,243,239,0), rgba(238,243,239,1));
}

.hostBenefits{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:16px;
}

.hostBenefit h3{
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}

.hostBenefit p{
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
}

.hostExample{
  margin-top:18px;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}




/* mobile stack */

@media (max-width:900px){
  .panelShell{
    margin:24px auto;
    padding:24px 18px 28px;
    border-radius:24px;
  }

  .hostPanel{
    margin:0 auto;
    padding:24px 18px 28px;
    border-radius:24px;
  }

}

@media (min-width: 760px){

   .hostPanel::after{
    display:none;
  }

  .benefitGrid{ 
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (max-width: 640px) {

  .heroMark{
    margin-bottom:18px;
  }

  .heroMark img{
    width:70px;
    height:70px;
  }

 .hero--brand{
  padding-top: 36px;
  padding-bottom: 38px !important;
}

 .hostIntro{
    font-size:16px;
  }

  .hostBenefits{
    grid-template-columns:1fr;
  }


  .panelShell{
    margin:28px auto;
  }

  .heroInner{
    padding:0 18px;
  }

  .hostTabs{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0 4px 10px;
    margin:0 0 14px;
    white-space:nowrap;
    scrollbar-width:none;
  }

  .hostTabs::-webkit-scrollbar{
    display:none;
  }

  .hostTab{
    flex:0 0 auto;
    padding:6px 2px 10px;
    font-size:15px;
  }

  .hostTabIcon{
    transform:scale(.95);
  }

  .hero h1{
    font-size:34px;
    line-height:1.1;
  }

  .hero .sub{
    font-size:16px;
    line-height:1.55;
  }

  .heroPromise{
    font-size:15px;
    margin-top:14px;
  }

  .hostPanel{
    padding:22px 18px;
  }

  .hostContent h3{
    font-size:22px;
  }

  .hostExplain{
    font-size:22px;
    margin-bottom:14px;
  }

  .hostPanelIntro{
    font-size:16px;
  }

  .hostExplain h2{
    font-size:24px;
    line-height:1.25;
  }

}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero h1,
  .hero .sub,
  .beforeAfterSection,
  .benefitGrid,
  .heroBottomCta,
  .cta{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

@media (hover:hover){

    .cta:hover{ transform: translateY(-1px); }

  .secondaryCta:hover{
    background:var(--accent-soft);
    transform:translateY(-1px);
  }
}