/* ==========================================================================
   Design Tokens - Single Source of Truth
   ========================================================================== */
/*
 * Structure: shared neutrals + semantic (light) in :root; each brand sets
 * only primary/secondary (and dark variants). Body always has data-app set
 * (see app/layout.tsx). Flow: NEXT_PUBLIC_APP_ID → getAppId() → data-app → CSS.
 */

/* ==========================================================================
   Shared: Neutrals, semantic (non-brand) colors, light theme surfaces
   ========================================================================== */
:root {
  /* ========================================
     Color System - RGB for opacity support
     ======================================== */
  --color-white-rgb: 255 255 255;
  --color-success-rgb: 34 197 94;           /* #22c55e - Success (shared) */
  --color-error-rgb: 239 68 68;             /* #ef4444 - Error (shared) */
  --color-muted-rgb: 148 180 220;           /* #94b4dc - Shared muted tint */

  --color-success: rgb(var(--color-success-rgb));
  --color-error: rgb(var(--color-error-rgb));
  --color-muted: rgb(var(--color-muted-rgb));

  /* Neutrals (shared) */
  --color-neutral-50-rgb: 248 250 252;
  --color-neutral-100-rgb: 241 245 249;
  --color-neutral-200-rgb: 226 232 240;
  --color-neutral-400-rgb: 148 163 184;
  --color-neutral-600-rgb: 71 85 105;
  --color-neutral-700-rgb: 51 65 85;
  --color-neutral-800-rgb: 30 41 59;
  --color-neutral-900-rgb: 15 23 42;
  --color-neutral-950-rgb: 4 3 3;

  /* Light theme semantics (from neutrals only) */
  --color-bg-primary: rgb(var(--color-neutral-50-rgb));
  --color-bg-secondary: rgb(var(--color-neutral-100-rgb));
  --color-text-primary: rgb(var(--color-neutral-950-rgb));
  --color-text-secondary: rgb(74 85 104);
  --color-text-tertiary: rgb(100 116 139);
  --color-text-muted: rgb(107 114 128);
  --color-border-primary: rgb(var(--color-neutral-200-rgb));
}

/* ==========================================================================
   Brand palettes (official): primary + secondary; KM has optional accent
   TPC: #f58634 (orange), #1e528c (blue).  KM: #05668d (blue), #c79f4f (gold), #09814a (green accent)

   Legacy aliases --mortgage-blue / --mortgage-gold are KM-centric names but used
   app-wide (Tailwind, components). They mean "primary" and "secondary"; we set
   them per brand so existing classes resolve correctly. For TPC, "gold" = orange.
   ========================================================================== */

