/* ==========================================================================
   COMPLAINTPOINT DESIGN SYSTEM & STYLESHEET
   WCAG 2.2 AA Compliant | Fluid Typography | Modern CSS Variables
   ========================================================================== */

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

:root {
  /* ========================================================================
     COMPLAINTPOINT DESIGN SYSTEM v1.0 TOKENS
     Principle: Navy builds trust. Orange drives action. Green resolves.
     ======================================================================== */

  /* 1. Brand Architecture */
  --cp-navy-900: #0B2439;      /* Deep Navy: Footers, very strong headings */
  --cp-navy-800: #12304A;      /* Brand Navy: Primary brand, navigation */
  --cp-navy-700: #17466A;      /* Action Navy: Links, tertiary buttons */
  --cp-navy-600: #2563A6;      /* Medium Blue: Information, focus rings */
  --cp-navy-100: #EAF3FA;      /* Pale Blue: Information & Case ID background */

  /* 2. Action / CTA Architecture (Strict 10% rule - Orange drives action, calibrated for WCAG 2.2 AA 4.65:1 contrast) */
  --cp-orange-600: #D14300;    /* Brand Action Orange: 4.65:1 contrast against white */
  --cp-orange-700: #B33600;    /* Orange Hover: 6.1:1 contrast */
  --cp-orange-800: #962B00;    /* Orange Active */
  --cp-orange-100: #FFF1E8;    /* Pale Orange: Highlights */
  --cp-orange-disabled: #F5B99A;

  /* 3. Progress & Resolution (Resolution Green, calibrated for WCAG 2.2 AA 5.9:1 contrast) */
  --cp-green-600: #116B49;     /* Resolution Green: 5.92:1 contrast against #EAF7F1 */
  --cp-green-700: #0E5A3D;     /* Green Hover / Deep text: 7.2:1 contrast */
  --cp-green-100: #EAF7F1;     /* Pale Green: Success & resolved backgrounds */
  --cp-green-border: #BCE6D2;

  /* 4. Errors & Critical (Never use for ordinary complaints) */
  --cp-red-600: #C83B3B;       /* Error Red: Validation errors only */
  --cp-red-100: #FDEEEE;       /* Pale Red */
  --cp-red-border: #F1C2C2;
  --cp-red-text: #A52F2F;

  /* 5. Warnings & Alerts */
  --cp-amber-600: #B7791F;     /* Warning Amber */
  --cp-amber-100: #FFF8E6;     /* Pale Amber */
  --cp-amber-border: #F3D99A;
  --cp-amber-text: #8A5A12;

  /* 6. AI Features (AI analysis, suggested categories, smart dockets) */
  --cp-purple-600: #7057A6;    /* AI Primary */
  --cp-purple-100: #F3EFFA;    /* AI Pale Background */
  --cp-purple-border: #DDD2F0;

  /* 7. Neutrals & Typography */
  --cp-text-primary: #172033;   /* High-contrast body text */
  --cp-text-secondary: #596579; /* Secondary text */
  --cp-text-tertiary: #526071;  /* Captions & metadata (>4.5:1 contrast against white) */
  --cp-text-placeholder: #64748B;   /* WCAG AA ≥4.5:1 on white */
  --cp-text-disabled: #A8B1BD;

  /* 8. Surfaces */
  --cp-bg: #F5F8FB;             /* Neutral page background */
  --cp-surface: #FFFFFF;        /* Card & container surfaces */
  --cp-surface-subtle: #F8FAFC; /* Subtle nested blocks */
  --cp-surface-elevated: #FFFFFF;

  /* 9. Borders */
  --cp-border: #DCE4EC;         /* Default border */
  --cp-border-strong: #C5D0DB;  /* Strong border */
  --cp-border-input: #8CA3B8;   /* WCAG 1.4.11 ≥3:1 on white */
  --cp-border-input-hover: #7E94A8;
  --cp-focus: #2563A6;          /* Input focus border: ALWAYS BLUE, NEVER ORANGE */

  /* 10. Radius Tokens */
  --cp-radius-sm: 8px;          /* Small controls, inputs, buttons */
  --cp-radius-md: 14px;         /* Standard content cards */
  --cp-radius-lg: 18px;         /* Large hero cards */
  --cp-radius-pill: 999px;      /* Status pills & rounded badges */

  /* 11. Subtle Shadows */
  --cp-shadow-card: 0 2px 8px rgba(18, 48, 74, 0.06);
  --cp-shadow-elevated: 0 8px 24px rgba(18, 48, 74, 0.10);
  --cp-shadow-modal: 0 16px 40px rgba(11, 36, 57, 0.16);

  /* Legacy variable mappings for backward compatibility across subpages */
  --color-primary: var(--cp-orange-600);        /* Primary CTA color */
  --color-primary-hover: var(--cp-orange-700);
  --color-primary-subtle: var(--cp-blue-100);
  --color-secondary: var(--cp-navy-800);
  --color-secondary-hover: var(--cp-navy-900);
  --color-accent: var(--cp-orange-600);
  --color-accent-subtle: var(--cp-orange-100);
  
  --color-background: var(--cp-bg);
  --color-surface: var(--cp-surface);
  --color-surface-hover: var(--cp-surface-subtle);
  --color-surface-alt: var(--cp-surface-subtle);
  
  --color-text: var(--cp-text-primary);
  --color-text-muted: var(--cp-text-secondary);
  --color-text-subtle: var(--cp-text-tertiary);
  --color-text-inverse: #ffffff;
  
  --color-border: var(--cp-border);
  --color-border-subtle: var(--cp-border);
  --color-border-focus: var(--cp-focus);
  
  --color-success: var(--cp-green-600);
  --color-success-subtle: var(--cp-green-100);
  --color-warning: var(--cp-amber-600);
  --color-warning-subtle: var(--cp-amber-100);
  --color-danger: var(--cp-red-600);
  --color-danger-subtle: var(--cp-red-100);
  --color-info: var(--cp-navy-600);
  --color-info-subtle: var(--cp-navy-100);
  
  /* Typography Tokens */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  /* Responsive Scale using clamp() */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);
  --text-xl: clamp(1.1875rem, 1.1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.375rem, 1.25rem + 0.8vw, 1.625rem);
  --text-3xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem);
  --text-4xl: clamp(2.125rem, 1.8rem + 1.8vw, 2.75rem);
  --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

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

  /* Shadows */
  --shadow-sm: var(--cp-shadow-card);
  --shadow-md: 0 4px 12px rgba(18, 48, 74, 0.08);
  --shadow-lg: var(--cp-shadow-elevated);
  --shadow-xl: var(--cp-shadow-modal);
  --shadow-glow: 0 0 0 3px rgba(37, 99, 166, 0.12);

  /* Borders & Radius */
  --radius-sm: var(--cp-radius-sm);
  --radius-md: var(--cp-radius-sm);
  --radius-lg: var(--cp-radius-md);
  --radius-xl: var(--cp-radius-lg);
  --radius-full: var(--cp-radius-pill);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   CSS RESET & BASE DEFAULTS
   ========================================================================== */

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background-color: var(--color-background);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Accessible Focus States */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@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;
  }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: var(--cp-navy-900);
  color: #ffffff;
  padding: 8px 16px;
  z-index: 100;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
  font-weight: 700;
}

