:root{
  --cx-bg0:#070b16;
  --cx-bg1:#0b1020;
  --cx-panel: rgba(15, 22, 44, 0.88);
  --cx-border: rgba(255,255,255,0.10);
  --cx-text: rgba(255,255,255,0.92);
  --cx-muted: rgba(255,255,255,0.68);
  --cx-accent:#2da3ff;
  --cx-shadow: 0 18px 60px rgba(0,0,0,0.45);
  --cx-radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cx-text);
  background:
    radial-gradient(1000px 700px at 80% 0%, rgba(45,163,255,0.16), transparent 60%),
    radial-gradient(900px 600px at 10% 30%, rgba(120,80,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--cx-bg0), var(--cx-bg1));
}

a{ color: var(--cx-text); }
a:hover{ color: white; }

.container{
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding: 44px 0 70px;
}

.topline{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--cx-muted);
  font-weight: 650;
  letter-spacing: .2px;
  margin-bottom: 18px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border: 1px solid var(--cx-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}

.hero{
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--cx-shadow);
  padding: 28px 28px 22px;
  backdrop-filter: blur(14px);
}

.h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.6px;
}

.lead{
  margin: 0;
  color: var(--cx-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

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

.card{
  grid-column: span 6;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  background: rgba(255,255,255,0.03);
  padding: 18px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
}

.card h2{
  margin: 0 0 8px;
  font-size: 18px;
}

.card p{
  margin: 0 0 10px;
  color: var(--cx-muted);
  line-height: 1.55;
}

ul.clean{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--cx-muted);
}
ul.clean li{ margin: 6px 0; }

.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--cx-border);
  background: rgba(255,255,255,0.04);
  color: var(--cx-text);
  text-decoration:none;
  font-weight: 750;
  letter-spacing: .2px;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}

.btn.primary{
  border-color: rgba(45,163,255,0.40);
  background: rgba(45,163,255,0.10);
}

.btn.primary:hover{
  background: rgba(45,163,255,0.16);
}

.hr{
  height:1px;
  background: rgba(255,255,255,0.10);
  border:0;
  margin: 18px 0;
}

.footer{
  margin-top: 30px;
  color: var(--cx-muted);
  font-size: 13px;
}

@media (max-width: 820px){
  .card{ grid-column: span 12; }
  .container{ padding-top: 26px; }
}


/* =========================
   X MENU (shared)
   ========================= */

.xmenu{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  isolation: isolate;
}

.xmenu-btn{
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 46px;
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid var(--cx-border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  cursor: pointer;

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.xmenu-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}

.xmenu-x{
  font-weight: 900;
  font-size: 22px;
  color: var(--cx-accent);
  text-shadow: 0 0 18px rgba(45,163,255,0.35);
}

.xmenu-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cx-muted);
}

.xmenu-panel{
  position: absolute;
  top: 56px;
  right: 0;
  min-width: 240px;
  padding: 10px;

  border-radius: 18px;
  border: 1px solid var(--cx-border);
  background: var(--cx-panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--cx-shadow);

  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;

  z-index: 2;
}

.xmenu.open .xmenu-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.xmenu-link{
  display:block;
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--cx-text);
  text-decoration: none;
  font-weight: 700;
  transition: background 140ms ease, transform 140ms ease;
}

.xmenu-link:hover{
  background: rgba(45,163,255,0.10);
  transform: translateX(2px);
}

.xmenu-link + .xmenu-link{
  margin-top: 4px;
}

.xmenu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* Submenu */
.xmenu-item{ position: relative; }

.xmenu-parent{
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.xmenu-caret{
  float: right;
  opacity: 0.7;
}

.xmenu-sub{
  display: none;
  margin-top: 6px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--cx-border);
  background: rgba(255,255,255,0.03);
}

.has-sub:hover .xmenu-sub,
.has-sub:focus-within .xmenu-sub{
  display: block;
}

.has-sub.sub-open .xmenu-sub{
  display: block;
}

.xmenu-sublink{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--cx-text);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95em;
  opacity: 0.95;
}

.xmenu-sublink:hover{
  background: rgba(45,163,255,0.10);
  transform: translateX(2px);
}


/* Ensure menu layers correctly */
.xmenu{ isolation:isolate; }
.xmenu-btn{ position:relative; z-index:3; }
.xmenu-panel{ z-index:2; }
.xmenu-backdrop{ z-index:1; }

/* Submenu */
.xmenu-item{ position:relative; }
.xmenu-parent{ width:100%; text-align:left; background:transparent; border:0; cursor:pointer; }
.xmenu-sub{ display:none; margin-top:6px; padding:6px; border-radius:12px; border:1px solid var(--cx-border); background: rgba(255,255,255,0.03); }
.has-sub:hover .xmenu-sub, .has-sub:focus-within .xmenu-sub{ display:block; }
.has-sub.sub-open .xmenu-sub{ display:block; }
.xmenu-sublink{ display:block; padding:10px 12px; border-radius:10px; color: var(--cx-text); text-decoration:none; font-weight:600; font-size:0.95em; opacity:0.95; }
.xmenu-sublink:hover{ background: rgba(45,163,255,0.10); transform: translateX(2px); }