/* Piero - Team Piero Cornejo (primary=blue, secondary=orange) */
[data-app="piero"] {
  --color-primary-rgb: 30 82 140;           /* #1e528c */
  --color-secondary-rgb: 245 134 52;         /* #f58634 */
  --color-primary: rgb(var(--color-primary-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  /* Legacy: mortgage-blue = primary, mortgage-gold = secondary (orange here) */
  --mortgage-blue: var(--color-primary);
  --mortgage-gold: var(--color-secondary);
  --mortgage-blue-dark: rgb(91 163 255);
  --mortgage-gold-dark: rgb(255 163 102);
}

/* Kiss Mortgage (primary=blue, secondary=gold) */
[data-app="kiss-mortgage"] {
  --color-primary-rgb: 5 102 141;           /* #05668d */
  --color-secondary-rgb: 199 159 79;        /* #c79f4f */
  --color-accent-rgb: 9 129 74;             /* #09814a - optional green accent */
  --color-primary: rgb(var(--color-primary-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-accent: rgb(var(--color-accent-rgb));
  /* Legacy: mortgage-blue/gold match KM brand */
  --mortgage-blue: var(--color-primary);
  --mortgage-gold: var(--color-secondary);
  --mortgage-blue-dark: rgb(91 163 255);
  --mortgage-gold-dark: rgb(199 159 79);
}

/* ==========================================================================
   Dark theme: shared semantics (neutrals + success/error lightened)
   ========================================================================== */
[data-theme="dark"] {
  --color-success-rgb: 74 222 128;
  --color-success: rgb(var(--color-success-rgb));
  --color-error-rgb: 248 113 113;
  --color-error: rgb(var(--color-error-rgb));
  --color-bg-primary: rgb(var(--color-neutral-900-rgb));
  --color-bg-secondary: rgb(var(--color-neutral-800-rgb));
  --color-text-primary: rgb(var(--color-neutral-100-rgb));
  --color-text-secondary: rgb(203 213 225);
  --color-text-tertiary: rgb(148 163 184);
  --color-text-muted: rgb(156 163 175);
  --color-border-primary: rgb(var(--color-neutral-400-rgb) / 0.2);

  --shadow-glass:
    0 8px 32px rgb(0 0 0 / 0.4),
    0 4px 16px rgb(0 0 0 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    inset 0 -1px 0 rgb(0 0 0 / 0.2);
  --shadow-glass-lg:
    0 12px 40px rgb(0 0 0 / 0.5),
    0 6px 20px rgb(0 0 0 / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 rgb(0 0 0 / 0.3);
}

/* Piero - dark theme brand colors */
[data-app="piero"][data-theme="dark"] {
  --color-primary-rgb: 91 163 255;          /* #5ba3ff */
  --color-secondary-rgb: 255 163 102;        /* #ffa366 */
  --color-primary: rgb(var(--color-primary-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --mortgage-blue-dark: rgb(91 163 255);
  --mortgage-gold-dark: rgb(255 163 102);
}

/* Kiss Mortgage - dark theme brand colors */
[data-app="kiss-mortgage"][data-theme="dark"] {
  --color-primary-rgb: 91 163 255;
  --color-secondary-rgb: 199 159 79;
  --color-accent-rgb: 74 222 128;           /* lighter green for dark */
  --color-primary: rgb(var(--color-primary-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-accent: rgb(var(--color-accent-rgb));
  --mortgage-blue-dark: rgb(91 163 255);
  --mortgage-gold-dark: rgb(199 159 79);
}

/* ==========================================================================
   Shared: Spacing, typography, radius, shadows, component tokens
   ========================================================================== */
:root {
  /* ========================================
     Spacing Scale (4px base - 0.25rem increments)
     ======================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  
  /* ========================================
     Typography Scale
     ======================================== */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-3xl: 2rem;       /* 32px */
  --radius-full: 9999px;    /* Pill */
  
  /* Standard border radius for buttons and inputs */
  --radius-button: 1.125rem;  /* 18px - Standard for all buttons */
  --radius-input: 1.125rem;   /* 18px - Standard for all input fields */
  
  /* ========================================
     Shadows
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Glass Shadows - Light Theme */
  --shadow-glass: 
    0 8px 32px rgb(0 0 0 / 0.08),
    0 4px 16px rgb(0 0 0 / 0.06),
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -1px 0 rgb(255 255 255 / 0.1);
  
  --shadow-glass-lg:
    0 12px 40px rgb(0 0 0 / 0.12),
    0 6px 20px rgb(0 0 0 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 -1px 0 rgb(255 255 255 / 0.2);
  
  /* ========================================
     Blur Values (Standardized)
     ======================================== */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 16px;
  --blur-2xl: 20px;
  --blur-3xl: 24px;
  
  /* Legacy blur values - mapped to new scale */
  /* Old: 7px -> New: 8px (--blur-md) */
  /* Old: 10px -> New: 12px (--blur-lg) */
  /* Old: 12px -> New: 12px (--blur-lg) */
  /* Old: 15px -> New: 16px (--blur-xl) */
  /* Old: 18px -> New: 20px (--blur-2xl) */
  /* Old: 20px -> New: 20px (--blur-2xl) */
  /* Old: 24px -> New: 24px (--blur-3xl) */
  
  /* ========================================
     Motion & Animation
     ======================================== */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  
  --easing-base: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Legacy / component usage - prefer --duration-* in new code */
  --animation-easing: var(--easing-base);
  --animation-duration-short: var(--duration-fast);
  --animation-duration-base: var(--duration-base);
  --animation-duration-long: var(--duration-slow);
  
  /* ========================================
     Z-Index Scale
     ======================================== */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  
  /* ========================================
     Backdrop Filter Saturation
     ======================================== */
  --backdrop-saturate: 180%;
  
  /* ========================================
     Component Tokens - Single Source of Truth
     ======================================== */
  
  /* Button tokens */
  --button-padding-x: var(--space-4);
  --button-padding-y: var(--space-2);
  --button-padding-x-sm: var(--space-3);
  --button-padding-y-sm: var(--space-1);
  --button-radius: var(--radius-button);
  --button-font-size: var(--font-size-base);
  --button-font-size-sm: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  
  /* Card tokens */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-radius: var(--radius-lg);
  --card-bg: rgb(255 255 255);
  --card-bg-dark: rgb(var(--color-neutral-800-rgb));
  --card-border: 1px solid var(--color-border-primary);
  --card-shadow: var(--shadow-md);
  
  /* Input tokens */
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-2);
  --input-radius: var(--radius-input);
  --input-border: 1px solid rgb(var(--color-neutral-200-rgb));
  --input-border-dark: 1px solid rgb(var(--color-neutral-600-rgb));
  --input-bg: rgb(255 255 255);
  --input-bg-dark: rgb(var(--color-neutral-700-rgb));
  --input-focus-ring: 2px solid rgb(var(--color-primary-rgb) / 0.3);
  
  /* Modal tokens */
  --modal-backdrop: rgb(0 0 0 / 0.5);
  --modal-backdrop-blur: var(--blur-sm);
  --modal-padding: var(--space-6);
  --modal-radius: var(--radius-lg);
  --modal-max-width: 42rem; /* 672px */
  --modal-shadow: var(--shadow-xl);
  
  /* Badge tokens */
  --badge-padding-x: var(--space-2);
  --badge-padding-y: 0.125rem; /* 2px */
  --badge-radius: var(--radius-sm);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-medium);
  
  /* Status badge tokens - uses status colors from Tailwind config */
  --status-badge-radius: var(--radius-full);
  --status-badge-padding-x: var(--space-2);
  --status-badge-padding-y: 0.125rem;
}


/* ==========================================================================
   CSS Variables - Legacy Compatibility Layer
   ========================================================================== */
/* Import new design token system */

/* Legacy variable mappings for backward compatibility */
:root {
  /* Semantic Colors - Legacy Support */
  --bg-primary: var(--color-bg-primary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-muted: var(--color-text-muted);
  --border-primary: var(--color-border-primary);
  
  /* Dark mode colors (legacy) */
  --dark-bg-primary: rgb(var(--color-neutral-900-rgb));
  --dark-bg-secondary: rgb(var(--color-neutral-800-rgb));
  --dark-bg-tertiary: rgb(var(--color-neutral-800-rgb));
}

[data-theme="dark"] {
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-muted: var(--color-text-muted);
}


/* ==========================================================================
   Responsive Design System - Centralized Breakpoints & Fluid Scaling
   ========================================================================== */

/* ==========================================================================
   Breakpoint Definitions
   ========================================================================== */
:root {
  /* Standard breakpoints aligned with Tailwind */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1920px;
}

/* ==========================================================================
   Fluid Typography Scale
   ========================================================================== */
:root {
  /* Fluid typography using clamp() for smooth scaling across viewports */
  --fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
  --fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);       /* 14-16px */
  --fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);    /* 16-18px */
  --fluid-lg: clamp(1.125rem, 1.025rem + 0.5vw, 1.25rem);     /* 18-20px */
  --fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20-24px */
  --fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24-32px */
  --fluid-3xl: clamp(1.875rem, 1.575rem + 1.5vw, 2.5rem);     /* 30-40px */
  --fluid-4xl: clamp(2.25rem, 1.85rem + 2vw, 3rem);           /* 36-48px */
  --fluid-5xl: clamp(3rem, 2.4rem + 3vw, 4rem);               /* 48-64px */
  --fluid-6xl: clamp(3.75rem, 2.85rem + 4.5vw, 5rem);         /* 60-80px */
}

/* ==========================================================================
   Responsive Spacing Multipliers
   ========================================================================== */
:root {
  --space-multiplier: 1;
}

@media (min-width: 640px) {
  :root {
    --space-multiplier: 1.125;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-multiplier: 1;
  }
}

/* ==========================================================================
   Container Sizing
   ========================================================================== */
:root {
  /* Fluid container padding that scales with viewport */
  --container-padding-x: clamp(1rem, 3vw, 2rem);
  --container-max-width: 80rem; /* 1280px */
}

/* ==========================================================================
   Touch Target Sizes
   ========================================================================== */
:root {
  /* Minimum touch target sizes for accessibility */
  --touch-target-sm: 40px;
  --touch-target: 44px;  /* WCAG recommended minimum */
  --touch-target-lg: 48px;
}

/* ==========================================================================
   Responsive Grid Gaps
   ========================================================================== */
:root {
  --grid-gap-sm: var(--space-3);
  --grid-gap-md: var(--space-4);
  --grid-gap-lg: var(--space-6);
}

@media (min-width: 768px) {
  :root {
    --grid-gap-sm: var(--space-4);
    --grid-gap-md: var(--space-6);
    --grid-gap-lg: var(--space-8);
  }
}

/* ==========================================================================
 Base Styles & Resets
 ========================================================================== */
html {
  font-size: clamp(12px, 0.875vw + 8px, 15px);
  scroll-padding-top: 0;
  overflow-x: hidden;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   Transitions - Removed Global Rules
   ========================================================================== */
/* Global transitions removed to prevent specificity wars.
   Use utility classes from _transitions.css instead:
   - .transition-base for common transitions
   - .transition-interactive for buttons/links
   - .transition-theme for theme-aware elements
   - .no-transition to explicitly disable transitions
*/

/* Content-wrapper - no transitions */
.content-wrapper {
  /* No transitions needed - utility classes handle this */
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* Background - covered by content-wrapper and other elements on most pages */
  background-color: rgb(var(--color-neutral-50-rgb));
  color: var(--text-primary);
  line-height: var(--line-height-normal);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Dark theme background */
[data-theme="dark"] body {
  background-color: rgb(var(--color-neutral-900-rgb));
}

/* ==========================================================================
   Home Page Background
   ========================================================================== */

/* Home page body - subtle off-white background for better contrast */
body.home-page {
  background: rgb(var(--color-neutral-100-rgb));
  background-image: none;
}

/* Dark mode - pure dark background */
[data-theme="dark"] body.home-page {
  background: rgb(var(--color-neutral-900-rgb));
  background-image: none;
}

/* Strip ALL background styling from sections below hero on home page */
/* IMPORTANT: Exclude #hero and all its children to protect hero background image */
body.home-page .parallax-section:not(#hero),
body.home-page section:not(#hero),
body.home-page main > section:not(#hero),
body.home-page main > section:not(#hero) > * {
  background: transparent;
  background-color: transparent;
  background-image: none;
}

/* Remove any pseudo-element backgrounds from sections below hero (exclude hero) */
body.home-page .parallax-section:not(#hero)::before,
body.home-page .parallax-section:not(#hero)::after,
body.home-page section:not(#hero)::before,
body.home-page section:not(#hero)::after,
body.home-page section:not(#hero) *::before,
body.home-page section:not(#hero) *::after {
  display: none;
  content: none;
  background: none;
  background-color: transparent;
  background-image: none;
}

/* Strip background from all containers and wrappers in sections below hero (exclude hero) */
body.home-page .parallax-section:not(#hero) .container,
body.home-page .parallax-section:not(#hero) .container > *,
body.home-page section:not(#hero) .container,
body.home-page section:not(#hero) .container > *,
body.home-page section:not(#hero) > div,
body.home-page section:not(#hero) > div > * {
  background: transparent;
  background-color: transparent;
  background-image: none;
}

/* Explicitly protect hero background image from being removed */
body.home-page #hero .hero-bg {
  background-image: url('/assets/images/pexels-heyho-7031607Compressed.webp');
}

/* Ensure main element has no background and doesn't create stacking context */
body.home-page main {
  background: transparent;
  background-color: transparent;
  background-image: none;
  isolation: auto;
  transform: none;
  opacity: 1;
  filter: none;
}

/* Keep glass cards frosted / semi-transparent */
/* Glass cards are already styled separately and should show through to white background */


/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ==========================================================================
 Hero Section Styles
 ========================================================================== */
.mobile-hero-container {
  padding-top: 0;
}

@media (min-width: 768px) {
  .mobile-hero-container {
    padding-top: 0;
  }
}

/* Match navbar content width at all breakpoints so hero never extends past navbar */
.hero-content-width-match {
  max-width: calc(100vw - clamp(1rem, 2vw, 1.5rem));
}
@media (min-width: 1536px) {
  .hero-content-width-match {
    max-width: calc(100vw - clamp(2rem, 4vw, 3rem));
  }
}
@media (min-width: 1920px) {
  .hero-content-width-match {
    max-width: min(calc(100vw - 4rem), 1920px);
  }
}

/* Allow hero content to shrink inside flex section so max-width is respected */
#hero .hero-content {
  min-width: 0;
}

/* Hero section - consolidated text colors - Always white on dark backgrounds */
#hero,
#hero h1, #hero h2, #hero h3, #hero p, #hero .hero-title {
  color: rgb(var(--color-white-rgb)) !important;
}

/* Hero section - Fixed positioning for scroll overlay effect */
#hero {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - will be locked by JavaScript on mobile */
  height: var(--hero-initial-height, 100dvh); /* Use locked height on mobile if available */
  z-index: 1;
  overflow: hidden;
  /* CRITICAL: Prevent stacking context creation */
  isolation: auto;
  transform: none;
  -webkit-transform: none;
  opacity: 1;
  filter: none;
  /* Performance hints for scroll effects */
  will-change: auto;
}

/* Content wrapper - Scrolls over hero section with frosted overlay */
/* PERFORMANCE: Removed backdrop-filter - blur is now applied directly to hero background */
/* Using semi-transparent overlay instead for better performance */
.content-wrapper {
  position: relative;
  z-index: var(--z-dropdown);
  margin-top: 100vh;
  margin-top: 100svh; /* Small viewport height - more stable on mobile */
  margin-top: var(--hero-initial-height, 100svh); /* Use locked hero height on mobile if available */
  /* Match footer opacity for consistency */
  background-color: rgb(202 213 229 / 0.75);
  background-image: none;
  background-attachment: scroll;
  /* backdrop-filter removed - blur is now on hero background for better performance */
  min-height: 100vh;
  min-height: 100svh; /* Small viewport height - more stable on mobile */
  padding-bottom: 0;
  /* No longer need special stacking context handling since backdrop-filter is removed */
  isolation: auto;
  transform: none;
  opacity: 1;
  /* Removed will-change: backdrop-filter - no longer needed */
  contain: none;
  filter: none;
  transition: none;
  animation: none;
}

/* Ensure content-wrapper extends to footer on home page to prevent gap where hero is visible */
body.home-page .content-wrapper {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Ensure main element extends content-wrapper background to footer */
body.home-page main {
  position: relative;
  z-index: 10;
}

/* Dark mode background for content wrapper (frosted) */
/* PERFORMANCE: Removed backdrop-filter - blur is now applied directly to hero background */
[data-theme="dark"] .content-wrapper {
  /* Match footer opacity for consistency */
  background-color: rgb(4 3 3 / 0.75);
  background-image: none;
  background-attachment: scroll;
  /* backdrop-filter removed - blur is now on hero background for better performance */
}

/* Contact section now has consistent padding like other sections */
/* Bottom padding is maintained to match section spacing pattern */

/* Ensure footer starts immediately after content-wrapper with consistent spacing */
body.home-page main + footer {
  margin-top: 0;
  padding-top: var(--space-8); /* Match section padding - consistent spacing between sections and footer (py-8 = 2rem) */
}

/* Responsive footer padding on home page to match section padding pattern */
@media (min-width: 640px) {
  body.home-page main + footer {
    padding-top: var(--space-10); /* Match sm:py-10 = 2.5rem */
  }
}

@media (min-width: 1024px) {
  body.home-page main + footer {
    padding-top: var(--space-12); /* Match lg:py-12 = 3rem */
  }
}

/* Wider content boundaries beneath hero on desktop - public-facing pages */
.public-content-width {
  max-width: 80rem; /* 1280px - matches Tailwind max-w-7xl */
}
.public-content-width-narrow {
  max-width: 56rem; /* 896px - matches Tailwind max-w-4xl */
}
@media (min-width: 1024px) {
  .public-content-width {
    max-width: 96rem; /* 1536px - Tailwind max-w-screen-2xl */
  }
  .public-content-width-narrow {
    max-width: 72rem; /* 1152px - Tailwind max-w-6xl */
  }
}

/* Child sections - simplified since backdrop-filter is no longer used */
.content-wrapper > section,
.content-wrapper > div {
  isolation: auto;
  transform: none;
  opacity: 1;
  filter: none;
  transition: none;
  animation: none;
}

/* News article images - simplified since backdrop-filter is no longer used */
#market-updates,
#market-updates *,
#news-column,
#news-column *,
#news-feed,
#news-feed * {
  isolation: auto;
}

/* CRITICAL: Ensure images in news articles don't create stacking contexts */
#news-feed img,
#news-column img,
.news-article-image {
  /* Prevent transforms and filters that create stacking contexts */
  transform: none;
  filter: none;
  /* Use will-change sparingly - only when needed for performance */
  will-change: auto;
  /* Ensure absolute positioning doesn't create stacking context */
  isolation: auto;
}

/* CRITICAL: Ensure image containers don't create stacking contexts */
#news-feed [class*="relative"],
#news-column [class*="relative"] {
  isolation: auto;
  transform: none;
}

/* Custom scrollbar styling for news feed */
#news-feed {
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 0.2) transparent;
}

#news-feed::-webkit-scrollbar {
  width: 6px;
}

#news-feed::-webkit-scrollbar-track {
  background: transparent;
}

#news-feed::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 0.2);
  border-radius: 3px;
}

#news-feed::-webkit-scrollbar-thumb:hover {
  background: rgb(0 0 0 / 0.3);
}

[data-theme="dark"] #news-feed {
  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}

[data-theme="dark"] #news-feed::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.2);
}

[data-theme="dark"] #news-feed::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / 0.3);
}

/* Mobile content-wrapper - simplified since backdrop-filter is no longer used */
@media (max-width: 767px) {
  .content-wrapper {
    background-image: none;
    background-attachment: scroll;
    /* backdrop-filter removed - blur is now on hero background for better performance */
    /* Use locked hero height for margin-top to prevent address bar movement from affecting positioning */
    margin-top: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */
  }
  
  [data-theme="dark"] .content-wrapper {
    background-image: none;
    background-attachment: scroll;
    /* backdrop-filter removed - blur is now on hero background for better performance */
  }
  
  /* Child elements - simplified since backdrop-filter is no longer used */
  #market-updates *,
  #news-column *,
  #news-feed * {
    isolation: auto;
  }
  
  /* Images - simplified */
  #news-feed img,
  #news-column img,
  .news-article-image {
    transform: none;
    isolation: auto;
  }
  
  /* Hover transforms on mobile */
  #news-feed a:hover img,
  #news-column a:hover img,
  a:hover .news-article-image {
    transform: none;
    scale: 1;
  }
  
  /* Image containers */
  #news-feed [class*="relative"],
  #news-column [class*="relative"] {
    isolation: auto;
  }
}

/* Hero background with image and gradient overlay - Enhanced */
/* Desktop: Uses CSS background image */
/* PERFORMANCE: Uses transform scale instead of blur for better performance */
/* Transform is GPU-accelerated and much faster than filter blur */
.hero-bg {
  background-image: url('/assets/images/pexels-heyho-7031607Compressed.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* background-attachment: fixed removed - hero section is now fixed, so background stays in place */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Use transform scale for better performance than filter blur */
  transform: scale(var(--hero-bg-scale, 1)) translateZ(0);
  -webkit-transform: scale(var(--hero-bg-scale, 1)) translateZ(0);
  /* Smooth transition */
  transition: transform 0.05s ease-out;
  /* Keep saturation for visual effect */
  filter: saturate(130%);
  -webkit-filter: saturate(130%);
  /* Performance hints */
  will-change: transform;
  transform-origin: center center;
}

/* Mobile: Uses img element for better control and stability */
.hero-bg-img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  /* Dimensions will be locked via JavaScript on mobile */
  /* Use transform scale for better performance than filter blur */
  transform: scale(var(--hero-bg-scale, 1)) translateZ(0);
  -webkit-transform: scale(var(--hero-bg-scale, 1)) translateZ(0);
  /* Smooth transition */
  transition: transform 0.05s ease-out;
  /* Keep saturation for visual effect */
  filter: saturate(130%);
  -webkit-filter: saturate(130%);
  /* Performance hints */
  will-change: transform;
  transform-origin: center center;
}

/* Smooth parallax effect on scroll */
/* CRITICAL: will-change: transform creates stacking context - use with caution */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    /* Removed will-change: transform as it can create stacking context issues */
    /* Use transform3d(0,0,0) instead for hardware acceleration without will-change */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* Light mode gradient overlay - Relaxed for more visible background image */
/* Desktop: Applied via ::before pseudo-element on .hero-bg */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / 0.38) 0%, rgb(var(--color-neutral-900-rgb) / 0.52) 100%);
  z-index: 0;
}

/* Dark mode gradient overlay - Desktop */
[data-theme="dark"] .hero-bg::before {
  background: linear-gradient(135deg, rgb(var(--color-neutral-900-rgb) / 0.6) 0%, rgb(var(--color-neutral-800-rgb) / 0.75) 100%);
}

/* Mobile: Separate gradient overlay element (since .hero-bg is hidden on mobile) */
.hero-gradient-overlay {
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb) / 0.38) 0%, rgb(var(--color-neutral-900-rgb) / 0.52) 100%);
  pointer-events: none;
  /* Ensure it covers the full hero area */
  width: 100%;
  height: 100%;
  /* Ensure it's visible and properly positioned */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

[data-theme="dark"] .hero-gradient-overlay {
  background: linear-gradient(135deg, rgb(var(--color-neutral-900-rgb) / 0.6) 0%, rgb(var(--color-neutral-800-rgb) / 0.75) 100%);
}

/* Lock gradient overlay height on mobile to match hero */
@media (max-width: 767px) {
  .hero-gradient-overlay {
    /* CRITICAL: Use locked pixel height only - no viewport units that can change */
    height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */
    min-height: var(--hero-initial-height) !important;
    max-height: var(--hero-initial-height) !important;
    display: block !important;
  }
}

/* Hero text container - Enhanced spacing and layout */
.hero-text-container {
  position: relative;
}

/* Hero text elements - Premium styling */
.hero-accent-line {
  width: 5rem;
  height: 0.3rem;
  background: linear-gradient(to right, var(--color-secondary), rgb(var(--color-secondary-rgb) / 0.9), rgb(var(--color-secondary-rgb) / 0.5), transparent);
  border-radius: var(--radius-full);
  filter: drop-shadow(0 2px 12px rgb(var(--color-secondary-rgb) / 0.4));
  transition: width var(--animation-duration-long) var(--animation-easing);
}

/* KISS Mortgage - Use gold color instead of orange */
[data-app="kiss-mortgage"] .hero-accent-line {
  background: linear-gradient(to right, rgb(199 159 79), rgb(199 159 79 / 0.9), rgb(199 159 79 / 0.5), transparent);
  filter: drop-shadow(0 2px 12px rgb(199 159 79 / 0.4));
}

[data-app="kiss-mortgage"][data-theme="dark"] .hero-accent-line {
  background: linear-gradient(to right, rgb(199 159 79), rgb(199 159 79 / 0.9), rgb(199 159 79 / 0.5), transparent);
  filter: drop-shadow(0 2px 12px rgb(199 159 79 / 0.4));
}

@media (min-width: 768px) {
  .hero-accent-line {
    width: 6rem;
    height: 0.35rem;
  }
}

.hero-title-main {
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.3),
               0 4px 30px rgb(0 0 0 / 0.4),
               0 1px 3px rgb(0 0 0 / 0.5);
  letter-spacing: -0.02em;
}

/* Enhanced text shadows for light mode */
:root:not([data-theme="dark"]) .hero-title-main {
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.5),
               0 4px 40px rgb(0 0 0 / 0.6),
               0 1px 3px rgb(0 0 0 / 0.7),
               0 0 10px rgb(0 0 0 / 0.3);
}

