/* ===================================================================
   FEESABLE MAIN STYLESHEET
   Custom CSS for Feesable Landing Page
   =================================================================== */

/* ===== IMPORTS ===== */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Bree+Serif&display=swap');

/* ===== BASE STYLES ===== */
/* CSS Custom Properties - Feesable Brand Tokens */
:root {
  /* Brand Tokens (from guide) */
  --primary-color: #2A9257; /* Sea Green */
  --ink-color: #122720; /* Forrest Green / Ink */
  --ink-alt-color: #122720; /* Deeper Ink for hover */
  --mint-color: #D0F1DE; /* Greenish White */
  --off-white: #FEFFF4; /* Milk */
  --text-gray: #2c2f2e; /* Neutral body text */
  --ui-gray: #9CA3AF; /* UI Gray */
  --white: #FFFFFF;
  --black: #000000;

  /* ===== FLUID TYPOGRAPHY SCALE ===== */
  /* Bootstrap-aligned fluid typography using clamp() */
  --text-hero: clamp(2rem, 5vw, 3.5rem);      /* 32px - 56px - Hero headings */
  --text-h1: clamp(1.75rem, 4vw, 2.5rem);     /* 28px - 40px - Page titles */
  --text-h2: clamp(1.5rem, 3.5vw, 2rem);      /* 24px - 32px - Section headers */
  --text-h3: clamp(1.25rem, 3vw, 1.5rem);     /* 20px - 24px - Subsection headers */
  --text-h4: clamp(1.125rem, 2.5vw, 1.25rem); /* 18px - 20px - Card headers */
  --text-body: clamp(0.875rem, 2.5vw, 1rem);  /* 14px - 16px - Body text */
  --text-small: clamp(0.75rem, 2vw, 0.875rem); /* 12px - 14px - Small text */
  --text-lead: clamp(1rem, 3vw, 1.25rem);     /* 16px - 20px - Lead paragraphs */

  /* ===== FLUID SPACING SCALE ===== */
  /* 8px base unit system with fluid scaling */
  --space-xs: clamp(0.5rem, 1.5vw, 0.75rem);   /* 8px - 12px */
  --space-sm: clamp(0.75rem, 2vw, 1rem);       /* 12px - 16px */
  --space-md: clamp(1rem, 2.5vw, 1.5rem);      /* 16px - 24px */
  --space-lg: clamp(1.5rem, 3vw, 2rem);        /* 24px - 32px */
  --space-xl: clamp(2rem, 4vw, 3rem);          /* 32px - 48px */
  --space-xxl: clamp(3rem, 6vw, 4rem);         /* 48px - 64px */
  --space-3xl: clamp(4rem, 8vw, 6rem);         /* 64px - 96px */
  
  /* ===== FLUID COMPONENT SIZING ===== */
  /* Responsive component dimensions */
  --icon-size: clamp(50px, 12vw, 80px);        /* Feature icons */
  --button-height: clamp(44px, 8vw, 48px);     /* Touch target compliance */
  --container-padding: clamp(1rem, 4vw, 2rem); /* Container side padding */
  --section-padding-y: clamp(2rem, 6vw, 4rem); /* Section vertical padding */
  
  /* ===== LAYOUT CONSTRAINTS ===== */
  /* Content width constraints */
  --content-narrow: 65ch;   /* ~520px - optimal reading */
  --content-medium: 75ch;   /* ~600px - forms */
  --content-wide: 90ch;     /* ~720px - max readable */
  --content-full: 1200px;   /* full layout width */
  
  /* ===== COMPONENT-SPECIFIC VARIABLES ===== */
  /* Fixed values for specific components */
  --navbar-blur: 20px;
  --card-border-radius: 12px;
  --button-border-radius: 8px;
  --footer-logo-width: 120px;
  --footer-logo-height: 40px;

  /* Legacy + semantic aliases */
  --secondary-color: var(--text-gray);
  --success-color: var(--primary-color);
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --info-color: #3b82f6;
  --light-color: var(--off-white);
  --dark-color: var(--ink-color);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-serif: 'Bree Serif', Georgia, 'Times New Roman', serif;

  /* Comprehensive Bootstrap CSS custom properties */
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 42, 146, 87; /* rgb of #2A9257 */
  --bs-secondary: var(--text-gray);
  --bs-secondary-rgb: 44, 47, 46;
  --bs-success: var(--primary-color);
  --bs-success-rgb: 42, 146, 87;
  --bs-danger: var(--danger-color);
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: var(--warning-color);
  --bs-warning-rgb: 245, 158, 11;
  --bs-info: var(--primary-color);
  --bs-info-rgb: 42, 146, 87;
  --bs-light: var(--off-white);
  --bs-light-rgb: 254, 255, 244;
  --bs-dark: var(--ink-color);
  --bs-dark-rgb: 18, 39, 32;
  
  /* Bootstrap typography - Updated for brand guide */
  --bs-font-family-base: var(--font-family); /* Inter for all base text */
  --bs-font-family-serif: var(--font-family-serif); /* Bree Serif for h1 only */
  --bs-body-font-family: var(--font-family); /* Inter for body */
  --bs-body-font-weight: 400; /* Regular weight for body */
  --bs-body-line-height: 1.6; /* Standard line height */
  --bs-body-color: var(--text-gray);
  --bs-body-bg: var(--off-white);
  
  /* Bootstrap heading defaults (overridden in individual heading classes) */
  --bs-headings-font-family: var(--font-family); /* Inter for h2-h6 */
  --bs-headings-font-weight: 700; /* Bold default */
  --bs-headings-line-height: 1.2; /* Reduced line height */
  
  /* Bootstrap font weights */
  --bs-font-weight-lighter: 300;
  --bs-font-weight-light: 300;
  --bs-font-weight-normal: 400;
  --bs-font-weight-medium: 500;
  --bs-font-weight-semibold: 600;
  --bs-font-weight-bold: 700;
  --bs-font-weight-bolder: 900;
  
  /* Bootstrap text colors */
  --bs-white: var(--white);
  --bs-muted: var(--text-gray);
  
  /* Bootstrap spacing and layout */
  --bs-border-color: rgba(0, 0, 0, 0.175);
  --bs-border-radius: var(--border-radius);
  
  /* Bootstrap links */
  --bs-link-color: var(--primary-color);
  --bs-link-hover-color: var(--ink-alt-color);
  
  /* Bootstrap border radius */
  --bs-border-radius: var(--border-radius);
  --bs-border-radius-sm: calc(var(--border-radius) * 0.75);
  --bs-border-radius-lg: calc(var(--border-radius) * 1.25);
  --bs-border-radius-xl: calc(var(--border-radius) * 1.5);
  --bs-border-radius-2xl: calc(var(--border-radius) * 2);
  
  /* Bootstrap shadows */
  --bs-box-shadow: var(--box-shadow);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Bootstrap navbar */
  --bs-navbar-color: var(--text-gray);
  --bs-navbar-hover-color: var(--primary-color);
  --bs-navbar-active-color: var(--primary-color);
  --bs-navbar-brand-color: var(--ink-color);
  --bs-navbar-brand-hover-color: var(--ink-color);
  --bs-navbar-bg: var(--off-white);
  
  /* Bootstrap buttons */
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--border-radius);
  --bs-btn-transition: var(--transition);
  
  /* Bootstrap forms */
  --bs-form-label-font-weight: 600;
  --bs-form-label-color: var(--ink-color);

  /* Radius, shadows, motion */
  --border-radius: 12px;
  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --transition: all 0.3s ease;
}

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Base Typography Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-weight: 400; /* Regular */
  line-height: 1.6;
  letter-spacing: 0; /* Normal letter spacing */
  color: var(--text-gray);
  padding-top: 0; /* Remove default padding */
  margin: 0;
  background-color: var(--off-white);
  scroll-behavior: smooth;
}
.logo img {
  width: 135px;
  height: 48px;
}
/* Feesable Floating Navbar - Glassmorphism Design */
.feesable-navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 24px;
}