.skip-link:focus {
  top: 10px;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ==========================================================================
   TOP UTILITY BAR - LIGHT MODE WITH ORANGE ACCENTS
   ========================================================================== */

.top-bar {
  background-color: #ffffff;
  color: #475569;
  font-size: var(--text-xs);
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.top-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.72rem;
}

.top-bar-badge svg {
  color: #2563eb;
}

.top-bar-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.top-bar-link {
  color: #64748b;
  transition: color var(--transition-fast);
}

.top-bar-link:hover {
  color: #0f172a;
}

.lang-selector-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.lang-selector-wrap:hover,
.lang-selector-wrap:focus-within {
  border-color: #cbd5e1;
  background: #ffffff;
}

.lang-globe-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.lang-select {
  background: transparent;
  border: none;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding: 1px 2px;
}

.lang-select:focus-visible {
  outline: 2px solid var(--color-primary);
  border-radius: 2px;
}

/* ==========================================================================
   NAVIGATION HEADER - LIGHT MODE, COMPACT HEIGHT & ORANGE ACCENTS
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  transition: box-shadow var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-4);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-icon {
  width: 38px;
  height: 38px;
  background: var(--cp-orange-600);
  color: white;
  border-radius: var(--cp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(244, 91, 10, 0.28);
}

.brand-name {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cp-navy-800);
}

.brand-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cp-text-secondary);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 24px;
  list-style: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-links li {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cp-navy-700);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-2) 0;
  position: relative;
  white-space: nowrap !important;
  word-break: keep-all;
  display: inline-block;
  flex-shrink: 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--cp-orange-600);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cp-orange-600);
  border-radius: var(--radius-full);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header-inner {
    gap: var(--space-2);
  }
  .nav-links {
    gap: 16px;
  }
  .header-actions {
    gap: 14px;
  }
}

.header-text-link {
  display: none;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  padding: var(--space-2) 0;
}

@media (min-width: 992px) {
  .header-text-link {
    display: inline-flex;
  }
}

.header-text-link:hover {
  color: var(--cp-navy-800);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header-text-link.active {
  color: var(--cp-orange-600);
  font-weight: 700;
  text-decoration: none;
}

.header-text-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cp-orange-600);
  border-radius: var(--radius-full);
}

.header-text-link:focus-visible {
  outline: 2px solid var(--cp-navy-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.header-text-link.is-authenticated {
  color: var(--cp-navy-800);
  font-weight: 700;
  background: var(--cp-navy-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--cp-navy-600);
  text-decoration: none;
}

.header-lang-wrap {
  display: none;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

@media (min-width: 992px) {
  .header-lang-wrap {
    display: inline-flex;
  }
}

.header-lang-wrap:hover,
.header-lang-wrap:focus-within {
  border-color: #cbd5e1;
  background: #ffffff;
}

.header-lang-wrap .lang-globe-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.header-lang-wrap .lang-select {
  background: transparent;
  border: none;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding: 1px 2px;
}

.header-lang-wrap .lang-select:focus-visible {
  outline: 2px solid var(--cp-navy-600);
  border-radius: 2px;
}

.header-business-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cp-text-secondary);
  background: var(--cp-bg);
  border: 1px solid var(--cp-border);
  padding: 6px 12px;
  border-radius: var(--cp-radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.header-auth-btn {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--cp-navy-700);
  background: #ffffff;
  border: 1px solid #c8dfef;
  padding: 6px 12px;
  border-radius: var(--cp-radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.header-auth-btn:hover {
  background: var(--cp-navy-100);
  color: var(--cp-navy-800);
  border-color: var(--cp-navy-600);
}

.header-auth-btn.is-authenticated {
  background: var(--cp-navy-100);
  color: var(--cp-navy-800);
  border-color: var(--cp-navy-600);
  box-shadow: 0 1px 3px rgba(18, 48, 74, 0.08);
}

.header-business-btn:hover {
  background: #ffffff;
  color: var(--cp-navy-800);
  border-color: var(--cp-navy-800);
}

#btnHeaderSubmit {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 8px; /* 24px flex gap + 8px margin = 32px separation from text links */
  background-color: var(--cp-orange-600);
  border: 1px solid var(--cp-orange-600);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 2px 8px rgba(244, 91, 10, 0.28);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.site-header.scrolled #btnHeaderSubmit {
  display: inline-flex;
}