.hero-title-gold {
  color: #f5e6b8;
  text-shadow: 0 0 30px rgb(245 230 184 / 0.8), 
               0 0 60px rgb(245 230 184 / 0.4), 
               0 0 90px rgb(245 230 184 / 0.2),
               0 2px 20px rgb(0 0 0 / 0.3);
  letter-spacing: -0.02em;
}

/* Enhanced text shadows for light mode */
:root:not([data-theme="dark"]) .hero-title-gold {
  text-shadow: 0 0 30px rgb(245 230 184 / 0.9), 
               0 0 60px rgb(245 230 184 / 0.5), 
               0 0 90px rgb(245 230 184 / 0.3),
               0 2px 20px rgb(0 0 0 / 0.5),
               0 4px 40px rgb(0 0 0 / 0.6),
               0 1px 3px rgb(0 0 0 / 0.7),
               0 0 10px rgb(0 0 0 / 0.4);
}

.hero-subtitle {
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.2);
}

/* Enhanced text shadows for light mode */
:root:not([data-theme="dark"]) .hero-subtitle {
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.4),
               0 2px 20px rgb(0 0 0 / 0.5),
               0 1px 3px rgb(0 0 0 / 0.6);
}

/* Enhanced text shadows for light mode - badge text */
:root:not([data-theme="dark"]) #hero p {
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.4),
               0 2px 16px rgb(0 0 0 / 0.5),
               0 1px 2px rgb(0 0 0 / 0.6);
}

