/* ==========================================================================
   PolicyScanner - Global CSS Foundation (BEM Methodology)
   Mobile-first design system for entire website
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables / Design Tokens
   Comprehensive design system for consistent reuse
   ========================================================================== */

:root {
  /* Brand Colors */
  --primary-teal: #3BC5B9;
  --cta-orange: #FF7A2A;
  --cta-hover: #FFA35C;
  
  /* Text Colors */
  --primary-text: #3D4A59;
  --secondary-text: #7C8B97;
  --white-text: #FFFFFF;
  
  /* Background Colors - Enhanced Professional System */
  --bg-white: #FFFFFF;
  --bg-light: #F6F9FA;
  --bg-hero-tint: #F9FEFD;
  --bg-footer: #1A2B32;
  --border-light: #E5E9ED;
  
  /* Professional Background Hierarchy */
  --bg-primary: #FFFFFF;                    /* Pure white - main content */
  --bg-secondary: #F6F9FA;                  /* Professional light - alternating sections */
  --bg-tertiary: #F0F8F7;                   /* Light teal tint - accent sections */
  --bg-quaternary: #FBFEFE;                 /* Subtle cool white - premium sections */

  /* Section-Specific Background Assignments */
  --bg-section-trust-bar: var(--bg-quaternary);
  --bg-section-trust: var(--bg-tertiary);
  --bg-section-how-it-works: var(--bg-primary);
  --bg-section-reviews: var(--bg-tertiary);
  --bg-section-partners: var(--bg-secondary);
  --bg-section-articles: var(--bg-primary);
  --bg-section-faq: var(--bg-secondary);  /* Changed from var(--bg-primary) */

  /* OKLCH Professional Enhancements - Progressive Enhancement */
  --bg-primary-oklch: oklch(100% 0 0);                    /* Pure white */
  --bg-secondary-oklch: oklch(97.5% 0.008 195);           /* Professional light */
  --bg-tertiary-oklch: oklch(96% 0.015 180);             /* Perfect teal integration */
  --bg-quaternary-oklch: oklch(99% 0.005 180);           /* Subtle cool professional */
  
  /* Footer Color System */
  --footer-text-primary: #FFFFFF;
  --footer-text-secondary: rgba(255, 255, 255, 0.85);
  --footer-text-tertiary: rgba(255, 255, 255, 0.65);
  --footer-border: rgba(255, 255, 255, 0.15);
  --footer-link-hover: var(--primary-teal);
  --footer-social-hover: var(--primary-teal);
  
  /* State Colors - Enhanced Error & Success System */
  --success: #28a745;
  --success-light: #d4edda;
  --success-dark: #155724;
  --success-bg: #f8fff9;
  --success-border: #c3e6cb;
  
  --warning: #ffc107;
  --warning-light: #fff3cd;
  --warning-dark: #856404;
  --warning-bg: #fffbf0;
  --warning-border: #ffeaa7;
  
  --error: #dc3545;
  --error-light: #f8d7da;
  --error-dark: #721c24;
  --error-bg: #fff5f5;
  --error-border: #f5c6cb;
  
  --info: #17a2b8;
  --info-light: #d1ecf1;
  --info-dark: #0c5460;
  --info-bg: #f0fdff;
  --info-border: #bee5eb;
  
  /* Typography Scale - Mobile-First Optimized */
  --font-size-xs: 0.75rem;      /* 12px - Micro text (use sparingly!) */
  --font-size-sm: 0.875rem;     /* 14px - Small text (minimum for secondary) */
  --font-size-base: 1rem;       /* 16px - Body text (mobile standard) */
  --font-size-lg: 1.125rem;     /* 18px - Large text */
  --font-size-xl: 1.25rem;      /* 20px - Emphasis text */
  --font-size-2xl: 1.5rem;      /* 24px - Section headers */
  --font-size-3xl: 2rem;        /* 32px - Hero mobile */
  --font-size-4xl: 2.5rem;      /* 40px - Hero tablet */
  --font-size-5xl: 3.125rem;    /* 50px - Hero desktop */

  /* Mobile Typography Sizes - Improved */
  --font-size-h1-mobile: 1.625rem;  /* 26px - Hero/Main headlines */
  --font-size-h2-mobile: 1.5rem;    /* 24px - Section headers */
  --font-size-h3-mobile: 1.25rem;   /* 20px - Subsection headers */
  --font-size-h4-mobile: 1.125rem;  /* 18px - Card headers */

  /* Tablet Typography Sizes - Enhanced */
  --font-size-h1-tablet: 2.5rem;    /* 40px - Better progression */
  --font-size-h2-tablet: 1.75rem;   /* 28px - Section headers */
  --font-size-h3-tablet: 1.375rem;  /* 22px - Subsection headers */
  --font-size-h4-tablet: 1.25rem;   /* 20px - Card headers */

  /* Desktop Typography Sizes - Added */
  --font-size-h1-desktop: 3.125rem; /* 50px - Hero headlines */
  --font-size-h2-desktop: 2rem;     /* 32px - Section headers */
  --font-size-h3-desktop: 1.5rem;   /* 24px - Subsection headers */
  --font-size-h4-desktop: 1.25rem;  /* 20px - Card headers */

  /* CTA Font Sizes - Mobile-First Hierarchy */
  --font-size-cta-hero: 1.125rem;     /* 18px - Hero CTAs mobile */
  --font-size-cta-primary: 1rem;      /* 16px - Primary CTAs */
  --font-size-cta-secondary: 1rem;    /* 16px - Standard CTAs */
  --font-size-cta-tertiary: 0.875rem; /* 14px - Small CTAs */

  /* Body Text Variants - Added */
  --font-size-body-lg: 1.125rem;   /* 18px - Lead paragraphs */
  --font-size-body: 1rem;          /* 16px - Standard body */
  --font-size-body-sm: 0.875rem;   /* 14px - Secondary text */
  --font-size-caption: 0.75rem;    /* 12px - Captions only */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;        /* Added for hero emphasis */

  /* Line Heights - Optimized for mobile */
  --line-height-tight: 1.1;     /* Hero headings */
  --line-height-snug: 1.25;     /* Regular headings */
  --line-height-normal: 1.4;    /* UI text, CTAs */
  --line-height-relaxed: 1.6;   /* Body text for readability */
  
  /* ==========================================================================
     SPACING SYSTEM - Clean Standard Scale
     One system for entire website
     ========================================================================== */
  
  /* Base Spacing Scale - 8px Grid */
  --space-1: 0.5rem;    /* 8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 3.5rem;    /* 56px */

  /* Container & Layout */
  --container-max-width: 1200px;
  --container-max-width-sm: 1280px;        /* Small Desktop: 992px-1365px */
  --container-max-width-lg: 1320px;        /* Large Desktop: 1366px+ */
  --container-padding-mobile: 1.25rem;   /* 20px */
  --container-padding-tablet: 1.5rem;    /* 24px */
  --container-padding-desktop: 2.5rem;   /* 40px */

  /* Section Spacing - Standard for entire site */
  --section-padding-mobile: var(--space-4);     /* 32px */
  --section-padding-tablet: var(--space-5);     /* 40px */
  --section-padding-desktop: 3.25rem;           /* 52px */

  /* Component Spacing */
  --card-padding-mobile: var(--space-3);        /* 24px */
  --card-padding-tablet: 1.75rem;               /* 28px */
  --card-padding-desktop: var(--space-4);       /* 32px */

  /* Button Spacing - Updated to Industry Standards */
  --button-padding-mobile-v: 0.875rem;          /* 14px vertical */
  --button-padding-mobile-h: 1.5rem;            /* 24px horizontal */
  --button-padding-desktop-v: 1.125rem;         /* 18px vertical */
  --button-padding-desktop-h: 2.5rem;           /* 40px horizontal */

  /* Button Heights - Industry Standard */
  --button-height-mobile: 3rem;                 /* 48px */
  --button-height-mobile-large: 3.25rem;        /* 52px for hero */
  --button-height-desktop: 3.5rem;              /* 56px */
  --button-height-desktop-large: 3.75rem;       /* 60px for hero */

  /* Element Spacing - Content Hierarchy */
  --heading-to-text: var(--space-2);            /* 16px */
  --text-to-button: 1.25rem;                    /* 20px */
  --element-gap: var(--space-1);                /* 8px */

  /* Borders & Radius */
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-header: 40;
  --z-modal-overlay: 50;
  --z-modal-content: 51;
  --z-toast: 52;

  /* ==========================================================================
     MICROPOLISH SYSTEM - World-Class Premium Details
     Standardized micro-enhancements for consistent luxury experience
     ========================================================================== */
  
  /* Typography Micropolishes - Premium Text Rendering */
  --micropolish-font-features-base: 'kern' 1, 'liga' 1;
  --micropolish-font-features-full: 'kern' 1, 'liga' 1, 'calt' 1;
  --micropolish-letter-spacing-tight: -0.025em;    /* Hero headings */
  --micropolish-letter-spacing-normal: -0.015em;   /* Section headings */
  --micropolish-letter-spacing-subtle: -0.008em;   /* Body text refinement */
  --micropolish-letter-spacing-micro: -0.003em;    /* Small text */
  --micropolish-text-rendering: optimizeLegibility;
  --micropolish-font-smoothing: antialiased;
  --micropolish-font-smoothing-moz: grayscale;
  
  /* Shadow System Hierarchy - Multi-layered Depth */
  --micropolish-shadow-text-subtle: 0 0.5px 2px rgba(0, 0, 0, 0.04);
  --micropolish-shadow-text-medium: 0 1px 4px rgba(0, 0, 0, 0.08);
  --micropolish-shadow-card-base: 0 2px 8px rgba(59, 197, 185, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02), var(--shadow-sm);
  --micropolish-shadow-card-hover: 0 4px 16px rgba(59, 197, 185, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03), var(--shadow-md);
  --micropolish-shadow-card-premium: 0 8px 32px rgba(59, 197, 185, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), var(--shadow-lg);
  --micropolish-shadow-button-base: 0 4px 12px rgba(59, 197, 185, 0.25), 0 2px 4px rgba(255, 122, 42, 0.15);
  --micropolish-shadow-button-hover: 0 6px 20px rgba(59, 197, 185, 0.3), 0 3px 8px rgba(255, 122, 42, 0.2);
  --micropolish-inset-highlight-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --micropolish-inset-highlight-medium: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --micropolish-inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  /* Background System - Sophisticated Multi-layer */
  --micropolish-gradient-base: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  --micropolish-gradient-premium: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.96) 100%);
  --micropolish-gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 25%, rgba(255, 255, 255, 0.98) 75%, rgba(255, 255, 255, 0.95) 100%);
  --micropolish-radial-accent: radial-gradient(ellipse at 25% 50%, rgba(59, 197, 185, 0.02) 0%, transparent 60%);
  --micropolish-radial-accent-alt: radial-gradient(ellipse at 75% 50%, rgba(59, 197, 185, 0.015) 0%, transparent 50%);
  --micropolish-radial-subtle: radial-gradient(ellipse at 30% 60%, rgba(59, 197, 185, 0.008) 0%, transparent 70%);
  --micropolish-overlay-depth: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%, rgba(59, 197, 185, 0.008) 70%, transparent 100%);
  --micropolish-overlay-premium: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 25%, transparent 50%, rgba(59, 197, 185, 0.005) 75%, transparent 100%);
  
  /* Glassmorphism System - Progressive Enhancement */
  --micropolish-glass-subtle: blur(2px) saturate(1.05);
  --micropolish-glass-medium: blur(8px) saturate(1.1);
  --micropolish-glass-strong: blur(16px) saturate(1.15);
  --micropolish-glass-ultra: blur(20px) saturate(1.2);
  
  /* Premium Transitions & Easing */
  --micropolish-easing-premium: cubic-bezier(0.4, 0, 0.2, 1);
  --micropolish-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --micropolish-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --micropolish-timing-instant: 0.15s;
  --micropolish-timing-fast: 0.2s;
  --micropolish-timing-base: 0.3s;
  --micropolish-timing-slow: 0.4s;
  --micropolish-timing-ultra: 0.6s;
  
  /* Hardware Acceleration - Performance Optimization */
  --micropolish-gpu-base: translateZ(0);
  --micropolish-gpu-hover: translateY(-1px) translateZ(0);
  --micropolish-gpu-hover-strong: translateY(-2px) translateZ(0);
  --micropolish-gpu-active: translateY(-3px) translateZ(0);
  --micropolish-gpu-scale-subtle: scale(1.02) translateZ(0);
  --micropolish-gpu-scale-medium: scale(1.05) translateZ(0);
  
  /* Border System - Refined Edge Treatment */
  --micropolish-border-subtle: 1px solid rgba(229, 233, 237, 0.4);
  --micropolish-border-medium: 1px solid rgba(229, 233, 237, 0.6);
  --micropolish-border-accent: 1px solid rgba(59, 197, 185, 0.15);
  --micropolish-border-accent-hover: 1px solid rgba(59, 197, 185, 0.4);
  --micropolish-border-gradient: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  
  /* Image Enhancement System */
  --micropolish-image-base: saturate(1.05) brightness(1.02);
  --micropolish-image-premium: saturate(1.08) brightness(1.05) contrast(1.02);
  --micropolish-image-grayscale: grayscale(100%) brightness(1.08) contrast(0.95) saturate(0.9);
  --micropolish-image-grayscale-hover: grayscale(20%) brightness(1.05) contrast(1.02) saturate(1.1);
  
  /* Icon Enhancement System */
  --micropolish-icon-base: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
  --micropolish-icon-medium: drop-shadow(0 1px 2px rgba(59, 197, 185, 0.1));
  --micropolish-icon-premium: drop-shadow(0 2px 4px rgba(59, 197, 185, 0.15));
  
  /* Animation Performance */
  --micropolish-will-change-transform: transform;
  --micropolish-will-change-full: transform, opacity, filter;
  --micropolish-will-change-premium: transform, opacity, filter, backdrop-filter;
}

