/*
 * RawReach Glow Token System + Cinematic Typography Overhaul
 * Visual-only design system — no content/structure changes.
 * Include AFTER inline <style> blocks so cascade wins.
 */

/* ═══════════════════════════════════════════════════
   1. GLOW TOKEN VARIABLES
   ═══════════════════════════════════════════════════ */
:root {
  /* Cinematic depth blacks */
  --gt-bg-deep:    #0a0a0a;
  --gt-bg-base:    #0f0f0f;
  --gt-bg-surface: #151515;
  --gt-bg-card:    #181818;
  --gt-bg-elevated:#1e1e1e;

  /* Red glow tokens */
  --gt-glow-red:       rgba(196, 64, 68, 0.45);
  --gt-glow-red-soft:  rgba(196, 64, 68, 0.18);
  --gt-glow-red-dim:   rgba(196, 64, 68, 0.08);
  --gt-glow-red-hot:   rgba(212, 84, 84, 0.55);
  --gt-glow-red-ring:  rgba(196, 64, 68, 0.25);

  /* Gold glow tokens */
  --gt-glow-gold:      rgba(212, 168, 83, 0.35);
  --gt-glow-gold-soft: rgba(184, 150, 42, 0.15);

  /* Typography scale — cinematic editorial */
  --gt-font-display: 'Anton', sans-serif;
  --gt-font-heading: 'Space Grotesk', sans-serif;
  --gt-font-body:    'DM Sans', sans-serif;
  --gt-font-ui:      'Rajdhani', sans-serif;

  /* Spacing rhythm */
  --gt-space-xs: 0.25rem;
  --gt-space-sm: 0.5rem;
  --gt-space-md: 1rem;
  --gt-space-lg: 2rem;
  --gt-space-xl: 3.5rem;
  --gt-space-2xl: 5rem;

  /* Transition tokens */
  --gt-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gt-duration: 0.3s;
  --gt-duration-slow: 0.6s;

  /* Task-required glow tokens (shorthand API) */
  --glow-red: #ff1a1a;
  --glow-soft: 0 0 20px rgba(255, 0, 0, 0.35);
  --glow-strong: 0 0 45px rgba(255, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════
   1b. GLOW UTILITY CLASSES
   ═══════════════════════════════════════════════════ */
.glow-text  { text-shadow: var(--glow-soft) !important; }
.glow-strong { text-shadow: var(--glow-strong) !important; }
.glow-bg    { box-shadow: var(--glow-soft) !important; }


/* ═══════════════════════════════════════════════════
   2. CINEMATIC BODY — deep black gradient
   ═══════════════════════════════════════════════════ */
body {
  background: var(--gt-bg-deep) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196,64,68,0.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--gt-bg-deep) 0%, #0d0d0d 40%, var(--gt-bg-base) 100%) !important;
  background-attachment: fixed !important;
}


/* ═══════════════════════════════════════════════════
   3. NAV — depth + subtle glow
   ═══════════════════════════════════════════════════ */
nav {
  background: rgba(10, 10, 10, 0.92) !important;
  border-bottom: 1px solid rgba(196, 64, 68, 0.12) !important;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5), 0 1px 8px rgba(196, 64, 68, 0.04) !important;
}


/* ═══════════════════════════════════════════════════
   4. LOGO — ambient red glow (3D lifted effect)
   ═══════════════════════════════════════════════════ */
.logo {
  position: relative !important;
}

.logo img {
  filter: drop-shadow(0 0 18px rgba(196, 64, 68, 0.35)) drop-shadow(0 0 40px rgba(196, 64, 68, 0.15)) !important;
  transition: filter var(--gt-duration) var(--gt-ease) !important;
}

.logo:hover img {
  filter: drop-shadow(0 0 24px rgba(196, 64, 68, 0.5)) drop-shadow(0 0 50px rgba(196, 64, 68, 0.22)) !important;
}

