/* Atrium Golden Visa — Light Mode Contrast Fixes v1.0 */

/* CTA buttons */
[data-atrium-theme="light"] a[style*="background-color:#33BDE8"],
[data-atrium-theme="light"] a[style*="background:linear-gradient(90deg, rgba(51,189,232"] {
  color: #ffffff !important;
  background-color: #1a7fa0 !important;
}
[data-atrium-theme="light"] a[style*="background-color:var(--at-bg-text"] {
  background-color: #0f172a !important;
  color: #ffffff !important;
}
[data-atrium-theme="light"] a[style*="border-color:#33BDE8"] {
  border-color: #1a7fa0 !important;
}
[data-atrium-theme="light"] a[style*="color:var(--at-bg-text"] {
  color: #0f172a !important;
}
[data-atrium-theme="light"] button[style*="background:linear-gradient"] {
  color: #0f172a !important;
}

/* Cards and panels */
[data-atrium-theme="light"] [style*="background-color:rgba(8,19,33,0.76)"] {
  background-color: rgba(247,251,253,0.90) !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.08) !important;
}
[data-atrium-theme="light"] [style*="background:linear-gradient(135deg,rgba(51,189,232,0.10)"] {
  background: linear-gradient(135deg,rgba(26,127,160,0.06),rgba(29,122,63,0.04),rgba(247,251,253,0.95)) !important;
  border-color: rgba(26,127,160,0.15) !important;
}

/* Accent backgrounds */
[data-atrium-theme="light"] [style*="background:rgba(51,189,232,0.10)"] {
  background: rgba(26,127,160,0.08) !important;
}
[data-atrium-theme="light"] [style*="background:rgba(155,234,166,0.10)"] {
  background: rgba(29,122,63,0.06) !important;
}