.feesable-navbar:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.feesable-navbar .navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-color);
  display: flex;
  align-items: center;
  padding: 0;
}

.feesable-navbar .navbar-brand img {
  height: 50px;
  margin-right: 0.5rem;
}

.feesable-navbar .navbar-nav {
  align-items: center;
}

.feesable-navbar .navbar-nav .nav-link {
  font-weight: 500;
  padding: 0.75rem 1rem;
  color: var(--ink-color);
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 0 4px;
}

.feesable-navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color);
  background: rgba(42, 146, 87, 0.1);
}

.feesable-navbar .navbar-nav .nav-link.active {
  color: var(--primary-color);
  background: rgba(42, 146, 87, 0.15);
  font-weight: 600;
}

/* Scroll state enhancements */
.feesable-navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.feesable-navbar.menu-open {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(25px);
}

/* ===== COMPONENT STYLES ===== */
/* Icon Container Styles - Fluid sizing for Cards */
.feature-icon, .workflow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size); /* Fluid sizing */
  height: var(--icon-size); /* Fluid sizing */
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(42, 146, 87, 0.1);
  border: 2px solid rgba(42, 146, 87, 0.2);
  transition: all 0.3s ease;
}

.feature-icon:hover, .workflow-step:hover {
  background: rgba(42, 146, 87, 0.15);
  border-color: rgba(42, 146, 87, 0.3);
  transform: translateY(-2px);
}