#btnHeaderSubmit:hover {
  background-color: var(--cp-orange-700);
  border-color: var(--cp-orange-700);
  box-shadow: 0 4px 14px rgba(244, 91, 10, 0.38);
  transform: translateY(-1px);
}

#btnHeaderSubmit:focus-visible {
  outline: 3px solid #ffd5c2;
  outline-offset: 2px;
}

@media (max-width: 639px) {
  #btnHeaderSubmit {
    display: none;
  }
}

.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}

@media (min-width: 992px) {
  .nav-toggle-btn {
    display: none;
  }
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  box-shadow: var(--shadow-xl);
  z-index: 39;
}

.mobile-nav-drawer.open {
  display: block;
}

.mobile-lang-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.mobile-lang-wrap .lang-select {
  font-size: var(--text-sm);
  width: 100%;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-nav-item a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.mobile-nav-item a:hover {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

/* ==========================================================================
   BUTTONS & UI COMPONENTS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6875rem 1.375rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

.btn-primary {
  background-color: var(--cp-orange-600);
  color: #ffffff;
  border: 1px solid var(--cp-orange-600);
  box-shadow: 0 2px 8px rgba(244, 91, 10, 0.28);
  font-weight: 700;
}

.btn-primary:hover {
  background-color: var(--cp-orange-700);
  border-color: var(--cp-orange-700);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(244, 91, 10, 0.38);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--cp-orange-800);
  border-color: var(--cp-orange-800);
  transform: translateY(0);
}

.btn-primary:disabled,
.btn-primary[disabled] {
  background-color: var(--cp-orange-disabled) !important;
  border-color: var(--cp-orange-disabled) !important;
  color: #ffffff !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary:focus-visible {
  outline: 3px solid #ffd5c2;
  outline-offset: 2px;
}

.btn-secondary {
  background-color: #ffffff;
  color: var(--cp-navy-800);
  border: 1px solid var(--cp-border-input);
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--cp-bg);
  border-color: var(--cp-navy-800);
  color: var(--cp-navy-800) !important;
}

.btn-tertiary,
.btn-link {
  background: none;
  border: none;
  color: var(--cp-navy-700);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.btn-tertiary:hover,
.btn-link:hover {
  color: var(--cp-navy-800);
  text-decoration: underline;
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--cp-navy-800);
  border-color: var(--cp-navy-800);
}

.btn-outline-primary:hover {
  background-color: var(--cp-navy-800);
  color: #ffffff !important;
  border-color: var(--cp-navy-800);
}

.btn-outline-light {
  background-color: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.btn-outline-light:hover {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* High-Contrast Light Buttons (For Dark Background Sections) */
.btn-light-solid {
  background-color: #ffffff !important;
  color: #1d4ed8 !important;
  border: 1.5px solid #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-light-solid:hover {
  background-color: #f8fafc !important;
  color: #1e40af !important;
  border-color: #f8fafc !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.btn-light-outline {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-light-outline:hover {
  background-color: #ffffff !important;
  color: #1d4ed8 !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.btn-dark {
  background-color: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
}

.btn-dark:hover {
  background-color: var(--color-secondary-hover);
  color: #ffffff !important;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 0.4375rem 0.875rem;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-block {
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.badge-partner {
  background-color: var(--color-success-subtle);
  color: #065f46;
  border: 1px solid rgba(6, 95, 70, 0.2);
}

.badge-claimed {
  background-color: var(--color-info-subtle);
  color: #075985;
  border: 1px solid rgba(7, 89, 133, 0.2);
}

.badge-listed {
  background-color: var(--color-warning-subtle);
  color: #92400e;
  border: 1px solid rgba(146, 64, 14, 0.2);
}

/* ==========================================================================
   HERO SECTION - B2C DOMINANT WITH INTEGRATED INTAKE
   ========================================================================== */

.hero-section {
  position: relative;
  background: radial-gradient(1000px 380px at 50% 0%, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  padding: var(--space-4) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

/* Background luminous subtle aura */
.hero-section::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 350px;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.03) 0%, rgba(37, 99, 235, 0.02) 50%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
}

/* ==========================================================================
   HERO GRAND BANNER: LIGHT MODE, COMPACT HEIGHT & WARM ORANGE ACCENTS
   ========================================================================== */

.hero-grand-banner-wrap {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  position: relative;
}

/* Master Grand Banner Showcase Frame - Clean, Balanced Layout */
.hero-grand-banner-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 12px 36px -10px rgba(11, 36, 57, 0.08), 
    0 0 0 1px rgba(226, 232, 240, 0.9);
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  min-height: 420px;
}

/* Hero Content Grid Layered Over Banner - 55% Content / 45% Visual */
.banner-content-overlay-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8, 32px);
  padding: 40px 44px;
  align-items: center;
}

/* Light Mode Calm Content Card */
.hero-glass-content-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: left;
  max-width: 580px;
}

.hero-glass-content-card .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cp-navy-100, #eaf3fa);
  color: var(--cp-navy-700, #17466a);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid #c8dfef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.hero-glass-content-card .hero-eyebrow svg {
  color: var(--cp-navy-600, #2563a6);
  flex-shrink: 0;
}

.hero-glass-content-card .hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.18;
  color: var(--cp-navy-900);
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  text-align: left;
}

@media (min-width: 1200px) {
  .hero-glass-content-card .hero-title {
    font-size: 2.45rem;
  }
}

.hero-glass-content-card .hero-title .highlight {
  color: var(--cp-navy-900);
  -webkit-text-fill-color: var(--cp-navy-900);
  background: none;
}

.hero-glass-content-card .hero-description {
  font-size: 1.05rem;
  color: var(--cp-text-secondary);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-bottom: 24px;
  max-width: 500px;
  text-align: left;
}

