:root{
  --bg:#1e293b;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,0.12);
  --shadow:0 10px 30px rgba(15,23,42,0.10);
  --shadow2:0 18px 55px rgba(15,23,42,0.12);

  --blue:#1d4ed8;
  --blue2:#2563eb;
  --gold:#b08900;
  --gold2:#f5d87a;
  --rose:#e11d48;

  --radius:18px;
  --radius2:24px;

  --max:1120px;
}
.h1 {
  color: #0f172a;                           /* light mode: deep slate */
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-align: center;
  max-width: 100% !important;
  width: fit-content !important;
  margin: 16px auto !important;
  position: relative;
  display: inline-block;
  padding: 0.4em 0.8em;
  background: transparent;

  /* Core revolutionary look: subtle inner "carved" depth */
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.08) 0%, transparent 40%) !important;
  box-shadow: 
    inset 2px 2px 8px rgba(0, 0, 0, 0.18),      /* top-left inner shadow = carved feel */
    inset -2px -2px 8px rgba(255, 255, 255, 0.12) !important;  /* bottom-right highlight */
  border-radius: 12px !important;               /* very soft squared corners — modern, not pill */
  border: 1px solid rgba(59, 130, 246, 0.10);   /* ultra-subtle blue rim — premium hint */

  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Light mode specific tweaks */
html:not([data-theme="dark"]) .h1,
[data-theme="light"] .h1 {
  color: #0f172a !important;
  box-shadow: 
    inset 3px 3px 10px rgba(0, 0, 0, 0.12),
    inset -3px -3px 10px rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(59, 130, 246, 0.08) !important;
}

/* Dark mode: flips to glowing carved look */
html.dark .h1,
[data-theme="dark"] .h1 {
  color: #f1f5f9 !important;                    /* light slate-100 */
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.25) 0%, transparent 50%) !important;
  box-shadow: 
    inset 4px 4px 12px rgba(0, 0, 0, 0.55),
    inset -4px -4px 12px rgba(241, 245, 249, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.20) !important;
}

/* Optional: faint animated inner light sweep (very subtle, luxury feel) */
.h1::after {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(96, 165, 250, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.h1:hover::after {
  opacity: 1;
}
h2 { color: #9BB7D4; }
.lead {
  color: #ffffff !important;
  background: #1e293b !important;
  padding: 12px 20px !important;
  border-radius: 16px !important;
  display: inline-block !important;
  border: 1px solid rgba(96, 165, 250, 0.15) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 1.125rem !important;
  line-height: 1.55 !important;
  max-width: 100% !important;
  width: fit-content !important;
  margin: 16px auto !important;
  text-align: center !important;
  transition: all 0.22s ease !important;
}

@media (max-width: 640px) {
  .lead {
    width: 100% !important;
    max-width: none !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }
}

.card { background-color: #FFFFFF; }
.hero-card { background-color: #FFFFFF; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(780px 540px at 90% 0%, rgba(245,216,122,0.20), transparent 55%),
    radial-gradient(880px 560px at 50% 120%, rgba(29,78,216,0.10), transparent 60%),
    var(--bg);
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%;height:auto}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  left:18px;top:18px;width:auto;height:auto;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:1000
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:900;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(247,250,252,0.72);
  border-bottom:1px solid rgba(15,23,42,0.10);
}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:180px}
.brand-mark{
  width:36px;height:36px;border-radius:12px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(245,216,122,0.95), rgba(176,137,0,0.85)),
    radial-gradient(24px 24px at 70% 70%, rgba(37,99,235,0.95), rgba(29,78,216,0.85));
  box-shadow:0 10px 25px rgba(29,78,216,0.18);
  position:relative;overflow:hidden;border:1px solid rgba(15,23,42,0.10)
}
.brand-mark:after{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.55), transparent 70%);
  transform:rotate(12deg);animation:shine 6.2s ease-in-out infinite
}
@keyframes shine{
  0%,30%{transform:translateX(-40%) rotate(12deg);opacity:0}
  45%{opacity:1}
  65%{transform:translateX(40%) rotate(12deg);opacity:0}
  100%{opacity:0}
}
.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title strong{font-size:15px;letter-spacing:0.2px}
.brand-title span{font-size:12px;color:var(--muted)}

.nav-links{display:flex;align-items:center;gap:14px}
.nav-links a{font-size:14px;color:rgba(15,23,42,0.85);padding:10px 10px;border-radius:12px}
.nav-links a.active{
  background:rgba(37,99,235,0.10);
  border:1px solid rgba(37,99,235,0.18);
  color:rgba(15,23,42,0.95)
}

.nav-cta{display:flex;align-items:center;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 14px;border-radius:14px;border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.72);
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
  font-weight:650;font-size:14px;color:rgba(15,23,42,0.92);
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0px)}
.btn-primary{
  background:linear-gradient(135deg, rgba(37,99,235,0.96), rgba(29,78,216,0.96));
  color:white;border-color:rgba(29,78,216,0.55);
  box-shadow:0 16px 40px rgba(29,78,216,0.28)
}
.btn-primary:hover{box-shadow:0 20px 50px rgba(29,78,216,0.32)}
.btn-gold{
  background:linear-gradient(135deg, rgba(245,216,122,0.95), rgba(176,137,0,0.92));
  color:rgba(15,23,42,0.96);border-color:rgba(176,137,0,0.40);
  box-shadow:0 16px 40px rgba(176,137,0,0.22)
}
.btn-ghost{background:rgba(255,255,255,0.55)}
.btn small{font-weight:600;opacity:.85}

.hamburger{
  display:none;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.65);
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
  align-items:center;justify-content:center;cursor:pointer
}
.hamburger span{display:block;width:18px;height:2px;background:rgba(15,23,42,0.80);border-radius:999px;position:relative}
.hamburger span:before,.hamburger span:after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(15,23,42,0.80);border-radius:999px;
  transition:transform .12s ease, top .12s ease, opacity .12s ease
}
.hamburger span:before{top:-6px}
.hamburger span:after{top:6px}

.mobile-panel{display:none;padding:14px 0 18px 0}
.mobile-card{
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(15,23,42,0.12);
  border-radius:20px;box-shadow:var(--shadow);padding:12px
}
.mobile-links{display:flex;flex-direction:column;gap:6px}
.mobile-links a{padding:12px 12px;border-radius:14px;border:1px solid transparent}
.mobile-links a.active{background:rgba(37,99,235,0.10);border-color:rgba(37,99,235,0.18)}

/* Sections */
.section{padding:54px 0}
.section.tight{padding:36px 0}
.section-head{margin-bottom:18px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:750;font-size:12px;color:rgba(29,78,216,0.92);
  background:rgba(37,99,235,0.10);border:1px solid rgba(37,99,235,0.18);
  padding:8px 10px;border-radius:999px
}
.h1{font-size:44px;line-height:1.08;letter-spacing:-0.9px;margin:14px 0 10px 0}
.p{margin:0;color:var(--muted);font-size:16px}
.lead{font-size:18px;color:rgba(15,23,42,0.72);margin-top:12px}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:1fr 1fr 1fr}

.card{
  background: linear-gradient(145deg, #fefefe 0%, #fdfaf6 50%, #f9f5ef 100%);
  border:1px solid rgba(15,23,42,0.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px
}
.card.soft{background:rgba(255,255,255,0.62)}
.card h3{margin:0 0 6px 0;font-size:16px;letter-spacing:-0.2px}
.card p{margin:0;color:var(--muted);font-size:14px}

.kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.badge{
  font-size:12px;font-weight:750;color:rgba(15,23,42,0.80);
  background:rgba(245,216,122,0.28);
  border:1px solid rgba(176,137,0,0.25);
  padding:7px 10px;border-radius:999px
}
.badge.blue{background:rgba(37,99,235,0.10);border-color:rgba(37,99,235,0.18);color:rgba(29,78,216,0.92)}
.badge.rose{background:rgba(225,29,72,0.10);border-color:rgba(225,29,72,0.18);color:rgba(225,29,72,0.92)}

.hero{padding:42px 0 28px 0}
.hero-wrap{display:grid;grid-template-columns:1.3fr 0.7fr;gap:18px;align-items:stretch}
.hero-card{
  border-radius:var(--radius2);
  padding:22px;
  background:
    radial-gradient(1200px 460px at 10% 10%, rgba(37,99,235,0.22), transparent 55%),
    radial-gradient(900px 520px at 95% 20%, rgba(245,216,122,0.26), transparent 55%),
    rgba(255,255,255,0.72);
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:var(--shadow2);
  overflow:hidden;position:relative
}
.hero-card:before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(90deg, rgba(37,99,235,0.0), rgba(37,99,235,0.12), rgba(37,99,235,0.0));
  opacity:.35;pointer-events:none
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.hero-mini{
  border-radius:var(--radius2);
  padding:18px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:var(--shadow2);
  display:flex;flex-direction:column;justify-content:space-between
}
.stat{display:flex;flex-direction:column;gap:6px}
.stat strong{font-size:22px;letter-spacing:-0.4px}
.stat span{color:var(--muted);font-size:13px}
.list{margin:12px 0 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(15,23,42,0.78)}
.check{
  width:18px;height:18px;border-radius:999px;
  background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.22);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto
}
.check svg{width:12px;height:12px;fill:rgba(29,78,216,0.92)}

hr.sep{border:0;border-top:1px solid rgba(15,23,42,0.10);margin:18px 0}

.callout{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:18px;
  background:rgba(245,216,122,0.20);border:1px solid rgba(176,137,0,0.24)
}
.callout strong{font-size:14px}
.callout p{margin:4px 0 0 0;font-size:13px;color:rgba(15,23,42,0.72)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch}
.price-card{
  padding:18px;border-radius:22px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:var(--shadow2);
  display:flex;flex-direction:column
}
.price-card.featured{
  background:
    radial-gradient(920px 520px at 20% 20%, rgba(37,99,235,0.20), transparent 55%),
    radial-gradient(780px 460px at 90% 40%, rgba(245,216,122,0.26), transparent 55%),
    rgba(255,255,255,0.78);
  border-color:rgba(37,99,235,0.22);
  transform:translateY(-2px)
}
.price-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.price-card h3{margin:0;font-size:18px}
.price{margin:10px 0 2px 0;font-size:34px;letter-spacing:-0.8px;font-weight:850}
.price small{font-size:14px;font-weight:700;color:rgba(15,23,42,0.62)}
.features{list-style:none;padding:0;margin:14px 0 0 0;display:flex;flex-direction:column;gap:10px}
.features li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(15,23,42,0.78)}
.features li svg{width:16px;height:16px;fill:rgba(29,78,216,0.92);flex:0 0 auto;margin-top:2px}
.grow{flex:1 1 auto}
.price-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* Forms */
.form{display:grid;gap:12px}
.input,.textarea{
  width:100%;padding:12px 12px;border-radius:14px;
  border:1px solid rgba(15,23,42,0.14);
  background:rgba(255,255,255,0.82);
  outline:none;font-size:14px
}
.textarea{min-height:140px;resize:vertical}
.input:focus,.textarea:focus{
  border-color:rgba(37,99,235,0.40);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12)
}
.label{font-size:12px;font-weight:750;color:rgba(15,23,42,0.75)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notice{
  padding:12px 12px;border-radius:16px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.72);
  color:rgba(15,23,42,0.82);
  box-shadow:var(--shadow)
}
.notice.ok{border-color:rgba(34,197,94,0.22);background:rgba(34,197,94,0.10)}
.notice.err{border-color:rgba(225,29,72,0.22);background:rgba(225,29,72,0.10)}

