/* ----- Signup Password Strength Meter (unified) ----- */
.password-strength-wrapper{margin-top:6px;background:#1a1a1a;border-radius:6px;position:relative;height:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset;}
.password-strength-bar{height:100%;width:0;background:#ff4444;transition:width .35s ease,background-color .35s ease;}
.password-strength-text{font-size:0.7rem;margin-top:4px;letter-spacing:.5px;text-transform:uppercase;color:#c98d65;font-weight:600;}
/* Accessibility helpers */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* === LI Aesthetics v2 (append-only, conflict-safe) === */
/* Readability: navbar links & section body text (headers untouched) */
:where(nav a, .navbar a, .nav a){ font-size: clamp(16px,1.15vw,18px); line-height: 1.3; }
:where(main p, .section-body p, .content-text, li){ font-size: clamp(16px,1.25vw,19px); line-height: 1.65; }
/* Slightly increase contrast on dark theme for long text */
body:not([data-theme="light"]) :where(main p, section p, .content-text, li){ color: #ddd; }

/* Graph containers: remove decorative boxes */
:where(.chart, .graph, .chart-card, .recharts-wrapper){
  border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important;
  padding-top: min(8px, 1vh); padding-bottom: min(8px, 1vh);
}
/* Also neutralize chart canvas frames in our layout */
:where(.chart-container canvas){ border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; }

/* Legends: namespaced, centered, larger */
.li-legend{ display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:10px;
  font-size: clamp(14px,1.1vw,16px);
}
.li-legend-item{ display:inline-flex; align-items:center; gap:8px; }
.li-legend-swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.li-legend-line{ width:18px; height:3px; display:inline-block; }
.li-blue{ background:#2f6fd3; }     /* chart blue */
.li-orange{ background:#e88a16; }   /* chart orange */

/* Stats box: single clean component under each graph */
.li-stats-card{ margin:14px auto 0; max-width:920px; padding:12px 14px; display:grid; gap:10px; text-align:center; background:transparent; }
.li-stats-row{ display:grid; grid-template-columns:1fr; gap:8px; }
.li-stat-item{ font-size: clamp(16px,1.3vw,19px); line-height:1.5; }
.li-stat-number{ font-weight:700; font-size: clamp(20px,1.8vw,24px); }
.li-stat-note{ font-size: clamp(13px,1vw,15px); opacity:.85; }
@media(min-width:768px){ .li-stats-row{ grid-template-columns:1fr 1fr; } }

/* Cards: horizontal scroll + click-to-reveal (namespaced) */
.li-cards-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,360px); gap:16px; overflow-x:auto; padding:8px 4px; scroll-snap-type:x mandatory; }
.li-card{ position:relative; height:260px; scroll-snap-align:start; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px; overflow:hidden; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease; }
.li-card:focus{ outline:2px solid rgba(120,160,255,.6); outline-offset:2px; }
.li-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.li-card-face{ position:absolute; inset:0; padding:14px; backface-visibility:hidden; }
.li-card-front{ transform:translateX(0); }
.li-card-back{ transform:translateX(100%); }
.li-card.revealed .li-card-front{ transform:translateX(-100%); }
.li-card.revealed .li-card-back{ transform:translateX(0); }
.li-card-actions{ display:flex; gap:10px; margin-top:12px; align-items:center; }
@media(min-width:1024px){ .li-cards-scroll{ grid-auto-columns:minmax(320px,380px); } .li-card{ height:280px; } }
/* Local Cardo font (falls back to system serif if not available) */
@font-face {
  font-family: 'Cardo';
  src: url('../assets/fonts/Cardo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cardo';
  src: url('../assets/fonts/Cardo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --header: #c98d65;
  --background: #343434;
  --text: #cbc2b1;
  --white: #f5f5f5;
  --accent: #b2d1ed;
  --secondary: #cbc2b1;
  --success: #4CAF50;
  --warning: #ff9800;
  --error: #f44336;
  /* Theme-aware backgrounds */
  --surface: rgba(52,52,52,0.95);
  --section-bg: rgba(52,52,52,0.0);
}

/* Base font sizing and Chrome-specific bump for readability */
html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* account.js adds .is-chrome to <html> when running in Chrome */
.is-chrome { font-size: 17px; }

[data-theme="light"] {
  --background: #f5f2ee;
  --text: #2a2a2a;
  --secondary: #4a4a4a;
  --surface: rgba(245,242,238,0.95);
  --section-bg: rgba(245,242,238,0.0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Cardo', Georgia, 'Times New Roman', Times, serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
}

/* 3D DNA background container */
#dna3d-wrap {
  position: fixed;
  inset: 0;
  z-index: -2;

/* Prevent horizontal scroll and ensure images scale down on mobile */
img, video, canvas, svg { max-width: 100%; height: auto; }
section, header, footer, nav { overflow-x: clip; }
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(178,209,237,0.08), rgba(0,0,0,0)) , url('../images/dna-static.svg') center/cover no-repeat;
}
#dna3d {
  width: 100%;
  height: 100%;
  display: block;
}

/* Custom cursor - only show on homepage */
body:not(.legal-page) {
  cursor: none;
}

/* Show default cursor on legal pages and forms */
.legal-page,
.form-group input,
.form-group select,
button,
a,
label {
  cursor: pointer;
}

.form-group input:focus,
.form-group select:focus {
  cursor: text;
}

/* Cursor Dot */
.cursor-dot {
  position: fixed;
  width: 18px;
  height: 18px;
  background-color: var(--header);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 10px var(--header), 0 0 20px var(--header);
  mix-blend-mode: difference;
  transition: transform 0.1s ease;
}
/* On touch devices, hide the custom cursor and use default */
@media (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot { display: none !important; }
}

/* Nav */
header#navbar {
  position: sticky;
  top: 0;
  background: var(--surface);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* Mobile navbar controls container */
.navbar-mobile-controls {
  display: none;
  align-items: center;
  gap: 15px;
}

/* Hamburger button (mobile only) */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--header);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  padding: 8px;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  position: relative;
  z-index: 1002;
}
.menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66,153,225,0.18);
}
.menu-toggle:hover {
  background: #b2764a; /* darker orange hover */
  transform: translateY(-1px);
}
.menu-toggle:active { transform: translateY(0); }
.menu-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  margin: 3px 0;
  transition: transform 180ms ease, opacity 160ms ease;
}

/* Hamburger animation */
.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle.active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Backdrop for mobile nav */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Light theme backdrop */
[data-theme="light"] .nav-backdrop {
  background: rgba(0, 0, 0, 0.3);
}

/* Collapsing header styles */
header#navbar {
  transition: all 0.3s ease;
}
header#navbar.scrolled {
  min-height: 50px;
  background: rgba(52, 52, 52, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
header#navbar.scrolled .logo {
  max-height: 40px;
}

/* Light theme scrolled header */
[data-theme="light"] header#navbar.scrolled {
  background: rgba(245, 242, 238, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .navbar-mobile-controls { display: flex; }
  .desktop-only { display: none !important; }
  
  /* Hide nav by default */
  header#navbar nav { 
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--background);
    border-left: 1px solid rgba(201,141,101,0.2);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 80px 20px 20px;
  }
  
  /* Light theme mobile nav */
  [data-theme="light"] header#navbar nav {
    background: var(--background);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  }
  
  /* Show nav when open */
  header#navbar.nav-open nav { 
    display: flex;
    right: 0;
  }
  
  /* Mobile header adjustments */
  header#navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    min-height: 70px;
  }
  
  header#navbar.scrolled {
    min-height: 60px;
    padding: 8px 20px;
  }
  
  header#navbar.scrolled .logo {
    max-height: 35px;
  }
  
  /* Prevent body scroll when nav is open */
  body.nav-open {
    overflow: hidden;
  }
  
  /* Add close button to mobile nav */
  header#navbar nav::before {
    content: '×';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: var(--header);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201,141,101,0.1);
    transition: all 0.3s ease;
  }
  
  header#navbar nav::before:hover {
    background: rgba(201,141,101,0.2);
    transform: scale(1.1);
  }
}

