:root {
  /* M3 Core Hues (Teal, Bergamot, Pink, Indigo, etc.) */
  --brand-hue-teal: 180;
  --brand-hue-bergamot: 32;
  --brand-hue-pink: 322;
  --brand-hue-indigo: 235;
  --brand-hue-blue: 210;
  --brand-hue-green: 83; /* Sage */
  --brand-hue-orange: 10;
  --brand-hue-purple: 270;

  /* Current Active Theme State (Managed by JS/index.html) */
  --brand-hue: var(--brand-hue-teal);
  --brand-intensity: 0.5;
  --m3-is-dark: 1; /* Synchronized with index.html JS */

  /* M3 Tonal Palette Logic (simplified) */
  --m3-primary-lightness: calc(40% + (var(--m3-is-dark) * 35%));
  --m3-primary: hsl(var(--brand-hue), calc(var(--brand-intensity) * 100%), var(--m3-primary-lightness));
  --m3-on-primary: hsl(var(--brand-hue), 20%, calc(95% - (var(--m3-is-dark) * 85%)));

  /* Surface / Background Logic with Intensity Tinting */
  --m3-surface-base-lightness: calc(98.5% - (var(--m3-is-dark) * 89.5%));
  /* In light mode (is-dark=0), we add a tiny 2% baseline saturation to avoid "dead" grey */
  --m3-surface-tint-saturation: calc(2% + (var(--brand-intensity) * 18%));
  --m3-surface: hsl(var(--brand-hue), var(--m3-surface-tint-saturation), var(--m3-surface-base-lightness));
  
  --m3-surface-container-lightness: calc(var(--m3-surface-base-lightness) + (var(--m3-is-dark) * 4.5%) - (1 - var(--m3-is-dark)) * 4.5%);
  --m3-surface-container: hsl(var(--brand-hue), var(--m3-surface-tint-saturation), var(--m3-surface-container-lightness));

  /* Elevation Logic - The "Magic Shadow" System */
  /* Alpha is 0.05 in light mode, 0.48 in dark mode */
  --m3-shadow-alpha: calc(0.05 + (var(--m3-is-dark) * 0.43));
  --m3-elevation: 0 4px 6px -1px rgba(0, 0, 0, var(--m3-shadow-alpha)), 
                  0 2px 4px -1px rgba(0, 0, 0, calc(var(--m3-shadow-alpha) * 0.5)),
                  0 12px 24px -4px rgba(0, 0, 0, calc(var(--m3-shadow-alpha) * 0.8));

  /* Elevation Tints (M3 Level 2-3 for Bento Cards) */
  --m3-surface-elevated: hsl(var(--brand-hue), calc(var(--brand-intensity) * 24%), calc(var(--m3-surface-base-lightness) + (var(--m3-is-dark) * 8%)));

  /* Typography / Text */
  --m3-text-primary: hsl(var(--brand-hue), 10%, calc(15% + (var(--m3-is-dark) * 75%)));
  --m3-text-secondary: hsl(var(--brand-hue), 15%, calc(40% + (var(--m3-is-dark) * 40%)));

  /* Webflow / Legacy Component Aliases */
  --m3-background: var(--m3-surface);
  --m3-surface-1: var(--m3-surface);
  --m3-surface-2: var(--m3-surface-container);
  --m3-surface-3: var(--m3-surface-elevated);
  --m3-text: var(--m3-text-primary);
  --m3-text-dim: var(--m3-text-secondary);

  /* Common Transitions */
  --theme-transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                      color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                      border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                      box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

  /* Base theming for all elements */
  body {
    background-color: var(--m3-surface) !important;
    color: var(--m3-text-primary) !important;
    transition: var(--theme-transition);
  }

  /* 4. M3 GLOBAL FOUNDATIONS (Bridge to Legacy Variables) */
  :root, body {
    --color--primary: var(--m3-primary) !important;
    --color--background: var(--m3-background) !important;
    --color--bg: var(--m3-background) !important;
    --color--surface-1: var(--m3-surface-1) !important;
    --color--surface-2: var(--m3-surface-2) !important;
    --color--surface-3: var(--m3-surface-3) !important;
    --color--white: var(--m3-text) !important;
    --color--text: var(--m3-text) !important;
    --color--text-color: var(--m3-text-dim) !important;
    --color--heading-gradient: var(--color--primary) !important;
    --color--background-rgb: 11, 15, 16;
    --m3-primary-rgb: 0, 150, 136;
    --m3-primary-hue: 180;
    --glow-opacity: 0.3;
    --overlay-opacity: 0.1;
  }

  /* Glassmorphism Helper */
  .glass {
    background: hsla(var(--brand-hue), 10%, calc(15% + (var(--is-dark) * 10%)), 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
  }

  /* Total Theme Harmonization Overrides */
  .hero-paragraph p {
    color: var(--color--text) !important;
  }
  
  #waitlist-email, #cta-email {
     background-color: var(--m3-input-bg) !important;
     color: var(--m3-input-text) !important;
  }
  
  #waitlist-email::placeholder, #cta-email::placeholder {
     color: var(--m3-placeholder) !important;
  }
  
  .hero-section, 
  .bridge-section, 
  .tools-section, 
  .testimonial-section, 
  .how-it-work-section,
  .audience-section,
  .footer-section,
  .section,
  .page-wrapper {
    background-color: var(--color--background) !important;
    color: var(--color--text) !important;
  }

  /* 5. PREMIUM GLASS UTILITY (The "No-Line" Strategy) */
  .glass-premium,
  .testimonial-card,
  .bento-card,
  .star-card,
  .team-card,
  .feature-card {
    background-color: hsla(var(--brand-hue), var(--m3-surface-tint-saturation), var(--m3-surface-container-lightness), 0.7) !important;
    color: var(--color--text) !important;
    border: none !important;
    transition: var(--theme-transition) !important;
    box-shadow: var(--m3-elevation) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative;
    border-radius: 24px; /* Default premium rounding */
  }

  .audience-card,
  .audience-big-card {
    background-color: var(--m3-surface) !important;
    color: var(--color--text) !important;
    transition: var(--theme-transition) !important;
    box-shadow: var(--m3-elevation) !important;
    position: relative;
    border-radius: 24px;
  }

  .glass-premium:hover {
    background-color: var(--color--surface-3) !important;
    transform: scale(1.01) translateY(-2px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 0 0 25px hsla(var(--brand-hue), 100%, 50%, 0.05) !important;
    border-color: transparent !important;
    z-index: 10 !important;
  }

  .audience-card:hover,
  .audience-big-card:hover {
    transform: scale(1.01) translateY(-2px) !important;
    z-index: 10 !important;
  }

  /* 6. LEGACY LAYOUT & DENSITY OVERRIDES */
  .bento-column {
    gap: 16px !important;
    justify-content: center !important;
    height: 520px !important;
  }
  .bento-card { padding: 20px 24px !important; flex: 1 1 0% !important; }
  .bento-card h4 { margin-bottom: 4px !important; font-size: 1.05rem !important; font-weight: 600 !important; }
  .bento-card p { font-size: 12.5px !important; line-height: 1.35 !important; opacity: 0.75 !important; }

  @media (max-width: 991px) {
    .bento-column { height: 540px !important; gap: 12px !important; }
    .bento-card { padding: 16px !important; }
  }

  @media (max-width: 767px) {
    .bento-card { padding: 10px 12px !important; height: 130px !important; min-height: 130px !important; }
    .bento-card h4 { font-size: 13px !important; margin-bottom: 2px !important; font-weight: 600 !important; }
    .bento-card p { font-size: 12px !important; line-height: 1.3 !important; }

    .audience-heading,
    .audience-paragraph .body-16px,
    .header-wrapper {
      opacity: 1 !important;
      transform: none !important;
      -webkit-transform: none !important;
    }

    .light-mode .big-heading,
    .light-mode .big-heading .text-revel {
      background: none !important;
      background-image: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      -webkit-text-fill-color: #000000 !important;
      color: #000000 !important;
    }

    .mobile-mockup,
    .how-it-work-card {
      transform: none !important;
      transform-style: flat !important;
      opacity: 1 !important;
    }

    html, body {
      overflow-x: clip !important;
    }

    .how-it-work-section {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }

    .mobile-mockup-sticky {
      perspective: none !important;
      top: 40vh !important;
    }

    .rotate {
      display: none !important;
    }

    .phone-holder {
      transform: none !important;
      transform-style: flat !important;
    }

    /* Setup section: downsize for mobile */
    .mobile-mockup {
      padding-top: 8em !important;
      padding-bottom: 28em !important;
    }

    .phone-holder {
      max-width: 10em !important;
    }

    .rotate-orange {
      width: 5em !important;
      height: 5em !important;
    }

    .how-it-work-grid {
      grid-column-gap: 0 !important;
    }

    .how-it-work-card {
      margin-left: auto !important;
      margin-right: 0 !important;
      padding-top: 5.5em !important;
      padding-bottom: 5.5em !important;
      min-height: 42vh !important;
    }

    .how-it-work-card.top {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    .how-it-work-card:last-child {
      padding-bottom: 24em !important;
    }

    .how-it-work-card-holder {
      justify-content: flex-end !important;
    }

    .how-it-work-icon-wrapper {
      min-width: 24px !important;
      min-height: 24px !important;
      max-width: 24px !important;
      max-height: 24px !important;
      border-radius: 6px !important;
      margin-top: 1px !important;
    }

    .how-it-work-icon {
      width: 14px !important;
      height: 14px !important;
    }

    .card-heading {
      font-size: 18px !important;
      letter-spacing: normal !important;
    }

    .how-it-work-card-holder {
      flex-flow: row !important;
      align-items: flex-start !important;
    }

    .body-16px.how-it {
      font-size: 11px !important;
      line-height: 1.3 !important;
    }

    .how-it-work-content {
      max-width: 120px !important;
    }

    .how-it-work-card-holder {
      grid-column-gap: 6px !important;
      grid-row-gap: 4px !important;
    }

    .tools-section,
    .tools-section .container,
    .tools-section .w-container,
    .tools-wrapper,
    .tool-sticky-card,
    .sticky-card-black,
    .how-it-work-section,
    .how-it-work-section .container {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    .tool-sticky-card {
      margin-bottom: 0 !important;
    }

    .tools-section {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    .how-it-work-icon-wrapper {
      border-radius: 10px !important;
    }

    .bento-variant-pill {
      font-size: 16px !important;
      line-height: 22px !important;
      padding: 2px 10px !important;
    }

    .bento-variant-container {
      flex-wrap: wrap !important;
      gap: 6px !important;
      justify-content: center !important;
    }
  }

  /* Audience Persona Brand Borders - hidden by default, shown on hover */
  .audience-card.go-getter, .audience-big-card.go-getter,
  .audience-card.engaged-citizen, .audience-big-card.engaged-citizen,
  .audience-card.savvy-investor, .audience-big-card.savvy-investor,
  .audience-card.informed-professional, .audience-big-card.informed-professional,
  .audience-big-card.renaissance-scholar,
  .audience-big-card.casual-observer,
  .audience-big-card.cultured-trendsetter,
  .audience-big-card.zen-optimist {
    border: 2px solid transparent !important;
    background-color: var(--m3-surface) !important;
  }
  .audience-section {
    margin-bottom: 120px !important;
  }

  .cta-wrapper {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }


  .audience-card.go-getter:hover, .audience-big-card.go-getter:hover {
    border-color: rgba(244, 114, 182, 0.6) !important;
  }
  .audience-card.engaged-citizen:hover, .audience-big-card.engaged-citizen:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
  }
  .audience-card.savvy-investor:hover, .audience-big-card.savvy-investor:hover {
    border-color: rgba(45, 212, 191, 0.6) !important;
  }
  .audience-card.informed-professional:hover, .audience-big-card.informed-professional:hover {
    border-color: rgba(99, 102, 241, 0.6) !important;
  }
  .audience-big-card.renaissance-scholar:hover {
    border-color: rgba(168, 85, 247, 0.6) !important;
  }
  .audience-big-card.casual-observer:hover {
    border-color: rgba(129, 199, 132, 0.6) !important;
  }
  .audience-big-card.cultured-trendsetter:hover {
    border-color: rgba(216, 27, 96, 0.6) !important;
  }
  .audience-big-card.zen-optimist:hover {
    border-color: rgba(255, 183, 77, 0.6) !important;
  }
  
  /* Buttons & Micro-Interactions */
  .waitlist-button-02.waitlist-submit {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
  }
  .waitlist-button-02.waitlist-submit:hover {
    transform: scale(1.03) translateY(-2px) !important;
    box-shadow: 0 8px 25px hsla(var(--brand-hue), 100%, 50%, 0.3) !important;
  }

  .hero-heading {
    font-size: clamp(42px, 9vw, 140px) !important;
    line-height: 1.0 !important;
    margin-bottom: 0.2em !important;
  }

  .big-heading {
    font-size: clamp(24px, 5.5vw, 65px) !important;
    line-height: 1.15 !important;
    padding-bottom: 0.05em;
  }

/* Sync Webflow IX2 masks with their respective section background */
.big-heading .mask {
  background-color: var(--color--background) !important;
  opacity: 1 !important;
  /* Sync with theme manager for smooth mode switching */
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ♿ PHASE 3: ACCESSIBILITY & UX VALIDATION */

/* Support for Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-text {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: normal !important;
  }
  #hero-section-sparkles {
    display: none !important;
  }
}

/* Enhanced Focus States (WCAG 2.1 AA) */
:focus-visible {
  outline: 2px solid var(--m3-primary) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

.primary-button:focus-visible {
  outline-color: var(--m3-primary) !important;
  background-color: var(--m3-primary) !important;
  filter: brightness(1.1);
}

/* Ensure accessible text contrast for small descriptors */
.body-16px, .hero-paragraph-holder p {
  line-height: 1.6;
  max-width: 65ch; /* Optimal line length for reading */
}

/* Section headers: pure white in dark mode, pure black in light mode */
.sticky-heading {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Glowy waves - override color with theme primary */
#hero-glowy-waves path,
#hero-glowy-waves svg path {
  stroke: var(--m3-primary) !important;
  fill: var(--m3-primary) !important;
}

#hero-glowy-waves canvas {
  filter: hue-rotate(calc(var(--brand-hue) - 180deg)) !important;
}

/* ===== TABLET OVERRIDES (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* Fix sticky: clear IX2 transforms on mockup and images */
  .mobile-mockup,
  .how-it-work-card,
  .mockup-01,
  .mockup-02,
  .mockup-03 {
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
    filter: none !important;
  }

  .mobile-mockup,
  .how-it-work-card {
    opacity: 1 !important;
  }

  .mobile-mockup-sticky {
    perspective: none !important;
  }

  /* Setup section: remove row gap to fix mockup displacement */
  .how-it-work-grid {
    grid-row-gap: 0px !important;
  }

  /* Bento: expand center image, narrow card columns */
  .bento-inner-grid {
    grid-template-columns: 0.8fr 1.4fr 0.8fr !important;
    gap: 10px !important;
  }

  .bento-card {
    padding: 10px 12px !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .bento-variant-container {
    flex-wrap: wrap !important;
    column-gap: 4px !important;
    row-gap: 7px !important;
    justify-content: flex-start !important;
  }

  .bento-variant-pill {
    font-size: 9px !important;
    line-height: 13px !important;
    padding: 0.5px 6px !important;
  }

  .bento-card h4 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  .bento-card p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .bento-card,
  .bento-card * {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  /* Color grid: force two rows of 4 */
  .bento-color-grid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 0 !important;
  }

  .bento-color-item {
    flex: 0 0 20% !important;
    padding: 1px !important;
    min-width: 0 !important;
  }

  .bento-color-circle {
    width: 16px !important;
    height: 16px !important;
  }

  .bento-color-label {
    white-space: nowrap !important;
    max-width: none !important;
    font-size: 7px !important;
  }

  /* Reduce header padding in bento sections */
  .sticky-card-black .header-wrapper {
    margin-bottom: 4px !important;
  }

  .sticky-card-black .header-wrapper p {
    margin-bottom: 0 !important;
  }

  .bento-card:hover,
  .bento-card:active,
  .bento-card:focus {
    transform: none !important;
  }

  .light-mode .bento-card {
    background: rgba(var(--m3-primary-rgb), 0.12) !important;
  }

  .light-mode .bento-card h4 {
    filter: brightness(0.6) !important;
  }

  .bento-card.active-card {
    border: 1.5px solid var(--m3-primary) !important;
    box-shadow: 0 0 12px rgba(var(--m3-primary-rgb), 0.15) !important;
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .bento-card.active-card {
      border: none !important;
      box-shadow: none !important;
    }
    .light-mode .bento-card {
      background: transparent !important;
    }
    .bento-color-grid {
      flex-wrap: nowrap !important;
      justify-content: space-evenly !important;
      gap: 8px !important;
      margin-top: 10px !important;
    }
    .bento-color-item {
      flex: 0 0 auto !important;
      padding: 4px !important;
    }
    .bento-color-circle {
      width: 24px !important;
      height: 24px !important;
    }
    .bento-color-label {
      display: block !important;
      font-size: 11px !important;
      margin-top: 6px !important;
    }
    .sticky-card-black {
      border-radius: 0 !important;
    }
    .bento-variant-container {
      gap: 16px !important;
      margin-top: 10px !important;
    }
    .bento-variant-pill {
      font-size: 18px !important;
      line-height: 1.4 !important;
      padding: 10px 28px !important;
      border-radius: 20px !important;
    }
  }

  .sticky-card-black {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    background: var(--color--background) !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 20px !important;
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .sticky-card-black {
      border-radius: 0 !important;
    }
  }

  .bento-stage {
    padding: 0 !important;
    border-radius: 12px !important;
    height: 700px !important;
  }

  .bento-inner-grid {
    height: 700px !important;
    gap: 12px !important;
  }

  .bento-column {
    height: auto !important;
    gap: 28px !important;
  }

  .bento-card {
    padding: 12px !important;
    flex: 0 0 auto !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  /* Hero: replicate mobile stacked layout for tablet */
  .hero-section-title {
    height: auto !important;
    min-height: 100vh !important;
  }

  .hero-sticky {
    top: 12vh !important;
    margin-top: 60px !important;
  }

  .mobile-holder {
    padding-bottom: 280px !important;
    margin-top: 320px !important;
  }

  .mobile-image {
    max-width: 400px !important;
  }

  .mobile-only-heading {
    display: block !important;
    visibility: hidden !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    position: fixed !important;
    top: calc(var(--m3-nav-height, 52px) + 65px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
    pointer-events: none !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .mobile-hero-text {
    transform: scale(1);
    transition: transform 0.3s ease-out;
  }

  .mobile-hero-text.hero-shrink {
    transform: scale(0.65);
  }

  .desktop-only-heading {
    display: none !important;
  }

  #logo-spinner-wrapper {
    width: 170px !important;
    height: 170px !important;
    margin-top: 170px !important;
    margin-bottom: 210px !important;
  }

  #hero-compass-svg {
    width: 170px !important;
    height: 170px !important;
  }

  #logo-spinner-wrapper > div {
    width: 120px !important;
    height: 120px !important;
  }
}