/**
 * NOCO TechWorks - Custom Styles
 *
 * Table of Contents:
 * 1. CSS Custom Properties
 * 2. Global Resets & Constraints
 * 3. Typography System
 * 4. Focus & Accessibility Styles
 * 5. Touch Target Sizing
 * 6. Mobile Navigation
 * 7. Z-Index Hierarchy
 * 8. Promo Banner
 * 9. Technology Partner Logos
 * 10. Payment Card Logos
 * 11. Buttons & CTAs
 * 12. Form Inputs
 * 13. Sticky CTA
 * 14. Dark Mode Overrides
 * 15. Defensive Styles (Tables/Embeds)
 * 16. Breakpoint System
 * 17. Landscape Orientation
 * 18. Accessibility (Reduced Motion, High Contrast)
 * 19. Print Styles
 *
 * Breakpoints:
 * - 320px: Tiny phones (iPhone SE 1st gen)
 * - 360px: Small Android phones
 * - 390px: Standard phones
 * - 480px: Large phones/phablets
 * - 600px: Small tablets
 * - 768px: Medium tablets (iPad Mini)
 * - 834px: Large tablets (iPad Pro 11")
 * - 1024px: XL tablets (iPad Pro 12.9")
 * - 1280px: Desktop
 *
 * Z-Index Hierarchy:
 * - 300: Site header
 * - 1000: Promo banner
 * - 1001: Sticky CTA
 * - 1002: Nav overlay
 * - 1003: Mobile nav drawer
 * - 1004: Hamburger button
 *
 * Last updated: 2025-11-26
 * Updated by: Claude Code + Codex Polish Pass
 */

/* ============================================
   CSS VARIABLES - Design System
   ============================================ */

:root {
  /* Brand Colors */
  --brand-red: #E9051E;
  --brand-black: #1E1E1E;
  --pure-white: #FFFFFF;

  /* Extended Red Palette */
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-900: #7F1D1D;

  /* Gray Palette */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* Semantic Colors */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1E1E1E 0%, #2D2D2D 50%, #1E1E1E 100%);
  --gradient-red: linear-gradient(135deg, #E9051E 0%, #DC2626 100%);
  --gradient-light: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);

  /* Surface + text defaults (light mode) */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-tertiary: #f2f2f2;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #4b5563;
  --primary-red: var(--brand-red, #E9051E);

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-red: 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2);
  --shadow-red-lg: 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Eurostile Extended', 'EurostileExtendedRegular', var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

  /* Spacing (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ========================================
     FLUID DESIGN SYSTEM - RESPONSIVE
     ======================================== */

  /* Fluid Typography Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2.25vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);

  /* Fluid Spacing Scale */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
  --space-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-3xl: clamp(3rem, 2rem + 4vw, 6rem);

  /* Container widths */
  --container-sm: min(100% - 2rem, 640px);
  --container-md: min(100% - 2rem, 768px);
  --container-lg: min(100% - 2rem, 1024px);
  --container-xl: min(100% - 2rem, 1280px);

  /* Touch target minimum (Google recommends 48dp) */
  --touch-target-min: 48px;

  /* Safe area insets for notches/home indicators */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Z-index hierarchy (explicit stacking order) */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-promo: 1000;
  --z-sticky-cta: 1001;
  --z-overlay: 1002;
  --z-mobile-nav: 1003;
  --z-modal: 1010;

  /* Layout heights */
  --header-height: 72px;
  --header-height-mobile: 72px;
  --promo-height: 44px;

  /* About page photo cards */
  --about-photos-columns: repeat(3, 1fr);
  --about-photos-max-width: 650px;
  --about-photo-card-bg: #f3f4f6;
  --about-photo-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* ========================================
   CRITICAL: UNIVERSAL VIEWPORT CONSTRAINTS
   ======================================== */

html {
  overflow-x: auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: auto;
  /* Removed: max-width: 100vw — conflicts with R4.8 container margins */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Removed: max-width: 100vw on layout elements — conflicts with R4.8 container margins */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1, h2, h3, h4, h5, h6,
li,
td,
th,
label,
span {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ========================================
   ACCESSIBILITY: FOCUS STYLES WITH FALLBACK
   Supports older browsers without :focus-visible
   ======================================== */

/* Base focus for ALL browsers (including older ones) */
:focus {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* If :focus-visible is supported, use it instead */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }
}

/* Light backgrounds - specific overrides */
.promo-cta:focus,
.promo-cta:focus-visible,
.promo-close:focus,
.promo-close:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.4);
}

/* Dark mode focus */
[data-theme="dark"] :focus-visible {
  outline-color: #ffffff;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #ffffff;
  padding: var(--space-sm) var(--space-md);
  z-index: 10000;
  border-radius: 4px;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-md);
}

/* ========================================
   TOUCH TARGETS - SCOPED TO BUTTONS/NAV ONLY
   Does NOT affect inline text links
   ======================================== */