.logo {
  max-height: 60px;
  max-width: 200px;
  height: auto;
  width: auto;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo:hover {
  transform: scale(1.05);
}

a, a:visited, a:hover, a:active, a:focus {
  text-decoration: none !important;
}

/* Global navbar link protection - ensure no underlines ever appear */
header#navbar a, header#navbar a:visited, header#navbar a:hover, header#navbar a:active, header#navbar a:focus,
nav a, nav a:visited, nav a:hover, nav a:active, nav a:focus {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

/* Navbar link styling - remove all underlines */
nav a, nav a:visited, nav a:hover, nav a:active, nav a:focus,
nav ul li a, nav ul li a:visited, nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

.navbar-right a, .navbar-right a:visited, .navbar-right a:hover, .navbar-right a:active, .navbar-right a:focus {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  min-height: 64px;
  background: transparent;
  z-index: 1001;
  position: relative;
}
nav ul {
  display: flex;
  flex-direction: row;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Mobile-friendly navbar layout: sidebar navigation */
@media (max-width: 768px) {
  header#navbar nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  
  header#navbar nav ul {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
  }
  
  header#navbar nav ul li { 
    width: 100%; 
    border-bottom: 1px solid rgba(201,141,101,0.1);
  }
  
  header#navbar nav ul li:last-child {
    border-bottom: none;
  }
  
  header#navbar nav ul li a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 0;
    color: var(--text);
    font-size: 1.1em;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
  }
  
  header#navbar nav ul li a:hover {
    background: rgba(201,141,101,0.1);
    border-left-color: var(--header);
    padding-left: 12px;
  }
  
  header#navbar .navbar-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(201,141,101,0.2);
  }
  
  header#navbar .navbar-right .auth-btn {
    width: 100%;
    margin: 5px 0;
    padding: 12px;
    text-align: center;
  }
  
  header#navbar .navbar-right .lang-toggle {
    width: auto;
    min-width: 60px;
  }
  
  header#navbar .navbar-right .cart-link {
    margin-left: 0;
    padding: 8px 0;
  }
}

@media (max-width: 480px) {
  header#navbar { 
    padding: 10px 16px; 
  }
  
  header#navbar.scrolled {
    padding: 6px 16px;
  }
  
  .logo {
    max-height: 45px;
  }
  
  header#navbar.scrolled .logo {
    max-height: 32px;
  }
  
  header#navbar nav {
    width: 100%;
    right: -100%;
  }
  
  header#navbar nav ul li a {
    padding: 18px 0;
    font-size: 1.05em;
  }
  
  /* Larger touch targets for mobile */
  .menu-toggle {
    padding: 12px 14px;
    min-width: 48px;
    min-height: 48px;
  }
  
  .auth-btn {
    min-height: 48px;
    padding: 12px 16px;
  }
  
  .lang-toggle {
    min-height: 48px;
    min-width: 48px;
  }
}
.cart-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: 'Cardo', serif;
  color: var(--header);
  background: none;
  border: none;
  font-size: 1em;
  margin-left: 10px;
  text-decoration: none;
  z-index: 2;
  padding: 0 4px;
}
.cart-icon {
  font-size: 28px;
  margin-right: 0;
  display: block;
}

/* Sticky header override: ensure navbar remains visible on scroll.
   Using fixed positioning and a small body padding to avoid content
   jumping. This is intentionally high-specificity and append-only to
   avoid conflicting with existing layout rules. */
:root { --navbar-height: 72px; }
header#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  will-change: transform;
}
/* Push page content down so the fixed header doesn't overlap it */
body { padding-top: var(--navbar-height); }

@media (max-width: 768px) {
  :root { --navbar-height: 70px; }
  body { padding-top: var(--navbar-height); }
  header#navbar { position: fixed !important; }
}
.cart-link #cart-count {
  position: static;
  background: none;
  color: var(--header);
  border-radius: 0;
  padding: 0;
  font-size: 1.1em;
  min-width: auto;
  text-align: left;
  display: inline;
  font-weight: bold;
  box-shadow: none;
  border: none;
  margin-left: 4px;
}
/* Consolidated navbar link styles - NO UNDERLINES */
nav ul li a, nav ul li a:visited, nav ul li a:active, nav ul li a:focus {
  color: var(--header);
  font-family: 'Cardo', serif;
  font-weight: bold;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: none;
  transition: color 0.3s, transform 0.3s;
  border-radius: 6px;
  padding: 10px 16px; /* larger tap target */
}

nav ul li a:hover {
  color: var(--white);
  background: rgba(201, 141, 101, 0.1);
  transform: scale(1.08);
  text-decoration: none !important;
}

nav ul li a.active-page {
  color: var(--white);
  background: rgba(201, 141, 101, 0.2);
  text-decoration: none !important;
}

/* Language toggle and auth buttons */
.lang-toggle, .auth-btn, .dashboard-link {
  font-family: 'Cardo', serif;
  background: linear-gradient(135deg, var(--accent), var(--header));
  color: var(--background);
  border: none;
  border-radius: 25px;
  padding: 10px 22px; /* larger tap target */
  margin-left: 12px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(178, 209, 237, 0.15);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
  outline: none;
}
.lang-toggle:hover, .auth-btn:hover, .dashboard-link:hover {
  background: linear-gradient(135deg, var(--header), var(--accent));
  color: var(--white);
  box-shadow: 0 4px 24px rgba(201, 141, 101, 0.25);
  transform: translateY(-2px) scale(1.04);
}

/* Navbar right section */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hero Section */
#hero {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  padding-bottom: 120px;
}

/* HERO LOGO FULLSCREEN BACKGROUND WITH FLOAT/PARALLAX */
.hero-logo-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 900px;
  height: 900px;
  min-width: 600px;
  min-height: 600px;
  max-width: 90vw;
  max-height: 90vh;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 60px #b2d1ed88);
  transition: opacity 0.3s, filter 0.3s, width 0.3s, height 0.3s, transform 0.5s cubic-bezier(.4,1.4,.6,1);
  object-fit: contain;
  background: none !important;
  animation: hero-float 8s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1.1); }
  50% { transform: translate(-50%, -52%) scale(1.13); }
}
@media (max-width: 900px) {
  .time-box { padding: 12px 10px; font-size: 1.1em; min-width: 56px; }
  .countdown-horizontal { gap: 12px; }
  .countdown-wrapper { margin-bottom: 24px; }
  #hero { padding-bottom: 90px; }
}
@media (max-width: 600px) {
  .hero-logo-bg { width: 320px; height: 320px; min-width: 120px; min-height: 120px; }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  animation: hero-content-float 7s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(.4,1.4,.6,1);
}
@keyframes hero-content-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-title {
  font-size: 4em;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #cbc2b1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-glow 2s ease-in-out infinite alternate;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 1200px;
}

@keyframes hero-glow {
  from { filter: brightness(1) drop-shadow(0 0 1px rgb(255, 255, 255)); }
  to { filter: brightness(1) drop-shadow(0 0 1px rgb(160, 161, 161)); }
}

@media (max-width: 900px) {
  .hero-title {
    font-size: 1em;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 2.2em;
    margin: 0 0 20px 0;
  }
}

/* COUNTDOWN LAYOUTS */
.countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  transition: all 0.5s cubic-bezier(.4,1.4,.6,1), opacity 0.5s;
}
.countdown-horizontal {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(.4,1.4,.6,1);
}
.countdown-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transition: all 0.5s cubic-bezier(.4,1.4,.6,1);
}

.time-box {
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: 'Cardo', serif;
  font-size: 1.3em;
  color: var(--header);
  box-shadow: 0 2px 12px rgba(178,209,237,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  margin: 0 2px;
  transition: background 0.3s, box-shadow 0.3s;
}
@media (max-width: 600px) {
  .time-box { padding: 12px 10px; font-size: 1.05em; min-width: 56px; }
  .countdown-horizontal { gap: 12px; }
  .countdown-wrapper { margin-bottom: 20px; }
  #hero { padding-bottom: 80px; }
}

.time-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(201, 141, 101, 0.3);
}