.feature-icon i, .workflow-step i {
  display: block;
  text-align: center;
  line-height: 1;
}

/* Generic .navbar styling removed - only .feesable-navbar is used */

/* ===== BUTTON STYLING ===== */
/* Bootstrap-aligned button styling with proper cascade */

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.btn-primary:hover,
.btn-primary.btn-lg:hover {
  background-color: var(--ink-alt-color);
  border-color: var(--ink-alt-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 39, 32, 0.25);
}

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

.btn-outline-primary:hover {
  color: white;
  background-color: var(--ink-alt-color);
  border-color: var(--ink-alt-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 39, 32, 0.25);
}

.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== FLUID TYPOGRAPHY SYSTEM ===== */
/* Bootstrap-aligned fluid typography using design tokens */

/* 1. Bree Serif - Only for main page titles (H1) */
h1, .h1, .display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-family-serif); /* Bree Serif */
  font-weight: 400;
  font-size: var(--text-h1); /* Fluid sizing */
  line-height: 1.0; /* Tight line spacing for impact */
  letter-spacing: -0.025em; /* Reduced letter spacing */
  margin-bottom: var(--space-md);
}

/* 2. Inter Black - For major section headers (H2) */
h2, .h2 {
  font-family: var(--font-family); /* Inter */
  font-weight: 900; /* Black */
  font-size: var(--text-h2); /* Fluid sizing */
  line-height: 1.05; /* Very tight line spacing */
  letter-spacing: -0.02em; /* Reduced letter spacing */
  margin-bottom: var(--space-md);
}

/* 3. Inter Bold - For subheaders (H3, H4) */
h3, .h3, h4, .h4 {
  font-family: var(--font-family); /* Inter */
  font-weight: 700; /* Bold */
  font-size: var(--text-h3); /* Fluid sizing */
  line-height: 1.1; /* Tight line spacing */
  letter-spacing: -0.015em; /* Slightly reduced letter spacing */
  margin-bottom: var(--space-sm);
}

/* 4. Inter Semibold - For smaller headings (H5, H6) */
h5, .h5, h6, .h6 {
  font-family: var(--font-family); /* Inter */
  font-weight: 600; /* Semibold */
  font-size: var(--text-h4); /* Fluid sizing */
  line-height: 1.2; /* Moderate line spacing */
  letter-spacing: -0.01em; /* Minimal letter spacing reduction */
  margin-bottom: var(--space-sm);
}

/* Display classes inherit from h1 styling */
.display-5, .display-6 {
  font-family: var(--font-family-serif); /* Bree Serif */
  font-weight: 400;
  font-size: var(--text-hero); /* Fluid sizing */
  line-height: 1.0;
  letter-spacing: -0.025em;
}

/* Body Text Hierarchy */
/* Primary body text - Regular weight, normal spacing */
body, p {
  font-family: var(--font-family); /* Inter */
  font-weight: 400; /* Regular */
  font-size: var(--text-body); /* Fluid sizing */
  line-height: 1.6; /* Standard line spacing */
  letter-spacing: 0; /* Normal letter spacing */
}

