/* ── Churchtell Shared Layout Styles (Header & Footer) ── */

/* ── Universal Smooth Scrolling & Modern Floating Pill Scrollbar ── */
html {
  scroll-behavior: smooth !important;
}

/* Firefox standard scrollbar */
html, body, * {
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--brand-primary, #7339bc) 50%, rgba(140, 140, 160, 0.38)) transparent !important;
}

body[data-theme="dark"],
body[data-theme="dark"] * {
  scrollbar-color: color-mix(in srgb, var(--brand-bright, #9f57f9) 60%, rgba(255, 255, 255, 0.22)) transparent !important;
}

/* WebKit / Chromium / Edge / Safari modern floating pill scrollbar */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand-primary, #7339bc) 50%, rgba(140, 140, 160, 0.38)) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  transition: background 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand-bright, #9f57f9) 80%, rgba(140, 140, 160, 0.6)) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Dark mode thumb adaptations */
body[data-theme="dark"] ::-webkit-scrollbar-thumb,
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand-bright, #9f57f9) 55%, rgba(255, 255, 255, 0.22)) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand-bright, #9f57f9) 90%, rgba(255, 255, 255, 0.45)) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

/* ── Purple Gradient Text Utility ── */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-bright, #9f57f9), var(--brand-primary, #7339bc)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
}

/* Header Nav */
.nav {
  position: absolute; z-index: 50; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 40px)); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; padding: 18px 0;
  background: transparent; transition: all 0.35s ease;
}
.nav.sticky-top {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  width: min(1120px, calc(100% - 32px)) !important;
  padding: 10px 18px !important;
  border-radius: 0 0 24px 24px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  background: color-mix(in srgb, var(--solid) 88%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

body[data-theme="light"] .nav.sticky-top {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-top: 0 !important;
  box-shadow: 0 10px 30px rgba(64, 39, 82, 0.08) !important;
}

body[data-theme="dark"] .nav.sticky-top {
  background: rgba(13, 11, 18, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-top: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
}

/* Floating pill when scrolling UP: detached midair with full border radius */
.nav.floating-pill {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  width: min(1120px, calc(100% - 32px)) !important;
  padding: 10px 14px 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--solid) 85%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
}

body[data-theme="light"] .nav.floating-pill {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(64, 39, 82, 0.08) !important;
}

body[data-theme="dark"] .nav.floating-pill {
  background: rgba(13, 11, 18, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
}

.nav.nav-hidden { transform: translateX(-50%) translateY(-110%); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; background: #9346E8; box-shadow: 0 4px 14px rgba(147,70,232,0.28); overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-size: 22px; font-weight: 950; letter-spacing: -.03em; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 6px; font-size: 15.5px; color: var(--muted); font-weight: 700; }
.nav-links a { padding: 10px 15px; border-radius: 999px; font-size: 15.5px; font-weight: 700; transition: .25s ease; }

body[data-theme="light"] .nav .brand-name,
body[data-theme="light"] .nav .nav-links,
body[data-theme="light"] .nav .nav-links a,
body[data-theme="light"] .nav .icon-btn { color: #2d3139 !important; }
body[data-theme="light"] .nav .nav-links a:hover { color: #11141a !important; background: rgba(0,0,0,0.06); }
body[data-theme="dark"] .nav .brand-name,
body[data-theme="dark"] .nav .nav-links,
body[data-theme="dark"] .nav .nav-links a,
body[data-theme="dark"] .nav .icon-btn { color: #ffffff !important; }
body[data-theme="dark"] .nav .nav-links a:hover { color: #ffffff !important; background: rgba(255,255,255,0.12); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.btn, .icon-btn { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: all .25s ease; }
.btn { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 900; background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); border: 0; box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 24%, transparent); }

/* ── Unified Minimalistic Footer Component ── */
#site-footer,
.footer {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.footer {
  border-top: 1px solid var(--line);
  border-bottom: 0 !important;
  padding: 48px 0 30px 0 !important;
  margin-top: auto;
  margin-bottom: 0 !important;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
}
.footer-brand .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.footer-tagline {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.85;
  line-height: 1.2;
}
.footer-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-links a {
  color: var(--muted);
  font-weight: 600;
  transition: color 0.25s ease;
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-copyright {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.8;
  margin: 0;
  text-align: right;
}
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-tagline {
    padding-left: 0;
    border-left: 0;
    width: 100%;
  }
  .footer-right-col {
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  .footer-links {
    gap: 12px 18px;
    justify-content: flex-start;
  }
  .footer-copyright {
    text-align: left;
  }
}
/* ── Mobile Navigation Menu Drawer ── */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 960px) {
  .nav-links {
    display: none !important;
  }
  .desktop-only-btn {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: inline-flex !important;
  }
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, calc(100% - 36px));
  height: 100vh;
  height: 100dvh;
  background: #ffffff !important;
  color: #11141a !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.25);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  box-sizing: border-box;
}

body[data-theme="dark"] .mobile-menu-drawer {
  background: #1e192a !important;
  background: linear-gradient(180deg, #231c32 0%, #1b1627 100%) !important;
  color: #ffffff !important;
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: -16px 0 54px rgba(0, 0, 0, 0.65) !important;
}

.mobile-menu-overlay.open .mobile-menu-drawer {
  transform: translateX(0);
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="dark"] .mobile-menu-head {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.mobile-menu-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-close,
.drawer-theme-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

body[data-theme="light"] .mobile-menu-close,
body[data-theme="light"] .drawer-theme-btn {
  background: #f4f0fa !important;
  border-color: #e5dfef !important;
  color: #1f2329 !important;
}

body[data-theme="dark"] .mobile-menu-close,
body[data-theme="dark"] .drawer-theme-btn {
  background: #2b233e !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.mobile-menu-close:hover,
.drawer-theme-btn:hover {
  transform: scale(1.05);
  background: var(--accent) !important;
  color: #ffffff !important;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  flex: 1;
}

/* Staggered Animated Entrance on Drawer Pull Out */
.mobile-menu-links .mobile-menu-link,
.mobile-menu-actions {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link,
.mobile-menu-overlay.open .mobile-menu-actions {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(1) { transition-delay: 0.04s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(2) { transition-delay: 0.08s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(3) { transition-delay: 0.12s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(4) { transition-delay: 0.16s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(5) { transition-delay: 0.20s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(6) { transition-delay: 0.24s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(7) { transition-delay: 0.28s; }
.mobile-menu-overlay.open .mobile-menu-links .mobile-menu-link:nth-child(8) { transition-delay: 0.32s; }
.mobile-menu-overlay.open .mobile-menu-actions { transition-delay: 0.36s; }

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 17.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body[data-theme="light"] .mobile-menu-link {
  color: #1e2229 !important;
}

body[data-theme="dark"] .mobile-menu-link {
  color: #f7f5fc !important;
}

.mobile-menu-link i,
.mobile-menu-link svg {
  width: 22px;
  height: 22px;
  color: var(--accent, #9346e8) !important;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
  background: var(--soft) !important;
  color: var(--accent) !important;
  transform: translateX(4px);
}

body[data-theme="light"] .mobile-menu-link:hover,
body[data-theme="light"] .mobile-menu-link.active {
  background: rgba(147, 70, 232, 0.08) !important;
  color: #7922e5 !important;
}

body[data-theme="dark"] .mobile-menu-link:hover,
body[data-theme="dark"] .mobile-menu-link.active {
  background: rgba(147, 70, 232, 0.22) !important;
  color: #c792ff !important;
}

.mobile-menu-link:hover i,
.mobile-menu-link:hover svg {
  transform: scale(1.15);
}

.mobile-menu-actions {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

body[data-theme="dark"] .mobile-menu-actions {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.drawer-lang-btn {
  width: 100% !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

body[data-theme="light"] .drawer-lang-btn {
  background: #f8f6fc !important;
  border-color: #e5dfef !important;
  color: #1f2329 !important;
}

body[data-theme="dark"] .drawer-lang-btn {
  background: #282139 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.drawer-cta-btn {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 12px !important;
  box-shadow: 0 8px 24px rgba(147, 70, 232, 0.35) !important;
}




/* ── Header Nav Actions Layout ── */
.nav-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
}

/* 1. Connected Capsule: Language Selector attached to Get Started button */
.connected-start-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 999px !important;
  position: relative !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

body[data-theme="light"] .connected-start-capsule,
html[data-theme="light"] .connected-start-capsule {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

body[data-theme="dark"] .connected-start-capsule,
html[data-theme="dark"] .connected-start-capsule {
  background: #231e2e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Language Selector Left Segment */
.lang-selector-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.lang-selector-btn {
  height: 44px !important;
  padding: 0 14px 0 16px !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  transition: background 0.2s ease !important;
}

body[data-theme="dark"] .lang-selector-btn {
  border-right-color: rgba(255, 255, 255, 0.12) !important;
}

.lang-selector-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body[data-theme="dark"] .lang-selector-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.lang-flag-current { font-size: 16px !important; line-height: 1 !important; }
.lang-code-current { font-weight: 900 !important; letter-spacing: 0.04em !important; font-size: 13px !important; }
.lang-chevron-icon { width: 14px !important; height: 14px !important; opacity: 0.7 !important; transition: transform 0.25s ease !important; }
.lang-selector-btn[aria-expanded="true"] .lang-chevron-icon { transform: rotate(180deg) !important; }

.lang-flag-img {
  width: 22px !important;
  height: 15px !important;
  object-fit: cover !important;
  border-radius: 3px !important;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.25) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Glassmorphic Dropdown Panel — Anchored directly under language badge on left */
.lang-dropdown-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  width: 280px !important;
  border-radius: 20px !important;
  padding: 12px !important;
  display: none;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 999999 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  animation: langFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-theme="light"] .lang-dropdown-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(115, 57, 188, 0.18) !important;
  color: #15141a !important;
}

body[data-theme="dark"] .lang-dropdown-panel {
  background: rgba(26, 22, 34, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.lang-dropdown-panel.open {
  display: flex !important;
}

@keyframes langFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.lang-search-icon {
  position: absolute !important;
  left: 12px !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--muted) !important;
  pointer-events: none !important;
}

.lang-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.lang-scroll-list {
  max-height: 250px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  scrollbar-width: thin !important;
}

.lang-option-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.18s ease !important;
}

.lang-option-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

.lang-option-item.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  font-weight: 800 !important;
}

.lang-option-flag { font-size: 18px !important; line-height: 1 !important; }
.lang-option-info { display: flex !important; flex-direction: column !important; flex: 1 !important; line-height: 1.2 !important; }
.lang-option-name { font-size: 13.5px !important; font-weight: 700 !important; }
.lang-option-name small { font-size: 11.5px !important; opacity: 0.7 !important; font-weight: 500 !important; }
.lang-option-currency { font-size: 11.5px !important; color: var(--accent) !important; font-weight: 800 !important; margin-top: 2px !important; }
.lang-option-badge { font-size: 11px !important; font-weight: 900 !important; padding: 2px 7px !important; border-radius: 999px !important; background: var(--soft) !important; color: var(--muted) !important; }

/* Connected Capsule Right Segment: Get Started Button */
.connected-start-capsule .btn-primary,
.connected-start-capsule a.btn-primary {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 24px 0 20px !important;
  border-radius: 0 999px 999px 0 !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--brand-bright, #9f57f9), var(--brand-primary, #7339bc)) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(115, 57, 188, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
}

.connected-start-capsule .btn-primary:hover,
.connected-start-capsule a.btn-primary:hover {
  transform: translateX(1px) !important;
  box-shadow: 0 8px 22px rgba(115, 57, 188, 0.55) !important;
}

/* 2. Standalone Dark/Light Mode Theme Toggle (Icon Only - No Shape Enclosure) */
.icon-btn.standalone-theme-toggle:not(.drawer-theme-btn),
#themeToggle:not(.drawer-theme-btn),
.nav-actions .icon-btn#themeToggle:not(.drawer-theme-btn),
.nav-actions #themeToggle:not(.drawer-theme-btn) {
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-theme="light"] .icon-btn.standalone-theme-toggle:not(.drawer-theme-btn),
body[data-theme="light"] #themeToggle:not(.drawer-theme-btn),
body[data-theme="light"] .nav-actions #themeToggle:not(.drawer-theme-btn) {
  background: transparent !important;
  color: #1e1b24 !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .icon-btn.standalone-theme-toggle:not(.drawer-theme-btn),
body[data-theme="dark"] #themeToggle:not(.drawer-theme-btn),
body[data-theme="dark"] .nav-actions #themeToggle:not(.drawer-theme-btn) {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

#themeToggle i,
#themeToggle svg,
.standalone-theme-toggle i,
.standalone-theme-toggle svg,
.nav-actions #themeToggle i,
.nav-actions #themeToggle svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 2.2px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-block !important;
}

#themeToggle:hover i,
#themeToggle:hover svg,
.standalone-theme-toggle:hover i,
.standalone-theme-toggle:hover svg,
.nav-actions #themeToggle:hover i,
.nav-actions #themeToggle:hover svg {
  transform: scale(1.22) rotate(-10deg) !important;
}



/* ── RTL Mode Overrides for Connected Capsule (Arabic & RTL Languages) ── */
html[dir="rtl"] .connected-start-capsule .lang-selector-btn,
body[dir="rtl"] .connected-start-capsule .lang-selector-btn,
[dir="rtl"] .connected-start-capsule .lang-selector-btn {
  border-radius: 0 999px 999px 0 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-right: none !important;
}

body[data-theme="dark"][dir="rtl"] .connected-start-capsule .lang-selector-btn,
html[data-theme="dark"][dir="rtl"] .connected-start-capsule .lang-selector-btn {
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

html[dir="rtl"] .connected-start-capsule .btn-primary,
body[dir="rtl"] .connected-start-capsule .btn-primary,
[dir="rtl"] .connected-start-capsule .btn-primary {
  border-radius: 999px 0 0 999px !important;
}

html[dir="rtl"] .lang-dropdown-panel,
body[dir="rtl"] .lang-dropdown-panel,
[dir="rtl"] .lang-dropdown-panel {
  right: 0 !important;
  left: auto !important;
}



/* ── Sync Currency Toggle Bar Inside Dropdown ── */
.currency-sync-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
}

body[data-theme="light"] .currency-sync-bar {
  background: rgba(115, 57, 188, 0.06) !important;
  border: 1px solid rgba(115, 57, 188, 0.14) !important;
}

body[data-theme="dark"] .currency-sync-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.currency-sync-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  line-height: 1.2 !important;
}

.currency-sync-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

.currency-sync-sub {
  font-size: 10px !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}

.currency-sync-switch {
  position: relative !important;
  display: inline-block !important;
  width: 38px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.currency-sync-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.currency-sync-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.25) !important;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 999px !important;
}

body[data-theme="dark"] .currency-sync-slider {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.currency-sync-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #ffffff !important;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.currency-sync-switch input:checked + .currency-sync-slider {
  background-color: var(--brand-bright, #9f57f9) !important;
}

.currency-sync-switch input:checked + .currency-sync-slider:before {
  transform: translateX(16px) !important;
}



/* ── Ultra-Sleek Modern Custom Scrollbar for Language Dropdown ── */
.lang-scroll-list {
  max-height: 250px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(159, 87, 249, 0.4) transparent !important;
}

body[data-theme="dark"] .lang-scroll-list {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

/* Webkit Custom Scrollbar (Chrome, Edge, Safari, Opera) */
.lang-scroll-list::-webkit-scrollbar {
  width: 5px !important;
}

.lang-scroll-list::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px !important;
}

.lang-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(159, 87, 249, 0.4) !important;
  border-radius: 999px !important;
  transition: background 0.2s ease !important;
}

.lang-scroll-list::-webkit-scrollbar-thumb:hover {
  background: rgba(159, 87, 249, 0.75) !important;
}

body[data-theme="dark"] .lang-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
}

body[data-theme="dark"] .lang-scroll-list::-webkit-scrollbar-thumb:hover {
  background: rgba(159, 87, 249, 0.6) !important;
}



/* ── Balanced Multi-Line Layout for Long Translated Titles ── */
h1, h2, h3, .hero-title, .hero h1, .section-head h2, .about-header h2, .seats-header h2, .scale-banner h2, .story-content h2, .category-overview h2, .pricing-header h2, .faq-category h2, .cta-banner h2 {
  text-wrap: balance !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Constrain centered main headings so long translations break onto 2-3 balanced lines */
.hero h1, .hero-title, .section-head h2, .seats-header h2, .about-header h2, .pricing-header h2, .scale-banner h2, .cta-banner h2 {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* For cards and smaller section titles */
.price-card h3, .seat-card h3, .feature-card h3, .module-card h3, .outcomes-card h3 {
  text-wrap: balance !important;
  max-width: 100% !important;
  word-break: break-word !important;
}

/* ── Atmosphere Background Image Overlay for Laptop & Phone Section ── */
.crossover-sticky-frame {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  width: 100% !important;
  z-index: 10 !important;
}

/* Clear Base Image Layer */
.crossover-sticky-frame::before {
  content: "" !important;
  position: absolute !important;
  top: -15vh !important;
  bottom: -15vh !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* Fade out seamlessly at top and bottom using CSS mask-image */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.95) 85%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.95) 85%, transparent 100%) !important;
}

/* Dynamic Faint Overlay Layer (Fades in gradually as user scrolls) */
.crossover-sticky-frame::after {
  content: "" !important;
  position: absolute !important;
  top: -15vh !important;
  bottom: -15vh !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: var(--bg, #fbf9fc) !important;
  opacity: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.95) 85%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.95) 85%, transparent 100%) !important;
}

/* Light Mode Background Image Overlay */
body[data-theme="light"] .crossover-sticky-frame::before,
.crossover-sticky-frame::before {
  background-image: url('/assets/hero/hero-bg-light.jpg') !important;
  opacity: var(--crossover-fade, 0.70) !important;
}

/* Dark Mode Background Image Overlay */
body[data-theme="dark"] .crossover-sticky-frame::before {
  background-image: url('/assets/hero/hero-bg-dark.jpg') !important;
  opacity: var(--crossover-fade, 0.70) !important;
}

body[data-theme="dark"] .crossover-sticky-frame::after {
  background: var(--bg, #0d0b12) !important;
  opacity: 0 !important;
}

/* ── Mobile Header & Navigation Drawer Adjustments ── */
@media (max-width: 960px) {
  /* Crossover Frame mobile reset */
  .crossover-sticky-frame {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    pointer-events: auto !important;
  }
  .crossover-sticky-frame::before,
  .crossover-sticky-frame::after {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }

  /* Edge-to-edge sticky header on mobile with no border-radius and solid background */
  .nav {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  body[data-theme="light"] .nav {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  body[data-theme="dark"] .nav {
    background: #0d0b12 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .nav.sticky-top,
  .nav.floating-pill {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    z-index: 990 !important;
  }

  body[data-theme="light"] .nav.sticky-top,
  body[data-theme="light"] .nav.floating-pill {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  }

  body[data-theme="dark"] .nav.sticky-top,
  body[data-theme="dark"] .nav.floating-pill {
    background: #0d0b12 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  }

  .nav.nav-hidden {
    transform: translateY(-110%) !important;
  }

  /* Reduce brand name 'Churchtell' by 2 points down on mobile */
  .brand-name {
    font-size: 20px !important;
  }

  .nav-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* HIDE main header theme toggle on mobile - replaced by Language feature */
  .nav-actions #themeToggle,
  .nav .nav-actions #themeToggle,
  .nav-actions .standalone-theme-toggle:not(.drawer-theme-btn),
  .nav .nav-actions .standalone-theme-toggle:not(.drawer-theme-btn),
  #themeToggle:not(.drawer-theme-btn) {
    display: none !important;
  }

  /* SHOW language feature in main header on mobile (detached from Get Started) */
  .nav .nav-actions .connected-start-capsule {
    display: inline-flex !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .nav .nav-actions .connected-start-capsule .btn,
  .nav .nav-actions .connected-start-capsule .btn-primary {
    display: none !important;
  }

  .nav .nav-actions .connected-start-capsule .lang-selector-wrap {
    display: inline-flex !important;
    position: relative !important;
  }

  .nav .nav-actions .connected-start-capsule .lang-selector-btn {
    display: inline-flex !important;
    height: 38px !important;
    padding: 0 10px 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    gap: 5px !important;
    cursor: pointer !important;
  }

  body[data-theme="light"] .nav .nav-actions .connected-start-capsule .lang-selector-btn {
    background: #f4f0fa !important;
    border-color: #e5dfef !important;
    color: #1f2329 !important;
  }

  body[data-theme="dark"] .nav .nav-actions .connected-start-capsule .lang-selector-btn {
    background: #231d32 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .nav .nav-actions .connected-start-capsule .lang-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }

  /* Display mobile hamburger toggle button on main header bar */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--soft) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  body[data-theme="light"] .mobile-menu-toggle {
    background: #f4f0fa !important;
    border-color: #e5dfef !important;
    color: #1f2329 !important;
  }

  body[data-theme="dark"] .mobile-menu-toggle {
    background: #231d32 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  /* Drawer language dropdown panel positioning */
  .drawer-lang-panel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Universal Comprehensive Dark Mode Card System ── */
body[data-theme="dark"] .price-card,
body[data-theme="dark"] .pricing-card,
body[data-theme="dark"] .plan-card,
body[data-theme="dark"] .module-card,
body[data-theme="dark"] .feature-card,
body[data-theme="dark"] .seat-card,
body[data-theme="dark"] .outcomes-card,
body[data-theme="dark"] .category-overview,
body[data-theme="dark"] .comparison-card,
body[data-theme="dark"] .pricing-tier-card,
body[data-theme="dark"] .plan-box,
body[data-theme="dark"] .plans-grid-card {
  background: linear-gradient(180deg, #1d1928 0%, #15111f 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(159, 87, 249, 0.06) !important;
}

body[data-theme="dark"] .price-card h1,
body[data-theme="dark"] .price-card h2,
body[data-theme="dark"] .price-card h3,
body[data-theme="dark"] .price-card h4,
body[data-theme="dark"] .pricing-card h1,
body[data-theme="dark"] .pricing-card h2,
body[data-theme="dark"] .pricing-card h3,
body[data-theme="dark"] .pricing-card h4,
body[data-theme="dark"] .plan-card h1,
body[data-theme="dark"] .plan-card h2,
body[data-theme="dark"] .plan-card h3,
body[data-theme="dark"] .plan-card h4,
body[data-theme="dark"] .category-overview h2,
body[data-theme="dark"] .comparison-card th,
body[data-theme="dark"] .comparison-card td {
  color: #ffffff !important;
}

body[data-theme="dark"] .price-card p,
body[data-theme="dark"] .pricing-card p,
body[data-theme="dark"] .plan-card p,
body[data-theme="dark"] .category-overview p,
body[data-theme="dark"] .comparison-card p,
body[data-theme="dark"] .module-desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

body[data-theme="dark"] td.growth-column {
  background: #251e36 !important;
  border-color: rgba(121, 36, 219, 0.5) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .table-actions,
body[data-theme="dark"] .action-cell {
  background: #1b1626 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="dark"] .action-cell.growth-action-cell {
  background: #7924DB !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .price-value,
body[data-theme="dark"] .price-val,
body[data-theme="dark"] .plan-price-val {
  color: #ffffff !important;
}

body[data-theme="dark"] .price-value span,
body[data-theme="dark"] .price-val span,
body[data-theme="dark"] .plan-price-val span {
  color: rgba(255, 255, 255, 0.7) !important;
}