.time-box span {
  display: block;
  font-size: 2em;
  font-weight: bold;
  color: var(--header);
  text-shadow: 0 0 10px rgba(201, 141, 101, 0.5);
}

.time-box small {
  font-size: 0.8em;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-tagline {
  font-size: 1.3em;
  color: var(--text);
  max-width: 600px;
  margin-bottom: 40px;
  transition: all 0.3s ease;
}

.hero-cta {
  margin-top: 30px;
}

.support-btn {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
  border: none;
  padding: 15px 30px;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(201, 141, 101, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.support-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(201, 141, 101, 0.5);
  background: linear-gradient(135deg, #b2764a, var(--header));
}

/* Section Styles */
section {
  padding: 120px 0 120px 0;
  position: relative;
  z-index: 1;
  background: var(--section-bg);
  margin: 0;
  box-shadow: none;
  border: none;
  transition: background 0.4s;
  min-height: 80vh;
}
@media (max-width: 900px) {
  section { padding: 90px 0 90px 0; min-height: 70vh; }
}
@media (max-width: 600px) {
  section { padding: 56px 0 56px 0; min-height: 60vh; }
}

/* Parallax background for sections */
.section-parallax-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  will-change: transform;
  transition: opacity 0.4s;
}

/* Scroll reveal animation - sections start visible, animate on scroll */
.section-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.7s cubic-bezier(.4,1.4,.6,1), transform 0.7s cubic-bezier(.4,1.4,.6,1);
}
.section-reveal.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Countdown remains static and centered - no sticky behavior */

/* Remove box/border from interactive-box, hero-logo-wrapper, etc. */
.interactive-box, .hero-logo-wrapper {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure all content is visible */
.interactive-box {
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  background: rgba(255,255,255,0.13);
  border: 1.5px solid rgba(178,209,237,0.25);
  box-shadow: 0 8px 32px rgba(178,209,237,0.10);
  border-radius: 22px;
  padding: 48px 36px;
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
  transition: background 0.3s, box-shadow 0.3s, border 0.3s;
}
@media (max-width: 900px) {
  .interactive-box { padding: 32px 12px; max-width: 98vw; }
}
@media (max-width: 600px) {
  .interactive-box { padding: 18px 2px; max-width: 100vw; }
}

/* Section content should always be visible */
section h2, section h3, section p, section div {
  opacity: 1;
  visibility: visible;
}

h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--header);
  margin-bottom: 28px;
  text-align: center;
  text-shadow: 0 0 20px rgba(201, 141, 101, 0.3);
}

h3 {
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--accent);
  margin-bottom: 16px;
}

p {
  font-size: clamp(1.15rem, 2.4vw, 1.28rem);
  line-height: 1.85;
  margin-bottom: 18px;
}

/* Why Section */
.why-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  margin-top: 45px;
}

.why-card {
  background: rgba(255, 255, 255, 0.08);
  padding: 35px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(201, 141, 101, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.why-card h3 {
  font-size: 1.5em;
  margin-bottom: 18px;
  color: var(--header);
}

/* Statistics Section */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 35px;
  margin-top: 45px;
}

.stat-card {
  text-align: center;
  padding: 35px 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(201, 141, 101, 0.2);
}

.stat-number {
  font-size: 3.2em;
  font-weight: bold;
  color: var(--header);
  text-shadow: 0 0 20px rgba(201, 141, 101, 0.5);
  margin-bottom: 12px;
}

.stat-label {
  font-size: 1.15em;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Charts Container */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin: 45px 0 35px 0;
  justify-items: center;
}

.chart-wrapper {
  text-align: center;
  margin-bottom: 25px;
}

.chart-container {
  margin: 20px 0 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.chart-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(178, 209, 237, 0.15);
}

/* Products Section */
/* Deprecated carousel wrapper (kept for backward compat, acts like grid) */
.products-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
  justify-items: center;
}

/* Products Section */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
  justify-items: center;
}

/* Flip-card layout */
.product-card {
  width: 100%;
  max-width: 380px;
  min-height: 450px;
  perspective: 1000px; /* enable 3D */
}

.product-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.85,.25,1);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.product-card:hover .card-inner {
  box-shadow: 0 15px 40px rgba(178,209,237,0.25);
}

.product-card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  padding: 36px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75)), var(--card-color, var(--header));
  color: #1f1f1f;
}

.card-front h3,
.card-back h3 {
  font-size: 1.45em;
  margin-bottom: 10px;
  color: #1f1f1f;
  font-weight: 700;
}

.card-front p {
  font-size: 1.05em;
  margin-bottom: 12px;
  color: #333;
  line-height: 1.6;
}

.card-price {
  font-size: 1.5em;
  font-weight: 700;
  color: #111;
  text-shadow: none;
  margin: 8px 0 14px 0;
}

.per-month { font-size: 0.7em; font-weight: normal; }

.card-back {
  transform: rotateY(180deg);
}

.card-points {
  text-align: left;
  margin: 8px 0 18px 0;
  padding-left: 18px;
  color: #222;
}
  .card-points li { margin-bottom: 6px; }

.card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.flip-hint, .flip-close {
  background: rgba(255,255,255,0.2);
  color: var(--background);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}

.flip-hint:hover, .flip-close:hover {
  background: rgba(255,255,255,0.28);
}

/* Unlock Story Section */
.unlock-story-section {
  padding: 60px 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(201, 141, 101, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin: 40px auto;
  max-width: 1200px;
  position: relative;
  overflow: hidden;
}

.unlock-story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(201, 141, 101, 0.1) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.unlock-story-content {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
}

.unlock-story-content h1 {
  font-size: 3.5em;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #c98d65 0%, #e6b17a 50%, #c98d65 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { filter: brightness(1) drop-shadow(0 0 5px rgba(201, 141, 101, 0.5)); }
  to { filter: brightness(1.1) drop-shadow(0 0 15px rgba(201, 141, 101, 0.8)); }
}

@media (max-width: 900px) {
  .unlock-story-content h1 {
    font-size: 2.8em;
  }
}

@media (max-width: 600px) {
  .unlock-story-content h1 {
    font-size: 2.2em;
  }
  
  .unlock-story-section {
    padding: 40px 0;
    margin: 20px auto;
  }
}

/* Support Form */
.support-intro {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: var(--text);
}

.support-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 10px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 22px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
  .flip-hint:hover, .flip-close:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 10px rgba(201, 141, 101, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: bold;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 1px;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin-top: 5px;
}

.checkbox-group label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.5;
}

.form-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
.card-actions .modal-add-btn,
.card-actions .buy-now-btn {
  border-radius: 26px;
  padding: 12px 18px;
  font-weight: 700;
  border: none;
}
}

.submit-btn,
.stripe-btn,
.paypal-btn {
  padding: 16px 28px;
  border: none;
  border-radius: 25px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Modern interactive button styles for primary actions */
.submit-btn, .stripe-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.02em;
  letter-spacing: 0.6px;
  border: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 220ms ease, opacity 160ms ease;
  will-change: transform;
}

.submit-btn {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
  box-shadow: 0 8px 30px rgba(178,209,237,0.12);
}

.submit-btn:hover { transform: translateY(-3px) scale(1.01); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(178,209,237,0.12); }

.stripe-btn {
  background: linear-gradient(135deg,#0070ba,#1546a0);
  color: #fff;
  box-shadow: 0 10px 36px rgba(0,112,186,0.14);
}
.stripe-btn:hover { transform: translateY(-3px) scale(1.01); }
.stripe-btn:active { transform: translateY(0); }
.stripe-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(16,95,170,0.12); }

/* Active / loading state */
.btn-loading { opacity: 0.9; pointer-events: none; transform: translateY(0) scale(1); }
.stripe-btn.active { background: linear-gradient(135deg,#0a84d6,#0c5fa8); box-shadow: 0 12px 44px rgba(10,132,214,0.16); }

/* Spinner inside buttons */
.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.95);
  animation: spin 800ms linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.submit-btn {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 141, 101, 0.4);
}