/* Hero Primary and Secondary Actions */
.hero-actions-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.btn-hero-start {
  background-color: var(--cp-orange-600);
  border: 1px solid var(--cp-orange-600);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 13px 26px;
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 4px 14px rgba(209, 67, 0, 0.32);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-start:hover {
  background-color: var(--cp-orange-700);
  border-color: var(--cp-orange-700);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(209, 67, 0, 0.42);
}

.btn-hero-start:focus-visible {
  outline: 3px solid #ffd5c2;
  outline-offset: 2px;
}

.btn-hero-track {
  background-color: #ffffff;
  border: 1.5px solid var(--cp-navy-700);
  color: var(--cp-navy-700) !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: var(--cp-radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-track:hover {
  background-color: var(--cp-navy-100);
  border-color: var(--cp-navy-800);
  color: var(--cp-navy-800) !important;
  transform: translateY(-1px);
}

.btn-hero-track:focus-visible {
  outline: 3px solid rgba(37, 99, 166, 0.25);
  outline-offset: 2px;
}

/* 3 Clear Reassurance Points */
.hero-reassurance-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--cp-border);
}

.reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cp-navy-800);
}

.reassurance-item svg {
  flex-shrink: 0;
}

/* Right Column Visual Stage - Clean Emotional Support Photo */
.hero-visual-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-wrap {
  width: 100%;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px -6px rgba(11, 36, 57, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
  position: relative;
  background-color: #f8fafc;
}

.hero-clean-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 25%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-wrap:hover .hero-clean-img {
  transform: scale(1.02);
}

/* ==========================================================================
   TRUST PROOF STRIP (GROUNDED PLATFORM METRICS)
   ========================================================================== */
.trust-proof-strip {
  background-color: #ffffff;
  border-top: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
  padding: 22px 0;
  box-shadow: 0 1px 3px rgba(11, 36, 57, 0.02);
}

.trust-proof-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.trust-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.trust-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cp-navy-900);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.trust-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trust-proof-divider {
  width: 1px;
  height: 32px;
  background-color: var(--cp-border);
}

/* ==========================================================================
   CONVERSION SECTION: PROGRESSIVE COMPLAINT INTAKE
   ========================================================================== */
.intake-conversion-section {
  padding: 56px 0 48px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--cp-border);
}

.intake-conversion-box {
  max-width: 820px;
  margin: 0 auto;
}

.intake-section-header {
  text-align: center;
  margin-bottom: 28px;
}

.intake-section-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--cp-navy-900);
  letter-spacing: -0.02em;
  margin-top: 6px;
  margin-bottom: 6px;
}

.intake-section-subtitle {
  font-size: 1.05rem;
  color: var(--cp-text-secondary);
  font-weight: 500;
}

.intake-conversion-section .intake-starter-card {
  background: #ffffff;
  border-radius: var(--cp-radius-lg, 14px);
  border: 1px solid var(--cp-border);
  box-shadow: 0 10px 30px -5px rgba(11, 36, 57, 0.07), 0 0 0 1px rgba(226, 232, 240, 0.8);
  padding: 28px 32px;
}

.intake-conversion-section .intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.intake-conversion-section .company-search-group {
  grid-column: 1 / -1;
}

.intake-conversion-section .submit-cta-group {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.intake-conversion-section .form-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cp-navy-900);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intake-conversion-section .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--cp-navy-100);
  color: var(--cp-navy-700);
  border: 1px solid #c8dfef;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.intake-conversion-section .form-select,
.intake-conversion-section .form-input {
  height: 44px;
  border: 1.5px solid var(--cp-border-input);
  border-radius: var(--cp-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cp-text-primary);
  background-color: #ffffff;
  padding: 0 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(18, 48, 74, 0.04);
  width: 100%;
}

.intake-conversion-section .form-select:focus,
.intake-conversion-section .form-input:focus {
  border-color: var(--cp-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 166, 0.12);
  outline: none;
}

.intake-conversion-section .search-input-with-icon {
  padding-left: 38px !important;
}

.intake-conversion-section .search-icon-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-text-tertiary);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.intake-conversion-section #btnHeroSubmit {
  height: 48px;
  width: 100%;
  background-color: var(--cp-orange-600);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.02rem;
  border: 1px solid var(--cp-orange-600);
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 4px 14px rgba(209, 67, 0, 0.32);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.intake-conversion-section #btnHeroSubmit:hover {
  background-color: var(--cp-orange-700);
  border-color: var(--cp-orange-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(209, 67, 0, 0.42);
}

.intake-conversion-section #btnHeroSubmit:focus-visible {
  outline: 3px solid #ffd5c2;
  outline-offset: 2px;
}

.intake-conversion-section .intake-privacy-guarantee {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--cp-bg);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  font-size: 0.82rem;
  color: var(--cp-text-secondary);
  text-align: center;
  line-height: 1.4;
}

.intake-conversion-section .company-search-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.intake-conversion-section .company-search-hint {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
  font-style: italic;
}

.intake-conversion-section .intake-add-company-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #475569;
}

