/**
 * 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: 998;
  --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;
}


/* ========================================
   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;
  }

}

/* ===== 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 padding — moved to R4.12 consolidated section */

  /* 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;
  }

  /* 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");
}

/* ========================================
   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;
}

.dark-mode ::selection {
  background-color: #ef4444;
  color: #000000;
}

.dark-mode ::-moz-selection {
  background-color: #ef4444;
  color: #000000;
}

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

@media print {
  .promo-banner,
  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: moved to R4.12 */

  /* 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 — moved to R4.12 consolidated section
   ============================================ */

/* ============================================
   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 */

/* ================================
   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);
  }
}


/* ================================
   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 moved to header.css (R6.0) */

/* ================================
   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) {
  .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) 385-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 footer overflow (header moved to header.css R6.0) */
.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
   ======================================== */

/* Header logo dark mode exemption moved to header.css (R6.0) */

/* 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: Moved to R4.12 consolidated section
   ======================================== */

/* ========================================
   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) {
  /* Header/nav rules moved to R4.12 */

  /* Fix Safari flexbox issues */
  .hero-split {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
  }
}

/* ========================================================================
 * 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
 * -------------------------------------------- */

/* NOTE: Section B (header overflow) and Section C (mobile nav) moved to R4.12 consolidated section */

/* --------------------------------------------
 * D. DARK MODE — Complete overhaul
 * -------------------------------------------- */


/* === 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;
}

  }
}

/* --------------------------------------------
 * 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 */

/* ----------------------------------------
 * 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
 * NOTE: All promo banner rules moved to R4.12 consolidated section
 * ======================================================================== */

/* ========================================
   ROUND 4.7 — MONSTER FIX
   Mobile nav, promo banner, overflow, dark mode
   Date: 2025-11-28
   NOTE: Header/nav/promo rules moved to R4.12 consolidated section
   ======================================== */

/* ========================================
   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;
}

.portal-page .site-header,
.login-wrapper .site-header,
body[class*="portal"] .site-header,
body[class*="login"] .site-header {
  margin-top: 0 !important;
}

.portal-page #promo-banner,
.portal-page .promo-banner {
  display: none !important;
}

/* NOTE: 4.7-M promo banner polish moved to R4.12 consolidated section */

/* ========================================
 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
 * NOTE: Header/nav/promo rules (4.8-A, 4.8-B, 4.8-C) moved to R4.12 consolidated section
 * ======================================================================== */

/* ----------------------------------------
 * 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
 * NOTE: Mobile nav (4.9-A) moved to R4.12 consolidated section
 * ======================================================================== */

/* ----------------------------------------
 * 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;
}

/* NOTE: 4.9-D promo banner padding removed - banner now uses position:relative in R4.12 */

/* ----------------------------------------
 * 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;
}

/* ========================================
   END ROUND 4.9 FIXES
   ======================================== */

/* ========================================
   ROUND 4.10 FIXES — 2025-11-30
   CRITICAL: Mobile nav, button overflow, dark mode
   NOTE: Header/nav rules (4.10-A, 4.10-B) moved to R4.12 consolidated section
   ======================================== */

/* ----------------------------------------
 * 4.10-C: MOBILE BUTTON OVERFLOW FIX
 * "Explore Business Services" and "Explore Home Services"
 * were extending beyond viewport causing horizontal scroll
 * ---------------------------------------- */