/* Donation button styling
   NOTE: The preferred CSS class name is ".stripe-btn"; ".paypal-btn" is
   preserved for backward compatibility with older templates and scripts.
   Visually this button represents the Stripe donation action (no PayPal
   integration visible to users).
*/
.stripe-btn, .paypal-btn {
  background: linear-gradient(135deg, #0070ba, #1546a0);
  color: var(--white);
}

.stripe-btn:hover, .paypal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 112, 186, 0.4);
}

.stripe-notice, .paypal-notice {
  /* Donation provider notice area (now used to display Stripe-related info).
     Class name kept as .paypal-notice for compatibility with existing markup. */
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-style: italic;
}

.notice {
  text-align: center;
  margin: 10px auto 20px auto;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(178,209,237,0.5);
  border-radius: 10px;
  color: var(--text);
  max-width: 700px;
}

/* Legal Section */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 50px;
  margin-top: 40px;
  justify-items: center;
  align-items: stretch;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.legal-card {
  background: rgba(52, 52, 52, 0.95) !important;
  padding: 50px;
  border-radius: 15px;
  border: 1px solid rgba(178, 209, 237, 0.3);
  transition: all 0.3s ease;
  opacity: 1.0;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(10px);
  text-align: center;
}

.legal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(201, 141, 101, 0.2);
}

.legal-card h3 {
  color: var(--header);
  margin-bottom: 25px;
  font-size: 1.5em;
  font-weight: 600;
}

.legal-card p {
  margin-bottom: 30px;
  line-height: 1.7;
  flex-grow: 1;
  font-size: 1.05em;
}

.legal-link {
  color: var(--accent);
  text-decoration: none !important;
  transition: color 0.3s ease;
  font-weight: bold;
  margin-top: auto;
}

.legal-link:hover {
  color: var(--header);
  text-decoration: none !important;
}

/* Contact Form */
.contact-form {
  max-width: 500px;
  margin: 0 auto;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

/* Modal vertical centering and scroll */
.modal-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 90vh;
  min-height: 300px;
  overflow-y: auto;
  padding: 40px 30px;
}
.modal-content {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  overflow-y: auto;
  padding-bottom: 10px;
}

/* MODAL TOP PADDING */
.modal-content {
  padding-top: 32px;
}

.modal-box.active {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2em;
  color: var(--text);
  cursor: pointer;
  transition: color 0.3s ease;
}

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

.modal-content h2 {
  color: var(--header);
  margin-bottom: 20px;
  text-align: left;
}

.modal-content p {
  margin-bottom: 20px;
}

.modal-btns {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.modal-btns button {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.modal-add-btn {
  background: var(--header);
  color: var(--white);
}

.modal-purchase-btn {
  background: var(--accent);
  color: var(--background);
}

.modal-btns button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Cart */
#cart-container {
  position: relative;
  cursor: pointer;
}

#cart-icon {
  font-size: 1.5em;
  color: var(--header);
  transition: transform 0.3s ease;
}

#cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--header);
  color: var(--white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: bold;
}

#cart-container:hover #cart-icon {
  transform: scale(1.1);
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal.from-left {
  transform: translateX(-50px);
}

.reveal.from-left.active {
  transform: translateX(0);
}

.reveal.from-right {
  transform: translateX(50px);
}

.reveal.from-right.active {
  transform: translateX(0);
}

/* Particles */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--background);
}

/* Footer */
footer {
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Support and newsletter centering */
.support-form, .contact-form {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
}
.form-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
.paypal-notice, .payment-info-line {
  text-align: center;
  margin-top: 18px;
  color: var(--text);
  font-size: 0.98em;
  font-style: italic;
}
.payment-info-line {
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--accent);
}

/* NEWSLETTER LABEL & BUTTON */
.contact-form label[for="updates"] {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 1.1em;
  color: var(--header);
  margin-bottom: 10px;
  font-family: 'Cardo', serif;
}
.contact-form button[type="submit"] {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
  border: none;
  border-radius: 25px;
  padding: 16px 28px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s, box-shadow 0.3s;
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(201, 141, 101, 0.12);
}
.contact-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #b2764a, var(--header));
  color: var(--white);
  box-shadow: 0 4px 24px rgba(201, 141, 101, 0.25);
  transform: translateY(-2px) scale(1.04);
}

/* DASHBOARD PLACEHOLDER */
.dashboard-placeholder {
  max-width: 700px;
  margin: 60px auto;
  padding: 40px 30px;
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  text-align: center;
  font-family: 'Cardo', serif;
  color: var(--text);
  box-shadow: 0 2px 24px rgba(178,209,237,0.08);
}
.dashboard-placeholder h1 {
  color: var(--header);
  font-size: 2.2em;
  margin-bottom: 18px;
}
.dashboard-placeholder p {
  color: var(--accent);
  font-size: 1.1em;
}

/* Responsive Design */
@media (max-width: 768px) {
  header#navbar {
    padding: 12px 16px;
  }
  
  nav ul {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  }
  
  nav ul li a {
    padding: 6px 12px;
    font-size: 0.9em;
    text-decoration: none !important;
  }
  
  .countdown-wrapper {
    gap: 8px;
    margin: 20px auto;
    max-width: 100%;
    overflow: hidden;
  }
  
  .time-box {
    padding: 8px 6px;
    min-width: 50px;
    max-width: 70px;
    font-size: 0.9em;
  }
  
  .time-box span {
    font-size: 1.2em;
    font-weight: 600;
  }
  
  .time-box small {
    font-size: 0.7em;
  }
  
  .why-content,
  .stats-grid,
  .legal-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-container {
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 35px 0 25px 0;
  }
  
  .chart-container {
    margin: 15px 0 10px 0;
    min-height: 250px;
  }
  
  .products-carousel, .products-grid { grid-template-columns: 1fr; gap: 20px; }
  
  .product-card { max-width: 100%; min-height: 420px; }
  
  .form-buttons {
    flex-direction: column;
  }
  
  /* Fix form field widths on mobile */
  .form-group {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .support-form textarea,
  .contact-form textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  /* Support form specific mobile fixes */
  .support-form .form-group,
  .contact-form .form-group {
    margin-bottom: 15px;
  }
  
  .submit-btn,
  .stripe-btn,
  .paypal-btn {
    width: 100%;
  }
  
  h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin-bottom: 25px;
  }
  
  h3 {
    font-size: clamp(1.2rem, 3.8vw, 1.4rem);
    margin-bottom: 18px;
  }
  
  p {
    font-size: clamp(1.1rem, 3vw, 1.15rem);
    margin-bottom: 18px;
  }
  
  section {
    padding: 50px 16px;
  }
  
  .interactive-box { padding: 24px 16px; }
  
  .chart-bullets {
    margin-top: 25px;
    max-width: 100%;
  }
  
  .chart-bullets .bullet-point {
    font-size: 1em;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .hero-logo-bg {
    width: 300px;
  }
  
  .countdown-wrapper {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px auto;
    max-width: 100%;
    overflow: visible;
    width: 100%;
  }
  
  .countdown {
    display: flex !important;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .countdown-label {
    font-size: 2em;
    display: block !important;
    text-align: center;
    margin-bottom: 15px;
  }
  
  .time-box {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    min-width: 50px;
    max-width: 70px;
    font-size: 0.9em;
    background: rgba(52, 52, 52, 0.7);
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin: 0 2px;
  }
  
  .time-box span {
    font-size: 1.2em;
    font-weight: 600;
    display: block !important;
  }
  
  .time-box small {
    font-size: 0.7em;
    display: block !important;
  }
  
  .hero-tagline {
    font-size: 1.1em;
  }
  
  .time-box span {
    font-size: 1.2em;
  }
  
  .product-card { max-width: 100%; min-height: 380px; }
  
  .charts-container {
    gap: 25px;
    margin: 30px 0 20px 0;
  }
  
  .chart-container {
    min-height: 200px;
  }
  
  .chart-bullets {
    margin-top: 20px;
  }
  
  .chart-bullets .bullet-point {
    font-size: 0.95em;
    margin-bottom: 8px;
  }
  
  h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    margin-bottom: 20px;
  }
  
  h3 {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
    margin-bottom: 15px;
  }
  
  p {
    font-size: clamp(1rem, 3.2vw, 1.1rem);
    margin-bottom: 16px;
  }
}