/* Progressive Enhancement Block */
@supports (color: oklch(99% 0.005 180)) {
  :root {
    --bg-primary: var(--bg-primary-oklch);
    --bg-secondary: var(--bg-secondary-oklch);
    --bg-tertiary: var(--bg-tertiary-oklch);
    --bg-quaternary: var(--bg-quaternary-oklch);
  }
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--primary-text);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--primary-teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. Typography System - Mobile First - UPDATED
   Consistent across entire website
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--heading-to-text);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--primary-text);
}

/* H1 - Hero Only - UPDATED */
h1 {
  font-size: var(--font-size-h1-mobile); /* 26px mobile */
  font-weight: var(--font-weight-semibold);
}

/* H2 - Section Headings - UPDATED */
h2 {
  font-size: var(--font-size-h2-mobile); /* 20px mobile */
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--heading-to-text);
}

/* H3 - Subsection Headings - UPDATED */
h3 {
  font-size: var(--font-size-h3-mobile); /* 16px mobile */
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--heading-to-text);
}

/* H4 - Component Headings - UPDATED */
h4 {
  font-size: var(--font-size-h4-mobile); /* 14px */
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--heading-to-text);
}

/* Body Text */
p {
  margin-top: 0;
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
}

/* Text Variants */
.text-large {
  font-size: var(--font-size-sm); /* 14px mobile hero subtext */
  line-height: var(--line-height-relaxed);
}