/* Logo text glow for pages using text logos */
.logo span,
.logo-tag {
  text-shadow: 0 0 20px rgba(196, 64, 68, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   5. HERO SECTIONS — cinematic depth
   ═══════════════════════════════════════════════════ */
.hero,
.page-hero {
  background:
    radial-gradient(ellipse 60% 40% at 5% 50%, rgba(196, 64, 68, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--gt-bg-deep) 0%, var(--gt-bg-base) 100%) !important;
  border-bottom: 1px solid rgba(196, 64, 68, 0.1) !important;
}

/* Red accent bar glow */
.hero::before,
.page-hero::before {
  box-shadow: 0 0 20px rgba(196, 64, 68, 0.4), 0 0 40px rgba(196, 64, 68, 0.15) !important;
}


/* ═══════════════════════════════════════════════════
   6. CINEMATIC TYPOGRAPHY
   ═══════════════════════════════════════════════════ */

/* H1 — Massive, high-contrast display headlines */
h1 {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.03em !important;
}

/* Red accent text gets glow */
h1 .line-accent,
h1 em,
h1 span[style*="color"] {
  text-shadow: 0 0 30px rgba(196, 64, 68, 0.35), 0 0 60px rgba(196, 64, 68, 0.12) !important;
}

/* H2 — Section headers with presence */
h2 {
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* H3/H4 — Clean subheadings */
h3, h4 {
  letter-spacing: 0.01em !important;
}

/* Body text — precise, readable */
p, li, .hero-body, .hero-sub, .hero-subtext {
  letter-spacing: 0.005em !important;
}

/* Section labels — editorial flair with glow */
.section-label,
.section-label-gold,
.result-badge {
  text-shadow: 0 0 12px var(--gt-glow-red-soft) !important;
}


/* ═══════════════════════════════════════════════════
   7. BUTTONS — red glow tokens
   ═══════════════════════════════════════════════════ */

/* Primary CTA — red glow */
.btn-primary,
.nav-cta,
.submit-btn {
  box-shadow:
    0 0 20px var(--gt-glow-red-soft),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-primary:hover,
.nav-cta:hover,
.submit-btn:hover {
  box-shadow:
    0 0 30px var(--gt-glow-red),
    0 0 60px var(--gt-glow-red-dim),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active,
.nav-cta:active,
.submit-btn:active {
  transform: translateY(0) !important;
  box-shadow:
    0 0 15px var(--gt-glow-red-soft),
    0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Ghost button — subtle border glow on hover */
.btn-ghost,
.btn-outline {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  box-shadow: 0 0 15px var(--gt-glow-red-dim), 0 0 30px rgba(196, 64, 68, 0.04) !important;
  border-color: rgba(196, 64, 68, 0.3) !important;
}

/* Gold button glow */
.btn-gold {
  box-shadow:
    0 0 20px var(--gt-glow-gold-soft),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-gold:hover {
  box-shadow:
    0 0 30px var(--gt-glow-gold),
    0 0 60px rgba(184, 150, 42, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════
   8. CARDS — elevated surfaces with depth
   ═══════════════════════════════════════════════════ */
.card,
.result-card,
.story-form,
.upgrade-tease,
.settings-section .card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.6) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: box-shadow var(--gt-duration) var(--gt-ease), border-color var(--gt-duration) var(--gt-ease) !important;
}

.card:hover,
.result-card:hover {
  border-color: rgba(196, 64, 68, 0.15) !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--gt-glow-red-dim) !important;
}


/* ═══════════════════════════════════════════════════
   9. SECTIONS — deep gradient backgrounds
   ═══════════════════════════════════════════════════ */
.section-wrap,
.tool-section,
section {
  border-color: rgba(51, 51, 51, 0.4) !important;
}

/* Alternate section background depth */
.section-wrap:nth-child(even),
.tool-section {
  background:
    linear-gradient(180deg, var(--gt-bg-surface) 0%, var(--gt-bg-base) 100%) !important;
}

.section-wrap:nth-child(odd) {
  background:
    linear-gradient(180deg, var(--gt-bg-base) 0%, var(--gt-bg-surface) 100%) !important;
}


/* ═══════════════════════════════════════════════════
   10. SECTION HEADER GLOW ACCENTS
   ═══════════════════════════════════════════════════ */
.section-label {
  border-left-color: #C44044 !important;
  position: relative !important;
}

.section-label::before {
  content: '' !important;
  position: absolute !important;
  left: -3px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  box-shadow: 0 0 12px rgba(196, 64, 68, 0.5), 0 0 25px rgba(196, 64, 68, 0.2) !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════
   11. INPUTS / TEXTAREA — focus glow
   ═══════════════════════════════════════════════════ */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
select,
.form-email-input {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(51, 51, 51, 0.6) !important;
  transition: border-color var(--gt-duration) var(--gt-ease), box-shadow var(--gt-duration) var(--gt-ease) !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
.form-email-input:focus {
  border-color: #C44044 !important;
  box-shadow: 0 0 15px var(--gt-glow-red-soft), 0 0 30px var(--gt-glow-red-dim) !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════════
   12. FOOTER — deep foundation
   ═══════════════════════════════════════════════════ */
footer {
  background:
    linear-gradient(180deg, var(--gt-bg-base) 0%, var(--gt-bg-deep) 100%) !important;
  border-top: 1px solid rgba(196, 64, 68, 0.08) !important;
}


/* ═══════════════════════════════════════════════════
   13. DASHBOARD OVERRIDES
   (handles --coal/--ember/--ash variable naming)
   ═══════════════════════════════════════════════════ */

/* Dashboard sidebar */
.sidebar,
.dash-sidebar {
  background: var(--gt-bg-base) !important;
  border-right-color: rgba(51, 51, 51, 0.4) !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
}

/* Dashboard main content */
.main-content,
.dash-main {
  background: var(--gt-bg-deep) !important;
}

/* Tab buttons with glow */
.tab-btn.active,
.tab.active,
.sidebar-link.active {
  box-shadow: inset 0 0 15px var(--gt-glow-red-dim), 0 0 10px var(--gt-glow-red-dim) !important;
}

/* Dashboard section headers */
.section-header .section-title,
.section-title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Tier / pricing cards on pricing page */
.tier-card,
.plan-card,
.price-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.tier-card:hover,
.plan-card:hover,
.price-card:hover {
  border-color: rgba(196, 64, 68, 0.2) !important;
  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.45),
    0 0 25px var(--gt-glow-red-dim) !important;
  transform: translateY(-2px) !important;
}

/* Pro tier card highlighted */
.tier-card--pro,
.tier-card--premium,
.tier-card[data-tier="pro"],
.tier-card[data-tier="premium"] {
  border-color: rgba(196, 64, 68, 0.25) !important;
  box-shadow:
    0 4px 25px rgba(0, 0, 0, 0.35),
    0 0 30px var(--gt-glow-red-soft) !important;
}


/* ═══════════════════════════════════════════════════
   14. CONSENT / FORM BLOCKS
   ═══════════════════════════════════════════════════ */
.form-consent {
  background: rgba(196, 64, 68, 0.04) !important;
  border-color: rgba(196, 64, 68, 0.12) !important;
  transition: border-color var(--gt-duration) var(--gt-ease) !important;
}

.form-consent:hover {
  border-color: rgba(196, 64, 68, 0.22) !important;
}


/* ═══════════════════════════════════════════════════
   15. STATUS BADGES / TAGS
   ═══════════════════════════════════════════════════ */
.badge,
.tag,
.status-badge {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}


/* ═══════════════════════════════════════════════════
   16. MODAL / OVERLAY depth
   ═══════════════════════════════════════════════════ */
.modal,
.dialog,
[class*="modal-content"],
[class*="dialog-content"] {
  background: var(--gt-bg-card) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px var(--gt-glow-red-dim),
    0 0 1px rgba(196, 64, 68, 0.15) !important;
  border: 1px solid rgba(51, 51, 51, 0.5) !important;
}


/* ═══════════════════════════════════════════════════
   17. SCROLL / DIVIDER GLOW ACCENTS
   ═══════════════════════════════════════════════════ */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(196, 64, 68, 0.15) 50%, transparent 100%) !important;
}


/* ═══════════════════════════════════════════════════
   18. SCROLLBAR — cinematic dark
   ═══════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--gt-bg-deep) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(51, 51, 51, 0.6) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 64, 68, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   19. LINK GLOW (subtle)
   ═══════════════════════════════════════════════════ */
a:not(.logo):not(.nav-link):not(.nav-cta):not(.btn-primary):not(.btn-ghost):not(.btn-gold):not(.footer-links a) {
  transition: color var(--gt-duration) var(--gt-ease), text-shadow var(--gt-duration) var(--gt-ease) !important;
}


/* ═══════════════════════════════════════════════════
   20. UPGRADE TEASE — gold border glow
   ═══════════════════════════════════════════════════ */
.upgrade-tease {
  border-top-color: #d4a853 !important;
  box-shadow:
    0 -4px 20px var(--gt-glow-gold-soft),
    0 4px 20px rgba(0, 0, 0, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   21. TAB BAR — premium depth
   ═══════════════════════════════════════════════════ */
.tab-bar {
  background: var(--gt-bg-deep) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

.tab-btn {
  transition: background var(--gt-duration) var(--gt-ease), box-shadow var(--gt-duration) var(--gt-ease) !important;
}

.tab-btn.active {
  background: rgba(196, 64, 68, 0.1) !important;
  box-shadow: inset 3px 0 0 #C44044, 0 0 15px var(--gt-glow-red-dim) !important;
}

.tab-btn:hover:not(.active) {
  background: var(--gt-bg-surface) !important;
}


/* ═══════════════════════════════════════════════════
   22. COPY / INTERACTION BUTTONS (result cards)
   ═══════════════════════════════════════════════════ */
.result-copy-btn,
.copy-btn,
[class*="copy-btn"] {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.result-copy-btn:hover,
.copy-btn:hover,
[class*="copy-btn"]:hover {
  box-shadow: 0 0 12px var(--gt-glow-red-dim) !important;
}


/* ═══════════════════════════════════════════════════
   23. BLOG CARDS
   ═══════════════════════════════════════════════════ */
.blog-card,
.post-card,
.article-card {
  background: var(--gt-bg-card) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.blog-card:hover,
.post-card:hover,
.article-card:hover {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--gt-glow-red-dim) !important;
  transform: translateY(-2px) !important;
}


/* ═══════════════════════════════════════════════════
   24. LOADING / SPINNER GLOW
   ═══════════════════════════════════════════════════ */
.spinner,
.loading-spinner,
[class*="spinner"] {
  filter: drop-shadow(0 0 8px rgba(196, 64, 68, 0.3)) !important;
}

#loading-gate {
  background: var(--gt-bg-deep) !important;
}


/* ═══════════════════════════════════════════════════
   25. MOBILE DRAWER DEPTH
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links {
    background: var(--gt-bg-base) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6), 0 0 30px var(--gt-glow-red-dim) !important;
  }
}


/* ═══════════════════════════════════════════════════
   26. CONFIRM / SUCCESS / ERROR BANNERS
   ═══════════════════════════════════════════════════ */
.confirm-banner,
.success-banner,
.error-banner,
.toast,
.alert {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   27. PRICING PAGE — tier section depth
   ═══════════════════════════════════════════════════ */
.tier-section,
.pricing-section,
.plans-wrap {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(196, 64, 68, 0.04) 0%, transparent 60%),
    var(--gt-bg-base) !important;
}


/* ═══════════════════════════════════════════════════
   28. ANIMATIONS — glow pulse for key elements
   ═══════════════════════════════════════════════════ */
@keyframes gt-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--gt-glow-red-soft); }
  50% { box-shadow: 0 0 30px var(--gt-glow-red), 0 0 50px var(--gt-glow-red-dim); }
}

/* Apply to primary CTAs in hero for subtle pulsing glow */
.hero .btn-primary,
.page-hero + * .btn-primary:first-of-type {
  animation: gt-glow-pulse 3s var(--gt-ease) infinite !important;
}

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════
   29. SELECTION HIGHLIGHT
   ═══════════════════════════════════════════════════ */
::selection {
  background: rgba(196, 64, 68, 0.3) !important;
  color: #f0ede8 !important;
}

::-moz-selection {
  background: rgba(196, 64, 68, 0.3) !important;
  color: #f0ede8 !important;
}


/* ═══════════════════════════════════════════════════
   30. FOUNDER / CTA FINAL SECTIONS
   ═══════════════════════════════════════════════════ */
.cta-final,
.cta-section,
[class*="cta-final"] {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(196, 64, 68, 0.05) 0%, transparent 60%),
    var(--gt-bg-deep) !important;
}


/* ═══════════════════════════════════════════════════
   31. CHECKLIST / FEATURE ICONS
   ═══════════════════════════════════════════════════ */
.feature-check,
.check-icon,
svg.check,
.tick {
  filter: drop-shadow(0 0 6px rgba(196, 64, 68, 0.25)) !important;
}


/* ═══════════════════════════════════════════════════
   32. MODE HINT / INFO BOXES
   ═══════════════════════════════════════════════════ */
.mode-hint,
.info-box,
.notice {
  background: var(--gt-bg-surface) !important;
  border-left-color: #C44044 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}


/* ═══════════════════════════════════════════════════
   33. ADMIN DASHBOARD SPECIFICS
   ═══════════════════════════════════════════════════ */
.admin-header,
.dash-header {
  background: var(--gt-bg-base) !important;
  border-bottom: 1px solid rgba(196, 64, 68, 0.08) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
}

.stat-card,
.metric-card,
.overview-card {
  background: var(--gt-bg-card) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.stat-card:hover,
.metric-card:hover,
.overview-card:hover {
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.35),
    0 0 15px var(--gt-glow-red-dim) !important;
}


/* ═══════════════════════════════════════════════════
   34. TABLE DEPTH
   ═══════════════════════════════════════════════════ */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: var(--gt-bg-surface) !important;
  border-bottom: 1px solid rgba(196, 64, 68, 0.1) !important;
}

tbody tr {
  transition: background var(--gt-duration) var(--gt-ease) !important;
}

tbody tr:hover {
  background: rgba(196, 64, 68, 0.03) !important;
}


/* ═══════════════════════════════════════════════════
   35. STRIPE / CHECKOUT PAGES
   ═══════════════════════════════════════════════════ */
.checkout-form,
.payment-section,
.stripe-section {
  background: var(--gt-bg-card) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}


/* ═══════════════════════════════════════════════════
   36. PRICING PAGE — actual discovered classes
   ═══════════════════════════════════════════════════ */
.tiers-section {
  background:
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(196, 64, 68, 0.04) 0%, transparent 55%),
    var(--gt-bg-base) !important;
}

.tiers-grid {
  gap: 1.5rem !important;
}

.founder-price-grid {
  gap: 1.5rem !important;
}

.founder-price-card {
  background: var(--gt-bg-card) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.founder-price-card:hover {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--gt-glow-red-dim) !important;
}

.tier-price {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.tier-price.price-rage {
  text-shadow: 0 0 25px rgba(196, 64, 68, 0.3), 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

.tier-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(196, 64, 68, 0.12) 50%, transparent 100%) !important;
}

.tier-features li::before {
  filter: drop-shadow(0 0 4px rgba(196, 64, 68, 0.3)) !important;
}

.tier-cta .btn-ghost.tier-cta-full,
.tier-cta .btn-primary.tier-cta-full,
.tier-cta .btn-gold.tier-cta-full {
  width: 100% !important;
}


/* ═══════════════════════════════════════════════════
   37. USER DASHBOARD — sidebar + panels
   ═══════════════════════════════════════════════════ */
.sidebar-nav {
  list-style: none !important;
}

.sidebar-label {
  text-shadow: 0 0 15px rgba(196, 64, 68, 0.15) !important;
}

.sidebar-link {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.sidebar-link.active {
  background: rgba(196, 64, 68, 0.08) !important;
  border-left: 3px solid #C44044 !important;
  box-shadow: inset 0 0 12px var(--gt-glow-red-dim) !important;
}

.sidebar-link:hover:not(.active) {
  background: var(--gt-bg-surface) !important;
}

.tab-panel {
  background: transparent !important;
}

.settings-section {
  margin-bottom: var(--gt-space-lg) !important;
}

.settings-section-title {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dashboard btn classes */
.btn {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn.btn-primary {
  box-shadow: 0 0 15px var(--gt-glow-red-soft), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.btn.btn-primary:hover {
  box-shadow: 0 0 25px var(--gt-glow-red), 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

.btn-logout-header {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-logout-header:hover {
  box-shadow: 0 0 10px rgba(196, 64, 68, 0.15) !important;
}


/* ═══════════════════════════════════════════════════
   38. ADMIN DASHBOARD — tabs + panels
   ═══════════════════════════════════════════════════ */
.tier-panel {
  background: transparent !important;
}

.sub-panel {
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════
   39. GLOBAL SURFACE OVERRIDES
   Deep blacks for consistent premium feel
   ═══════════════════════════════════════════════════ */

/* Override inline --void/--coal references */
[style*="background: var(--void)"],
[style*="background:var(--void)"],
[style*="background: var(--coal)"],
[style*="background:var(--coal)"] {
  background: var(--gt-bg-deep) !important;
}

/* Consistent border treatment */
[style*="border-bottom: 1px solid var(--border)"] {
  border-bottom-color: rgba(51, 51, 51, 0.4) !important;
}


/* ═══════════════════════════════════════════════════
   40. LEGACY CSS VARIABLE ALIASES
   Maps old naming conventions to glow-token values.
   Loaded AFTER inline <style> so :root cascade wins.
   ═══════════════════════════════════════════════════ */
:root {
  /* --void / --coal family → deep cinematic blacks */
  --void:       var(--gt-bg-deep);
  --coal:       var(--gt-bg-deep);
  --ash:        var(--gt-bg-surface);
  --surface:    var(--gt-bg-surface);
  --surface-2:  var(--gt-bg-elevated);
  --smoke:      var(--gt-bg-elevated);
  --iron:       #3d3d3d;

  /* --ember / --rage family → red glow brand color */
  --ember:       #C44044;
  --ember-glow:  #D45454;
  --ember-dim:   rgba(196, 64, 68, 0.1);
  --ember-border:rgba(196, 64, 68, 0.35);
  --rage:        #C44044;
  --rage-hi:     #D45454;
  --rage-dim:    rgba(196, 64, 68, 0.12);

  /* --bone / --chalk / text families */
  --bone:        #f0ede8;
  --chalk:       #cac5bf;
  --light:       #f0ebe4;
  --muted:       #9a9590;
  --warm-white:  #faf7f3;

  /* --gold family — preserved */
  --gold:        #b8962a;
  --gold-hi:     #d4a853;
  --gold-bright: #e8be6a;
  --gold-dim:    rgba(184, 150, 42, 0.12);

  /* --border family — unified to subtle dark */
  --border:      rgba(51, 51, 51, 0.5);
  --border-hi:   #3d3d3d;

  /* Status colors */
  --success:     #4caf78;
  --success-dim: rgba(76,175,120,0.12);
  --error:       #e05252;
  --error-dim:   rgba(224,82,82,0.12);

  /* --bg / --accent (coming-soon page) */
  --bg:          var(--gt-bg-deep);
  --accent:      #C44044;
  --accent-glow: rgba(196, 64, 68, 0.15);
  --text-primary:#f5f5f5;
  --text-muted:  #737373;
  --text-subtle: #525252;
}


/* ═══════════════════════════════════════════════════
   41. FONT FAMILY ENFORCEMENT
   Ensures cinematic typography even when pages
   declare system fonts in inline <style>.
   ═══════════════════════════════════════════════════ */
body {
  font-family: var(--gt-font-body) !important;
}

h1, .hero-tagline {
  font-family: var(--gt-font-display) !important;
}

h2, h3, h4, h5, h6,
.section-label,
.section-label-gold,
.page-label,
.tier-name,
.plan-tier,
.cal-title {
  font-family: var(--gt-font-heading) !important;
}

.result-badge,
.badge,
.tag,
.status-badge,
.spots-badge,
.upsell-badge,
.plan-badge,
.tier-badge,
.nav-badge,
.badge-dot,
.badge-core,
.badge-pro,
.badge-free,
.badge-active,
.badge-inactive,
.badge-paid,
.badge-unpaid,
.stat-chip,
.source-tag,
.platform-tag,
.day-badge,
.time-badge {
  font-family: var(--gt-font-ui) !important;
}


/* ═══════════════════════════════════════════════════
   42. OWNER-ACCESS — panels, grids, stat boxes
   ═══════════════════════════════════════════════════ */
.panel {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.tier-grid {
  gap: 1rem !important;
}

.tier-btn {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.5) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.tier-btn:hover {
  background: rgba(196, 64, 68, 0.08) !important;
  border-color: rgba(196, 64, 68, 0.25) !important;
  box-shadow: 0 0 15px var(--gt-glow-red-dim) !important;
}

.tier-label {
  font-family: var(--gt-font-heading) !important;
}

.stats-row {
  gap: 1rem !important;
}

.stat-box {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.4) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.stat-box:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px var(--gt-glow-red-dim) !important;
}

.stat-num {
  font-family: var(--gt-font-display) !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

.stat-label {
  font-family: var(--gt-font-ui) !important;
  letter-spacing: 0.04em !important;
}

.sub-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.note {
  color: var(--text-muted) !important;
  font-family: var(--gt-font-body) !important;
}


/* ═══════════════════════════════════════════════════
   43. UPSELL — offer cards + gold CTAs
   ═══════════════════════════════════════════════════ */
.offer-card {
  background: var(--gt-bg-card) !important;
  border: 1px solid rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.offer-card:hover {
  border-color: rgba(196, 64, 68, 0.2) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--gt-glow-red-dim) !important;
}

.offer-features li::before {
  filter: drop-shadow(0 0 4px rgba(196, 64, 68, 0.2)) !important;
}

.btn-add {
  box-shadow: 0 0 20px var(--gt-glow-gold-soft), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-add:hover {
  box-shadow: 0 0 30px var(--gt-glow-gold), 0 0 60px rgba(184, 150, 42, 0.08), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.btn-skip {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-skip:hover {
  box-shadow: 0 0 10px var(--gt-glow-red-dim) !important;
}

.plan-context {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.4) !important;
}


/* ═══════════════════════════════════════════════════
   44. CHECKOUT — plan cards + consent blocks
   ═══════════════════════════════════════════════════ */
.plan-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.plan-card:hover {
  border-color: rgba(196, 64, 68, 0.2) !important;
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.45), 0 0 25px var(--gt-glow-red-dim) !important;
}

.plan-card.core-card {
  border-color: rgba(196, 64, 68, 0.15) !important;
}

.plan-card.pro-card {
  border-color: rgba(196, 64, 68, 0.25) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35), 0 0 30px var(--gt-glow-red-soft) !important;
}

.plan-tier {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

.plan-price {
  font-family: var(--gt-font-display) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.checkout-btn {
  box-shadow: 0 0 20px var(--gt-glow-red-soft), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.checkout-btn:hover {
  box-shadow: 0 0 30px var(--gt-glow-red), 0 0 60px var(--gt-glow-red-dim), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.terms-panel {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.4) !important;
}

.terms-title {
  font-family: var(--gt-font-heading) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3) !important;
}

.consent-item {
  transition: background var(--gt-duration) var(--gt-ease) !important;
}

.consent-item:hover {
  background: rgba(196, 64, 68, 0.03) !important;
}

.secure-note {
  font-family: var(--gt-font-ui) !important;
}

#ownerBypassSection {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(196, 64, 68, 0.15) !important;
}


/* ═══════════════════════════════════════════════════
   45. COMING-SOON — branded corrections
   ═══════════════════════════════════════════════════ */
.logo-icon {
  box-shadow: 0 0 25px var(--gt-glow-red-soft), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.notify-form input {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(51, 51, 51, 0.6) !important;
}

.notify-form input:focus {
  border-color: #C44044 !important;
  box-shadow: 0 0 15px var(--gt-glow-red-soft) !important;
}

.notify-form button {
  box-shadow: 0 0 20px var(--gt-glow-red-soft), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.notify-form button:hover {
  box-shadow: 0 0 30px var(--gt-glow-red), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.form-message.success {
  background: var(--success-dim) !important;
  border-color: var(--success) !important;
}

.form-message.error {
  background: var(--error-dim) !important;
  border-color: var(--error) !important;
}

.divider {
  background: linear-gradient(90deg, transparent 0%, rgba(196, 64, 68, 0.12) 50%, transparent 100%) !important;
}


/* ═══════════════════════════════════════════════════
   46. CONTENT MATRIX — form + terminal + calendar
   ═══════════════════════════════════════════════════ */
.form-wrap {
  background: var(--gt-bg-base) !important;
}

.form-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}

.form-eyebrow {
  font-family: var(--gt-font-ui) !important;
  letter-spacing: 0.06em !important;
}

.form-headline {
  font-family: var(--gt-font-heading) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.form-group label {
  font-family: var(--gt-font-heading) !important;
}

.form-error,
.form-field-error,
.story-error {
  color: var(--error) !important;
  font-family: var(--gt-font-body) !important;
}

.error-msg,
.error {
  background: var(--error-dim) !important;
  border-color: var(--error) !important;
  color: var(--error) !important;
}

/* Terminal / process visualization */
.process-wrap {
  background: var(--gt-bg-base) !important;
}

.process-badge {
  font-family: var(--gt-font-ui) !important;
}

.process-headline {
  font-family: var(--gt-font-heading) !important;
}

.process-terminal,
.terminal-body {
  background: var(--gt-bg-deep) !important;
  border-color: rgba(51, 51, 51, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.terminal-bar {
  background: var(--gt-bg-surface) !important;
  border-bottom: 1px solid rgba(51, 51, 51, 0.4) !important;
}

.terminal-dot {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important;
}

.terminal-step {
  transition: opacity var(--gt-duration) var(--gt-ease) !important;
}

.step-icon {
  filter: drop-shadow(0 0 4px rgba(196, 64, 68, 0.2)) !important;
}

.step-spinner {
  filter: drop-shadow(0 0 6px rgba(196, 64, 68, 0.3)) !important;
}

.process-progress {
  background: var(--gt-bg-surface) !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

.process-progress-bar {
  background: linear-gradient(90deg, #C44044, #D45454) !important;
  box-shadow: 0 0 10px var(--gt-glow-red-soft) !important;
  transition: width 0.6s var(--gt-ease) !important;
}

.not-chatgpt-label {
  font-family: var(--gt-font-ui) !important;
}

/* Calendar header */
.calendar-header {
  background: var(--gt-bg-base) !important;
  border-bottom: 1px solid rgba(51, 51, 51, 0.4) !important;
}

.cal-eyebrow {
  font-family: var(--gt-font-ui) !important;
  letter-spacing: 0.06em !important;
}

.cal-title {
  font-family: var(--gt-font-heading) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.cal-angle {
  font-family: var(--gt-font-body) !important;
}

.cal-stats {
  gap: 0.75rem !important;
}

.stat-chip {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.4) !important;
  font-family: var(--gt-font-ui) !important;
}

/* Calendar controls */
.controls-bar {
  background: var(--gt-bg-surface) !important;
  border-bottom: 1px solid rgba(51, 51, 51, 0.3) !important;
}

.week-tabs {
  gap: 0.25rem !important;
}

.week-tab,
.all-tab {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.week-tab.active,
.all-tab.active {
  background: rgba(196, 64, 68, 0.1) !important;
  box-shadow: inset 0 -2px 0 #C44044 !important;
}

.platform-filters {
  gap: 0.25rem !important;
}

.pf-btn {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.pf-btn.active,
.pf-btn.active-all {
  background: rgba(196, 64, 68, 0.1) !important;
  box-shadow: inset 0 -2px 0 #C44044 !important;
}

.btn-export {
  background: var(--gt-bg-surface) !important;
  border: 1px solid rgba(51, 51, 51, 0.5) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-export:hover {
  border-color: rgba(196, 64, 68, 0.2) !important;
  box-shadow: 0 0 10px var(--gt-glow-red-dim) !important;
}

/* Calendar content cards */
.week-header {
  border-bottom: 1px solid rgba(51, 51, 51, 0.3) !important;
}

.week-num {
  font-family: var(--gt-font-heading) !important;
}

.week-phase,
.week-angle {
  font-family: var(--gt-font-body) !important;
}

.cards-grid {
  gap: 1rem !important;
}

.card-top {
  border-bottom: 1px solid rgba(51, 51, 51, 0.3) !important;
}

.card-hook {
  font-family: var(--gt-font-heading) !important;
}

.card-copy-preview,
.card-copy-full {
  font-family: var(--gt-font-body) !important;
  line-height: 1.6 !important;
}

.card-footer {
  border-top: 1px solid rgba(51, 51, 51, 0.3) !important;
}

.btn-expand,
.btn-copy {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-expand:hover,
.btn-copy:hover {
  box-shadow: 0 0 10px var(--gt-glow-red-dim) !important;
}

.no-results {
  color: var(--text-muted) !important;
  font-family: var(--gt-font-body) !important;
}

.regen-bar {
  background: var(--gt-bg-surface) !important;
  border-top: 1px solid rgba(51, 51, 51, 0.3) !important;
}

.btn-regen {
  box-shadow: 0 0 15px var(--gt-glow-red-soft), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-regen:hover {
  box-shadow: 0 0 25px var(--gt-glow-red), 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════
   47. FOUNDER PAGE — spots + tier details
   ═══════════════════════════════════════════════════ */
.page-label {
  font-family: var(--gt-font-ui) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 12px var(--gt-glow-red-soft) !important;
}

.spots-counter {
  border-left: 3px solid #C44044 !important;
  box-shadow: inset 3px 0 12px var(--gt-glow-red-dim) !important;
}

.spots-badge {
  font-family: var(--gt-font-ui) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}

.tier-was {
  color: var(--text-muted) !important;
}

.tier-price-amount {
  font-family: var(--gt-font-display) !important;
  text-shadow: 0 0 25px rgba(196, 64, 68, 0.3), 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

.lock-note {
  font-family: var(--gt-font-body) !important;
  color: var(--text-muted) !important;
}

.back-link {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.back-link:hover {
  text-shadow: 0 0 10px var(--gt-glow-red-dim) !important;
}


/* ═══════════════════════════════════════════════════
   48. HERO CONTENT — subtext + actions
   ═══════════════════════════════════════════════════ */
.hero-content {
  position: relative !important;
  z-index: 1 !important;
}

.hero-tagline {
  font-family: var(--gt-font-display) !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6) !important;
}

.hero-actions {
  gap: 1rem !important;
}


/* ═══════════════════════════════════════════════════
   49. DASHBOARD HEADERS — logo + email + logout
   ═══════════════════════════════════════════════════ */
.header-logo {
  filter: drop-shadow(0 0 12px rgba(196, 64, 68, 0.25)) !important;
}

.header-logo-tag {
  text-shadow: 0 0 15px rgba(196, 64, 68, 0.2) !important;
  font-family: var(--gt-font-ui) !important;
}

.header-email {
  font-family: var(--gt-font-body) !important;
}

.header-right {
  gap: 1rem !important;
}

.plan-badge {
  font-family: var(--gt-font-ui) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}


/* ═══════════════════════════════════════════════════
   50. SCROLL ANIMATIONS — fade-up
   ═══════════════════════════════════════════════════ */
@keyframes gt-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity var(--gt-duration-slow) var(--gt-ease), transform var(--gt-duration-slow) var(--gt-ease) !important;
}

.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ═══════════════════════════════════════════════════
   51. ADMIN BADGE VARIANTS
   ═══════════════════════════════════════════════════ */
.badge.paid,
.badge-paid {
  background: var(--success-dim) !important;
  color: var(--success) !important;
}

.badge.free-sub,
.badge-free {
  background: rgba(51, 51, 51, 0.3) !important;
}

.badge.active-sub,
.badge-active {
  background: var(--success-dim) !important;
  color: var(--success) !important;
}

.badge-inactive {
  background: var(--error-dim) !important;
  color: var(--error) !important;
}

.badge.tier-core,
.badge-core,
.tier-badge.core {
  background: rgba(196, 64, 68, 0.12) !important;
  color: #C44044 !important;
}

.badge.tier-premium,
.badge-pro,
.tier-badge.premium {
  background: rgba(184, 150, 42, 0.12) !important;
  color: #d4a853 !important;
}

.tier-badge.free {
  background: rgba(51, 51, 51, 0.3) !important;
}

.badge.ai,
.badge.no-ai,
.badge.pending {
  font-family: var(--gt-font-ui) !important;
}

.badge.source-tag,
.source-tag {
  font-family: var(--gt-font-ui) !important;
}


/* ═══════════════════════════════════════════════════
   52. ADMIN DASHBOARD — day buttons + bar charts
   ═══════════════════════════════════════════════════ */
.days-btn {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.days-btn.active {
  background: rgba(196, 64, 68, 0.1) !important;
  box-shadow: inset 0 -2px 0 #C44044 !important;
}

.bar-fill {
  background: linear-gradient(180deg, #C44044, #a03335) !important;
  box-shadow: 0 0 8px var(--gt-glow-red-soft) !important;
  transition: height var(--gt-duration-slow) var(--gt-ease) !important;
}


/* ═══════════════════════════════════════════════════
   53. FORM META + CHAR HINTS
   ═══════════════════════════════════════════════════ */
.form-meta {
  font-family: var(--gt-font-ui) !important;
}

.char-hint {
  font-family: var(--gt-font-ui) !important;
  color: var(--text-muted) !important;
}

.confirm-banner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   54. PULSE DOT ANIMATION (coming-soon badge)
   ═══════════════════════════════════════════════════ */
@keyframes gt-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

.badge-dot {
  animation: gt-pulse-dot 2s var(--gt-ease) infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .badge-dot {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════
   55. AUTH FORM PAGES — login, signup, forgot/reset
   Ensures auth cards match cinematic depth system.
   ═══════════════════════════════════════════════════ */

/* Auth form cards use .form-card in login/signup/forgot/reset */
.auth-wrap .form-card,
.auth-card,
.form-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}

/* Auth page footers — cinematic footer depth */
.auth-wrap footer,
.auth-footer {
  background: linear-gradient(180deg, var(--gt-bg-base) 0%, var(--gt-bg-deep) 100%) !important;
  border-top-color: rgba(196, 64, 68, 0.08) !important;
}

.footer-copy {
  font-family: var(--gt-font-body) !important;
}

.footer-links a {
  transition: color var(--gt-duration) var(--gt-ease), text-shadow var(--gt-duration) var(--gt-ease) !important;
}

.footer-links a:hover {
  text-shadow: 0 0 10px var(--gt-glow-red-dim) !important;
}


/* ═══════════════════════════════════════════════════
   56. DISCLOSURE + CONSENT — signup page panels
   ═══════════════════════════════════════════════════ */
.disclosure-panel {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.disclosure-ack {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.disclosure-ack:hover {
  border-color: rgba(196, 64, 68, 0.2) !important;
  box-shadow: 0 0 12px var(--gt-glow-red-dim) !important;
}

.disclosure-ack.checked {
  border-color: rgba(196, 64, 68, 0.35) !important;
  background: rgba(196, 64, 68, 0.06) !important;
  box-shadow: 0 0 15px var(--gt-glow-red-dim) !important;
}

.pw-requirements {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
}


/* ═══════════════════════════════════════════════════
   57. SERVICES / SERVICES-PRICING — hero + sections
   ═══════════════════════════════════════════════════ */
.services-hero {
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(196, 64, 68, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--gt-bg-deep) 0%, var(--gt-bg-base) 100%) !important;
}

.hero-bg-glow {
  opacity: 0.7 !important;
}

.hero-bg-dots {
  opacity: 0.5 !important;
}

.service-card,
.feature-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.service-card:hover,
.feature-card:hover {
  border-color: rgba(196, 64, 68, 0.15) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--gt-glow-red-dim) !important;
  transform: translateY(-2px) !important;
}

.comparison-table,
.comparison-grid {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Gold inline button hover states — keep premium feel */
.btn-gold-inline {
  transition: all var(--gt-duration) var(--gt-ease) !important;
}

.btn-gold-inline:hover {
  box-shadow: 0 0 25px var(--gt-glow-gold), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════
   58. EBOOK / ORDER PAGES — card depth
   ═══════════════════════════════════════════════════ */
.order-card,
.ebook-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}


/* ═══════════════════════════════════════════════════
   59. LEGAL / TERMS / PRIVACY — article depth
   ═══════════════════════════════════════════════════ */
.legal-content,
.privacy-content,
.terms-content,
.disclaimer-content,
.dmca-content,
.transparency-content,
article {
  background: transparent !important;
}

.legal-content h2,
.privacy-content h2,
.terms-content h2,
.disclaimer-content h2,
.transparency-content h2 {
  font-family: var(--gt-font-heading) !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
}

.legal-content h3,
.privacy-content h3,
.terms-content h3,
.disclaimer-content h3,
.transparency-content h3 {
  font-family: var(--gt-font-heading) !important;
}


/* ═══════════════════════════════════════════════════
   60. VERIFY / 2FA / PASSWORD FLOW — form depth
   ═══════════════════════════════════════════════════ */
.verify-card,
.twofa-card,
.reset-card {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}

/* QR code wrapper keeps white for readability */
.qr-wrapper {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border-radius: 10px !important;
}

/* Secret key display */
.secret-display,
.secret-key {
  background: var(--gt-bg-surface) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  font-family: var(--gt-font-ui) !important;
}


/* ═══════════════════════════════════════════════════
   61. TRY PAGE — tab bar + story form depth
   ═══════════════════════════════════════════════════ */
.story-form {
  background: var(--gt-bg-card) !important;
  border-color: rgba(51, 51, 51, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}


/* ═══════════════════════════════════════════════════
   62. GLOBAL DEPTH POLISH — shadows + borders
   Catchall for any remaining depth gaps.
   ═══════════════════════════════════════════════════ */

/* All page wrappers get deep background */
.page-wrap,
.content-wrap,
.main-wrap,
.auth-wrap {
  background: var(--gt-bg-deep) !important;
}

/* Ensure all section borders use dark tones */
section + section,
.section-wrap + .section-wrap {
  border-top-color: rgba(51, 51, 51, 0.4) !important;
}

/* Global link hover glow for non-nav links */
main a:hover,
article a:hover,
.content a:hover {
  text-shadow: 0 0 8px var(--gt-glow-red-dim) !important;
}