.intake-conversion-section .btn-add-company-link {
  color: var(--cp-navy-700);
  font-weight: 700;
  font-size: 0.78rem;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.intake-conversion-section .btn-add-company-link:hover {
  color: var(--cp-orange-600);
}

/* Responsive Media Queries for Simplified Hero */
@media (max-width: 991px) {
  .banner-content-overlay-grid {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    gap: 24px;
  }

  .hero-image-wrap {
    height: 260px;
  }

  .hero-glass-content-card .hero-title {
    font-size: 1.75rem;
  }

  .trust-proof-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .trust-proof-divider {
    display: none;
  }

  .intake-conversion-section .intake-starter-card {
    padding: 20px 18px;
  }

  .intake-conversion-section .intake-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .hero-glass-content-card .hero-title {
    font-size: 1.5rem;
  }

  .hero-actions-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-hero-start,
  .btn-hero-track {
    width: 100%;
    justify-content: center;
  }

  .hero-reassurance-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Embedded Zero-Friction Complaint Intake Starter Card */
.intake-starter-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .intake-starter-card {
    padding: var(--space-8);
  }
}

.intake-starter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.intake-starter-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.intake-guarantee {
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3-Step Filter Row */
.intake-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .intake-grid {
    grid-template-columns: 1fr 1.25fr 1.75fr auto;
    align-items: end;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  text-align: left;
}

.form-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.select-wrapper, .input-wrapper {
  position: relative;
}

.form-select, .form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--cp-border-input);
  border-radius: var(--cp-radius-sm);
  background-color: var(--cp-surface);
  color: var(--cp-text-primary);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.form-select:hover, .form-input:hover {
  border-color: var(--cp-border-input-hover);
}

.form-select:focus, .form-input:focus {
  border-color: var(--cp-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 166, 0.12);
  outline: none;
}

.search-input-wrapper {
  position: relative;
}

.search-icon-left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-input-with-icon {
  padding-left: 42px;
}

/* Autocomplete Dropdown */
.autocomplete-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  list-style: none;
  display: none;
}

.autocomplete-menu.show {
  display: block;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}

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

.autocomplete-item:hover, .autocomplete-item.selected {
  background-color: var(--cp-navy-100);
}

.autocomplete-item.selected {
  border-left: 3px solid var(--cp-navy-600);
}

.autocomplete-item-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.company-mini-logo {
  width: 28px;
  height: 28px;
  background: var(--cp-navy-100);
  color: var(--cp-navy-700);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: var(--cp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.autocomplete-item-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.autocomplete-item-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.autocomplete-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.intake-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.btn-add-company-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-add-company-link:hover {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   TRUST METRICS & CREDIBILITY BAR
   ========================================================================== */

.trust-metrics-bar {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-6) 0;
}

.trust-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

.trust-metric-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}

.trust-metric-icon {
  width: 44px;
  height: 44px;
  background-color: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.trust-metric-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary);
}

.trust-metric-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   HOW IT WORKS SECTION
   ========================================================================== */

.section {
  padding: var(--space-16) 0;
  scroll-margin-top: 80px;
}

.section-alt {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-navy-600, #2563A6);
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-secondary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.stepper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
}

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

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

.step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  transition: all var(--transition-fast);
}

.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

.step-number-bubble {
  width: 38px;
  height: 38px;
  background-color: var(--color-secondary);
  color: #ffffff;
  font-weight: 800;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.step-card:first-child .step-number-bubble {
  background-color: var(--color-primary);
}

.step-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Platform Neutrality & Independence Banner */
.neutrality-banner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-10);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.neutrality-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.neutrality-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: var(--space-1);
}

.neutrality-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
}

/* ==========================================================================
   DYNAMIC COMPANY SHOWCASE SECTION
   ========================================================================== */

.showcase-search-toolbar {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  padding: 5px 8px 5px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.showcase-search-toolbar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12), var(--shadow-md);
}

.showcase-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 200px;
}

.showcase-search-icon {
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
  pointer-events: none;
}

.showcase-search-input {
  width: 100%;
  height: 42px;
  padding-left: 28px;
  padding-right: 28px;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-family: inherit;
  outline: none;
}

.showcase-search-input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.btn-clear-search {
  position: absolute;
  right: var(--space-2);
  background: var(--color-surface-hover);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-clear-search:hover {
  background: var(--color-border);
  color: var(--color-secondary);
}

.showcase-nav-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.showcase-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.showcase-nav-tab:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.showcase-nav-tab.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.tab-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  background: var(--color-surface-hover);
  color: var(--color-secondary);
}

.showcase-nav-tab.active .tab-pill-badge {
  background: #ffffff;
  color: var(--color-primary);
}

.showcase-filter-controls-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.showcase-sector-select-wrap,
.showcase-country-select-wrap,
.showcase-toggle-wrap {
  position: relative;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-2);
  display: flex;
  align-items: center;
}

.showcase-sector-select,
.showcase-country-select {
  height: 38px;
  padding: 0 28px 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-hover);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all var(--transition-fast);
  max-width: 175px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showcase-sector-select:hover,
.showcase-sector-select:focus,
.showcase-country-select:hover,
.showcase-country-select:focus {
  background-color: var(--color-surface-alt);
  border-color: var(--color-primary);
  outline: none;
}

/* View Mode Switcher (Grid vs Table) */
.view-mode-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px;
  flex-shrink: 0;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.view-toggle-btn:hover {
  color: var(--color-secondary);
}

.view-toggle-btn.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.showcase-meta-row {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-2);
}

.showcase-results-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.btn-reset-filters {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}

.btn-reset-filters:hover {
  text-decoration: underline;
  opacity: 0.85;
}

@media (max-width: 960px) {
  .showcase-search-toolbar {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .showcase-filter-controls-group {
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
  }

  .showcase-sector-select-wrap,
  .showcase-country-select-wrap {
    border-left: none;
    padding-left: 0;
    flex: 1;
    min-width: 140px;
  }

  .showcase-toggle-wrap {
    border-left: none;
    padding-left: 0;
    margin-left: auto;
  }

  .showcase-sector-select,
  .showcase-country-select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 580px) {
  .showcase-toggle-wrap {
    width: 100%;
    margin-left: 0;
  }

  .view-mode-toggle-group {
    width: 100%;
  }

  .view-toggle-btn {
    flex: 1;
    justify-content: center;
  }
}

.filter-tabs-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  white-space: nowrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.filter-tab {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-tab:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
}

.filter-tab.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   DATA TABLE DESIGN SYSTEM (DIRECTORY & PUBLIC ACTIVITY)
   ========================================================================== */

.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-8);
  -webkit-overflow-scrolling: touch;
}