.text-small {
  font-size: var(--font-size-sm); /* 14px mobile hero subtext */
  line-height: var(--line-height-normal);
}

.text-micro {
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.text-secondary {
  color: var(--secondary-text);
}

.text-white {
  color: var(--white-text);
}

/* ==========================================================================
   4. Layout System (BEM) - Mobile First
   Flexible grid for entire website
   ========================================================================== */

.layout {
  width: 100%;
}

.layout__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding-mobile);
  padding-left: var(--container-padding-mobile);
}

.layout__section {
  padding-top: var(--section-padding-mobile);
  padding-bottom: var(--section-padding-mobile);
}

.layout__grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--space-2) * -1);
  margin-left: calc(var(--space-2) * -1);
}

.layout__grid-item {
  flex: 1 0 0%;
  padding-right: var(--space-2);
  padding-left: var(--space-2);
}

/* Grid Item Sizes */
.layout__grid-item--full { flex: 0 0 100%; max-width: 100%; }
.layout__grid-item--half { flex: 0 0 50%; max-width: 50%; }
.layout__grid-item--third { flex: 0 0 33.333333%; max-width: 33.333333%; }
.layout__grid-item--quarter { flex: 0 0 25%; max-width: 25%; }
.layout__grid-item--two-thirds { flex: 0 0 66.666667%; max-width: 66.666667%; }
.layout__grid-item--three-quarters { flex: 0 0 75%; max-width: 75%; }
.layout__grid-item--seven-twelfths { flex: 0 0 58.333333%; max-width: 58.333333%; }

