/* ==========================================================================
   SANDTON INDEX - Enterprise Financial Marketplace Design System
   Exact Spec Palettes: Light & Dark Modes, Inter Font, 12px/10px Radius
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Default / Dark Theme Specification */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Theme: Dark (Default institutional high-finance navy) */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-card: #1E293B;
  --bg-card-hover: #27354E;
  --border-color: #334155;
  --border-subtle: rgba(255, 255, 255, 0.08);

  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;

  --accent-primary: #4F8CFF;
  --accent-primary-hover: #3b74df;
  --accent-success: #22C55E;
  --accent-success-bg: rgba(34, 197, 94, 0.12);
  --accent-warning: #FBBF24;
  --accent-warning-bg: rgba(251, 191, 36, 0.12);
  --accent-danger: #EF4444;
  --accent-danger-bg: rgba(239, 68, 68, 0.12);

  /* Gold Heritage Accents */
  --gold-primary: #D4AF37;
  --gold-glow: rgba(212, 175, 55, 0.2);
  --gold-subtle: rgba(212, 175, 55, 0.12);

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Geometry Specification */
  --radius-card: 12px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-pill: 9999px;

  /* Header and Sidebar Dimensions */
  --topbar-height: 68px;
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 76px;
}

/* Light Theme Specification */
[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --border-color: #E2E8F0;
  --border-subtle: rgba(0, 0, 0, 0.06);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  --accent-primary: #003366;
  --accent-primary-hover: #002244;
  --accent-success: #16A34A;
  --accent-success-bg: rgba(22, 163, 74, 0.1);
  --accent-warning: #F59E0B;
  --accent-warning-bg: rgba(245, 158, 11, 0.1);
  --accent-danger: #DC2626;
  --accent-danger-bg: rgba(220, 38, 38, 0.1);

  --gold-primary: #B89326;
  --gold-glow: rgba(184, 147, 38, 0.15);
  --gold-subtle: rgba(184, 147, 38, 0.08);

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.1);
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* Card & Surface Tokens */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  border-color: var(--border-color);
}

.card-subtle {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 20px;
  box-sizing: border-box;
  max-width: 100%;
}

/* Form Controls - 10px Rounded */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"] {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.18);
}

[data-theme="light"] .form-control:focus, 
[data-theme="light"] input:focus, 
[data-theme="light"] select:focus, 
[data-theme="light"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15);
}

.form-control::placeholder {
  color: var(--text-muted);
}

/* Password Input with Toggle View Icon */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper input {
  padding-right: 42px !important;
}

.password-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
}

.password-toggle-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.password-toggle-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons - 10px Rounded */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--accent-primary-hover);
}

.btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-color);
}

.btn-gold {
  background: linear-gradient(135deg, #C59A27 0%, #D4AF37 100%);
  color: #FFFFFF !important;
  border: 1px solid #B8860B;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 10px rgba(197, 154, 39, 0.28);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #E2BF48 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold-primary);
  border: 1px solid var(--gold-primary);
}

.btn-outline-gold:hover {
  background: var(--gold-subtle);
}

.btn-success {
  background-color: var(--accent-success);
  color: #FFFFFF;
}

.btn-success:hover {
  opacity: 0.92;
}

.btn-danger {
  background-color: var(--accent-danger);
  color: #FFFFFF;
}

.btn-danger:hover {
  opacity: 0.92;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 1rem;
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-btn);
}