@media (max-width: 900px) {
  nav {
    padding: 0 10px;
    min-height: 54px;
  }
  nav ul {
    gap: 10px;
  }
  .navbar-right {
    gap: 6px;
  }
  .cart-link {
    font-size: 0.98em;
    margin-left: 4px;
  }
  .cart-link svg {
    width: 22px;
    height: 22px;
  }
  .cart-link #cart-count {
    font-size: 0.90em;
    padding: 2px 6px;
    min-width: 15px;
    top: 1px;
    right: 0px;
  }
}
@media (max-width: 600px) {
  nav {
    flex-direction: column;
    align-items: stretch;
    padding: 0 2px;
    min-height: 44px;
  }
  nav ul {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    font-size: 0.98em;
  }
  .navbar-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 2px;
  }
  .cart-link, .lang-toggle, .auth-btn {
    font-size: 0.95em;
    padding: 0 2px;
  }
  .cart-link svg {
    width: 19px;
    height: 19px;
  }
  .cart-link #cart-count {
    font-size: 0.88em;
    padding: 1px 5px;
    min-width: 12px;
    top: 0px;
    right: 0px;
  }
}

/* Password show/hide toggle (small, isolated) */
.password-toggle-wrapper{ position: relative; display: inline-block; width:100%; }
.password-toggle-wrapper input[type="password"], .password-toggle-wrapper input[type="text"]{ padding-right: 64px; }
.pw-toggle-btn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--secondary); font-weight:700; cursor: pointer; padding:6px 10px; border-radius:8px; font-size:0.95rem; }
.pw-toggle-btn:focus{ outline: 2px solid rgba(66,153,225,0.22); }
.pw-toggle-btn[aria-pressed="true"]{ color: var(--header); }
/* Ensure toggle doesn't appear in non-form areas */
form .pw-toggle-btn{ display: inline-flex; align-items:center; gap:8px; }
@media (max-width:480px){ .password-toggle-wrapper input[type="password"], .password-toggle-wrapper input[type="text"]{ padding-right:72px; } .pw-toggle-btn{ right:8px; font-size:0.95rem; } }

/* Utility Classes */
.clickable-section {
  cursor: pointer;
}

.clickable-section .interactive-box {
  transition: all 0.3s ease;
}

/* === LI Hotfix 2025-09-05: readability + product cards alignment/interaction === */
/* Bump non-header text size slightly for better readability */
body section p,
body li,
.section-description,
.content-text { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.72; }

/* Ensure products grid renders cards side-by-side up to 3 per row on wide screens */
#products .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Make flip affordance obvious */
.product-card .flip-hint { cursor: pointer; filter: saturate(1.05); transition: transform .15s ease, box-shadow .2s ease; }
.product-card .flip-hint:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.product-card .flip-close { cursor: pointer; }

/* Guarantee flip works: maintain 3D context and pointer-events */
.product-card { perspective: 1000px; }
.product-card .card-inner { transform-style: preserve-3d; }
.product-card.flipped .card-inner { transform: rotateY(180deg); }