/* Lead paragraphs - Medium weight, fluid sizing */
.lead {
  font-family: var(--font-family); /* Inter */
  font-weight: 500; /* Medium */
  font-size: var(--text-lead); /* Fluid sizing */
  line-height: 1.65; /* Slightly increased */
  letter-spacing: 0.005em; /* Slightly increased */
}

/* Fine/secondary text - Typography only (Bootstrap handles .text-muted color) */
small, .small {
  line-height: 1.7; /* INCREASED line spacing */
  letter-spacing: 0.015em; /* INCREASED letter spacing */
}

/* Very fine text (legal, disclaimers) - Light weight, MAX spacing */
.text-fine, .legal-text {
  font-family: var(--font-family); /* Inter */
  font-weight: 300; /* Light */
  line-height: 1.75; /* MAXIMUM line spacing */
  letter-spacing: 0.02em; /* MAXIMUM letter spacing */
}

/* Emphasis & Key Messaging */
.text-emphasis, .key-message {
  font-weight: 600; /* Semibold */
  color: var(--primary-color); /* Sea Green */
}

.text-strong-emphasis {
  font-weight: 700; /* Bold */
  color: var(--ink-color); /* Forest Green */
}

/* Strong callouts */
strong, b, .fw-bold {
  font-weight: 700; /* Bold instead of default */
}

/* Card text hierarchy */
.card-body p {
  line-height: 1.65; /* Slightly increased for card readability */
  letter-spacing: 0.005em;
}

.card-body .text-muted {
  line-height: 1.7; /* Increased for fine card text */
  letter-spacing: 0.01em;
}

/* Context-Specific Typography */

/* Form labels - Medium weight, normal spacing */
.form-label {
  font-family: var(--font-family); /* Inter */
  font-weight: 500; /* Medium */
  line-height: 1.4;
  letter-spacing: 0;
}

/* Button text - Semibold, slightly reduced spacing */
.btn {
  font-family: var(--font-family); /* Inter */
  font-weight: 600; /* Semibold */
  letter-spacing: -0.005em; /* Slightly reduced */
}

/* Navigation - Medium weight, normal spacing */
.navbar-nav .nav-link {
  font-family: var(--font-family); /* Inter */
  font-weight: 500; /* Medium */
  letter-spacing: 0;
}

/* Footer text - Regular weight, increased spacing for readability */
footer p, footer .text-light {
  font-family: var(--font-family); /* Inter */
  font-weight: 400; /* Regular */
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* Accordion headers - Semibold */
.accordion-button {
  font-family: var(--font-family); /* Inter */
  font-weight: 600; /* Semibold */
  letter-spacing: -0.005em;
}

/* Alert text - Regular weight, increased spacing */
.alert {
  font-family: var(--font-family); /* Inter */
  font-weight: 400; /* Regular */
  line-height: 1.65;
  letter-spacing: 0.005em;
}

/* Custom Gradient Background */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--ink-color) 100%);
}

/* ===== BOOTSTRAP CONTAINER OVERRIDE ===== */
/* Override Bootstrap container with fluid padding and brand max-width */

.container {
  max-width: 1200px; /* Brand consistency */
  padding-left: clamp(1rem, 4vw, 2rem); /* Fluid padding */
  padding-right: clamp(1rem, 4vw, 2rem); /* Fluid padding */
}

/* Center alignment for section content only (not footer) */
section .container {
  text-align: center;
}