/* Footer */
.footer{
  padding:28px 0 34px 0;
  border-top:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.42)
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer a{font-size:13px;color:rgba(15,23,42,0.78);padding:8px 10px;border-radius:12px}
.footer a:hover{background:rgba(15,23,42,0.05)}
.footer .muted{font-size:13px;color:rgba(15,23,42,0.62)}
.footer-menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Responsive */
@media (max-width:980px){
  .h1{font-size:40px}
  .hero-wrap{grid-template-columns:1fr}
}
@media (max-width:860px){
  .grid.three{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:inline-flex}
  .mobile-panel{display:block}
}
@media (max-width:520px){
  .h1{font-size:34px}
  .hero{padding:34px 0 18px 0}
  .brand{min-width:auto}
  .btn{width:100%}
  .hero-actions{gap:10px}
}



/* --- Mobile nav reliability patch --- */
.mobile-panel{ display:none; }
.mobile-panel.is-open{ display:block; }

/* Theme toggle (uses existing .btn styling) */
.theme-toggle{ min-width:84px; }

/* IN-LINE IMPORTED - browse churches */
      .listing-grid{display:grid; gap:12px;}
      .church-item{
        border:1px solid var(--line);
        border-radius:18px;
        padding:14px;
        background: var(--card);
        display:flex;
        gap:14px;
        align-items:stretch;
      }
      .church-left{flex:1;}
      .church-title{margin:0; font-weight:900; font-size:18px; letter-spacing:-.2px;}
      .church-meta{margin-top:6px; color:var(--muted); line-height:1.6;}
      .stars{display:inline-flex; gap:4px; vertical-align:middle;}
      .mini{
        font-size:12px;
        color:var(--muted);
      }
      .rating-line{
        margin-top:8px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        align-items:center;
      }
      .tier-badge{
        display:inline-flex; align-items:center; justify-content:center;
        border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800;
        border:1px solid var(--line); color:rgba(15,23,42,.85);
        background: rgba(148,163,184,.10);
      }
      .tier-pro{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
      .tier-starter{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); }
      .church-actions{display:flex; flex-direction:column; gap:10px; justify-content:center; min-width:190px;}
      .church-actions .btn{width:100%;}
      .starter-card{
        background: radial-gradient(900px 420px at 70% 20%, rgba(59,130,246,.18), transparent 60%),
                    linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.0));
        border-color: rgba(59,130,246,.28);
        box-shadow: 0 18px 45px rgba(59,130,246,.10);
      }
      .pro-card{
        background: radial-gradient(900px 420px at 70% 20%, rgba(245,158,11,.18), transparent 60%),
                    linear-gradient(180deg, rgba(245,158,11,.07), rgba(255,255,255,.0));
        border-color: rgba(245,158,11,.28);
        box-shadow: 0 18px 45px rgba(245,158,11,.10);
      }
/* =========================
   Tier badges: LIGHT mode contrast bump
   ========================= */
html:not(.dark) .tier-badge,
body:not(.dark) .tier-badge{
  border-width: 1px;
  border-color: rgba(15,23,42,.22);
  color: #000000 !important;
  background: rgba(15,23,42,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 18px rgba(2,6,23,.08);
}

/* Starter: richer blue pill */
html:not(.dark) .tier-badge.tier-starter,
body:not(.dark) .tier-badge.tier-starter{
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.42);
  color: #000000 !important;
}

/* Pro: richer gold pill */
html:not(.dark) .tier-badge.tier-pro,
body:not(.dark) .tier-badge.tier-pro{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.48);
  color: #000000 !important;
}
/* church profile */
.discovery-packmeta{
  font-size:12px;
  font-weight:900;
  color: #000000;
}
/*giving*/
      .giving-title{ font-size:12px; font-weight:950; letter-spacing:.22px; text-transform:uppercase; color: rgba(15,23,42,.72); }
      .give-meta .top{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
      .give-meta .sub{ font-weight:800; color: rgba(15,23,42,.60); font-size:11px; margin-top:3px; }
/* HIERARCHY (NEW) */
      .hier-card{
        border:1px solid var(--line);
        border-radius:18px;
        padding:16px;
        background:
          radial-gradient(900px 420px at 80% 10%, rgba(245,158,11,.10), transparent 60%),
          linear-gradient(180deg, rgba(15,23,42,.02), rgba(255,255,255,0));
        box-shadow: 0 18px 45px rgba(15,23,42,.05);
        margin-top:14px;
      }
      .hier-head{
        display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
        padding-bottom:10px; border-bottom:1px solid var(--line);
        margin-bottom:12px;
      }
      .hier-title{ margin:0; font-size:16px; font-weight:900; letter-spacing:.2px; }
      .hier-sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
      .tier-grid{
        display:grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap:10px;
      }
      @media(max-width: 980px){
        .tier-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
      }
      @media(max-width: 640px){
        .tier-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      .role{
        grid-column: span 12;
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.78);
        border-radius:16px;
        padding:12px;
      }
      .role-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
      .role-name{ margin:0; font-weight:950; letter-spacing:.1px; }
      .role-desc{ margin:8px 0 0 0; color: rgba(15,23,42,.86); line-height:1.55; white-space:pre-wrap; }
      .slots{
        margin-top:10px;
        display:grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap:10px;
      }
      .slot{
        grid-column: span 6;
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.90);
        border-radius:14px;
        padding:10px;
        min-width:0;
      }
      @media(max-width: 820px){ .slot{ grid-column: span 12; } }
      .slot-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
      .slot-k{ font-size:12px; color: var(--muted); font-weight:900; }
      .slot-v{ font-weight:950; text-decoration:none; color: rgba(15,23,42,.92); }
      .slot-v:hover{ text-decoration:underline; }
      .slot-empty{ color: var(--muted); font-size:13px; line-height:1.5; }
      .slot-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
      .apply-link{ text-decoration:none; }

      .hier-tiers{ display:grid; gap:12px; }
      .tier{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.65);
        border-radius:16px;
        padding:12px;
      }
      .tier-top{
        display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
        padding-bottom:10px; margin-bottom:10px;
        border-bottom:1px solid rgba(148,163,184,.18);
      }
      .tier-label{
        margin:0; font-size:12px; font-weight:950; letter-spacing:.22px;
        text-transform:uppercase; color: rgba(15,23,42,.82);
      }
      .role-pill{
        font-size:12px; padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.85);
      }
      /* EVENTS (NEW) */
      .events-card{
        border:1px solid var(--line);
        border-radius:18px;
        padding:16px;
        background:
          radial-gradient(900px 420px at 20% 10%, rgba(16,185,129,.10), transparent 60%),
          linear-gradient(180deg, rgba(15,23,42,.02), rgba(255,255,255,0));
        box-shadow: 0 18px 45px rgba(15,23,42,.05);
        margin-top:14px;
      }
      .events-head{
        display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
        padding-bottom:10px; border-bottom:1px solid var(--line);
        margin-bottom:12px;
      }
      .events-title{ margin:0; font-size:16px; font-weight:900; letter-spacing:.2px; }
      .events-sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

      .events-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px 0; }
      .events-tab{
        text-decoration:none;
        border:1px solid var(--line);
        background: rgba(255,255,255,.7);
        border-radius:999px;
        padding:8px 12px;
        font-weight:950;
        font-size:12px;
        color: rgba(15,23,42,.85);
      }
      .events-tab.active{
        border-color: rgba(16,185,129,.28);
        background: rgba(16,185,129,.10);
      }

      .ev-list{ display:grid; gap:10px; }
      .ev-item{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.78);
        border-radius:16px;
        padding:12px;
        display:flex;
        gap:12px;
        align-items:flex-start;
        justify-content:space-between;
      }
      .ev-left{ min-width:0; }
      .ev-title{ margin:0; font-weight:950; letter-spacing:.15px; }
      .ev-desc{ margin:8px 0 0 0; color: rgba(15,23,42,.86); line-height:1.55; white-space:pre-wrap; }
      .ev-meta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12px; }
      .pill{
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
        display:inline-flex; align-items:center; gap:8px;
      }
      .pill.green{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
      .pill.blue{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); }
      .pill.gold{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.10); }
      .pill.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
      .ev-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
      .btn-sm{
        padding:8px 10px;
        border-radius:12px;
        font-size:12px;
        font-weight:950;
        border:1px solid var(--line);
        background: rgba(255,255,255,.75);
        text-decoration:none;
        cursor:pointer;
      }
      .btn-sm.primary{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
      .btn-sm.danger{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }

      .notice-inline{
        border:1px solid rgba(148,163,184,.25);
        background: rgba(148,163,184,.10);
        border-radius:14px;
        padding:12px;
        color: rgba(15,23,42,.86);
        line-height:1.55;
      }
      .notice-inline.ok{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.10); }
      .notice-inline.err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
      details.ev-past summary{ cursor:pointer; font-weight:950; }
      details.ev-past{ border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:12px; background: rgba(255,255,255,.65); }

      /* Enhanced Profile section */
      .enhanced-card{
        border:1px solid var(--line);
        border-radius:18px;
        padding:16px;
        background:
          radial-gradient(900px 420px at 20% 10%, rgba(245,158,11,.10), transparent 60%),
          linear-gradient(180deg, rgba(15,23,42,.02), rgba(255,255,255,0));
        box-shadow: 0 18px 45px rgba(15,23,42,.05);
        margin-top:14px;
      }
      .enhanced-head{
        display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
        padding-bottom:10px; border-bottom:1px solid var(--line);
        margin-bottom:12px;
      }
      .enhanced-title{ margin:0; font-size:16px; font-weight:900; letter-spacing:.2px; }
      .enhanced-sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

      .enhanced-groups{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
      @media(max-width:900px){ .enhanced-groups{ grid-template-columns:1fr; } }

      .enhanced-group{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.65);
        border-radius:16px;
        padding:12px;
      }
      .enhanced-group-head{
        display:flex; align-items:center; justify-content:space-between; gap:10px;
        padding-bottom:10px; margin-bottom:10px;
        border-bottom:1px solid rgba(148,163,184,.18);
      }
      .enhanced-group-title{
        margin:0; font-size:13px; font-weight:950; letter-spacing:.25px;
        text-transform:uppercase; color: rgba(15,23,42,.85);
      }
      .enhanced-chip{
        font-size:11px; font-weight:900;
        padding:4px 8px; border-radius:999px;
        border:1px solid rgba(148,163,184,.20);
        background: rgba(148,163,184,.10);
        color: rgba(15,23,42,.72);
      }
      .enhanced-list{ display:grid; gap:10px; }
      .enhanced-item{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.78);
        border-radius:14px;
        padding:12px;
      }
      .enhanced-k{ font-size:12px; color: var(--muted); margin:0 0 6px 0; }
      .enhanced-v{
        margin:0; font-weight:800; line-height:1.55;
        color: rgba(15,23,42,.95);
        white-space:pre-wrap;
      }
      .enhanced-empty{ color: var(--muted); line-height:1.6; font-size:13px; }

      /* FAQs */
      .faq-card{
        border:1px solid var(--line);
        border-radius:18px;
        padding:16px;
        background:
          radial-gradient(900px 420px at 80% 10%, rgba(59,130,246,.10), transparent 60%),
          linear-gradient(180deg, rgba(15,23,42,.02), rgba(255,255,255,0));
        box-shadow: 0 18px 45px rgba(15,23,42,.05);
        margin-top:14px;
      }
      .faq-head{
        display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
        padding-bottom:10px; border-bottom:1px solid var(--line);
        margin-bottom:12px;
      }
      .faq-title{ margin:0; font-size:16px; font-weight:900; letter-spacing:.2px; }
      .faq-sub{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
      .faq-pill{
        font-size:12px; font-weight:900;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
      }
      .faq-pill.pro{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); }
      .faq-pill.starter{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.10); }
      .faq-list{ display:grid; gap:10px; }
      .faq-item{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.78);
        border-radius:14px;
        padding:12px;
      }
      .faq-qrow{
        display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;
        margin-bottom:8px;
      }
      .faq-q{ margin:0; font-weight:950; letter-spacing:.1px; color: rgba(15,23,42,.92); }
      .faq-a{ margin:0; color: rgba(15,23,42,.92); line-height:1.6; white-space:pre-wrap; }
      .faq-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px; }
      .faq-chip{
        display:inline-flex; align-items:center; justify-content:center;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        border-radius:999px;
        padding:4px 8px;
        font-weight:900;
        color: rgba(15,23,42,.80);
      }
      .faq-chip.pin{ border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }

