/*
Theme Name: Flatsome Child The Community
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ===== Phase 4B design tokens + components (STAGING ONLY) ===== */
:root{
  --cst-teal:#4DB7B3;
  --cst-teal-dark:#357f7c;
  --cst-ink:#15181a;
  --cst-concrete:#f2f1ec;
  --cst-concrete-line:#dedbd2;
  --cst-steel:#c7cdc7;
  --cst-muted:#5c625f;
  --cst-muted-dark:#9aa19c;
  --cst-radius:4px;
}

#Header nav.nav .nav-cta-button > a{
  background:var(--cst-teal) !important;
  color:#0d1a19 !important;
  border-radius:99px !important;
  padding:8px 20px !important;
  font-weight:700 !important;
}
#Header nav.nav .nav-cta-button > a:hover{ background:var(--cst-teal-dark) !important; color:#fff !important; }

a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cst-teal);
  outline-offset:2px;
}

.cst-section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.cst-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--cst-teal); display:block; margin-bottom:10px; }

.cst-hero{ background:var(--cst-ink); color:#f4f3ee; padding:80px 20px 96px; text-align:center; position:relative; overflow:hidden; }
.cst-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 46%,rgba(77,183,179,.16) 46%,rgba(77,183,179,.16) 48%,transparent 48%); pointer-events:none; }
.cst-hero-inner{ position:relative; max-width:760px; margin:0 auto; }
.cst-hero h1{ font-size:clamp(32px,5.5vw,58px); line-height:1.05; margin:0 0 18px; font-weight:800; }
.cst-hero p{ font-size:17px; line-height:1.6; color:#cfd6d3; max-width:600px; margin:0 auto 28px; }

.cst-selector-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:110px; gap:14px; }
.cst-sel-card{ border-radius:var(--cst-radius); border:1px solid var(--cst-concrete-line); background:var(--cst-concrete); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none !important; color:var(--cst-ink) !important; transition:box-shadow .18s ease, transform .18s ease; }
.cst-sel-card:hover{ box-shadow:0 10px 24px rgba(20,25,23,.12); transform:translateY(-2px); }
.cst-sel-card .cst-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--cst-muted); margin-bottom:4px; }
.cst-sel-card h3{ font-size:17px; margin:0; }
.cst-sel-1{ grid-column:span 3; grid-row:span 2; background:var(--cst-ink) !important; color:#f4f3ee !important; }
.cst-sel-1 .cst-tag{ color:var(--cst-teal); }
.cst-sel-2,.cst-sel-6,.cst-sel-7{ grid-column:span 3; }
.cst-sel-3,.cst-sel-4,.cst-sel-5{ grid-column:span 2; }
.cst-sel-4{ background:var(--cst-teal) !important; color:#0d1a19 !important; }
@media(max-width:860px){ .cst-selector-grid{ grid-template-columns:repeat(2,1fr); } .cst-sel-1,.cst-sel-2,.cst-sel-3,.cst-sel-4,.cst-sel-5,.cst-sel-6,.cst-sel-7{ grid-column:span 2; grid-row:span 1; } .cst-sel-1{ grid-row:span 2; } }

.cst-feature{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:64px 0; }
.cst-feature.cst-reverse{ direction:rtl; }
.cst-feature.cst-reverse > *{ direction:ltr; }
.cst-feature.cst-dark{ background:var(--cst-ink); color:#f4f3ee; padding:64px 20px; margin:0 -2000px; padding-left:2020px; padding-right:2020px; }
.cst-feature-media{ aspect-ratio:4/3; border-radius:var(--cst-radius); background:repeating-linear-gradient(45deg,var(--cst-steel) 0 2px,transparent 2px 14px),var(--cst-concrete); border:1px solid var(--cst-concrete-line); display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cst-muted-dark); }
.cst-feature.cst-dark .cst-feature-media{ background:repeating-linear-gradient(45deg,#2a2f2e 0 2px,transparent 2px 14px),#1c2020; border-color:#2a2f2e; color:#7d8683; }
.cst-feature h2{ font-size:28px; margin:0 0 14px; }
.cst-feature p{ font-size:15.5px; line-height:1.7; color:var(--cst-muted); max-width:46ch; }
.cst-feature.cst-dark p{ color:#b9c1be; }
@media(max-width:860px){ .cst-feature, .cst-feature.cst-reverse{ grid-template-columns:1fr; direction:ltr; } }

.cst-faq details{ border-bottom:1px solid var(--cst-concrete-line); padding:14px 0; }
.cst-faq summary{ cursor:pointer; font-weight:700; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.cst-faq summary::-webkit-details-marker{ display:none; }
.cst-faq summary::after{ content:"+"; font-size:18px; color:var(--cst-teal); font-weight:400; }
.cst-faq details[open] summary::after{ content:"\2013"; }
.cst-faq details p{ margin:10px 0 0; font-size:14px; color:var(--cst-muted); line-height:1.6; }

.cst-final-cta{ text-align:center; background:var(--cst-teal); color:#0d1a19; padding:64px 20px; margin:0 -2000px; padding-left:2020px; padding-right:2020px; }
.cst-final-cta h2{ font-size:28px; margin:0 0 12px; }
.cst-final-cta .button{ background:#0d1a19 !important; color:var(--cst-teal) !important; }

.cst-proof-hidden{ border:2px dashed var(--cst-steel); border-radius:var(--cst-radius); padding:28px; text-align:center; color:var(--cst-muted-dark); font-size:13.5px; background:var(--cst-concrete); }

.cst-vp-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border:1px dashed var(--cst-steel); border-radius:var(--cst-radius); padding:20px 26px; background:#fff; }

/* Sticky mobile CTA */
.cst-sticky-cta{ display:none; }
@media(max-width:720px){
  body{ padding-bottom:74px !important; }
  .cst-sticky-cta{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:999; background:var(--cst-ink); color:#f4f3ee; border-radius:99px; padding:11px 8px 11px 18px; align-items:center; justify-content:space-between; box-shadow:0 10px 30px rgba(0,0,0,.25); text-decoration:none !important; }
  .cst-sticky-cta span{ font-size:13px; font-weight:700; color:#f4f3ee; }
  .cst-sticky-cta .cst-sticky-btn{ background:var(--cst-teal); color:#0d1a19; padding:8px 16px; border-radius:99px; font-size:12.5px; font-weight:700; }
  .cst-feature, .cst-feature.cst-reverse{ padding:40px 0; }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}