/* ==========================================================
   CompaniX website refresh — Church Companion current feature set
   ========================================================== */
.brand-logo{
  display:block;
  width:min(320px,82vw);
  height:auto;
  margin:0 auto 24px;
}
.home-wrap{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
  padding:72px 0 76px;
}
.home-hero{
  text-align:center;
  padding:34px 28px 30px;
  border:1px solid var(--cx-border);
  border-radius:28px;
  background:
    radial-gradient(680px 320px at 50% -20%,rgba(45,163,255,.16),transparent 65%),
    rgba(255,255,255,.025);
  box-shadow:var(--cx-shadow);
  backdrop-filter:blur(14px);
}
.home-hero h1{
  margin:0 0 12px;
  font-size:clamp(31px,5vw,54px);
  letter-spacing:-1.5px;
  line-height:1.04;
}
.home-hero .lead{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(16px,2.1vw,19px);
}
.home-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  margin-bottom:14px;
  border:1px solid rgba(45,163,255,.32);
  border-radius:999px;
  background:rgba(45,163,255,.08);
  color:#9bd4ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.section-heading{
  margin:30px 0 12px;
}
.section-heading h2{
  margin:0 0 6px;
  font-size:clamp(23px,3vw,30px);
}
.section-heading p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.6;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.feature-card{
  grid-column:span 6;
  border:1px solid var(--cx-border);
  border-radius:var(--cx-radius);
  background:rgba(255,255,255,.03);
  padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
}
.feature-card h3{
  margin:0 0 7px;
  font-size:18px;
}
.feature-card p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.55;
}
.feature-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border:1px solid rgba(45,163,255,.28);
  border-radius:13px;
  background:rgba(45,163,255,.08);
  color:#8fd0ff;
  font-weight:900;
}
.product-hero{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(220px,.7fr);
  gap:22px;
  align-items:center;
}
.product-logo-panel{
  min-height:210px;
  display:grid;
  place-items:center;
  padding:26px;
  border:1px solid var(--cx-border);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}
.product-logo-panel img{
  width:min(260px,100%);
  height:auto;
}
.feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.feature-list div{
  padding:11px 12px;
  border:1px solid var(--cx-border);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:var(--cx-muted);
  line-height:1.35;
}
.feature-list strong{
  display:block;
  color:var(--cx-text);
  margin-bottom:3px;
}
.full-card{
  grid-column:span 12;
}
.three-card{
  grid-column:span 4;
}
.callout{
  margin-top:18px;
  padding:20px;
  border:1px solid rgba(45,163,255,.28);
  border-radius:var(--cx-radius);
  background:linear-gradient(135deg,rgba(45,163,255,.09),rgba(255,255,255,.025));
}
.callout h2{
  margin:0 0 7px;
  font-size:21px;
}
.callout p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.55;
}
.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}
.stat-pill{
  padding:8px 11px;
  border:1px solid var(--cx-border);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--cx-muted);
  font-size:13px;
  font-weight:700;
}
.small-note{
  color:var(--cx-muted);
  font-size:13px;
  line-height:1.5;
}
@media(max-width:820px){
  .home-wrap{padding-top:66px}
  .feature-card,.three-card{grid-column:span 12}
  .product-hero{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .product-logo-panel{min-height:150px}
}


/* ==========================================================
   Church Companion complete product presentation — 2026-08-13
   ========================================================== */

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.cc-home-feature,
.product-showcase,
.ecosystem-section,
.pricing-panel{
  margin-top:22px;
  border:1px solid var(--cx-border);
  border-radius:var(--cx-radius);
  background:rgba(255,255,255,.03);
  box-shadow:0 14px 46px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}

.cc-home-feature{
  display:grid;
  grid-template-columns:minmax(240px,.75fr) minmax(0,1.45fr);
  gap:26px;
  align-items:center;
  padding:24px;
}

.cc-home-logo,
.product-showcase-logo{
  display:grid;
  place-items:center;
  min-height:220px;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.94));
  box-shadow:inset 0 0 0 1px rgba(8,46,104,.08);
}

.cc-home-logo img,
.product-showcase-logo img{
  width:min(390px,100%);
  height:auto;
}

.cc-home-feature h2,
.product-showcase h2,
.ecosystem-section h2{
  margin:0 0 9px;
  font-size:clamp(24px,3vw,34px);
}

.cc-home-feature p,
.product-showcase p,
.ecosystem-section p{
  color:var(--cx-muted);
  line-height:1.6;
}