/* Simplified z-index system for hero */
.hero-content {
  position: relative;
  z-index: 1;
  /* Use CSS custom property for opacity from JavaScript */
  opacity: var(--hero-content-opacity, 1);
  /* Smooth transition for opacity changes */
  transition: opacity 0.05s ease-out;
  /* Performance hint */
  will-change: opacity;
}

/* Adjust hero content for desktop viewport - reduce font sizes and spacing */
@media (min-width: 768px) {
  .hero-content {
    padding-top: clamp(5rem, 8vh, 6rem) !important; /* Clear navbar */
    padding-bottom: clamp(1rem, 3vh, 2rem) !important;
    align-items: center;
    justify-content: center;
  }

  /* Ensure grid displays as two columns at 768px+ */
  .hero-content > div.grid,
  .hero-content > div.flex.flex-col.md\:grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    align-items: center; /* vertically center left text and right box so box isn’t stuck under navbar */
    width: 100%;
    max-width: 100%;
    min-width: 0; /* allow grid to shrink so hero-content-width-match is respected */
  }

  /* Reduce spacing in left column container */
  #hero .hero-content > div > div.text-left > * + * {
    margin-top: clamp(0.75rem, 1.5vh, 1.25rem) !important;
  }

  /* Optimize left column for two-column layout */
  #hero .hero-content > div > div.text-left {
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 100%;
  }

  /* Reduce spacing in hero text container */
  .hero-text-container {
    gap: clamp(0.5rem, 1vh, 0.75rem) !important;
  }

  /* Hero title at tablet/small desktop */
  #hero .hero-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-title span.block {
    margin-top: clamp(0.125rem, 0.5vh, 0.25rem) !important;
  }

  /* Subtitle at tablet/small desktop */
  #hero .hero-subtitle,
  #hero .hero-subtitle span {
    font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem) !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
  }

  .hero-subtitle span.block {
    margin-bottom: clamp(0.375rem, 1vh, 0.5rem) !important;
  }

  /* Reduce badge text size */
  .hero-text-content p {
    font-size: clamp(0.625rem, 1.2vw + 0.25rem, 0.75rem) !important;
    margin-top: clamp(0.125rem, 0.5vh, 0.25rem) !important;
    margin-bottom: clamp(0.125rem, 0.5vh, 0.25rem) !important;
  }

  /* Desktop button sizing - smaller at 768px */
  .hero-primary-btn {
    padding: clamp(0.625rem, 1.25vh, 0.75rem) clamp(1rem, 2.5vw, 1.5rem) !important;
    font-size: clamp(0.75rem, 1vw + 0.25rem, 0.875rem) !important;
    width: auto;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }

  .hero-primary-btn svg {
    width: clamp(0.875rem, 1.5vw, 1.125rem) !important;
    height: clamp(0.875rem, 1.5vw, 1.125rem) !important;
  }

  /* Desktop trust indicators */
  #hero .text-left > div.flex.items-center.justify-center {
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
    font-size: clamp(0.75rem, 1.2vw + 0.25rem, 0.9375rem) !important;
    margin-top: clamp(0.5rem, 1vh, 0.75rem) !important;
  }

  #hero .text-left > div.flex.items-center.justify-center svg {
    width: clamp(0.875rem, 1.5vw, 1.125rem) !important;
    height: clamp(0.875rem, 1.5vw, 1.125rem) !important;
  }

  /* Right column - Journey box */
  #hero .hero-content > div > div:not(.text-left) {
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 100%;
    align-items: stretch;
  }

  /* Desktop quick actions */
  .hero-quick-actions-box {
    padding: clamp(0.875rem, 2vh, 1.25rem) !important;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 100%;
  }

  .hero-quick-actions-title {
    font-size: clamp(0.9375rem, 2vw + 0.25rem, 1.25rem) !important;
    margin-bottom: clamp(0.25rem, 0.5vh, 0.5rem) !important;
  }

  .hero-quick-actions-box .text-center {
    margin-bottom: clamp(0.5rem, 1.5vh, 0.75rem) !important;
  }

  .hero-quick-actions-box p {
    font-size: clamp(0.6875rem, 1.2vw + 0.25rem, 0.8125rem) !important;
  }

  .hero-quick-action-btn {
    padding: clamp(0.5rem, 1.5vh, 0.75rem) !important;
  }

  .hero-quick-action-btn span.text-5xl {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    margin-bottom: clamp(0.25rem, 0.75vh, 0.5rem) !important;
  }

  .hero-quick-action-text {
    font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.875rem) !important;
    margin-bottom: 0 !important;
  }

  .hero-quick-action-btn span.text-xs {
    font-size: clamp(0.5625rem, 1vw + 0.25rem, 0.6875rem) !important;
    margin-top: 0 !important;
  }

  .hero-quick-actions-box .grid {
    gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
  }

  /* Larger desktop adjustments */
  @media (min-width: 1024px) {
    .hero-content > div.grid {
      gap: clamp(2rem, 3vw, 3rem) !important;
    }

    #hero .hero-content > div > div.text-left > * + * {
      margin-top: clamp(1rem, 2vh, 1.5rem) !important;
    }

    #hero .hero-title {
      font-size: clamp(2.75rem, 4.5vw, 4rem) !important;
    }

    #hero .hero-subtitle,
    #hero .hero-subtitle span {
      font-size: clamp(1.125rem, 1.5vw, 1.5rem) !important;
    }

    .hero-primary-btn {
      padding: clamp(0.875rem, 2vh, 1rem) clamp(1.5rem, 4vw, 2rem) !important;
      font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) !important;
    }

    .hero-quick-actions-box {
      padding: clamp(1rem, 3vh, 1.5rem) !important;
    }

    .hero-quick-actions-title {
      font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
    }

    .hero-quick-action-text {
      font-size: clamp(1.5rem, 2vw, 2.25rem) !important;
    }

    .hero-quick-action-btn span.text-5xl {
      font-size: clamp(2rem, 3vw, 2.75rem) !important;
    }
  }
}

/* Extra large screens (1280px+) — take full advantage of 27" monitors */
@media (min-width: 1280px) {
  #hero .hero-title {
    font-size: clamp(3.5rem, 5vw, 5.5rem) !important;
    letter-spacing: -0.04em !important;
    line-height: 1.02 !important;
  }

  #hero .hero-subtitle,
  #hero .hero-subtitle span {
    font-size: clamp(1.25rem, 1.5vw, 1.75rem) !important;
    line-height: 1.65 !important;
  }

  .hero-quick-actions-title {
    font-size: clamp(1.5rem, 2vw, 2.25rem) !important;
  }

  .hero-quick-action-text {
    font-size: clamp(1.625rem, 2vw, 2.5rem) !important;
  }

  .hero-quick-action-btn span.text-5xl {
    font-size: clamp(2.25rem, 3vw, 3.25rem) !important;
  }

  .hero-accent-line {
    width: 7rem !important;
    height: 0.4rem !important;
  }
}

/* 27" monitor and large displays (1536px+) */
@media (min-width: 1536px) {
  #hero .hero-title {
    font-size: clamp(4.5rem, 6vw, 8rem) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.0 !important;
  }

  #hero .hero-subtitle,
  #hero .hero-subtitle span {
    font-size: clamp(1.5rem, 1.75vw, 2.25rem) !important;
    line-height: 1.6 !important;
  }

  .hero-accent-line {
    width: 8rem !important;
    height: 0.45rem !important;
  }

  /* More breathing room between hero text elements */
  .hero-text-container {
    gap: clamp(1.5rem, 2.5vh, 2.5rem) !important;
  }
}