/* ==========================================================================
   5. Button System (BEM) - CTA Hierarchy
   Consistent button styling across website
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-cta-secondary); /* 16px base */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px; /* Touch-friendly minimum */
}

.button:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.button:active {
  transform: scale(0.98);
}

/* Button Variants */
.button--primary {
  background-color: var(--primary-teal);
  color: var(--white-text);
  border: 1px solid var(--primary-teal);
}

.button--primary:hover,
.button--primary:focus {
  background-color: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--white-text);
}

.button--outline {
  background-color: transparent;
  color: var(--primary-teal);
  border: 1px solid var(--primary-teal);
}

.button--outline:hover,
.button--outline:focus {
  background-color: rgba(59, 197, 185, 0.1);
  color: var(--primary-teal);
}

/* Button Sizes - CTA Hierarchy */
.button--hero {
  padding: calc(var(--button-padding-mobile-v) + 2px) calc(var(--button-padding-mobile-h) + 4px);
  font-size: var(--font-size-cta-hero); /* 20px */
  font-weight: var(--font-weight-semibold);
}

.button--large {
  padding: calc(var(--button-padding-mobile-v) + 1px) calc(var(--button-padding-mobile-h) + 2px);
  font-size: var(--font-size-cta-primary); /* 18px */
  font-weight: var(--font-weight-semibold);
}