.directory-table,
.activity-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.directory-table th,
.activity-table th {
  background: var(--color-surface-hover);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.directory-table th.sortable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.directory-table th.sortable:hover {
  background: var(--color-border);
}

.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.4;
  font-size: 11px;
}

.directory-table th.active-sort .sort-indicator {
  opacity: 1;
  color: var(--color-primary);
}

.directory-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  color: var(--color-text);
}

.activity-table th {
  padding: 12px 10px;
}

.activity-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.directory-table tbody tr {
  cursor: pointer;
}

.directory-table tbody tr:hover,
.activity-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.03);
}

.table-company-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-company-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: contain;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.table-company-meta {
  display: flex;
  flex-direction: column;
}

.table-company-name {
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.3;
}

.table-company-website {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.table-company-website:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.table-code-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-surface-hover);
  color: var(--color-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.table-category-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-hover);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.table-rating-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
}

.table-star-icon {
  color: #f59e0b;
}

.table-complaint-count {
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
}

.table-subject-cell {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-resolution-cell {
  max-width: 150px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-date-cell {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.companies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

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

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

.company-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
  position: relative;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.company-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
}

.company-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.company-card-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.company-card-titles {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.company-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.company-logo-avatar {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.company-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.company-mini-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.company-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.3;
}

.company-card-category {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.company-card-stats {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-subtle);
}

.company-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.company-stat-divider {
  width: 1px;
  height: 36px;
  background-color: var(--color-border);
}

.stat-label {
  color: #64748b;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.stat-value {
  font-weight: 800;
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.2;
}

.stat-value.rating-val {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star-icon {
  color: #f59e0b;
  font-size: 1.1rem;
}

.rating-max {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.company-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

/* Demoted Secondary Outline Button to eliminate Button Soup */
.btn-card-file-complaint {
  background: #ffffff !important;
  color: var(--cp-navy-800) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-card-file-complaint:hover {
  background: #f8fafc !important;
  color: var(--cp-orange-700) !important;
  border-color: var(--cp-orange-600) !important;
  box-shadow: 0 2px 8px rgba(244, 91, 10, 0.15) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   DIRECTORY PAGINATION SLIDER (6 Items Per Slide)
   ========================================================================== */

.showcase-pagination-slider,
.category-pagination-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.slider-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 42px;
  min-width: 42px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  color: var(--cp-navy-800);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.slider-nav-btn:hover:not(:disabled) {
  background: #f8fafc;
  color: var(--cp-orange-700);
  border-color: var(--cp-orange-600);
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.12);
  transform: translateY(-1px);
}

.slider-nav-btn:focus-visible {
  outline: 2px solid var(--cp-orange-600);
  outline-offset: 2px;
}

.slider-nav-btn:disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

.slider-pagination-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.slider-page-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  color: var(--cp-navy-800);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.slider-page-pill:hover:not(.active) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.slider-page-pill.active {
  background: var(--cp-orange-600) !important;
  border-color: var(--cp-orange-600) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
  cursor: default;
}

.slider-page-pill:focus-visible {
  outline: 2px solid var(--cp-orange-600);
  outline-offset: 2px;
}

.companies-grid.slide-transition,
.category-grid.slide-transition {
  animation: fadeInSlide 0.25s ease-out forwards;
}

@keyframes fadeInSlide {
  from {
    opacity: 0.4;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   PUBLIC TRACKING SECTION
   ========================================================================== */

.tracking-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Visual Case Lifecycle Preview */
.tracking-preview-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-8);
  max-width: 800px;
  margin: 0 auto var(--space-6);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.tracking-preview-title {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: var(--space-4);
  text-align: center;
}

.tracking-stages-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: var(--space-2);
}

.tracking-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.stage-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.stage-complete .stage-bubble {
  background: #ecfdf5;
  color: #15803d;
  border: 1.5px solid #86efac;
}

.stage-active .stage-bubble {
  background: #eff6ff;
  color: #2563eb;
  border: 2px solid #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.stage-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.stage-pending .stage-bubble {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #94a3b8;
  font-weight: 700;
}

.stage-pending .stage-name {
  color: #1e293b;
}

.stage-pending .stage-meta {
  color: #475569;
}

.stage-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.stage-meta {
  font-size: 0.72rem;
  color: #475569;
  white-space: nowrap;
}

.stage-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin-top: -22px;
}

.stage-line.line-complete {
  background: #10b981;
}

.stage-line.line-active {
  background: linear-gradient(90deg, #10b981 0%, #2563eb 100%);
}

@media (max-width: 640px) {
  .tracking-stages-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .stage-line {
    display: none;
  }
  .tracking-stage {
    flex-direction: row;
    text-align: left;
    gap: var(--space-3);
  }
  .stage-info {
    align-items: flex-start;
  }
}

.tracking-search-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  max-width: 800px;
  margin: 0 auto var(--space-8);
}

.tracking-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

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

.tracking-input {
  flex: 1;
  height: 52px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.tracking-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.tracking-input::placeholder {
  text-transform: none;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: normal;
  color: #94a3b8;
}

.sample-tracking-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #f1f5f9;
}

.sample-chips-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sandbox-badge {
  display: inline-flex;
  align-items: center;
  background: #fff1e8;
  color: #9a3412;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid #fed7aa;
}

.sample-chips-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.chips-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-family: var(--font-mono);
  font-size: 0.775rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip-btn:hover {
  background: var(--cp-navy-100, #eaf3fa);
  border-color: var(--cp-navy-600, #2563a6);
  color: var(--cp-navy-800, #12304a);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

/* Timeline Results Box */
.tracking-result-card {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  max-width: 860px;
  margin: 0 auto;
}

.tracking-result-card.show {
  display: block;
}

.tracking-header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.tracking-id-large {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* 5-Stage Timeline Stepper */
.timeline-stepper {
  list-style: none;
  position: relative;
  margin: var(--space-6) 0;
  padding-left: var(--space-6);
}

.timeline-stepper::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 20px;
  width: 2px;
  background: var(--color-border-subtle);
}

.timeline-step {
  position: relative;
  padding-bottom: var(--space-6);
  padding-left: var(--space-8);
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-bullet {
  position: absolute;
  left: -2px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-text-muted);
  z-index: 2;
}

.timeline-step.completed .timeline-bullet {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.timeline-step.current .timeline-bullet {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.timeline-step-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary);
}

.timeline-step-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.timeline-step-note {
  font-size: var(--text-xs);
  color: var(--color-text);
  background: var(--color-surface-alt);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

/* ==========================================================================
   CATEGORY EXPLORER
   ========================================================================== */

.category-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.category-side-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  color: var(--cp-navy-800);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  z-index: 2;
}

.category-side-arrow:hover:not(:disabled) {
  background: #ffffff;
  color: var(--cp-orange-700);
  border-color: var(--cp-orange-600);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.2);
  transform: scale(1.08);
}

.category-side-arrow:focus-visible {
  outline: 2px solid var(--cp-orange-600);
  outline-offset: 2px;
}

.category-side-arrow:disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.category-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

@media (min-width: 1024px) {
  .category-side-arrow {
    display: inline-flex;
  }
  .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.category-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.category-tile:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.category-tile-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

.category-tile-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary);
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.category-tile-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   CONTENT SAFETY & ANTI-DEFAMATION BANNER
   ========================================================================== */

.moderation-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .moderation-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.moderation-content {
  max-width: 720px;
}

.moderation-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.moderation-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.moderation-action {
  flex-shrink: 0;
}

/* ==========================================================================
   CONSUMER FAQ ACCORDION
   ========================================================================== */

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item.open {
  border-color: var(--color-primary);
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-secondary);
  cursor: pointer;
  gap: var(--space-4);
}

.faq-question-btn:focus-visible {
  outline: 2px solid var(--cp-focus);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.faq-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

/* ==========================================================================
   B2B SECTION ("ARE YOU A BUSINESS?") - COMPACT & VALUE-FOCUSED
   ========================================================================== */

.business-section {
  background: #0f172a;
  color: #f8fafc;
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
}

.business-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 992px) {
  .business-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.business-header-eyebrow {
  color: #60a5fa;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  display: block;
}

.business-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.business-description {
  font-size: var(--text-base);
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.b2b-tier-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .b2b-tier-comparison {
    grid-template-columns: 1fr 1fr;
  }
}

.b2b-tier-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.b2b-tier-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-2);
}

.tier-free {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.tier-premium {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.b2b-feature-list {
  list-style: none;
  font-size: var(--text-xs);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.b2b-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Dashboard Mockup Card */
.dashboard-preview-card {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}

.preview-company-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: #ffffff;
}

.preview-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.preview-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.preview-stat-num {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
}

.preview-stat-txt {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.preview-inbox-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.preview-item-title {
  color: #f8fafc;
  font-weight: 600;
}

.preview-item-sub {
  color: #94a3b8;
  font-size: 0.7rem;
}

/* ==========================================================================
   FINAL CONVERSION CTA
   ========================================================================== */

.final-cta-section {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  color: #ffffff;
  padding: var(--space-16) 0;
  text-align: center;
}

.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.final-cta-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.final-cta-desc {
  font-size: var(--text-base);
  color: #bfdbfe;
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

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

.site-footer {
  background-color: var(--cp-navy-900);
  color: #94a3b8;
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-sm);
}

.site-footer p,
.site-footer .footer-desc,
.site-footer .footer-disclaimer {
  color: #94a3b8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.site-footer .brand-name,
.footer-logo .brand-name {
  color: #ffffff !important;
}

.footer-col-title {
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-link {
  color: #94a3b8;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: #ffffff;
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: #94a3b8;
}

/* ==========================================================================
   MOBILE STICKY ACTION BAR
   ========================================================================== */

.mobile-sticky-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  z-index: 35;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

#btnMobileStickySubmit {
  background-color: var(--cp-orange-600);
  border: 1px solid var(--cp-orange-600);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 2px 8px rgba(244, 91, 10, 0.28);
}

#btnMobileStickySubmit:hover {
  background-color: var(--cp-orange-700);
  border-color: var(--cp-orange-700);
}

#btnMobileStickySubmit:focus-visible {
  outline: 3px solid #ffd5c2;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  body {
    padding-bottom: 72px;
  }
}

@media (min-width: 992px) {
  .mobile-sticky-bar {
    display: none;
  }
}

/* ==========================================================================
   MODAL DIALOGS (COMPLAINT INTAKE & ADD COMPANY)
   ========================================================================== */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}

.modal-backdrop.open {
  display: flex !important;
}

.modal-dialog {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  position: relative;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-secondary);
}

.modal-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}

.modal-close-btn:hover {
  color: var(--color-danger);
}

.modal-body {
  padding: var(--space-6);
}

.duplicate-warning-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  padding: 12px 14px;
}

.duplicate-warning-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.duplicate-icon {
  color: #d97706;
  flex-shrink: 0;
  margin-top: 2px;
}

.duplicate-warning-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 2px;
}

.duplicate-warning-sub {
  font-size: 0.8rem;
  color: #78350f;
  margin-bottom: 8px;
  line-height: 1.4;
}

.duplicate-select-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
  background: #ffffff;
  border-color: #d97706;
  color: #b45309;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.duplicate-select-btn:hover {
  background: #d97706;
  color: #ffffff;
  border-color: #b45309;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 100px;
}

.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.char-counter {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 2px;
}

.file-upload-box {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-alt);
  transition: all var(--transition-fast);
}