/* Avoid any overridden overflow hiding the back */
.product-card .card-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Allow more columns in products on wide screens */
#products .interactive-box { max-width: 1200px; }
@media(min-width: 1280px){ #products .interactive-box { max-width: 1400px; } }


.clickable-section:hover .interactive-box {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Custom Amount Field */
.custom-amount {
  transition: all 0.3s ease;
}

/* Animation for stats */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-number {
  animation: countUp 0.8s ease-out;
}

/* LANGUAGE TOGGLE BUTTON */
.lang-toggle {
  font-family: 'Cardo', serif;
  background: #b2d1ed;
  color: var(--background);
  border: none;
  border-radius: 25px;
  padding: 8px 22px;
  margin-left: 12px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(178, 209, 237, 0.15);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
  outline: none;
}
.lang-toggle:hover {
  background: #a0c4e8;
  color: var(--white);
  box-shadow: 0 4px 24px rgba(178, 209, 237, 0.25);
  transform: translateY(-2px) scale(1.04);
}

/* SIGN IN/UP MODALS */
.auth-modal-box {
  max-width: 420px;
  margin: 0 auto;
  background: var(--background);
  border-radius: 18px;
  box-shadow: 0 2px 24px rgba(178,209,237,0.08);
  padding: 32px 24px 24px 24px;
}
.auth-form input, .auth-form button {
  font-family: 'Cardo', serif;
  font-size: 1rem; /* >=16px to avoid iOS zoom */
  margin-bottom: 14px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cbc2b1;
  padding: 14px 16px;
  min-height: 44px; /* touch target */
}
.auth-form button {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
  border: none;
  font-weight: bold;
  box-shadow: 0 2px 12px rgba(201, 141, 101, 0.12);
  transition: all 0.3s, box-shadow 0.3s;
}
.auth-form button:hover {
  background: linear-gradient(135deg, #b2764a, var(--header));
  color: var(--white);
  box-shadow: 0 4px 24px rgba(201, 141, 101, 0.25);
  transform: translateY(-2px) scale(1.04);
}

/* Activity picker buttons */
.activity-btn {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.activity-btn:hover { background: rgba(255,255,255,0.15); }
.activity-btn.active {
  background: var(--header);
  color: var(--background);
  border-color: var(--header);
}

/* Sign In/Up button styling to match Support button */
.auth-btn {
  background: linear-gradient(135deg, var(--header), #b2764a);
  color: var(--white);
  border: none;
  border-radius: 25px;
  padding: 14px 24px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(201, 141, 101, 0.12);
  font-family: 'Cardo', serif;
  min-height: 44px; /* touch target */
}
.auth-btn:hover {
  background: linear-gradient(135deg, #b2764a, var(--header));
  color: var(--white);
  box-shadow: 0 4px 24px rgba(201, 141, 101, 0.25);
  transform: translateY(-2px) scale(1.04);
}

/* Disabled state for soft launch */
.disabled,
.auth-btn[disabled],
.cart-link.disabled,
.modal-btns button[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(20%);
}

@media (max-width: 900px) {
  .cart-icon {
    font-size: 26px;
  }
  .cart-link #cart-count {
    font-size: 1.05em;
  }
}
@media (max-width: 600px) {
  .cart-icon {
    font-size: 24px;
  }
  .cart-link #cart-count {
    font-size: 1em;
  }
}

/* Impact Chart Section */
.chart-section {
  margin-top: 50px;
  text-align: center;
}

.chart-section .chart-title {
  margin-bottom: 30px;
  font-size: 1.6em;
  color: var(--header);
}

.chart-section .chart-container {
  margin: 25px 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
}

.chart-section .chart-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(178, 209, 237, 0.15);
}

.chart-bullets {
  margin-top: 30px;
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.chart-bullets .bullet-point {
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
  font-size: 1.1em;
  line-height: 1.6;
}

.chart-bullets .bullet-point:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2em;
}

/* Carousel outer wrapper for centering */
.carousel-outer {
  display: flex;
  justify-content: center;
  width: 100vw;
  overflow: visible;
  pointer-events: none;
}
.carousel-outer > * {
  pointer-events: auto;
}

/* Centering and width for carousels */
.why-carousel, .impact-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 40px;
  padding-bottom: 24px;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
  justify-content: flex-start;
  perspective: 1200px;
  box-sizing: border-box;
  position: relative;
}
.why-carousel::before, .why-carousel::after,
.impact-carousel::before, .impact-carousel::after {
  content: '';
  flex: 1 0 0;
  min-width: 1px;
  height: 1px;
  pointer-events: none;
}
@media (max-width: 900px) {
  .why-carousel, .impact-carousel {
    padding-left: 2vw;
    padding-right: 2vw;
    width: 98vw;
  }
}

/* Carousel cards */
.carousel-card, .legal-card {
  min-width: 340px;
  max-width: 400px;
  flex: 0 0 340px;
  scroll-snap-align: center;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(178,209,237,0.10);
  background: rgba(255,255,255,0.18);
  transition: transform 0.4s, box-shadow 0.4s, opacity 0.4s;
  opacity: 0.85;
  will-change: transform, opacity;
  margin: 0 0 0 0;
}

/* Legal cards row - updated to use consistent styling */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* Support form textarea */
.support-form textarea {
  width: 100%;
  min-height: 220px;
  max-width: 800px;
  font-size: 1.13em;
  border-radius: 16px;
  border: 1.5px solid #b2d1ed;
  padding: 22px 24px;
  margin: 0 auto 18px auto;
  display: block;
  resize: vertical;
  background: rgba(255,255,255,0.13);
  color: var(--header);
  box-shadow: 0 2px 12px rgba(178,209,237,0.08);
  transition: border 0.3s;
}
.support-form textarea::placeholder {
  color: #b2d1ed;
  opacity: 0.7;
  font-size: 0.98em;
}

/* Support form checkboxes */
.support-form .checkbox-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.support-form .checkbox-row label {
  font-family: 'Cardo', serif;
  color: var(--header);
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.support-form .checkbox-row input[type="checkbox"] {
  accent-color: #b2d1ed;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

/* ==========================================
   TYPOGRAPHY & SPACING (Accessible defaults)
   - Responsive text sizes for paragraphs/notes/buttons
   - Vertical rhythm variables and spacing helpers
   - Safe focus-visible outlines
   Note: headers (h1–h3) and navbar are intentionally untouched here.
========================================== */

/* Vertical rhythm variables */
:root {
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 36px;
  --space-xl: 56px;
}

@media (max-width: 768px) {
  :root {
    /* ~15% reduction on mobile to avoid large gaps */
    --space-sm: 10px;
    --space-md: 17px;
    --space-lg: 30px;
    --space-xl: 48px;
  }
}

/* Paragraphs in content areas */
main p,
section p,
.interactive-box p,
.content-text p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

/* Small notes / legends */
small,
.note,
.footnote,
figcaption,
.legend-text {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
}

/* Buttons and form controls: readable, tappable */
/* Scope to content areas to avoid impacting navbar buttons */
.interactive-box button,
section button,
.content-text button,
.modal-btns button,
.card-actions button,
.flip-hint,
.flip-close,
.btn,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.25;
  min-height: 44px; /* WCAG touch target */
}

/* Ensure 18px minimum text size for paragraphs on desktop */
@media (min-width: 768px) {
  main p,
  section p,
  .interactive-box p,
  .content-text p {
    font-size: clamp(18px, 1.2vw, 19px);
  }
}

/* Checkbox/radio labels: ensure comfortable hit area */
.support-form .checkbox-row label,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  min-height: 44px;
  align-items: center;
}

/* Spacing from section headers to first text block */
section h2 + p,
section h2 + .section-description,
.interactive-box h2 + p {
  margin-top: var(--space-md);
}

/* Safe, consistent focus outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* =============================================================
  LI Card Theme v3 2025-09-05 (append-only, no breaking changes)
  Distinct pale palette per product card + high contrast text
  Modern, interactive buttons (accessible, focus-visible)
  ============================================================= */
.product-card[data-product="gene"] { --card-bg-1:#e8f2fa; --card-bg-2:#d6e7f4; --card-accent:#2f6fd3; --card-accent-alt:#194980; --btn1-start:#2f6fd3; --btn1-end:#1e4f94; --btn2-start:#b2d1ed; --btn2-end:#8fbfe4; --card-text:#1b242d; --card-text-muted:#2e3b45; }
.product-card[data-product="microbiome"] { --card-bg-1:#ffffff; --card-bg-2:#f5f7f8; --card-accent:#4a5a61; --card-accent-alt:#2d3a40; --btn1-start:#4a5a61; --btn1-end:#2d3a40; --btn2-start:#cddfe4; --btn2-end:#a9c5ce; --card-text:#1c2326; --card-text-muted:#39464c; }
.product-card[data-product="toxicity"] { --card-bg-1:#f9eee7; --card-bg-2:#f3dac8; --card-accent:#c27034; --card-accent-alt:#8b4d1d; --btn1-start:#c27034; --btn1-end:#8b4d1d; --btn2-start:#f0c6a5; --btn2-end:#e2a873; --card-text:#2a1f18; --card-text-muted:#4b3a31; }
.product-card[data-product="subscription"] { --card-bg-1:#fbf3e7; --card-bg-2:#f2dfc2; --card-accent:#b97a2d; --card-accent-alt:#80531a; --btn1-start:#b97a2d; --btn1-end:#80531a; --btn2-start:#f0d2aa; --btn2-end:#e2b97d; --card-text:#2a241d; --card-text-muted:#4d4034; }

.product-card .card-face { background: linear-gradient(145deg,var(--card-bg-1,#ffffff),var(--card-bg-2,#f2f2f2)) !important; color: var(--card-text,#1d1f20) !important; }
.product-card .card-face h3 { color: var(--card-accent,#c98d65) !important; text-shadow:none; letter-spacing:.5px; }
.product-card .card-face p, .product-card .card-face li { color: var(--card-text-muted,#333) !important; }
.product-card .card-price { color: var(--card-accent,#c98d65) !important; text-shadow:none; }
.product-card .includes { color: var(--card-accent-alt,var(--card-accent,#c98d65)); margin:4px 0 6px 0; }

.product-card:not(.flipped) .card-inner { transition: box-shadow .35s ease, transform .35s ease; }
.product-card:not(.flipped):hover .card-inner { box-shadow:0 18px 42px -6px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.10); }

.product-card .card-actions button, .product-card .flip-hint, .product-card .flip-close { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:'Cardo',serif; font-weight:600; line-height:1.1; border:none; border-radius:28px; padding:12px 22px; cursor:pointer; font-size:clamp(14px,.9rem,16px); transition:background .5s ease, box-shadow .35s ease, transform .25s ease, color .4s ease; overflow:hidden; isolation:isolate; will-change:transform; }
.product-card .card-actions .modal-add-btn { background:linear-gradient(135deg,var(--btn1-start,#c98d65),var(--btn1-end,#9d663d)); color:#fff; box-shadow:0 4px 14px -2px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.25) inset; }
.product-card .card-actions .buy-now-btn { background:linear-gradient(135deg,var(--btn2-start,#e8d4c3),var(--btn2-end,#d9b494)); color:#1d252c; box-shadow:0 4px 14px -2px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05) inset; }
.product-card .flip-hint, .product-card .flip-close { background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.55)); color:var(--card-accent,#c98d65); box-shadow:0 2px 8px rgba(0,0,0,.08); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

.product-card .card-actions button:hover, .product-card .flip-hint:hover, .product-card .flip-close:hover { transform:translateY(-3px) scale(1.035); box-shadow:0 10px 28px -6px rgba(0,0,0,.25),0 3px 10px rgba(0,0,0,.12); }
.product-card .card-actions button:active, .product-card .flip-hint:active, .product-card .flip-close:active { transform:translateY(0) scale(.97); box-shadow:0 4px 12px -4px rgba(0,0,0,.3) inset; }
.product-card .card-actions button:focus-visible, .product-card .flip-hint:focus-visible, .product-card .flip-close:focus-visible { outline:2px solid var(--card-accent,#c98d65); outline-offset:3px; }

.product-card .card-actions button::before, .product-card .flip-hint::before, .product-card .flip-close::before { content:""; position:absolute; top:0; left:-35%; width:40%; height:100%; background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,0)); mix-blend-mode:screen; transform:skewX(-25deg) translateX(0); transition:transform .9s cubic-bezier(.25,.8,.25,1); pointer-events:none; }
.product-card .card-actions button:hover::before, .product-card .flip-hint:hover::before, .product-card .flip-close:hover::before { transform:skewX(-25deg) translateX(265%); }

@media (prefers-reduced-motion: reduce) { .product-card .card-actions button, .product-card .flip-hint, .product-card .flip-close { transition:none; } .product-card .card-actions button::before, .product-card .flip-hint::before, .product-card .flip-close::before { display:none; } }

.product-card .card-back .card-points li { line-height:1.5; font-size:.95em; }
.product-card .card-back { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.product-card .card-inner { border:1px solid rgba(0,0,0,0.06); box-shadow:0 10px 26px -6px rgba(0,0,0,.18); }
body[data-theme="dark"] .product-card .card-face { background:linear-gradient(145deg,rgba(40,40,40,.95),rgba(30,30,30,.95)) !important; color:#f1f4f7 !important; }
body[data-theme="dark"] .product-card .card-face h3 { color:var(--card-accent,#b2d1ed) !important; }

/* === LI Card Consistency Override 2025-09-05 ===
   Unify all product cards to the gene variant aesthetic for consistent branding.
   (Append-only; overrides earlier per-product palettes.) */
.product-card[data-product] {
  --card-bg-1:#e8f2fa; /* unified soft blue base */
  --card-bg-2:#d6e7f4;
  --card-accent:#2f6fd3;
  --card-accent-alt:#194980;
  --btn1-start:#2f6fd3; --btn1-end:#1e4f94; /* primary */
  --btn2-start:#b2d1ed; --btn2-end:#8fbfe4; /* secondary */
  --card-text:#1b242d; --card-text-muted:#2e3b45;
}
/* Price always solid black for maximum contrast */
.product-card .card-price { color:#000 !important; text-shadow:none !important; }
/* === LI Cart Modernization 2025-09-05 (append-only) === */
.cart-page .cart-main { padding: 140px 20px 80px; display:flex; justify-content:center; }
.cart-page .cart-container { width:100%; max-width:1100px; background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border:1px solid rgba(178,209,237,0.25); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:28px; padding:48px 38px; box-shadow:0 12px 38px -10px rgba(0,0,0,.35),0 4px 18px -4px rgba(0,0,0,.25); }
.cart-page h1 { font-size: clamp(2.1rem, 4.5vw, 2.8rem); margin-bottom:18px; text-align:center; color:var(--header); letter-spacing:.5px; }
.early-adopter-banner { background:linear-gradient(135deg,#2f6fd3 0%,#1e4f94 60%,#194980 100%); color:#f4f9fd; padding:26px 30px; border-radius:24px; margin:0 0 34px; position:relative; overflow:hidden; }
.early-adopter-banner:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 60%); mix-blend-mode:overlay; }
.early-adopter-banner h2 { margin:0 0 8px; font-size:clamp(1.3rem,2.8vw,1.9rem); color:#fff; }
.early-adopter-banner p { margin:0 0 10px; font-size:clamp(15px,1.2vw,18px); color:#e9f4ff; line-height:1.55; }
.early-adopter-banner .discount-info { font-size:.95em; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#fff; opacity:.9; }

/* Items list */
.cart-items { display:flex; flex-direction:column; gap:18px; margin-bottom:40px; }
.cart-item { display:grid; grid-template-columns: 1fr auto auto; gap:18px; align-items:center; padding:20px 22px; background:linear-gradient(145deg,rgba(255,255,255,0.75),rgba(255,255,255,0.55)); border:1px solid rgba(0,0,0,.06); border-radius:22px; position:relative; box-shadow:0 6px 18px -8px rgba(0,0,0,.25); transition:transform .25s ease, box-shadow .35s ease, border-color .35s; }
.cart-item.discounted { border-color: rgba(47,111,211,.25); }
.cart-item:hover { transform:translateY(-4px); box-shadow:0 14px 40px -12px rgba(0,0,0,.38),0 4px 16px -4px rgba(0,0,0,.22); }
.cart-item .item-main { display:flex; flex-direction:column; gap:6px; }
.cart-item .item-head { display:flex; align-items:center; gap:10px; }
.discount-badge { background:#2f6fd3; color:#fff; font-size:.75em; padding:4px 8px; border-radius:18px; font-weight:700; letter-spacing:.5px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.cart-item .item-title { margin:0; font-size:clamp(1.05rem,2.2vw,1.25rem); color:#1d2832; font-weight:700; letter-spacing:.3px; }
.cart-item .item-pricing { display:flex; align-items:center; gap:10px; font-size:.95em; flex-wrap:wrap; }
.price-original { text-decoration:line-through; color:#8a9aa7; font-weight:500; }
.price-current { color:#2f6fd3; font-weight:700; font-size:1.05em; }
.billing-tag { background:#b2d1ed; color:#1d2a36; font-size:.65em; padding:4px 8px; border-radius:14px; font-weight:600; letter-spacing:.5px; }
.cart-item .item-controls { display:flex; align-items:center; gap:10px; }
.cart-item .item-controls button { background:linear-gradient(135deg,#2f6fd3,#1e4f94); color:#fff; border:none; border-radius:12px; width:40px; height:40px; font-size:1.1em; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:background .4s, transform .2s, box-shadow .3s; }
.cart-item .item-controls button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 10px 26px -6px rgba(0,0,0,.35); }
.cart-item .item-controls button:active:not(:disabled) { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(0,0,0,.4) inset; }
.cart-item .item-controls button:disabled { opacity:.4; cursor:not-allowed; }
.cart-item .item-controls .remove-btn { width:auto; padding:0 14px; font-size:.75em; letter-spacing:.5px; background:linear-gradient(135deg,#b72f2f,#831d1d); }
.cart-item .item-controls .remove-btn:hover { box-shadow:0 10px 26px -6px rgba(0,0,0,.4); }
.cart-item .item-line-total { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:.9em; min-width:100px; }
.cart-item .line-original { text-decoration:line-through; color:#8a9aa7; font-weight:500; }
.cart-item .line-current { font-weight:700; color:#194980; font-size:1.05em; }

/* Summary */
.cart-summary { background:linear-gradient(145deg,rgba(255,255,255,0.85),rgba(255,255,255,0.6)); border:1px solid rgba(0,0,0,.06); padding:30px 34px; border-radius:24px; box-shadow:0 6px 24px -10px rgba(0,0,0,.3); max-width:560px; margin:0 auto 50px; display:flex; flex-direction:column; gap:16px; }
.cart-summary .summary-row { display:flex; justify-content:space-between; font-size:clamp(15px,1.15vw,18px); font-weight:600; letter-spacing:.4px; }
.cart-summary .summary-row.total { font-size:clamp(18px,1.4vw,22px); padding-top:10px; border-top:1px solid rgba(0,0,0,.08); }
.cart-summary .discount { color:#c92f4d; font-weight:700; }

/* Cart actions */
.cart-actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:10px; }
.cart-actions .continue-shopping-btn, .cart-actions .checkout-btn { position:relative; overflow:hidden; background:linear-gradient(135deg,#2f6fd3,#1e4f94); color:#fff; border:none; padding:16px 32px; border-radius:30px; font-weight:700; letter-spacing:.6px; font-size:clamp(15px,1.2vw,18px); cursor:pointer; box-shadow:0 6px 20px -6px rgba(0,0,0,.35); transition:transform .25s, box-shadow .35s; }
.cart-actions .continue-shopping-btn { background:linear-gradient(135deg,#b2d1ed,#8fbfe4); color:#1d2a36; }
.cart-actions .continue-shopping-btn:hover, .cart-actions .checkout-btn:hover { transform:translateY(-4px); box-shadow:0 14px 36px -10px rgba(0,0,0,.4); }
.cart-actions .continue-shopping-btn:active, .cart-actions .checkout-btn:active { transform:translateY(0); box-shadow:0 4px 12px -4px rgba(0,0,0,.45) inset; }
.cart-actions button:focus-visible { outline:3px solid #b2d1ed; outline-offset:3px; }

/* Empty cart */
.empty-cart { text-align:center; padding:50px 20px; background:linear-gradient(135deg,rgba(255,255,255,0.65),rgba(255,255,255,0.4)); border:1px dashed rgba(47,111,211,.4); border-radius:24px; }
.empty-cart h3 { font-size:clamp(1.3rem,2.8vw,1.8rem); margin:0 0 10px; color:var(--header); }
.empty-cart p { font-size:clamp(15px,1.2vw,18px); }
.empty-cart a { color:#2f6fd3; font-weight:700; }

/* Early access notice */
.early-access-notice { margin-top:30px; background:linear-gradient(145deg,rgba(47,111,211,0.08),rgba(30,79,148,0.08)); border:1px solid rgba(47,111,211,0.25); padding:30px 32px; border-radius:24px; font-size:clamp(15px,1.2vw,17px); line-height:1.6; }
.early-access-notice h3 { margin-top:0; font-size:clamp(1.2rem,2.4vw,1.6rem); color:#194980; }
.early-access-notice ul { margin:14px 0 14px 20px; padding:0; }
.early-access-notice li { margin-bottom:6px; }

/* Responsive */
@media (max-width:880px){
  .cart-item { grid-template-columns: 1fr; align-items:flex-start; }
  .cart-item .item-controls { order:3; }
  .cart-item .item-line-total { order:2; align-items:flex-start; }
  .cart-page .cart-container { padding:40px 26px; }
}
@media (max-width:520px){
  .cart-page .cart-container { padding:34px 20px; }
  .cart-actions { flex-direction:column; }
  .cart-actions button { width:100%; }
}

/* === LI Typography Bump 2025-09-05 ===
   Slight increase to section body text for improved readability on desktop.
   (Append-only override; headings untouched.) */
section p,
section .section-description,
.interactive-box p,
.interactive-box li,
section li {
  font-size: clamp(18px, 1.45vw, 21px) !important;
  line-height: 1.78 !important;
}
/* Keep lists comfortable */
section li { margin-bottom: 6px; }

/* ================= (APPEND) LI-ACC-LAYOUT-V2 dashboard styles ================= */
/* Core 3-column shell */
.li-acc-shell{--rail-w:320px;--side-w:260px;--gap:18px;--card-pad:14px;display:grid;grid-template-columns:var(--side-w) 1fr var(--rail-w);gap:var(--gap);align-items:start;padding:18px;}
@media (max-width:1100px){.li-acc-shell{grid-template-columns:1fr;}.li-acc-rail{order:3;}.li-acc-sidebar{order:1;}.li-acc-main{order:2;}}
.li-acc-sidebar{position:sticky;top:16px;align-self:start;border:1px solid #e6e6e6;border-radius:14px;padding:12px;background:#fff;}
.li-acc-nav-title{margin:0 0 8px 0;font-size:1.05rem;}
.li-acc-nav-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;}
.li-acc-nav-btn{width:100%;text-align:left;padding:10px;border-radius:10px;border:1px solid #ececec;background:#fafafa;cursor:pointer;font:inherit;}
.li-acc-nav-btn:hover{background:#f0f3f7;}
.li-acc-main{min-height:400px;}
.li-acc-view{display:none;}
.li-acc-view.is-active{display:block;}
.li-acc-overview-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:10px;}
.li-acc-title{margin:0;font-size:clamp(20px,2.2vw,28px);}
.li-acc-tabs{display:flex;gap:8px;}
.li-acc-tab{padding:8px 12px;border-radius:10px;border:1px solid #e6e6e6;background:#fff;cursor:pointer;font:inherit;}
.li-acc-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(220px,1fr));}
@media (max-width:900px){.li-acc-grid{grid-template-columns:1fr;}}
.li-acc-card{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:var(--card-pad);box-shadow:0 2px 8px rgba(0,0,0,.04);}
.li-acc-muted{opacity:.75;}
.li-acc-cta{margin-top:10px;}
.li-acc-btn{padding:9px 14px;border-radius:10px;border:1px solid #d9d9d9;background:#111;color:#fff;cursor:pointer;font:inherit;}
.li-acc-btn[disabled]{opacity:.6;cursor:not-allowed;}
.li-acc-rail{position:sticky;top:16px;display:grid;gap:12px;}
.li-acc-rail-card{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:var(--card-pad);}
.li-acc-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;}
.li-acc-link{background:none;border:none;padding:0;color:#2f6fd3;text-decoration:underline;cursor:pointer;font:inherit;}
.li-acc-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;background:#f2f4f8;border:1px solid #e3e7ee;}
.li-acc-pref{display:flex;align-items:center;gap:10px;margin:8px 0;}
#li-font-scale{width:180px;}
/* Apps & drawer */
.li-acc-metric-form{display:grid;gap:10px;margin:12px 0;padding:12px;border:1px solid #e6e6e6;border-radius:12px;background:#fff}
.li-acc-metric-form label{font-size:.85rem;display:grid;gap:4px;font-weight:500}
.li-acc-hint{margin:4px 0 0;font-size:.7rem;opacity:.7}
.li-acc-data-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:.75rem}
.li-acc-data-list li{background:#fff;border:1px solid #e6e6e6;border-radius:10px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center}
.li-acc-chart{width:100%;background:#fff;border:1px solid #e6e6e6;border-radius:12px;margin-top:12px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.li-acc-prod{display:flex;justify-content:space-between;align-items:center;gap:8px}
.li-acc-price{color:#2f6fd3;font-weight:600}
.li-acc-btn-sm{padding:6px 10px;font-size:.7rem}
.li-acc-hamburger{position:fixed;top:62px;right:16px;z-index:1200;background:#111;color:#fff;border:1px solid #444;padding:10px 12px;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.li-acc-prof-drawer{position:fixed;top:0;right:0;height:100%;width:320px;max-width:90%;background:#fff;border-left:1px solid #ddd;transform:translateX(100%);transition:transform .3s ease;z-index:1500;display:flex;flex-direction:column;box-shadow:-4px 0 12px rgba(0,0,0,.15)}
.li-acc-prof-drawer.is-open{transform:translateX(0)}
.li-acc-prof-inner{padding:18px;overflow-y:auto}
.li-acc-prof-title{margin:0 0 8px;font-size:1.1rem}
.li-acc-prof-close{background:none;border:none;font-size:1.4rem;position:absolute;top:8px;right:10px;cursor:pointer}
.li-acc-prof-info p{margin:4px 0;font-size:.8rem}
.li-acc-prof-actions{display:grid;gap:8px;margin-top:14px}
.li-acc-btn-block{width:100%;text-align:center}
.li-acc-optional{opacity:.8}
.li-acc-list .li-acc-prod strong{font-size:.78rem}
@media (max-width:700px){.li-acc-hamburger{top:56px;}}
/* Chart tooltip */
.li-acc-chart-tooltip{position:absolute;pointer-events:none;background:#111;color:#fff;font-size:.65rem;padding:4px 6px;border-radius:6px;line-height:1.2;box-shadow:0 2px 4px rgba(0,0,0,.25);transform:translate(-50%,-110%);white-space:nowrap;z-index:10;opacity:0;transition:opacity .15s}
.li-acc-chart-tooltip.is-visible{opacity:1}
/* ================= END (APPEND) LI-ACC-LAYOUT-V2 ================= */

/* === AUTH GATE MODAL (for purchase gating) === */
.auth-gate-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8,12,18,0.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1400;
  transition: opacity 180ms ease, visibility 180ms ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.auth-gate-overlay.is-open,
.auth-gate-overlay.open,
.auth-gate-overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.auth-gate-box {
  width: 100%;
  max-width: 520px;
  background: var(--background, #ffffff);
  border-radius: 16px;
  padding: 26px 20px;
  box-shadow: 0 10px 40px rgba(3,12,30,0.35);
  border: 1px solid rgba(0,0,0,0.06);
  transform-origin: center;
}
.auth-gate-title {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  color: var(--header, #194980);
  font-weight: 700;
}
.auth-gate-body {
  margin-bottom: 18px;
  font-size: 1rem;
  color: var(--text, #2a2f36);
  line-height: 1.5;
}
.auth-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.auth-gate-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 0.98rem;
}
.auth-gate-btn.primary {
  background: linear-gradient(135deg, var(--header, #2f6fd3), #1e4f94);
  color: #fff;
  box-shadow: 0 6px 20px rgba(30,79,148,0.18);
}
.auth-gate-btn.secondary {
  background: transparent;
  color: var(--text, #2a2f36);
  border: 1px solid rgba(0,0,0,0.06);
}
.auth-gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text, #2a2f36);
}

@media (max-width: 520px) {
  .auth-gate-box { padding: 18px 14px; border-radius: 12px; }
  .auth-gate-title { font-size: 1.05rem; }
  .auth-gate-actions { justify-content: center; }
  .auth-gate-btn { width: 100%; }
}

/* End auth gate modal styles */