/* Mobile: Apply same fixed scroll effect as desktop */
@media (max-width: 767px) {
  #hero {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: fixed !important;
    align-items: center !important;
    padding-top: 0;
    /* CRITICAL: Use locked pixel height only - no viewport units that can change */
    height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */
    min-height: var(--hero-initial-height) !important;
    max-height: var(--hero-initial-height) !important; /* Lock max height too */
    width: 100vw !important; /* Lock width to viewport */
    /* CRITICAL: Ensure no stacking context creation */
    isolation: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    /* Prevent viewport changes from affecting positioning */
    will-change: auto !important;
    /* Prevent layout shifts - prevent recalculation without breaking size constraints */
    contain: layout style paint !important;
    /* Prevent any transitions that could cause scaling */
    transition: none !important;
    /* Prevent any recalculation based on viewport changes */
    box-sizing: border-box !important;
  }
  
  /* Lock hero-bg-img (img element) dimensions to prevent scaling when address bar moves */
  /* Using img element on mobile provides more stable rendering than CSS background */
  #hero .hero-bg-img {
    /* CRITICAL: Use locked pixel height only - no viewport units that can change */
    height: var(--hero-initial-height) !important; /* Must be set by JavaScript - no fallback */
    min-height: var(--hero-initial-height) !important;
    max-height: var(--hero-initial-height) !important;
    width: 100% !important; /* Use 100% of parent container */
    max-width: 100% !important;
    /* object-fit: cover is more stable than background-size: cover on mobile */
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center center !important;
       object-position: center center !important;
    /* Force hardware acceleration and prevent repaints */
    transform: translateZ(0) scale(1) !important;
    -webkit-transform: translateZ(0) scale(1) !important;
    /* Prevent any scaling or transformation */
    will-change: auto !important;
    /* Prevent the element from responding to container size changes */
    box-sizing: border-box !important;
    /* Ensure the element is completely isolated from viewport changes */
    position: absolute !important; /* Parent (#hero) is fixed, so absolute is correct */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    /* Prevent layout shifts and contain rendering - but allow object-fit to work */
    contain: layout style paint !important;
    /* Prevent any transitions or animations that could cause scaling */
    transition: none !important;
    animation: none !important;
    /* Lock aspect ratio to prevent scaling */
    aspect-ratio: unset !important;
    /* Prevent image from responding to any container size changes */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  /* Hide CSS background on mobile since we're using img element */
  #hero .hero-bg {
    display: none !important;
  }
  
  .hero-content {
    padding-top: 1rem !important; /* 16px - top spacing on mobile */
    padding-bottom: var(--space-2) !important; /* Internal spacing - padding for hero content */
    padding-inline-start: var(--space-3) !important; /* Internal spacing - padding for hero content */
    padding-inline-end: var(--space-3) !important; /* Internal spacing - padding for hero content */
    display: flex;
    flex-direction: column !important; /* Force vertical stacking on mobile */
    align-items: flex-start;
    /* Use locked height - no viewport unit fallback */
    min-height: var(--hero-initial-height); /* Use locked height to prevent address bar movement from affecting positioning */
    height: var(--hero-initial-height);
  }
  
  /* Ensure direct children of hero-content can use grid on desktop */
  .hero-content > div.flex.flex-col {
    width: 100%;
    flex-shrink: 0;
  }

  .hero-content > div {
    width: 100%;
  }
  
  /* Spacer divs for vertical centering - equal flex for balanced spacing */
  .hero-content > div.flex-1 {
    flex: 1 1 0;
    min-height: 0;
  }
  
  /* Bottom spacer - slightly smaller to account for navbar being visually present */
  .hero-content > div.hero-buttons-bottom-spacer {
    flex: 1 1 0;
    min-height: calc(80px + var(--space-3));
  }

  .hero-content > div.grid {
    gap: var(--space-3) !important; /* External spacing - gap between grid items */
  }

  /* Reduce spacing in left column on mobile */
  #hero .hero-content > div > div.text-left > * + * {
    margin-top: var(--space-3) !important; /* External spacing - margin between elements */
  }

  /* Reduce hero text container spacing */
  .hero-text-container {
    gap: var(--space-3) !important; /* External spacing - gap between flex items */
  }

  .hero-text-container > * + * {
    margin-top: var(--space-3) !important; /* External spacing - margin between elements */
  }

  /* Hero title on mobile - slightly larger for readability */
  .hero-title {
    font-size: 2.375rem !important; /* 38px */
    line-height: 1.1 !important;
  }

  .hero-title span.block {
    margin-top: var(--space-1) !important; /* External spacing - margin between title blocks */
  }

  /* Hero subtitle on mobile - slightly larger for readability */
  .hero-subtitle {
    font-size: 1rem !important; /* 16px */
    line-height: 1.4 !important;
  }

  .hero-subtitle span.block {
    margin-bottom: var(--space-2) !important; /* External spacing - margin below subtitle blocks */
  }

  .hero-subtitle span.block:last-child {
    margin-bottom: 0 !important; /* No margin on last block */
  }

  /* Reduce accent line and badge text */
  .hero-accent-line {
    width: 4rem !important;
    height: 0.25rem !important;
  }

  .hero-text-content p {
    font-size: 0.75rem !important; /* 12px - tagline / badge text */
    margin-top: var(--space-1) !important; /* External spacing - margin above paragraph */
    margin-bottom: var(--space-1) !important; /* External spacing - margin below paragraph */
  }

  /* Reduce button sizes on mobile */
  .hero-primary-btn {
    padding: 1.25rem 1rem !important; /* Taller buttons: py-5 (1.25rem) px-4 (1rem) */
    font-size: 0.875rem !important;
    min-width: 0 !important; /* Remove min-width constraint to allow narrower buttons */
    max-width: 100% !important; /* Allow buttons to respect max-width constraints */
    width: auto !important;
  }

  .hero-primary-btn svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Apply column layout to flex containers, but exclude Fast Pre-Approvals tagline */
  #hero .hero-content > div > div.text-left > div.flex:not(.hero-fast-preapprovals) {
    gap: 0.5rem !important;
    flex-direction: column !important;
  }

  /* Ensure Fast Pre-Approvals tagline stays inline horizontally and centered */
  #hero .hero-content > div > div.text-left > div.hero-fast-preapprovals {
    flex-direction: row !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }

  /* Reduce trust indicators */
  #hero .text-left > div.flex.items-center.justify-center {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3) !important; /* External spacing - gap between trust indicators */
    font-size: 0.75rem !important;
    margin-top: var(--space-2) !important; /* External spacing - margin above trust indicators */
  }

  #hero .text-left > div.flex.items-center.justify-center svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Make quick actions box more compact */
  .hero-quick-actions-box {
    padding: var(--space-3) !important; /* Internal spacing - padding for quick actions box */
    margin-top: var(--space-2) !important; /* External spacing - margin above quick actions box */
  }

  .hero-quick-actions-box .text-center {
    margin-bottom: var(--space-2) !important; /* External spacing - margin below center text */
  }

  .hero-quick-actions-title {
    font-size: 0.875rem !important;
    margin-bottom: var(--space-1) !important; /* External spacing - margin below title (approx 0.125rem) */
  }

  .hero-quick-actions-box p {
    font-size: 0.625rem !important;
  }

  .hero-quick-action-btn {
    padding: var(--space-2) !important; /* Internal spacing - padding for quick action button */
  }

  .hero-quick-action-btn span.text-5xl {
    font-size: 1.75rem !important;
    margin-bottom: var(--space-1) !important; /* External spacing - margin below emoji */
  }

  .hero-quick-action-text {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }

  .hero-quick-action-btn span.text-xs {
    font-size: 0.5625rem !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }

  .hero-quick-actions-box .grid {
    gap: var(--space-1) var(--space-2) !important; /* External spacing - gap between grid items (approx 0.375rem) */
  }

}

.hero-text-content {
  position: relative;
  z-index: 1;
}

/* Hero Quick Actions Box */
/* Light mode: Match navbar styling for consistency */
.hero-quick-actions-box {
  background-color: rgb(255 255 255 / 0.65);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-2xl);
  position: relative;
  isolation: isolate;
  transition-property: background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--animation-duration-long);
  transition-timing-function: var(--animation-easing);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.1),
              0 4px 16px rgb(0 0 0 / 0.08),
              0 0 0 1px rgb(255 255 255 / 0.1) inset,
              0 1px 0 rgb(255 255 255 / 0.5) inset,
              0 -1px 0 rgb(255 255 255 / 0.15) inset,
              0 0 60px rgb(255 255 255 / 0.12);
}

/* Prevent text effects in Quick Actions */
.hero-quick-actions-box *,
.hero-quick-actions-box .hero-quick-actions-title,
.hero-quick-actions-box .hero-quick-action-text,
.hero-quick-actions-box h3,
.hero-quick-actions-box span {
  filter: none;
}

.hero-quick-actions-glow {
  background: radial-gradient(circle at 50% 0%, rgb(255 255 255 / 0.18) 0%, transparent 70%);
  opacity: 0.7;
}

.hero-quick-actions-title {
  color: rgb(var(--color-white-rgb)) !important;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
  filter: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-quick-action-btn {
  background-color: rgb(var(--color-primary-rgb) / 0.55);
  border: 1px solid rgb(var(--color-primary-rgb) / 0.7);
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  box-shadow: 0 0 18px rgb(var(--color-primary-rgb) / 0.35), 0 0 12px rgb(255 255 255 / 0.15), 0 6px 16px rgb(0 0 0 / 0.15);
  transition-property: all;
  transition-duration: var(--animation-duration-long);
  transition-timing-function: var(--animation-easing);
}

.hero-quick-action-btn:hover {
  background-color: rgb(var(--color-primary-rgb) / 0.85);
  border-color: rgb(40 110 180);
  box-shadow: 0 0 28px rgb(40 110 180 / 0.7), 0 0 20px rgb(60 130 200 / 0.5), 0 8px 24px rgb(0 0 0 / 0.2);
  transform: translateY(-2px) translateZ(0);
}

.hero-quick-action-btn:active {
  transform: translateY(0) scale(0.98) translateZ(0);
}

.hero-quick-action-text {
  color: rgb(var(--color-white-rgb)) !important;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  filter: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-quick-actions-divider {
  border-color: rgb(255 255 255 / 0.35);
}

/* Dark theme - Hero Quick Actions */
/* Match navbar styling for consistency */
[data-theme="dark"] .hero-quick-actions-box {
  background-color: rgb(4 3 3 / 0.45);
  border-color: rgb(255 255 255 / 0.12);
  transform: translateZ(0);
  isolation: isolate;
  transition-property: background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--animation-duration-long);
  transition-timing-function: var(--animation-easing);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4),
              0 4px 16px rgb(0 0 0 / 0.3),
              0 0 0 1px rgb(255 255 255 / 0.05) inset,
              0 1px 0 rgb(255 255 255 / 0.1) inset,
              0 -1px 0 rgb(0 0 0 / 0.2) inset,
              0 0 60px rgb(var(--color-primary-rgb) / 0.15);
}

[data-theme="dark"] .hero-quick-actions-glow {
  background: radial-gradient(circle at 50% 0%, rgb(var(--color-primary-rgb) / 0.2) 0%, transparent 70%);
  opacity: 0.8;
}

[data-theme="dark"] .hero-quick-actions-title {
  color: rgb(var(--color-white-rgb)) !important;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
}

[data-theme="dark"] .hero-quick-action-btn {
  background-color: rgb(var(--color-primary-rgb) / 0.55);
  border: 1px solid rgb(var(--color-primary-rgb) / 0.7);
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  box-shadow: 0 0 18px rgb(var(--color-primary-rgb) / 0.35), 0 0 12px rgb(255 255 255 / 0.15), 0 6px 16px rgb(0 0 0 / 0.15);
}

[data-theme="dark"] .hero-quick-action-btn:hover {
  background-color: rgb(74 143 255 / 0.9);
  border-color: rgb(74 143 255);
  box-shadow: 0 0 28px rgb(var(--color-primary-rgb) / 0.7), 0 0 20px rgb(var(--color-primary-rgb) / 0.5), 0 8px 24px rgb(0 0 0 / 0.2);
}