.button--navbar {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-cta-tertiary); /* 14px */
  font-weight: var(--font-weight-medium);
  min-height: 36px; /* Smaller for navbar */
}

.button--small {
  padding: calc(var(--button-padding-mobile-v) - 2px) calc(var(--button-padding-mobile-h) - 4px);
  font-size: var(--font-size-cta-tertiary); /* 14px */
  font-weight: var(--font-weight-medium);
}

/* Mobile-only hero button - same size as navbar */
@media (max-width: 767.98px) {
  .button--mobile-hero {
    padding: 0.5rem 1rem !important;
    font-size: var(--font-size-cta-tertiary) !important; /* 14px */
    font-weight: var(--font-weight-medium) !important;
    min-height: 36px !important;
  }
}

/* ==========================================================================
   6. Card Component (BEM)
   ========================================================================== */

.card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--card-padding-mobile);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card__header {
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--heading-to-text);
  color: var(--primary-text);
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--secondary-text);
  margin-bottom: 0;
}

.card__content {
  color: var(--primary-text);
}

.card__content > *:last-child {
  margin-bottom: 0;
}

.card__footer {
  margin-top: var(--text-to-button);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

/* ==========================================================================
   7. Enhanced Form System with Comprehensive Error States
   Complete error handling system for entire website
   ========================================================================== */

.form {
  width: 100%;
}

.form__group {
  margin-bottom: var(--space-3);
  position: relative;
}

.form__label {
  display: block;
  margin-bottom: var(--element-gap);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-text);
  letter-spacing: var(--micropolish-letter-spacing-subtle);
}

/* Required field indicator */
.form__label--required::after {
  content: ' *';
  color: var(--error);
  font-weight: normal;
}

/* Base Form Control */
.form__control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--primary-text);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  transition: all var(--transition-base);
  min-height: 44px; /* Touch-friendly */
}

.form__control:focus {
  border-color: var(--primary-teal);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(59, 197, 185, 0.1);
}

/* ==========================================================================
   Enhanced Error State System - Available Site-Wide
   ========================================================================== */

/* Error States */
.form__control--invalid {
  border-color: var(--error);
  background-color: var(--error-bg);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

.form__control--invalid:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
  outline: none;
}

/* Success States */
.form__control--valid {
  border-color: var(--success);
  background-color: var(--success-bg);
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

.form__control--valid:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

/* Warning States */
.form__control--warning {
  border-color: var(--warning);
  background-color: var(--warning-bg);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.1);
}

.form__control--warning:focus {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.15);
}

/* Info States */
.form__control--info {
  border-color: var(--info);
  background-color: var(--info-bg);
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.1);
}

.form__control--info:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.15);
}

/* Enhanced Error Messages */
.form__error {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--error);
  margin-top: 0.25rem;
  line-height: var(--line-height-normal);
  min-height: 1.2em;
  transition: opacity var(--transition-fast);
}

.form__error:empty {
  opacity: 0;
}

/* Success Messages */
.form__success {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--success);
  margin-top: 0.25rem;
  line-height: var(--line-height-normal);
}

/* Warning Messages */
.form__warning {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--warning-dark);
  margin-top: 0.25rem;
  line-height: var(--line-height-normal);
}