/* DASHBOARD IMPORTS */

            .stat-row{
              display:flex;
              align-items:center;
              justify-content:space-between;
              gap:12px;
              padding:10px 12px;
              border:1px solid var(--line);
              border-radius:14px;
              background: rgba(255,255,255,.72);
            }
            .stat-left{min-width:0;}
            .stat-k{font-size:12px; color:var(--muted); margin:0 0 3px 0;}
            .stat-v{margin:0; font-weight:950; letter-spacing:.2px;}
            .inspect{
              width:34px; height:34px;
              display:inline-flex;
              align-items:center;
              justify-content:center;
              border-radius:12px;
              border:1px solid rgba(59,130,246,.25);
              background: rgba(59,130,246,.10);
              text-decoration:none;
              flex:0 0 auto;
            }
            .inspect svg{width:18px; height:18px;}

        .module-card{
          border:1px solid var(--line);
          border-radius:16px;
          background: rgba(255,255,255,.75);
          box-shadow: 0 14px 40px rgba(15,23,42,.06);
          padding: 16px;
          display:flex;
          gap:12px;
          align-items:flex-start;
        }
        .module-ico{
          width:40px; height:40px; border-radius:14px;
          display:flex; align-items:center; justify-content:center;
          border:1px solid rgba(59,130,246,.22);
          background: rgba(59,130,246,.10);
          flex:0 0 auto;
        }
        .module-title{ margin:0; font-size:16px; }
        .module-desc{ margin:6px 0 0 0; color:var(--muted); line-height:1.6; }
        .module-meta{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
        .module-pill{
          font-size:12px; padding:6px 10px; border-radius:999px;
          border:1px solid rgba(15,23,42,.10);
          background: rgba(15,23,42,.04);
          color: rgba(15,23,42,.85);
        }
        .module-pill.locked{
          border-color: rgba(148,163,184,.35);
          background: rgba(148,163,184,.12);
          color: rgba(15,23,42,.75);
        }
        .module-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
        .module-card.locked{
          background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.55));
          opacity: .98;
        }
        .module-card.locked .module-ico{
          border-color: rgba(148,163,184,.35);
          background: rgba(148,163,184,.14);
        }
/* CONGREGATION MEMBERS IMPORT */
        .member-table{
          width:100%;
          border-collapse:separate;
          border-spacing:0;
          overflow:hidden;
          border:1px solid var(--line);
          border-radius:16px;
          background: rgba(255,255,255,.78);
        }
        .member-table th, .member-table td{
          text-align:left;
          padding:12px 12px;
          border-bottom:1px solid rgba(148,163,184,.20);
          vertical-align:middle;
        }
        .member-table th{
          font-size:12px;
          text-transform:uppercase;
          letter-spacing:.12em;
          color: var(--muted);
          background: rgba(15,23,42,.03);
        }
        .member-table tr:last-child td{ border-bottom:none; }
        .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
        .pill{
          display:inline-flex; align-items:center; gap:8px;
          font-size:12px; font-weight:950;
          padding:6px 10px; border-radius:999px;
          border:1px solid rgba(15,23,42,.10);
          background: rgba(15,23,42,.04);
          color: rgba(15,23,42,.86);
          white-space:nowrap;
        }
        .pill.green{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
        .pill.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
        .pill.blue{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); }
        .inspect{
          width:34px; height:34px;
          display:inline-flex;
          align-items:center; justify-content:center;
          border-radius:12px;
          border:1px solid rgba(59,130,246,.25);
          background: rgba(59,130,246,.10);
          text-decoration:none;
        }
        .inspect svg{ width:18px; height:18px; }
        .pager{
          display:flex; gap:10px; flex-wrap:wrap; align-items:center;
          justify-content:space-between;
          margin-top:14px;
        }
        .pager .muted{ font-size:13px; }
        .pager-actions{ display:flex; gap:10px; flex-wrap:wrap; }
        .btn-mini{
          padding:8px 10px;
          border-radius:12px;
          font-size:12px;
          font-weight:950;
          border:1px solid var(--line);
          background: rgba(255,255,255,.75);
          text-decoration:none;
          cursor:pointer;
        }
        @media(max-width:720px){
          .hide-sm{ display:none; }
        }

/* churchgoer_profile import */
      .profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
      @media(max-width: 900px){ .profile-grid{ grid-template-columns: 1fr; } }
      .profile-top{
        display:flex;
        gap:12px;
        align-items:center;
        flex-wrap:wrap;
      }
      .avatar{
        width:54px; height:54px;
        border-radius:18px;
        border:1px solid var(--line);
        background: rgba(148,163,184,.10);
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
      }
      .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
      .avatar svg{ width:22px; height:22px; opacity:.7; }
      .pill{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
      }
      .pill.green{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
      .pill.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
      .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }

      /* LADDER + BADGES (added) */
      .ladder-wrap{ margin-top:12px; }
      .ladder-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
      @media(max-width: 900px){ .ladder-grid{ grid-template-columns: 1fr; } }
      .stat-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
      .big-rank{
        font-weight:950;
        font-size:18px;
      }
      .bar{
        width:100%;
        height:12px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.06);
        overflow:hidden;
      }
      .bar > div{
        height:100%;
        width:0%;
        background: rgba(59,130,246,.55);
      }
/* === BADGES: clean professional layout, no skinny columns, no ugly hyphen splits === */

/* === BADGES: responsive grid that NEVER overflows === */
.badge-grid{
  display:grid;
  gap:12px;
  width:100%;
  max-width:100%;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width: 640px){
  .badge-grid{ grid-template-columns: 1fr; }
}
.badge{
  box-sizing:border-box;
  min-width:0;                 /* CRITICAL: allows grid item to shrink */
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  border-radius:16px;
  padding:14px;
  min-height:140px;
  overflow:hidden;
}

.badge-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;                 /* CRITICAL for flex children wrapping */
}

.icon-pill{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.80);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}

.icon-pill svg{
  width:18px;
  height:18px;
  display:block;
}

.icon-pill .emoji-icon{
  font-size:16px;
  line-height:1;
}

.icon-pill .text-icon{
  font-size:12px;
  font-weight:950;
  line-height:1;
}
.icon-pill.ic-checkin{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color: rgba(5,150,105,.95);
}

.icon-pill.ic-event{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25);
  color: rgba(37,99,235,.95);
}

.icon-pill.ic-voice{
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.25);
  color: rgba(109,40,217,.95);
}

.icon-pill.ic-volunteer{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
  color: rgba(217,119,6,.95);
}

.icon-pill.ic-rating{
  background: rgba(236,72,153,.12);
  border-color: rgba(236,72,153,.25);
  color: rgba(219,39,119,.95);
}

.icon-pill.ic-leadership{
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.25);
  color: rgba(2,132,199,.95);
}

.icon-pill.ic-milestone{
  background: rgba(234,179,8,.14);
  border-color: rgba(234,179,8,.28);
  color: rgba(202,138,4,.95);
}

.icon-pill.ic-rank{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.30);
  color: rgba(51,65,85,.95);
}
.badge-body{ min-width:0; }