.price-strip{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border:1px solid rgba(45,163,255,.30);
  border-radius:var(--cx-radius);
  background:linear-gradient(135deg,rgba(45,163,255,.12),rgba(255,255,255,.025));
}
.price-strip > div{
  display:grid;
  gap:2px;
}
.price-strip strong{
  font-size:31px;
  line-height:1;
}
.price-strip p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.5;
}
.price-kicker{
  color:#9bd4ff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.product-showcase{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(0,1.35fr);
  gap:26px;
  padding:24px;
  align-items:center;
}
.product-price-inline{
  margin-top:14px;
  color:#9bd4ff;
  font-weight:800;
}
.product-price-inline strong{
  color:white;
  font-size:20px;
}

.cc-product-page{
  width:min(1120px,calc(100% - 40px));
}

.cc-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);
  gap:22px;
  align-items:center;
  padding:28px;
}
.cc-full-logo{
  display:block;
  width:min(560px,100%);
  height:auto;
  margin:2px 0 14px;
}
.cc-hero-copy h2{
  margin:0 0 10px;
  font-size:clamp(25px,3vw,36px);
  letter-spacing:-.5px;
}
.cc-hero-side{
  display:grid;
  gap:10px;
}
.cc-hero-badge{
  padding:15px;
  border:1px solid var(--cx-border);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.cc-hero-badge img{
  width:46px;
  height:46px;
  object-fit:contain;
  float:left;
  margin:0 11px 7px 0;
}
.cc-hero-badge strong{
  display:block;
  margin-bottom:4px;
  color:white;
}
.cc-hero-badge span{
  display:block;
  color:var(--cx-muted);
  line-height:1.45;
  font-size:14px;
}

.cc-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.cc-feature-grid article{
  min-height:160px;
  padding:16px;
  border:1px solid var(--cx-border);
  border-radius:16px;
  background:rgba(255,255,255,.026);
}
.cc-feature-grid article > span{
  display:block;
  font-size:24px;
  margin-bottom:9px;
}
.cc-feature-grid strong{
  display:block;
  color:white;
  margin-bottom:6px;
}
.cc-feature-grid p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.48;
  font-size:14px;
}

.flow-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.flow-grid article{
  position:relative;
  padding:17px;
  border:1px solid var(--cx-border);
  border-radius:16px;
  background:rgba(255,255,255,.026);
}
.flow-grid b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:50%;
  background:rgba(45,163,255,.14);
  border:1px solid rgba(45,163,255,.35);
  color:#9bd4ff;
}
.flow-grid strong{display:block;margin-bottom:5px}
.flow-grid p{
  margin:0;
  color:var(--cx-muted);
  line-height:1.45;
  font-size:14px;
}

.ecosystem-section{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:24px;
  padding:24px;
}
.ecosystem-points{
  display:grid;
  gap:9px;
}
.ecosystem-points div{
  padding:13px;
  border:1px solid var(--cx-border);
  border-radius:14px;
  background:rgba(255,255,255,.026);
}
.ecosystem-points strong,
.ecosystem-points span{
  display:block;
}
.ecosystem-points span{
  margin-top:3px;
  color:var(--cx-muted);
  font-size:13px;
  line-height:1.4;
}

.pricing-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);
  overflow:hidden;
}
.pricing-main{
  padding:28px;
  background:
    radial-gradient(520px 230px at 20% 0%,rgba(45,163,255,.22),transparent 70%),
    rgba(45,163,255,.055);
}
.price-number{
  margin-top:8px;
  font-size:clamp(52px,7vw,78px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-3px;
}
.price-number small{
  font-size:.42em;
  letter-spacing:-.5px;
}
.price-period{
  margin-top:5px;
  font-size:18px;
  font-weight:800;
  color:#cceaff;
}
.price-includes{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.price-includes span{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--cx-muted);
  font-size:12px;
  font-weight:700;
}
.pricing-side{
  padding:28px;
  border-left:1px solid var(--cx-border);
}
.pricing-side h3{
  margin:0 0 6px;
}
.pricing-side > strong{
  display:block;
  margin-bottom:8px;
  color:#9bd4ff;
  font-size:25px;
}
.pricing-side p{
  color:var(--cx-muted);
  line-height:1.55;
}

.ecosystem-card{
  margin-top:18px;
}

@media(max-width:900px){
  .cc-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-strip{grid-template-columns:1fr}
}

@media(max-width:820px){
  .cc-home-feature,
  .product-showcase,
  .cc-hero,
  .ecosystem-section,
  .pricing-panel{
    grid-template-columns:1fr;
  }
  .cc-home-logo,
  .product-showcase-logo{
    min-height:160px;
  }
  .pricing-side{
    border-left:0;
    border-top:1px solid var(--cx-border);
  }
}

@media(max-width:560px){
  .cc-feature-grid,
  .flow-grid{
    grid-template-columns:1fr;
  }
  .cc-product-page{
    width:min(100% - 24px,1120px);
  }
  .cc-hero,
  .cc-home-feature,
  .product-showcase,
  .ecosystem-section,
  .pricing-main,
  .pricing-side{
    padding:18px;
  }
}