/* Badges & Status Indicators */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-approved, .badge-active, .badge-verified {
  background: var(--accent-success-bg);
  color: var(--accent-success);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.badge-pending, .badge-pending_review, .badge-submitted, .badge-reviewing, .badge-under_review {
  background: var(--accent-warning-bg);
  color: var(--accent-warning);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.badge-rejected, .badge-declined, .badge-suspended {
  background: var(--accent-danger-bg);
  color: var(--accent-danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-draft {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.badge-connected {
  background: rgba(79, 140, 255, 0.14);
  color: var(--accent-primary);
  border: 1px solid rgba(79, 140, 255, 0.25);
}

/* Badges & Pills - Always centered text alignment */
.badge,
.pill,
.action-pill,
[class*="badge-"],
[class*="pill-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.badge-gold,
.pill-gold,
.gold-pill,
[class*="badge-gold"],
[class*="pill-gold"] {
  background: linear-gradient(135deg, #C59A27 0%, #D4AF37 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #B8860B !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(197, 154, 39, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Data Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color);
}

.data-table td {
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr {
  transition: background-color 0.15s ease;
}

.data-table tbody tr:hover {
  background-color: var(--bg-card-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Skeleton Loaders */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  position: relative;
  transform: translateY(15px);
  transition: transform 0.2s ease;
}

.modal-overlay.active .modal-box {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

/* Brand Crest Icon & Full Wordmark Logos */
.brand-crest {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-full {
  height: 38px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* Theme-Adaptive Wordmark Logo */
[data-theme="dark"] .logo-light {
  display: none !important;
}
[data-theme="dark"] .logo-dark {
  display: block !important;
}

[data-theme="light"] .logo-dark {
  display: none !important;
}
[data-theme="light"] .logo-light {
  display: block !important;
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.brand-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-primary);
  font-weight: 700;
}

/* Public / Landing Page Utilities & Compatibility Classes */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding {
  padding: 80px 0;
}

.navbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.navbar) {
  padding-top: 72px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--text-primary);
}

/* Public Mobile Hamburger Button */
.public-hamburger-btn {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.public-hamburger-btn:hover {
  background: var(--bg-hover);
  border-color: var(--gold-primary);
}

/* Public Mobile Navigation Drawer */
.public-mobile-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: min(85vw, 320px);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 24px));
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-mobile-drawer.open {
  right: 0;
}

.public-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.public-drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.public-drawer-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.public-drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.public-drawer-links a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.public-drawer-links a:hover {
  border-color: var(--gold-primary);
  background: var(--bg-hover);
  color: var(--gold-primary);
}

.public-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding-bottom: 12px;
}

.public-drawer-actions {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.public-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.public-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.gold-gradient-text {
  color: var(--gold-primary);
}

/* Site Footer */
.site-footer {
  border-top: 1px solid var(--border-color);
  padding: 22px 0;
  background-color: var(--bg-card);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="light"] .site-footer {
  background-color: #FFFFFF;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* System-Wide Scroll to Top Button */
.scroll-to-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--gold-primary);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  background: var(--gold-primary);
  color: #0F172A;
  box-shadow: 0 8px 24px var(--gold-glow);
  transform: translateY(-3px);
}

/* Hero Animated Scroll Down Indicator */
.hero-scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10;
}

.hero-scroll-down:hover {
  color: var(--gold-primary);
}

.hero-scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--gold-primary);
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-scroll-wheel {
  width: 4px;
  height: 8px;
  background: var(--gold-primary);
  border-radius: 2px;
  margin-top: 6px;
  animation: scrollWheelBounce 1.8s infinite;
}

@keyframes scrollWheelBounce {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.2;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fullscreen Section Sizing */
.fullscreen-section {
  min-height: calc(100vh - var(--topbar-height, 72px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

/* ==========================================================================
   DYNAMIC LOAD & SCROLL-REVEAL ANIMATIONS
   Silky, high-performance transforms for cards, badges, and text blocks
   ========================================================================== */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(18px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Immediate Load Utility Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-scale {
  animation: fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll-Triggered Reveal Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays for Grid Children */
.delay-100 { transition-delay: 0.1s; animation-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; animation-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; animation-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; animation-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; animation-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; animation-delay: 0.6s; }

/* Micro-Hover Interactivity Boosts */
.glass-panel, .card, .pricing-card, .legal-doc-card, .card-subtle {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-panel:hover, .pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   EQUAL-HEIGHT CARD GRIDS
   Only cards specifically placed inside a .card-grid wrapper stretch to match 
   their tallest sibling and push their call-to-action button to the bottom.
   ========================================================================== */

.card-grid {
  align-items: stretch;
}

.card-grid > .card,
.card-grid > .card-subtle,
.card-grid > .pricing-card,
.card-grid > .legal-doc-card,
.card-grid > .glass-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.card-grid > .pricing-card > *:last-child {
  margin-top: auto;
}

/* ==========================================================================
   MOBILE-FIRST APP EXPERIENCE (iOS / Android Native Feel)
   ========================================================================== */

@media (max-width: 768px) {
  /* Touch target sizes & native scrolling */
  html, body {
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }

  .container {
    padding: 0 16px;
  }

  .section-padding {
    padding: 44px 0;
  }

  /* Mobile Top Navbar: Clean app-style header */
  .navbar {
    padding: 0 16px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  body:has(.navbar) {
    padding-top: 64px;
  }

  .public-hamburger-btn {
    display: inline-flex !important;
    flex-shrink: 0;
  }

  /* In mobile view, hide the entire desktop nav-links container from the top header bar.
     Only the brand logo and the hamburger button remain visible.
     All links, auth buttons, and theme toggle are cleanly housed in the slideout mobile drawer. */
  .nav-links {
    display: none !important;
  }

  /* Headlines & Text scaling for mobile phones */
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.15rem !important; }

  /* Mobile Grid conversions to single/double columns */
  .pricing-card {
    padding: 28px 20px;
  }

  .price-amount {
    font-size: 2.4rem;
  }

  /* Safe Area padding for modern smartphones with bottom indicator bars */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Better modal behavior on small screens */
  .modal-box {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px auto;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 16px !important;
  }

  /* Table responsive horizontal scroll */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Comprehensive mobile layout & overflow containment */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .container,
  .legal-container,
  .legal-hub-container,
  .membership-page-wrap,
  .auth-box,
  .auth-form-pane,
  .pricing-single-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .legal-card,
  .pricing-card,
  .card,
  .card-subtle,
  .glass-panel,
  .company-meta-box {
    padding: 24px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force multi-column grids to collapse into single column on mobile */
  .legal-cards-grid,
  .membership-rules-grid,
  .membership-rules-list,
  .company-meta-box,
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent long strings, emails, URLs, or addresses from pushing past container bounds */
  p, h1, h2, h3, h4, h5, h6, li, td, th {
    overflow-wrap: break-word !important;
  }

  /* Protect badges, buttons, and pills from awkward mid-word breaks or squished layouts */
  .badge,
  .btn,
  .pill,
  button,
  [class*="badge-"] {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  /* Reset inline flex items with fixed min-widths that cause right leaking */
  div[style*="flex:"][style*="min-width"],
  a[style*="flex:"][style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Pricing Card & Promo Badge Mobile Polish */
  .pricing-card.featured::before {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 auto 14px auto !important;
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
    max-width: 90% !important;
  }

  .pricing-card.featured {
    text-align: center;
  }

  .pricing-card .benefit-list {
    text-align: left;
  }

  /* Wrap card header badges cleanly on mobile without overlapping */
  .pricing-card > div > div[style*="display: flex; justify-content: space-between"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* Toggle Pills in Membership */
  div[style*="border-radius: 999px"][style*="display: flex"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Form controls touch friendly */
  .form-control, input, select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    min-height: 44px; /* Apple minimum touch target guideline */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Center align footer content on mobile */
  .site-footer {
    text-align: center !important;
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-footer .container,
  .site-footer > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  .site-footer .brand-logo-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    min-width: unset !important;
  }

  .site-footer .brand-logo-wrap img {
    margin: 0 auto !important;
  }

  .site-footer div,
  .site-footer p,
  .site-footer span {
    text-align: center !important;
    width: 100% !important;
    min-width: unset !important;
  }
}

@media (max-width: 480px) {
  .btn-lg {
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
    width: 100%;
  }

  #authBtnContainer {
    display: none !important;
  }

  .auth-form-pane {
    padding: 24px 16px 40px !important;
  }

  .auth-form-box h2 {
    font-size: 1.35rem !important;
  }
}