.badge .name,
.badge .desc,
.badge .meta{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;      /* long tokens won’t force overflow */
  word-break:normal;
  hyphens:none;
}

.badge .name{
  font-weight:950;
  font-size:14px;
  line-height:1.2;
}

.badge .desc{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color: rgba(15,23,42,.70);
}

.badge .meta{
  margin-top:10px;
  font-size:11px;
  color: rgba(15,23,42,.55);
  line-height:1.35;
}
/* CRITICAL: allow grid children to shrink so nothing overflows */
.ladder-grid { min-width: 0; }
.ladder-grid > .card { min-width: 0; }

/* Also ensure inner grids don't force overflow */
.badge-grid { min-width: 0; }
.badge { min-width: 0; max-width: 100%; }
.badge-head, .badge-body { min-width: 0; }

/* If any long token still tries to blow width, this guarantees it can't */
.badge .name, .badge .desc, .badge .meta { min-width: 0; }
.icon-pill svg{
  width:18px;
  height:18px;
  display:block;
}

.icon-pill .emoji-icon{
  font-size:16px;
  line-height:1;
}

.icon-pill .text-icon{
  font-size:12px;
  font-weight:950;
  line-height:1;
}
.icon-pill svg{
  width:18px;
  height:18px;
  display:block;
}

.icon-pill .emoji-icon{
  font-size:16px;
  line-height:1;
}

.icon-pill .text-icon{
  font-size:12px;
  font-weight:950;
  line-height:1;
}
.badge{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  border-radius:18px;
  padding:14px;
  min-height:140px;
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

.badge:hover{
  border-color: rgba(59,130,246,.22);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transform: translateY(-1px);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.icon-pill{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.70);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.icon-pill svg{
  width:18px;
  height:18px;
  display:block;
}

.icon-pill .emoji-icon{
  font-size:16px;
  line-height:1;
}

.icon-pill .text-icon{
  font-size:12px;
  font-weight:950;
  line-height:1;
}

/* Color themes (subtle, professional) */
/* DEFAULT: rainbow pill for anything not categorized */
.icon-pill.icon-default{
  border: 1px solid rgba(15,23,42,.14);
  color: #0f172a; /* icon stroke color */

  background: linear-gradient(
    135deg,
    rgba(239,68,68,.22),
    rgba(245,158,11,.22),
    rgba(234,179,8,.22),
    rgba(34,197,94,.22),
    rgba(6,182,212,.22),
    rgba(59,130,246,.22),
    rgba(139,92,246,.22),
    rgba(236,72,153,.22)
  );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 6px 14px rgba(15,23,42,.10);
}
.icon-pill.icon-checkin{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.22);
  color: rgba(37,99,235,.95);
}

.icon-pill.icon-join{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.22);
  color: rgba(5,150,105,.95);
}

.icon-pill.icon-rsvp{
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.22);
  color: rgba(79,70,229,.95);
}

.icon-pill.icon-feedback{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.22);
  color: rgba(180,83,9,.98);
}

.icon-pill.icon-rating{
  background: rgba(236,72,153,.12);
  border-color: rgba(236,72,153,.22);
  color: rgba(190,24,93,.98);
}

.icon-pill.icon-volunteer{
  background: rgba(20,184,166,.12);
  border-color: rgba(20,184,166,.22);
  color: rgba(13,148,136,.98);
}

.icon-pill.icon-leadership{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.28);
  color: rgba(51,65,85,.98);
}

.icon-pill.icon-milestone{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.26);
  color: rgba(161,98,7,.98);
}

.icon-pill.icon-rank{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.24);
  color: rgba(30,64,175,.98);
}
/* Palette fallback: 12 distinct "rainbow spread" themes */
.icon-pill.icon-pal-0 { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.26);  color: rgba(185,28,28,.98); }
.icon-pill.icon-pal-1 { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.28); color: rgba(180,83,9,.98); }
.icon-pill.icon-pal-2 { background: rgba(234,179,8,.16);  border-color: rgba(234,179,8,.28);  color: rgba(161,98,7,.98); }
.icon-pill.icon-pal-3 { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.26);  color: rgba(21,128,61,.98); }
.icon-pill.icon-pal-4 { background: rgba(20,184,166,.14); border-color: rgba(20,184,166,.26); color: rgba(13,148,136,.98); }
.icon-pill.icon-pal-5 { background: rgba(6,182,212,.14);  border-color: rgba(6,182,212,.26);  color: rgba(8,145,178,.98); }
.icon-pill.icon-pal-6 { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.26); color: rgba(30,64,175,.98); }
.icon-pill.icon-pal-7 { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.26); color: rgba(67,56,202,.98); }
.icon-pill.icon-pal-8 { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.26); color: rgba(109,40,217,.98); }
.icon-pill.icon-pal-9 { background: rgba(236,72,153,.14); border-color: rgba(236,72,153,.26); color: rgba(190,24,93,.98); }
.icon-pill.icon-pal-10{ background: rgba(244,114,182,.14); border-color: rgba(244,114,182,.26); color: rgba(190,18,60,.98); }
.icon-pill.icon-pal-11{ background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.30); color: rgba(51,65,85,.98); }

      /* FIRST FOLLOW-UP (new feature) */
      .follow-wrap{ margin-top:12px; }
      .follow-card{
        border:1px solid rgba(245,158,11,.30);
        background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
        box-shadow: 0 18px 40px rgba(245,158,11,.10);
        border-radius: 18px;
        padding: 16px;
      }
      .follow-row{ display:grid; gap:10px; margin-top:10px; }
      .follow-in{
        width:100%;
        border:1px solid rgba(15,23,42,.10);
        border-radius:14px;
        padding:12px;
        background: rgba(255,255,255,.92);
        min-height:110px;
        resize: vertical;
      }
      .notice-inline{ border:1px solid rgba(148,163,184,.25); background: rgba(148,163,184,.10); border-radius:14px; padding:12px; line-height:1.55; }
      .notice-inline.err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
      .notice-inline.ok{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.08); color: rgba(5,150,105,.95); }

/* volunteer imports */
      .vm-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:12px; }
      @media(max-width: 980px){ .vm-grid{ grid-template-columns: 1fr; } }

      .vm-card{
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(255,255,255,.78);
        box-shadow: 0 14px 40px rgba(15,23,42,.06);
        padding: 16px;
      }
      .pill{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
      }
      .pill.green{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
      .pill.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }
      .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
      .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
      @media(max-width:700px){ .row{ grid-template-columns: 1fr; } }
      .field label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px 0; letter-spacing:.03em; }
      .field input, .field textarea, .field select{
        width:100%;
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px 12px;
        background: rgba(255,255,255,.88);
        box-sizing:border-box;
        max-width:100%;
      }
      .field textarea{ min-height: 90px; resize: vertical; }
      .table{
        width:100%;
        border-collapse: separate;
        border-spacing: 0;
        overflow:hidden;
        border:1px solid var(--line);
        border-radius:14px;
        background: rgba(255,255,255,.85);
      }
      .table th, .table td{
        text-align:left;
        padding:10px 12px;
        border-bottom:1px solid rgba(15,23,42,.08);
        vertical-align: top;
        font-size: 13px;
      }
      .table th{ font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
      .table tr:last-child td{ border-bottom:0; }
      .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
      .muted-sm{ color:var(--muted); font-size:13px; line-height:1.6; }

      /* =========================================================
         MOBILE ONLY FIXES (styling/flow only)
         - Kill page-level horizontal overflow
         - Ensure flex/grid children can shrink (min-width:0)
         - Make action buttons stack cleanly
         - Make tables scroll INSIDE their card (not the page)
         - Allow long text to wrap without pushing width
         Desktop remains unchanged.
         ========================================================= */
      @media (max-width: 520px){
        html, body{ overflow-x:hidden; }
        .section, .container{ overflow-x:hidden; }

        .vm-grid{ gap:10px; width:100%; max-width:100%; }
	.vm-grid{ min-width:0; }
        .vm-card{ padding:14px; width:100%; max-width:100%; box-sizing:border-box; overflow-x:hidden; }

        /* critical: allow children in flex rows to shrink instead of forcing overflow */
        .vm-card *{ min-width:0; }

        /* Ensure any grid rows inside a card become single-column on mobile */
        .vm-card .row{ grid-template-columns: 1fr !important; }

        /* Header actions ... full width buttons */
        .actions{
          width:100%;
          justify-content:stretch;
        }
        .actions > a.btn,
        .actions > form,
        .actions > form > button.btn{
          width:100%;
        }
        .actions > a.btn,
        .actions > form > button.btn{
          text-align:center;
        }

/* MOBILE: turn tables into stacked rows (NO horizontal scroll) */
.table{
  width:100%;
  max-width:100%;
  display:block;         /* wrapper */
  overflow:visible;      /* no scrollbars */
  border-radius:14px;
}

.table thead{ display:none; } /* hide headers on mobile */

.table tbody{
  display:block;
  width:100%;
}

.table tr{
  display:block;
  width:100%;
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.table tr:last-child{
  border-bottom:0;
}

.table td{
  display:block;
  width:100%;
  padding:6px 0;
  border-bottom:0 !important;
  white-space:normal;         /* critical */
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Label each "column" */
.table td:nth-child(1)::before{ content:"Role";   display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.table td:nth-child(2)::before{ content:"Slots";  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.table td:nth-child(3)::before{ content:"Status"; display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.table td:nth-child(4)::before{ content:""; display:none; }

/* Keep the action button aligned nicely */
.table td:nth-child(4){
  text-align:left !important;
  padding-top:10px;
}
.table td:nth-child(4) a.btn{
  width:100%;
  text-align:center;
}
/* If a row only has 3 tds (Signups), label accordingly */
.table tr td:nth-child(3):last-child::before{ content:"Action"; } /* when 3rd is last */
.table tr td:nth-child(2)::before{ content:"Status"; }
.table tr td:nth-child(1)::before{ content:"Person"; }

        /* Long identity/email lines ... wrap, never force width */
        .muted-sm{
          overflow-wrap:anywhere;
          word-break:break-word;
        }
        .mono{
          overflow-wrap:anywhere;
          word-break:break-word;
          white-space:normal;
        }

        /* Safety: prevent any single button/input from exceeding viewport */
        button, input, select, textarea, a.btn{
          max-width:100%;
          box-sizing:border-box;
        }
      }

/* church qr import */
      .qr-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:12px; }
      @media(max-width: 980px){ .qr-grid{ grid-template-columns: 1fr; } }

      .qr-card{
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(255,255,255,.78);
        box-shadow: 0 14px 40px rgba(15,23,42,.06);
        padding: 16px;
      }
      .qr-box{
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 14px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.85);
        border-radius: 16px;
      }
      .qr-box img{
        width: 100%;
        max-width: 360px;
        height: auto;
        border-radius: 14px;
        border: 1px solid rgba(15,23,42,.08);
      }
      .kv{ line-height:1.85; }
      .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
      .pill{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
      }
      .pill.green{ border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.10); }
      .pill.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }

      .cta{
        border:1px solid rgba(217,119,6,.35);
        background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,.06));
        box-shadow: 0 18px 40px rgba(245,158,11,.10);
        border-radius: 16px;
        padding: 16px;
      }
      .cta h4{ margin:0 0 6px 0; font-size:16px; }
      .cta p{ margin:0; color:var(--muted); line-height:1.6; }
      .cta-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

      /* PRO module */
      .pro-wrap{ margin-top:12px; }
      .pro-card{
        position:relative;
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(255,255,255,.78);
        box-shadow: 0 14px 40px rgba(15,23,42,.06);
        padding: 16px;
        overflow:hidden;
      }
      .pro-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
      .pro-title{ margin:0; font-size:16px; }
      .pro-sub{ margin:6px 0 0 0; color:var(--muted); line-height:1.6; }

      .pro-toggle{
        display:flex; align-items:center; gap:10px;
        padding:8px 10px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        font-weight:950;
        font-size:12px;
        user-select:none;
      }
      .switch{
        width:44px; height:24px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.18);
        background: rgba(148,163,184,.35);
        position:relative;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.40);
      }
      .knob{
        width:20px; height:20px;
        border-radius:999px;
        background: rgba(255,255,255,.95);
        position:absolute; top:1px; left:2px;
        box-shadow: 0 10px 22px rgba(15,23,42,.14);
        transition: left .18s ease, background .18s ease, box-shadow .18s ease;
      }
      .pro-on .switch{
        border-color: rgba(217,119,6,.45);
        background: linear-gradient(180deg, rgba(245,158,11,.55), rgba(245,158,11,.22));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 10px 28px rgba(245,158,11,.14);
      }
      .pro-on .knob{ left:21px; background: rgba(255,255,255,.98); }
      .pro-off .switch{ opacity:.9; }
      .pro-off .knob{ background: rgba(255,255,255,.92); }

      .stats-grid{
        margin-top:12px;
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        gap:10px;
      }
      @media(max-width: 980px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } }
      .stat{
        border:1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.75);
        border-radius:14px;
        padding:12px;
      }
      .stat .k{ font-size:12px; font-weight:950; color: rgba(15,23,42,.70); }
      .stat .v{ font-size:18px; font-weight:950; margin-top:6px; }
      .stat .h{ font-size:12px; color: var(--muted); margin-top:4px; line-height:1.45; }

      .tbl{
        width:100%;
        border-collapse:separate;
        border-spacing:0;
        margin-top:12px;
        overflow:hidden;
        border-radius:14px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.75);
      }
      .tbl th, .tbl td{
        padding:10px 10px;
        border-bottom:1px solid rgba(15,23,42,.08);
        text-align:left;
        font-size:13px;
        vertical-align:top;
      }
      .tbl th{
        font-size:12px;
        letter-spacing:.02em;
        text-transform:uppercase;
        color: rgba(15,23,42,.70);
        background: rgba(15,23,42,.03);
      }
      .tbl tr:last-child td{ border-bottom:0; }