.file-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.checkbox-control {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.checkbox-control input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

/* Success Modal Styles */
.success-card-content {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.success-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--cp-green-100);
  color: var(--cp-green-600);
  border: 1px solid var(--cp-green-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-4);
}

.tracking-box-highlight {
  background: var(--cp-navy-100);
  border: 1.5px solid #c8dfef;
  border-radius: var(--cp-radius-md);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tracking-number-text {
  font-size: var(--text-2xl);
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--cp-navy-700);
  letter-spacing: 0.05em;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  background: var(--color-secondary);
  color: #ffffff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: toastFade 0.3s ease;
}

@keyframes toastFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   BENGALI TYPOGRAPHY & LOCALIZATION (i18n)
   ========================================================================== */

body.font-bengali {
  font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.font-bengali .hero-title {
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

body.font-bengali .form-label,
body.font-bengali .btn,
body.font-bengali .nav-link,
body.font-bengali .step-title,
body.font-bengali .section-title,
body.font-bengali .section-subtitle,
body.font-bengali .intake-starter-title,
body.font-bengali .hero-eyebrow,
body.font-bengali .section-eyebrow,
body.font-bengali .stat-desc,
body.font-bengali .neutrality-title,
body.font-bengali .neutrality-desc {
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}

/* ==========================================================================
   Complaint Submission Dual OTP Verification Modal Styles
   ========================================================================== */

.otp-inputs-grid {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.75rem 0;
}

@media (max-width: 480px) {
  .otp-inputs-grid {
    gap: 0.35rem;
  }
}

.otp-digit-input {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: monospace;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

@media (max-width: 480px) {
  .otp-digit-input {
    width: 38px;
    height: 48px;
    font-size: 1.25rem;
  }
}

.otp-digit-input:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2);
}

.otp-digit-input.filled {
  border-color: #475569;
  background-color: #f8fafc;
}

.otp-digit-input.error {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  animation: otpShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes otpShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

.otp-helper-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #1e40af;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.btn-resend-otp {
  background: none;
  border: none;
  color: #1d4ed8;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  text-decoration: underline;
}

.btn-resend-otp:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
}