/* Info Messages */
.form__info {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--info);
  margin-top: 0.25rem;
  line-height: var(--line-height-normal);
}

/* Form Hints */
.form__hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--secondary-text);
  margin-top: 0.25rem;
  line-height: var(--line-height-normal);
}

/* Visual Indicators for Form States */
.form__control--invalid::after {
  content: '⚠';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--error);
  font-weight: bold;
  pointer-events: none;
}

.form__control--valid::after {
  content: '✓';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--success);
  font-weight: bold;
  pointer-events: none;
}

/* ==========================================================================
   8. Alert System (BEM) - Site-Wide Notifications
   ========================================================================== */

.alert {
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.alert--error {
  color: var(--error-dark);
  background-color: var(--error-light);
  border-color: var(--error-border);
}

.alert--success {
  color: var(--success-dark);
  background-color: var(--success-light);
  border-color: var(--success-border);
}

.alert--warning {
  color: var(--warning-dark);
  background-color: var(--warning-light);
  border-color: var(--warning-border);
}

.alert--info {
  color: var(--info-dark);
  background-color: var(--info-light);
  border-color: var(--info-border);
}

.alert__icon {
  margin-right: 0.5rem;
  font-size: 1.1em;
}

.alert__title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
}

.alert__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.alert__close:hover {
  opacity: 1;
}

/* ==========================================================================
   9. Utility Classes (Minimal)
   ========================================================================== */

/* Text Utilities */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* Display Utilities */
.u-hidden { display: none; }
.u-block { display: block; }
.u-inline { display: inline; }
.u-inline-block { display: inline-block; }
.u-flex { display: flex; }

/* Flex Utilities */
.u-flex-column { flex-direction: column; }
.u-flex-row { flex-direction: row; }
.u-justify-start { justify-content: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-align-start { align-items: flex-start; }
.u-align-center { align-items: center; }
.u-align-end { align-items: flex-end; }

/* Font Weight Utilities */
.u-font-normal { font-weight: var(--font-weight-normal); }
.u-font-medium { font-weight: var(--font-weight-medium); }
.u-font-semibold { font-weight: var(--font-weight-semibold); }

/* State Utilities */
.u-error { color: var(--error); }
.u-success { color: var(--success); }
.u-warning { color: var(--warning); }
.u-info { color: var(--info); }

/* ==========================================================================
   10. Accessibility & Focus States
   ========================================================================== */

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

.u-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-teal);
  color: var(--white-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  z-index: var(--z-50);
  transition: top var(--transition-fast);
  opacity: 0;
  visibility: hidden;
}

.u-skip-link:focus {
  top: 6px;
  opacity: 1;
  visibility: visible;
}

/* Enhanced Focus Management - Production Ready */

/* Fallback for browsers that don't support :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.button:focus {
  outline: 2px solid var(--primary-teal);
  outline-offset: 2px;
}

.button:focus {
  outline-offset: 4px;
}

/* Progressive enhancement: remove outline for mouse users in supporting browsers */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  .button:focus:not(:focus-visible),
  .selection-card:focus:not(:focus-visible) {
    outline: none;
  }
  
  /* Only show outline when keyboard focused */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .button:focus-visible {
    outline: 2px solid var(--primary-teal);
    outline-offset: 2px;
  }

  .button:focus-visible {
    outline-offset: 4px;
  }
}

/* Form controls need focus styles for usability */
input:focus,
select:focus,
textarea:focus,
.form__control:focus {
  outline: none; /* We handle this in the form styles with border/shadow */
}

/* Error state focus */
.form__control--invalid:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* Success state focus */
.form__control--valid:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

/* ==========================================================================
   11. Responsive Breakpoints - UPDATED TYPOGRAPHY
   ========================================================================== */

/* Small devices (576px+) */
@media (min-width: 576px) {
  .layout__grid-item--sm-half { flex: 0 0 50%; max-width: 50%; }
  .layout__grid-item--sm-third { flex: 0 0 33.333333%; max-width: 33.333333%; }
  
  .u-sm-hidden { display: none; }
  .u-sm-block { display: block; }
}

