/* ============================================================
   BIZNISTRY GROWTH AGENCY - CSS FIXES
   Paste this into the RIGHT PANEL (CSS side) of the
   GroovePages source code editor on EVERY page.
   Select all existing content first, then replace with this.
   ============================================================ */

/* ====================================================
   1. NAV: HIDE DESKTOP LINKS + CTA ON MOBILE
      SHOW HAMBURGER BUTTON
   ==================================================== */
@media (max-width: 860px) {
  .nav-cta {
    display: none !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-hamburger-btn {
    display: flex !important;
  }
}

.nav-hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: transparent;
  border: none;
  margin-left: auto;
  z-index: 9999;
  position: relative;
}
.nav-hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.nav-hamburger-btn.hb-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger-btn.hb-open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger-btn.hb-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer menu */
.bga-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(15, 26, 20, 0.99);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(2, 197, 139, 0.2);
  z-index: 9998;
  padding: 16px 1.5rem 20px;
  flex-direction: column;
}
.bga-mobile-menu.mm-open {
  display: flex;
}
.bga-mobile-menu a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  letter-spacing: 0.03em !important;
  display: block !important;
  transition: color 0.2s !important;
}
.bga-mobile-menu a:last-child {
  border-bottom: none !important;
  margin-top: 10px !important;
  background: #02c58b !important;
  color: #0f1a14 !important;
  text-align: center !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-weight: 700 !important;
}
.bga-mobile-menu a:hover {
  color: #3ffdc5 !important;
}
.bga-mobile-menu a:last-child:hover {
  background: #3ffdc5 !important;
  color: #0f1a14 !important;
}

/* ====================================================
   2. STAGES: TAP HINT ON MOBILE
   ==================================================== */
.bga-tap-hint {
  display: none;
  background: rgba(2, 197, 139, 0.1);
  border: 1px solid rgba(2, 197, 139, 0.28);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #017754;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) {
  .bga-tap-hint {
    display: block;
  }
  .stage-tab .tab-name {
    font-size: 10px !important;
  }
  .stage-tab .tab-price {
    font-size: 10px !important;
  }
  .stage-tab .tab-stage {
    font-size: 8px !important;
  }
  .stage-tab .tab-emoji {
    font-size: 16px !important;
  }
}

/* ====================================================
   3. SCALE PANEL: FIX WHITE TEXT ON WHITE BACKGROUND
   ==================================================== */
#panel-scale .panel-inner {
  background: #0f1a14 !important;
}
#panel-scale .panel-problem {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-left-color: #02c58b !important;
}
#panel-scale .panel-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}
#panel-scale .offer-items li {
  color: rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
#panel-scale .offer-items li::before {
  color: #02c58b !important;
}
#panel-scale .price-card-body,
#panel-scale .waitlist-mini {
  background: rgba(255, 255, 255, 0.07) !important;
}
#panel-scale .price-card-body p,
#panel-scale .price-card-body span,
#panel-scale .waitlist-mini p,
#panel-scale .waitlist-mini h4 {
  color: rgba(255, 255, 255, 0.82) !important;
}
#panel-scale .panel-cta-note {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ====================================================
   4. MOBILE TYPOGRAPHY: BETTER CONTRAST ON DARK BG
   ==================================================== */
@media (max-width: 860px) {
  .kim-intro,
  .kim-section p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .kcard p {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px !important;
  }
  .hero-body {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .hero-sub {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }
  .after-li p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
  }
  .stakes-section p,
  .stakes-inner p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 17px !important;
  }
  .quiz-inner p,
  .quiz-list li,
  .quiz-section p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .dq p {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .truth-box p {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .ap-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
  }
  .panel-desc {
    font-size: 15px !important;
  }
  .panel-problem {
    font-size: 14px !important;
  }
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  h3 {
    font-size: 17px !important;
  }
  .trust-strip p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .footer-brand-col p,
  .footer-col a {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }
}