.container-narrow {
  width: 100%;
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* Section spacing classes removed - use Bootstrap .py-* utilities instead */
/* .section-py -> .py-4, .section-py-sm -> .py-3, .section-py-lg -> .py-5 */

/* ===== FLUID CARD SYSTEM ===== */
/* Responsive card components using design tokens */

/* Enhanced card system */
.card-enhanced {
  padding: var(--space-lg); /* Fluid padding */
  margin-bottom: var(--space-xl); /* Fluid spacing */
  border-radius: var(--card-border-radius);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-enhanced-sm {
  padding: var(--space-md); /* Fluid padding */
  margin-bottom: var(--space-lg); /* Fluid spacing */
  border-radius: var(--card-border-radius);
}

/* ===== FLUID FORM SYSTEM ===== */
/* Responsive form components using design tokens */

/* Form spacing system */
.form-group-enhanced {
  margin-bottom: var(--space-md); /* Fluid spacing */
}

.form-section {
  margin-bottom: var(--space-xl); /* Fluid spacing */
}

/* ===== FLUID HERO SECTION ===== */
/* Responsive hero section using design tokens */

/* Hero Section */
.hero-section {
  min-height: 50vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: var(--off-white);
  color: var(--ink-color);
  text-align: center;
  padding: var(--space-xl) 0; /* Fluid padding */
}

.hero-section h1 {
  font-size: var(--text-hero); /* Fluid sizing */
  margin-bottom: var(--space-lg); /* Fluid spacing */
  color: var(--ink-color);
}

.hero-section .lead {
  font-size: var(--text-lead); /* Fluid sizing */
  margin-bottom: var(--space-xl); /* Fluid spacing */
  color: var(--text-gray);
}

/* Hero section responsive styles moved to phone-specific breakpoints below */

/* ===== FLUID PAGE HEADER ===== */
/* Responsive page header using design tokens */

/* Page Header */
.page-header {
  padding: var(--space-3xl) 0; /* Fluid padding */
  background-color: var(--mint-color);
  color: var(--ink-color);
  text-align: center;
}

.page-header h1 {
  font-size: var(--text-h1); /* Fluid sizing */
  margin-bottom: var(--space-md); /* Fluid spacing */
  color: var(--ink-color);
}

.page-header .lead {
  font-size: var(--text-lead); /* Fluid sizing */
  color: rgba(255, 255, 255, 0.9);
}

/* ===== FLUID SECTIONS ===== */
/* Responsive sections using design tokens */

section h2 {
  font-size: var(--text-h2); /* Fluid sizing */
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-xxl); /* Fluid spacing */
  color: var(--dark-color);
}

section h3 {
  font-size: var(--text-h3); /* Fluid sizing */
  font-weight: 600;
  margin-bottom: var(--space-lg); /* Fluid spacing */
  color: var(--dark-color);
}

/* ===== FEATURE ICONS ===== */
/* Icon containers for feature cards */

.feature-icon {
  width: var(--icon-size); /* Fluid sizing */
  height: var(--icon-size); /* Fluid sizing */
  margin: 0 auto var(--space-lg); /* Fluid spacing */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 146, 87, 0.12);
  border-radius: 50%;
  font-size: clamp(1.5rem, 4vw, 2.5rem); /* Fluid font size */
  color: var(--primary-color);
}

/* Workflow step styling removed - .workflow-step now only used as icon container (defined above with .feature-icon) */