[data-theme="dark"] .hero-quick-action-text {
  color: rgb(var(--color-white-rgb)) !important;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

[data-theme="dark"] .hero-quick-actions-divider {
  border-color: rgb(var(--color-neutral-400-rgb) / 0.3);
}

/* ==========================================================================
   Auth Pages (Signup/Signin) & Dashboard - Override fixed hero positioning
   ========================================================================== */
/* Auth pages and the client dashboard now use a separate hero and content body */
/* This prevents footer overlap and ensuring proper scrolling on all devices */
/* Target hero sections that are direct children of main (these pages) */
/* ONLY apply when using body.auth-page or body.dashboard-page class */

/* Ensure main element has no top spacing on auth pages */
body.auth-page main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dashboard and profile-settings: hero fits content. Auth (signup/signin) gets full viewport in a separate block below. */
body.dashboard-page main > section#hero,
body.profile-settings-page main > section#hero {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0.75rem !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
}

/* Add more padding-top for auth/dashboard heroes on larger screens */
@media (min-width: 640px) {
  body.auth-page main > section#hero {
    padding-top: 3rem !important;
  }
  body.dashboard-page main > section#hero,
  body.profile-settings-page main > section#hero {
    padding-top: 3rem !important;
    min-height: 35vh !important;
    min-height: auto !important;
  }
}

@media (min-width: 768px) {
  body.auth-page main > section#hero {
    padding-top: 6rem !important;
  }
  
  /* Auth page hero content: reduced top padding on desktop only */
  body.auth-page .hero-content {
    padding-top: 4rem !important; /* 64px - matches md:pt-16, reduced from mobile */
  }
  
  /* Dashboard hero on desktop: only as tall as content needs */
  body.dashboard-page main > section#hero,
  body.profile-settings-page main > section#hero {
    padding-top: 2rem !important; /* Reduced top padding on desktop to decrease gap */
    padding-bottom: 2rem !important; /* Increased bottom padding on desktop */
    min-height: auto !important; /* Fit content only */
    height: auto !important;
  }
  
  /* Move welcome back box up slightly on desktop */
  body.dashboard-page main > section#hero .hero-content .glass-card,
  body.profile-settings-page main > section#hero .hero-content .glass-card {
    margin-top: -1rem !important;
  }
}

/* Dashboard page specific hero adjustments */
body.dashboard-page main > section#hero,
body.profile-settings-page main > section#hero {
  background-color: var(--color-bg-primary);
}

/* Ensure auth heroes have proper bottom padding */
@media (min-width: 640px) {
  body.auth-page main > section#hero {
    padding-bottom: 3rem !important;
  }
}

/* Ensure footer doesn't overlap on auth/dashboard pages */
body.auth-page main:has(> section#hero) + footer,
body.dashboard-page main + footer,
body.profile-settings-page main + footer {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Auth Pages - Static blur on background images (no scroll effect)
   ========================================================================== */
/* Apply static blur to background images on auth/dashboard pages ONLY */
/* This overrides any dynamic blur from scroll effects */
/* ONLY apply when using body.auth-page or body.dashboard-page class */
body.auth-page main > section#hero .hero-bg,
body.dashboard-page main > section#hero .hero-bg,
body.profile-settings-page main > section#hero .hero-bg {
  filter: blur(var(--blur-md)) saturate(130%) !important;
  -webkit-filter: blur(var(--blur-md)) saturate(130%) !important;
  transition: none !important;
}

body.auth-page main > section#hero .hero-bg-img,
body.dashboard-page main > section#hero .hero-bg-img,
body.profile-settings-page main > section#hero .hero-bg-img {
  filter: blur(var(--blur-md)) saturate(130%) !important;
  -webkit-filter: blur(var(--blur-md)) saturate(130%) !important;
  transition: none !important;
}

/* Ensure hero content opacity stays at 1 (no fade effect on scroll) */
/* ONLY apply when using body.auth-page or body.dashboard-page class */
body.auth-page main > section#hero .hero-content,
body.dashboard-page main > section#hero .hero-content,
body.profile-settings-page main > section#hero .hero-content {
  opacity: 1 !important;
  transition: none !important;
  /* Padding is handled by responsive rules below - don't override here */
  padding-bottom: 0 !important;
  min-height: auto !important;
}

/* Auth pages: full viewport hero so footer is below the fold (same as rest of site) */
body.auth-page main > section#hero {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important; /* Allow section to grow when content is taller than viewport */
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dashboard hero: fit content on all screen sizes */
body.dashboard-page main > section#hero,
body.profile-settings-page main > section#hero {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Desktop: Dashboard hero should only be as tall as its content */
@media (min-width: 768px) {
  body.dashboard-page main > section#hero,
  body.profile-settings-page main > section#hero {
    min-height: auto !important;
  }
}

/* Ensure background covers full hero height for auth pages */
body.auth-page main > section#hero .hero-bg,
body.dashboard-page main > section#hero .hero-bg,
body.profile-settings-page main > section#hero .hero-bg {
  position: absolute !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* Dashboard hero background should fit content */
body.dashboard-page main > section#hero .hero-bg,
body.profile-settings-page main > section#hero .hero-bg {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

body.auth-page main > section#hero .hero-bg-img,
body.dashboard-page main > section#hero .hero-bg-img {
  position: absolute !important;
  /* On mobile, use locked height; on desktop, use 100% */
  height: 100% !important;
  min-height: 100% !important;
  /* Prevent image from responding to container size changes on mobile */
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center center !important;
     object-position: center center !important;
  /* Prevent any scaling or transformation */
  transform: translateZ(0) scale(1) !important;
  -webkit-transform: translateZ(0) scale(1) !important;
  will-change: auto !important;
  transition: none !important;
  animation: none !important;
}

/* Dashboard hero background image should fit content */
body.dashboard-page main > section#hero .hero-bg-img {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

body.auth-page main > section#hero .hero-gradient-overlay,
body.dashboard-page main > section#hero .hero-gradient-overlay {
  position: absolute !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* Dashboard hero gradient overlay should fit content */
body.dashboard-page main > section#hero .hero-gradient-overlay {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Desktop: Smooth transition for hero background */
@media (min-width: 768px) {
  body.auth-page main > section#hero .hero-bg::after,
  body.dashboard-page main > section#hero .hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
  }
}

/* ==========================================================================
   Sign Up Page - Hero-quality benefits card and form card
   ========================================================================== */
/* Benefits card uses journey-box style (same as homepage hero right column) */
.auth-signup-benefits-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.auth-signup-benefits-card .hero-accent-line {
  flex-shrink: 0;
}

.auth-signup-benefits-title {
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.35),
               0 4px 24px rgb(0 0 0 / 0.25);
}

/* Form card with top stripe — match hero journey box accent */
body.auth-page main > section#hero .rounded-t-none.glass-card {
  border-top: none;
}

/* ==========================================================================
   Sign Up Page - Two Column Layout Optimization
   ========================================================================== */
/* Optimize sign up page for 2019 MacBook Pro 16" viewport (~1728x1117px) */

/* Desktop: Optimize spacing for two-column layout */
@media (min-width: 768px) {
  body.auth-page main > section#hero .hero-content {
    padding-top: 3rem !important; /* Reduced top padding for compact fit */
    padding-bottom: 1.5rem !important; /* Reduced bottom padding */
  }
  
  /* Compact form card padding on signup page */
  body.auth-page main > section#hero .glass-card {
    padding: 1.5rem !important;
  }
  
  /* Optimize benefits card spacing (journey-style card) */
  body.auth-page main > section#hero .auth-signup-benefits-card .journey-cta-content {
    padding: 1.5rem !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card h2,
  body.auth-page main > section#hero .glass-card h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card p,
  body.auth-page main > section#hero .glass-card p {
    font-size: 0.875rem !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card ul,
  body.auth-page main > section#hero .glass-card ul {
    margin-top: 0.75rem !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card li,
  body.auth-page main > section#hero .glass-card li {
    font-size: 0.875rem !important;
  }
}

/* Large desktop: Optimize for MacBook Pro 16" specifically */
@media (min-width: 1024px) and (max-width: 1920px) {
  body.auth-page main > section#hero .hero-content {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }
  
  body.auth-page main > section#hero .glass-card {
    padding: 2rem !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card .journey-cta-content {
    padding: 2rem !important;
  }
  
  /* Slightly larger text on larger viewports */
  body.auth-page main > section#hero .auth-signup-benefits-card h2,
  body.auth-page main > section#hero .glass-card h2 {
    font-size: 1.75rem !important;
  }
  
  body.auth-page main > section#hero .auth-signup-benefits-card li,
  body.auth-page main > section#hero .glass-card li {
    font-size: 0.9375rem !important;
  }
}

/* Mobile optimizations — dashboard/profile: fit content; auth: keep full viewport hero */
@media (max-width: 767px) {
  body.dashboard-page main > section#hero,
  body.profile-settings-page main > section#hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
    padding-top: 1.5rem !important;
  }
  
  /* Auth hero content: center vertically within full viewport on mobile */
  body.auth-page main > section#hero .hero-content {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  body.dashboard-page main > section#hero .hero-content,
  body.profile-settings-page main > section#hero .hero-content {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    min-height: auto !important;
    max-height: none !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  
  /* Reduce bottom padding for dashboard hero content */
  /* Mobile: navbar is at bottom, so minimal top padding needed - just match bottom padding visual */
  body.dashboard-page main > section#hero .hero-content,
  body.profile-settings-page main > section#hero .hero-content {
    padding-bottom: 2rem !important; /* Reduced from 6rem for tighter spacing */
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important; /* Slightly reduced padding on mobile */
  }
  
  /* Lock hero image dimensions on mobile to prevent scaling when address bar moves */
  body.auth-page main > section#hero .hero-bg-img,
  body.dashboard-page main > section#hero .hero-bg-img {
    /* CRITICAL: Lock image height to prevent scaling when address bar moves */
    height: var(--hero-initial-height, 100dvh) !important;
    min-height: var(--hero-initial-height, 100dvh) !important;
    max-height: var(--hero-initial-height, 100dvh) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Prevent image from responding to container size changes */
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center center !important;
       object-position: center center !important;
    /* Force hardware acceleration and prevent repaints */
    transform: translateZ(0) scale(1) !important;
    -webkit-transform: translateZ(0) scale(1) !important;
    /* Prevent any scaling or transformation */
    will-change: auto !important;
    box-sizing: border-box !important;
    /* Prevent layout shifts and contain rendering */
    contain: layout style paint !important;
    /* Prevent any transitions or animations that could cause scaling */
    transition: none !important;
    animation: none !important;
    /* Lock aspect ratio to prevent scaling */
    aspect-ratio: unset !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Smooth transition: fade out hero background at bottom */
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  }
  
  /* Lock gradient overlay to match hero image height */
  body.auth-page main > section#hero .hero-gradient-overlay,
  body.dashboard-page main > section#hero .hero-gradient-overlay {
    height: var(--hero-initial-height, 100dvh) !important;
    min-height: var(--hero-initial-height, 100dvh) !important;
    max-height: var(--hero-initial-height, 100dvh) !important;
    /* Smooth transition: fade out hero background at bottom */
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  }
}