/* ============================================================
   BIZNISTRY GROWTH AGENCY - CSS FIXES (UPDATED)
   Paste this into the RIGHT PANEL (CSS side) of the
   GroovePages source code editor on EVERY page.
   Select all existing content first, then replace with this.
   ============================================================ */

/* ====================================================
   1. NAV: HIDE DESKTOP LINKS + CTA ON MOBILE
      SHOW HAMBURGER BUTTON
   ==================================================== */
@media (max-width: 860px) {
  .nav-cta {
    display: none !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-hamburger-btn {
    display: flex !important;
  }
}

.nav-hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: transparent;
  border: none;
  margin-left: auto;
  z-index: 9999;
  position: relative;
}
.nav-hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.nav-hamburger-btn.hb-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger-btn.hb-open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger-btn.hb-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer menu */
.bga-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(15, 26, 20, 0.99);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(2, 197, 139, 0.2);
  z-index: 9998;
  padding: 16px 1.5rem 20px;
  flex-direction: column;
}
.bga-mobile-menu.mm-open {
  display: flex;
}
.bga-mobile-menu a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  letter-spacing: 0.03em !important;
  display: block !important;
  transition: color 0.2s !important;
}
.bga-mobile-menu a:last-child {
  border-bottom: none !important;
  margin-top: 10px !important;
  background: #02c58b !important;
  color: #0f1a14 !important;
  text-align: center !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-weight: 700 !important;
}
.bga-mobile-menu a:hover {
  color: #3ffdc5 !important;
}
.bga-mobile-menu a:last-child:hover {
  background: #3ffdc5 !important;
  color: #0f1a14 !important;
}

/* ====================================================
   2. STAGE 5 SCALE TAB: REMOVE BORDER
   ==================================================== */

/* Remove any outline/border from the Scale stage tab
   and its coming soon badge */
.stage-tab.active-scale,
.stage-tab[onclick*="scale"],
#panel-scale,
.stage-tab:last-child {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Target the coming soon pill/badge specifically */
.stage-tab:last-child .tab-price,
.coming-soon-badge,
[class*="coming-soon"],
[class*="comingSoon"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove border from the Scale stage card on the home page */
#panel-scale .panel-inner {
  background: #0f1a14 !important;
  border: none !important;
  outline: none !important;
}

/* Remove the outlined Coming Soon button/tag on the stages page */
.stage-tab:last-child {
  border-right: none !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* Catch the outlined Coming Soon tag that appears
   below Stage 5 card on the home page */
.coming-soon-box,
[style*="border:1px solid"],
[style*="border: 1px solid"] {
  border: none !important;
}

/* More targeted: remove border from Stage 5 scale
   section card specifically */
.stage-tab.active-scale {
  border-bottom: 3px solid #02c58b !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* ====================================================
   3. TRADEMARK SYMBOL: SMALL + SUPERSCRIPT ON ALL PAGES
   ==================================================== */

/* Make every TM symbol small and raised */
sup {
  font-size: 0.55em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  font-weight: 400 !important;
}

/* Target the unicode TM character directly where it
   appears as regular text rather than a <sup> tag */
h1, h2, h3, h4, h5, p, span, div, a, li, label {
  font-variant: normal;
}

/* This targets the ™ character rendered inline in text.
   We wrap it via JS below, but this ensures the
   sup styling is always correct */
.bga-tm {
  font-size: 0.52em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  font-weight: 400 !important;
  display: inline !important;
}

/* ====================================================
   4. STAGES: TAP HINT ON MOBILE
   ==================================================== */
.bga-tap-hint {
  display: none;
  background: rgba(2, 197, 139, 0.1);
  border: 1px solid rgba(2, 197, 139, 0.28);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #017754;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) {
  .bga-tap-hint {
    display: block;
  }
  .stage-tab .tab-name {
    font-size: 10px !important;
  }
  .stage-tab .tab-price {
    font-size: 10px !important;
  }
  .stage-tab .tab-stage {
    font-size: 8px !important;
  }
  .stage-tab .tab-emoji {
    font-size: 16px !important;
  }
}

/* ====================================================
   5. SCALE PANEL: FIX WHITE TEXT ON WHITE BACKGROUND
   ==================================================== */
#panel-scale .panel-problem {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-left-color: #02c58b !important;
}
#panel-scale .panel-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}
#panel-scale .offer-items li {
  color: rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
#panel-scale .offer-items li::before {
  color: #02c58b !important;
}
#panel-scale .price-card-body,
#panel-scale .waitlist-mini {
  background: rgba(255, 255, 255, 0.07) !important;
}
#panel-scale .price-card-body p,
#panel-scale .price-card-body span,
#panel-scale .waitlist-mini p,
#panel-scale .waitlist-mini h4 {
  color: rgba(255, 255, 255, 0.82) !important;
}
#panel-scale .panel-cta-note {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ====================================================
   6. MOBILE TYPOGRAPHY: BETTER CONTRAST ON DARK BG
   ==================================================== */