/* Bootstrap Card Enhancements - Apply animations to all Bootstrap cards */
.card {
  border-radius: var(--card-border-radius); /* 12px brand consistency */
  transition: var(--transition);
  will-change: transform, box-shadow; /* Optimize for animations */
  /* margin removed - use Bootstrap spacing utilities (mb-4, my-3, etc.) instead */
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Enhanced Bootstrap Card with Shadow */
.card.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Ensure scroll animations don't conflict with hover */
.card.animate-fade-in,
.card.animate-fade-left, 
.card.animate-fade-right {
  animation-fill-mode: both; /* Maintain final animation state */
}

.card.animate-fade-in:hover,
.card.animate-fade-left:hover,
.card.animate-fade-right:hover {
  transform: translateY(-3px); /* Override animation transform on hover */
}

/* Removed: .tech-item and .workflow-step card variants - not used in HTML */
/* .step styling removed - not used */

/* Override for specific content that shouldn't animate */
.navbar .rounded:hover,
.form-control.rounded:hover,
.rounded-circle:hover {
  transform: none;
  box-shadow: initial;
}
/* .btn.rounded:hover removed - buttons should lift on hover for consistency */

/* ===== FLUID STEP NUMBERS ===== */
/* Responsive step numbers using design tokens */

.step-number {
  font-size: var(--text-h3); /* Fluid sizing */
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: clamp(50px, 10vw, 60px); /* Fluid sizing */
  height: clamp(50px, 10vw, 60px); /* Fluid sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  margin-bottom: var(--space-md); /* Fluid spacing */
}

/* .workflow-step h5 styling removed - workflow-step now only for icon containers */

/* Timeline marker for process steps - fluid scaling */
.timeline-marker {
  width: clamp(28px, 5vw, 32px);
  height: clamp(28px, 5vw, 32px);
  min-width: clamp(28px, 5vw, 32px);
  min-height: clamp(28px, 5vw, 32px);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== FLUID CONTACT FORM ===== */
/* Responsive contact form using design tokens */

/* Contact Form */
.contact-form {
  background: #fff;
  padding: var(--space-xxl); /* Fluid padding */
  border-radius: var(--card-border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  max-width: 600px;
  margin: 0 auto;
}

/* Form label styling handled by Bootstrap CSS custom properties */

.form-control, .form-select {
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: var(--transition);
  color: #000;
  background-color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* Large button sizing handled by Bootstrap CSS custom properties */

/* ===== FLUID CONTACT ITEMS ===== */
/* Responsive contact items using design tokens */

.contact-item {
  padding: var(--space-md) 0; /* Fluid padding */
  border-bottom: 1px solid #e9ecef;
}

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

.contact-icon {
  width: clamp(32px, 6vw, 40px); /* Fluid sizing */
  height: clamp(32px, 6vw, 40px); /* Fluid sizing */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== FLUID OFFICE HOURS ===== */
/* Responsive office hours using design tokens */

/* Office Hours */
.office-hours {
  border-left: 4px solid var(--primary-color);
  padding-left: var(--space-md); /* Fluid padding */
}

/* Form Validation */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger-color);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success-color);
}

/* ===== FLUID ALERT MESSAGES ===== */
/* Responsive alert messages using design tokens */

/* Alert Messages */
.alert {
  border: none;
  border-radius: var(--card-border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--space-md); /* Fluid padding */
}

.alert-info {
  background-color: var(--mint-color);
  border-color: var(--primary-color);
  color: var(--ink-color);
}

/* ===== FLUID ACCORDION ===== */
/* Responsive accordion using design tokens */

/* Accordion */
.accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: var(--card-border-radius);
  margin-bottom: var(--space-md); /* Fluid spacing */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.accordion-button {
  font-weight: 600;
  border-radius: var(--card-border-radius);
  background-color: var(--off-white);
  color: var(--ink-color);
  padding: var(--space-md) var(--space-lg); /* Fluid padding */
  font-size: var(--text-body); /* Fluid sizing */
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: white;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  border-color: var(--primary-color);
}

.accordion-body {
  padding: var(--space-lg); /* Fluid padding */
  color: #6b7280;
  line-height: 1.6;
}

/* Contrast fixes when accordions appear on ink backgrounds */
.bg-ink .accordion-item { border-color: rgba(255,255,255,0.2); }
.bg-ink .accordion-button {
  background-color: #ffffff;
  color: var(--ink-color);
}

/* ===== FOOTER COMPONENT ===== */
/* Footer Styles and Layout */
footer.bg-ink {
  padding: 2rem 0;
}

footer a {
  transition: var(--transition);
  color: white;
}

footer a:hover {
  color: var(--primary-color);
}

footer .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

footer .btn-primary:hover {
  background-color: var(--ink-alt-color);
  border-color: var(--ink-alt-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 39, 32, 0.25);
}

/* ===== UTILITY CLASSES ===== */
/* Bootstrap-aligned utility classes with proper cascade */

/* Feesable Brand Color Utilities */
/* .text-ink, .text-primary-gray, .text-readable removed - use Bootstrap .text-dark instead */
.bg-mint { background-color: var(--mint-color); }
.bg-off-white { background-color: var(--off-white); }

/* Common Spacing Utilities Enhancement */
.mt-80 { margin-top: 120px; } /* Increased for floating navbar */
.mt-floating { margin-top: 100px; } /* Specific spacing for floating navbar */

/* Border Utilities */
.border-subtle { border: 1px solid rgba(0,0,0,0.05); }
.border-white-20 { border-color: rgba(255,255,255,0.2); }

/* Ink background utility for white-on-ink sections */
.bg-ink {
  background-color: var(--ink-color);
  color: var(--white);
}

.bg-ink h1,
.bg-ink h2,
.bg-ink h3,
.bg-ink h4,
.bg-ink h5,
.bg-ink h6,
.bg-ink p,
.bg-ink .text-muted {
  color: var(--white);
  opacity: 0.95;
}

.bg-ink a {
  color: var(--mint-color);
}

.bg-ink .text-primary { color: var(--mint-color); }

.bg-ink .btn-outline-primary {
  color: var(--white);
  border-color: var(--white);
}

.bg-ink .btn-outline-primary:hover {
  background-color: var(--white);
  color: var(--ink-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Nav pills styling for funding page */
.nav-pills .nav-link {
  background-color: transparent;
  border: 1px solid #e5e7eb;
  color: var(--text-gray);
  font-weight: 500;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  transition: var(--transition);
}

.nav-pills .nav-link.active {
  background-color: var(--ink-color);
  color: white;
  border-color: var(--ink-color);
}

.nav-pills .nav-link:hover {
  background-color: var(--mint-color);
  color: var(--ink-color);
  border-color: var(--primary-color);
}

/* Bootstrap utility classes now handled by CSS custom properties */

.shadow-custom {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Removed unused .border-gradient class */

/* Feesable-specific overrides (handled by Bootstrap CSS custom properties) */

/* Success message styling */
.alert-success {
  background-color: #d1fae5;
  border-color: #a7f3d0;
  color: #065f46;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
}

.alert-success .alert-heading {
  color: #047857;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ===== UNIFIED ANIMATION SYSTEM ===== */
/* All animations: 800ms duration, 30px offset, GPU-accelerated */

/* Base state - elements start invisible */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: none; /* Disable existing transitions during animation */
  will-change: transform, opacity; /* GPU acceleration hint */
}

/* Animation keyframes - All standardized to 30px offset */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Trigger classes - All standardized to 800ms */
.animate-fade-in {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

/* Staggered delays - Removed manual classes, now auto-applied via JavaScript */

/* Accessibility: Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .animate-fade-in,
  .animate-fade-left,
  .animate-fade-right {
    animation: none !important;
  }
}

/* Responsive: Mobile animations - All fade up on small screens */
@media (max-width: 767px) {
  .animate-fade-left,
  .animate-fade-right {
    animation: fadeInUp 0.8s ease-out forwards;
  }
}

/* ===== LEGACY RESPONSIVE CLEANUP ===== */
/* Removed redundant responsive rules - now handled by fluid design tokens */

/* Print Styles */
@media print {
  .navbar,
  footer,
  .btn,
  .contact-form {
    display: none;
  }
  
  body {
    padding-top: 0;
  }
  
  .page-header {
    margin-top: 0;
  }
}

/* Bootstrap Dark Theme Support */
[data-bs-theme="dark"] {
  /* Override Bootstrap's dark theme with Feesable colors */
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 42, 146, 87;
  --bs-secondary: var(--text-gray);
  --bs-body-bg: var(--ink-color);
  --bs-body-color: var(--white);
  --bs-light: var(--mint-color);
  --bs-dark: var(--white);
  
  /* Custom component colors for dark theme */
  .feature-card,
  .contact-form {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
/* Bootstrap-aligned mobile-first breakpoints */

/* Mobile-specific overrides (max-width: 767px) */
@media (max-width: 767px) {
  /* Mobile navbar adjustments */
  .feesable-navbar {
    width: calc(100% - 1.5rem);
    top: 0.75rem;
    border-radius: var(--card-border-radius);
    padding: 8px 16px;
  }
  
  .feesable-navbar.show,
  .feesable-navbar.menu-open {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
  }
  
  .feesable-navbar .navbar-brand img {
    height: 40px;
  }
  
  .feesable-navbar .navbar-collapse {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(42, 146, 87, 0.1);
  }
  
  /* Mobile touch targets */
  .btn-lg {
    min-height: 44px; /* iOS minimum touch target */
    padding: 12px 24px;
    font-size: 1rem;
    margin-top: 1.5rem;
  }
  
  /* Mobile footer layout */
  .feesable-footer .trust-section .row {
    flex-direction: column;
    gap: 1.25rem; /* 20px between text and button */
    text-align: center;
  }

  .feesable-footer .footer-content .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .feesable-footer .footer-content .row > div:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .feesable-footer .footer-content .row > div:not(:first-child):not(:last-child) {
    flex: 0 0 48%;
    max-width: 48%;
    margin-bottom: 1rem;
  }
  
  .feesable-footer .footer-content .row > div:last-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0;
    text-align: center;
    margin-top: 1rem;
  }
  
  .feesable-footer h6 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  .feesable-footer ul li a {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  .feesable-footer p {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }
  
  .feesable-footer .footer-brand::before {
    width: 90px;
    height: 28px;
  }
  
  .feesable-footer .footer-bottom {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  
  .feesable-footer .footer-bottom p {
    font-size: 0.75rem;
    text-align: center;
  }
}

/* ===== TABLET AND DESKTOP ENHANCEMENTS ===== */
/* Bootstrap-aligned responsive enhancements */

/* Tablet and up (min-width: 768px) */
@media (min-width: 768px) {
  /* Enhanced footer layout for tablets */
  .feesable-footer .footer-content .row > div:not(:first-child):not(:last-child) {
    flex: 0 0 32%; /* 3 columns layout */
    max-width: 32%;
  }
  
  .feesable-footer h6 {
    font-size: 0.85rem;
  }
  
  .feesable-footer ul li a {
    font-size: 0.75rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --content-full: 1320px;
  }
}

/* ===== ACCESSIBILITY & STANDARDS ===== */
/* Screen Reader and Focus Management */
.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;
}

/* Enhanced Focus Management */
/* Focus-visible for better keyboard navigation */
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: var(--button-border-radius);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(42, 146, 87, 0.25);
}

/* Card focus states for interactive elements */
.card:focus-within {
  box-shadow: 0 4px 12px rgba(42, 146, 87, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Link focus states */
a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

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

/* ===== INTERACTIVE STATES ===== */
/* Loading and Animation States */
.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-outline-primary {
    border-width: 2px;
  }
  
  .card {
    border-width: 2px;
    border-color: var(--ink-color);
  }
  
  .feesable-navbar {
    border-width: 2px;
    background: rgba(255, 255, 255, 0.98);
  }
}

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

  .btn:hover,
  .card:hover,
  .feature-icon:hover {
    transform: none;
  }

  .feesable-navbar {
    transition: none;
  }
}

/* Form validation and accessibility */
.btn[disabled],
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Form validation - only show after user interaction */
/* Modern browsers: use :user-invalid for better UX */
.form-control:user-invalid {
  border-color: #dc3545;
}

.form-control:user-valid {
  border-color: var(--primary-color);
}

/* Fallback for older browsers: only show validation after field has been touched */
.form-control:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #dc3545;
}

.form-control:valid:not(:focus):not(:placeholder-shown) {
  border-color: var(--primary-color);
}

/* Show validation when form submission is attempted */
.was-validated .form-control:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid {
  border-color: var(--primary-color);
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.success-message {
  color: var(--primary-color);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Legal Content Styling - Override center alignment */
.legal-content {
  text-align: left;
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
  text-align: left;
}

/* Feesable Footer Component - Complete reusable footer with trust section */
.feesable-footer {
  background-color: var(--ink-color);
  color: white;
  text-align: left; /* Footer is always left-aligned */
}

.feesable-footer .trust-section {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feesable-footer .trust-section p {
  color: white;
  font-weight: 600;
  margin-bottom: 0;
}

.feesable-footer .trust-section .bi-shield-check {
  color: var(--primary-color);
}

.feesable-footer .trust-section .btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.feesable-footer .trust-section .btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42, 146, 87, 0.25);
}

.feesable-footer .footer-content {
  padding: 3rem 0;
}

.feesable-footer .footer-brand {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: white;
}

.feesable-footer .footer-brand::before {
  content: "";
  display: inline-block;
  width: var(--footer-logo-width);
  height: var(--footer-logo-height);
  margin-right: 0.5rem;
  background-image: url('../images/feesable_logo_white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feesable-footer h6 {
  color: white;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feesable-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feesable-footer ul li {
  margin-bottom: 0.5rem;
}

.feesable-footer ul li a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: var(--transition);
}

.feesable-footer ul li a:hover {
  color: var(--primary-color);
}

.feesable-footer .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.feesable-footer .btn-primary:hover {
  background-color: var(--ink-alt-color);
  border-color: var(--ink-alt-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 39, 32, 0.25);
}

.feesable-footer hr.border-white-20 {
  border-color: rgba(255, 255, 255, 0.2);
  margin: 2rem 0;
}

.feesable-footer .footer-bottom {
  margin-top: 2rem;
}

.feesable-footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}