/* Never allow horizontal overflow on this module */
.pro-card, .pro-wrap, .container { overflow-x: hidden; }
.tbl { max-width: 100%; }

/* Mobile: turn the table into stacked rows (no sideways scroll, no clipping) */
@media (max-width: 720px){
  .tbl, .tbl thead, .tbl tbody, .tbl th, .tbl td, .tbl tr { display:block; }
  .tbl thead { display:none; } /* hide header row */
  .tbl tr{
    border-bottom: 1px solid rgba(15,23,42,.08);
    padding: 10px;
  }
  .tbl td{
    border: 0;
    padding: 8px 0;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* show labels on each line using the existing column headers */
  .tbl td::before{
    content: attr(data-label);
    display:block;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(15,23,42,.60);
    margin-bottom: 4px;
  }

  /* timestamps/emails should wrap safely */
  .tbl .mono{ white-space: normal; word-break: break-word; overflow-wrap:anywhere; }
}

      .tag{
        display:inline-flex;
        align-items:center;
        gap:8px;
        font-size:12px;
        font-weight:950;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.85);
      }

      .locked-overlay{
        position:absolute;
        inset:0;
        background: rgba(255,255,255,.60);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display:flex;
        align-items:center;
        justify-content:center;
        padding:16px;
      }
      .locked-box{
        width:100%;
        max-width: 640px;
        border-radius:16px;
        border:1px solid rgba(217,119,6,.35);
        background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.05));
        box-shadow: 0 18px 40px rgba(245,158,11,.10);
        padding: 16px;
      }
      .locked-box h4{ margin:0 0 8px 0; font-size:16px; }
      .locked-box p{ margin:0; color: var(--muted); line-height:1.6; }
      .locked-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

      @media print{
        .no-print{ display:none !important; }
        .qr-card{ box-shadow:none !important; }
        .pro-card{ box-shadow:none !important; }
        body{ background:#fff !important; }
      }

/* enhanced profile import */
        .ep-grid{ display:grid; gap:12px; grid-template-columns: 1fr; }
        .ep-q{
          border:1px solid var(--line);
          border-radius:14px;
          padding:14px;
          background: rgba(255,255,255,.72);
          box-shadow: 0 10px 28px rgba(15,23,42,.05);
        }
        .ep-q.disabled{
          opacity:.55;
          filter:saturate(.7);
        }
        .ep-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
        .ep-label{ margin:0; font-weight:700; }
        .ep-hint{ margin:6px 0 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
        .ep-row{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
        .ep-input{
          width:100%;
          padding:10px 12px;
          border-radius:12px;
          border:1px solid var(--line);
          background: rgba(255,255,255,.9);
          outline:none;
        }
        .ep-toggle{
          display:flex; align-items:center; gap:10px;
          font-size:13px; color: rgba(15,23,42,.85);
          user-select:none;
        }
        .ep-toggle input{ width:18px; height:18px; }
        .ep-actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
        .ep-mini{ font-size:12px; color:var(--muted); }

/* church faq import */
        .faq-shell{
          border:1px solid var(--line);
          border-radius:16px;
          padding:16px;
          background: radial-gradient(1000px 520px at 10% 0%, rgba(245,158,11,.10), transparent 60%),
                      linear-gradient(180deg, rgba(15,23,42,.02), rgba(255,255,255,0));
        }
        .faq-top{
          display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
          padding-bottom:12px; border-bottom:1px solid var(--line);
          margin-bottom:12px;
        }
        .faq-title{ margin:0; font-size:16px; font-weight:950; letter-spacing:.2px; }
        .faq-sub{ margin:6px 0 0 0; color:var(--muted); line-height:1.6; }
        .faq-pill{
          font-size:12px; font-weight:900;
          padding:6px 10px; border-radius:999px;
          border:1px solid rgba(15,23,42,.10);
          background: rgba(15,23,42,.04);
        }
        .faq-pill.pro{
          border-color: rgba(59,130,246,.28);
          background: rgba(59,130,246,.10);
        }
        .faq-pill.starter{
          border-color: rgba(245,158,11,.28);
          background: rgba(245,158,11,.10);
        }

        .faq-alert{
          border:1px solid rgba(148,163,184,.22);
          background: rgba(255,255,255,.78);
          border-radius:14px;
          padding:12px;
          margin-bottom:12px;
        }
        .faq-alert.ok{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.06); }
        .faq-alert.err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); }
        .faq-alert strong{ display:block; margin-bottom:4px; }

        .faq-grid{
          display:grid;
          grid-template-columns: 1.1fr .9fr;
          gap:12px;
        }
        @media(max-width:900px){ .faq-grid{ grid-template-columns: 1fr; } }
        .faq-card{
          border:1px solid rgba(148,163,184,.20);
          background: rgba(255,255,255,.78);
          border-radius:14px;
          padding:14px;
        }
        .faq-card h4{ margin:0 0 8px 0; font-size:14px; }
        .faq-card p{ margin:0; color:var(--muted); line-height:1.6; }

        .faq-form{ display:grid; gap:10px; margin-top:10px; }
        .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        @media(max-width:900px){ .f-row{ grid-template-columns:1fr; } }
        .f label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
        .f input[type="text"], .f textarea, .f select{
          width:100%;
          border:1px solid rgba(148,163,184,.28);
          background: rgba(255,255,255,.92);
          border-radius:12px;
          padding:10px 12px;
          outline:none;
        }
        .f textarea{ min-height:120px; resize:vertical; }
        .f small{ display:block; margin-top:6px; color:var(--muted); line-height:1.5; }

        .faq-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

        .faq-list{ display:grid; gap:10px; margin-top:12px; }
        .faq-item{
          border:1px solid rgba(148,163,184,.18);
          background: rgba(255,255,255,.88);
          border-radius:14px;
          padding:12px;
        }
        .faq-head{
          display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;
        }
        .faq-q{
          font-weight:950;
          margin:0;
          letter-spacing:.1px;
        }
        .faq-meta{
          display:flex; gap:8px; flex-wrap:wrap; align-items:center;
          font-size:12px; color:var(--muted);
        }
        .chip{
          display:inline-flex; align-items:center; justify-content:center;
          border:1px solid rgba(15,23,42,.10);
          background: rgba(15,23,42,.04);
          border-radius:999px;
          padding:4px 8px;
          font-weight:900;
          color: rgba(15,23,42,.85);
        }
        .chip.pin{ border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.08); }
        .faq-a{
          margin:10px 0 0 0;
          color: rgba(15,23,42,.92);
          line-height:1.6;
          white-space:pre-wrap;
        }

        .row-actions{
          display:flex; gap:8px; flex-wrap:wrap; align-items:center;
          margin-top:10px;
        }

        .mini-btn{
          display:inline-flex; align-items:center; gap:6px;
          border:1px solid rgba(148,163,184,.28);
          background: rgba(255,255,255,.88);
          border-radius:10px;
          padding:7px 10px;
          font-size:12px;
          font-weight:900;
          text-decoration:none;
          cursor:pointer;
        }
        .mini-btn svg{ width:14px; height:14px; opacity:.9; }
        .mini-btn.danger{
          border-color: rgba(239,68,68,.30);
          background: rgba(239,68,68,.06);
        }

        details.faq-edit{
          margin-top:10px;
          border-top:1px solid rgba(148,163,184,.18);
          padding-top:10px;
        }
        details.faq-edit summary{
          list-style:none;
          cursor:pointer;
          font-weight:900;
          color: rgba(15,23,42,.86);
        }
        details.faq-edit summary::-webkit-details-marker{ display:none; }
        .muted{ color: var(--muted); }