/* Desktop: Ensure hero content accounts for navbar */
@media (min-width: 768px) {
  body.auth-page main > section#hero .hero-content {
    padding-top: 2rem !important; /* Reduced from 7rem to decrease gap between nav and welcome box */
  }
  
  body.dashboard-page main > section#hero .hero-content,
  body.profile-settings-page main > section#hero .hero-content {
    padding-top: 4.5rem !important; /* Slightly reduced from 6rem - accounts for navbar height (~96px) plus spacing */
  }
}

/* ==========================================================================
   Qualification Page - Override fixed hero positioning
   ========================================================================== */
/* Qualification page should not use fixed positioning - needs normal document flow */
/* This prevents footer overlap on qualification page */
body.qualification-page main > section#hero {
  position: relative !important;
  height: auto !important;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible !important;
  padding-bottom: var(--space-12) !important;
  padding-top: 4rem !important; /* Add top padding to clear navbar - mobile */
  align-items: center !important; /* Center content vertically */
}

/* Add more padding-top for qualification page on larger screens */
@media (min-width: 640px) {
  body.qualification-page main > section#hero {
    padding-top: 5rem !important; /* 80px */
  }
}

@media (min-width: 768px) {
  body.qualification-page main > section#hero {
    padding-top: 6rem !important; /* 96px */
  }
}

@media (min-width: 1024px) {
  body.qualification-page main > section#hero {
    padding-top: 7rem !important; /* 112px */
  }
}

/* Ensure qualification page has proper bottom padding to prevent footer overlap */
@media (min-width: 640px) {
  body.qualification-page main > section#hero {
    padding-bottom: var(--space-16) !important;
  }
}

@media (min-width: 1024px) {
  body.qualification-page main > section#hero {
    padding-bottom: var(--space-20) !important;
  }
}

/* Ensure footer doesn't overlap on qualification page */
body.qualification-page main:has(> section#hero) {
  margin-bottom: 0;
}

body.qualification-page main:has(> section#hero) + footer {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* Remove content-wrapper margin-top on qualification page since hero is relative */
body.qualification-page .content-wrapper {
  margin-top: 0 !important;
}

/* Ensure content sections on qualification page have proper background and positioning */
body.qualification-page main > section.parallax-section {
  position: relative;
  z-index: 1;
  background-color: rgb(202 213 229 / 0.75);
}

[data-theme="dark"] body.qualification-page main > section.parallax-section {
  background-color: rgb(4 3 3 / 0.75);
}

/* Apply static blur to background images on qualification page */
body.qualification-page main > section#hero .hero-bg {
  filter: blur(var(--blur-md)) saturate(130%) !important;
  -webkit-filter: blur(var(--blur-md)) saturate(130%) !important;
  transition: none !important;
}

body.qualification-page main > section#hero .hero-bg-img {
  filter: blur(var(--blur-md)) saturate(130%) !important;
  -webkit-filter: blur(var(--blur-md)) saturate(130%) !important;
  transition: none !important;
}

/* Ensure hero content opacity stays at 1 (no fade effect on scroll) */
body.qualification-page main > section#hero .hero-content {
  opacity: 1 !important;
  transition: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: calc(100vh - 4rem) !important; /* Account for navbar padding */
}

/* Adjust min-height for larger screens to account for navbar padding */
@media (min-width: 640px) {
  body.qualification-page main > section#hero .hero-content {
    min-height: calc(100vh - 5rem) !important; /* Account for 80px navbar padding */
  }
}

@media (min-width: 768px) {
  body.qualification-page main > section#hero .hero-content {
    min-height: calc(100vh - 6rem) !important; /* Account for 96px navbar padding */
  }
}

@media (min-width: 1024px) {
  body.qualification-page main > section#hero .hero-content {
    min-height: calc(100vh - 7rem) !important; /* Account for 112px navbar padding */
  }
}

/* Ensure inner content div is centered on qualification page */
body.qualification-page main > section#hero .hero-content > div {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* ==========================================================================
   Homepage Scroll to Top Button - Positioned next to hero title
   ========================================================================== */
.homepage-scroll-to-top-btn {
  position: absolute;
  top: 0;
  left: 100%; /* Position to the right of the title container */
  margin-left: 1.5rem; /* Add spacing from the title */
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none; /* Hidden by default, shown on desktop */
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15),
              0 2px 8px rgb(0 0 0 / 0.1),
              inset 0 1px 0 rgb(255 255 255 / 0.5);
  /* Use CSS variable for brand-aware colors */
  color: var(--color-secondary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0.3s,
              background 0.3s ease,
              box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Kiss Mortgage - Use primary blue for scroll-to-top button (light mode only) */
[data-app="kiss-mortgage"]:not([data-theme="dark"]) .homepage-scroll-to-top-btn {
  color: var(--color-primary); /* #05668d */
}

/* Show on desktop only where there's space to the right */
@media (min-width: 768px) {
  .homepage-scroll-to-top-btn {
    display: flex;
  }
}

/* Adjust spacing for larger screens */
@media (min-width: 1024px) {
  .homepage-scroll-to-top-btn {
    margin-left: 2rem;
  }
}

@media (min-width: 1280px) {
  .homepage-scroll-to-top-btn {
    margin-left: 2.5rem;
  }
}

.homepage-scroll-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s,
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.homepage-scroll-to-top-btn:hover {
  background: rgb(255 255 255 / 0.85);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.2),
              0 3px 10px rgb(0 0 0 / 0.15),
              inset 0 1px 0 rgb(255 255 255 / 0.6);
  transform: translateY(-2px) scale(1.05);
}

.homepage-scroll-to-top-btn:active {
  transform: translateY(0) scale(0.95);
  background: rgb(255 255 255 / 0.9);
}

.homepage-scroll-to-top-btn:focus-visible {
  /* Use CSS variable for brand-aware colors */
  outline: 2px solid rgb(var(--color-secondary-rgb) / 0.5);
  outline-offset: 2px;
}

/* Kiss Mortgage - Blue focus outline */
[data-app="kiss-mortgage"] .homepage-scroll-to-top-btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary-rgb) / 0.5);
}

/* Kiss Mortgage - Blue in dark mode */
body[data-app="kiss-mortgage"][data-theme="dark"] .homepage-scroll-to-top-btn,
[data-app="kiss-mortgage"][data-theme="dark"] .homepage-scroll-to-top-btn {
  color: rgb(91 163 255) !important; /* Lighter blue for dark mode - #5ba3ff */
}

.homepage-scroll-to-top-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: block;
  margin: 0;
  flex-shrink: 0;
}

/* Global scroll-to-top button now appears on all pages including homepage */


/* ==========================================================================
   Consolidated Button System — frosted / translucent, token-driven
   ========================================================================== */
/* One standard: .btn base + color variants (primary, secondary, danger, ghost).
   Theme/brand from tokens. Dashboard override keeps flat buttons on dashboard. */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border-radius: var(--radius-button);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: background-color var(--animation-duration-long) var(--animation-easing),
              border-color var(--animation-duration-long) var(--animation-easing),
              color var(--animation-duration-long) var(--animation-easing),
              box-shadow var(--animation-duration-long) var(--animation-easing),
              transform 220ms var(--animation-easing);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Primary (blue) — token-driven
   -------------------------------------------------------------------------- */
.btn-primary {
  background: rgb(var(--color-primary-rgb) / 0.225);
  border-color: rgb(var(--color-primary-rgb) / 0.3);
  color: rgb(var(--color-primary-rgb));
  box-shadow: 0 2px 8px rgb(var(--color-primary-rgb) / 0.15), 0 1px 4px rgb(0 0 0 / 0.1);
}

.btn-primary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.325);
  border-color: rgb(var(--color-primary-rgb) / 0.5);
  box-shadow: 0 4px 12px rgb(var(--color-primary-rgb) / 0.25), 0 2px 6px rgb(0 0 0 / 0.15);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-primary {
  background: rgb(var(--color-primary-rgb) / 0.275);
  border-color: rgb(var(--color-primary-rgb) / 0.4);
  box-shadow: 0 2px 8px rgb(var(--color-primary-rgb) / 0.25), 0 1px 4px rgb(0 0 0 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
}

[data-theme="dark"] .btn-primary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.375);
  border-color: rgb(var(--color-primary-rgb) / 0.6);
  box-shadow: 0 4px 16px rgb(var(--color-primary-rgb) / 0.35), 0 2px 8px rgb(0 0 0 / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Secondary (gold/orange) — token-driven
   -------------------------------------------------------------------------- */
.btn-secondary {
  background: rgb(var(--color-secondary-rgb) / 0.2);
  border-color: rgb(var(--color-secondary-rgb) / 0.25);
  color: rgb(var(--color-secondary-rgb));
  box-shadow: 0 2px 8px rgb(var(--color-secondary-rgb) / 0.12), 0 1px 4px rgb(0 0 0 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.3);
  font-weight: 600;
}

.btn-secondary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-secondary-rgb) / 0.275);
  border-color: rgb(var(--color-secondary-rgb) / 0.4);
  box-shadow: 0 4px 12px rgb(var(--color-secondary-rgb) / 0.2), 0 2px 6px rgb(0 0 0 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.4);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-secondary {
  background: rgb(var(--color-secondary-rgb) / 0.26);
  border-color: rgb(var(--color-secondary-rgb) / 0.35);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25), 0 1px 3px rgb(0 0 0 / 0.2),
    0 0 0 1px rgb(var(--color-secondary-rgb) / 0.15),
    inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.15);
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-secondary-rgb) / 0.325);
  border-color: rgb(var(--color-secondary-rgb) / 0.5);
  box-shadow: 0 4px 12px rgb(var(--color-secondary-rgb) / 0.3), 0 2px 6px rgb(0 0 0 / 0.3),
    0 0 0 1px rgb(var(--color-secondary-rgb) / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -1px 0 rgb(0 0 0 / 0.2);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Danger (red)
   -------------------------------------------------------------------------- */
.btn-danger {
  background: rgb(var(--color-error-rgb) / 0.15);
  border-color: rgb(var(--color-error-rgb) / 0.3);
  color: rgb(var(--color-error-rgb));
  box-shadow: 0 2px 8px rgb(var(--color-error-rgb) / 0.15), 0 1px 4px rgb(0 0 0 / 0.1);
}

.btn-danger:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-error-rgb) / 0.25);
  border-color: rgb(var(--color-error-rgb) / 0.5);
  box-shadow: 0 4px 12px rgb(var(--color-error-rgb) / 0.25), 0 2px 6px rgb(0 0 0 / 0.15);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-danger {
  background: rgb(var(--color-error-rgb) / 0.15);
  border-color: rgb(var(--color-error-rgb) / 0.3);
}