@media (max-width: 860px) {
  .kim-intro,
  .kim-section p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .kcard p {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px !important;
  }
  .hero-body {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .hero-sub {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }
  .after-li p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
  }
  .stakes-section p,
  .stakes-inner p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 17px !important;
  }
  .quiz-inner p,
  .quiz-list li,
  .quiz-section p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
  }
  .dq p {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .truth-box p {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .ap-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
  }
  .panel-desc {
    font-size: 15px !important;
  }
  .panel-problem {
    font-size: 14px !important;
  }
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  h3 {
    font-size: 17px !important;
  }
  .trust-strip p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .footer-brand-col p,
  .footer-col a {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }
} *{} /*endBaseStyles*/
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 :root { --covenant-navy: #0b192c; --kingdom-gold: #d4af37; --stewardship-slate: #4a5568; --cream: #faf8f3; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Montserrat', sans-serif; background: var(--cream); color: var(--covenant-navy); line-height: 1.6; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; } header.top { background: var(--covenant-navy); color: #fff; padding: 18px 0; text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } header.top span { color: var(--kingdom-gold); } .hero { text-align: center; padding: 64px 0 40px; } .icon { font-size: 48px; } .badge { display: inline-block; margin-top: 12px; padding: 6px 16px; border: 1px solid var(--kingdom-gold); border-radius: 999px; color: var(--covenant-navy); background: rgba(212, 175, 55, 0.12); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } h1 { font-family: 'Cinzel', serif; font-size: 34px; margin: 20px 0 8px; } .tagline { font-size: 17px; font-weight: 600; color: var(--kingdom-gold); margin: 0 0 8px; } .subhead { color: var(--stewardship-slate); font-size: 15px; max-width: 520px; margin: 0 auto; } .card { background: #fff; border: 1px solid rgba(11, 25, 44, 0.08); border-radius: 12px; padding: 32px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04); } .card h2 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stewardship-slate); margin: 0 0 12px; } .card p { margin: 0 0 12px; font-size: 15px; } .card p:last-child { margin-bottom: 0; } .form-card { background: var(--covenant-navy); color: #fff; } .form-card h2 { font-family: 'Cinzel', serif; font-size: 22px; text-transform: none; letter-spacing: normal; color: #fff; margin-bottom: 6px; } .form-card .lede { color: rgba(255,255,255,0.75); font-size: 14px; margin-bottom: 24px; } label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } input, textarea { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 14px; margin-bottom: 18px; } input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.4); } textarea { resize: vertical; min-height: 80px; } button[type="submit"] { width: 100%; padding: 13px; border: none; border-radius: 8px; background: var(--kingdom-gold); color: var(--covenant-navy); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; } button[type="submit"]:hover { opacity: 0.92; } .privacy { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 14px; text-align: center; } .error-msg { display: none; background: rgba(220, 38, 38, 0.15); border: 1px solid rgba(220, 38, 38, 0.4); color: #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; } footer { text-align: center; padding: 32px 0 56px; } footer .verse { font-style: italic; font-size: 14px; color: var(--stewardship-slate); } footer .ref { font-size: 12px; color: var(--kingdom-gold); font-weight: 600; margin-top: 4px; }