/* manage events import */
      .ev-wrap{display:grid; gap:14px;}
      .ev-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px;}
      @media(max-width: 980px){ .ev-grid{grid-template-columns:1fr;} }

      .panel{
        border:1px solid var(--line);
        border-radius:18px;
        background: var(--card);
        padding:16px;
        box-shadow: 0 18px 45px rgba(15,23,42,.05);
      }

      .panel.pro{
        background: radial-gradient(1000px 480px at 70% 15%, rgba(59,130,246,.12), transparent 60%),
                    linear-gradient(180deg, rgba(59,130,246,.05), rgba(255,255,255,0));
      }
      .panel.starter{
        background: radial-gradient(1000px 480px at 70% 15%, rgba(245,158,11,.12), transparent 60%),
                    linear-gradient(180deg, rgba(245,158,11,.05), rgba(255,255,255,0));
      }

      .pill{
        font-size:12px; font-weight:900;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
        display:inline-flex; align-items:center; gap:8px;
      }
      .pill.blue{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); }
      .pill.gold{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.10); }
      .pill.muted{ border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.10); }

      .tabs{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 10px 0;}
      .tab{
        text-decoration:none;
        border:1px solid var(--line);
        background: rgba(255,255,255,.7);
        border-radius:999px;
        padding:8px 12px;
        font-weight:900;
        font-size:12px;
        color: rgba(15,23,42,.85);
      }
      .tab.active{
        border-color: rgba(59,130,246,.28);
        background: rgba(59,130,246,.10);
      }

      .ev-list{display:grid; gap:10px;}
      .ev-item{
        border:1px solid rgba(148,163,184,.18);
        background: rgba(255,255,255,.78);
        border-radius:16px;
        padding:12px;
        display:flex;
        gap:12px;
        align-items:flex-start;
        justify-content:space-between;
      }
      .ev-item:hover{ box-shadow: 0 14px 35px rgba(15,23,42,.06); }
      .ev-left{min-width:0;}
      .ev-title{ margin:0; font-weight:950; letter-spacing:.15px; }
      .ev-meta{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12px; }
      .ev-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
      .btn-sm{
        padding:8px 10px;
        border-radius:12px;
        font-size:12px;
        font-weight:900;
        border:1px solid var(--line);
        background: rgba(255,255,255,.75);
        text-decoration:none;
      }
      .btn-sm.primary{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); }
      .btn-sm.danger{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: rgba(127,29,29,.95); }

      .form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
      @media(max-width:900px){ .form-grid{grid-template-columns:1fr;} }

      label{font-size:12px; font-weight:900; display:block; margin:0 0 6px 0; color: rgba(15,23,42,.78);}
      .in, textarea, select{
        width:100%;
        border:1px solid var(--line);
        border-radius:14px;
        padding:10px 12px;
        background: rgba(255,255,255,.9);
        outline:none;
      }
      textarea{ min-height:110px; resize:vertical; }

      .split{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
      .muted{ color: var(--muted); }
      .small{ font-size:12px; }

      .rsvp-table{
        width:100%;
        border-collapse:separate;
        border-spacing:0;
        overflow:hidden;
        border:1px solid rgba(148,163,184,.18);
        border-radius:14px;
        background: rgba(255,255,255,.78);
      }
      .rsvp-table th, .rsvp-table td{
        padding:10px 12px;
        border-bottom:1px solid rgba(148,163,184,.16);
        vertical-align:top;
        text-align:left;
        font-size:13px;
      }
      .rsvp-table th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(15,23,42,.70); background: rgba(148,163,184,.10); }
      .rsvp-table tr:last-child td{ border-bottom:none; }
      .right{text-align:right;}
      .pager{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
      .pager a{ text-decoration:none; }

/* hierarchy import */
      .hg-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:12px; }
      @media(max-width: 980px){ .hg-grid{ grid-template-columns: 1fr; } }

      .hg-card{
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(255,255,255,.78);
        box-shadow: 0 14px 40px rgba(15,23,42,.06);
        padding: 16px;
        overflow:hidden;
      }

      .muted-sm{ color:var(--muted); font-size:13px; line-height:1.6; }
      .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
      @media(max-width:700px){ .row{ grid-template-columns: 1fr; } }

      .field label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px 0; letter-spacing:.03em; }
      .field input{
        width:100%;
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px 12px;
        background: rgba(255,255,255,.88);
        box-sizing:border-box;
        max-width:100%;
      }

      .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

      .chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:8px 10px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        font-size:13px;
        user-select:none;
        cursor:grab;
        max-width:100%;
      }
      .chip strong{ font-weight:950; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .chip small{ color:var(--muted); font-size:12px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .chip:active{ cursor:grabbing; }

      .members-wrap{ display:flex; gap:10px; flex-wrap:wrap; }
      .members-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
      .search{
        flex:1;
        min-width: 180px;
      }
      .search input{
        width:100%;
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px 12px;
        background: rgba(255,255,255,.88);
      }

      .ladder{
        display:flex;
        flex-direction:column;
        gap:12px;
      }

      .role-card{
        border:1px solid rgba(15,23,42,.10);
        border-radius:16px;
        background: rgba(255,255,255,.75);
        padding:12px;
      }
      .role-head{
        display:flex;
        gap:10px;
        align-items:flex-start;
        justify-content:space-between;
        flex-wrap:wrap;
      }
      .role-title{ margin:0; font-size:16px; }
      .role-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
      .pill{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.86);
      }
      .pill.off{ border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.12); color: rgba(15,23,42,.75); }

      .slot-grid{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:10px;
        margin-top:10px;
      }
      @media(max-width: 700px){
        .slot-grid{ grid-template-columns: 1fr; }
      }

      .slot{
        border:1px dashed rgba(15,23,42,.22);
        background: rgba(255,255,255,.70);
        border-radius:14px;
        padding:10px;
        min-height:56px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
      }
      .slot.filled{
        border-style:solid;
        border-color: rgba(59,130,246,.25);
        background: rgba(59,130,246,.06);
      }
      .slot-left{ min-width:0; }
      .slot-k{ font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px 0; }
      .slot-v{ margin:0; font-weight:950; max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .slot-sub{ margin:0; font-size:12px; color:var(--muted); max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      .slot-actions{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
      .mini{
        border:1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.75);
        border-radius:12px;
        padding:8px 10px;
        font-size:12px;
        cursor:pointer;
      }
      .mini:hover{ background: rgba(255,255,255,.92); }

      .drop-hint{
        font-size:12px;
        color:var(--muted);
        margin-top:8px;
      }

      .dragging{
        opacity:.55;
      }
      .drop-target{
        outline: 2px solid rgba(59,130,246,.35);
        outline-offset: 2px;
      }

      /* Mobile comfort */
      @media(max-width: 520px){
        html, body{ overflow-x:hidden; }
        .section, .container{ overflow-x:hidden; }
        .hg-card{ padding:14px; }
        .role-card{ padding:12px; }
        .chip{ width:100%; justify-content:space-between; }
      }

/* giving section import */
      .giving-wrap{
        border:1px solid var(--line);
        border-radius:18px;
        background: rgba(255,255,255,.75);
        box-shadow: 0 18px 50px rgba(15,23,42,.07);
        padding: 16px;
      }
      .giving-grid{
        display:grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      .giving-row{
        border:1px solid rgba(15,23,42,.10);
        border-radius: 16px;
        background: rgba(255,255,255,.70);
        padding: 12px;
        display:grid;
        grid-template-columns: 140px 1fr 110px;
        gap: 10px;
        align-items: start;
      }
      @media (max-width: 880px){
        .giving-row{ grid-template-columns: 1fr; }
      }
      .giving-left{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
      }
      .giving-name{
        font-weight: 950;
        letter-spacing: .2px;
      }
      .giving-fields label{
        font-size:12px;
        color: var(--muted);
        display:block;
        margin: 0 0 6px 0;
      }
      .giving-fields .field{
        width:100%;
        border:1px solid rgba(15,23,42,.12);
        border-radius: 12px;
        padding: 10px 12px;
        background: rgba(255,255,255,.92);
        outline: none;
      }
      .giving-hint{
        margin-top: 6px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
      }
      .giving-right{
        display:flex;
        flex-direction:column;
        gap:10px;
        align-items:flex-end;
      }
      @media (max-width: 880px){
        .giving-right{ align-items:stretch; }
      }
      .toggle{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:13px;
        color: rgba(15,23,42,.85);
        user-select:none;
      }
      .mini{
        width:100%;
        border:1px solid rgba(15,23,42,.12);
        border-radius: 12px;
        padding: 10px 12px;
        background: rgba(255,255,255,.92);
      }
      .actions{
        margin-top: 14px;
        display:flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items:center;
      }
      .subhead{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
      }
      .subhead .muted{ font-size: 13px; }

/* ai discovery import */
      .ai-wrap{
        border:1px solid rgba(217,119,6,.40);
        background: radial-gradient(900px 560px at 15% 10%, rgba(245,158,11,.18), transparent 55%),
                    radial-gradient(800px 520px at 85% 0%, rgba(59,130,246,.10), transparent 60%),
                    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70));
        box-shadow: 0 26px 90px rgba(245,158,11,.12);
        border-radius: 18px;
        padding: 16px;
      }
      .ai-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        flex-wrap:wrap;
      }
      .ai-title{ margin:0; font-size:18px; }
      .ai-sub{ margin:6px 0 0 0; color:var(--muted); line-height:1.65; }
      .ai-actions{ display:flex; gap:10px; flex-wrap:wrap; }
      .ai-grid{
        margin-top:14px;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:12px;
      }
      @media(max-width: 980px){ .ai-grid{ grid-template-columns:1fr; } }

      .ai-card{
        border:1px solid rgba(217,119,6,.22);
        background: rgba(255,255,255,.78);
        border-radius: 16px;
        padding: 14px;
        overflow:hidden;
      }
      .ai-card h3{ margin:0; font-size:15px; }
      .ai-card p{ margin:6px 0 0 0; color:var(--muted); line-height:1.6; font-size:13px; }

      .ai-box{
        margin-top:12px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.85);
        border-radius: 14px;
        padding: 12px;
      }
      .ai-box textarea{
        width:100%;
        min-height: 260px;
        border:0;
        outline:none;
        resize: vertical;
        background: transparent;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.55;
      }

      .ai-meta{
        margin-top:10px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        align-items:center;
        font-size:12px;
        color: var(--muted);
      }
      .pill{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:950;
        padding:6px 10px; border-radius:999px;
        border:1px solid rgba(217,119,6,.25);
        background: rgba(245,158,11,.10);
        color: rgba(15,23,42,.86);
      }
      .pill.blue{
        border-color: rgba(59,130,246,.25);
        background: rgba(59,130,246,.10);
      }
      .card-actions{
        margin-top:10px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
      }