/* Button-like elements get full touch target treatment */
a.btn,
a.button,
a.cta-primary,
a.cta-secondary,
a.cta-outline,
.nav-link,
.menu-item a,
.footer-nav a,
.mobile-nav a,
.nav-drawer a,
[role="button"],
button,
.btn,
input[type="submit"],
input[type="button"] {
  min-height: var(--touch-target-min);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Inline text links remain normal */
p a,
li a:not(.nav-link):not(.menu-item a),
.prose a,
.content a {
  display: inline;
  min-height: auto;
}

/* ========================================
   Z-INDEX HIERARCHY - EXPLICIT STACKING
   Order: page < promo < sticky CTA < overlay < nav
   ======================================== */

.site-header,
header {
  z-index: var(--z-fixed);
}

.promo-banner {
  z-index: var(--z-promo);
}

.mobile-sticky-cta,
.sticky-cta,
.floating-cta,
.mobile-sticky-text {
  z-index: var(--z-sticky-cta);
}

.mobile-menu-overlay,
.nav-overlay,
.menu-overlay,
.mobile-overlay,
.backdrop {
  z-index: var(--z-overlay);
}

.mobile-menu-toggle {
  z-index: calc(var(--z-mobile-nav) + 1);
  position: relative;
}

/* ========================================
   COMPREHENSIVE BREAKPOINT SYSTEM
   ======================================== */

/* ===== TINY PHONES (320px - 359px) ===== */
@media (max-width: 359px) {
  html {
    font-size: 14px;
  }

  .container,
  section,
  .wrapper {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  h1, .hero-headline {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  .card,
  .service-card,
  .pricing-card,
  [class*="-card"] {
    padding: 1rem !important;
  }

  .cta-primary,
  .cta-secondary,
  button,
  .btn {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .promo-banner {
    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  }

  .promo-content {
    flex-direction: column;
    gap: 0.375rem;
  }

  .promo-text {
    font-size: 0.75rem;
  }

  .promo-fine-print,
  .promo-icon {
    display: none;
  }
}

/* ===== SMALL PHONES (360px - 389px) ===== */
@media (min-width: 360px) and (max-width: 389px) {
  .container,
  section,
  .wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ===== STANDARD PHONES (390px - 479px) ===== */
@media (min-width: 390px) and (max-width: 479px) {
  .container,
  section,
  .wrapper {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ===== ALL PHONES (max-width: 599px) ===== */
@media (max-width: 599px) {
  /* Force single column - SPECIFIC classes only */
  .cards-grid,
  .service-cards,
  .features-grid,
  .stats-grid,
  .numbers-grid,
  .pricing-cards,
  .steps-grid,
  .process-steps,
  .footer-grid,
  .footer-columns,
  .footer-content,
  .service-options,
  .home-services,
  .dual-service-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-lg) !important;
  }

  /* Full width cards */
  .card,
  .service-card,
  .pricing-card,
  .feature-card,
  .stat-card,
  .step-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Removed: Header max-width: 100vw — conflicts with R4.8 container margins */

  .site-header .container,
  header .container,
  .header-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero responsive sizing */
  .hero h1,
  .hero-section h1,
  .page-hero h1,
  .hero-headline {
    font-size: var(--text-3xl) !important;
    line-height: 1.2 !important;
  }

  .hero p,
  .hero-section p,
  .hero-subheadline {
    font-size: var(--text-base) !important;
  }

  /* Footer stacking */
  .site-footer .footer-content,
  .site-footer .footer-columns,
  .site-footer .footer-grid,
  footer .container {
    flex-direction: column !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  .footer-column {
    width: 100% !important;
    text-align: center !important;
  }

  /* Full width buttons on mobile */
  .hero-cta-group .cta-primary,
  .hero-cta-group .cta-secondary {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Promo banner mobile */
  .promo-banner {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    padding-top: calc(0.75rem + var(--safe-top));
  }

  .promo-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .promo-text {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .promo-fine-print {
    display: none;
  }

  /* Two-column credibility section */
  section[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* ===== LARGE PHONES / PHABLETS (480px - 599px) ===== */
@media (min-width: 480px) and (max-width: 599px) {
  .card-logos,
  .payment-logos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    justify-items: center !important;
  }

  .container {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ===== SMALL TABLETS (600px - 767px) ===== */
@media (min-width: 600px) and (max-width: 767px) {
  .service-options,
  .home-services,
  .dual-service-cards,
  .features-grid,
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .stats-grid,
  .numbers-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .footer-columns,
  .footer-content,
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    text-align: left !important;
  }

  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .promo-content {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

/* ===== MEDIUM TABLETS (768px - 833px) ===== */
@media (min-width: 768px) and (max-width: 833px) {
  .service-options,
  .home-services,
  .pricing-cards,
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .stats-grid,
  .numbers-grid,
  .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }

  .footer-columns,
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ===== LARGE TABLETS (834px - 1023px) ===== */
@media (min-width: 834px) and (max-width: 1023px) {
  .pricing-cards,
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }

  .container {
    max-width: 900px;
    margin: 0 auto;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
  .pricing-cards,
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .footer-columns,
  .footer-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===== EXTRA LARGE DESKTOP (1280px+) ===== */
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ========================================
   HOLIDAY PROMO BANNER - ALL DEVICES
   NOTE: Moved to Round 4.6 section at end of file
   ======================================== */

/* ========================================
   TECHNOLOGY PARTNER LOGOS - ALL DEVICES
   ======================================== */

.tech-partners,
.partners-section,
.technology-partners {
  padding: var(--space-xl) var(--space-lg);
}

.partner-logos,
.tech-logos,
.partners-grid,
.technology-logos,
.tech-partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--container-md);
  margin: 0 auto;
}

.partner-logos img,
.tech-logos img,
.partners-grid img,
.technology-logos img,
.tech-partners img,
.tech-partners-grid img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 1;
}

/* Hide Linux logo */
.tech-logo-linux,
img[alt="Linux"] {
  display: none !important;
}

/* Tiny phones */
@media (max-width: 359px) {
  .partner-logos,
  .tech-logos,
  .tech-partners-grid {
    gap: 1rem;
  }

  .partner-logos img,
  .tech-logos img,
  .tech-partners img,
  .tech-partners-grid img {
    height: 22px;
    max-width: 80px;
  }
}

/* Small phones */
@media (min-width: 360px) and (max-width: 479px) {
  .partner-logos img,
  .tech-logos img,
  .tech-partners img,
  .tech-partners-grid img {
    height: 26px;
    max-width: 100px;
  }
}

/* Standard phones */
@media (min-width: 480px) and (max-width: 599px) {
  .partner-logos img,
  .tech-logos img,
  .tech-partners img,
  .tech-partners-grid img {
    height: 28px;
    max-width: 110px;
  }
}

/* Tablets - single row */
@media (min-width: 600px) {
  .partner-logos,
  .tech-logos,
  .tech-partners-grid {
    flex-wrap: nowrap;
    gap: 2rem;
  }

  .partner-logos img,
  .tech-logos img,
  .tech-partners img,
  .tech-partners-grid img {
    height: 32px;
    max-width: 120px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .partner-logos img,
  .tech-logos img,
  .tech-partners img,
  .tech-partners-grid img {
    height: 36px;
    max-width: 140px;
  }
}

/* ========================================
   PAYMENT CARD LOGOS - ALL DEVICES
   ======================================== */

.card-logos,
.payment-logos,
.card-networks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.card-logos img,
.payment-logos img,
.card-networks img {
  height: 28px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
}

/* Tiny phones - 2x2 grid */
@media (max-width: 359px) {
  .card-logos,
  .payment-logos,
  .card-networks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    justify-items: center;
  }

  .card-logos img,
  .payment-logos img,
  .card-networks img {
    height: 20px;
    max-width: 50px;
  }
}

/* Small/standard phones - 2x2 grid */
@media (min-width: 360px) and (max-width: 479px) {
  .card-logos,
  .payment-logos,
  .card-networks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    justify-items: center;
  }

  .card-logos img,
  .payment-logos img,
  .card-networks img {
    height: 22px;
    max-width: 55px;
  }
}

/* Large phones */
@media (min-width: 480px) and (max-width: 599px) {
  .card-logos,
  .payment-logos,
  .card-networks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .card-logos img,
  .payment-logos img,
  .card-networks img {
    height: 24px;
  }
}

/* Tablets and up - single row */
@media (min-width: 600px) {
  .card-logos,
  .payment-logos,
  .card-networks {
    flex-wrap: nowrap;
    gap: 1.5rem;
  }

  .card-logos img,
  .payment-logos img,
  .card-networks img {
    height: 28px;
    max-width: 60px;
  }
}

/* ========================================
   FORM INPUTS - ALL DEVICES
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  font-size: 16px; /* Prevents iOS zoom on focus */
  line-height: 1.5;
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Browser autofill fix - prevents ugly yellow/blue backgrounds */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #1f2937;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Dark mode inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #9ca3af;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Dark mode autofill fix */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #f9fafb;
  -webkit-box-shadow: 0 0 0px 1000px #1f2937 inset;
  box-shadow: 0 0 0px 1000px #1f2937 inset;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ========================================
   STICKY CTA - ALL DEVICES + SAFE AREAS
   ======================================== */

.mobile-sticky-cta,
.sticky-cta,
.floating-cta,
.mobile-sticky-text {
  position: fixed;
  bottom: var(--safe-bottom);
  right: calc(var(--space-md) + var(--safe-right));
  z-index: var(--z-sticky-cta);
}

@media (max-width: 1023px) {
  main {
    padding-bottom: calc(80px + var(--safe-bottom));
  }

  .site-footer,
  footer {
    padding-bottom: calc(100px + var(--safe-bottom));
  }
}

@media (min-width: 1024px) {
  main {
    padding-bottom: 0;
  }
}

/* ========================================
   FINAL CTA DARK MODE SAFETY NET
   ======================================== */

[data-theme="dark"] [data-section="final-cta"],
[data-theme="dark"] .final-cta,
[data-theme="dark"] .final-cta-section {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

[data-theme="dark"] [data-section="final-cta"] h1,
[data-theme="dark"] [data-section="final-cta"] h2,
[data-theme="dark"] [data-section="final-cta"] h3,
[data-theme="dark"] [data-section="final-cta"] p,
[data-theme="dark"] .final-cta h2,
[data-theme="dark"] .final-cta p {
  color: #f9fafb !important;
}

[data-theme="dark"] [data-section="final-cta"] .cta-primary,
[data-theme="dark"] .final-cta .cta-primary {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

[data-theme="dark"] [data-section="final-cta"] .cta-secondary,
[data-theme="dark"] .final-cta .cta-secondary {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

/* ========================================
   DEFENSIVE: TABLES, CODE, EMBEDS
   ======================================== */

/* Responsive table wrapper */
.responsive-table,
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table table,
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

/* Prevent code/pre from breaking layout */
pre,
code {
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Embedded iframes */
.embed,
.embed-wrapper,
.video-wrapper {
  width: 100%;
  max-width: 100%;
}

.embed iframe,
.embed-wrapper iframe,
.video-wrapper iframe {
  width: 100%;
  max-width: 100%;
  border: none;
}

/* Responsive video aspect ratio */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .hero,
  .hero-section,
  .hero-split {
    min-height: auto;
    padding: var(--space-lg) var(--space-md);
  }

  .hero h1,
  .hero-headline {
    font-size: var(--text-2xl);
  }

  section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .mobile-sticky-cta,
  .sticky-cta,
  .mobile-sticky-text {
    padding: var(--space-xs) var(--space-sm);
  }

  .promo-content {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
  .hero,
  .hero-split {
    min-height: 60vh;
  }
}

/* ========================================
   ACCESSIBILITY: REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .promo-cta:hover,
  .cta-primary:hover,
  .cta-secondary:hover {
    transform: none !important;
  }
}

/* ========================================
   ACCESSIBILITY: HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --text-color: #000000;
    --bg-color: #ffffff;
  }

  .cta-primary,
  .cta-secondary,
  button {
    border: 2px solid currentColor !important;
  }

  a {
    text-decoration: underline !important;
  }
}

@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
}

/* ========================================
   TEXT SELECTION
   ======================================== */

::selection {
  background-color: #dc2626;
  color: #ffffff;
}

::-moz-selection {
  background-color: #dc2626;
  color: #ffffff;
}

/* Dark mode selection contrast */
html[data-theme="dark"] ::selection {
  background-color: #ef4444;
  color: #000000;
}

html[data-theme="dark"] ::-moz-selection {
  background-color: #ef4444;
  color: #000000;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .promo-banner,
  .mobile-sticky-cta,
  .sticky-cta,
  .floating-cta,
  .mobile-sticky-text,
  nav,
  .site-header,
  .promo-close,
  .mobile-nav,
  .nav-overlay,
  .mobile-menu-toggle,
  .desktop-text-bubble {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
    background: #ffffff;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  /* Avoid page breaks inside important elements */
  .card,
  .pricing-card,
  .service-card,
  blockquote,
  img {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */

.dark-mode-toggle {
  background: transparent;
  border: 1px solid var(--gray-600, #525252);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: var(--touch-target-min, 48px);
  min-height: var(--touch-target-min, 48px);
  cursor: pointer;
  color: var(--gray-400, #A3A3A3);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle:hover {
  border-color: var(--brand-red, #E9051E);
  color: var(--brand-red, #E9051E);
}

.dark-mode-toggle:focus-visible {
  outline: 2px solid var(--brand-red, #E9051E);
  outline-offset: 2px;
}

/* Hide moon by default, show sun */
.dark-mode-toggle .icon-moon {
  display: none;
}

.dark-mode-toggle .icon-sun {
  display: block;
}

/* When dark mode is active, swap icons */
[data-theme="dark"] .dark-mode-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .dark-mode-toggle .icon-moon {
  display: block;
}

/* Hide toggle in print */
@media print {
  .dark-mode-toggle {
    display: none !important; /* Required: toggle is irrelevant in print */
  }
}

/* ============================================
   DISABLED - Using manual toggle instead
   Preserved for reference / rollback
   ============================================

@media (prefers-color-scheme: dark) {
  :root {
    /* Inverted background/foreground */
    --pure-white: #1E1E1E;
    --brand-black: #FAFAFA;

    /* Gray palette inverted */
    --gray-50: #1E1E1E;
    --gray-100: #262626;
    --gray-200: #333333;
    --gray-300: #404040;
    --gray-400: #525252;
    --gray-500: #737373;
    --gray-600: #A3A3A3;
    --gray-700: #D4D4D4;
    --gray-800: #E5E5E5;
    --gray-900: #F5F5F5;

    /* Red palette adjusted for dark mode */
    --red-50: #2D1F1F;
    --red-100: #3D2828;

    /* Gradients for dark mode */
    --gradient-light: linear-gradient(180deg, #1E1E1E 0%, #262626 100%);

    /* Shadows for dark mode - lighter for visibility */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  }

  /* Body background */
  body {
    background: #1E1E1E;
    color: #E5E5E5;
  }

  /* Cards and surfaces */
  .feature-card,
  .pricing-card,
  .resource-card,
  .testimonial-card {
    background: #262626;
    border-color: #333333;
  }

  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    background: #262626;
    border-color: #404040;
    color: #E5E5E5;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--brand-red, #E9051E);
    background: #333333;
  }

  /* Ensure text contrast */
  .feature-card h3,
  .pricing-card h3,
  .resource-card h3 {
    color: #FAFAFA;
  }

  /* Ensure brand red remains vibrant */
  a {
    color: #F54D5C;
  }

  a:hover {
    color: #FF6B7A;
  }

  /* Tech partner logos - keep grayscale but lighter */
  .tech-partners-grid img {
    filter: grayscale(100%) invert(1);
    opacity: 0.5;
  }

  .tech-partners-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }

  /* Footer */
  .site-footer {
    background: #141414;
  }

  /* Header */
  .site-header {
    background: rgba(30, 30, 30, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* CTA buttons maintain brand red */
  .cta-primary {
    background: var(--brand-red, #E9051E);
    color: #FFFFFF;
  }

  /* QR codes need white background to remain scannable */
  .payment-qr {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
  }

  /* Backup selectors for any QR images by filename */
  .payment-methods-grid img[src*="QR"],
  .payment-methods-grid img[src*="Zelle"],
  .payment-methods-grid img[src*="Venmo"],
  .payment-methods-grid img[src*="PayPal"] {
    background: white;
    padding: 8px;
    border-radius: 8px;
  }

  .site-footer::before {
    opacity: 0.05;
    filter: brightness(2);
  }
}

END DISABLED @media (prefers-color-scheme: dark) BLOCK
============================================ */

/* ============================================
   DARK MODE (Manual Toggle Only)
   Activates when data-theme="dark" is set on <html>
   Only affects LIGHT sections - leaves dark sections alone
   ============================================ */

[data-theme="dark"] {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #242424;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted: #888;
  --border-color: #333333;
}

/* Only apply dark styles to LIGHT sections */
[data-theme="dark"] .section-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] section[style*="background: white"],
[data-theme="dark"] section[style*="background: #fff"],
[data-theme="dark"] section[style*="background-color: white"],
[data-theme="dark"] section[style*="background-color: #fff"],
[data-theme="dark"] .pricing-table-section,
[data-theme="dark"] .callout-neutral {
  background-color: var(--bg-secondary, #141414) !important; /* Required: override inline light backgrounds */
  color: var(--text-primary, #f5f5f5);
}

/* Headings in light sections */
[data-theme="dark"] .section-light h1,
[data-theme="dark"] .section-light h2,
[data-theme="dark"] .section-light h3,
[data-theme="dark"] .section-light h4,
[data-theme="dark"] .section-light h5,
[data-theme="dark"] .section-light h6,
[data-theme="dark"] .bg-white h1,
[data-theme="dark"] .bg-white h2,
[data-theme="dark"] .bg-white h3,
[data-theme="dark"] .bg-white h4,
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white h6 {
  color: var(--text-primary, #f5f5f5);
}

/* Paragraphs and lists in light sections */
[data-theme="dark"] .section-light p,
[data-theme="dark"] .section-light li,
[data-theme="dark"] .section-light span,
[data-theme="dark"] .bg-white p,
[data-theme="dark"] .bg-white li,
[data-theme="dark"] .bg-white span {
  color: var(--text-secondary, #b0b0b0);
}

/* Cards */
[data-theme="dark"] .service-card,
[data-theme="dark"] .pricing-card {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #2a2a2a;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card h4,
[data-theme="dark"] .pricing-card h3,
[data-theme="dark"] .pricing-card h4 {
  color: var(--text-primary, #f5f5f5);
}

[data-theme="dark"] .service-card p,
[data-theme="dark"] .service-card li,
[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-card li {
  color: var(--text-secondary, #b0b0b0);
}

/* Form inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #3a3a3a;
  color: var(--text-primary, #f5f5f5);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #666;
}

/* Links - slightly lighter red for visibility */
[data-theme="dark"] a:not(.cta-primary):not(.cta-secondary):not(.nav-link) {
  color: #ff6b6b;
}

[data-theme="dark"] a:not(.cta-primary):not(.cta-secondary):not(.nav-link):hover {
  color: #ff8585;
}

/* QR codes need white background to remain scannable */
[data-theme="dark"] .payment-qr,
[data-theme="dark"] .payment-methods-grid img[src*="QR"],
[data-theme="dark"] .payment-methods-grid img[src*="Zelle"],
[data-theme="dark"] .payment-methods-grid img[src*="Venmo"],
[data-theme="dark"] .payment-methods-grid img[src*="PayPal"] {
  background: white;
  padding: 8px;
  border-radius: 8px;
  color: #111111;
}

/* Tables */
[data-theme="dark"] table {
  border-color: #3a3a3a;
}

[data-theme="dark"] th,
[data-theme="dark"] td {
  border-color: #3a3a3a;
  color: var(--text-secondary, #b0b0b0);
}

[data-theme="dark"] th {
  background-color: var(--bg-tertiary, #1a1a1a);
  color: var(--text-primary, #f5f5f5);
}

/* Callouts */
[data-theme="dark"] .callout-neutral {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #3a3a3a;
}

/* ============================================
   COMPREHENSIVE DARK MODE COVERAGE
   Targets elements that use inline styles or CSS variables
   ============================================ */

/* Body and HTML background */
[data-theme="dark"] body {
  background-color: var(--bg-primary, #0a0a0a) !important; /* Required: force dark base even when inline styles are present */
  color: var(--text-primary, #f5f5f5);
}

/* Main content area */
[data-theme="dark"] main {
  background-color: var(--bg-primary, #0a0a0a);
}

/* Sections using inline styles with CSS variables */
[data-theme="dark"] section[style*="var(--pure-white"],
[data-theme="dark"] section[style*="var(--gray-50"],
[data-theme="dark"] div[style*="var(--pure-white"],
[data-theme="dark"] div[style*="var(--gray-50"] {
  background-color: var(--bg-secondary, #141414) !important; /* Required: override inline light theme tokens */
}

/* All section tags - catch-all for light sections */
[data-theme="dark"] section:not(.hero):not(.hero-split):not(.site-footer) {
  background-color: var(--bg-secondary, #141414);
  color: var(--text-primary, #f5f5f5);
}

/* CTA buttons - CRITICAL: White text on red */
[data-theme="dark"] .cta-primary,
[data-theme="dark"] .cta-primary:hover,
[data-theme="dark"] .cta-primary:focus,
[data-theme="dark"] a.cta-primary,
[data-theme="dark"] button.cta-primary {
  background-color: var(--primary-red, #dc2626) !important;
  color: #ffffff !important;
  border-color: var(--primary-red, #dc2626) !important;
}

[data-theme="dark"] .cta-primary span,
[data-theme="dark"] .cta-primary svg,
[data-theme="dark"] .cta-primary * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Secondary CTA */
[data-theme="dark"] .cta-secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

[data-theme="dark"] .cta-secondary:hover {
  background-color: #ffffff !important;
  color: var(--bg-primary, #0f0f0f) !important;
}

/* Card backgrounds */
[data-theme="dark"] .card-icon-wrapper {
  background-color: rgba(233, 5, 30, 0.15);
}

[data-theme="dark"] .card-features li {
  color: var(--text-secondary, #b0b0b0);
}

[data-theme="dark"] .card-badge {
  background-color: rgba(233, 5, 30, 0.15);
  border-color: rgba(233, 5, 30, 0.3);
}

/* Testimonial cards */
[data-theme="dark"] .testimonial-card {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #2a2a2a;
}

[data-theme="dark"] .testimonial-card.featured {
  background: linear-gradient(135deg, var(--bg-tertiary, #1a1a1a) 0%, var(--bg-secondary, #141414) 100%);
  border-color: rgba(233, 5, 30, 0.3);
}

/* Contact form styling */
[data-theme="dark"] .contact-form {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #2a2a2a;
}

[data-theme="dark"] .contact-form-column {
  background-color: var(--bg-tertiary, #1a1a1a);
}

[data-theme="dark"] .contact-expect-box {
  background-color: rgba(233, 5, 30, 0.1);
  border-color: rgba(233, 5, 30, 0.2);
}

[data-theme="dark"] .contact-expect-card {
  background-color: var(--bg-tertiary, #1a1a1a);
}

[data-theme="dark"] .form-label {
  color: var(--text-primary, #f5f5f5);
}

/* Trust bar */
[data-theme="dark"] .hero-trust-bar {
  border-top-color: #3a3a3a;
}

[data-theme="dark"] .trust-item strong {
  color: var(--text-primary, #f5f5f5);
}

[data-theme="dark"] .trust-item span {
  color: var(--text-muted, #888);
}

/* Section headers */
[data-theme="dark"] .section-subtitle {
  color: var(--text-secondary, #b0b0b0);
}

/* Tech partners section */
[data-theme="dark"] .tech-partners {
  background-color: var(--bg-secondary, #141414);
}

[data-theme="dark"] .tech-partners h2 {
  color: var(--text-primary, #f5f5f5);
}

/* Service area section */
[data-theme="dark"] .service-area-section {
  background-color: var(--bg-secondary, #141414);
}

[data-theme="dark"] .service-area-card {
  background-color: var(--bg-tertiary, #1a1a1a);
}

/* Portal navigation */
[data-theme="dark"] .portal-nav-bar {
  background-color: var(--bg-secondary, #141414);
  border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .portal-nav-link {
  color: var(--text-secondary, #b0b0b0);
}

[data-theme="dark"] .portal-nav-link:hover {
  background-color: var(--bg-tertiary, #1a1a1a);
  color: var(--text-primary, #f5f5f5);
}

/* Remote session features */
[data-theme="dark"] .remote-session-features {
  background-color: var(--bg-tertiary, #1a1a1a);
}

[data-theme="dark"] .remote-session-feature span {
  color: var(--text-secondary, #b0b0b0);
}

/* FAQ navigation pills */
[data-theme="dark"] .faq-nav a {
  background-color: var(--brand-red, #e9051e);
  border-color: var(--brand-red, #e9051e);
  color: #ffffff;
}

[data-theme="dark"] .faq-nav a:hover,
[data-theme="dark"] .faq-nav a:focus-visible {
  background-color: var(--bg-tertiary, #1a1a1a);
  color: var(--brand-red, #e9051e);
}

/* Payment method cards */
[data-theme="dark"] .payment-method {
  color: var(--text-primary, #f5f5f5);
}

[data-theme="dark"] .payment-qr {
  background: white;
  border-radius: 12px;
}

[data-theme="dark"] .payment-card-networks .network-name {
  color: var(--text-secondary, #b0b0b0);
}

[data-theme="dark"] .payment-card-networks .network-separator {
  color: #4a4a4a;
}

[data-theme="dark"] .payment-card-description {
  color: var(--text-muted, #888);
}

[data-theme="dark"] .payment-note {
  color: var(--text-secondary, #b0b0b0);
}

/* Payment icon backgrounds in dark mode - override neutral base styles defined later */
[data-theme="dark"] .payment-method .card-icon-wrapper {
  background: var(--bg-tertiary, #242424) !important; /* Override base neutral background set later in file */
}

[data-theme="dark"] .payment-method:hover .card-icon-wrapper,
[data-theme="dark"] .payment-method:focus-visible .card-icon-wrapper,
[data-theme="dark"] .payment-method:focus-within .card-icon-wrapper {
  background: var(--bg-tertiary, #242424) !important;
  transform: none;
}

[data-theme="dark"] .payment-method.payment-apple .card-icon-wrapper,
[data-theme="dark"] .payment-method.payment-bitcoin .card-icon-wrapper {
  background: transparent !important;
}

/* Checklist styling */
[data-theme="dark"] .checklist-item {
  border-bottom-color: #3a3a3a;
}

/* Print button */
[data-theme="dark"] .print-button {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: #3a3a3a;
  color: var(--text-secondary, #b0b0b0);
}

[data-theme="dark"] .print-button:hover {
  background-color: var(--bg-secondary, #141414);
  color: var(--text-primary, #f5f5f5);
}

/* Lists */
[data-theme="dark"] .list-good li,
[data-theme="dark"] .list-not li {
  color: var(--text-secondary, #b0b0b0);
}

/* Security badge */
[data-theme="dark"] .security-badge {
  border-top-color: #3a3a3a;
  color: var(--text-secondary, #b0b0b0);
}

/* Powered by text */
[data-theme="dark"] .powered-by {
  color: var(--text-muted, #888);
}

/* Scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary, #141414);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-color: var(--bg-secondary, #141414);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red, #e9051e);
}

/* ============================================
   STICKY MOBILE CTA - DARK MODE
   ============================================ */

[data-theme="dark"] .mobile-cta,
[data-theme="dark"] .mobile-sticky,
[data-theme="dark"] .sticky-cta,
[data-theme="dark"] .mobile-sticky-text,
[data-theme="dark"] [class*="mobile-cta"],
[data-theme="dark"] [class*="sticky"] {
  background-color: var(--primary-red, #dc2626) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-cta a,
[data-theme="dark"] .mobile-cta button,
[data-theme="dark"] .mobile-sticky a,
[data-theme="dark"] .mobile-sticky-text,
[data-theme="dark"] .sticky-cta a {
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-cta svg,
[data-theme="dark"] .mobile-sticky svg,
[data-theme="dark"] .mobile-sticky-text svg,
[data-theme="dark"] .sticky-cta svg {
  fill: #ffffff !important;
}

/* ============================================
   ADDITIONAL CARD TYPES - DARK MODE
   ============================================ */

[data-theme="dark"] .resource-card,
[data-theme="dark"] .software-card,
[data-theme="dark"] .recommendation-card,
[data-theme="dark"] [class*="-card"]:not(.payment-card .card-logos):not(.service-card):not(.pricing-card):not(.testimonial-card) {
  background-color: var(--bg-secondary, #1a1a1a) !important;
  border-color: var(--border-color, #333333) !important;
  color: var(--text-primary, #f5f5f5);
}

[data-theme="dark"] .software-card h3,
[data-theme="dark"] .software-card h4,
[data-theme="dark"] .resource-card h2,
[data-theme="dark"] .resource-card h3,
[data-theme="dark"] [class*="-card"] h3,
[data-theme="dark"] [class*="-card"] h4 {
  color: var(--text-primary, #f5f5f5) !important;
}

[data-theme="dark"] .software-card p,
[data-theme="dark"] .resource-card p,
[data-theme="dark"] [class*="-card"] p {
  color: var(--text-secondary, #a0a0a0) !important;
}

/* ============================================
   HERO BAND AND TECH PARTNERS - DARK MODE
   ============================================ */

[data-theme="dark"] .hero-band,
[data-theme="dark"] .ready-cta-band,
[data-theme="dark"] .cta-band,
[data-theme="dark"] [class*="cta-section"]:not(.site-footer) {
  background-color: #111111 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .tech-partners-header h2,
[data-theme="dark"] .tech-partners-header p,
[data-theme="dark"] [class*="tech-partner"] h2,
[data-theme="dark"] [class*="tech-partner"] p {
  color: var(--text-primary, #f5f5f5) !important;
}

/* ============================================
   CALLOUTS AND INFO BOXES - DARK MODE
   ============================================ */

[data-theme="dark"] .callout,
[data-theme="dark"] .info-box,
[data-theme="dark"] .note,
[data-theme="dark"] .client-callout {
  background-color: var(--bg-secondary, #1a1a1a) !important;
  border-color: var(--border-color, #333333) !important;
  color: var(--text-primary, #f5f5f5) !important;
}

/* ============================================
   DOCUMENTS SECTION - DARK MODE
   ============================================ */

[data-theme="dark"] .documents-section,
[data-theme="dark"] .new-client-docs,
[data-theme="dark"] [class*="documents"] {
  background-color: var(--bg-secondary, #1a1a1a) !important;
}

/* ============================================
   MAIN HEADINGS - DARK MODE
   ============================================ */

[data-theme="dark"] main h1,
[data-theme="dark"] main h2,
[data-theme="dark"] main h3,
[data-theme="dark"] main h4,
[data-theme="dark"] main h5,
[data-theme="dark"] main h6,
[data-theme="dark"] section:not(.hero):not(.site-footer) h1,
[data-theme="dark"] section:not(.hero):not(.site-footer) h2,
[data-theme="dark"] section:not(.hero):not(.site-footer) h3,
[data-theme="dark"] section:not(.hero):not(.site-footer) h4 {
  color: var(--text-primary, #f5f5f5) !important;
}

/* Paragraphs and text - targeted, not overly broad */
[data-theme="dark"] main p,
[data-theme="dark"] main li,
[data-theme="dark"] section:not(.hero):not(.site-footer) p,
[data-theme="dark"] section:not(.hero):not(.site-footer) li {
  color: var(--text-secondary, #a0a0a0);
}

/* Override inline gray text tokens so dark mode stays readable */
[data-theme="dark"] h1[style*="color: var(--gray-9"],
[data-theme="dark"] h2[style*="color: var(--gray-9"],
[data-theme="dark"] h3[style*="color: var(--gray-9"],
[data-theme="dark"] h4[style*="color: var(--gray-9"],
[data-theme="dark"] h5[style*="color: var(--gray-9"],
[data-theme="dark"] h6[style*="color: var(--gray-9"] {
  color: var(--text-primary, #f5f5f5) !important;
}

[data-theme="dark"] p[style*="color: var(--gray-"],
[data-theme="dark"] li[style*="color: var(--gray-"],
[data-theme="dark"] span[style*="color: var(--gray-"],
[data-theme="dark"] div[style*="color: var(--gray-"] {
  color: var(--text-secondary, #a0a0a0) !important;
}

/* ============================================
   FOOTER WATERMARK - MORE VISIBLE IN DARK MODE
   ============================================ */

[data-theme="dark"] .site-footer::before {
  opacity: 0.05;
  filter: brightness(2);
}

/* ============================================
   NAVIGATION LINKS - DARK MODE
   ============================================ */

[data-theme="dark"] .nav-link {
  color: var(--text-primary, #f5f5f5) !important;
}

/* ============================================
   IMPORTANT: DO NOT STYLE THESE IN DARK MODE
   They are already dark by design:
   - .site-footer (dark background)
   - .hero-split sections (dark overlays)
   - Dark background sections
   ============================================ */

@font-face {
  font-family: 'Eurostile Extended';
  src: local('Eurostile Extended'), local('EurostileExtendedRegular'),
       url('/assets/fonts/eurostile-extended/eurostile-extended-regular.woff2') format('woff2'),
       url('/assets/fonts/eurostile-extended/eurostile-extended-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Eurostile Extended';
  src: local('Eurostile Extended Bold'), local('EurostileExtendedRegular'),
       url('/assets/fonts/eurostile-extended/eurostile-extended-regular.woff2') format('woff2'),
       url('/assets/fonts/eurostile-extended/eurostile-extended-regular.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--gray-600, #525252);
  background: var(--pure-white, #FFFFFF);
}

.no-scroll {
  overflow: hidden;
}

/* Container */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, 'Eurostile Extended', 'EurostileExtendedRegular', var(--font-sans));
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-6, 1.5rem) 0;
  color: var(--gray-900, #171717);
}

h1 {
  font-size: 3rem;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.875rem;
  color: var(--gray-800, #262626);
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-800, #262626);
}

@media (min-width: 768px) {
  h1 {
    font-size: 3.75rem;
  }
  h2 {
    font-size: 2.25rem;
  }
}

p {
  margin: 0 0 var(--space-4, 1rem) 0;
}

a {
  color: var(--brand-red, #E9051E);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--red-600, #DC2626);
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--pure-white, #FFFFFF);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--gray-200, #E5E5E5);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
}

.logo img {
  height: 40px;
  width: auto;
  transition: height 0.2s ease;
}

.site-header.scrolled .logo img {
  height: 36px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

body.nav-enhanced .main-nav {
  display: none;
}

@media (min-width: 1024px) {
  .main-nav,
  body.nav-enhanced .main-nav {
    display: flex;
    flex-direction: row;
  }
}

.nav-link {
  position: relative;
  font-weight: 600;
  color: var(--gray-700, #404040);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-red, #E9051E);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--brand-red, #E9051E);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:focus-visible {
  color: var(--brand-red, #E9051E);
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 6px;
  border-radius: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
}

.cta-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  font-weight: 700;
  color: var(--pure-white, #FFFFFF);
  background: var(--gradient-red, linear-gradient(135deg, #E9051E 0%, #DC2626 100%));
  border-radius: 12px;
  text-decoration: none;
  box-shadow: var(--shadow-red, 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2));
  transition: all 0.3s ease;
}

.cta-header:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-red-lg, 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3));
  color: var(--pure-white, #FFFFFF);
}

.cta-header:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 3px;
  box-shadow: var(--shadow-red-lg, 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3));
}

@media (max-width: 640px) {
  .cta-text {
    display: none;
  }

  .cta-header {
    padding: var(--space-3, 0.75rem);
  }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.mobile-menu-toggle span {
  width: 100%;
  height: 3px;
  background: var(--gray-900, #171717);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 4px;
  border-radius: 8px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Overlay */
.nav-overlay,
.menu-overlay,
.mobile-overlay,
.backdrop,
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--z-overlay);
}

.nav-overlay.active,
.menu-overlay.active,
.mobile-overlay.active,
.backdrop.active,
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.nav-enhanced .main-nav.mobile-open {
  z-index: var(--z-mobile-nav);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--pure-white, #FFFFFF);
  padding: var(--space-8, 2rem);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
}

@media (min-width: 1024px) {
  body.nav-enhanced .main-nav.mobile-open {
    display: flex;
    position: static;
    flex-direction: row;
    padding: 0;
    box-shadow: none;
  }

  .nav-overlay,
  .menu-overlay,
  .mobile-overlay,
  .backdrop,
  .mobile-menu-overlay {
    display: none;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  position: relative;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--space-24, 6rem) var(--space-6, 1.5rem) var(--space-20, 5rem);
  overflow: hidden;
  margin-top: 72px;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16, 4rem);
    padding: var(--space-32, 8rem) var(--space-12, 3rem);
  }
}

/* Hero background image positioning */
.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-hero, linear-gradient(135deg, #1E1E1E 0%, #2D2D2D 50%, #1E1E1E 100%));
  opacity: 0.03;
}

.hero > *:not(.hero-background) {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 640px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: var(--red-50, #FEF2F2);
  border: 1px solid var(--red-100, #FEE2E2);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-red, #E9051E);
  margin-bottom: var(--space-6, 1.5rem);
}

.hero-headline {
  font-size: 3rem;
  margin-bottom: var(--space-6, 1.5rem);
  color: var(--gray-900, #171717);
}

@media (min-width: 768px) {
  .hero-headline {
    font-size: 3.75rem;
  }
}

.hero-headline .highlight {
  position: relative;
  color: var(--brand-red, #E9051E);
}

.hero-subheadline {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--gray-600, #525252);
  margin-bottom: var(--space-8, 2rem);
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-12, 3rem);
}

@media (min-width: 640px) {
  .hero-cta-group {
    flex-direction: row;
  }
}

/* ============================================
   HERO UTILITIES
   ============================================ */

.hero-intro {
  font-size: 1.0625rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin-bottom: var(--space-8, 2rem);
}

/* Hero badge for dark backgrounds (inside hero-split) */
.hero-split .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.15);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-6, 1.5rem);
  border: none;
}

.hero-split .hero-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Light background badge for use outside hero */
.badge-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: var(--red-50, #FEF2F2);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-red, #E9051E);
}

.badge-light svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================
   STATS UTILITIES
   ============================================ */

.stat-unit {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--gray-500, #737373);
}

.stat-sublabel {
  font-size: 0.75rem;
  color: var(--gray-500, #737373);
  margin-top: var(--space-1, 0.25rem);
}

.hero-trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6, 1.5rem);
  padding-top: var(--space-8, 2rem);
  border-top: 1px solid var(--gray-200, #E5E5E5);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.trust-item strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900, #171717);
}

.trust-item span {
  font-size: 0.875rem;
  color: var(--gray-500, #737373);
}

/* ============================================
   BUTTONS / CTAs
   ============================================ */

.cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-8, 2rem);
  font-family: var(--font-display, 'Eurostile Extended', 'EurostileExtendedRegular', var(--font-sans));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--pure-white, #FFFFFF);
  background: var(--gradient-red, linear-gradient(135deg, #E9051E 0%, #DC2626 100%));
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-red, 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2));
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-red-lg, 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3));
  color: var(--pure-white, #FFFFFF);
}

.cta-primary:active {
  transform: translateY(0);
}

.cta-primary:focus-visible,
.cta-secondary:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 3px;
  box-shadow: var(--shadow-red-lg, 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3));
  color: var(--pure-white, #FFFFFF);
}

.cta-large {
  padding: var(--space-5, 1.25rem) var(--space-10, 2.5rem);
  font-size: 1.125rem;
}

.cta-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-8, 2rem);
  font-family: var(--font-display, 'Eurostile Extended', 'EurostileExtendedRegular', var(--font-sans));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--brand-red, #E9051E);
  background: transparent;
  border: 2px solid var(--brand-red, #E9051E);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-secondary:hover {
  color: var(--pure-white, #FFFFFF);
  background: var(--brand-red, #E9051E);
  transform: translateY(-2px);
  box-shadow: var(--shadow-red, 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2));
}

/* ============================================
   SERVICE CARDS
   ============================================ */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8, 2rem);
  padding: var(--space-20, 5rem) 0;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8, 2rem);
  background: var(--pure-white, #FFFFFF);
  border: 1px solid var(--gray-200, #E5E5E5);
  border-radius: 20px;
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-red, linear-gradient(135deg, #E9051E 0%, #DC2626 100%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
  border-color: var(--red-100, #FEE2E2);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.card-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 16px;
  margin-bottom: var(--space-6, 1.5rem);
  transition: background 0.3s ease, transform 0.3s ease;
}

.service-card:hover .card-icon-wrapper,
.service-card:focus-visible .card-icon-wrapper,
.service-card:focus-within .card-icon-wrapper {
  background: var(--primary-red, #dc2626);
  color: #ffffff;
  transform: scale(1.05);
}

.card-badge {
  position: absolute;
  top: var(--space-6, 1.5rem);
  right: var(--space-6, 1.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-red, #E9051E);
  background: var(--red-50, #FEF2F2);
  border: 1px solid var(--red-100, #FEE2E2);
  border-radius: 9999px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900, #171717);
  margin-bottom: var(--space-4, 1rem);
}

.card-description {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--gray-600, #525252);
  margin-bottom: var(--space-6, 1.5rem);
}

.card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8, 2rem) 0;
}

.card-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-600, #525252);
}

/* ============================================
   PAYMENT PAGE
   ============================================ */

.payment-method {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.payment-qr {
  background: var(--gray-50, #FAFAFA);
  padding: var(--space-6, 1.5rem);
  border-radius: 12px;
  margin: var(--space-6, 1.5rem) 0;
  text-align: center;
}

.payment-qr img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto var(--space-4, 1rem);
}

.qr-placeholder {
  width: 200px;
  height: 200px;
  background: var(--gray-200, #E5E5E5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4, 1rem);
  color: var(--gray-600, #525252);
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-8, 2rem);
  max-width: 1100px;
  margin: 0 auto;
  justify-items: stretch;
}

/* Center QR codes and content in payment cards */
.payment-methods-grid .service-card,
.payment-methods-grid .payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.payment-methods-grid .payment-qr img,
.payment-methods-grid img.payment-qr {
  display: block;
  margin: 0 auto;
  max-width: 180px;
  height: auto;
}

/* Payment icons - neutral background by default */
.payment-methods-grid .payment-method .card-icon-wrapper {
  background: #f3f4f6;
  color: inherit;
}

.payment-methods-grid .payment-method:hover .card-icon-wrapper,
.payment-methods-grid .payment-method:focus-visible .card-icon-wrapper,
.payment-methods-grid .payment-method:focus-within .card-icon-wrapper {
  background: #f3f4f6;
  transform: none;
}

/* :has() support is limited; explicit classes keep Apple/Bitcoin icons transparent */
.payment-method.payment-apple .card-icon-wrapper,
.payment-method.payment-bitcoin .card-icon-wrapper {
  background: transparent;
}

.payment-method.payment-apple:hover .card-icon-wrapper,
.payment-method.payment-apple:focus-visible .card-icon-wrapper,
.payment-method.payment-apple:focus-within .card-icon-wrapper,
.payment-method.payment-bitcoin:hover .card-icon-wrapper,
.payment-method.payment-bitcoin:focus-visible .card-icon-wrapper,
.payment-method.payment-bitcoin:focus-within .card-icon-wrapper {
  background: transparent;
}

@supports selector(:has(*)) {
  .payment-methods-grid .payment-method:has(img[alt*="Apple"]) .card-icon-wrapper,
  .payment-methods-grid .payment-method:has(img[alt*="Bitcoin"]) .card-icon-wrapper {
    background: transparent;
  }
}

/* Credit card payment option */
.payment-card-networks {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 1rem);
}

.payment-card-networks img {
  width: 60px;
  height: 24px;
  object-fit: contain;
}

.payment-card-networks .network-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700, #404040);
}

.payment-card-networks .network-separator {
  color: var(--gray-300, #D4D4D4);
}

.payment-card-info {
  background: transparent;
  padding: var(--space-4, 1rem);
}

.payment-card-description {
  font-size: 0.9rem;
  color: var(--gray-500, #737373);
  margin: 0;
}

.payment-note {
  text-align: center;
  color: var(--gray-600, #525252);
  margin-top: var(--space-6, 1.5rem);
  font-size: 0.95rem;
}

.callout-neutral {
  background: var(--gray-100, #F5F5F5);
  padding: var(--space-6, 1.5rem);
  border-radius: 12px;
  font-size: 1.0625rem;
  color: var(--gray-700, #404040);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-8, 2rem);
}

.callout-neutral p {
  margin: 0;
}

.callout-neutral a {
  color: var(--brand-red, #E9051E);
  text-decoration: underline;
}

/* Portal helpers */
.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-6, 1.5rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--gray-200, #E5E5E5);
  color: var(--gray-600, #525252);
  font-size: 0.875rem;
}

.security-badge .badge-icon {
  font-size: 1.25rem;
}

.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
  color: var(--gray-600, #525252);
  font-size: 0.75rem;
  font-weight: 600;
}

.powered-by span:first-child {
  color: var(--gray-500, #737373);
  font-weight: 500;
}

/* Pricing highlights */
.pricing-card {
  position: relative;
  background: var(--pure-white, #FFFFFF);
  border: 2px solid var(--gray-200, #E5E5E5);
  border-radius: 12px;
  padding: var(--space-8, 2rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card.featured {
  border-width: 3px;
  border-color: var(--brand-red, #E9051E);
  box-shadow: var(--shadow-red, 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2));
  transform: translateY(-4px);
}

/* Pricing card internal elements for consistent layout */
.pricing-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-2, 0.5rem);
}

.pricing-card-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-red, #E9051E);
  margin-bottom: var(--space-1, 0.25rem);
}

.pricing-card-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-600, #525252);
}

.pricing-card-description {
  font-size: 0.9375rem;
  color: var(--gray-600, #525252);
  margin-bottom: var(--space-6, 1.5rem);
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8, 2rem) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  flex-grow: 1;
}

.pricing-card-feature {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: start;
}

.pricing-card-feature svg {
  color: var(--success, #10B981);
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-card-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-red, #E9051E);
  color: var(--pure-white, #FFFFFF);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pricing-card {
    padding: var(--space-6, 1.5rem);
  }

  .pricing-card.featured {
    transform: none;
  }

  .badge-popular {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: var(--space-4, 1rem);
  }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  position: relative;
  padding: var(--space-20, 5rem) var(--space-6, 1.5rem) var(--space-12, 3rem);
  background: var(--gray-900, #171717);
  color: var(--pure-white, #FFFFFF);
  overflow: hidden;
}

/* Footer watermark logo - using pseudo-element */
.site-footer::before {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 400px;
  height: 400px;
  background-image: url('/assets/images/Logo%20Files/Main%20Logo/ML-C1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

/* Legacy footer watermark div (can be removed from HTML) */
.footer-watermark {
  display: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12, 3rem);
  margin-bottom: var(--space-12, 3rem);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.footer-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pure-white, #FFFFFF);
  margin-bottom: var(--space-2, 0.5rem);
}

.footer-phone {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--brand-red, #E9051E);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-phone:hover {
  color: var(--red-600, #DC2626);
}

.footer-email {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-email:hover {
  color: var(--pure-white, #FFFFFF);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-nav a:hover {
  color: var(--pure-white, #FFFFFF);
  padding-left: var(--space-2, 0.5rem);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding-top: var(--space-12, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-bottom p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ============================================
   FORMS
   ============================================ */

.contact-form {
  max-width: 600px;
  padding: var(--space-10, 2.5rem);
  background: var(--pure-white, #FFFFFF);
  border: 1px solid var(--gray-200, #E5E5E5);
  border-radius: 20px;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}

.form-group {
  position: relative;
  margin-bottom: var(--space-6, 1.5rem);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2, 0.5rem);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-700, #404040);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-4, 1rem);
  font-size: 1rem;
  color: var(--gray-900, #171717);
  background: var(--pure-white, #FFFFFF);
  border: 2px solid var(--gray-200, #E5E5E5);
  border-radius: 12px;
  transition: all 0.3s ease;
  outline: none;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--brand-red, #E9051E);
  box-shadow: 0 0 0 4px rgba(233, 5, 30, 0.1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit {
  width: 100%;
  padding: var(--space-4, 1rem) var(--space-8, 2rem);
  margin-top: var(--space-6, 1.5rem);
  font-family: var(--font-display, 'Eurostile Extended', 'EurostileExtendedRegular', var(--font-sans));
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pure-white, #FFFFFF);
  background: var(--gradient-red, linear-gradient(135deg, #E9051E 0%, #DC2626 100%));
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-red, 0 10px 25px -5px rgba(233, 5, 30, 0.3), 0 8px 10px -6px rgba(233, 5, 30, 0.2));
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-red-lg, 0 20px 40px -10px rgba(233, 5, 30, 0.4), 0 10px 20px -8px rgba(233, 5, 30, 0.3));
}

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

.error-message {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
  font-size: 0.875rem;
  color: var(--error, #EF4444);
}

.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
  border-radius: 12px;
  margin-top: var(--space-4, 1rem);
  font-size: 0.95rem;
}

.form-feedback[hidden] {
  display: none;
}

.form-feedback svg {
  flex-shrink: 0;
}

.form-feedback[data-state="success"] {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.form-feedback[data-state="error"] {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.section-padding {
  padding: var(--space-24, 6rem) 0;
}

@media (min-width: 768px) {
  .section-padding {
    padding: var(--space-40, 10rem) 0;
  }
}

.text-center {
  text-align: center;
}

.mb-4 { margin-bottom: var(--space-4, 1rem); }
.mb-6 { margin-bottom: var(--space-6, 1.5rem); }
.mb-8 { margin-bottom: var(--space-8, 2rem); }
.mb-12 { margin-bottom: var(--space-12, 3rem); }

.mt-4 { margin-top: var(--space-4, 1rem); }
.mt-6 { margin-top: var(--space-6, 1.5rem); }
.mt-8 { margin-top: var(--space-8, 2rem); }

/* Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-6, 1.5rem);
  z-index: 10000;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  background: var(--brand-red, #E9051E);
  color: var(--pure-white, #FFFFFF);
  text-decoration: none;
  border-radius: 8px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-6, 1.5rem);
}

*:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 2px;
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100, #F5F5F5);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400, #A3A3A3);
  border-radius: 6px;
  border: 2px solid var(--gray-100, #F5F5F5);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red, #E9051E);
}

/* ============================================
   VISUAL DESIGN ENHANCEMENTS
   Advanced animations, micro-interactions, and visual polish
   ============================================ */

/* Enhanced scroll animations with stagger */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   STAGGER CHILDREN ANIMATION
   ============================================ */

/* Base state – hidden */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* When container gets .in-view, animate children in */
.stagger-children.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for sequential animation */
.stagger-children.in-view > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.in-view > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.in-view > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.in-view > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.in-view > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.in-view > *:nth-child(6) { transition-delay: 0.6s; }

/* Fallback: If JS never fires, force visibility after 3s */
.stagger-children:not(.in-view) > * {
  animation: stagger-fallback 0s 3s forwards;
}

@keyframes stagger-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero background floating orb */
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -50px) scale(1.1); }
}

.hero-background::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(233, 5, 30, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

/* Image zoom on hover */
/* Button shine effect (already defined but ensuring it works) */
.cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.cta-primary:hover::before {
  left: 100%;
}

/* Enhanced card icon animation */
.card-icon-wrapper svg,
.card-icon {
  transition: color 0.3s ease, transform 0.3s ease;
}

/* IMPORTANT: Use !important to override inline style="color: var(--brand-red, #E9051E)" on SVGs */
.service-card:hover .card-icon-wrapper svg,
.service-card:hover .card-icon-wrapper svg[style],
.service-card:hover .card-icon,
.service-card:focus-visible .card-icon-wrapper svg,
.service-card:focus-visible .card-icon-wrapper svg[style],
.service-card:focus-visible .card-icon,
.service-card:focus-within .card-icon-wrapper svg,
.service-card:focus-within .card-icon-wrapper svg[style],
.service-card:focus-within .card-icon {
  color: var(--pure-white, #ffffff) !important;
}

/* Testimonial card special treatment */
.testimonial-card {
  position: relative;
  padding: var(--space-8, 2rem);
  background: var(--pure-white, #FFFFFF);
  border: 1px solid var(--gray-200, #E5E5E5);
  border-radius: 20px;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
  border-color: var(--red-100, #FEE2E2);
}

.testimonial-card.featured {
  background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
  border: 2px solid var(--red-100, #FEE2E2);
}

/* Hero headline gradient text */
.hero-headline {
  background: linear-gradient(135deg, var(--gray-900, #171717) 0%, var(--gray-700, #404040) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-headline .highlight {
  position: relative;
  color: var(--brand-red, #E9051E);
  -webkit-text-fill-color: var(--brand-red, #E9051E);
}

.hero-headline .highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-red, linear-gradient(135deg, #E9051E 0%, #DC2626 100%));
  border-radius: 2px;
}

/* Section header styling */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16, 4rem);
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: var(--space-4, 1rem);
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600, #525252);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.625;
}

/* Enhanced focus states for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(233, 5, 30, 0.1);
}

/* Responsive container max-widths */
.container-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.container-wide {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* Reduce motion overrides (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .stagger-children > *,
  .stagger-children.in-view > *,
  .hero-background::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Header login link */
.header-login-link {
  display: inline-block;
  color: var(--gray-700, #404040);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}

.header-login-link:hover {
  color: var(--brand-red, #E9051E);
}

@media (max-width: 768px) {
  .header-login-link {
    display: none;
  }
}

/* ================================
   Mobile Sticky Text Button
   ================================ */

.mobile-sticky-text {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background: var(--brand-red, #E9051E);
  color: white;
  padding: 14px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.mobile-sticky-text:hover {
  background: var(--red-700, #B91C1C);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.mobile-sticky-text svg {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .mobile-sticky-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ================================
   Hero Background Image Utilities
   ================================ */

.hero-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
}

.hero-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.hero-bg-image > * {
  position: relative;
  z-index: 2;
}

.hero-bg-image .hero-headline,
.hero-bg-image .hero-subheadline {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* ================================
   Personal Photo Styling
   ================================ */

.personal-photo {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================
   Hero Split Layout
   ================================ */

.hero-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
  min-height: calc(100vh - 72px);
  margin-top: 72px;
}

.hero-split-content {
  background: linear-gradient(135deg, var(--brand-black, #1E1E1E) 0%, var(--gray-900, #171717) 45%, var(--gray-800, #262626) 100%);
  padding: var(--space-12, 3rem) var(--space-6, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pure-white, #FFFFFF);
}

.hero-split-text {
  max-width: 600px;
  text-align: center;
}

.hero-split-text .hero-headline {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero-split-text .hero-subheadline {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.hero-split-text .hero-cta-group {
  justify-content: center;
}

.hero-split-image {
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  flex: 1 1 40%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark vignette on bottom edge for mobile (blends into gradient below) */
.hero-split-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(26, 26, 46, 0.8) 100%);
  pointer-events: none;
}

/* Desktop: Side-by-side layout */
@media (min-width: 768px) {
  .hero-split {
    flex-direction: row;
    min-height: calc(100vh - 72px);
    gap: 0;
  }

  .hero-split-content {
    flex: 0 0 60%;
    padding: var(--space-16, 4rem) var(--space-8, 2rem);
  }

  .hero-split-text {
    text-align: left;
  }

  .hero-split-text .hero-cta-group {
    justify-content: flex-start;
  }

  .hero-split-image {
    flex: 0 0 40%;
    min-height: auto;
  }

  /* Dark vignette on left edge for desktop (blends into gradient) */
  .hero-split-image::after {
    background: linear-gradient(to right, rgba(15, 52, 96, 0.9) 0%, transparent 40%);
  }
}

@media (min-width: 1024px) {
  .hero-split-content {
    padding: var(--space-20, 5rem) var(--space-12, 3rem);
  }
}

/* ================================
   Header Logo Switching
   ================================ */

.logo-stacked {
  display: none;
}

.logo-icon {
  display: block;
  height: 40px;
  width: auto;
}

@media (min-width: 768px) {
  .logo-stacked {
    display: block;
    height: 50px;
    width: auto;
  }

  .logo-icon {
    display: none;
  }
}

.site-header.scrolled .logo-stacked {
  height: 44px;
}

.site-header.scrolled .logo-icon {
  height: 36px;
}

/* ================================
   Technology Partner Logo Strip
   ================================ */

.tech-partners {
  background: var(--gray-50, #FAFAFA);
  padding: var(--space-12, 3rem) var(--space-6, 1.5rem);
  overflow: hidden;
}

.tech-partners h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-8, 2rem);
  color: var(--gray-700, #404040);
  font-weight: 500;
}

.tech-partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

.tech-partners-grid img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.tech-partners-grid img:hover,
.tech-partners-grid img:focus {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .tech-partners-grid img {
    height: 50px;
  }
}

/* Linux logo - ensure consistent sizing with other partner logos */
/* Use !important to override inline width/height attributes */
.tech-partners-grid .tech-logo-linux {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
}

/* Tooltip-style effect for partner logos */
.tech-partner-logo {
  position: relative;
  display: inline-block;
}

.tech-partner-logo::after {
  content: attr(data-name);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900, #171717);
  color: var(--pure-white, #FFFFFF);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.tech-partner-logo:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ================================
   About Page - Good/Not Lists
   ================================ */

.list-good {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.list-good li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  font-size: 1rem;
  color: var(--gray-700, #404040);
}

.list-good li::before {
  content: "✓";
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
}

.list-not {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.list-not li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  font-size: 1rem;
  color: var(--gray-700, #404040);
}

.list-not li::before {
  content: "✗";
  color: #ef4444;
  font-weight: 700;
  flex-shrink: 0;
}

/* ================================
   Google Reviews Badge Fix
   ================================ */

.google-reviews-badge img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* ================================
   FAQ Navigation - Safari Fix
   ================================ */

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.faq-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  margin: 0.25rem; /* Fallback for older Safari gap support */
  border-radius: 9999px;
  border: 2px solid var(--brand-red, #dc2626);
  background-color: var(--brand-red, #dc2626);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-nav a:hover,
.faq-nav a:focus-visible {
  background-color: #ffffff;
  color: var(--brand-red, #dc2626);
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 3px;
}

/* ================================
   Portal Navigation Bar
   ================================ */

.portal-nav-bar {
  background: var(--gray-100, #F5F5F5);
  border-bottom: 1px solid var(--gray-200, #E5E5E5);
  padding: var(--space-3, 0.75rem) 0;
  margin-top: 72px;
}

.portal-nav-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  justify-content: center;
}

.portal-nav-link {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: 6px;
  color: var(--gray-700, #404040);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.portal-nav-link:hover {
  background: var(--gray-200, #E5E5E5);
  color: var(--gray-900, #171717);
}

.portal-nav-link.active {
  background: var(--brand-red, #E9051E);
  color: #ffffff;
}

.portal-nav-link:focus-visible {
  outline: 3px solid var(--brand-red, #E9051E);
  outline-offset: 3px;
  color: var(--gray-900, #171717);
}

@media (min-width: 768px) {
  .portal-nav-bar .container {
    justify-content: flex-start;
  }
}

/* Adjust portal main when using site header */
.portal-wrapper .portal-main {
  padding-top: var(--space-8, 2rem);
  min-height: calc(100vh - 300px);
}

.portal-wrapper .site-footer {
  margin-top: auto;
}

/* ================================
   Reduced Motion & Print Support
   ================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .hero,
  .hero-split,
  .hero-split-content {
    background: #ffffff !important;
    color: var(--gray-900, #171717);
    min-height: auto;
  }

  .hero-split-image,
  .hero-background {
    display: none !important;
  }
}

/* ================================
   Contact Page Two-Column Layout
   ================================ */

.contact-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8, 2rem);
  align-items: start;
}

.contact-expect-column {
  position: sticky;
  top: 100px;
}

.contact-expect-box {
  background: var(--red-50, #FEF2F2);
  padding: var(--space-8, 2rem);
  border-radius: 12px;
  border: 1px solid var(--red-100, #FEE2E2);
}

.contact-expect-header {
  display: flex;
  align-items: start;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-6, 1.5rem);
}

.contact-expect-icon {
  color: var(--brand-red, #E9051E);
  flex-shrink: 0;
  margin-top: 4px;
}

.contact-expect-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-3, 0.75rem);
}

.contact-expect-intro {
  font-size: 1.0625rem;
  color: var(--gray-700, #404040);
  margin: 0;
}

.contact-expect-cards {
  display: grid;
  gap: var(--space-4, 1rem);
}

.contact-expect-card {
  background: var(--pure-white, #FFFFFF);
  padding: var(--space-5, 1.25rem);
  border-radius: 8px;
}

.contact-expect-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--space-2, 0.5rem);
  color: var(--brand-red, #E9051E);
}

.contact-expect-card p {
  font-size: 0.9375rem;
  color: var(--gray-700, #404040);
  margin: 0;
}

.contact-expect-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.contact-expect-list-item {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: start;
}

.contact-expect-list-icon {
  color: var(--success, #10B981);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-expect-list-text {
  font-size: 0.9375rem;
  color: var(--gray-700, #404040);
}

.contact-form-column {
  background: var(--pure-white, #FFFFFF);
  padding: var(--space-8, 2rem);
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
}

.contact-form-header {
  text-align: center;
  margin-bottom: var(--space-8, 2rem);
}

.contact-form-header h2 {
  margin-bottom: var(--space-2, 0.5rem);
}

.contact-form-header p {
  font-size: 1.125rem;
  color: var(--gray-600, #525252);
  margin: 0;
}

.contact-form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-6, 1.5rem);
  padding-top: var(--space-6, 1.5rem);
  border-top: 1px solid var(--gray-200, #E5E5E5);
}

.contact-form-footer img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-form-footer p {
  font-size: 0.9375rem;
  color: var(--gray-600, #525252);
  margin: 0;
  text-align: center;
}

@media (max-width: 900px) {
  .contact-two-column {
    grid-template-columns: 1fr;
  }

  .contact-expect-column {
    position: static;
    order: 2;
  }

  .contact-form-column {
    order: 1;
  }
}

/* ================================
   Remote Support Session Features
   ================================ */

.remote-session-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3, 0.75rem);
  background: var(--gray-50, #FAFAFA);
  padding: var(--space-5, 1.25rem);
  border-radius: 8px;
  margin-top: var(--space-4, 1rem);
}

.remote-session-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.remote-session-feature svg {
  color: var(--brand-red, #E9051E);
  flex-shrink: 0;
}

.remote-session-feature span {
  font-size: 0.9375rem;
  color: var(--gray-700, #404040);
  font-weight: 500;
}

@media (max-width: 600px) {
  .remote-session-features {
    grid-template-columns: 1fr;
  }
}

/* ================================
   Service Area Section
   ================================ */

.service-area-section {
  background: var(--gray-50, #FAFAFA);
}

.service-area-container {
  max-width: 700px;
  text-align: center;
}

.service-area-intro {
  font-size: 1.125rem;
  color: var(--gray-700, #404040);
  margin-bottom: var(--space-6, 1.5rem);
}

.service-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-8, 2rem);
}

.service-area-card {
  background: var(--pure-white, #FFFFFF);
  padding: var(--space-4, 1rem);
  border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
}

.service-area-card strong {
  display: block;
  color: var(--brand-red, #E9051E);
  margin-bottom: var(--space-2, 0.5rem);
}

.service-area-card p {
  font-size: 0.875rem;
  color: var(--gray-600, #525252);
  margin: 0;
}

.service-area-note {
  color: var(--gray-600, #525252);
  font-size: 0.875rem;
}

.service-area-note strong {
  color: var(--gray-700, #404040);
}

/* ================================
   Resource Card Enhancements
   ================================ */

.resource-card-icon {
  margin-bottom: var(--space-4, 1rem);
}

.resource-card-icon svg {
  color: var(--brand-red, #E9051E);
}

.software-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-600, #525252);
}

.software-list li {
  margin-bottom: var(--space-2, 0.5rem);
}

.software-list li:last-child {
  margin-bottom: 0;
}

/* ================================
   Checklist Print Styles
   ================================ */

.print-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: var(--gray-100, #F5F5F5);
  color: var(--gray-700, #404040);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: 8px;
  border: 1px solid var(--gray-300, #D4D4D4);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.print-button:hover {
  background: var(--gray-200, #E5E5E5);
  color: var(--gray-900, #171717);
}

.print-button svg {
  width: 18px;
  height: 18px;
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-8, 2rem);
}

.checklist {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6, 1.5rem);
}

.checklist-item {
  padding: var(--space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--gray-200, #E5E5E5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand-red, #E9051E);
}

/* ================================
   Logo Hover Animation
   ================================ */

.logo:hover .logo-stacked,
.logo:hover .logo-icon {
  animation: logo-pulse 0.6s ease-out 1;
}

@keyframes logo-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ================================
   CTA Breathing Animation
   ================================ */

/* Subtle breathing animation for primary CTAs */
@keyframes cta-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.cta-primary {
  animation: cta-breathe 6s ease-in-out infinite;
}

.cta-primary:hover,
.cta-primary:focus,
.cta-primary:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo-stacked,
  .logo:hover .logo-icon,
  .desktop-text-bubble-link {
    animation: none;
  }

  .cta-primary {
    animation: none;
  }
}

/* ================================
   Desktop Text Bubble
   ================================ */

.desktop-text-bubble {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

@media (min-width: 769px) {
  .desktop-text-bubble {
    display: block;
  }
}

.desktop-text-bubble-link {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  background: var(--brand-red, #E9051E);
  color: var(--pure-white, #FFFFFF);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: bubbleBreathing 3s ease-in-out infinite;
}

.desktop-text-bubble-link:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
  animation: none;
}

.desktop-text-bubble-link:focus-visible {
  outline: 3px solid var(--pure-white, #FFFFFF);
  outline-offset: 4px;
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
}

.desktop-text-bubble-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@keyframes bubbleBreathing {
  0%, 100% {
    box-shadow: 0 10px 40px -10px rgba(200, 16, 46, 0.4);
  }
  50% {
    box-shadow: 0 10px 50px -5px rgba(200, 16, 46, 0.6);
  }
}

@media print {
  /* Hide non-essential elements when printing */
  .site-header,
  .site-footer,
  .mobile-sticky-text,
  .desktop-text-bubble,
  .print-button,
  .cta-primary,
  .cta-secondary,
  .skip-link {
    display: none !important;
  }

  /* Reset background colors for print */
  body {
    background: white !important;
  }

  /* Optimize checklist for print */
  .checklist-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .checklist-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-900, #171717);
    border-radius: 3px;
    background: white;
  }

  /* Prevent page breaks inside list items */
  li {
    page-break-inside: avoid;
  }

  /* Keep headings with their content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  /* Avoid breaking inside cards */
  .service-card,
  .pricing-card {
    page-break-inside: avoid;
  }

  /* Ensure links are readable when printed */
  a {
    color: var(--gray-900, #171717) !important;
    text-decoration: underline !important;
  }

  /* Add URL after links for print */
  a[href^="http"]:after,
  a[href^="https"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--gray-600, #525252);
  }

  /* Don't show URLs for internal links */
  a[href^="/"]:after,
  a[href^="#"]:after {
    content: none;
  }

  /* Page margins */
  @page {
    margin: 1in;
  }

  /* Add print header */
  main::before {
    content: "NOCO TechWorks | nocotechworks.com | (970) 305-5125";
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-600, #525252);
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid var(--gray-300, #D4D4D4);
  }
}

/* ============================================
   PAYMENT PAGE GRID - PHASE 2 FIXES
   ============================================ */

/* On larger screens, use 4-column grid to naturally center bottom row */
@media (min-width: 900px) {
  .payment-methods-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Center final row when only two payment methods remain */
  .payment-methods-grid > :nth-last-child(-n+2) {
    grid-column: span 2;
  }
}

/* Payment card styling */
.payment-card {
  background: #ffffff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: stretch;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.payment-card h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--gray-900, #111827);
}

.payment-card p {
  color: var(--gray-600, #4b5563);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.payment-card .payment-note {
  font-size: 0.85rem;
  color: var(--gray-500, #6b7280);
  margin-top: 0.75rem;
}

/* Default neutral icon background */
.payment-card .payment-icon {
  width: 56px;
  height: 56px;
  background-color: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 12px;
}

.payment-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary-red, #dc2626);
}

/* Dark mode payment icon variant */
[data-theme="dark"] .payment-card .payment-icon {
  background-color: var(--bg-tertiary, #242424);
}

/* Apple Pay and Bitcoin icons with transparent background */
.payment-card:has(img[alt*="Apple"]) .payment-icon,
.payment-card:has(img[alt*="Bitcoin"]) .payment-icon {
  background-color: transparent;
}

/* Card network logos - consistent sizing */
.card-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.card-logos img {
  height: 24px !important;
  width: auto !important;
  max-width: 50px;
  object-fit: contain;
  background: transparent !important;
}

/* Ensure Amex has no gray background */
.card-logos img[alt*="Amex"],
.card-logos img[alt*="American Express"],
.card-logos img[alt*="AMEX"],
.payment-card-networks img[alt*="Amex"],
.payment-card-networks img[alt*="American Express"],
.payment-card-networks img[alt*="AMEX"] {
  background: transparent !important;
  padding: 0;
}

/* ============================================
   FORM INPUT CONSISTENCY - PHASE 3 FIXES
   ============================================ */

/* Light mode form inputs - consistent white background */
input,
textarea,
select {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-red, #dc2626);
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Portal / login specific */
.portal-form input,
.login-form input {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

/* Autofill normalization - fixes "one gray, one white" bug */
.portal-form input:-webkit-autofill,
.portal-form input:-webkit-autofill:hover,
.portal-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Dark mode autofill */
[data-theme="dark"] .portal-form input:-webkit-autofill,
[data-theme="dark"] .portal-form input:-webkit-autofill:hover,
[data-theme="dark"] .portal-form input:-webkit-autofill:focus,
[data-theme="dark"] .login-form input:-webkit-autofill,
[data-theme="dark"] .login-form input:-webkit-autofill:hover,
[data-theme="dark"] .login-form input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-tertiary, #242424) inset !important;
  -webkit-text-fill-color: var(--text-primary, #f5f5f5) !important;
}

[data-theme="dark"] label {
  color: var(--text-primary, #f5f5f5) !important;
}

/* ============================================
   LINUX LOGO FIX - PHASE 4
   ============================================ */

/* Force Linux logo to match other partner logos */
.tech-partners img[alt*="Linux"],
.tech-partners img[src*="linux"],
.tech-partners-grid img[alt*="Linux"],
.tech-partners-grid img[src*="linux"],
img.tech-logo-linux,
[class*="partners"] img[alt*="Linux"] {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 140px;
  image-rendering: auto;
}

@media (min-width: 768px) {
  .tech-partners img[alt*="Linux"],
  .tech-partners img[src*="linux"],
  .tech-partners-grid img[alt*="Linux"],
  .tech-partners-grid img[src*="linux"],
  img.tech-logo-linux,
  [class*="partners"] img[alt*="Linux"] {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
}

/* ============================================
   RESOURCES PAGE - BUTTON OVERFLOW FIX (PHASE 5)
   ============================================ */

/* Resource and recommendation buttons - allow text wrapping */
.recommendation-card .cta-secondary,
.resource-card .cta-secondary {
  white-space: normal;
  text-align: center;
  word-break: break-word;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  display: inline-block;
  min-width: 120px;
}

/* ============================================
   LOGO SWAP FOR DARK MODE
   ============================================ */

/* White logo hidden by default */
.logo-white {
  display: none;
}

/* In dark mode, hide color logo and show white logo */
[data-theme="dark"] .logo-color {
  display: none;
}

[data-theme="dark"] .logo-white {
  display: block;
}

/* ========================================
   DARK MODE FIXES - Round 4
   ======================================== */

/* Final CTA Section */
[data-theme="dark"] .cta-section,
[data-theme="dark"] section.cta-band,
[data-theme="dark"] .cta-banner {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .cta-section h2,
[data-theme="dark"] .cta-section p,
[data-theme="dark"] .cta-banner h2,
[data-theme="dark"] .cta-banner p {
  color: #f5f5f5 !important;
}

/* CRITICAL: All CTA button text must be white in BOTH themes */
.cta-primary,
.cta-primary span,
.cta-primary * {
  color: #ffffff !important;
}

[data-theme="dark"] .cta-primary,
[data-theme="dark"] .cta-primary span,
[data-theme="dark"] .cta-primary * {
  color: #ffffff !important;
}

/* Explicit dark mode CTA background (reinforce red) */
[data-theme="dark"] .cta-primary {
  background-color: var(--primary-red, #dc2626) !important;
}

/* Secondary CTA in dark mode */
[data-theme="dark"] .cta-secondary {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
}

[data-theme="dark"] .cta-secondary:hover {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* Tech Partner Section */
[data-theme="dark"] .tech-partners,
[data-theme="dark"] .partners-section,
[data-theme="dark"] .technology-partners {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] .tech-partners h2,
[data-theme="dark"] .tech-partners h3,
[data-theme="dark"] .tech-partners p,
[data-theme="dark"] .partners-section h2,
[data-theme="dark"] .partners-section p {
  color: #f5f5f5 !important;
}

/* Mobile Sticky CTA */
[data-theme="dark"] .mobile-sticky-cta,
[data-theme="dark"] .sticky-cta {
  background-color: #dc2626 !important;
}

[data-theme="dark"] .mobile-sticky-cta a,
[data-theme="dark"] .mobile-sticky-cta span,
[data-theme="dark"] .sticky-cta a,
[data-theme="dark"] .sticky-cta span {
  color: #ffffff !important;
}

/* ========================================
   MOBILE RESPONSIVENESS - Round 4
   ======================================== */

/* Removed: html/body max-width: 100vw — conflicts with R4.8 container margins */

/* Prevent header/footer overflow */
.site-header,
.site-footer {
  max-width: 100%;
  overflow-x: visible;
}

@media (max-width: 768px) {
  /* Fix grid sections that overflow */
  .stats-grid,
  .numbers-grid,
  .by-the-numbers,
  .service-cards,
  .cards-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    overflow-x: visible;
  }

  /* Ensure cards don't cause overflow */
  .card,
  .service-card,
  .stat-card,
  .number-card,
  .feature-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Removed: Section max-width: 100vw — conflicts with R4.8 container margins */

  /* Side-by-side layouts stack */
  .two-column,
  .split-layout,
  .service-split,
  .dual-cards {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* By the Numbers section */
  .by-the-numbers .stats-container,
  .numbers-section .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .stat-item,
  .number-stat {
    width: 100%;
    text-align: center;
  }

  /* Service cards */
  .service-cards-container,
  .services-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .service-card {
    width: 100%;
  }
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Mobile sticky CTA - prevent content overlap */
@media (max-width: 768px) {
  main {
    padding-bottom: 80px;
  }

  footer {
    padding-bottom: 80px;
  }
}

/* ========================================
   PAYMENT CARD LOGOS - Round 4
   ======================================== */

/* Payment card network logos - consistent sizing */
.card-logos img,
.payment-card .card-networks img,
.payment-method .card-logos img {
  height: 24px !important;
  width: auto !important;
  max-width: 50px !important;
  object-fit: contain !important;
  vertical-align: middle;
  background: transparent !important;
}

.card-logos img[alt*="Amex"],
.card-logos img[alt*="American Express"],
.card-logos img[alt*="amex"] {
  background: transparent !important;
  padding: 0 !important;
}

/* ========================================
   HOLIDAY PROMO BANNER
   NOTE: Moved to Round 4.6 section at end of file
   ======================================== */

/* ========================================
   ABOUT PAGE - PERSONAL SECTION
   ======================================== */

/* Center personal section on wide screens */
.human-section {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

[data-theme="dark"] .human-section {
  border-bottom-color: #374151;
}

/* ========================================
   ABOUT PAGE PHOTOS - 3 PHOTO GRID
   ======================================== */

[data-theme="dark"] {
  --about-photo-card-bg: #374151;
  --about-photo-card-shadow: 0 4px 12px rgba(0,0,0,0.40);
}

.personal-photos {
  display: grid;
  grid-template-columns: var(--about-photos-columns);
  gap: 1.25rem;
  margin: 2rem auto;
  max-width: var(--about-photos-max-width);
  justify-content: center;
  justify-items: center;
}

@media (max-width: 640px) {
  body {
    --about-photos-columns: 1fr;
    --about-photos-max-width: 250px;
  }
}

.photo-card {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--about-photo-card-shadow);
  aspect-ratio: 1 / 1;
  background: var(--about-photo-card-bg);
  width: 100%;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Headshot - focus on face, slight zoom */
.photo-headshot img {
  object-position: center 20%;
  transform: scale(1.05);
}

/* Maple photo - zoom in more on center */
.photo-maple img {
  object-position: center center;
  transform: scale(1.20);
}

/* Amber photo - zoom in on top half (faces) */
.photo-amber img {
  object-position: center 30%;
  transform: scale(1.15);
}

.hobbies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.hobby-item {
  background: #f9fafb;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
}

[data-theme="dark"] .hobby-item {
  background: #242424;
  color: #f5f5f5;
}

/* Credential badge */
.credential-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
  margin: 2rem 0;
  max-width: 450px;
}

.credential-badge img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.credential-badge span {
  font-size: 0.95rem;
  color: #374151;
  font-weight: 500;
}

[data-theme="dark"] .credential-badge {
  background: #242424;
}

[data-theme="dark"] .credential-badge span {
  color: #d1d5db;
}

@media (max-width: 480px) {
  .credential-badge {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}

/* ========================================
   PORTAL SECURITY BADGE - Round 4
   ======================================== */

.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 1rem;
}

.security-badge .lock-icon {
  width: 14px;
  height: 14px;
}

.cloudflare-badge {
  height: 18px;
  width: auto;
}

.security-divider {
  color: #d1d5db;
  margin: 0 0.25rem;
}

[data-theme="dark"] .security-badge {
  color: #9ca3af;
}

/* ========================================
   DARK MODE - FINAL CTA SECTION
   ======================================== */

/* Background + text for final CTA band */
[data-theme="dark"] [data-section="final-cta"] {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

[data-theme="dark"] [data-section="final-cta"] h1,
[data-theme="dark"] [data-section="final-cta"] h2,
[data-theme="dark"] [data-section="final-cta"] h3,
[data-theme="dark"] [data-section="final-cta"] p,
[data-theme="dark"] [data-section="final-cta"] .section-subtitle {
  color: #f9fafb !important;
}

/* Primary CTA button – red with white text */
[data-theme="dark"] [data-section="final-cta"] .cta-primary,
[data-theme="dark"] [data-section="final-cta"] .cta-primary span {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Secondary CTA button – white outline in dark mode */
[data-theme="dark"] [data-section="final-cta"] .cta-secondary {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
}

[data-theme="dark"] [data-section="final-cta"] .cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ========================================
   RESOURCES PAGE - MALWAREBYTES / CTA FIX
   ======================================== */

/* Ensure software cards can grow with content */
.software-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Wrap descriptions and labels properly */
.software-card p,
.software-card .software-type {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* CTAs inside software cards */
.software-card a[class*="cta"],
.software-card .cta-secondary,
.software-card .cta-primary {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  padding: 0.625rem 0.875rem !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  line-height: 1.25 !important;
}

/* ========================================
 * ROUND 4.3 – Regression Fixes & Overrides
 * Added: 2025-11-26
 * Purpose: Fix mobile nav, horizontal overflow, dark mode,
 *          footer layout, form inputs, and Safari issues
 * ----------------------------------------
 * Phase 0: Mobile Navigation
 * Phase 1: Mobile Horizontal Overflow
 * Phase 2: Form Inputs (Light Mode)
 * Phase 3: Mobile Footer
 * Phase 4: Desktop Dark Mode
 * Phase 5: Header/Promo Banner
 * Phase 6: Desktop Footer
 * Phase 7: About Page Photos
 * Phase 8: Card Overflow
 * Phase 9: Check/X Icon Alignment
 * Phase 10: Safari-Specific Fixes
 * Phase 11: Sticky CTA Overlap
 * ======================================== */

/* Removed: Legacy PHASE 0 mobile-nav/overlay block — R4.8 is sole source of truth for nav */

/* ========================================
   PHASE 1: Mobile Horizontal Overflow Fix
   Content is being cut off because grids use
   2+ columns on mobile viewports
   ======================================== */

@media (max-width: 767px) {
  /* Force single column on phones */
  .cards-grid,
  .service-cards,
  .dual-service-cards,
  .steps-grid,
  .process-steps,
  .footer-grid,
  .footer-columns,
  .pricing-cards,
  .features-grid,
  .stats-grid,
  .numbers-grid,
  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .card,
  .service-card,
  .step-card,
  .pricing-card,
  .feature-card,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
  }

  /* Removed: Section max-width: 100vw — conflicts with R4.8 container margins */

  /* Fix credibility section 2-column grid */
  .section-padding > .container > div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* Tablet: allow 2-column grids where space permits */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards-grid:not(.force-single-column),
  .service-cards:not(.force-single-column),
  .dual-service-cards:not(.force-single-column),
  .steps-grid:not(.force-single-column),
  .process-steps:not(.force-single-column),
  .pricing-cards:not(.force-single-column),
  .services-grid:not(.force-single-column) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* Footer stays stacked on tablet for readability */
  .footer-grid,
  .footer-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ========================================
   PHASE 2: Form Inputs Light Mode Fix
   Inputs showing grey/black instead of white
   ======================================== */

/* Force white inputs in light mode */
html:not([data-theme="dark"]) input[type="text"],
html:not([data-theme="dark"]) input[type="email"],
html:not([data-theme="dark"]) input[type="tel"],
html:not([data-theme="dark"]) input[type="number"],
html:not([data-theme="dark"]) input[type="password"],
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) .form-input {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder {
  color: #6b7280 !important;
}

html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) textarea:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) .form-input:focus {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Fix autofill styling in light mode */
html:not([data-theme="dark"]) input:-webkit-autofill,
html:not([data-theme="dark"]) input:-webkit-autofill:hover,
html:not([data-theme="dark"]) input:-webkit-autofill:focus,
html:not([data-theme="dark"]) textarea:-webkit-autofill {
  -webkit-text-fill-color: #1f2937 !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

/* ========================================
   PHASE 3: Mobile Footer Fix
   Footer columns cut off on mobile
   ======================================== */

@media (max-width: 1023px) {
  .site-footer {
    padding: 3rem 1rem !important;
  }

  .footer-grid,
  .footer-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  .footer-column {
    width: 100% !important;
    text-align: center !important;
  }

  /* Ensure all columns visible */
  .footer-column:nth-child(n) {
    display: block !important;
    visibility: visible !important;
  }

  .footer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ========================================
   PHASE 4: Desktop Dark Mode Fix
   Logo invisible, hero text unreadable, CTAs invisible
   ======================================== */

/* Exempt header logo from any dark mode filters */
[data-theme="dark"] .site-header .logo img,
[data-theme="dark"] .site-header .logo-color,
[data-theme="dark"] .site-header .logo-white,
[data-theme="dark"] .site-header .logo-stacked,
[data-theme="dark"] .site-header .logo-icon {
  filter: none !important;
  opacity: 1 !important;
}

/* Force hero text to be white and readable */
[data-theme="dark"] .hero-headline,
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero-split h1,
[data-theme="dark"] .hero-split-text h1,
[data-theme="dark"] .hero-bg-image .hero-headline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

[data-theme="dark"] .hero-subheadline,
[data-theme="dark"] .hero p,
[data-theme="dark"] .hero-split p,
[data-theme="dark"] .hero-split-text p,
[data-theme="dark"] .hero-bg-image .hero-subheadline {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* Lock CTA button colors in dark mode */
[data-theme="dark"] .cta-primary,
[data-theme="dark"] a.cta-primary,
[data-theme="dark"] button.cta-primary {
  background-color: #dc2626 !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

[data-theme="dark"] .cta-primary span,
[data-theme="dark"] .cta-primary .cta-text {
  color: #ffffff !important;
}

[data-theme="dark"] .cta-secondary:not(:hover) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   PHASE 5: Header/Promo Banner Fix
   NOTE: Promo banner rules moved to Round 4.6 section at end of file
   ======================================== */

/* Header must not create scrollbars */
.site-header {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.header-container {
  overflow: visible !important;
}

/* ========================================
   PHASE 6: Desktop Footer Grid Fix
   Restore 4-column grid on desktop
   ======================================== */

@media (min-width: 1024px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  .footer-columns {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  .footer-column {
    width: auto !important;
    text-align: left !important;
  }

  .site-footer {
    padding: 5rem 1.5rem 3rem !important;
  }
}

/* ========================================
   PHASE 7: About Page Photos Fix
   Photos stacked on desktop, wrong order
   ======================================== */

@media (min-width: 641px) {
  .personal-photos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    max-width: 650px !important;
  }

  /* Explicit ordering - headshot first */
  .photo-card.photo-headshot { order: 1 !important; }
  .photo-card.photo-maple { order: 2 !important; }
  .photo-card.photo-amber { order: 3 !important; }
}

/* Safari photo fix */
@supports (-webkit-touch-callout: none) {
  .photo-card {
    min-height: 180px !important;
  }

  .photo-card img {
    min-height: 100% !important;
  }
}

/* ========================================
   PHASE 8: Card Overflow Fix
   Malwarebytes and other cards overflow container
   ======================================== */

.software-card,
.resource-card,
.recommendation-card {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.software-card h3,
.resource-card h3,
.recommendation-card h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.software-card p,
.resource-card p,
.recommendation-card p {
  font-size: clamp(0.875rem, 2vw, 1rem) !important;
  word-break: break-word !important;
}

/* Button text can wrap */
.software-card .cta-primary,
.software-card .cta-secondary,
.software-card a[class*="btn"],
.resource-card .cta-primary,
.resource-card .cta-secondary,
.recommendation-card .cta-primary,
.recommendation-card .cta-secondary {
  max-width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  text-align: center !important;
}

/* ========================================
   PHASE 9: Check/X Icon Alignment Fix
   Icons shifted left
   ======================================== */

.list-good,
.list-not {
  list-style: none !important;
  padding: 0 !important;
}

.list-good li,
.list-not li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.list-good li::before,
.list-not li::before {
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  text-align: center !important;
  margin-top: 0.1rem !important;
}

/* ========================================
   PHASE 10: Safari-Specific Fixes
   Header whitespace, photo layout issues
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* Remove header gap when promo is hidden */
  .promo-banner.hidden + .site-header,
  body:not(:has(.promo-banner:not(.hidden))) .site-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Removed: Safari min-height: auto override — conflicts with R4.8 header height */

  /* Safari nav drawer rendering */
  .main-nav.mobile-open,
  #mainNav.mobile-open {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Fix Safari flexbox issues */
  .hero-split {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
  }
}

/* ========================================
   PHASE 11: Sticky CTA Overlap Fix
   The sticky CTA overlaps bottom content on mobile
   ======================================== */

@media (max-width: 1023px) {
  /* Add bottom padding to prevent overlap */
  main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-footer,
  footer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Sticky CTA positioning */
.mobile-sticky-text,
.mobile-sticky-cta,
.sticky-cta,
.floating-cta {
  bottom: env(safe-area-inset-bottom, 0px) !important;
  max-width: 360px !important;
  z-index: 1001 !important;
}

/* Center CTA on small screens */
@media (max-width: 480px) {
  .mobile-sticky-text,
  .mobile-sticky-cta,
  .sticky-cta,
  .floating-cta {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 2rem) !important;
  }
}

/* ========================================
   ADDITIONAL FIXES: Dark Mode Header Logo
   Ensure logo visibility in dark mode
   ======================================== */

/* In dark mode, make sure the white logo displays */
[data-theme="dark"] .site-header .logo-color {
  display: none !important;
}

[data-theme="dark"] .site-header .logo-white {
  display: block !important;
}

/* Icon logo in dark mode */
[data-theme="dark"] .site-header .logo-icon {
  filter: brightness(0) invert(1) !important;
}

/* On desktop, show stacked logo properly in dark mode */
@media (min-width: 768px) {
  [data-theme="dark"] .site-header .logo-white.logo-stacked {
    display: block !important;
  }

  [data-theme="dark"] .site-header .logo-icon {
    display: none !important;
  }
}

/* On mobile, only show icon logo */
@media (max-width: 767px) {
  [data-theme="dark"] .site-header .logo-stacked {
    display: none !important;
  }

  [data-theme="dark"] .site-header .logo-icon {
    display: block !important;
  }
}

/* ========================================
   ADDITIONAL FIXES: Dark Mode Header Links
   ======================================== */

[data-theme="dark"] .site-header .nav-link {
  color: #e5e7eb !important;
}

[data-theme="dark"] .site-header .nav-link:hover,
[data-theme="dark"] .site-header .nav-link:focus {
  color: #ffffff !important;
}

[data-theme="dark"] .header-login-link {
  color: #e5e7eb !important;
}

[data-theme="dark"] .header-login-link:hover {
  color: #f87171 !important;
}

/* ========================================
   END ROUND 4.3 FIXES
   ======================================== */

/* ========================================================================
 * ROUND 4.4 — FINAL FIXES (Merged Super Command)
 * Date: 2025-11-27
 *
 * This section uses ACTUAL selectors confirmed by codebase audit.
 * Do not modify selectors without re-auditing the HTML.
 *
 * Fixes:
 *   A. Promo banner ghost space
 *   B. Header scrollbar on hover
 *   C. Mobile nav drawer not appearing
 *   D. Dark mode complete overhaul
 *   E. Footer spacing (desktop + mobile)
 *   F. Portal login top spacing
 *   G. About page photo order + positioning
 *   H. Resources page card overflow
 *   I. Mobile horizontal overflow
 * ======================================================================== */

/* --------------------------------------------
 * A. PROMO BANNER — NOTE: Moved to Round 4.6 section at end of file
 * -------------------------------------------- */

/* --------------------------------------------
 * B. HEADER — No scrollbars ever
 * -------------------------------------------- */

.site-header,
.site-header *,
.header-container,
.main-nav,
.main-nav.mobile-nav,
#mainNav,
.header-actions {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Remove any max-height that could cause scroll */
.site-header,
.header-container {
  max-height: none !important;
  height: auto !important;
}

/* Hide scrollbars if they somehow appear */
.site-header::-webkit-scrollbar,
.header-container::-webkit-scrollbar,
.main-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Prevent nav links from triggering overflow on hover */
.nav-link {
  white-space: nowrap;
}

/* --------------------------------------------
 * C. MOBILE NAV — Force drawer to appear
 * -------------------------------------------- */

@media (max-width: 1023px) {

  /* Default state: nav hidden on mobile */
  .main-nav.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #0a0a0a;
    z-index: 9998;
    flex-direction: column;
    padding: 100px 1.5rem 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* OPEN STATE — This is the critical fix */
  .main-nav.mobile-nav.mobile-open,
  #mainNav.mobile-open,
  .main-nav.mobile-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background-color: #0a0a0a !important; /* Overrides Round 4.3 white drawer */
    top: 0 !important; /* Overrides Round 4.3 offset */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important; /* Fallback for older Safari */
    height: 100dvh !important; /* Modern viewport units */
    max-height: none !important;
  }

  /* Nav links inside open drawer */
  .main-nav.mobile-nav.mobile-open .nav-link,
  #mainNav.mobile-open .nav-link,
  .main-nav.mobile-open .nav-link {
    display: block !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    width: 100% !important;
  }

  .main-nav.mobile-open .nav-link:hover,
  .main-nav.mobile-open .nav-link:focus {
    color: #ef4444 !important;
  }

  /* Hamburger button always visible on mobile */
  .mobile-menu-toggle,
  #mobileMenuToggle {
    display: flex !important;
    z-index: 10000 !important;
    position: relative;
  }

  /* Body scroll lock when nav is open */
  body.nav-open,
  body.menu-open,
  body.mobile-nav-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    touch-action: none !important; /* Prevent background touch scroll when nav open */
  }
}

/* Desktop: show nav normally */
@media (min-width: 1024px) {
  .main-nav.mobile-nav,
  #mainNav {
    display: flex !important;
    position: static;
    background: transparent;
    padding: 0;
    height: auto;
    width: auto;
    flex-direction: row;
  }

  .mobile-menu-toggle,
  #mobileMenuToggle {
    display: none !important;
  }
}

/* --------------------------------------------
 * D. DARK MODE — Complete overhaul
 * -------------------------------------------- */

/* === HEADER IN DARK MODE === */
html[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header {
  background-color: #0f0f0f !important;
  border-bottom: 1px solid #1f1f1f !important;
}

/* Removed: Dark mode header sizing — conflicts with R4.8 header height consistency */

/* === LOGO IN DARK MODE === */
/* Show white logo, hide color logo */
html[data-theme="dark"] .logo-color {
  display: none !important;
}

html[data-theme="dark"] .logo-white {
  display: block !important;
}

/* If using filter approach instead, DON'T invert */
html[data-theme="dark"] .logo img {
  filter: none !important;
}

/* === NAV LINKS IN DARK MODE === */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] #mainNav a,
html[data-theme="dark"] .header-login-link {
  color: #e5e5e5 !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .header-login-link:hover {
  color: #ffffff !important;
}

/* Active nav link */
html[data-theme="dark"] .nav-link[aria-current="page"],
html[data-theme="dark"] .nav-link.active {
  color: #ef4444 !important;
}

/* === HEADER CTA BUTTON (Text Me) === */
html[data-theme="dark"] .cta-header {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

/* === GENERAL BUTTONS IN DARK MODE === */

/* Primary buttons: red bg, WHITE text */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .cta-primary,
html[data-theme="dark"] [class*="btn-red"],
html[data-theme="dark"] .button-primary {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

/* Secondary/outline buttons: transparent, white border, white text */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .cta-secondary,
html[data-theme="dark"] .button-secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover {
  background-color: #ffffff !important;
  color: #0f0f0f !important;
}

/* === TEXT ME / STICKY CTA BUTTONS === */
html[data-theme="dark"] .mobile-sticky-text,
html[data-theme="dark"] .cta-floating,
html[data-theme="dark"] [class*="text-me"],
html[data-theme="dark"] a[href^="sms:"] {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

/* === FOOTER IN DARK MODE === */
html[data-theme="dark"] .site-footer {
  background-color: #0a0a0a !important;
}

html[data-theme="dark"] .footer-heading {
  color: #ffffff !important;
}

/* ALL footer links should be red (including Make a Payment) */
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .footer-column a,
html[data-theme="dark"] .footer-nav a,
html[data-theme="dark"] .footer-phone,
html[data-theme="dark"] .footer-email,
html[data-theme="dark"] .site-footer a[href*="payment"] {
  color: #ef4444 !important;
}

html[data-theme="dark"] .site-footer a:hover,
html[data-theme="dark"] .footer-column a:hover {
  color: #f87171 !important;
}

/* === FORM INPUTS IN DARK MODE === */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-control {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #3f3f3f !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9ca3af !important;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important; /* Match dark input bg */
  -webkit-text-fill-color: #ffffff !important; /* Prevent yellow text on autofill */
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

/* === CARDS IN DARK MODE === */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="-card"]:not(.photo-card) {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

/* === BODY/TEXT IN DARK MODE === */
html[data-theme="dark"] body {
  background-color: #0a0a0a !important;
  color: #e5e5e5 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not(.icon):not([class*="promo"]) {
  color: #e5e5e5 !important;
}

/* === MOBILE NAV IN DARK MODE === */
@media (max-width: 1023px) {
  html[data-theme="dark"] .main-nav.mobile-open,
  html[data-theme="dark"] #mainNav.mobile-open {
    background-color: #0a0a0a !important;
  }

  html[data-theme="dark"] .main-nav.mobile-open .nav-link {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }
}

/* --------------------------------------------
 * E. FOOTER SPACING
 * -------------------------------------------- */

/* Desktop: 4-column with reasonable gaps */
@media (min-width: 1024px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }

  .footer-column {
    padding: 0 !important;
  }
}

/* Mobile: tighter link spacing */
@media (max-width: 767px) {
  .site-footer {
    padding: 2rem 1rem !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .footer-column {
    text-align: center !important;
    margin-bottom: 0 !important;
  }

  /* Tighter spacing between links */
  .footer-nav a,
  .footer-column a {
    display: block !important;
    padding: 0.35rem 0 !important;
    margin: 0 !important;
  }

  .footer-heading {
    margin-bottom: 0.5rem !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* --------------------------------------------
 * F. PORTAL LOGIN SPACING
 * -------------------------------------------- */

.login-wrapper {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure dark mode doesn't change spacing */
html[data-theme="dark"] .login-wrapper {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

@media (max-height: 600px) {
  .login-wrapper {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* --------------------------------------------
 * G. ABOUT PAGE PHOTOS
 * -------------------------------------------- */

/* Container: flex column on mobile, row on desktop */
.personal-photos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Headshot always first */
.photo-card.photo-headshot {
  order: -1 !important;
}

.photo-card.photo-maple {
  order: 0;
}

.photo-card.photo-amber {
  order: 1;
}

/* Jesse+Amber photo: anchor to TOP to show faces */
.photo-card.photo-amber img,
.photo-amber img {
  object-fit: cover !important;
  object-position: top center !important;
}

/* Desktop: 3 columns */
@media (min-width: 768px) {
  .personal-photos {
    flex-direction: row !important;
    align-items: flex-start;
  }

  .personal-photos .photo-card {
    flex: 1;
  }
}

/* --------------------------------------------
 * H. RESOURCES PAGE — Card text overflow
 * -------------------------------------------- */

/* Force word wrap on all card titles */
.services-grid h3,
.services-grid h4,
.service-card h3,
.service-card h4,
[class*="card"] h3,
[class*="card"] h4 {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Card content containment */
.service-card,
[class*="card"] {
  overflow: hidden !important;
  max-width: 100% !important;
}

.service-card *,
[class*="card"] * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Specific fix for long words */
.service-card p,
.service-card span,
[class*="card"] p {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* About page bullet lists - avoid awkward mid-word breaks */
.about-highlights li {
  word-break: normal;
  hyphens: none;
}

/* --------------------------------------------
 * I. MOBILE — No horizontal overflow
 * Removed: Container max-width reset — conflicts with R4.8 container margins
 * -------------------------------------------- */

@media (max-width: 767px) {
  /* Force single column on specific grids only */
  .services-grid,
  .tech-partners-grid,
  .payment-methods-grid,
  .hobbies-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Grid children: full width */
  .services-grid > *,
  .tech-partners-grid > *,
  .payment-methods-grid > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet: 2 columns okay */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ========================================
   END ROUND 4.4 FIXES
   ======================================== */

/* ========================================================================
 * ROUND 4.5 — FINAL FIXES (Enhanced)
 * Date: 2025-11-27
 * Fixes: Mobile nav z-index, dark mode contrast, portal login, word breaks
 * Hardened: Scoped selectors, explicit overlay handling, no attribute sniffing
 * ======================================================================== */

/* Removed: R4.5 Mobile Nav Section A — conflicts with R4.8 nav handling */

/* ----------------------------------------
 * B: Dark Mode Header — Must work on ALL viewport sizes including mobile
 * ---------------------------------------- */

/* Header background — NO media query wrapper, applies everywhere */
html[data-theme="dark"] .site-header {
  background-color: #0a0a0a !important;
  border-bottom-color: #1f1f1f !important;
}

html[data-theme="dark"] .header-container {
  background-color: #0a0a0a !important;
}

/* Logo swap — hide color, show white — NO media query */
html[data-theme="dark"] .logo-color {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html[data-theme="dark"] .logo-white {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If logo-white doesn't exist as separate element, use filter as fallback */
html[data-theme="dark"] .site-logo img:not(.logo-white),
html[data-theme="dark"] .logo:not(.logo-white) img {
  filter: brightness(0) invert(1) !important;
}

/* Nav links in header — dark mode */
html[data-theme="dark"] .site-header .nav-link,
html[data-theme="dark"] .header-container .nav-link,
html[data-theme="dark"] .main-nav .nav-link {
  color: #e5e5e5 !important;
}

html[data-theme="dark"] .site-header .nav-link:hover,
html[data-theme="dark"] .main-nav .nav-link:hover {
  color: #ffffff !important;
}

/* Mobile-specific dark header overrides — in case mobile styles reset it */
@media (max-width: 1023px) {
  html[data-theme="dark"] .site-header {
    background-color: #0a0a0a !important;
  }

  html[data-theme="dark"] .header-container {
    background-color: #0a0a0a !important;
  }

  /* Force logo swap on mobile */
  html[data-theme="dark"] .logo-color {
    display: none !important;
  }

  html[data-theme="dark"] .logo-white {
    display: block !important;
  }

  /* Mobile nav drawer in dark mode */
  html[data-theme="dark"] #mainNav.mobile-open,
  html[data-theme="dark"] .main-nav.mobile-nav.mobile-open {
    background-color: #0a0a0a !important;
  }

  /* Dark mode toggle button visibility */
  html[data-theme="dark"] .mobile-menu-toggle,
  html[data-theme="dark"] #mobileMenuToggle {
    color: #ffffff !important;
  }

  html[data-theme="dark"] .mobile-menu-toggle svg,
  html[data-theme="dark"] .mobile-menu-toggle span {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* ----------------------------------------
 * C: Dark Mode Text — Scoped to main content areas
 * ---------------------------------------- */

/* Main content text */
html[data-theme="dark"] main,
html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] .page-content p,
html[data-theme="dark"] .page-content li {
  color: #e5e5e5 !important;
}

/* Headings should be pure white */
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main h5,
html[data-theme="dark"] main h6,
html[data-theme="dark"] .page-content h1,
html[data-theme="dark"] .page-content h2,
html[data-theme="dark"] .page-content h3 {
  color: #ffffff !important;
}

/* Specific card types — explicit, not wildcard */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .info-card {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .service-card li,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .pricing-card li,
html[data-theme="dark"] .testimonial-card p,
html[data-theme="dark"] .payment-card p,
html[data-theme="dark"] .method-card p,
html[data-theme="dark"] .stat-card p,
html[data-theme="dark"] .feature-card p {
  color: #e5e5e5 !important;
}

/* Hero section */
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .hero-text,
html[data-theme="dark"] .hero p {
  color: #e5e5e5 !important;
}

/* Section subtitles */
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .lead {
  color: #d1d5db !important;
}

/* ----------------------------------------
 * D: Hero secondary button — red border/text in light mode
 * ---------------------------------------- */
.hero-actions .btn-secondary,
.hero-actions .btn-outline {
  background-color: transparent !important;
  border: 2px solid #dc2626 !important;
  color: #dc2626 !important;
}

.hero-actions .btn-secondary:hover,
.hero-actions .btn-outline:hover {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

/* Dark mode version — white border/text */
html[data-theme="dark"] .hero-actions .btn-secondary,
html[data-theme="dark"] .hero-actions .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .hero-actions .btn-secondary:hover,
html[data-theme="dark"] .hero-actions .btn-outline:hover {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}

/* ----------------------------------------
 * E: Portal Login — Fix dimensions and spacing
 * ---------------------------------------- */
.login-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 4rem !important;
  padding-bottom: 3rem !important;
  min-height: calc(100vh - 200px);
}

.login-card {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode login card */
html[data-theme="dark"] .login-card {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .login-card p,
html[data-theme="dark"] .login-card .login-header {
  color: #e5e5e5 !important;
}

/* Mobile login — remove min-height constraint */
@media (max-width: 767px) {
  .login-wrapper {
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .login-card {
    max-width: 90% !important;
    padding: 1.5rem !important;
  }
}

/* ----------------------------------------
 * F: Contact Form — Dark mode fixes
 * ---------------------------------------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #1f1f1f !important;
  color: #ffffff !important;
  border: 1px solid #3f3f3f !important;
  background-image: none !important;
}

/* Fix select dropdown arrow and remove grid pattern */
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 36px !important;
}

/* Placeholder text */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9ca3af !important;
}

/* Focus state */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* Autofill fix */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1f1f1f inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* ----------------------------------------
 * G: Footer — Consistent link colors (no href sniffing)
 * ---------------------------------------- */

/* Light mode: all footer links same grey */
.site-footer a,
.footer-column a,
.footer-nav a {
  color: #6b7280 !important;
  transition: color 0.2s ease !important;
}

.site-footer a:hover,
.footer-column a:hover,
.footer-nav a:hover {
  color: #dc2626 !important;
}

/* Dark mode: all footer links red */
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .footer-column a,
html[data-theme="dark"] .footer-nav a {
  color: #ef4444 !important;
}

html[data-theme="dark"] .site-footer a:hover,
html[data-theme="dark"] .footer-column a:hover,
html[data-theme="dark"] .footer-nav a:hover {
  color: #f87171 !important;
}

/* Footer headings */
.footer-heading,
.footer-column h3,
.footer-column h4 {
  color: #374151 !important;
}

html[data-theme="dark"] .footer-heading,
html[data-theme="dark"] .footer-column h3,
html[data-theme="dark"] .footer-column h4 {
  color: #ffffff !important;
}

/* Phone number in footer — keep it distinct */
.site-footer .phone-number,
.footer-column .phone-number {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

/* ----------------------------------------
 * H: Mobile Footer — Tighter link spacing
 * ---------------------------------------- */
@media (max-width: 767px) {
  .footer-grid {
    gap: 1.25rem !important;
  }

  .footer-column {
    margin-bottom: 0.25rem !important;
  }

  /* Tighter spacing between links */
  .footer-nav a,
  .footer-column a {
    padding: 0.2rem 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .footer-nav li,
  .footer-column li {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Category headers */
  .footer-heading,
  .footer-column h3,
  .footer-column h4 {
    margin-bottom: 0.4rem !important;
    margin-top: 0 !important;
  }
}

/* ----------------------------------------
 * I: Word Breaking — Prevent awkward mid-word breaks
 * ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* Mobile: ensure headings don't break mid-word */
@media (max-width: 767px) {
  h1, h2, h3, h4 {
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* Allow natural wrapping but not hyphenation */
  .section-title,
  .card-title,
  .stat-title,
  .stat-value {
    white-space: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* ----------------------------------------
 * J: About Page Photos — Class-based selectors only
 * ---------------------------------------- */

/* Amber photo — show top of image (faces visible) */
.photo-card.photo-amber img {
  object-fit: cover !important;
  object-position: top center !important;
}

/* Maple photo — current zoom is good */
.photo-card.photo-maple img {
  object-fit: cover !important;
  object-position: center 25% !important;
}

/* Personal photos container */
.personal-photos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  justify-content: center !important;
}

/* Mobile: stack photos, ensure Amber faces visible */
@media (max-width: 767px) {
  .personal-photos {
    flex-direction: column !important;
    align-items: center !important;
  }

  .photo-card {
    width: 100% !important;
    max-width: 400px !important;
  }

  .photo-card.photo-amber img {
    object-position: top center !important;
  }
}

/* ----------------------------------------
 * K: Business Page Mobile — Scoped to avoid affecting other pages
 * ---------------------------------------- */
@media (max-width: 767px) {
  /* Stats/benefits grids that appear on business pages */
  .why-matters-grid,
  .benefits-grid,
  .stats-row,
  .business-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    overflow-x: visible !important;
  }

  .why-matters-grid > *,
  .benefits-grid > *,
  .stats-row > *,
  .business-stats > *,
  .stat-card,
  .benefit-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Removed: main/.page-content max-width: 100vw — conflicts with R4.8 container margins */
}

/* ----------------------------------------
 * L: Pricing Badge — Ensure fully visible
 * Removed: .package-card (orphan selector, doesn't exist in markup)
 * ---------------------------------------- */
.pricing-card {
  position: relative !important;
  overflow: visible !important;
}

/* Target the badge more specifically */
.pricing-card .badge,
.pricing-card .popular-badge,
.pricing-badge {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  padding: 0.25rem 1rem !important;
  font-size: 0.75rem !important;
  border-radius: 9999px !important;
}

@media (max-width: 767px) {
  .pricing-card {
    margin-top: 1.5rem !important;
    overflow: visible !important;
  }

  .pricing-card .badge,
  .pricing-card .popular-badge,
  .pricing-badge {
    top: -10px !important;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.75rem !important;
  }
}

/* ----------------------------------------
 * M: Payment Cards — Prevent text overflow
 * ---------------------------------------- */
.payment-card,
.method-card {
  overflow: hidden !important;
}

.payment-card a,
.method-card a,
.payment-card p,
.method-card p {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* Long URLs specifically */
.payment-card a[href*="paypal"],
.payment-card a[href*="venmo"],
.method-card a {
  font-size: 0.8rem !important;
  word-break: break-all !important;
}

@media (max-width: 767px) {
  .payment-card a,
  .method-card a {
    font-size: 0.75rem !important;
  }
}

/* ----------------------------------------
 * N: Headshot feature — appears early on about page
 * ---------------------------------------- */
.headshot-feature {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.headshot-feature .photo-card {
  max-width: 300px;
}

@media (max-width: 767px) {
  .headshot-feature .photo-card {
    max-width: 250px;
  }
}

/* ----------------------------------------
 * O: Education badge styling
 * ---------------------------------------- */
.education-badge {
  text-align: center;
  margin: 1.5rem 0;
}

.education-badge img {
  max-width: 200px;
  height: auto;
}

/* ========================================
   END ROUND 4.5 FIXES
   ======================================== */

/* ========================================================================
 * ROUND 4.6 — PROMO BANNER FIX
 * Date: 2024-11
 * Fixes: Promo banner visibility, positioning below fixed header
 * ======================================================================== */

/* Promo Banner — Fixed below header with 8px gap */
.promo-banner,
#promo-banner {
  position: fixed !important;
  top: calc(var(--header-height) + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.625rem 3rem 0.625rem 1rem !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Promo banner links */
.promo-banner a,
#promo-banner a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.promo-banner a:hover,
#promo-banner a:hover {
  text-decoration: none !important;
}

/* Promo content container */
.promo-banner .promo-content,
#promo-banner .promo-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* Promo CTA button */
.promo-banner .promo-cta,
#promo-banner .promo-cta {
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.promo-banner .promo-cta:hover,
#promo-banner .promo-cta:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  text-decoration: none !important;
}

/* Fine print text */
.promo-banner .promo-fine-print,
#promo-banner .promo-fine-print {
  font-size: 0.75rem !important;
  opacity: 0.9 !important;
}

/* Dismiss button — must be tappable */
.promo-banner .promo-close,
.promo-banner .dismiss-btn,
.promo-banner .close-btn,
.promo-banner button,
#promo-banner .promo-close,
#promo-banner button {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.promo-banner button:hover,
#promo-banner button:hover,
.promo-banner .promo-close:hover,
#promo-banner .promo-close:hover {
  opacity: 1 !important;
}

/* Hidden/Dismissed state — completely gone */
.promo-banner.hidden,
.promo-banner.dismissed,
#promo-banner.hidden,
#promo-banner.dismissed {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Content push-down — ONE mechanism only (padding on main) */
body:not(.promo-dismissed) main {
  padding-top: var(--promo-height) !important;
}

/* When promo is dismissed, remove padding */
body.promo-dismissed main {
  padding-top: 0 !important;
}

/* Mobile positioning with 8px gap */
@media (max-width: 1023px) {
  .promo-banner,
  #promo-banner {
    top: calc(var(--header-height-mobile) + 8px) !important;
    padding: 0.5rem 3rem 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .promo-banner .promo-content,
  #promo-banner .promo-content {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .promo-banner .promo-fine-print,
  #promo-banner .promo-fine-print {
    font-size: 0.7rem !important;
  }
}

/* iPhone notch / safe area handling with 8px gap */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    .promo-banner,
    #promo-banner {
      top: calc(var(--header-height-mobile) + 8px + env(safe-area-inset-top, 0px)) !important;
    }
  }
}

/* Very small screens */
@media (max-width: 375px) {
  .promo-banner,
  #promo-banner {
    font-size: 0.75rem !important;
    padding: 0.5rem 2.5rem 0.5rem 0.5rem !important;
  }
}

/* Dark mode */
html[data-theme="dark"] .promo-banner,
html[data-theme="dark"] #promo-banner {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .promo-banner a,
html[data-theme="dark"] #promo-banner a {
  color: #ffffff !important;
}

/* Ensure header stays above promo */
.site-header {
  z-index: 1000 !important;
}

/* ========================================
   END ROUND 4.6 PROMO BANNER FIX
   ======================================== */

/* ========================================
   ROUND 4.7 — MONSTER FIX
   Mobile nav, promo banner, overflow, dark mode
   Date: 2025-11-28
   ======================================== */

/* Removed: R4.7 Mobile Nav Nuclear Fix — conflicts with R4.8 nav handling */

/* ========================================
   4.7-B: PROMO BANNER MOBILE VISIBILITY (P0 CRITICAL)
   ======================================== */

@media (max-width: 1023px) {
  .promo-banner:not(.hidden):not(.dismissed),
  #promo-banner:not(.hidden):not(.dismissed) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ========================================
   4.7-C: BUSINESS PAGE MOBILE OVERFLOW FIX (P0 CRITICAL)
   ======================================== */

@media (max-width: 767px) {
  /* Prevent content overflow on services page */
  .services-grid,
  .pricing-grid,
  .features-grid {
    overflow-x: visible !important;
  }

  /* Ensure cards don't overflow */
  .service-card,
  .pricing-card,
  .feature-card {
    max-width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
  }

  /* Fix any wide inline styles */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Removed: 4.7-D Horizontal Scroll Fix — conflicts with R4.8 container margins */

/* ========================================
   4.7-F: MOST POPULAR BADGE FIX
   ======================================== */

.pricing-badge,
.badge-popular,
.most-popular-badge,
[class*="popular"] {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--brand-red, #E9051E) !important;
  color: #ffffff !important;
  padding: 0.25rem 1rem !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  z-index: 10 !important;
}

/* ========================================
   4.7-H: HOME PAGE DARK MODE FIXES
   ======================================== */

html[data-theme="dark"] .hero-split-text h1,
html[data-theme="dark"] .hero-headline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .hero-subheadline {
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .stat-unit,
html[data-theme="dark"] .stat-sublabel {
  color: var(--gray-400) !important;
}

html[data-theme="dark"] .service-card {
  background: var(--gray-800) !important;
  border-color: var(--gray-700) !important;
}

html[data-theme="dark"] .card-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .card-description {
  color: var(--gray-300) !important;
}

/* Dark mode for credibility section */
html[data-theme="dark"] .section-padding[style*="background: var(--pure-white)"] {
  background: var(--gray-900) !important;
}

html[data-theme="dark"] [style*="background: var(--gray-50)"] {
  background: var(--gray-800) !important;
}

/* ========================================
   4.7-I: WORD BREAKING FIXES
   ======================================== */

.footer-email,
.footer-phone,
a[href^="mailto:"],
a[href^="tel:"] {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* ========================================
   4.7-J: ABOUT PAGE HEADSHOT FIX
   ======================================== */

.photo-headshot img,
.headshot-feature img {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

@media (max-width: 767px) {
  .photo-headshot img,
  .headshot-feature img {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
  }
}

/* ========================================
   4.7-K: DU LOGO FIX
   ======================================== */

.education-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-align: center !important;
}

.education-badge img {
  max-width: 200px !important;
  height: auto !important;
}

/* ========================================
   4.7-L: PORTAL 44PX GAP FIX
   ======================================== */

.login-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove any gap between header and login content */
body:has(.login-wrapper) main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ========================================
   4.7.1: PORTAL FALLBACK (no :has() support)
   ======================================== */

/* Fallback for browsers without :has() support */
.portal-page main,
body.portal-page main,
.login-page main,
body.login-page main,
.portal-wrapper main,
body.portal-wrapper main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure portal pages never show promo padding */
[class*="portal"] main,
[class*="login"] main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ========================================
   4.7-M: PROMO BANNER POLISH
   ======================================== */

.promo-banner .promo-content,
#promo-banner .promo-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 1rem !important;
}

/* Ensure promo text is readable */
.promo-banner .promo-text,
#promo-banner .promo-text {
  font-size: 0.9rem !important;
}

@media (max-width: 767px) {
  .promo-banner .promo-text,
  #promo-banner .promo-text {
    font-size: 0.8rem !important;
    text-align: center !important;
  }
}

/* ========================================
 4.7-V: FOOTER HEADING UPDATE (residential terminology)
   Applied via CSS content replacement where possible
   ======================================== */

/* Note: HTML changes required for terminology updates */

/* ========================================
   4.7-G: PAYPAL URL OVERFLOW FIX
   ======================================== */

/* Payment card URL overflow fix */
.payment-option a,
.payment-card a,
[class*="payment"] a[href*="paypal"] {
  word-break: break-all;
  overflow-wrap: break-word;
}

.payment-option,
.payment-card,
[class*="payment-method"] {
  overflow: hidden;
}

@media (max-width: 767px) {
  .payment-option a,
  .payment-card a,
  [class*="payment"] a[href*="paypal"] {
    font-size: 0.75rem;
  }
}

/* ========================================
   END ROUND 4.7 MONSTER FIX
   ======================================== */

/* ========================================================================
 * ROUND 4.8 — HEADER, LAYOUT & MOBILE POLISH
 * Date: 2024-11-29
 * Fixes: Mobile nav clickability, dark mode header height, promo banner,
 *        container margins, pricing cards, about headshot
 * ======================================================================== */

/* ----------------------------------------
 * 4.8-A: HEADER HEIGHT CONSISTENCY
 * Problem: Dark mode rules at lines 6241-6244 changed padding/min-height
 * Fix: Override to ensure header height is IDENTICAL in light and dark mode
 * ---------------------------------------- */

.site-header {
  min-height: var(--header-height, 72px);
  box-sizing: border-box;
}

/* Dark mode: ONLY change colors, NEVER size */
html[data-theme="dark"] .site-header {
  background-color: #0f0f0f !important;
  border-bottom-color: #1f1f1f !important;
  /* Explicitly maintain same sizing as light mode */
  min-height: var(--header-height, 72px) !important;
  padding-top: inherit;
  padding-bottom: inherit;
}

@media (max-width: 1023px) {
  .site-header {
    min-height: var(--header-height-mobile, 72px);
  }

  html[data-theme="dark"] .site-header {
    min-height: var(--header-height-mobile, 72px) !important;
  }
}

/* ----------------------------------------
 * 4.8-B: PROMO BANNER POSITIONING
 * Ensure banner sits below header with 8px gap
 * ---------------------------------------- */

.promo-banner,
#promo-banner {
  position: fixed !important;
  top: calc(var(--header-height, 72px) + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
}

@media (max-width: 1023px) {
  .promo-banner,
  #promo-banner {
    top: calc(var(--header-height-mobile, 72px) + 8px) !important;
  }
}

/* ----------------------------------------
 * 4.8-C: MOBILE NAV FIX
 * Problem: Nav drawer was forcing dark background even in light mode
 * Problem: pointer-events issues blocking link clicks
 * Fix: Theme-aware backgrounds, proper pointer-events hierarchy
 * ---------------------------------------- */

@media (max-width: 1023px) {
  /* Reset the overlay to allow clicks to close nav */
  .nav-overlay.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    pointer-events: auto !important;
  }

  /* Nav drawer - sits above overlay */
  .main-nav.mobile-open,
  .main-nav.mobile-nav.mobile-open,
  #mainNav.mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: calc(var(--header-height-mobile, 72px) + 1.5rem) 1.5rem 2rem !important;
    overflow-y: auto !important;
    /* LIGHT MODE: white background */
    background-color: #ffffff !important;
  }

  /* DARK MODE: dark background for nav drawer */
  html[data-theme="dark"] .main-nav.mobile-open,
  html[data-theme="dark"] .main-nav.mobile-nav.mobile-open,
  html[data-theme="dark"] #mainNav.mobile-open {
    background-color: #0a0a0a !important;
  }

  /* Nav links - must be clickable with proper tap targets */
  .main-nav.mobile-open .nav-link,
  .main-nav.mobile-nav.mobile-open .nav-link,
  #mainNav.mobile-open .nav-link {
    display: block !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 1rem 0.5rem !important;
    min-height: 48px !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    /* LIGHT MODE: dark text */
    color: var(--gray-900, #171717) !important;
    border-bottom: 1px solid var(--gray-200, #e5e5e5) !important;
  }

  .main-nav.mobile-open .nav-link:last-child {
    border-bottom: none !important;
  }

  .main-nav.mobile-open .nav-link:hover,
  .main-nav.mobile-open .nav-link:focus,
  .main-nav.mobile-open .nav-link:active {
    color: var(--brand-red, #dc2626) !important;
    background-color: var(--gray-50, #f9fafb) !important;
  }

  /* DARK MODE: light text on dark background */
  html[data-theme="dark"] .main-nav.mobile-open .nav-link,
  html[data-theme="dark"] .main-nav.mobile-nav.mobile-open .nav-link,
  html[data-theme="dark"] #mainNav.mobile-open .nav-link {
    color: #ffffff !important;
    border-bottom-color: #333333 !important;
  }

  html[data-theme="dark"] .main-nav.mobile-open .nav-link:hover,
  html[data-theme="dark"] .main-nav.mobile-open .nav-link:focus {
    background-color: #1a1a1a !important;
    color: #ef4444 !important;
  }

  /* Hamburger button - always on top */
  .mobile-menu-toggle,
  #mobileMenuToggle {
    z-index: 10000 !important;
    pointer-events: auto !important;
  }

  /* Hamburger lines - ensure visibility in both modes */
  .mobile-menu-toggle span {
    background-color: var(--gray-900, #171717) !important;
  }

  html[data-theme="dark"] .mobile-menu-toggle span {
    background-color: #ffffff !important;
  }

  /* Mobile sticky CTA - hide when nav is open */
  body.mobile-nav-open .mobile-sticky-text,
  body.mobile-nav-open .mobile-sticky-cta,
  body.mobile-nav-open .floating-cta,
  body.nav-open .mobile-sticky-text {
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ----------------------------------------
 * 4.8-D: CONTAINER MARGINS RESTORATION
 * Ensure content has proper side gutters on all viewports
 * ---------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ----------------------------------------
 * 4.8-E: ABOUT PAGE HEADSHOT FIX
 * Ensure circular headshot with proper sizing
 * Updated: 150px desktop, 130px mobile (≤45% viewport height on small devices)
 * ---------------------------------------- */

.headshot-feature {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 1.5rem auto !important;
}

.headshot-feature .photo-card,
.photo-card.photo-headshot {
  width: 150px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.headshot-feature .photo-card img,
.photo-card.photo-headshot img {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  display: block !important;
}

@media (max-width: 767px) {
  .headshot-feature .photo-card,
  .photo-card.photo-headshot {
    width: 130px !important;
    max-width: 130px !important;
  }

  .headshot-feature .photo-card img,
  .photo-card.photo-headshot img {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
  }
}

/* ----------------------------------------
 * 4.8-F: MOBILE PRICING CARDS
 * Stack vertically on mobile, no horizontal scroll
 * ---------------------------------------- */

@media (max-width: 767px) {
  /* Force single column on mobile for inline grid pricing sections */
  .section-padding [style*="grid-template-columns: repeat(auto-fit"],
  .section-padding [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Pricing cards - full width on mobile */
  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Ensure badge is visible */
  .pricing-card {
    position: relative !important;
    overflow: visible !important;
  }

  /* Badge styling on mobile */
  .badge-popular,
  .pricing-card .badge-popular {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin-bottom: 1rem !important;
  }

  /* No horizontal scroll on pricing tables */
  [style*="overflow-x: auto"] {
    overflow-x: visible !important;
  }

  /* Table responsiveness */
  table {
    font-size: 0.85rem !important;
  }

  table th,
  table td {
    padding: 0.5rem !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* ----------------------------------------
 * 4.8-G: PAYPAL URL CONTAINMENT
 * Ensure long URLs don't overflow their cards
 * ---------------------------------------- */

.service-card.payment-method,
.payment-option,
.payment-card {
  overflow: hidden !important;
}

.service-card.payment-method a[href*="paypal"],
.payment-option a[href*="paypal"],
.payment-card a[href*="paypal"] {
  display: block !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  font-size: 0.85rem !important;
}

@media (max-width: 767px) {
  .service-card.payment-method a[href*="paypal"],
  .payment-option a[href*="paypal"],
  .payment-card a[href*="paypal"] {
    font-size: 0.75rem !important;
  }
}

/* ----------------------------------------
 * 4.8-H: PREVENT HORIZONTAL SCROLL
 * Global fix to prevent any horizontal overflow
 * Removed: max-width: 100vw — conflicts with container margins
 * ---------------------------------------- */

html, body {
  overflow-x: auto;
}

main {
  overflow-x: auto;
}

/* ========================================
   END ROUND 4.8 FIXES
   ======================================== */

/* ========================================================================
 * ROUND 4.9 — COMPREHENSIVE FIX
 * Date: 2025-11-29
 * Fixes: Mobile nav links, dark mode contrast, promo banner, mobile grids,
 *        badge clipping, headshot, word breaks, testimonials, footer colors
 * ======================================================================== */

/* ----------------------------------------
 * 4.9-A: MOBILE NAV FIX (P0 CRITICAL)
 * Problem: Links not tappable even though menu opens
 * Root cause: Full-screen overlay approach needs proper pointer-events chain
 * ---------------------------------------- */

@media (max-width: 1023px) {
  /* Overlay - behind nav, catches clicks to close */
  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .nav-overlay.active {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Nav Panel - SLIDE FROM RIGHT (not full screen) */
  .main-nav.mobile-nav,
  #mainNav.mobile-nav,
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
    visibility: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(var(--header-height-mobile, 72px) + 1.5rem) 1.5rem 2rem !important;
    /* Light mode background */
    background-color: #ffffff !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
  }

  /* Dark mode nav background */
  html[data-theme="dark"] .main-nav.mobile-nav,
  html[data-theme="dark"] #mainNav.mobile-nav,
  html[data-theme="dark"] .main-nav {
    background-color: #0a0a0a !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5) !important;
  }

  /* OPEN STATE - slide in */
  .main-nav.mobile-open,
  .main-nav.mobile-nav.mobile-open,
  #mainNav.mobile-open {
    left: auto !important;
    right: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* NAV LINKS - MUST be clickable */
  .main-nav .nav-link,
  .main-nav.mobile-nav .nav-link,
  #mainNav .nav-link,
  .main-nav.mobile-open .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    min-height: 48px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    text-decoration: none !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--gray-200, #e5e5e5) !important;
    /* Light mode text */
    color: var(--gray-900, #171717) !important;
  }

  .main-nav .nav-link:last-child,
  .main-nav.mobile-open .nav-link:last-child {
    border-bottom: none !important;
  }

  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus,
  .main-nav .nav-link:active {
    color: var(--brand-red, #dc2626) !important;
    background-color: var(--gray-50, #f9fafb) !important;
  }

  /* Dark mode nav links */
  html[data-theme="dark"] .main-nav .nav-link,
  html[data-theme="dark"] .main-nav.mobile-open .nav-link,
  html[data-theme="dark"] #mainNav .nav-link {
    color: #ffffff !important;
    border-bottom-color: #333333 !important;
  }

  html[data-theme="dark"] .main-nav .nav-link:hover,
  html[data-theme="dark"] .main-nav .nav-link:focus {
    background-color: #1a1a1a !important;
    color: #ef4444 !important;
  }

  /* Hamburger - always on top */
  .mobile-menu-toggle,
  #mobileMenuToggle {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
  }

  /* Hamburger lines visibility */
  .mobile-menu-toggle span {
    display: block !important;
    background-color: var(--gray-900, #171717) !important;
  }

  html[data-theme="dark"] .mobile-menu-toggle span {
    background-color: #ffffff !important;
  }

  /* X icon when active - ensure visible */
  .mobile-menu-toggle.active span {
    background-color: var(--gray-900, #171717) !important;
  }

  html[data-theme="dark"] .mobile-menu-toggle.active span {
    background-color: #ffffff !important;
  }
}

/* ----------------------------------------
 * 4.9-B: DARK MODE TEXT CONTRAST (P0 CRITICAL)
 * Problem: Card headings, tech section, review text invisible in dark mode
 * ---------------------------------------- */

/* Card headings - MUST be white in dark mode */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .service-card h4,
html[data-theme="dark"] .pricing-card h3,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] [class*="card"] h3,
html[data-theme="dark"] [class*="card"] h4,
html[data-theme="dark"] [class*="card"] h5,
html[data-theme="dark"] blockquote {
  color: #ffffff !important;
}

/* Section titles */
html[data-theme="dark"] section h2,
html[data-theme="dark"] .section-title {
  color: #ffffff !important;
}

/* Card body text - light gray */
html[data-theme="dark"] .card-description,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .pricing-card li,
html[data-theme="dark"] [class*="card"] p,
html[data-theme="dark"] [class*="card"] li {
  color: #e0e0e0 !important;
}

/* Technology I Trust section heading */
html[data-theme="dark"] .tech-partners h2,
html[data-theme="dark"] .tech-partners-header h2,
html[data-theme="dark"] .partners-section h2,
html[data-theme="dark"] section.tech-partners h2 {
  color: #ffffff !important;
}

/* Testimonial/Review author info */
html[data-theme="dark"] .service-card .author-title,
html[data-theme="dark"] .service-card .author-company,
html[data-theme="dark"] [class*="card"] [style*="font-size: 0.875rem"],
html[data-theme="dark"] [class*="card"] [style*="color: var(--gray-600)"] {
  color: #b0b0b0 !important;
}

/* Inline styled text that needs contrast fix */
html[data-theme="dark"] [style*="color: var(--gray-900)"],
html[data-theme="dark"] [style*="color: var(--gray-800)"],
html[data-theme="dark"] [style*="color: var(--gray-700)"] {
  color: #ffffff !important;
}

html[data-theme="dark"] [style*="color: var(--gray-600)"],
html[data-theme="dark"] [style*="color: var(--gray-500)"] {
  color: #b0b0b0 !important;
}

/* Contact page "I read every message" text */
html[data-theme="dark"] .contact-note,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] form + p,
html[data-theme="dark"] .contact-section p {
  color: #b0b0b0 !important;
}

/* Muted/secondary text */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
  color: #b0b0b0 !important;
}

/* Outline/ghost buttons in dark mode */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] [class*="cta-secondary"],
html[data-theme="dark"] [class*="outline"] a {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] [class*="cta-secondary"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* ----------------------------------------
 * 4.9-C: TECHNOLOGY LOGOS VISIBILITY (P0)
 * Problem: Logos too faded or not visible
 * ---------------------------------------- */

.tech-partners-grid img,
.tech-partners img,
.partner-logos img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 0.7 !important;
  height: 40px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  filter: grayscale(80%) !important;
  transition: all 0.3s ease !important;
}

.tech-partners-grid img:hover,
.tech-partners img:hover,
.partner-logos img:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* Dark mode: invert logos for visibility */
html[data-theme="dark"] .tech-partners-grid img,
html[data-theme="dark"] .tech-partners img {
  filter: grayscale(80%) invert(1) !important;
  opacity: 0.7 !important;
}

html[data-theme="dark"] .tech-partners-grid img:hover,
html[data-theme="dark"] .tech-partners img:hover {
  filter: grayscale(0%) invert(1) !important;
  opacity: 1 !important;
}

/* ----------------------------------------
 * 4.9-D: PROMO BANNER CONTENT PUSH (P0)
 * Problem: Banner overlays content on mobile
 * Fix: Use body class to add padding to main
 * ---------------------------------------- */

/* When promo is visible, add padding to main */
body:not(.promo-dismissed) main,
body.promo-visible main {
  padding-top: calc(var(--promo-height, 44px) + 8px) !important;
}

@media (max-width: 767px) {
  body:not(.promo-dismissed) main,
  body.promo-visible main {
    padding-top: calc(var(--promo-height, 44px) + 24px) !important;
  }
}

/* When banner is dismissed, remove padding */
body.promo-dismissed main {
  padding-top: 0 !important;
}

/* ----------------------------------------
 * 4.9-E: MOBILE HORIZONTAL SCROLL SECTIONS (P1)
 * Problem: Content cut off on right side
 * Fix: Override inline styles with !important
 * ---------------------------------------- */

@media (max-width: 767px) {
  /* Override inline grid styles */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="display: grid"][style*="gap"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Why This Matters boxes - stack vertically */
  section [style*="display: grid"][style*="repeat(3, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* How We Get Started steps */
  section [style*="grid-template-columns: repeat(3, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* Children should be full width */
  [style*="grid-template-columns: repeat(3"] > *,
  [style*="grid-template-columns: repeat(auto-fit"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Pricing tables - horizontal scroll with indicator */
  table,
  .pricing-table,
  .rates-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Visual scroll indicator */
  table::after {
    content: "← Scroll →";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 0.5rem;
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ----------------------------------------
 * 4.9-F: MOST POPULAR BADGE CLIPPING (P1)
 * Problem: Badge half-hidden by card border
 * ---------------------------------------- */

/* Pricing cards - allow badge overflow */
.pricing-card,
.pricing-card.featured,
.service-card[style*="border: 2px"],
[class*="pricing"][class*="card"] {
  position: relative !important;
  overflow: visible !important;
}

/* Badge positioning */
.badge-popular,
.pricing-card .badge-popular,
[style*="position: absolute"][style*="top: -12px"] {
  position: absolute !important;
  top: -12px !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

/* Parent containers must allow overflow */
.pricing-grid,
.packages-grid,
section [style*="display: grid"] {
  overflow: visible !important;
  padding-top: 1.5rem !important;
}

/* ----------------------------------------
 * 4.9-G: ABOUT PAGE HEADSHOT (P1)
 * Problem: Egg shape on mobile, too much space below
 * ---------------------------------------- */

.headshot-feature {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto 1rem !important;
  padding: 0 !important;
}

.photo-card.photo-headshot {
  width: 180px !important;
  height: 180px !important;
  min-width: 180px !important;
  min-height: 180px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.photo-card.photo-headshot img,
.headshot-feature img {
  width: 180px !important;
  height: 180px !important;
  min-width: 180px !important;
  min-height: 180px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  border: 4px solid var(--brand-red, #dc2626) !important;
}

@media (max-width: 767px) {
  .photo-card.photo-headshot,
  .photo-card.photo-headshot img,
  .headshot-feature img {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
  }

  .headshot-feature {
    margin-bottom: 0.75rem !important;
  }
}

/* ----------------------------------------
 * 4.9-H: WORD BREAKING / HYPHENATION (P1)
 * Problem: Words breaking mid-word like "actual-ly"
 * ---------------------------------------- */

/* Headings - NEVER break mid-word */
h1, h2, h3, h4, h5, h6,
.card-title,
.section-title,
.hero-headline,
[class*="heading"],
[class*="title"] {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Buttons - NEVER break mid-word */
button,
.btn,
.button,
[class*="btn"],
[class*="cta"],
a[class*="button"] {
  white-space: nowrap !important;
  hyphens: none !important;
  word-break: keep-all !important;
}

/* Allow button text to wrap at word boundaries on very small screens */
@media (max-width: 359px) {
  button,
  .btn,
  .button,
  [class*="btn"],
  [class*="cta"] {
    white-space: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* Card headings - never break */
[class*="card"] h3,
[class*="card"] h4,
.service-card h3,
.pricing-card h3 {
  hyphens: none !important;
  word-break: normal !important;
}

/* ----------------------------------------
 * 4.9-I: TESTIMONIAL ALIGNMENT (P1)
 * Problem: Sandra Zink card sits higher than others
 * ---------------------------------------- */

/* Testimonial grid - align tops */
.services-grid.stagger-children:has(.service-card blockquote),
.testimonials-grid,
.reviews-grid {
  align-items: start !important;
}

/* Individual testimonial cards - consistent height behavior */
.service-card:has(blockquote),
.testimonial-card,
.review-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  align-self: start !important;
}

/* Quote takes available space */
.service-card blockquote,
.testimonial-card .quote,
.review-card .quote {
  flex: 1 !important;
  margin-bottom: 1rem !important;
}

/* Author pushed to bottom */
.service-card:has(blockquote) > div:last-child,
.testimonial-card .author,
.review-card .author {
  margin-top: auto !important;
}

/* ----------------------------------------
 * 4.9-J: FOOTER TEXT COLORS (P1)
 * Problem: Want white text, red for phone and payment link
 * ---------------------------------------- */

/* Footer base text - white */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
footer,
footer p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer headings - white */
.footer-heading,
.site-footer h3,
.site-footer h4,
footer h3,
footer h4 {
  color: #ffffff !important;
}

/* Footer links - white by default */
.site-footer a,
.footer-nav a,
.footer-column a,
footer a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.site-footer a:hover,
.footer-nav a:hover,
footer a:hover {
  color: #ffffff !important;
}

/* Phone number - brand red */
.footer-phone,
.site-footer a[href^="tel"],
footer a[href^="tel"] {
  color: var(--brand-red, #dc2626) !important;
}

/* Make a Payment link - brand red */
.site-footer a[href*="payment"],
footer a[href*="payment"],
.payment-link {
  color: var(--brand-red, #dc2626) !important;
}

.footer-phone:hover,
.site-footer a[href^="tel"]:hover,
.site-footer a[href*="payment"]:hover {
  color: var(--red-600, #ef4444) !important;
}

/* ----------------------------------------
 * 4.9-K: FLOATING "TEXT ME" BUTTON (P2)
 * Problem: Overlaps hero and pricing content
 * ---------------------------------------- */

.floating-cta,
.mobile-sticky-text,
[class*="floating"][class*="cta"] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 900 !important;
}

@media (max-width: 767px) {
  .floating-cta,
  .mobile-sticky-text {
    bottom: 80px !important;
    right: 15px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* When mobile nav is open, hide floating button */
  body.mobile-nav-open .floating-cta,
  body.mobile-nav-open .mobile-sticky-text,
  body.nav-open .floating-cta,
  body.menu-open .floating-cta {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

/* Extra space at bottom of key sections for floating button */
.hero-section,
.pricing-section,
section:has(.pricing-card) {
  padding-bottom: 100px !important;
}

@media (min-width: 768px) {
  .hero-section,
  .pricing-section,
  section:has(.pricing-card) {
    padding-bottom: 3rem !important;
  }
}

/* ========================================
   END ROUND 4.9 FIXES
   ======================================== */