@media (max-width: 767px) {
  /* All buttons must fit within their container */
  .btn,
  button,
  a.btn,
  .cta-primary,
  .cta-secondary,
  .cta-large,
  [class*="cta-"] {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  /* Cards must contain their buttons */
  .card,
  .service-card,
  [class*="card"]:not(.photo-card) {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Hero buttons stack and center */
  .hero .btn,
  .hero-section .btn,
  .hero-cta,
  .hero .cta-primary,
  .hero .cta-secondary,
  .hero-section .cta-primary,
  .hero-section .cta-secondary {
    max-width: 280px !important;
    width: 100% !important;
    margin: 0.5rem auto !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ----------------------------------------
 * 4.10-D: HORIZONTAL SCROLL PREVENTION
 * Fix root causes then add safety net
 * ---------------------------------------- */

@media (max-width: 767px) {
  /* All containers must respect viewport */
  .container,
  .wrapper,
  section,
  main,
  .page-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Hero section — no transforms that cause overflow */
  .hero,
  .hero-section,
  .hero-content {
    max-width: 100vw !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Hero text must wrap properly */
  .hero h1,
  .hero-title,
  .hero-heading {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    transform: none !important;
    letter-spacing: normal !important;
  }

  /* All images respect container */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Cards fit within viewport */
  .card,
  .service-card,
  [class*="card"]:not(.photo-card) {
    max-width: calc(100vw - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* SAFETY NET — Applied after fixing actual overflow causes */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ----------------------------------------
 * 4.10-E: DARK MODE TEXT VISIBILITY
 * All headings and text readable in dark mode
 * ---------------------------------------- */

/* Dark mode headings — scoped to main content */
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;
}

/* Dark mode body text — scoped */
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: #e0e0e0 !important;
}

/* Trust section specifically - "Why Businesses Trust NOCO TechWorks" */
html[data-theme="dark"] .trust-section h2,
html[data-theme="dark"] .trust-section h3,
html[data-theme="dark"] .trust-section h4,
html[data-theme="dark"] [class*="trust"] h2,
html[data-theme="dark"] [class*="trust"] h3,
html[data-theme="dark"] .why-businesses h2,
html[data-theme="dark"] .why-businesses h3,
html[data-theme="dark"] section h2,
html[data-theme="dark"] section h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .trust-section p,
html[data-theme="dark"] .trust-section li,
html[data-theme="dark"] [class*="trust"] p,
html[data-theme="dark"] [class*="trust"] li {
  color: #e0e0e0 !important;
}

/* Feature/benefit lists - "20+ Years Real-World Experience" etc */
html[data-theme="dark"] .feature-list h3,
html[data-theme="dark"] .feature-list h4,
html[data-theme="dark"] .benefits-list h3,
html[data-theme="dark"] [class*="feature"] h3,
html[data-theme="dark"] [class*="benefit"] h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .feature-list li,
html[data-theme="dark"] .feature-list p,
html[data-theme="dark"] .benefits-list li,
html[data-theme="dark"] [class*="feature"] li,
html[data-theme="dark"] [class*="benefit"] li {
  color: #d0d0d0 !important;
}

/* Cards in dark mode */
html[data-theme="dark"] .card:not(.photo-card),
html[data-theme="dark"] .service-card,
html[data-theme="dark"] [class*="card"]:not(.photo-card):not(.photo-maple):not(.photo-amber) {
  background-color: #1e1e1e !important;
}

html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] [class*="card"] h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] [class*="card"] p {
  color: #b0b0b0 !important;
}

/* Hero section — prevent white on white */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-section {
  background-color: #0a0a0a !important;
}

html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .hero .subtitle {
  color: #cccccc !important;
}

/* Ensure light backgrounds become dark */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-light"] {
  background-color: #1a1a1a !important;
}

/* ----------------------------------------
 * 4.10-F: FLOATING "TEXT ME" BUTTON FIXES
 * Desktop: hover text stays white
 * Mobile: fixed position at bottom center
 * ---------------------------------------- */

/* Base styles */
.mobile-sticky-text,
.desktop-text-bubble,
.desktop-text-bubble-link {
  color: #ffffff !important;
}

/* HOVER STATE — TEXT MUST STAY WHITE */
.mobile-sticky-text:hover,
.desktop-text-bubble:hover,
.desktop-text-bubble-link:hover {
  color: #ffffff !important;
  background-color: #b91c1c !important;
}

/* Icon must also stay white on hover */
.mobile-sticky-text svg,
.mobile-sticky-text i,
.mobile-sticky-text .icon,
.mobile-sticky-text:hover svg,
.mobile-sticky-text:hover i,
.mobile-sticky-text:hover .icon,
.desktop-text-bubble svg,
.desktop-text-bubble:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* MOBILE — Fixed to bottom center */
@media (max-width: 767px) {
  .mobile-sticky-text {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 2rem) !important;
    z-index: 900 !important;
  }

  .mobile-sticky-text:hover {
    transform: translateX(-50%) translateY(-2px) !important;
  }
}

/* iOS safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .mobile-sticky-text {
      bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ----------------------------------------
 * 4.10-G: ABOUT PAGE HEADSHOT FIX
 * Bottom half was white on mobile
 * ---------------------------------------- */

/* Container — NO white background */
.headshot-wrapper,
.about-headshot,
.photo-card.photo-headshot,
.headshot-feature .photo-card,
[class*="headshot"] {
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background: none !important;
  margin: 0 auto 1.5rem auto !important;
}

/* Image MUST fill the entire circle */
.headshot-wrapper img,
.about-headshot img,
.photo-card.photo-headshot img,
.headshot-feature .photo-card img,
[class*="headshot"] img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Remove any photo-card styling that adds white background */
.about-section .photo-card.photo-headshot,
.about-page .photo-card.photo-headshot,
.headshot-feature .photo-card {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Mobile specific */
@media (max-width: 767px) {
  .headshot-wrapper,
  .about-headshot,
  .photo-card.photo-headshot,
  .headshot-feature .photo-card,
  [class*="headshot"]:not(.headshot-feature) {
    width: 150px !important;
    height: 150px !important;
  }

  .headshot-wrapper img,
  .about-headshot img,
  .photo-card.photo-headshot img,
  .headshot-feature .photo-card img,
  [class*="headshot"] img {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
  }
}

/* ----------------------------------------
 * 4.10-H: DESKTOP HERO BUTTON TEXT CONTAINMENT
 * Button text was overflowing on desktop
 * ---------------------------------------- */

/* Hero buttons — prevent overflow */
.hero .btn,
.hero-section .btn,
.hero-cta,
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tablet — allow wrap if needed */
@media (max-width: 1024px) {
  .hero .btn,
  .hero-section .btn {
    white-space: normal !important;
    text-align: center !important;
    padding: 0.875rem 1.5rem !important;
  }
}

/* Button groups flex wrap */
.hero-buttons,
.hero-cta-group,
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .hero-buttons,
  .hero-cta-group,
  .cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero .btn,
  .hero-section .btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

/* ----------------------------------------
 * 4.10-I: HOME HERO H1 ALIGNMENT
 * "Ready to Stop Fighting With Your Technology?" was off-center
 * ---------------------------------------- */

.cta-section h2,
.ready-section h2,
[class*="ready"] h2,
[class*="cta-block"] h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  transform: none !important;
}

.cta-section,
.ready-section,
[class*="cta-block"] {
  text-align: center !important;
}

.cta-section .container,
.cta-section .wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ----------------------------------------
 * 4.10-J: TESTIMONIAL CARD EQUAL HEIGHTS
 * Linda M's card was extending lower than others
 * ---------------------------------------- */

.testimonials-grid,
.reviews-grid,
[class*="testimonial"][class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.testimonial-card,
.review-card,
[class*="testimonial"][class*="card"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.testimonial-card .quote,
.review-card .quote {
  flex: 1 !important;
}

.testimonial-card .author,
.review-card .author {
  margin-top: auto !important;
}

@media (max-width: 767px) {
  .testimonials-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ----------------------------------------
 * 4.10-K: PAYMENT PAGE TEXT BREAKS
 * "Credit/Debi-t Card" was breaking mid-word
 * ---------------------------------------- */

.payment-page h3,
.payment-page h4,
.payment-page .card-title,
.make-payment h3,
.make-payment h4,
[class*="payment"] h3,
[class*="payment"] h4 {
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
}

/* Payment cards need minimum width */
.payment-card,
.payment-option-card {
  min-width: 220px !important;
}

/* Payment links can break at appropriate points */
.payment-link,
.payment-page a:not(.btn):not(.cta-primary):not(.cta-secondary) {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ----------------------------------------
 * 4.10-L: ABOUT PAGE SPACING
 * Large empty space between headshot and heading
 * ---------------------------------------- */

.headshot-wrapper,
.about-headshot,
.photo-card.photo-headshot,
.headshot-feature .photo-card {
  margin-bottom: 1.5rem !important;
}

.about-section h2:first-of-type,
.about-content h2:first-child {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .headshot-wrapper,
  .about-headshot,
  .headshot-feature .photo-card {
    margin-bottom: 1rem !important;
  }
}

/* ----------------------------------------
 * 4.10-M: MALWAREBYTES BUTTON TEXT BREAK
 * "GET MALWAREBYT-ES" was splitting brand name
 * ---------------------------------------- */

/* Resource buttons — no word breaks on brand names */
.resources-page .btn,
.resource-card .btn,
[class*="resource"] .btn,
.resources-page .cta-primary,
.resource-card .cta-primary {
  white-space: nowrap !important;
  hyphens: none !important;
  word-break: keep-all !important;
}

@media (max-width: 767px) {
  .resource-card .btn,
  .resource-card .cta-primary {
    font-size: 0.8rem !important;
    padding: 0.75rem 0.875rem !important;
    white-space: nowrap !important;
    hyphens: none !important;
  }
}

/* ----------------------------------------
 * 4.10-N: CLIENT PORTAL TOP SPACING
 * Login panel was sitting against header
 * ---------------------------------------- */

.portal-page,
.client-portal,
.login-page {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.portal-container,
.login-container,
.portal-card,
.login-card {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.portal-page main,
.login-page main {
  padding-top: 2rem !important;
}

/* ----------------------------------------
 * 4.10-O: HOLIDAY BANNER TEXT WRAPPING
 * "Dec 31" was wrapping so "31" was alone
 * ---------------------------------------- */

@media (max-width: 767px) {
  .promo-banner,
  .holiday-banner,
  [class*="promo"] {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Keep dates together */
  .promo-banner .date,
  .promo-date,
  [class*="promo"] time,
  .promo-banner strong,
  .promo-content strong {
    white-space: nowrap !important;
  }
}

/* ========================================
   END ROUND 4.10 FIXES
   ======================================== */

/* ========================================
   ROUND 4.11 FIXES — 2025-11-30
   DIAGNOSTIC-BASED: Targeted fixes after full audit
   NOTE: Header/nav/promo rules moved to R4.12 consolidated section
   ======================================== */

/* ----------------------------------------
 * 4.11-C: DARK MODE TEXT — COMPREHENSIVE
 * Diagnostic: Rules exist but may be overridden by inline styles
 * Fix: More specific selectors and !important
 * ---------------------------------------- */

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] article,
html[data-theme="dark"] section:not(.hero):not(.hero-section) {
  color: #e0e0e0 !important;
}

html[data-theme="dark"] h1:not(.hero-headline),
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(.promo-icon):not(.cta-text),
html[data-theme="dark"] div:not(.promo-banner):not(.hero):not(.nav-overlay) {
  color: inherit;
}

/* Inline style overrides on homepage */
html[data-theme="dark"] [style*="color: var(--gray-600)"],
html[data-theme="dark"] [style*="color: var(--gray-500)"] {
  color: #a0a0a0 !important;
}

/* ----------------------------------------
 * 4.11-D: MOST POPULAR BADGE VISIBILITY
 * Diagnostic: overflow:visible is set, but ensure z-index
 * ---------------------------------------- */

.badge-popular,
.pricing-card .badge-popular {
  z-index: 100 !important;
  position: absolute !important;
  top: -12px !important;
}

.pricing-card,
.pricing-card.featured {
  overflow: visible !important;
  position: relative !important;
}

/* Ensure parent containers don't clip */
.pricing-cards,
.pricing-grid,
[class*="pricing"][class*="grid"],
[class*="pricing"][class*="cards"] {
  overflow: visible !important;
}

/* ----------------------------------------
 * 4.11-E: HEADSHOT MOBILE FIT
 * Diagnostic: Uses object-fit:cover which crops
 * Fix: Use contain on mobile to show full image
 * ---------------------------------------- */

@media (max-width: 767px) {
  .photo-card.photo-headshot img,
  .headshot-feature .photo-card img,
  .about-headshot img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  .photo-card.photo-headshot,
  .headshot-feature .photo-card {
    aspect-ratio: auto !important;
    max-height: 300px !important;
  }
}

/* NOTE: 4.11-F header visibility moved to R4.12 consolidated section */

/* ========================================
   END ROUND 4.11 FIXES
   ======================================== */

/* --- PROMO BANNER ---
   Option A: Scrolls away with page (position: relative)
   Banner is a sibling AFTER header in HTML
*/
#promo-banner,
.promo-banner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 3rem 0.625rem 1rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  z-index: 999;
}

html[data-theme="dark"] #promo-banner,
html[data-theme="dark"] .promo-banner {
  background-color: #b91c1c;
}

#promo-banner a,
.promo-banner a {
  color: #ffffff;
  text-decoration: underline;
}

#promo-banner a:hover,
.promo-banner a:hover {
  text-decoration: none;
}

#promo-banner .promo-content,
.promo-banner .promo-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#promo-banner .promo-cta,
.promo-banner .promo-cta {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

#promo-banner .promo-cta:hover,
.promo-banner .promo-cta:hover {
  background: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

#promo-banner .promo-fine-print,
.promo-banner .promo-fine-print {
  font-size: 0.75rem;
  opacity: 0.9;
}

#promo-banner .promo-close,
.promo-banner .promo-close,
#promo-banner button,
.promo-banner button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

#promo-banner .promo-close:hover,
.promo-banner .promo-close:hover {
  opacity: 1;
}

/* Hidden/Dismissed state */
#promo-banner.hidden,
#promo-banner.dismissed,
.promo-banner.hidden,
.promo-banner.dismissed,
#promo-banner[data-dismissed="true"],
.promo-banner[data-dismissed="true"] {
  display: none;
}

/* Prevent flash on dismissed banner (set by JS early in head) */
body.promo-dismissed #promo-banner,
body.promo-dismissed .promo-banner,
body.banner-dismissed #promo-banner,
body.banner-dismissed .promo-banner {
  display: none;
}

@media (max-width: 767px) {
  #promo-banner,
  .promo-banner {
    font-size: 0.75rem;
    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  }

  #promo-banner .promo-content,
  .promo-banner .promo-content {
    flex-direction: column;
    gap: 0.25rem;
  }

  #promo-banner .promo-fine-print,
  .promo-banner .promo-fine-print {
    font-size: 0.7rem;
  }

  /* Promo banner button mobile sizing */
  #promo-banner .btn,
  .promo-banner .btn,
  #promo-banner button:not(.promo-close),
  .promo-banner button:not(.promo-close) {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* ============================================================
   R4.14 — TYPOGRAPHY, SPACING, AND DARK MODE FIXES
   Date: 2025-12-01

   Fixes:
   - Button text breaking mid-word
   - Headings cut off on mobile
   - Spacing issues (headshot gap, contact form)
   - Dark mode contrast problems
   ============================================================ */

/* --- TASK 1: BUTTON TEXT BREAKING --- */

/* Prevent word breaks in buttons and pills globally */
.btn,
.button,
.cta-button,
.resource-card .btn,
.review-btn,
[class*="btn-"] {
  white-space: nowrap;
}

/* Resource cards - DESKTOP fix for long button text like MALWAREBYTES */
.resource-card .btn,
.resource-grid .btn {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.25rem;
}

/* MOBILE fixes for review buttons and service badges */
@media (max-width: 767px) {
  .review-btn,
  .cta-button,
  .service-badge {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem;
  }
}

/* Alternative: allow graceful wrapping at word boundaries for badges */
.service-badge,
.feature-pill {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

/* --- TASK 2: PAYMENT LINKS BREAKING --- */

/* Payment link labels */
.payment-card label,
.payment-link-label,
.qr-label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 767px) {
  .payment-card label,
  .payment-link-label,
  .qr-label {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }
}

/* --- TASK 3: HEADING CUT OFF ON MOBILE --- */

/* Ensure headings fit viewport */
h1, h2, h3,
.section-heading,
.hero-heading,
[class*="heading"] {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 767px) {
  h1, .h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    letter-spacing: 0.02em;
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    letter-spacing: 0.02em;
  }

  /* Remove negative margins that push content off-screen */
  .section-heading,
  .hero-heading {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- TASK 4: MOST POPULAR PILL CLIPPED --- */

/* Pricing card - allow pill to overflow */
.pricing-card,
.plan-card,
[class*="pricing"] {
  overflow: visible;
  position: relative;
}

/* Most Popular pill positioning */
.most-popular-badge,
.popular-badge,
.pricing-card .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
}

/* Ensure parent doesn't clip */
.pricing-cards-container,
.plans-wrapper {
  overflow: visible;
  padding-top: 1rem;
}

/* --- TASK 5: HEADSHOT GAP --- */

/* Headshot card - reduce bottom margin */
.headshot-feature,
.photo-card,
.headshot-container,
[class*="headshot"] {
  margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .headshot-feature,
  .photo-card,
  .headshot-container {
    margin-bottom: 1rem;
  }
}

/* Ensure red border is preserved */
.headshot-feature img,
.photo-headshot img {
  border: 4px solid var(--primary-color, #e63946);
  border-radius: 50%;
}

/* --- TASK 6: CONTACT FORM CRAMPED --- */

/* Contact form container - wider on mobile */
@media (max-width: 767px) {
  .contact-form,
  .contact-form-container,
  form.contact {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
  }
}

/* --- TASK 7: 3-ITEM GRID --- */

/* Feature grid - center odd items */
.feature-grid,
.features-grid,
.realvnc-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

/* If exactly 3 items, center them */
.feature-grid:has(:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(200px, 300px));
  justify-content: center;
}

/* Fallback for browsers without :has() */
@supports not selector(:has(*)) {
  .feature-grid.three-items {
    grid-template-columns: repeat(3, minmax(200px, 300px));
    justify-content: center;
  }
}

/* --- TASK 8: DARK MODE CONTRAST --- */

/* For sections that STAY WHITE in dark mode */
html[data-theme="dark"] .legal-page,
html[data-theme="dark"] .privacy-policy,
html[data-theme="dark"] .terms-page,
html[data-theme="dark"] .white-section {
  background: #ffffff;
  color: #1a1a2e;
}

html[data-theme="dark"] .legal-page h1,
html[data-theme="dark"] .legal-page h2,
html[data-theme="dark"] .legal-page h3,
html[data-theme="dark"] .legal-page p,
html[data-theme="dark"] .privacy-policy h1,
html[data-theme="dark"] .privacy-policy h2,
html[data-theme="dark"] .privacy-policy h3,
html[data-theme="dark"] .privacy-policy p {
  color: #1a1a2e;
}

/* For sections that GO DARK in dark mode */
html[data-theme="dark"] .dark-section,
html[data-theme="dark"] .stats-section,
html[data-theme="dark"] .by-the-numbers,
html[data-theme="dark"] [class*="dark-bg"] {
  background: #1a1a2e;
}

html[data-theme="dark"] .dark-section h1,
html[data-theme="dark"] .dark-section h2,
html[data-theme="dark"] .dark-section h3,
html[data-theme="dark"] .stats-section h1,
html[data-theme="dark"] .stats-section h2,
html[data-theme="dark"] .stats-section h3,
html[data-theme="dark"] .by-the-numbers h1,
html[data-theme="dark"] .by-the-numbers h2,
html[data-theme="dark"] .by-the-numbers h3 {
  color: #ffffff;
}

html[data-theme="dark"] .dark-section p,
html[data-theme="dark"] .stats-section p,
html[data-theme="dark"] .by-the-numbers p {
  color: rgba(255, 255, 255, 0.9);
}

/* Generic fallback - headings in dark sections */
html[data-theme="dark"] section[class*="dark"] h1,
html[data-theme="dark"] section[class*="dark"] h2,
html[data-theme="dark"] section[class*="dark"] h3 {
  color: #ffffff;
}

/* ============================================================
   END R4.14 — TYPOGRAPHY, SPACING, AND DARK MODE FIXES
   ============================================================ */

/* =================================================================
   R4.15 through R4.22 REMOVED by R5.0 (2024-12-08)
   
   These blocks contained conflicting !important rules that were
   overriding each other. They have been replaced by the unified
   R5.0 block below which provides a clean-slate implementation.
   
   Original blocks removed:
   - R4.15: Targeted CSS fixes (header, nav, overlay)
   - R4.15-HOTFIX: Client Login visibility
   - R4.16: Override patch
   - R4.18: Header/nav cleanup
   - R4.19: Layout stabilization
   - R4.20: Critical fixes (nav stacking, dark mode)
   - R4.20-HOTFIX: Overlay z-index, promo, dark mode
   - R4.22: Multi-angle nuclear fix
   ================================================================= */

/* =================================================================
   SECTION 9: PROMO BANNER
   Compact, below header
   ============================================================ */

.promo-banner,
#promo-banner {
  background: #D32F2F;
  color: #ffffff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  position: relative;
  z-index: 999;
}

@media (max-width: 1023px) {
  .promo-banner,
  #promo-banner {
    padding: 0.5rem 1rem;
  }
}

/* ============================================================
   SECTION 10: MOBILE HERO IMAGE FIX
   ============================================================ */

@media (max-width: 1023px) {
  .hero-split,
  .hero-section {
    min-height: auto;
  }

  .hero-split-image,
  .hero-image {
    width: 100%;
    max-height: 50vh;
    overflow: hidden;
  }

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

/* === END R5.0 === */

/* Accessibility: Reduced motion support - see header.css for nav elements */

/* ============================================================
   PROMO BANNER MOBILE SIZING
   Goal: Thin strip on mobile, not giant hero block
   ============================================================ */
@media (max-width: 1023px) {
  .promo-banner,
  #promo-banner {
    padding: 0.5rem 1rem;
    text-align: center;
  }

  .promo-banner h2,
  .promo-banner .promo-title,
  .promo-banner strong {
    font-size: 0.9rem;
    margin: 0;
  }

  .promo-banner p,
  .promo-banner span:not(.close-btn):not([class*="icon"]) {
    font-size: 0.8rem;
    margin: 0.125rem 0;
  }

  .promo-banner .btn,
  .promo-banner a.cta,
  .promo-banner button:not(.close-btn) {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }

  .promo-banner .close-btn,
  .promo-banner [aria-label="Close"],
  .promo-banner .promo-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem;
  }
}

/* ============================================================
   PHASE 7: DARK MODE TEXT CONTRAST
   Goal: All text readable. No black on black. No white on white.
   ============================================================ */

/* A. BASE TEXT COLORS */
[data-theme="dark"] body {
  color: var(--gray-200, #E5E5E5);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #FFFFFF;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] blockquote {
  color: var(--gray-200, #E5E5E5);
}

/* Inherit for nested spans - safer than targeting all spans */
[data-theme="dark"] p span,
[data-theme="dark"] li span,
[data-theme="dark"] h1 span,
[data-theme="dark"] h2 span,
[data-theme="dark"] h3 span {
  color: inherit;
}

[data-theme="dark"] a:not(.btn):not(.cta-button):not(.nav-link):not(.cta-primary):not(.cta-secondary):not(.promo-cta) {
  color: var(--primary-red-light, #F87171);
}

/* B. SPECIFIC PROBLEM SECTIONS */

/* Trust section - "Why Businesses Trust NOCO TechWorks" */
[data-theme="dark"] .trust-section,
[data-theme="dark"] .hero-trust-bar,
[data-theme="dark"] [class*="trust"]:not(.hero-trust-bar) {
  background: var(--gray-900, #171717);
}

[data-theme="dark"] .trust-section h2,
[data-theme="dark"] .trust-section h3,
[data-theme="dark"] .trust-section p,
[data-theme="dark"] .trust-section li,
[data-theme="dark"] .trust-item h3,
[data-theme="dark"] .trust-item p,
[data-theme="dark"] .hero-trust-bar .trust-item strong,
[data-theme="dark"] .hero-trust-bar .trust-item span {
  color: #FFFFFF;
}

/* Feature/service cards */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card {
  background: var(--gray-800, #262626);
  color: #FFFFFF;
}

[data-theme="dark"] .card h3,
[data-theme="dark"] .card p,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card p,
[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .pricing-card h3,
[data-theme="dark"] .pricing-card p {
  color: #FFFFFF;
}

/* C. CHECK ICONS/CHECKMARKS */
[data-theme="dark"] .check-icon,
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .checkmark {
  color: #FFFFFF;
}

/* D. CONTENT SECTIONS */
[data-theme="dark"] .content-section,
[data-theme="dark"] .main-content,
[data-theme="dark"] main section {
  background: var(--gray-900, #171717);
  color: var(--gray-200, #E5E5E5);
}

/* E. ENSURE HERO TEXT STAYS WHITE (it has dark background) */
[data-theme="dark"] .hero-split h1,
[data-theme="dark"] .hero-split p,
[data-theme="dark"] .hero-headline,
[data-theme="dark"] .hero-subheadline {
  color: #FFFFFF;
}


/* If there's a spacer element */
.portal-header-spacer,
.client-portal .header-spacer,
.portal-page .header-spacer {
  display: none;
}

/* If main content pushes header */
.client-portal main,
.portal-page main,
.portal-wrapper main {
  margin-top: 0;
  padding-top: 0;
}

/* Portal pages should not have promo banner gap */
.client-portal,
.portal-page,
.portal-wrapper {
  padding-top: 0;
}

/* === END R5.2 POLISH === */

/* ============================================================
   R6.3 UPDATES — Dark mode, promo, floating CTA, hero
   ============================================================ */

/* Dark mode body + text */
[data-theme="dark"],
.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* Dark mode body text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.close-btn),
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode li,
.dark-mode span:not(.close-btn),
.dark-mode label,
.dark-mode td,
.dark-mode th {
  color: #e0e0e0 !important;
}

/* Cards and sections */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] section,
.dark-mode .card,
.dark-mode .service-card,
.dark-mode section {
  background-color: #1e1e1e !important;
}

/* Promo banner sizing on small screens */
@media (max-width: 767px) {
  #promo-banner {
    padding: 0.4rem 0.5rem !important;
    min-height: unset !important;
    max-height: 70px !important;
  }
  
  #promo-banner * {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  
  #promo-banner .btn,
  #promo-banner a[class*="btn"],
  #promo-banner button:not(.close-btn) {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.55rem !important;
  }

  #promo-banner .promo-content {
    gap: 0.25rem !important;
  }
  
  #promo-banner .promo-cta {
    margin-top: 0.15rem !important;
  }
  
  #promo-banner .close-btn {
    font-size: 1.1rem;
    padding: 0.25rem;
  }
}

/* Mobile hero sizing */
@media (max-width: 767px) {
  .hero,
  .hero-section,
  #hero,
  .hero-image,
  .hero-split-image {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .hero img,
  .hero-section img,
  .hero-image img,
  .hero-split-image img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
    max-height: 50vh;
  }
}

/* ═══════════════════════════════════════════════════════════
   NUCLEAR OVERRIDES - MUST BE LAST IN FILE
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   NUCLEAR DARK MODE TEXT - MUST BE LAST
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] span:not(.close-btn):not(.promo-icon),
[data-theme="dark"] label,
[data-theme="dark"] div:not(.nav-overlay):not(.promo-banner):not(.hero),
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,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] span:not(.close-btn):not(.promo-icon),
html[data-theme="dark"] label,
html[data-theme="dark"] div:not(.nav-overlay):not(.promo-banner):not(.hero) {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* Extra safety for common content containers */
[data-theme="dark"] .hero p,
[data-theme="dark"] .hero-subheadline,
[data-theme="dark"] section p,
[data-theme="dark"] .container p,
[data-theme="dark"] .card p,
[data-theme="dark"] .service-card p,
[data-theme="dark"] .content p,
[data-theme="dark"] .trust-section p,
[data-theme="dark"] .features p,
[data-theme="dark"] .benefits p {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* Ensure links stay visible in dark mode */
[data-theme="dark"] a:not(.nav-link):not(.cta-header):not(.logo):not(.btn):not(.cta-primary):not(.cta-secondary) {
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
}

[data-theme="dark"] a:not(.nav-link):not(.cta-header):not(.logo):not(.btn):hover {
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
}

/* === DARK MODE BACKGROUNDS === */
[data-theme="dark"] body,
html[data-theme="dark"] body {
  background-color: #121212 !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] section,
[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] section,
html[data-theme="dark"] .section {
  background-color: #1e1e1e !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PROMO BANNER - COMPACT BUT READABLE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #promo-banner,
  .promo-banner,
  div.promo-banner,
  [id="promo-banner"] {
    padding: 0.5rem 0.75rem !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #promo-banner .promo-text,
  #promo-banner .promo-fine-print,
  #promo-banner p,
  #promo-banner span:not(.close-btn):not(.promo-icon) {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #promo-banner .promo-cta,
  #promo-banner .btn,
  #promo-banner a[class*="btn"] {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
  }

  #promo-banner .close-btn {
    font-size: 1.25rem !important;
    padding: 0.25rem !important;
  }
}

/* === PORTAL - REMOVE TOP SPACE === */
body.portal-page,
body.login-page,
.portal-page,
.login-page,
.login-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.portal-page .site-header,
.login-page .site-header,
.login-wrapper .site-header,
body.portal-page header,
body.login-page header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

.portal-page #promo-banner,
.portal-page .promo-banner,
.login-page #promo-banner,
.login-page .promo-banner {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   R6.12 - DESKTOP FLOATING TEXT BUBBLE
   Actual classes: .desktop-text-bubble, .desktop-text-bubble-link
   ══════════════════════════════════════════════════════════════ */

/* Kill wrapper backgrounds */
.desktop-text-bubble {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Kill wrapper pseudo-elements */
.desktop-text-bubble::before,
.desktop-text-bubble::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Kill link pseudo-elements too */
.desktop-text-bubble-link::before,
.desktop-text-bubble-link::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Style only the link itself */
.desktop-text-bubble-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #e63946 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.25rem !important;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
  text-decoration: none !important;
  border: none !important;
}

.desktop-text-bubble-link:hover {
  background: #c1121f !important;
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════
   R6.12 - MOBILE FLOATING TEXT BUTTON
   Actual class: .mobile-sticky-text
   ══════════════════════════════════════════════════════════════ */
.mobile-sticky-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #e63946 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.25rem !important;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
  border: none !important;
}

.mobile-sticky-text::before,
.mobile-sticky-text::after {
  display: none !important;
  content: none !important;
}

/* ══════════════════════════════════════════════════════════════
   R6.12a - DARK MODE TEXT COLORS
   
   Problem: Some cards have dark bg (need light text)
            Some cards have light bg (need dark text)
   
   Solution: 
   - Default to light text on dark backgrounds
   - Scope dark text rules to CONTENT SECTIONS only
   ══════════════════════════════════════════════════════════════ */

/* DEFAULT: Dark mode text should be light */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
html[data-theme="dark"] body {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* Dark mode headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Links in dark mode - exclude buttons and nav */
[data-theme="dark"] a:not(.cta-primary):not(.cta-secondary):not(.btn):not(.promo-cta):not(.nav-link):not(.main-nav a) {
  color: #e63946 !important;
  -webkit-text-fill-color: #e63946 !important;
}

[data-theme="dark"] a:not(.cta-primary):not(.cta-secondary):not(.btn):not(.promo-cta):not(.nav-link):hover {
  color: #ff6b6b !important;
  -webkit-text-fill-color: #ff6b6b !important;
}

/* Form fields in dark mode - SCOPED to content/portal areas only
   Excludes header search or nav inputs if added later */
[data-theme="dark"] main input,
[data-theme="dark"] main textarea,
[data-theme="dark"] main select,
[data-theme="dark"] #main-content input,
[data-theme="dark"] #main-content textarea,
[data-theme="dark"] #main-content select,
[data-theme="dark"] .login-container input,
[data-theme="dark"] .login-container textarea,
[data-theme="dark"] .login-container select,
[data-theme="dark"] .portal-page input,
[data-theme="dark"] .portal-page textarea,
[data-theme="dark"] .portal-page select,
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background-color: #ffffff !important;
}

[data-theme="dark"] main input::placeholder,
[data-theme="dark"] main textarea::placeholder,
[data-theme="dark"] #main-content input::placeholder,
[data-theme="dark"] #main-content textarea::placeholder,
[data-theme="dark"] .login-container input::placeholder,
[data-theme="dark"] .login-container textarea::placeholder,
[data-theme="dark"] .portal-page input::placeholder,
[data-theme="dark"] .portal-page textarea::placeholder,
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* DARK BACKGROUND CARDS - Light text (service-card has dark bg) */
[data-theme="dark"] .service-card,
[data-theme="dark"] .service-card p,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card h4,
[data-theme="dark"] .service-card span,
[data-theme="dark"] .service-card li {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card .card-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT BACKGROUND ELEMENTS - Dark text
   SCOPED TO CONTENT SECTIONS ONLY (not modals, headers, buttons)
   Targets the "By the Numbers" stats cards (classless divs with light bg)
   Using tight selectors only - removed broad fallbacks
   ══════════════════════════════════════════════════════════════ */

/* Stats section light cards - tighter selectors only */
[data-theme="dark"] .section-padding > .container div:not([class]),
[data-theme="dark"] .section-padding > .container > div > div:not([class]) {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* Light bg utility classes - scoped to content areas */
[data-theme="dark"] main .bg-white,
[data-theme="dark"] main .bg-light,
[data-theme="dark"] main .bg-gray-50,
[data-theme="dark"] main .bg-gray-100,
[data-theme="dark"] #main-content .bg-white,
[data-theme="dark"] #main-content .bg-light,
[data-theme="dark"] .section-padding .bg-white,
[data-theme="dark"] .section-padding .bg-light,
[data-theme="dark"] .container .bg-white,
[data-theme="dark"] .container .bg-light {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* Preserve brand red for icons */
[data-theme="dark"] .card-icon-wrapper,
[data-theme="dark"] .card-icon-wrapper svg,
[data-theme="dark"] .service-card svg,
[data-theme="dark"] svg[class*="icon"] {
  color: #e63946 !important;
  fill: #e63946 !important;
}

/* Hero section text - ensure readable */
[data-theme="dark"] .hero-split,
[data-theme="dark"] .hero-split-text,
[data-theme="dark"] .hero-split-text h1,
[data-theme="dark"] .hero-split-text p,
[data-theme="dark"] .hero-split-text span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .hero-split-text p {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* ══════════════════════════════════════════════════════════════
   R6.12 - PROMO BANNER MOBILE
   Actual classes: .promo-banner, .promo-close
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .promo-banner {
    padding: 0.4rem 0.6rem !important;
    max-height: 50px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  .promo-banner *:not(.promo-close) {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .promo-banner a:not(.promo-close),
  .promo-banner button:not(.promo-close) {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.65rem !important;
  }

  .promo-close {
    font-size: 1rem !important;
    padding: 0.15rem !important;
    position: absolute !important;
    right: 0.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   R6.12a - Promo banner sticks under fixed header
   z-index 9999 = below header (10000), above content
   will-change and explicit bg prevent Safari repaint issues
   -webkit-sticky for older Safari
   ══════════════════════════════════════════════════════════════ */
.promo-banner {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: var(--header-h, 80px) !important;
  z-index: 9999 !important;
  will-change: transform !important;
  background-color: #dc2626 !important;
}

/* Ensure promo banner wrapper doesn't break sticky (if wrapper exists) */
.promo-banner-wrapper {
  overflow: visible !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .promo-banner {
    top: var(--header-h, 70px) !important;
    padding: 8px 10px !important;
    min-height: 0 !important;
  }
  
  .promo-banner h1,
  .promo-banner h2,
  .promo-banner h3,
  .promo-banner strong {
    font-size: 14px !important;
    margin: 0 !important;
  }
  
  .promo-banner p,
  .promo-banner span:not(.promo-close) {
    font-size: 12px !important;
    margin: 4px 0 0 !important;
  }
  
  .promo-banner a:not(.promo-close),
  .promo-banner .promo-cta {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   R6.12a - Only show correct floating CTA per breakpoint
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .mobile-sticky-text {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 767px) {
  .desktop-text-bubble {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   R6.12a - Kill hover square artifact on desktop bubble
   Scoped to direct children to preserve future icons/badges
   Also override global link hover styles on the link itself
   ══════════════════════════════════════════════════════════════ */
.desktop-text-bubble,
.desktop-text-bubble:hover,
.desktop-text-bubble:focus,
.desktop-text-bubble:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  outline: none !important;
}

/* Direct children only - not all descendants */
.desktop-text-bubble > *,
.desktop-text-bubble > *:hover {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.desktop-text-bubble::before,
.desktop-text-bubble::after,
.desktop-text-bubble-link::before,
.desktop-text-bubble-link::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Explicit link hover styles to override any global rules */
.desktop-text-bubble-link {
  background: #e63946 !important;
  background-image: none !important;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
  outline: none !important;
  border: none !important;
}

.desktop-text-bubble-link:hover,
.desktop-text-bubble-link:focus,
.desktop-text-bubble-link:active {
  background: #c1121f !important;
  background-image: none !important;
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5) !important;
  outline: none !important;
  border: none !important;
}