/* ========== UPGRADE PAGE: consistency helpers (LIGHT) ========== */

.upgrade-notice{ margin-top:14px; }

.upgrade-account-card{ margin-bottom:16px; }
.upgrade-account-lines{ line-height:1.8; }

.upgrade-form-full{ width:100%; }
.upgrade-btn-full{ width:100%; }

.btn.is-disabled{
  opacity:.65;
  cursor:not-allowed;
}

.upgrade-kit-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

/* This replaces the inline green success badge */
.badge.upgrade-badge-success{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: rgba(15,23,42,.90);
}

/* Help section spacing consistency */
.upgrade-help-title{ margin:0 0 6px 0; }

.upgrade-help-actions{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Make action buttons feel uniform and reduce “clutter” */
.price-actions .btn,
.upgrade-help-actions .btn{
  min-height:44px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:950;
}

/* Improve readability of tiny suffix */
.price small{
  opacity:.75;
  font-weight:800;
}
/* =========================
   UPGRADE PAGE FIXES (LIGHT)
   ========================= */

.upgrade .upgrade-account-lines{
  color: rgba(15,23,42,.75); /* slate-900 toned down */
}

.upgrade .price-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 45px rgba(15,23,42,.06);
}

.upgrade .price-card.featured{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(59,130,246,.10), transparent 60%),
    #ffffff;
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 22px 55px rgba(59,130,246,.08);
}

.upgrade .price-top .p,
.upgrade .features{
  color: rgba(15,23,42,.75);
}

/* Badges stay clean pills in light */
.upgrade .price-top .badge{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.85);
}

/* Buttons */
.upgrade .price-actions .btn{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.90);
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

.upgrade .price-actions .btn:hover{
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.upgrade .price-actions .btn.is-disabled{
  opacity:.55;
}

/* Success badge */
.upgrade .upgrade-badge-success{
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: rgba(22,101,52,.95);
}
/* =========================
   UPGRADE PAGE FIXES (DARK)
   Scope to dark mode ONLY
   ========================= */
html.dark .upgrade .upgrade-account-lines,
body.dark .upgrade .upgrade-account-lines{ color: rgba(226,232,240,.80); }

html.dark .upgrade .price-card,
body.dark .upgrade .price-card{
  background: rgba(2,6,23,.55);
  border-color: rgba(148,163,184,.16);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
html.dark .upgrade .price-card.featured,
body.dark .upgrade .price-card.featured{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(59,130,246,.16), transparent 60%),
    rgba(2,6,23,.62);
  border-color: rgba(59,130,246,.28);
}

html.dark .upgrade .price-top .p,
html.dark .upgrade .features,
body.dark .upgrade .price-top .p,
body.dark .upgrade .features{ color: rgba(226,232,240,.78); }

html.dark .upgrade .price-top .badge,
body.dark .upgrade .price-top .badge{
  border-color: rgba(148,163,184,.22);
  background: rgba(148,163,184,.10);
  color: rgba(226,232,240,.86);
}

html.dark .upgrade .price-actions .btn,
body.dark .upgrade .price-actions .btn{
  background: rgba(15,23,42,.55);
  border-color: rgba(148,163,184,.18);
  color: rgba(226,232,240,.90);
}
html.dark .upgrade .price-actions .btn.is-disabled,
body.dark .upgrade .price-actions .btn.is-disabled{ opacity:.60; }

html.dark .upgrade .upgrade-badge-success,
body.dark .upgrade .upgrade-badge-success{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.12);
  color: rgba(226,232,240,.92);
}


/* =========================
   UPGRADE PAGE FIXES (LIGHT)
   Scope to light mode ONLY
   ========================= */
html:not(.dark) .upgrade .upgrade-account-lines,
body:not(.dark) .upgrade .upgrade-account-lines{ color: rgba(15,23,42,.70); }

html:not(.dark) .upgrade .price-card,
body:not(.dark) .upgrade .price-card{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(59,130,246,.08), transparent 62%),
    rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
}

html:not(.dark) .upgrade .price-card.featured,
body:not(.dark) .upgrade .price-card.featured{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(59,130,246,.14), transparent 60%),
    rgba(255,255,255,.96);
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 18px 55px rgba(2,6,23,.12);
}

html:not(.dark) .upgrade .price-top .p,
html:not(.dark) .upgrade .features,
body:not(.dark) .upgrade .price-top .p,
body:not(.dark) .upgrade .features{ color: rgba(15,23,42,.72); }

/* Badges stay pills, but light palette */
html:not(.dark) .upgrade .price-top .badge,
body:not(.dark) .upgrade .price-top .badge{
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.78);
}

/* Buttons readable in light */
html:not(.dark) .upgrade .price-actions .btn,
body:not(.dark) .upgrade .price-actions .btn{
  background: rgba(255,255,255,.96);
  border-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.86);
  box-shadow: 0 8px 20px rgba(2,6,23,.10);
}
html:not(.dark) .upgrade .price-actions .btn:hover,
body:not(.dark) .upgrade .price-actions .btn:hover{
  border-color: rgba(59,130,246,.30);
  box-shadow: 0 10px 26px rgba(2,6,23,.12);
}
html:not(.dark) .upgrade .price-actions .btn.is-disabled,
body:not(.dark) .upgrade .price-actions .btn.is-disabled{
  opacity: .55;
  box-shadow: none;
}

html:not(.dark) .upgrade .upgrade-badge-success,
body:not(.dark) .upgrade .upgrade-badge-success{
  border-color: rgba(34,197,94,.26);
  background: rgba(34,197,94,.10);
  color: rgba(15,23,42,.82);
}
/* UPGRADE: force badges to behave like pills (LIGHT MODE) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;

  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  min-height: 0 !important;
}

/* DASHBOARD CHURCHGOER STYLING */
/* ==============================
   CHURCHGOER DASHBOARD (LIGHT)
   Drop-in replacement (app.css)
   ============================== */

/* Wrap */
.cg-wrap{ margin-top:12px; }

/* Top row layout */
.cg-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Rank card */
.cg-rank{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(59,130,246,.10), transparent 55%),
    rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Medal */
.cg-medal{
  width:38px; height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(245,158,11,.32);
  background:
    radial-gradient(220px 140px at 30% 20%, rgba(245,158,11,.22), transparent 55%),
    rgba(245,158,11,.10);
  flex:0 0 auto;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
.cg-medal svg{ width:18px; height:18px; }

/* Text */
.cg-title{ font-weight:950; letter-spacing:.2px; color: rgba(15,23,42,.92); }
.cg-sub{ font-size:12px; color: rgba(15,23,42,.62); margin-top:2px; }
.cg-pts{ font-weight:950; color: rgba(15,23,42,.92); }

/* Progress bar */
.cg-bar{
  margin-top:10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  overflow:hidden;
  height:12px;
  background: rgba(15,23,42,.06);
}
.cg-bar > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(59,130,246,.75), rgba(245,158,11,.70));
}

