/* Preserve line breaks for long text descriptions */
   [data-text="welcome.longDescription"] {
     white-space: pre-line;
   }

   /* Preserve line breaks for stage overview */
   #stage-overview {
     white-space: pre-line;
   }

   /* Stage titles list styling */
   #stage-group-wrapper {
     background-color: #f5f5f0;
     padding: 16px 20px;
     border-radius: 8px;
     border: 1px solid #e5e5e0;
   }

   /* Role selection styling */
   #role-selection {
     border: solid #e5e7eb 1.5px;
   }

   /* Custom responsive breakpoints for very small screens */
   @media (max-width: 320px) {
    /* Ensure content fits on 320px screens */
    .container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
    
    /* Reduce font sizes further on very small screens */
    h1 {
      font-size: 1rem !important;
    }
    
    h2 {
      font-size: 1.25rem !important;
    }
    
    /* Ensure buttons remain touch-friendly */
    button {
      min-height: 44px;
      font-size: 14px;
    }
    
    /* Optimize card padding */
    .card-mobile {
      padding: 12px !important;
    }
  }
  
  /* Enhanced touch targets for mobile */
  @media (max-width: 768px) {
    button, a, input, select {
      min-height: 44px;
      min-width: 44px;
    }
    
    /* Improve text readability on mobile */
    body {
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
    }
  }
  
  /* Custom utilities for responsive design */
  .xs\:block {
    display: block;
  }
  
  @media (max-width: 475px) {
    .xs\:block {
      display: block !important;
    }
    
    .xs\:hidden {
      display: none !important;
    }
  }
  
  /* Smooth transitions for better UX */
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Enhanced focus states for accessibility */
  button:focus,
  input:focus,
  select:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
  
  /* Loading spinner animation */
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  .animate-spin {
    animation: spin 1s linear infinite;
  }
  
  /* Custom gradient background for improved visual hierarchy */
  .gradient-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  }
  
  /* Responsive card shadows */
  .card-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  
  @media (min-width: 768px) {
    .card-shadow {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
  }
  
  /* Ensure proper line height for readability */
  p, li {
    line-height: 1.6;
  }
  
  /* Mobile-first responsive images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  /* ===== ACCESSIBILITY ENHANCEMENTS ===== */
  
  /* Screen reader only content */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* Show screen reader content when focused */
  .focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  
  /* Enhanced focus indicators for all interactive elements */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
  
  /* Remove default focus outline to use custom ones */
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: none;
  }
  
  /* Keyboard navigation styles */
  .keyboard-nav button:focus,
  .keyboard-nav a:focus,
  .keyboard-nav [tabindex]:focus {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .bg-gradient-to-r {
      background: #1d4ed8 !important;
    }
    
    .border-gray-200 {
      border-color: #000 !important;
    }
    
    .text-ai-gray {
      color: #000 !important;
    }
    
    .shadow-sm {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
  }
  
  /* Reduced motion support */
  @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;
    }
    
    .animate-spin {
      animation: none !important;
    }
  }
  
  /* Skip link styling */
  .skip-link {
    background: #2563eb;
    color: white;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    z-index: 9999;
  }
  
  .skip-link:hover {
    background: #1d4ed8;
  }
  
  /* Aria live region styling */
  [aria-live] {
    position: relative;
  }
  
  /* Error message styling for form validation */
  .error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  
  .error-border {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  }
  
  /* Success message styling */
  .success-message {
    color: #059669;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  
  /* Ensure interactive elements have sufficient color contrast */
  button[disabled] {
    background-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
  }
  
  /* Progress bar accessibility */
  [role="progressbar"] {
    position: relative;
  }
  
  [role="progressbar"]::after {
    content: attr(aria-valuenow) '%';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: transparent;
    pointer-events: none;
  }
  
  /* Role and landmark styling */
  [role="main"],
  [role="banner"],
  [role="contentinfo"],
  [role="navigation"] {
    position: relative;
  }
  
  /* Focus trap styling for modal-like experiences */
  .focus-trap {
    position: relative;
  }
  
  .focus-trap::before,
  .focus-trap::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Loading state accessibility */
  [aria-busy="true"] {
    cursor: wait;
    pointer-events: none;
  }
  
  /* Error state styling */
  [aria-invalid="true"] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
  }
  
  /* Required field indicators */
  [aria-required="true"]::after {
    content: ' *';
    color: #dc2626;
    font-weight: bold;
  }
  
  /* Tooltip and helper text styling */
  [aria-describedby] + .helper-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
  }
  
  /* Keyboard-only focus indicators */
  .js-focus-visible button:focus:not(.focus-visible),
  .js-focus-visible a:focus:not(.focus-visible),
  .js-focus-visible [tabindex]:focus:not(.focus-visible) {
    outline: none;
    box-shadow: none;
  }
  
  /* ===== PROGRESS BAR ENHANCEMENTS ===== */
  
  /* Shimmer animation for progress bar */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%) skewX(-12deg);
    }
    100% {
      transform: translateX(200%) skewX(-12deg);
    }
  }
  
  .animate-shimmer {
    animation: shimmer 2s infinite;
  }
  
  /* Step indicator styling */
  .step-indicator {
    position: relative;
    z-index: 10;
  }
  
  .step-indicator.active > div {
    background-color: #2563eb;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  }
  
  .step-indicator.completed > div {
    background-color: #10b981;
    transform: scale(1.05);
  }
  
  .step-indicator.completed::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.625rem;
    font-weight: bold;
    line-height: 1;
  }
  
  /* Hover effects for step indicators */
  .step-indicator:hover > div {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Progress bar pulse animation when updating */
  .progress-updating {
    animation: progressPulse 0.6s ease-in-out;
  }
  
  @keyframes progressPulse {
    0%, 100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(1.1);
    }
  }
  
  /* Breadcrumb styling */
  .breadcrumb-item span {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
  }
  
  .breadcrumb-item.active span {
    background-color: #2563eb;
    color: white;
  }
  
  .breadcrumb-item.completed span {
    background-color: #10b981;
    color: white;
  }
  
  .breadcrumb-separator {
    margin: 0 0.5rem;
    user-select: none;
  }
  
  /* Progress section card styling */
  #progress-section .bg-white {
    transition: box-shadow 0.3s ease;
  }
  
  #progress-section .bg-white:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  /* Progress percentage styling */
  #progress-percentage {
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
  }
  
  /* Responsive progress bar height */
  @media (max-width: 320px) {
    .step-indicator > div {
      width: 0.5rem !important;
      height: 0.5rem !important;
    }
    
    .step-indicator.completed::after {
      font-size: 0.5rem;
    }
  }
  
  /* Progress section fade-in animation */
  #progress-section {
    animation: fadeInProgress 0.6s ease-out;
  }
  
  @keyframes fadeInProgress {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* ===== PROFESSIONAL TYPOGRAPHY AND COLOR SYSTEM ===== */
  
  /* Typography hierarchy for professional business contexts */
  .text-display-1 {
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #1e293b;
  }
  
  .text-heading-1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1e293b;
  }
  
  .text-heading-2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #334155;
  }

  .text-heading-3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #334155;
  }
  
  .text-body-large {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
    color: #64748b;
  }
  
  .text-caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Professional button styles */
  .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
  
  .btn-secondary {
    background: white;
    color: #2563eb;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .btn-secondary:hover {
    background: #f8fafc;
    border-color: #2563eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
  
  /* Professional status indicators */
  .status-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .status-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .status-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  /* Professional color utilities for backwards compatibility */
  .text-ai-blue { color: #2563eb; }
  .bg-ai-blue { background-color: #2563eb; }
  .text-ai-indigo { color: #4f46e5; }
  .bg-ai-indigo { background-color: #4f46e5; }
  .text-ai-purple { color: #7c3aed; }
  .bg-ai-purple { background-color: #7c3aed; }
  .text-ai-gray { color: #64748b; }
  .bg-ai-gray { background-color: #64748b; }

  /* ===== AI-ENABLED SOFTWARE SECTION STYLING ===== */
  
  /* Difficulty badge styling */
  .difficulty-badge {
    font-weight: 500;
    letter-spacing: 0.025em;
    display: inline-block;
    min-width: 70px;
    text-align: center;
  }
  
  .difficulty-badge.beginner {
    background-color: #10b981;
    color: white;
  }
  
  .difficulty-badge.intermediate {
    background-color: #f59e0b;
    color: white;
  }
  
  .difficulty-badge.advanced {
    background-color: #ef4444;
    color: white;
  }
  
  /* Tool category styling */
  .tool-category {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .tool-category h5 {
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
  }
  
  /* Tool grid layout */
  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }
  
  @media (max-width: 640px) {
    .tool-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* Tool card styling */
  .tool-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    position: relative;
    overflow: hidden;
  }
  
  .tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
  }
  
  /* Clickable tool card styling */
  .tool-card-clickable {
    cursor: pointer;
  }
  
  .tool-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-color: #2563eb;
  }
  
  .tool-card-clickable:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .tool-card-clickable:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-color: #2563eb;
  }
  
  /* External link indicator */
  .external-link-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .tool-card-clickable:hover .external-link-indicator {
    opacity: 1;
  }
  
  .tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #7c3aed);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .tool-card:hover::before {
    opacity: 1;
  }
  
  /* Cross-functional badge styling */
  .cross-functional-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.5rem;
  }
  
  /* Cost tier styling */
  .cost-tier {
    font-weight: 500;
    opacity: 0.7;
  }
  
  .cost-tier.free {
    color: #10b981;
  }
  
  .cost-tier.freemium {
    color: #3b82f6;
  }
  
  .cost-tier.paid {
    color: #f59e0b;
  }
  
  .cost-tier.enterprise {
    color: #ef4444;
  }
  
  /* AI software section container */
  .ai-software-container {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(124, 58, 237, 0.03) 100%);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid rgba(59, 130, 246, 0.1);
  }
  
  @media (max-width: 640px) {
    .ai-software-container {
      padding: 1rem;
      margin-top: 1rem;
    }
  }
  
  /* Section headers */
  .ai-software-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
  }
  
  .ai-software-header svg {
    margin-right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  /* Tool description truncation */
  .tool-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5rem;
  }
  
  /* Use case styling */
  .tool-use-case {
    font-style: italic;
    color: #6b7280;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .tool-grid {
      gap: 0.75rem;
    }
    
    .tool-card {
      padding: 0.75rem;
    }
    
    .ai-software-header {
      font-size: 1rem;
    }
  }