/* Medium devices (768px+) */
@media (min-width: 768px) {
  /* Container adjustments */
  .layout__container {
    padding-right: var(--container-padding-tablet);
    padding-left: var(--container-padding-tablet);
  }
  
  .layout__section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
  
  /* Typography scaling - UPDATED */
  h1 { font-size: var(--font-size-h1-tablet); } /* 30px tablet */
  h2 { font-size: var(--font-size-2xl); } /* 28px */
  h3 { font-size: var(--font-size-lg); } /* 18px */
  /* H4 stays 14px */
  
  .text-large { font-size: 1rem; } /* 16px tablet hero subtext */
  
  /* Components */
  .card {
    padding: var(--card-padding-tablet);
  }
  
  /* Grid responsive classes */
  .layout__grid-item--md-half { flex: 0 0 50%; max-width: 50%; }
  .layout__grid-item--md-third { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .layout__grid-item--md-quarter { flex: 0 0 25%; max-width: 25%; }
  .layout__grid-item--md-two-thirds { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .layout__grid-item--md-seven-twelfths { flex: 0 0 58.333333%; max-width: 58.333333%; }
  
  /* Utilities */
  .u-md-hidden { display: none; }
  .u-md-block { display: block; }
  .u-md-flex { display: flex; }
}

/* iPad Pro specific fix (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .layout__container {
    max-width: 1240px; /* Wider container specifically for tablets like iPad Pro */
  }
  
  /* Give more width to the content area on tablets */
  .layout__grid-item--md-two-thirds { 
    flex: 0 0 75%; 
    max-width: 75%; 
  }
}

/* Large devices (992px+) */
@media (min-width: 992px) {
  /* Desktop spacing */
  .layout__container {
    padding-right: var(--container-padding-desktop);
    padding-left: var(--container-padding-desktop);
    max-width: var(--container-max-width-sm);  /* ADDED: Progressive scaling */
  }
  
  .layout__section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
  
  .card {
    padding: var(--card-padding-desktop);
  }
  
  /* .button {
    padding: var(--button-padding-desktop-v) var(--button-padding-desktop-h);
  } */
  
  .button--hero {
    padding: calc(var(--button-padding-desktop-v) + 2px) calc(var(--button-padding-desktop-h) + 8px);
  }
  
  .button--large {
    padding: calc(var(--button-padding-desktop-v) + 1px) calc(var(--button-padding-desktop-h) + 4px);
  }
  
  /* Typography scaling - UPDATED */
  h1 { font-size: var(--font-size-3xl); } /* 50px desktop */
  h2 { font-size: var(--font-size-2xl); } /* 28px desktop (same as tablet) */
  h3 { font-size: var(--font-size-lg); } /* 18px desktop (same as tablet) */
  /* H4 stays 14px */
  
  .text-large { font-size: var(--font-size-lg); } /* 18px desktop hero subtext */
  
  /* Grid responsive classes */
  .layout__grid-item--lg-half { flex: 0 0 50%; max-width: 50%; }
  .layout__grid-item--lg-third { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .layout__grid-item--lg-quarter { flex: 0 0 25%; max-width: 25%; }
  .layout__grid-item--lg-two-thirds { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .layout__grid-item--lg-seven-twelfths { flex: 0 0 58.333333%; max-width: 58.333333%; }
  
  /* Utilities */
  .u-lg-hidden { display: none; }
  .u-lg-block { display: block; }
  .u-lg-flex { display: flex; }
}

/* Large Desktop (1366px+) - Progressive Scaling */
@media (min-width: 1366px) {
  .layout__container {
    max-width: var(--container-max-width-lg);  /* 1320px */
  }
}

/* ==========================================================================
   12. High Contrast & Accessibility Support
   ========================================================================== */

@media (prefers-contrast: high) {
  .form__control--invalid {
    border-width: 2px;
    border-color: var(--error);
  }
  
  .form__control--valid {
    border-width: 2px;
    border-color: var(--success);
  }
  
  .form__control--warning {
    border-width: 2px;
    border-color: var(--warning);
  }
  
  .form__control--info {
    border-width: 2px;
    border-color: var(--info);
  }
  
  .form__error,
  .form__success,
  .form__warning,
  .form__info {
    font-weight: var(--font-weight-semibold);
  }
  
  .alert {
    border-width: 2px;
  }
}

/* ==========================================================================
   13. Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .form__control,
  .button,
  .card {
    transition: none;
  }
}

/* ==========================================================================
   14. Print Styles
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .u-no-print {
    display: none !important;
  }
  
  /* Hide error states in print */
  .form__error,
  .form__success,
  .form__warning,
  .form__info {
    display: none !important;
  }
}