/* Mini stats */
.cg-mini{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media(max-width: 900px){ .cg-mini{ grid-template-columns:1fr; } }

.cg-mini .row{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:12px 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(2,6,23,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cg-mini .k{ font-size:12px; color: rgba(15,23,42,.62); }
.cg-mini .v{ font-weight:950; color: rgba(15,23,42,.92); }

/* ==========================================
   BADGES GRID (cards) ... NOT pills
   Critical: override global .badge pill rules
   ========================================== */
.badge-grid{
  margin-top:12px;
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media(max-width: 1100px){ .badge-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media(max-width: 640px){ .badge-grid{ grid-template-columns: 1fr; } }

/* Force badge cards to be cards even if .badge is globally styled as a pill */
.badge-grid > .badge{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  white-space:normal !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  border-radius:18px !important;
  padding:14px !important;

  border:1px solid rgba(15,23,42,.10) !important;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.badge-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.badge-ico{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.10);
  flex:0 0 auto;
  font-size:18px;
  line-height:1;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.badge-name{
  margin:0;
  font-weight:950;
  font-size:14px;
  line-height:1.2;
  color: rgba(15,23,42,.92);
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

.badge-desc{
  margin:8px 0 0 0;
  font-size:12px;
  color: rgba(15,23,42,.62);
  line-height:1.45;
  overflow-wrap:anywhere;
}

/* ==========================
   TABLE overflow fix (LIGHT)
   ========================== */
.cg-wrap table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(2,6,23,.08);
}
.cg-wrap table thead, 
.cg-wrap table tbody{ display:table; width:100%; }
.cg-wrap table th, 
.cg-wrap table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.86);
}
.cg-wrap table th{ font-weight:900; color: rgba(15,23,42,.92); }
.cg-wrap table tr:last-child td{ border-bottom:none; }

/* LIGHT: tier badges need contrast */
html:not(.dark) .tier-badge,
body:not(.dark) .tier-badge{
  border:1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.92);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

html:not(.dark) .tier-pro,
body:not(.dark) .tier-pro{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.38);
}

html:not(.dark) .tier-starter,
body:not(.dark) .tier-starter{
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.38);
}

/* and churchgoer membership styling */

.member-wrap{ margin-top:18px; }
      .member-head{
        display:flex; align-items:flex-end; justify-content:space-between;
        gap:12px; flex-wrap:wrap;
        margin:0 0 10px 0;
      }
      .member-head .label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
      .member-grid{
        display:grid;
        gap:12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      @media(max-width: 1100px){ .member-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media(max-width: 720px){ .member-grid{ grid-template-columns: 1fr; } }

      .mcard{
        border:1px solid var(--line);
        border-radius:16px;
        background: rgba(255,255,255,.75);
        box-shadow: 0 14px 40px rgba(15,23,42,.06);
        padding: 14px;
        min-width:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        gap:10px;
      }
      .mrow{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
      .micon{
        width:38px; height:38px; border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        border:1px solid rgba(59,130,246,.22);
        background: rgba(59,130,246,.10);
        flex:0 0 auto;
      }
      .mtitle{
        margin:0;
        font-size:15px;
        font-weight:950;
        letter-spacing:.2px;
        min-width:0;
        white-space:normal;
        overflow-wrap:anywhere;
      }
      .msub{
        margin:4px 0 0 0;
        font-size:12px;
        color:var(--muted);
        line-height:1.45;
        min-width:0;
        white-space:normal;
        overflow-wrap:anywhere;
      }
      .mbadges{ display:flex; gap:8px; flex-wrap:wrap; }
      .mpill{
        font-size:12px;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid rgba(15,23,42,.10);
        background: rgba(15,23,42,.04);
        color: rgba(15,23,42,.85);
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .mactions{ display:flex; gap:10px; flex-wrap:wrap; }
      .mactions a{ text-decoration:none; }

/* login stuff */
.password-wrap {
  position: relative;
}

.password-wrap .input {
  padding-right: 42px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
}

.password-toggle:hover {
  opacity: 1;
}
/* =========================
   FAQ ITEM (Light Theme)
   ========================= */

.faq-item-acc{
  border:1px solid rgba(59,130,246,.20);
  border-radius:18px;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92)),
    radial-gradient(120% 200% at 50% 0%, rgba(59,130,246,.08), transparent);

  backdrop-filter: blur(6px);

  box-shadow:
    0 10px 28px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition: all .18s ease;
}

.faq-item-acc + .faq-item-acc{
  margin-top:12px;
}

.faq-item-acc:hover{
  border-color: rgba(59,130,246,.45);
  box-shadow:
    0 14px 36px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.faq-item-acc > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:16px 16px;

  color:#1e293b;
}

.faq-item-acc > summary::-webkit-details-marker{
  display:none;
}

/* question text */
.faq-item-acc .faq-q{
  margin:0;
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
  color:#0f172a;
}

/* answer text */
.faq-item-acc .faq-a{
  margin:0;
  padding: 0 16px 16px 16px;

  color:#334155;
  line-height:1.65;
  font-size:14px;
}

/* meta chips */
.faq-item-acc .faq-meta{
  display:flex;
  gap:8px;
  align-items:center;
}

/* category / pinned chip */
.faq-item-acc .faq-chip{
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.25);
  color:#1d4ed8;

  font-size:11px;
  font-weight:700;
  padding:5px 10px;
  border-radius:999px;
}

/* chevron */
.faq-item-acc .chev{
  width:32px;
  height:32px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(59,130,246,.25);

  background:
    linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.06));

  box-shadow: 0 6px 16px rgba(37,99,235,.15);

  color:#2563eb;

  transition: transform .18s ease;
}

.faq-item-acc[open] .chev{
  transform: rotate(180deg);
}
/* =========================
   ENHANCED GROUPS (LIGHT) ...nested dropdown look
   Fixes: "looks like shit" in light + uneven header height
   ========================= */

/* The grid of group boxes */
.enhanced-groups{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}

@media(max-width:900px){
  .enhanced-groups{ grid-template-columns:1fr; }
}

/* Each group becomes a <details> accordion */
.enh-group-acc{
  border:1px solid rgba(59,130,246,.22);
  border-radius:18px;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,255,.88)),
    radial-gradient(120% 220% at 40% 0%, rgba(59,130,246,.10), transparent 60%);

  box-shadow:
    0 10px 26px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);

  backdrop-filter: blur(6px);
}

/* IMPORTANT: kills the weird "first one taller" from default element margins */
.enh-group-acc summary,
.enh-group-acc summary *{
  margin:0;
}

/* Uniform header height and clean layout */
.enh-group-acc > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:16px 16px;
  min-height:78px;              /* makes every header the same height */
}

.enh-group-acc > summary::-webkit-details-marker{ display:none; }

.enh-group-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Group title */
.enh-group-title{
  font-weight:950;
  letter-spacing:.2px;
  color:#0f172a;
  font-size:16px;
  text-transform:uppercase;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* right side controls */
.enh-group-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* the "X details" chip */
.enh-group-chip{
  font-size:12px;
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;

  color:#1d4ed8;
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.08);
}

/* chevron button */
.enh-group-chev{
  width:34px;
  height:34px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(59,130,246,.25);
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.04));
  color:#2563eb;

  box-shadow: 0 8px 18px rgba(37,99,235,.12);
  transition: transform .18s ease;
}

.enh-group-acc[open] .enh-group-chev{ transform: rotate(180deg); }

/* Body of the dropdown */
.enh-group-body{
  border-top:1px solid rgba(15,23,42,.08);
  padding:14px 16px 16px 16px;
  background: rgba(255,255,255,.62);
}

/* Optional: a subtle "open" glow */
.enh-group-acc[open]{
  border-color: rgba(59,130,246,.40);
  box-shadow:
    0 14px 34px rgba(15,23,42,.10),
    0 0 0 6px rgba(59,130,246,.06);
}

/* ==========================================
FAQ ITEM (LIGHT MODE)
========================================== */

.faq-item-acc{
  border:1px solid rgba(59,130,246,.20);
  border-radius:18px;
  overflow:hidden;

  background:
    #FFFFFF !important;

  box-shadow:
    0 8px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.8);

  transition:all .18s ease;
}

.faq-item-acc + .faq-item-acc{
  margin-top:12px;
}

.faq-item-acc:hover{
  border-color: rgba(59,130,246,.35);
  transform: translateY(-1px);
}

/* header */
.faq-item-acc > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:16px 16px;
}

.faq-item-acc > summary::-webkit-details-marker{display:none;}

.faq-q{
  margin:0;
  font-weight:900;
  font-size:15px;
  color:#000000 !important;
}

/* answer */
.faq-a{
  margin:0;
  padding:0 16px 16px 16px;

  font-size:14px;
  line-height:1.65;

  color:#000000 !important;
}

/* chips */
.faq-meta{
  display:flex;
  gap:8px;
}

.faq-chip{
  font-size:11px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;

  background: #FFFFFF !important;
  border:1px solid rgba(59,130,246,.20);
  color:#000000 !important;
}

/* pinned chip */
.faq-chip.pin{
  background: rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  color:#b45309;
}

/* chevron */
.faq-item-acc .chev{
  width:32px;
  height:32px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(59,130,246,.25);
  background: #FFFFFF !important;
  color:#2563eb;

  transition:transform .18s ease;
}

.faq-item-acc[open] .chev{
  transform:rotate(180deg);
}
/* FAQ item summary layout ...stop right-side overflow on mobile */
.faq-item-acc > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}

.faq-item-acc > summary .qwrap{
  flex:1 1 auto;
  min-width:0;              /* KEY ...allows the left side to shrink */
}

.faq-item-acc > summary .faq-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 1 auto;            /* allow it to shrink if needed */
  min-width:0;
  max-width:55%;            /* prevents chips from consuming the whole row */
}

.faq-item-acc > summary .faq-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;           /* KEY ...chips wrap instead of pushing chevron out */
  justify-content:flex-end;
  min-width:0;
}

/* keep chevron always visible */
.faq-item-acc > summary .chev{
  flex:0 0 auto;
}
.discovery-packmeta {
color: #000000;
}
/* ====== Stars: premium gold filled, subtle empty ====== */
.stars{
  display:inline-flex;
  gap:3px;
  vertical-align:middle;
  align-items:center;
}

.stars .star{
  width:16px;
  height:16px;
  display:block;
}

/* empty stars stay subtle in both themes */
.stars .star.off{
  opacity:.22;
  color: currentColor; /* respects theme text color */
  filter: none;
}

/* filled stars: deep gold + glow, looks expensive */
.stars .star.on{
  opacity:1;
  color:#fbbf24; /* fallback if gradient isn't supported */

  /* gold gradient paint */
  background: linear-gradient(
    180deg,
    #fff7cc 0%,
    #ffe08a 18%,
    #fbbf24 45%,
    #f59e0b 70%,
    #b45309 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  /* this makes the SVG use the gradient via currentColor */
  color: transparent;

  /* glow + depth */
  filter:
    drop-shadow(0 0 6px rgba(245,158,11,.35))
    drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ensure the SVG path uses "currentColor" behavior via CSS */
.stars .star path{
  fill: currentColor;
}

/* Dark mode: more glow, slightly brighter highlight */
@media (prefers-color-scheme: dark){
  .stars .star.off{ opacity:.18; }
  .stars .star.on{
    filter:
      drop-shadow(0 0 8px rgba(245,158,11,.55))
      drop-shadow(0 2px 10px rgba(0,0,0,.55));
  }
}

.row form {
  display:inline-flex;
  width:auto;
  margin:0;
}

.row form .btn {
  width:auto;
}
@media (max-width:640px){

  .row .btn,
  .row form {
    width:100%;
  }

  .row form .btn{
    width:100%;
  }

}
/* Force .section-head children to ALWAYS stack vertically — no inline nonsense */
.section-head {
  display: block !important;               /* kill any flex/grid */
  text-align: center !important;           /* keep centered alignment */
}

.section-head .eyebrow,
.section-head h1,
.section-head .lead,
.section-head .h1 {
  display: block !important;               /* force each to full-width block */
  width: 100% !important;                  /* take full available width */
  max-width: 100% !important;              /* never shrink below content */
  margin-left: auto !important;
  margin-right: auto !important;
  flex: none !important;                   /* kill any flex-grow/shrink */
  align-self: center !important;           /* center if parent is flex (backup) */
}

/* Extra spacing for clean vertical rhythm */
.section-head .eyebrow {
  margin-bottom: 12px !important;
}

.section-head h1,
.section-head .h1 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.section-head .lead {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Mobile safety: ensure no weird wrapping */
@media (max-width: 640px) {
  .section-head .eyebrow,
  .section-head h1,
  .section-head .lead {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}