/* Gradients */
[data-atrium-theme="light"] [style*="background:linear-gradient(180deg"] {
  background: linear-gradient(180deg,rgba(26,127,160,0.04),#f7fbfd) !important;
}

/* FAQ */
[data-atrium-theme="light"] details,
[data-atrium-theme="light"] [role="group"] {
  border-color: rgba(15,23,42,0.08) !important;
}

/* Footer */
[data-atrium-theme="light"] footer,
[data-atrium-theme="light"] [role="contentinfo"],
[data-atrium-theme="light"] footer * {
  color: #0f172a !important;
}
[data-atrium-theme="light"] footer {
  background-color: #e8f0f5 !important;
}
[data-atrium-theme="light"] footer a {
  color: #1a7fa0 !important;
}
[data-atrium-theme="light"] footer a:hover {
  color: #0f172a !important;
}
[data-atrium-theme="light"] footer [style*="color:#33BDE8"] {
  color: #1a7fa0 !important;
}
[data-atrium-theme="light"] footer [style*="color:rgba(255,255,255"] {
  color: rgba(15,23,42,0.72) !important;
}

/* Force text readability */
[data-atrium-theme="light"] p,
[data-atrium-theme="light"] span,
[data-atrium-theme="light"] div,
[data-atrium-theme="light"] li {
  color: inherit;
}
[data-atrium-theme="light"] [style*="color:rgba(255,255,255,0.60)"] {
  color: rgba(15,23,42,0.60) !important;
}
[data-atrium-theme="light"] [style*="color:rgba(255,255,255,0.72)"] {
  color: rgba(15,23,42,0.72) !important;
}
[data-atrium-theme="light"] [style*="color:rgba(255,255,255,0.55)"] {
  color: rgba(15,23,42,0.55) !important;
}
[data-atrium-theme="light"] [style*="color:#ffffff"] {
  color: #0f172a !important;
}

/* CTA buttons keep white text */
[data-atrium-theme="light"] a[style*="background-color:#33BDE8"],
[data-atrium-theme="light"] a[style*="background-color:var(--at-bg-text"] {
  color: #ffffff !important;
}
[data-atrium-theme="light"] a[style*="background:linear-gradient(90deg, rgba(51,189,232"] {
  color: #ffffff !important;
  background: linear-gradient(90deg, #1a7fa0, #1d7a3f) !important;
}

/* Nav pills */
[data-atrium-theme="light"] a[style*="background-color:rgba(51,189,232,0.14)"] {
  background-color: rgba(26,127,160,0.12) !important;
  color: #0f172a !important;
}

/* Gradient text fix */
[data-atrium-theme="light"] [style*="-webkit-text-fill-color"] {
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
[data-atrium-theme="light"] [style*="color:var(--at-text"] {
  color: #0f172a !important;
}

/* Page background */
[data-atrium-theme="light"] .min-h-screen {
  background-color: #f7fbfd !important;
  color: #0f172a !important;
}
[data-atrium-theme="light"] header {
  background-color: rgba(247,251,253,0.92) !important;
  border-color: rgba(15,23,42,0.10) !important;
}
[data-atrium-theme="light"] header a,
[data-atrium-theme="light"] header button {
  color: #0f172a !important;
}
[data-atrium-theme="light"] header [style*="border-color:rgba(255,255,255"] {
  border-color: rgba(15,23,42,0.10) !important;
}
[data-atrium-theme="light"] header [style*="background-color:rgba(255,255,255,0.05)"] {
  background-color: rgba(15,23,42,0.04) !important;
}
[data-atrium-theme="light"] header [style*="background-color:rgba(8,19,33"] {
  background-color: rgba(247,251,253,0.90) !important;
}
[data-atrium-theme="light"] header [style*="background-color:rgba(7,17,31"] {
  background-color: rgba(247,251,253,0.92) !important;
}
[data-atrium-theme="light"] [style*="border-color:rgba(255,255,255,0.10)"] {
  border-color: rgba(15,23,42,0.08) !important;
}
[data-atrium-theme="light"] [style*="background-color:rgba(255,255,255,0.05)"] {
  background-color: rgba(15,23,42,0.03) !important;
}
[data-atrium-theme="light"] [style*="background-color:rgba(8,19,33"] {
  background-color: rgba(247,251,253,0.85) !important;
}
[data-atrium-theme="light"] [style*="stroke:#9BEAA6"] {
  stroke: #1d7a3f !important;
}
[data-atrium-theme="light"] .fixed.-z-10 {
  background: radial-gradient(circle at top left, rgba(26,127,160,0.08), transparent 28%), radial-gradient(circle at top right, rgba(26,127,160,0.10), transparent 24%), radial-gradient(circle at bottom, rgba(29,122,63,0.06), transparent 30%) !important;
}

/* ============================================
   Atrium — Subpage Layout Fixes v1.0
   Tighter spacing, better card distribution
   ============================================ */

/* 1. Main wrapper: reduce excessive bottom padding (96px → 48px) */
main.max-w-7xl { padding-bottom: 48px !important; }

/* 2. Hero section: reduce bottom gap (64px → 32px) */
main > section:first-of-type { padding-bottom: 32px !important; }

/* 3. Inter-section gaps: normalize mt-14 to mt-8 (56px → 32px) */
main > section + section { margin-top: 32px !important; }
main > .mt-14 { margin-top: 32px !important; }

/* 4. Guide/insight cards: 3-col grid earlier (at 1024px instead of 1280px) */
@media (min-width: 1024px) {
  main .grid[class*="xl:grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  main .grid[class*="xl:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }
}

/* 5. Link lists inside insights: multi-column instead of single stack */
@media (min-width: 640px) {
  main .grid.gap-3:not([class*="grid-cols"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  main .grid.gap-3:not([class*="grid-cols"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 6. Reduce card internal padding on large screens (40px → 28px) */
@media (min-width: 1024px) {
  main .rounded-\[1\.8rem\][class*="lg:p-10"] {
    padding: 1.75rem !important;
  }
}

/* 7. Tighter gaps in card grids */
main .grid.gap-6 { gap: 1rem !important; }
@media (min-width: 768px) {
  main .grid.gap-6 { gap: 1.25rem !important; }
}

/* 8. Section py-20 → py-12 for subpages (not homepage) */
main > section[class*="py-20"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
main > section[class*="py-16"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

/* 9. Breadcrumb spacing */
main > nav + section { margin-top: 0 !important; }

/* 10. Footer gap reduction */
footer { margin-top: 2rem !important; }

/* ============================================
   Atrium — Subpage Visual Enhancement v2.0
   CSS-only premium visual layer for 97 subpages
   ============================================ */

/* --- 1. ANIMATED GRADIENT ORBS — background depth per section --- */
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.97); }
}
main > section:nth-child(even) { position: relative; overflow: hidden; }
main > section:nth-child(even)::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  right: -15%; top: -20%;
  background: radial-gradient(circle, rgba(51,189,232,0.06) 0%, transparent 70%);
  filter: blur(60px);
  animation: orbDrift 18s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
main > section:nth-child(4n+3)::after {
  background: radial-gradient(circle, rgba(155,234,166,0.05) 0%, transparent 70%);
  left: -15%; right: auto;
  animation-duration: 22s; animation-direction: reverse;
}

/* --- 2. SECTION DIVIDERS — wider gradient lines with orb accent --- */
section + section::before {
  width: 200px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #33BDE8 30%, #9BEAA6 70%, transparent) !important;
  opacity: 0.4 !important;
  margin-bottom: 2.5rem !important;
}

/* --- 3. CARD HOVER — premium lift, glow border, glass reflection --- */
.rounded-\[2rem\],
.rounded-\[1\.8rem\] {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s ease !important;
}
.rounded-\[2rem\]:hover,
.rounded-\[1\.8rem\]:hover {
  transform: translateY(-4px) scale(1.005) !important;
  box-shadow:
    0 20px 60px rgba(51,189,232,0.10),
    0 4px 16px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-color: rgba(51,189,232,0.30) !important;
}

/* --- 4. HERO SECTION — larger decorative gradient, text glow --- */
main > section:first-of-type {
  position: relative;
  padding-bottom: 48px !important;
}
main > section:first-of-type::before {
  content: '';
  position: absolute;
  top: -20%; left: -10%; right: -10%; bottom: -10%;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(51,189,232,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 60%, rgba(155,234,166,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(47,144,175,0.06) 0%, transparent 40%);
  pointer-events: none; z-index: 0;
}
main > section:first-of-type h1 {
  text-shadow: 0 0 80px rgba(51,189,232,0.12);
}

/* --- 5. SCROLL-DRIVEN ANIMATIONS (modern browsers, progressive) --- */
@supports (animation-timeline: view()) {
  main > section {
    animation: fadeUp 0.8s ease both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 30% !important;
  }
  main > section .rounded-\[2rem\],
  main > section .rounded-\[1\.8rem\] {
    animation: fadeUp 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}

/* --- 6. TYPOGRAPHY RHYTHM — better vertical flow --- */
main h1 { letter-spacing: -0.02em; }
main h2 { letter-spacing: -0.015em; }
main h2.font-serif { margin-top: 0.25em; }
main p + .grid, main p + .flex { margin-top: 1.75rem; }

/* --- 7. CTA BUTTONS — animated gradient shimmer on hover --- */
@keyframes ctaShimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
button[style*="background-image:linear-gradient"],
a[style*="background-color:#33BDE8"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}
button[style*="background-image:linear-gradient"]:hover,
a[style*="background-color:#33BDE8"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(51,189,232,0.35), 0 8px 24px rgba(51,189,232,0.15) !important;
  filter: brightness(1.08) !important;
}

/* --- 8. GRID FILL — make single-column cards stretch full width --- */
main > section > .grid:not([class*="grid-cols"]) > .rounded-\[2rem\]:only-child,
main > section > .grid:not([class*="grid-cols"]) > .rounded-\[1\.8rem\]:only-child {
  grid-column: 1 / -1;
}
main > section > .rounded-\[2rem\]:only-child,
main > section > .rounded-\[1\.8rem\]:only-child {
  max-width: 100%;
}

/* --- 9. TABLE VISUAL UPGRADE — for comparison tables in insights --- */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table thead th {
  background-color: rgba(51,189,232,0.08) !important;
  font-weight: 600 !important;
}
table tbody tr {
  transition: background-color 0.2s ease;
}
table tbody tr:hover {
  background-color: rgba(51,189,232,0.04) !important;
}

/* --- 10. DETAILS/FAQ — smoother open + accent left border --- */
details {
  border-left: 3px solid transparent !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
details[open] {
  border-left-color: #33BDE8 !important;
  background-color: rgba(51,189,232,0.03) !important;
}
details summary::marker { display: none; }
details summary::-webkit-details-marker { display: none; }

/* --- 11. AUTHOR CARD — image glow + subtle border accent --- */
img[alt*="Karen"],
img[alt*="Thiago"] {
  box-shadow: 0 0 30px rgba(51,189,232,0.15);
  border: 2px solid rgba(51,189,232,0.20) !important;
  transition: box-shadow 0.3s ease !important;
}
img[alt*="Karen"]:hover,
img[alt*="Thiago"]:hover {
  box-shadow: 0 0 40px rgba(51,189,232,0.25);
}

/* --- 12. BREADCRUMB — subtle visual upgrade --- */
nav[aria-label="Breadcrumb"] ol {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

/* --- 13. "ON THIS PAGE" / TOC — sticky sidebar on desktop --- */
@media (min-width: 1024px) {
  main > section > .grid > div:last-child > .rounded-\[1\.8rem\]:has([href^="#"]) {
    position: sticky;
    top: 180px;
  }
}

/* --- 14. LINK CARD GRIDS — hover accent line left --- */
a.rounded-2xl[style*="background-color:rgba(8,19,33"] {
  border-left: 3px solid transparent !important;
  transition: border-left-color 0.3s ease, transform 0.3s ease !important;
}
a.rounded-2xl[style*="background-color:rgba(8,19,33"]:hover {
  border-left-color: #33BDE8 !important;
}

/* --- 15. BACKGROUND NOISE TEXTURE — subtle grain overlay --- */
main::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* --- 16. NUMBERED STEP BADGES — pulse on hover --- */
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(155,234,166,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(155,234,166,0); }
}
.rounded-full[style*="background-color:#9BEAA6"]:hover,
.rounded-full[style*="background-color:#33BDE8"]:hover {
  animation: stepPulse 1s ease infinite;
}

/* --- LIGHT MODE OVERRIDES for visual enhancements --- */
[data-atrium-theme="light"] main > section:nth-child(even)::after {
  background: radial-gradient(circle, rgba(26,127,160,0.04) 0%, transparent 70%);
}
[data-atrium-theme="light"] section + section::before {
  background: linear-gradient(90deg, transparent, #1a7fa0 30%, #1d7a3f 70%, transparent) !important;
}
[data-atrium-theme="light"] nav[aria-label="Breadcrumb"] ol {
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.06);
}
[data-atrium-theme="light"] details[open] {
  border-left-color: #1a7fa0 !important;
  background-color: rgba(26,127,160,0.03) !important;
}
[data-atrium-theme="light"] a.rounded-2xl:hover {
  border-left-color: #1a7fa0 !important;
}
[data-atrium-theme="light"] main::before { opacity: 0.3; }
[data-atrium-theme="light"] main > section:first-of-type h1 {
  text-shadow: none;
}

/* --- REDUCED MOTION — respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  main > section:nth-child(even)::after { animation: none !important; }
  .rounded-full[style*="background-color:#9BEAA6"]:hover { animation: none !important; }
}

/* === Atrium — Mobile Responsiveness Fixes v1.0 (375x812 tested) === */
@media (max-width: 767px) {
  /* 1. NAV PILLS: 34px tall + 12px text → 44px + 13px */
  .flex.gap-3.overflow-x-auto a.shrink-0.rounded-full {
    min-height: 44px !important; font-size: 13px !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
    display: inline-flex !important; align-items: center !important;
  }
  /* 2. STATS GRID text too small (12px) */
  .grid.grid-cols-2.gap-1 .text-xs { font-size: 13px !important; }
  /* 3. "View profile" links: only 20px tall */
  a.mt-5.inline-flex[href*="author"],
  a.inline-flex.items-center[href*="author"] {
    min-height: 44px !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  /* 4. FOOTER: underline links 15-19px → 44px tap area */
  footer a.underline {
    display: inline-block !important; min-height: 44px !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
    line-height: 20px !important;
  }
  /* 5. FOOTER: Cookie button 26px → 44px */
  footer button {
    min-height: 44px !important; padding: 12px 16px !important;
    font-size: 14px !important;
  }
  /* 6. FOOTER: 12px text elements */
  footer .text-xs { font-size: 13px !important; }
  /* 7. BREADCRUMB links: 16px tall → 44px tap area */
  nav[aria-label="Breadcrumb"] a {
    min-height: 44px !important; display: inline-flex !important;
    align-items: center !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  /* 8. "View full profile" text link: 17px tall */
  a.text-sm.font-medium {
    min-height: 44px !important; display: inline-flex !important;
    align-items: center !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  /* 9. "Back to Guides" link: 20px tall */
  a.inline-flex.items-center.gap-2 {
    min-height: 44px !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  /* 10. PATHWAYS/PLANNING filter pills: 38px → 44px */
  a.rounded-full.border.px-4 {
    min-height: 44px !important;
    display: inline-flex !important; align-items: center !important;
  }
  /* 11. GUIDES card "Read guide" links: 40px → 44px */
  a.mt-3.inline-flex.items-center {
    min-height: 44px !important;
    padding-top: 2px !important; padding-bottom: 2px !important;
  }
  /* 12. SUBPAGE HERO: tighter margins on narrow screens */
  main > section:first-of-type:not([id="hero"]) {
    margin-left: 0.5rem !important; margin-right: 0.5rem !important;
    padding-left: 1.25rem !important; padding-right: 1.25rem !important;
  }
  /* 13. TABLE: smooth scroll + visible scrollbar hint */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .overflow-x-auto table { min-width: 480px; }
  /* 14. GLOBAL: prevent rogue horizontal overflow */
  html, body { overflow-x: hidden !important; }
}

/* ============================================
   Atrium — Subpage Hero Images v3.0
   Universal selector — NO data-page needed
   Homepage has #hero on first section, subpages don't
   ============================================ */

/* All subpage hero sections (NOT homepage which has id="hero") */
main > section:first-of-type:not([id="hero"]) {
  background-image: linear-gradient(180deg, rgba(7,17,31,0.72) 0%, rgba(7,17,31,0.88) 100%), url('/media/atrium-about-team.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 2rem;
  margin: 0 1rem;
  padding: 4rem 2rem !important;
}

/* Light mode subpage heroes */
[data-atrium-theme="light"] main > section:first-of-type:not([id="hero"]) {
  background-image: linear-gradient(180deg, rgba(247,251,253,0.78) 0%, rgba(247,251,253,0.92) 100%), url('/media/atrium-about-team.webp') !important;
}

/* Light mode: homepage hero video — hide video, use clean gradient */
[data-atrium-theme="light"] #hero video {
  opacity: 0.12 !important;
  filter: saturate(0.3) brightness(1.4) !important;
}
[data-atrium-theme="light"] #hero video + div {
  background: linear-gradient(135deg, rgba(247,251,253,0.88) 0%, rgba(230,242,250,0.82) 50%, rgba(247,251,253,0.90) 100%) !important;
}
[data-atrium-theme="light"] #hero {
  background-color: #f0f7fb !important;
}
[data-atrium-theme="light"] #hero h1 span {
  color: #0f172a !important;
}
[data-atrium-theme="light"] #hero h1 span[style*="color:#33BDE8"] {
  color: #1a7fa0 !important;
}
[data-atrium-theme="light"] #hero .float-slow {
  display: none !important;
}


















/* === CONTRAST + LAYOUT FIX V2 === */
/* ═══════════════════════════════════════════════════════════════════
   ATRIUM GOLDEN VISA — Contrast + Layout Fix v2 (2026-05-13)
   Fixes: contrast (light + dark), z-index overlaps, button positioning,
   stats grid spacing, header layering.
   ═══════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   PART 1 — Z-INDEX + OVERLAP FIXES (BOTH MODES)
   ════════════════════════════════════════════════════════════════ */

/* Hero video background must stay behind everything */
#hero video,
[id*="hero"] video,
.absolute.inset-0 video {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Hero text/content layering (orbs explicitly excluded — they must be absolute) */
/* REMOVED: section:first-of-type > div rule was catching orbs.
   The hero is at body level (a DIV, not section), so this was wrong. */

/* Buttons must always be above stat cards / decorative bands */
a[data-automa-trigger="true"],
a.shimmer-btn,
button.shimmer-btn,
a[class*="rounded-full"][class*="px-8"],
a[class*="rounded-2xl"][class*="px-6"],
a[class*="rounded-2xl"][class*="px-8"] {
  position: relative !important;
  z-index: 5 !important;
}

/* Stats cards row — proper grid spacing, no overlap */
section [class*="grid"][class*="gap-"] > div,
section [class*="grid"][class*="md:grid-cols-4"] > div,
section [class*="grid"][class*="grid-cols-2"] > div,
section [class*="grid"][class*="grid-cols-4"] > div {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

/* Stat number containers — ensure adequate padding so number/label don't collide */
[class*="rounded-[1.5rem]"][class*="text-center"],
[class*="rounded-[1.5rem]"][class*="p-6"][class*="text-center"] {
  padding: 1.5rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 140px !important;
}

[class*="rounded-[1.5rem]"][class*="text-center"] > * {
  margin: 0 !important;
}

[class*="rounded-[1.5rem]"][class*="text-center"] [class*="text-3xl"],
[class*="rounded-[1.5rem]"][class*="text-center"] [class*="font-serif"] {
  line-height: 1.1 !important;
  margin-bottom: 0.25rem !important;
}

[class*="rounded-[1.5rem]"][class*="text-center"] [class*="text-xs"],
[class*="rounded-[1.5rem]"][class*="text-center"] [class*="uppercase"] {
  margin-top: 0.5rem !important;
  line-height: 1.3 !important;
}

/* Hero CTA stack — proper button spacing */
section:first-of-type [class*="flex"][class*="gap-"] {
  z-index: 3 !important;
}

/* Header (if present) — sticky and above all */
header {
  z-index: 50 !important;
}

/* Decorative orbs/blobs — keep behind content */
.float-slow,
[class*="float-slow"],
[class*="orb-"],
[class*="blob"] {
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 2 — LIGHT MODE — Root Body
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] body,
[data-atrium-theme="light"] html,
[data-atrium-theme="light"] .min-h-screen {
  background: #f7f5ef !important;
  color: #0f172a !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 3 — LIGHT MODE — Kill white/light text on cream
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [style*="color:#ffffff"],
[data-atrium-theme="light"] [style*="color:#fff"],
[data-atrium-theme="light"] [style*="color: #fff"],
[data-atrium-theme="light"] [style*="color: #ffffff"],
[data-atrium-theme="light"] [style*="color:rgba(255"],
[data-atrium-theme="light"] [style*="color: rgba(255"],
[data-atrium-theme="light"] [style*="color:rgb(255"],
[data-atrium-theme="light"] [style*="color: rgb(255"],
[data-atrium-theme="light"] .text-white,
[data-atrium-theme="light"] [class*=" text-white"] {
  color: #0f172a !important;
}

/* Preserve white text on solid dark/colored buttons */
[data-atrium-theme="light"] a[style*="background-color:#33BDE8"],
[data-atrium-theme="light"] a[style*="background-color: #33BDE8"],
[data-atrium-theme="light"] a[style*="background:linear-gradient"],
[data-atrium-theme="light"] a[style*="background-image:linear-gradient"],
[data-atrium-theme="light"] button[style*="background:linear-gradient"],
[data-atrium-theme="light"] button[style*="background-image:linear-gradient"],
[data-atrium-theme="light"] [style*="background:#1a7fa0"],
[data-atrium-theme="light"] [style*="background-color:#1a7fa0"],
[data-atrium-theme="light"] [style*="background-color:#0f172a"],
[data-atrium-theme="light"] [style*="background:#0f172a"],
[data-atrium-theme="light"] [style*="background-color:rgb(15, 23, 42)"],
[data-atrium-theme="light"] [style*="background-color: rgb(15, 23, 42)"] {
  color: #ffffff !important;
}

[data-atrium-theme="light"] a[style*="background-color:#33BDE8"] *,
[data-atrium-theme="light"] a[style*="background:linear-gradient"] *,
[data-atrium-theme="light"] a[style*="background-image:linear-gradient"] *,
[data-atrium-theme="light"] button[style*="background:linear-gradient"] *,
[data-atrium-theme="light"] button[style*="background-image:linear-gradient"] * {
  color: inherit !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 4 — LIGHT MODE — Cyan/Green tinted cards (stats)
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [style*="background:rgba(26,127,160,0.08)"],
[data-atrium-theme="light"] [style*="background-color:rgba(26,127,160,0.08)"],
[data-atrium-theme="light"] [style*="background:rgba(26, 127, 160, 0.08)"],
[data-atrium-theme="light"] [style*="background-color:rgba(26, 127, 160, 0.08)"] {
  background: linear-gradient(135deg, rgba(26,127,160,0.10), rgba(26,127,160,0.05)) !important;
  border: 1px solid rgba(26,127,160,0.25) !important;
  box-shadow: 0 2px 8px rgba(26,127,160,0.10) !important;
}

[data-atrium-theme="light"] [style*="background:rgba(29,122,63,0.08)"],
[data-atrium-theme="light"] [style*="background-color:rgba(29,122,63,0.08)"],
[data-atrium-theme="light"] [style*="background:rgba(29, 122, 63, 0.08)"],
[data-atrium-theme="light"] [style*="background-color:rgba(29, 122, 63, 0.08)"] {
  background: linear-gradient(135deg, rgba(29,122,63,0.10), rgba(29,122,63,0.05)) !important;
  border: 1px solid rgba(29,122,63,0.25) !important;
  box-shadow: 0 2px 8px rgba(29,122,63,0.10) !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 5 — LIGHT MODE — Stat numbers (cyan/green = invisible on tint)
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [style*="color:#33BDE8"],
[data-atrium-theme="light"] [style*="color: #33BDE8"],
[data-atrium-theme="light"] [style*="color:rgb(51, 189, 232)"],
[data-atrium-theme="light"] [style*="color: rgb(51, 189, 232)"],
[data-atrium-theme="light"] [style*="color:#1a7fa0"],
[data-atrium-theme="light"] [style*="color: #1a7fa0"],
[data-atrium-theme="light"] [style*="color:rgb(26, 127, 160)"],
[data-atrium-theme="light"] [style*="color: rgb(26, 127, 160)"] {
  color: #0e5470 !important;
}

[data-atrium-theme="light"] [style*="color:#9BEAA6"],
[data-atrium-theme="light"] [style*="color: #9BEAA6"],
[data-atrium-theme="light"] [style*="color:rgb(155, 234, 166)"],
[data-atrium-theme="light"] [style*="color: rgb(155, 234, 166)"] {
  color: #1d6b3a !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 6 — LIGHT MODE — Dark slate transparent overlays (cards)
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [style*="background:rgba(15, 23, 42, 0.02"],
[data-atrium-theme="light"] [style*="background-color:rgba(15, 23, 42, 0.02"],
[data-atrium-theme="light"] [style*="background:rgba(15,23,42,0.02"],
[data-atrium-theme="light"] [style*="background-color:rgba(15,23,42,0.02"] {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06) !important;
}

[data-atrium-theme="light"] [style*="background:rgba(15, 23, 42, 0.03"],
[data-atrium-theme="light"] [style*="background-color:rgba(15, 23, 42, 0.03"],
[data-atrium-theme="light"] [style*="background:rgba(15,23,42,0.03"],
[data-atrium-theme="light"] [style*="background-color:rgba(15,23,42,0.03"] {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.08) !important;
}

[data-atrium-theme="light"] [style*="background:rgba(15, 23, 42, 0.04"],
[data-atrium-theme="light"] [style*="background-color:rgba(15, 23, 42, 0.04"],
[data-atrium-theme="light"] [style*="background:rgba(15,23,42,0.04"],
[data-atrium-theme="light"] [style*="background-color:rgba(15,23,42,0.04"] {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10) !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 7 — LIGHT MODE — Text with low opacity (muted text)
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [style*="color:rgba(15, 23, 42, 0.55)"],
[data-atrium-theme="light"] [style*="color: rgba(15, 23, 42, 0.55)"],
[data-atrium-theme="light"] [style*="color:rgba(15,23,42,0.55)"],
[data-atrium-theme="light"] [style*="color:rgba(15, 23, 42, 0.60)"],
[data-atrium-theme="light"] [style*="color:rgba(15,23,42,0.60)"],
[data-atrium-theme="light"] [style*="color:rgba(15, 23, 42, 0.72)"],
[data-atrium-theme="light"] [style*="color:rgba(15,23,42,0.72)"] {
  color: rgba(15, 23, 42, 1) !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 8 — LIGHT MODE — Headings + body text + Tailwind utils
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] h1,
[data-atrium-theme="light"] h2,
[data-atrium-theme="light"] h3,
[data-atrium-theme="light"] h4,
[data-atrium-theme="light"] h5,
[data-atrium-theme="light"] h6 {
  color: #0a1224 !important;
}

[data-atrium-theme="light"] p,
[data-atrium-theme="light"] li {
  color: #1e293b !important;
}

[data-atrium-theme="light"] strong,
[data-atrium-theme="light"] b {
  color: #0a1224 !important;
}

[data-atrium-theme="light"] .text-slate-300,
[data-atrium-theme="light"] .text-slate-200,
[data-atrium-theme="light"] .text-slate-100,
[data-atrium-theme="light"] .text-slate-400,
[data-atrium-theme="light"] .text-slate-500,
[data-atrium-theme="light"] [class*=" text-slate-3"],
[data-atrium-theme="light"] [class*=" text-slate-2"],
[data-atrium-theme="light"] [class*=" text-slate-1"],
[data-atrium-theme="light"] [class*=" text-slate-4"],
[data-atrium-theme="light"] [class*=" text-slate-5"] {
  color: #475569 !important;
}

[data-atrium-theme="light"] .bg-slate-950,
[data-atrium-theme="light"] .bg-slate-900,
[data-atrium-theme="light"] .bg-slate-800,
[data-atrium-theme="light"] [class*=" bg-slate-95"],
[data-atrium-theme="light"] [class*=" bg-slate-90"],
[data-atrium-theme="light"] [class*=" bg-slate-80"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-atrium-theme="light"] .border-white\/10,
[data-atrium-theme="light"] .border-white\/15,
[data-atrium-theme="light"] .border-white\/20,
[data-atrium-theme="light"] [class*="border-white"] {
  border-color: rgba(15, 23, 42, 0.12) !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 9 — LIGHT MODE — Hero badge readability
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [class*="inline-flex h-10"][class*="rounded-full border"],
[data-atrium-theme="light"] [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"] {
  border-color: rgba(26,127,160,0.40) !important;
  background-color: rgba(26,127,160,0.06) !important;
  color: #0e5470 !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 10 — LIGHT MODE — Footer (dark by design, kept dark)
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] footer {
  background: #0f172a !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,0.10) !important;
}

[data-atrium-theme="light"] footer * {
  color: #e2e8f0 !important;
}

[data-atrium-theme="light"] footer h2,
[data-atrium-theme="light"] footer h3 {
  color: #ffffff !important;
}

[data-atrium-theme="light"] footer a {
  color: #33BDE8 !important;
}

[data-atrium-theme="light"] footer a:hover {
  color: #9BEAA6 !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 11 — DARK MODE — Increase contrast on muted text
   ════════════════════════════════════════════════════════════════ */
:root:not([data-atrium-theme="light"]) .text-slate-300,
:root:not([data-atrium-theme="light"]) p.text-slate-300 {
  color: #e2e8f0 !important;
}

:root:not([data-atrium-theme="light"]) .text-slate-400 {
  color: #cbd5e1 !important;
}

:root:not([data-atrium-theme="light"]) .text-slate-500 {
  color: #94a3b8 !important;
}

:root:not([data-atrium-theme="light"]) body {
  background: rgb(11, 11, 12) !important;
  color: #f1f5f9 !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 12 — Focus visible (a11y)
   ════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #33BDE8 !important;
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════
   PART 13 — MAGIC CARDS (Schengen/EU/Passport feature cards)
   Original gradient ends in rgba(7,17,31,0.5) = dark overlay.
   In light mode, force lighter gradient. In dark mode, keep premium feel.
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] .magic-card,
[data-atrium-theme="light"] [class*="magic-card"] {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(247,251,253,0.90)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 8px 30px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04) !important;
}

/* Magic-card with cyan accent in light mode */
[data-atrium-theme="light"] [class*="magic-card"][style*="rgba(51, 189, 232"] {
  background: linear-gradient(135deg, rgba(51,189,232,0.08), rgba(255,255,255,0.95)) !important;
  border: 1px solid rgba(51,189,232,0.25) !important;
}

/* Magic-card with green accent in light mode */
[data-atrium-theme="light"] [class*="magic-card"][style*="rgba(155, 234, 166"] {
  background: linear-gradient(135deg, rgba(155,234,166,0.10), rgba(255,255,255,0.95)) !important;
  border: 1px solid rgba(155,234,166,0.30) !important;
}

/* Magic-card with both colors in light mode */
[data-atrium-theme="light"] [class*="magic-card"][style*="rgba(51, 189, 232"][style*="rgba(155, 234, 166"] {
  background: linear-gradient(135deg, rgba(51,189,232,0.07), rgba(155,234,166,0.07), rgba(255,255,255,0.95)) !important;
  border: 1px solid rgba(51,189,232,0.20) !important;
}

/* All magic-card text in light mode */
[data-atrium-theme="light"] .magic-card *,
[data-atrium-theme="light"] [class*="magic-card"] * {
  color: inherit;
}

[data-atrium-theme="light"] .magic-card h2,
[data-atrium-theme="light"] .magic-card h3,
[data-atrium-theme="light"] [class*="magic-card"] h2,
[data-atrium-theme="light"] [class*="magic-card"] h3 {
  color: #0a1224 !important;
}

[data-atrium-theme="light"] .magic-card p,
[data-atrium-theme="light"] [class*="magic-card"] p {
  color: #1e293b !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 14 — STATS CARDS ROW (200+ / 100% / 7 days / Immediate)
   Original gap-1 = 4px gap is too tight. Increase to gap-3 (12px).
   Add proper card styling so they don't visually merge.
   ════════════════════════════════════════════════════════════════ */
.grid.grid-cols-2.gap-1.sm\:grid-cols-4,
[class*="grid"][class*="grid-cols-2"][class*="gap-1"][class*="grid-cols-4"] {
  gap: 0.75rem !important;
  padding: 0.75rem !important;
}

[data-atrium-theme="light"] .grid.grid-cols-2.gap-1.sm\:grid-cols-4 > div,
[data-atrium-theme="light"] [class*="grid"][class*="grid-cols-2"][class*="gap-1"][class*="grid-cols-4"] > div {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
  border-radius: 1.25rem !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 15 — HERO + HERO CTA AREA — proper z-index stack
   The hero is at BODY level (not in a <section>), so we target the
   hero wrapper directly. We do NOT use section:first-of-type because
   that matches the stats section which contains orbs.
   ════════════════════════════════════════════════════════════════ */

/* Hero wrapper isolation */
body > .relative.mx-auto.max-w-5xl.text-center,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"]:first-of-type {
  position: relative !important;
  isolation: isolate !important;
}

/* Hero CTA buttons z-index */
body > .relative.mx-auto.max-w-5xl.text-center a[class*="rounded-full"],
body > .relative.mx-auto.max-w-5xl.text-center a[class*="rounded-2xl"] {
  position: relative !important;
  z-index: 3 !important;
}

/* Make sure stats grid container has its own stacking context */
section:has(.grid.grid-cols-2.gap-1) {
  position: relative !important;
  z-index: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   PART 16 — Hero badge ("200+ American Families Guided")
   ════════════════════════════════════════════════════════════════ */
[data-atrium-theme="light"] [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"][class*="tracking"] {
  background-color: rgba(26,127,160,0.08) !important;
  border-color: rgba(26,127,160,0.35) !important;
  color: #0e5470 !important;
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════════
   PART 17 — MOBILE — ensure stats stack properly on small screens
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .grid.grid-cols-2.gap-1.sm\:grid-cols-4,
  [class*="grid"][class*="grid-cols-2"][class*="gap-1"][class*="grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Hero CTAs full width on mobile */
  section:first-of-type a[class*="rounded-full"],
  section:first-of-type a[class*="rounded-2xl"] {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTAs stack vertically */
  section:first-of-type [class*="flex"][class*="flex-wrap"] {
    flex-direction: column !important;
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════
   PART 18 — HERO + STATS OVERLAP FIX (SURGICAL)
   The hero wrapper ends at y=479 but stats grid starts at y=431
   (overlap of ~48px). Fix surgically: just enough padding/margin to
   prevent overlap, NO excessive whitespace before next sections.
   ════════════════════════════════════════════════════════════════ */

/* Hero wrapper: balanced spacing top + bottom */
body > .relative.mx-auto.max-w-5xl.text-center,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"]:first-of-type {
  padding-top: 2rem !important;
  padding-bottom: 5rem !important;
}

/* Hero badge margin-top */
body > .relative.mx-auto.max-w-5xl.text-center > [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"]:first-child,
body > .relative.mx-auto.max-w-5xl.text-center > div:first-child [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"]:first-child,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] > [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"]:first-child {
  margin-top: 1rem !important;
}

/* Mobile: tighter spacing */
@media (max-width: 640px) {
  body > .relative.mx-auto.max-w-5xl.text-center,
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"]:first-of-type {
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Stats section right after hero: modest margin */
body > .relative.mx-auto.max-w-5xl.text-center + section,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] + section {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* CRITICAL: tighten gap between stats section and "What You Get From Day One" */
body > section[class*="atrium-reveal"]:has(.grid.grid-cols-2.gap-1) + section,
body > section + section[class*="atrium-reveal"] {
  margin-top: 0 !important;
  padding-top: 2.5rem !important;
}

/* Stats grid container itself */
.grid.grid-cols-2.gap-1.sm\:grid-cols-4,
[class*="grid"][class*="grid-cols-2"][class*="gap-1"][class*="grid-cols-4"] {
  margin-top: 0 !important;
}

/* Hero CTAs wrapper — keep current spacing, no extra margin */
section:first-of-type .flex.flex-wrap.gap-4,
.relative.mx-auto.max-w-5xl.text-center .flex.flex-wrap.gap-4 {
  margin-bottom: 1.5rem !important;
}

/* Mobile: tighter but still keep gap so stats don't overlap hero */
@media (max-width: 768px) {
  body > .relative.mx-auto.max-w-5xl.text-center,
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"]:first-of-type {
    padding-bottom: 4rem !important;
  }

  body > .relative.mx-auto.max-w-5xl.text-center + section,
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] + section {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   PART 19 — HEADER OVERLAP FIX (mentioned by user)
   Decorative orbs / sticky elements may overlap header content.
   Force proper stacking on any top-positioned elements.
   ════════════════════════════════════════════════════════════════ */

/* Sticky header always on top */
header,
header.sticky,
[role="banner"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  isolation: isolate !important;
}

/* Decorative floating orbs MUST stay behind AND not take document space */
.float-slow,
[class*="float-slow"],
.atrium-orb,
[class*="atrium-orb"],
[class*="orb"],
[class*="blob"],
.absolute.inset-0[aria-hidden="true"],
[aria-hidden="true"].absolute {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* CRITICAL: atrium-orb elements were taking 900px+ of layout space.
   Force absolute positioning so they don't push content down. */
.atrium-orb,
.atrium-orb-1,
.atrium-orb-2,
.atrium-orb-3,
[class*="atrium-orb"] {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Sections containing orbs need relative positioning + overflow hidden */
section:has(.atrium-orb),
section:has([class*="atrium-orb"]) {
  position: relative !important;
  overflow: hidden !important;
}

/* Hero content layering — target the hero wrapper directly (not section) */
body > .relative.mx-auto.max-w-5xl.text-center {
  position: relative;
  z-index: 2;
}

/* CRITICAL — Atrium orbs MUST always be absolute. Use compound class for high specificity. */
.atrium-orb.atrium-orb-1,
.atrium-orb.atrium-orb-2,
.atrium-orb.atrium-orb-3,
section .atrium-orb,
section [class*="atrium-orb"],
body .atrium-orb,
body [class*="atrium-orb"] {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   PART 20 — HERO LIGHT MODE EXCEPTION
   The hero sits on a dark city image (Brooklyn Bridge). In light mode,
   forcing text to dark slate makes it invisible against the dark image.
   FIX: Keep hero text WHITE in light mode + add semi-dark overlay on
   the image for guaranteed contrast.
   ════════════════════════════════════════════════════════════════ */

/* Hero overlay — add semi-dark gradient on image even in light mode */
[data-atrium-theme="light"] body > div[class*="absolute inset-0"][aria-hidden="true"]::after,
[data-atrium-theme="light"] body > div:has(video)::after,
body > div[class*="absolute inset-0"][aria-hidden="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,17,31,0.55), rgba(7,17,31,0.35));
  z-index: 1;
  pointer-events: none;
}

/* In light mode: hero text becomes WHITE for legibility on dark image */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h1,
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h1 *,
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h2,
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h2 *,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h1,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h1 *,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h2,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h2 * {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* "Is Open for Americans" highlight in cyan with shadow */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h1 span[style*="color:#33BDE8"],
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center h2 span[style*="color:#33BDE8"],
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h1 span[style*="color:#33BDE8"] {
  color: #7DD3FC !important; /* light cyan, vivid on dark image */
  text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 0 24px rgba(125,211,252,0.30) !important;
}

/* Hero paragraph (subhead) — light text on dark image */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center p,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Hero strong/emphasized words */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center p strong,
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center p b,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p strong,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Hero "European passport" green accent — brighter green for dark image */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center p span[style*="color:#9BEAA6"],
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center p span[style*="color: #9BEAA6"],
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p span[style*="color:#9BEAA6"] {
  color: #9BEAA6 !important; /* restore vibrant green */
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  font-weight: 600;
}

/* Hero badge ("200+ AMERICAN FAMILIES GUIDED SINCE 2022") — high contrast */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"],
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"] {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 2px solid rgba(125, 211, 252, 0.95) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 16px rgba(125,211,252,0.20) !important;
}

[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"] *,
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"] * {
  color: #ffffff !important;
}

/* Hero CTA primary: keep cyan vivid + ensure white text */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center a[style*="background"][class*="rounded-full"],
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center a[style*="background"][class*="rounded-2xl"],
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] a[style*="background"][class*="rounded-full"] {
  box-shadow: 0 12px 40px rgba(51,189,232,0.30), 0 4px 12px rgba(0,0,0,0.20) !important;
}

/* Hero CTA secondary (Schedule Free Assessment) — keep white with shadow */
[data-atrium-theme="light"] body > .relative.mx-auto.max-w-5xl.text-center a[style*="border"][class*="rounded-full"]:not([style*="background-color:#33BDE8"]):not([style*="background-image:linear-gradient"]),
[data-atrium-theme="light"] body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] a[style*="border"][class*="rounded-full"]:not([style*="background-color:#33BDE8"]):not([style*="background-image:linear-gradient"]) {
  background-color: rgba(7, 17, 31, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════════════════════
   PART 21 — HERO CENTERING FIX
   Force text-center alignment + flex centering on hero elements.
   ════════════════════════════════════════════════════════════════ */

/* Force center alignment on hero wrapper + descendants */
body > .relative.mx-auto.max-w-5xl.text-center,
body > .relative.mx-auto.max-w-5xl.text-center > div,
body > .relative.mx-auto.max-w-5xl.text-center p,
body > .relative.mx-auto.max-w-5xl.text-center h1,
body > .relative.mx-auto.max-w-5xl.text-center h2,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"],
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] > div,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h1,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h2 {
  text-align: center !important;
}

/* CRITICAL: paragraphs with max-w-xl etc. need mx-auto to be horizontally centered */
body > .relative.mx-auto.max-w-5xl.text-center p,
body > .relative.mx-auto.max-w-5xl.text-center h1,
body > .relative.mx-auto.max-w-5xl.text-center h2,
body > .relative.mx-auto.max-w-5xl.text-center > div > p,
body > .relative.mx-auto.max-w-5xl.text-center > div > h1,
body > .relative.mx-auto.max-w-5xl.text-center > div > h2,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] p,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h1,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] h2,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] > div > p,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] > div > h1,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] > div > h2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTAs container — center the flex items */
body > .relative.mx-auto.max-w-5xl.text-center [class*="flex"][class*="flex-wrap"],
body > .relative.mx-auto.max-w-5xl.text-center .flex,
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] [class*="flex"][class*="flex-wrap"],
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] .flex {
  justify-content: center !important;
  align-items: center !important;
}

/* Hero badge centered */
body > .relative.mx-auto.max-w-5xl.text-center [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"],
body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] [class*="inline-flex"][class*="rounded-full"][class*="border"][class*="text-xs"][class*="uppercase"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile-specific CTA stacking — keep centered */
@media (max-width: 640px) {
  body > .relative.mx-auto.max-w-5xl.text-center .flex.flex-wrap.gap-4,
  body > .relative.mx-auto.max-w-5xl.text-center [class*="flex"][class*="flex-wrap"],
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] .flex.flex-wrap.gap-4,
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] [class*="flex"][class*="flex-wrap"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body > .relative.mx-auto.max-w-5xl.text-center .flex.flex-wrap.gap-4 > a,
  body > div[class*="relative"][class*="max-w-5xl"][class*="text-center"] .flex.flex-wrap.gap-4 > a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   PART 22 — THEME TOGGLE BUTTON ICONS (sun/moon)
   The theme-toggle.js sets opacity 0.55 on inactive icons + 1 on
   active. In light mode the moon icon at opacity 0.55 with dark
   slate color was barely visible. Force strong contrast.
   ════════════════════════════════════════════════════════════════ */

/* Theme toggle button — make it a clear circular control */
button[aria-label*="mode" i],
button[aria-label*="theme" i] {
  background-color: rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.20) !important;
}

[data-atrium-theme="light"] button[aria-label*="mode" i],
[data-atrium-theme="light"] button[aria-label*="theme" i] {
  background-color: rgba(15, 23, 42, 0.10) !important;
  border: 1px solid rgba(15, 23, 42, 0.25) !important;
  color: #0f172a !important;
}

:root:not([data-atrium-theme="light"]) button[aria-label*="mode" i],
:root:not([data-atrium-theme="light"]) button[aria-label*="theme" i] {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}

/* Icons inside theme toggle — full opacity always, larger + thicker stroke */
button[aria-label*="mode" i] svg,
button[aria-label*="theme" i] svg {
  opacity: 1 !important;
  stroke-width: 2.5 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Icon paths — explicit stroke color for visibility */
button[aria-label*="mode" i] svg path,
button[aria-label*="mode" i] svg circle,
button[aria-label*="theme" i] svg path,
button[aria-label*="theme" i] svg circle {
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Active icon (the one indicating current state) gets full color */
[data-atrium-theme="light"] button[aria-label*="mode" i] svg.lucide-sun,
[data-atrium-theme="light"] button[aria-label*="theme" i] svg.lucide-sun {
  display: block !important;
  color: #f59e0b !important;
  stroke: #f59e0b !important;
  opacity: 1 !important;
}

[data-atrium-theme="light"] button[aria-label*="mode" i] svg.lucide-moon,
[data-atrium-theme="light"] button[aria-label*="theme" i] svg.lucide-moon {
  display: none !important;
}

:root:not([data-atrium-theme="light"]) button[aria-label*="mode" i] svg.lucide-moon,
:root:not([data-atrium-theme="light"]) button[aria-label*="theme" i] svg.lucide-moon {
  display: block !important;
  color: #fbbf24 !important;
  stroke: #fbbf24 !important;
  opacity: 1 !important;
}

:root:not([data-atrium-theme="light"]) button[aria-label*="mode" i] svg.lucide-sun,
:root:not([data-atrium-theme="light"]) button[aria-label*="theme" i] svg.lucide-sun {
  display: none !important;
}

/* === END CONTRAST + LAYOUT FIX V2 === */


/* ═══════════════════════════════════════════════════════════════════
   ATRIUM-REVEAL FIX (2026-05-13) — Default visible to prevent black-hole
   Animation is enhancement only. If JS fails or observer misses,
   content stays readable.
   ═══════════════════════════════════════════════════════════════════ */

/* Default state — visible (no JS dependency) */
.atrium-reveal,
section.atrium-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Animation enhancement — only when explicitly NOT yet visible (initial JS tag) */
.atrium-reveal.atrium-reveal-pending {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atrium-reveal.atrium-reveal-pending.atrium-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Same for children */
.atrium-reveal-child {
  opacity: 1 !important;
  transform: none !important;
}

.atrium-reveal-child.atrium-reveal-child-pending {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atrium-reveal-child.atrium-reveal-child-pending.atrium-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* === END ATRIUM-REVEAL FIX === */

/* === Mobile theme toggle icon visibility (Wave 3.1) === */
/* Compact 44x44 mobile toggle shows only the icon matching CURRENT theme */
.atrium-mobile-theme-toggle {
  position: relative;
}
.atrium-mobile-theme-toggle .lucide-sun,
.atrium-mobile-theme-toggle .lucide-moon {
  position: absolute;
  transition: opacity 0.2s ease;
}
/* Default (dark mode): show moon, hide sun. !important overrides inline opacity from theme-toggle JS */
.atrium-mobile-theme-toggle .lucide-sun { opacity: 0 !important; visibility: hidden; }
.atrium-mobile-theme-toggle .lucide-moon { opacity: 1 !important; visibility: visible; }
/* Light mode: show sun, hide moon */
html[data-atrium-theme="light"] .atrium-mobile-theme-toggle .lucide-sun { opacity: 1 !important; visibility: visible; }
html[data-atrium-theme="light"] .atrium-mobile-theme-toggle .lucide-moon { opacity: 0 !important; visibility: hidden; }