[data-theme="dark"] .btn-danger:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-error-rgb) / 0.25);
  border-color: rgb(var(--color-error-rgb) / 0.5);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Ghost (toggles) — subtle primary tint
   -------------------------------------------------------------------------- */
.btn-ghost {
  background: rgb(var(--color-primary-rgb) / 0.15);
  border-color: rgb(var(--color-primary-rgb) / 0.3);
  color: rgb(var(--color-primary-rgb));
  box-shadow: 0 2px 8px rgb(var(--color-primary-rgb) / 0.15), 0 1px 4px rgb(0 0 0 / 0.1);
}

.btn-ghost:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.25);
  border-color: rgb(var(--color-primary-rgb) / 0.5);
  box-shadow: 0 4px 12px rgb(var(--color-primary-rgb) / 0.25), 0 2px 6px rgb(0 0 0 / 0.15);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-ghost {
  background: rgb(var(--color-primary-rgb) / 0.15);
  border-color: rgb(var(--color-primary-rgb) / 0.3);
  box-shadow: 0 2px 8px rgb(var(--color-primary-rgb) / 0.2), 0 1px 4px rgb(0 0 0 / 0.2);
}

[data-theme="dark"] .btn-ghost:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.25);
  border-color: rgb(var(--color-primary-rgb) / 0.5);
  box-shadow: 0 4px 12px rgb(var(--color-primary-rgb) / 0.3), 0 2px 6px rgb(0 0 0 / 0.3);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */
.btn--sm {
  padding: clamp(0.375rem, 0.5vw, var(--space-2)) clamp(0.5rem, 0.75vw, var(--space-4));
  font-size: clamp(0.75rem, 0.875vw, var(--font-size-sm));
  min-height: 36px;
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   Card buttons — hero/journey pill style (radius-2xl, glow on hover, no lift).
   No transform to avoid compositing issues in content-wrapper parallax sections.
   -------------------------------------------------------------------------- */
.btn--card {
  border-radius: var(--radius-2xl);
  border: 1px solid;
  transition: background-color var(--animation-duration-long) var(--animation-easing),
              border-color var(--animation-duration-long) var(--animation-easing),
              box-shadow var(--animation-duration-long) var(--animation-easing);
}

.btn--card:hover:not(:disabled):not(:active) {
  transform: none;
}

.btn--card.btn-primary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.35);
  border-color: rgb(var(--color-primary-rgb) / 0.5);
  box-shadow: 0 0 14px rgb(var(--color-primary-rgb) / 0.25), 0 4px 12px rgb(0 0 0 / 0.1),
              inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn--card.btn-secondary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-secondary-rgb) / 0.3);
  border-color: rgb(var(--color-secondary-rgb) / 0.45);
  box-shadow: 0 0 14px rgb(var(--color-secondary-rgb) / 0.2), 0 4px 12px rgb(0 0 0 / 0.08),
              inset 0 1px 0 rgb(255 255 255 / 0.3);
}

[data-theme="dark"] .btn--card.btn-secondary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-secondary-rgb) / 0.35);
  border-color: rgb(var(--color-secondary-rgb) / 0.5);
  box-shadow: 0 0 16px rgb(var(--color-secondary-rgb) / 0.25), 0 4px 12px rgb(0 0 0 / 0.3),
              inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.15);
}

[data-theme="dark"] .btn--card.btn-primary:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.38);
  border-color: rgb(var(--color-primary-rgb) / 0.55);
  box-shadow: 0 0 16px rgb(var(--color-primary-rgb) / 0.3), 0 4px 12px rgb(0 0 0 / 0.35),
              inset 0 1px 0 rgb(255 255 255 / 0.08);
}

/* --------------------------------------------------------------------------
   Hero CTAs — frosted, gradient, aligned with value prop box (more inviting)
   -------------------------------------------------------------------------- */
.btn--hero {
  border-radius: var(--radius-2xl);
  min-width: 200px;
  overflow: visible;
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 6px 28px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.12) inset;
  backdrop-filter: blur(var(--blur-xl)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
}

@media (max-width: 767px) {
  .btn--hero {
    min-width: 0 !important;
  }
}

.btn--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.08) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.btn-primary.btn--hero {
  background: linear-gradient(135deg, rgb(30 70 130 / 0.78) 0%, rgb(45 120 175 / 0.72) 100%);
  border-color: rgb(255 255 255 / 0.2);
  color: rgb(var(--color-white-rgb));
  box-shadow: 0 6px 28px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.12) inset;
}

.btn-primary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(45 95 160 / 0.85) 0%, rgb(60 140 200 / 0.8) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.32), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-primary.btn--hero {
  background: linear-gradient(135deg, rgb(35 75 140 / 0.8) 0%, rgb(55 130 195 / 0.75) 100%);
}

[data-theme="dark"] .btn-primary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(50 100 170 / 0.88) 0%, rgb(70 150 220 / 0.82) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
}

.btn-secondary.btn--hero {
  background: linear-gradient(135deg, rgb(40 35 25 / 0.72) 0%, rgb(var(--color-secondary-rgb) / 0.7) 100%);
  border-color: rgb(255 255 255 / 0.2);
  color: rgb(var(--color-white-rgb));
  box-shadow: 0 6px 28px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.12) inset;
}

.btn-secondary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(55 45 35 / 0.78) 0%, rgb(var(--color-secondary-rgb) / 0.8) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.32), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary.btn--hero {
  background: linear-gradient(135deg, rgb(45 40 30 / 0.75) 0%, rgb(var(--color-secondary-rgb) / 0.75) 100%);
}

[data-theme="dark"] .btn-secondary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(60 55 45 / 0.82) 0%, rgb(var(--color-secondary-rgb) / 0.85) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
}

[data-app="kiss-mortgage"] .btn-secondary.btn--hero {
  background: linear-gradient(135deg, rgb(50 42 28 / 0.72) 0%, rgb(199 159 79 / 0.7) 100%);
  border-color: rgb(255 255 255 / 0.2);
  box-shadow: 0 6px 28px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.12) inset;
}

[data-app="kiss-mortgage"] .btn-secondary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(65 55 35 / 0.78) 0%, rgb(215 180 110 / 0.8) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.32), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
}

[data-app="kiss-mortgage"][data-theme="dark"] .btn-secondary.btn--hero {
  background: linear-gradient(135deg, rgb(55 48 32 / 0.75) 0%, rgb(199 159 79 / 0.75) 100%);
}

[data-app="kiss-mortgage"][data-theme="dark"] .btn-secondary.btn--hero:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, rgb(75 65 45 / 0.82) 0%, rgb(215 180 110 / 0.85) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.18) inset;
}

/* Glow overlay child for hero buttons */
.btn-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
  background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.2) 0%, transparent 70%);
}

.btn-primary .btn-glow {
  background: radial-gradient(circle at 50% 50%, rgb(var(--color-primary-rgb) / 0.4) 0%, rgb(var(--color-primary-rgb) / 0.25) 40%, transparent 70%);
}

.btn-secondary .btn-glow {
  background: radial-gradient(circle at 50% 50%, rgb(var(--color-secondary-rgb) / 0.3) 0%, rgb(var(--color-secondary-rgb) / 0.25) 40%, transparent 70%);
}

[data-app="kiss-mortgage"] .btn-secondary .btn-glow {
  background: radial-gradient(circle at 50% 50%, rgb(199 159 79 / 0.3) 0%, rgb(199 159 79 / 0.25) 40%, transparent 70%);
}

/* --------------------------------------------------------------------------
   Dashboard — flat primary (no glass)
   -------------------------------------------------------------------------- */
body.dashboard-page .btn,
body.dashboard-page .btn-primary,
body.dashboard-page .btn-secondary,
body.dashboard-page .btn-danger {
  background: rgb(var(--color-primary-rgb)) !important;
  backdrop-filter: none !important;
  border: 1px solid rgb(var(--color-primary-rgb)) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

body.dashboard-page .btn:hover:not(:disabled):not(:active),
body.dashboard-page .btn-primary:hover:not(:disabled):not(:active),
body.dashboard-page .btn-secondary:hover:not(:disabled):not(:active),
body.dashboard-page .btn-danger:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.9) !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
  transform: none !important;
}

/* Ghost stays subtle on dashboard (e.g. toggles if ever used there) */
body.dashboard-page .btn-ghost {
  background: rgb(var(--color-primary-rgb) / 0.12) !important;
  border-color: rgb(var(--color-primary-rgb) / 0.25) !important;
  color: rgb(var(--color-primary-rgb)) !important;
}

body.dashboard-page .btn-ghost:hover:not(:disabled):not(:active) {
  background: rgb(var(--color-primary-rgb) / 0.2) !important;
  border-color: rgb(var(--color-primary-rgb) / 0.4) !important;
}


/*# sourceMappingURL=e048041a9db07140.css.map*/