/* Complaint Modal Wizard */
.complaint-step-indicator {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.complaint-step-dot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #94a3b8;
  font-weight: 500;
}
.complaint-step-dot.active {
  color: #0f172a;
  font-weight: 700;
}
.complaint-step-dot > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.complaint-step-dot.active > span:first-child {
  background: #ea580c;
  color: white;
}
.complaint-wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}
.complaint-wizard-back {
  background: transparent;
  border: 1px solid #dce4ec;
  color: #475569;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.complaint-wizard-back:hover {
  background: #f1f5f9;
}
.complaint-wizard-next {
  background: #ea580c;
  color: white;
  border: none;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.complaint-wizard-next:hover {
  background: #d14300;
}


/* =========================================================
ASP.NET Core / jQuery Validation
========================================================= */

/* Validation message container */
.field-validation-error,
.text-danger {
    display: block !important;
    color: #dc2626 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.25rem;
}

    /* Actual validation message generated by jQuery Validate */
    .field-validation-error span,
    .text-danger span,
    span[id$="-error"] {
        color: #dc2626 !important;
        font-size: 0.8125rem;
        font-weight: 500;
    }

/* Validation message when there is no error */
.field-validation-valid {
    display: none;
}

/* =========================================================
Invalid Input
========================================================= */

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc2626 !important;
    background-color: #fffafa;
}

    /* Invalid input on focus */
    input.input-validation-error:focus,
    select.input-validation-error:focus,
    textarea.input-validation-error:focus {
        border-color: #dc2626 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
    }

/* =========================================================
Valid Input
========================================================= */

input.input-validation-valid,
select.input-validation-valid,
textarea.input-validation-valid {
    border-color: #d1d5db;
}

/* =========================================================
Required / Validation Text
========================================================= */

.form-group-auth .field-validation-error {
    color: #dc2626 !important;
    margin-left: 0;
}

/* Keep validation messages directly below controls */
.form-group-auth input + .field-validation-error,
.form-group-auth select + .field-validation-error,
.form-group-auth textarea + .field-validation-error {
    margin-top: 0.3rem;
}

/* =========================================================
Validation Summary
========================================================= */

.validation-summary-errors {
    color: #dc2626 !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .validation-summary-errors li {
        color: #dc2626 !important;
        margin-bottom: 0.25rem;
    }

.validation-summary-valid {
    display: none;
}

/* =========================================================
jQuery Validate Highlight
========================================================= */

input.error,
select.error,
textarea.error {
    border-color: #dc2626 !important;
}

    input.error:focus,
    select.error:focus,
    textarea.error:focus {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
        outline: none !important;
    }

/* jQuery Validate generated error label */
label.error {
    display: block !important;
    color: #dc2626 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Error span generated by unobtrusive validation */
span.field-validation-error > span {
    color: #dc2626 !important;
}

/* =========================================================
Checkbox Validation
========================================================= */

input[type="checkbox"].input-validation-error {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* =========================================================
Select Validation
========================================================= */

select.input-validation-error {
    color: #374151;
}

/* =========================================================
Optional: Error Icon/Indicator
========================================================= */

.form-control-auth.input-validation-error {
    background-image: none;
}

/* =========================================================
Disabled Controls
========================================================= */

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* =========================================================
Error message
========================================================= */
.error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* =========================================================
Success message
========================================================= */
.success-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* =========================================================
Toast message
========================================================= */

#toastContainer {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90vw !important;
    z-index: 2147483647 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

#toastContainer .toast {
    position: relative !important;
    z-index: 2147483647 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 500px;
    padding: 12px 18px;
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
    opacity: 1;
}