/* Professional TKTech Stylesheet - Polished & Smooth */
:root {
  /* Primary Brand Colors - From TKTech Logo */
  --primary: #B65209;        /* Logo Orange, darkened for WCAG AA text/button contrast (5.0:1 on white) */
  --primary-dark: #A04808;   /* Hover state, darker than --primary (6.1:1 on white) */
  --primary-light: #FFA066;
  
  /* Secondary Brand Colors */
  --blue: #7CC8E8;          /* Logo Blue */
  --blue-dark: #5DADE2;
  --blue-light: #C7E7FD;
  
  /* Primary Brand Colors */
  --orange: #F47920;        /* Logo Orange */
  --orange-dark: #D9681C;
  --orange-light: #FFA066;
  
  /* New Brand Colors */
  --forest-green: #1E4D2B;  /* Forest Green */
  --forest-green-dark: #1A4025;  /* Slightly Darker Green (Option 2) */
  --forest-green-light: #4A7C59;
  
  /* Additional Category Colors */
  --teal: #00a86b;
  --teal-light: #C8F7DC;
  --teal-dark: #008058;
  
  /* Neutral Colors */
  --dark: #1c1c1c;
  --dark-soft: #2a2a2a;
  --gray-dark: #333;
  --gray: #6c757d;
  --gray-light: #e9ecef;
  --gray-on-dark: #A0AEC0;  /* Muted/secondary text on --dark surfaces (7.6:1) */
  --light: #f8f9fa;
  --white: #ffffff;

  /* Accent Colors */
  --green: #28a745;
  --green-light: #d4edda;
  --red: #dc3545;
  --red-light: #f8d7da;
  
  /* Spacing system */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-primary: 0 4px 12px rgba(244, 121, 32, 0.15);
  --shadow-primary-lg: 0 8px 24px rgba(244, 121, 32, 0.2);
  --primary-glow: rgba(182, 82, 9, 0.15); /* --primary as rgba, for focus rings */

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  line-height: 1.7;
  font-size: 16px;
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

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

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

/* Typography - Smoother */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: -0.02em;
}

h1 { 
  font-size: clamp(2rem, 5vw, 2.75rem); 
  margin-bottom: var(--space-lg);
  line-height: 1.15;
}

h2 { 
  font-size: clamp(1.5rem, 4vw, 2.25rem); 
  margin-bottom: var(--space-md);
}

h3 { 
  font-size: clamp(1.25rem, 3vw, 1.5rem); 
  margin-bottom: var(--space-sm);
}

p {
  color: var(--gray-dark);
  line-height: 1.75;
  font-size: 1rem;
}

/* Nav - Smooth & Professional */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 8%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  max-width: 1800px;
  margin: 0 auto;
  transition: all var(--transition-normal);
  position: relative;
}

/* border-bottom was on nav (max-width: 1800px, centered), not header (full
   width) -- on any viewport wider than 1800px the orange divider visibly
   stopped right at the nav content's edges (by the logo on the left, by
   Contact on the right) instead of spanning the page like a header border
   should. Moved to header, which has no width cap. */
header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--white);
  border-bottom: 3px solid var(--primary);
  padding-bottom: var(--space-sm);
}

.logo-img { 
  height: 65px; 
  transition: transform var(--transition-normal);
}

.nav-links { 
  display: flex; 
  gap: var(--space-xl);
}

.nav-links a { 
  color: var(--dark); 
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  /* Sits at full width and is revealed with scaleX rather than animating width
     from 0. Animating width forces layout and paint on every frame of the
     hover; a transform is composited and cannot thrash layout. */
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.nav-links a:hover {
  color: var(--primary);
}

/* focus-visible matches hover so the underline is a keyboard affordance too,
   not a mouse-only one. */
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--dark);
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.nav-toggle:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .logo-img { height: 45px; }
  nav { flex-wrap: wrap; }
  .nav-links {
    display: none !important;
    flex-direction: column;
    width: 100%;
    order: 3;
    background: var(--white);
    padding: 0.5rem 0;
    gap: 0;
    border-top: 1px solid #e2e8f0;
  }
  .nav-links a {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
  }
  .nav-links a::after { display: none !important; }
  .nav-links.open { display: flex !important; }
  .nav-toggle { display: flex; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
}

/* Buttons - Ultra-Smooth */
.btn-cta, .btn-cta-large {
  display: inline-block;
  background: var(--primary);
  color: var(--white) !important;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}

.btn-cta::before, .btn-cta-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-cta:hover::before, .btn-cta-large:hover::before {
  left: 100%;
}

.btn-cta:hover, .btn-cta-large:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-lg);
}

.btn-cta:active, .btn-cta-large:active {
  transform: translateY(0);
}

.btn-cta-large { 
  padding: 1.25rem 3rem; 
  font-size: 1.25rem;
  border-radius: var(--radius-lg);
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--primary) !important;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid var(--primary);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  z-index: -1;
  transition: transform var(--transition-normal);
  transform: scaleX(0);
  transform-origin: right;
}

.btn-secondary:hover {
  color: var(--white) !important;
}

.btn-secondary:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* Secondary Button - White variant for dark backgrounds */
.btn-secondary-white {
  display: inline-block;
  background: transparent;
  color: var(--white) !important;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid var(--white);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-secondary-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: -1;
  transition: transform var(--transition-normal);
  transform: scaleX(0);
  transform-origin: right;
}

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

.btn-secondary-white:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-secondary-white:active {
  transform: scale(0.98);
}

/* Hero - Smooth & Elevated */
/* Was a gradient into --light (off-white) plus a tinted ::before radial
   wash -- against the header directly above it (flat var(--white), no
   gradient), the two "whites" visibly didn't match at the seam where they
   meet. Flat white, matching the header exactly. */
.hero-professional {
  background: var(--white);
  padding: var(--space-3xl) 8% var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}


.hero-content { 
  max-width: 1400px; 
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-professional h1 { 
  font-size: clamp(2.25rem, 6vw, 3.25rem); 
  margin-bottom: var(--space-md);
}

.hero-lead { 
  font-size: clamp(1.25rem, 3.5vw, 1.75rem); 
  color: var(--gray-dark); 
  margin-bottom: var(--space-sm); 
  font-weight: 600;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle { 
  font-size: 1.15rem; 
  color: var(--gray); 
  margin-bottom: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-pricing-note {
  font-size: 1rem;
  color: var(--gray-dark);
  margin-top: var(--space-lg);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions { 
  display: flex; 
  gap: var(--space-md); 
  justify-content: center; 
  margin-bottom: var(--space-2xl); 
  flex-wrap: wrap;
}

.hero-trust { 
  display: flex; 
  gap: var(--space-xl); 
  justify-content: center; 
  flex-wrap: wrap;
}

.trust-item { 
  color: var(--gray-dark); 
  font-weight: 600; 
  font-size: 0.95rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.trust-item:hover {
  background: rgba(253, 126, 20, 0.1);
  color: var(--primary);
}

/* Problem Section - Polished */
.problem-solution { 
  padding: var(--space-2xl) 8%; 
  background: var(--light);
  position: relative;
}

.problem-solution::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.problem-block { 
  max-width: 1600px; 
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.problem-block h2 { 
  text-align: center; 
  margin-bottom: var(--space-xl);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.problem-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: var(--space-lg);
}

/* The 5px accent border-left is gone: the radius, padding and shadow already
   read as a card, and the hover wash in ::before supplies the interaction
   feedback the slab was doing double duty for. */
.problem-item {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.problem-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.03) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.problem-item:hover::before {
  opacity: 1;
}

.problem-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-primary);
}

.problem-icon { 
  font-size: 2.5rem; 
  display: block; 
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
}

.problem-item:hover .problem-icon {
  transform: scale(1.1) rotate(5deg);
}

.problem-item h3 { 
  color: var(--primary); 
  margin-bottom: var(--space-sm);
  font-size: 1.4rem;
}

.problem-item p { 
  color: var(--gray-dark); 
  line-height: 1.7;
}

/* Services Professional Section - Polished */
.services-professional { 
  padding: var(--space-2xl) 8%; 
  max-width: 1800px; 
  margin: 0 auto;
}

.services-professional h2, .section-lead { text-align: center; }

.section-lead {
  font-size: clamp(1.15rem, 3vw, 1.35rem); 
  color: var(--gray-dark); 
  margin-bottom: var(--space-2xl);
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto;
  font-weight: 500;
}

.services-grid-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.service-pro {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.service-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.service-pro:hover::before {
  opacity: 1;
}

.service-pro:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-6px);
}

.service-image-placeholder { 
  margin-bottom: var(--space-md); 
  text-align: center;
}

.service-img { 
  height: 80px; 
  transition: transform var(--transition-normal);
}

.service-icon-fallback { 
  font-size: 4rem;
  transition: transform var(--transition-normal);
}

.service-pro:hover .service-img,
.service-pro:hover .service-icon-fallback {
  transform: scale(1.1);
}

.service-pro h3 { 
  margin-bottom: var(--space-sm);
  font-size: 1.4rem;
}

.service-value { 
  color: var(--primary); 
  font-weight: 700; 
  font-size: 1.15rem; 
  margin-bottom: var(--space-md);
}

.service-benefits { 
  list-style: none; 
  padding-left: 0; 
  margin-bottom: var(--space-md);
}

.service-benefits li {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  position: relative;
  color: var(--gray-dark);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.service-benefits li:hover {
  background: rgba(253, 126, 20, 0.05);
}

.service-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 1.25rem;
  transition: transform var(--transition-fast);
}

.service-benefits li:hover::before {
  transform: scale(1.2);
}

.service-result {
  display: block;
  background: var(--green-light);
  color: var(--green);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.service-result:hover {
  background: var(--green);
  color: var(--white);
}
/* Services CTA Pro - Polished */
.services-cta-pro {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin: var(--space-xl) auto 0;
  max-width: 1000px;
}

.services-cta-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.services-cta-pro p { 
  font-size: clamp(1.15rem, 3vw, 1.4rem); 
  margin-bottom: var(--space-lg); 
  font-weight: 600;
}

.services-cta-pro .btn-cta { 
  background: var(--white); 
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.services-cta-pro .btn-cta:hover { 
  background: var(--light);
  color: var(--primary-dark) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Testimonials - Polished */
.social-proof { 
  padding: var(--space-2xl) 8%; 
  background: var(--light);
  position: relative;
}

.social-proof::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.social-proof h2 { 
  text-align: center; 
  margin-bottom: var(--space-xl);
}

.testimonials-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-lg);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Accent border-left removed, as on .problem-item above. */
.testimonial-pro {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.testimonial-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.testimonial-pro:hover::before {
  opacity: 1;
}

.testimonial-pro:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-primary);
}

.testimonial-quote {
  font-size: 1.15rem;
  color: var(--gray-dark);
  font-style: italic;
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.testimonial-author {
  margin-top: var(--space-md);
}

.author-name { 
  font-weight: 700; 
  color: var(--primary); 
  margin-bottom: var(--space-xs);
  font-size: 1.1rem;
}

.author-role { 
  color: var(--gray); 
  font-size: 0.95rem; 
  font-weight: 500;
}

/* ROI Section - Polished */
.roi-section { 
  padding: var(--space-2xl) 8%; 
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.roi-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(253, 126, 20, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(253, 126, 20, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.roi-section h2 { 
  text-align: center; 
  color: var(--white); 
  margin-bottom: var(--space-xl);
}

.roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  max-width: 1600px;
  margin: 0 auto var(--space-2xl);
  position: relative;
  z-index: 1;
}

.roi-item {
  text-align: center;
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(253, 126, 20, 0.3);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.roi-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.1) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.roi-item:hover::before {
  opacity: 1;
}

.roi-item:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(253, 126, 20, 0.2);
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
}

.roi-number { 
  display: block; 
  font-size: clamp(2.25rem, 6vw, 3.5rem); 
  font-weight: 700; 
  color: var(--primary); 
  margin-bottom: var(--space-sm);
}

.roi-label { 
  display: block; 
  font-size: 1.15rem; 
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.roi-cost { 
  display: block; 
  font-size: 0.95rem; 
  color: var(--gray-light); 
  font-weight: 400;
}

.roi-cta { 
  text-align: center; 
  position: relative;
  z-index: 1;
}

.roi-cta p { 
  font-size: clamp(1.15rem, 3vw, 1.35rem); 
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

/* Coming Soon - Polished */
.coming-soon-pro { 
  padding: var(--space-2xl) 5%; 
  background: var(--light);
  position: relative;
}

.coming-soon-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.coming-soon-pro h2 { 
  text-align: center; 
  margin-bottom: var(--space-sm);
}

.coming-soon-grid-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.coming-soon-item {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.coming-soon-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.coming-soon-item:hover::before {
  opacity: 1;
}

.coming-soon-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.5px;
}

.badge.development { 
  background: #fff3cd; 
  color: #856404; 
  box-shadow: var(--shadow-sm);
}

.badge.research { 
  background: #d1ecf1; 
  color: #0c5460; 
  box-shadow: var(--shadow-sm);
}

.coming-soon-item p { 
  color: var(--gray-dark); 
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.coming-soon-item a { 
  font-weight: 700;
  color: var(--primary);
  transition: all var(--transition-fast);
}

.coming-soon-item a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Final CTA - Ultra-Premium */
/* Was the darker Primary -> Deep Orange gradient with white text -- same
   "burnt orange" the services banner had, and going brighter with that
   gradient would have broken white-text contrast (Brand Orange only
   measures ~2.6:1 against white). Solved by switching the pairing instead
   of just nudging the color: bright orange background, dark text. Dark
   text against Brand Orange clears ~6:1, comfortably AA either way. */
.final-cta {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 100%);
  text-align: center;
  color: var(--dark);
  position: relative;
  overflow: hidden;
}

.final-cta h2 {
  color: var(--dark);
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: var(--space-md);
}

.final-cta > p {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin-bottom: var(--space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-weight: 500;
  color: var(--gray-dark);
}

.cta-note {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  color: var(--gray-dark);
  opacity: 0.85;
  font-weight: 400;
}

.final-cta .btn-cta-large { 
  background: var(--white); 
  color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.final-cta .btn-cta-large:hover { 
  background: var(--light); 
  color: var(--primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.final-cta .btn-cta-large:active {
  transform: translateY(0);
}

/* Contact Page - Polished */
.hero-sm { 
  background: var(--light); 
  padding: var(--space-xl) 4%; 
  text-align: center;
  position: relative;
}

.hero-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.hero-sm h1 { 
  margin-bottom: var(--space-md);
  font-size: clamp(2rem, 5vw, 2.5rem);
}

.hero-sm p {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--gray-dark);
  max-width: 900px;
  margin: 0 auto;
}

/* Removed: a stale duplicate of the .hero-eyebrow rule further down this
   file. Both were live at once -- the later rule (still below) only
   overrode `color` to the current brand orange, so it never touched this
   rule's own background/padding/radius, leaving a genuinely broken hybrid:
   orange text on a pale-green (#F0FFF4, --forest-green) pill that neither
   rule fully controlled. Consolidated into one definition below instead of
   two partially-overlapping ones. Used on 3 pages: the homepage,
   /demos/, and /brevard-county/. */

.contact-options {
  padding: var(--space-xl) 4%; 
  position: relative;
  z-index: 1;
}

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: var(--space-lg); 
  max-width: 1600px; 
  margin: 0 auto;
}

.card { 
  background: var(--white); 
  padding: var(--space-xl); 
  border-radius: var(--radius-lg); 
  border: 2px solid var(--gray-light); 
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
}

.card:hover { 
  border-color: var(--primary); 
  box-shadow: var(--shadow-primary); 
  transform: translateY(-4px);
}

.contact-card { 
  text-align: center; 
  text-align: center;
}

.contact-card h3 { 
  color: var(--dark); 
  margin-bottom: var(--space-md);
  font-size: 1.35rem;
}

.contact-card p { 
  color: var(--gray-dark); 
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

/* Form Elements - Polished & Wider */
.contact-form-section { 
  padding: var(--space-2xl) 8%; 
  max-width: 1400px; 
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.form { margin-top: var(--space-xl); }

.form-group { margin-bottom: var(--space-lg); }

.form-row { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: var(--space-xl);
  width: 100%;
}

label { 
  display: block; 
  font-weight: 600; 
  margin-bottom: var(--space-sm); 
  color: var(--dark); 
  font-size: 1rem;
}

.optional { 
  font-weight: 400; 
  color: var(--gray); 
  font-size: 0.9rem;
}

input, select, textarea {
  width: 100%;
  padding: 1.5rem 1.75rem;
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  font-size: 1.15rem;
  font-family: inherit;
  transition: all var(--transition-fast);
  line-height: 1.55;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  box-shadow: none;
  transform: none;
}

/* input[type=file] inherits the same big rounded/bordered box as every
   other field above, but the browser's native "Choose File" button
   rendered inside it doesn't -- it stays flat, square-cornered, OS-gray,
   clashing against both that box and the orange .btn submit button
   directly below it on forms like /records/. Restyled to read as part
   of the same button language instead of a native control dropped in. */
input[type="file"] {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.95rem;
  color: var(--gray-dark);
}

input[type="file"]::file-selector-button {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  margin-right: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
  transform: translateY(-1px);
}

input::placeholder, textarea::placeholder {
  color: var(--gray);
}

textarea { 
  resize: vertical; 
  min-height: 160px;
}

select {
  height: auto;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  padding-right: 3rem;
}

select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}

.form-status { 
  margin-top: var(--space-md); 
  padding: var(--space-md); 
  border-radius: var(--radius-md); 
  display: none;
}

.form-status.success { 
  display: block; 
  background: var(--green-light); 
  color: var(--green); 
  border: 2px solid var(--green);
}

.form-status.error { 
  display: block; 
  background: #ffebee; 
  color: #c62828; 
  border: 2px solid #ef9a9a;
}

.contact-direct { 
  padding: var(--space-xl) 8%; 
  text-align: center; 
  background: var(--light);
  position: relative;
}

.contact-direct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.contact-direct h2 { 
  margin-bottom: var(--space-lg);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.contact-direct p { 
  font-size: 1.1rem; 
  margin-bottom: var(--space-sm); 
  color: var(--gray-dark);
}

.contact-direct a {
  color: var(--primary);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.contact-direct a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Small Button for Contact Cards */
.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--white) !important;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 700;
  border: 2px solid var(--primary);
  transition: all var(--transition-normal);
  font-size: 1rem;
  cursor: pointer;
}

.btn:hover { 
  background: var(--primary-dark); 
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.btn:active {
  transform: translateY(0);
}

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

.btn-outline:hover { 
  background: var(--primary); 
  color: var(--white) !important;
}

/* Content Page (eob-era) */
.content-page {
  padding: var(--space-2xl) 8%;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.8;
}

.content-page h2 {
  margin-bottom: var(--space-lg);
}

.content-page p {
  margin-bottom: var(--space-md);
  color: var(--gray-dark);
}

/* 404 Page */
.hero {
  padding: var(--space-2xl) 8%;
  text-align: center;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  margin-bottom: var(--space-md);
}

.hero p {
  margin-bottom: var(--space-lg);
  color: var(--gray-dark);
}

.hero a {
  color: var(--primary);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.hero a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Services Menu Page */
.services-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 4rem 8%;
  text-align: center;
  color: var(--white);
}
.services-hero h1 { color: var(--white); margin-bottom: 1rem; }
.services-hero p { font-size: 1.25rem; max-width: 800px; margin: 0 auto; }

.services-catalog { padding: 5rem 8%; max-width: 1600px; margin: 0 auto; }
.service-category { margin-bottom: 5rem; }
.service-category h2 {
  font-size: 2rem;
  color: var(--dark);
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--primary);
}

.service-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.service-menu-item {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid var(--gray-light);
  transition: all 0.3s;
  display: block;
  position: relative;
}

.service-menu-item:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(253, 126, 20, 0.2);
  transform: translateY(-4px);
}

.service-menu-item h3 {
  color: var(--dark);
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.service-menu-item p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.service-link {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.service-menu-item.coming-soon {
  border-color: var(--gray-light);
  background: var(--light);
}

.services-cta {
  background: var(--light);
  padding: 4rem 8%;
  text-align: center;
  border-radius: 12px;
  margin: 0 8%;
}
.services-cta h2 { margin-bottom: 1rem; }
.services-cta p { font-size: 1.15rem; color: var(--gray); margin-bottom: 2rem; }

/* Individual Solution Page */
.solution-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 5rem 8%;
  color: var(--white);
  text-align: center;
}
.solution-banner h1 { color: var(--white); margin-bottom: 1rem; }
.solution-banner .lead { font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; }
.solution-banner .subtitle { font-size: 1.1rem; opacity: 0.95; }

.solution-content { padding: 5rem 8%; max-width: 1400px; margin: 0 auto; }
.problem-solution-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.problem-block-solo, .solution-block-solo {
  background: var(--white);
  padding: 3rem;
  border-radius: 12px;
  border: 2px solid var(--gray-light);
}

/* Here the colour carries meaning -- it is what separates the problem block
   from the solution block -- so it is kept rather than dropped. It moves from
   a 6px slab on one edge to the block's existing 2px border on all four,
   which states the same thing without the tab. */
.problem-block-solo {
  border-color: var(--primary);
}

.solution-block-solo {
  border-color: var(--green);
  background: #f0f8ff;
}

.problem-block-solo h2, .solution-block-solo h2 {
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
}

.problem-block-solo ul, .solution-block-solo ul {
  list-style: none;
  padding-left: 0;
}

.problem-block-solo li, .solution-block-solo li {
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
  line-height: 1.7;
}

.problem-block-solo li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.2rem;
}

.solution-block-solo li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .problem-solution-block { grid-template-columns: 1fr; }
  .service-menu-grid { grid-template-columns: 1fr; }
}

/* Footer */
/* --dark (#1c1c1c) read as true black; --dark-soft (#2a2a2a, already used
   elsewhere for the same purpose, e.g. line 833's gradient) is still a dark
   footer, just not stark black. --gray-on-dark below still clears 6.4:1
   against this lighter background, so no other footer text token needed
   to change. */
footer { background: var(--dark-soft); color: var(--light); padding: 3rem 8%; text-align: center; }
footer a { color: var(--primary-light); text-decoration: underline; }
footer a:hover { color: var(--white); }
.footer-inner p { margin-bottom: 0.5rem; color: var(--light); }
.hours { font-size: 0.9rem; color: var(--gray-on-dark); }
/* Town list in the footer and on /contact/. Small and muted -- it exists to be
   found by a reader checking "do they cover me", not to be read top to bottom.
   Both surfaces sit on --dark, so --gray-on-dark carries the 7.6:1 contrast;
   .contact-direct overrides it below for its light background. */
.service-area { font-size: 0.85rem; color: var(--gray-on-dark); max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
.contact-direct .service-area { color: var(--gray); }
/* Phone above email on /contact/, sized up to match the priority. */
.contact-direct-phone { font-size: 1.15rem; font-weight: 600; }
.footer-links { margin-top: 1rem; font-size: 0.9rem; }
/* Was var(--blue) on both link rows below -- the site's own footer a rule
   two lines up already uses --primary-light correctly; these two just
   never matched it. */
.footer-links a { color: var(--primary-light); }
.footer-portals { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-portals-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-on-dark); margin-bottom: 0.5rem; }
.footer-portals-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; }
.footer-portals-links a { color: var(--primary-light); font-size: 0.85rem; text-decoration: none; }
.footer-portals-links a:hover { color: var(--white); text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .hero-professional { padding: 4rem 4% 3rem; }
  .hero-professional h1 { font-size: 2rem; }
  .hero-lead { font-size: 1.25rem; }
  .services-grid-pro, .problem-grid, .roi-grid, .testimonials-pro, .coming-soon-grid-pro, .grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 3rem 4% !important; }
}

/* ========================================
   Pricing Tiers
   ======================================== */
.pricing-tiers {
  padding: var(--space-3xl) 8%;
  background: var(--light);
}

.pricing-tiers-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.pricing-tiers h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.pricing-intro {
  color: var(--gray-dark);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: white;
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.05) 0%, transparent 50%);
}

.pricing-card-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--gray-light);
}

.pricing-card-header h3 {
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.pricing-card-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
}

.pricing-card-price span {
  font-size: 1rem;
  color: var(--gray);
  font-weight: 400;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.pricing-features li {
  padding: var(--space-sm) 0;
  color: var(--gray-dark);
  position: relative;
  padding-left: var(--space-xl);
}

.pricing-features li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: bold;
}

.pricing-features li strong {
  color: var(--dark);
  display: block;
  margin-bottom: var(--space-sm);
}

/* Pricing Tiers */
.pricing-tiers {
  margin: var(--space-lg) 0 var(--space-xl);
  padding: var(--space-lg);
  background: var(--gray-light);
  border-radius: var(--radius-md);
}

.pricing-tier {
  margin-bottom: var(--space-lg);
}

.pricing-tier h4 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.pricing-tier p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
}

.pricing-tier strong {
  color: var(--dark);
  font-weight: 700;
}

.pricing-note {
  color: var(--gray-dark);
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Pricing Section */
.pricing-section {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.pricing-section h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--dark);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-section-header {
  margin-bottom: var(--space-xl);
  padding-top: var(--space-xl);
}

.pricing-section-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-model {
  background: var(--light);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-xl);
  border: 2px solid var(--gray-light);
}

.pricing-model h3 {
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.pricing-model p {
  color: var(--gray-dark);
  margin-bottom: var(--space-md);
}

.pricing-model ul {
  color: var(--gray-dark);
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

/* Addon Grid */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.addon-card {
  background: var(--light);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  text-align: center;
  transition: all var(--transition-normal);
}

.addon-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
}

.addon-card h4 {
  color: var(--dark);
  margin-bottom: var(--space-sm);
}

.addon-price {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

/* Hybrid Table */
.hybrid-table {
  width: 100%;
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.hybrid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--gray-light);
}

.hybrid-row:last-child {
  border-bottom: none;
}

.hybrid-row.header {
  background: var(--light);
  font-weight: 700;
  color: var(--dark);
}

.hybrid-row > div {
  padding: var(--space-sm);
}

.hybrid-note {
  color: var(--gray-dark);
  text-align: center;
  font-style: italic;
}

/* ========================================
   Service Cards - Ultra-Smooth
   ======================================== */
.service-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--gray-light) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-4px);
}

.service-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
  display: inline-block;
}

.service-card:hover .service-card-icon {
  transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
  font-size: 1.35rem;
  color: var(--dark);
  margin-bottom: var(--space-sm);
}

.service-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.service-card-price {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.service-card-link {
  color: var(--primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all var(--transition-fast);
}

.service-card-link:hover {
  gap: var(--space-sm);
  text-decoration: underline;
}

/* ========================================
   Launch Program Section - Dark Theme & Premium
   ======================================== */
/* Was the same near-black gradient as the banner above it -- together they
   formed one large dark block. Light background matching the rest of the
   site's post-banner content sections (e.g. .services-grid-container). */
.launch-program-section {
  padding: var(--space-2xl) 8%;
  background: var(--white);
  color: var(--gray-dark);
  position: relative;
  overflow: hidden;
}

.launch-program-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(182, 82, 9, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(182, 82, 9, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.launch-program-section h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.launch-program-section p {
  color: var(--gray-dark);
  line-height: 1.7;
}

.launch-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.launch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(182, 82, 9, 0.05) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.launch-card:hover::before {
  opacity: 1;
}

.launch-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(182, 82, 9, 0.2);
  transform: translateY(-6px);
  background: var(--white);
}

.launch-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
  display: inline-block;
}

.launch-card:hover .launch-card-icon {
  transform: scale(1.2) rotate(10deg);
}

.launch-card h3 {
  color: var(--dark);
  font-size: 1.35rem;
  margin-bottom: var(--space-sm);
}

.launch-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* ========================================
   Solution Page - Overview
   ======================================== */
.solution-overview-section {
  padding: var(--space-2xl) 8%;
  background: var(--light);
  position: relative;
}

.solution-overview-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.solution-overview-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.solution-intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.solution-intro h2 {
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.solution-lead {
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  color: var(--gray-dark);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 500;
}

.solution-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.capability-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.capability-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.capability-card:hover::before {
  opacity: 1;
}

.capability-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.capability-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
  text-align: center;
}

.capability-card:hover .capability-icon {
  transform: scale(1.1) rotate(5deg);
}

.capability-card h3 {
  color: var(--primary);
  margin-bottom: var(--space-md);
  font-size: 1.4rem;
  text-align: center;
}

.capability-card p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  flex: 1;
}

.capability-link {
  color: var(--primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all var(--transition-fast);
  text-align: center;
}

.capability-link:hover {
  gap: var(--space-sm);
  text-decoration: underline;
}

/* ========================================
   Story Section - Solution Pages
   ======================================== */
.story-section {
  padding: var(--space-2xl) 8%;
  background: linear-gradient(180deg, var(--white) 0%, var(--light) 100%);
}

.story-container {
  max-width: 1400px;
  margin: 0 auto;
}

.story-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  margin-bottom: var(--space-xl);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.story-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.story-character {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--gray-light);
  flex-wrap: wrap;
}

.character-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.story-character h3 {
  color: var(--dark);
  font-size: 1.4rem;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.character-title {
  color: var(--gray-dark);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

.story-content {
  padding: var(--space-lg);
}

.story-content p {
  color: var(--gray-dark);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.story-content p:last-child {
  margin-bottom: 0;
}

.story-card.solution {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-color: var(--green);
}

.story-card.solution .story-character h3 {
  color: var(--green);
}

.story-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
}

.divider-text {
  color: var(--gray-dark);
  font-weight: 600;
  font-size: 1.1rem;
}

.divider-line {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gray-light), var(--gray), var(--gray-light));
  border-radius: 3px;
}

.divider-icon {
  font-size: 2rem;
  color: var(--primary);
}

/* ========================================
   What Changes Section
   ======================================== */
.what-changes-section {
  padding: var(--space-2xl) 8%;
  background: var(--white);
  position: relative;
}

.what-changes-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(253, 126, 20, 0.02) 0%, transparent 70%);
  pointer-events: none;
}

.what-changes-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.what-changes-container h2 {
  text-align: center;
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.what-changes-subtitle {
  text-align: center;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  color: var(--gray-dark);
  margin-bottom: var(--space-2xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-weight: 500;
}

.changes-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.change-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.change-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.change-item.before .change-icon {
  background: #fff0f0;
  color: var(--red);
}

.change-item.after .change-icon {
  background: #f0fff0;
  color: var(--green);
}

.change-content h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.change-content p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

.change-arrow {
  font-size: 2rem;
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

/* ========================================
   Who This Is For Section
   ======================================== */
.who-for-section {
  padding: var(--space-2xl) 8%;
  background: var(--light);
  position: relative;
}

.who-for-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.who-for-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.who-for-container h2 {
  text-align: center;
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.who-for-subtitle {
  text-align: center;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  color: var(--gray-dark);
  margin-bottom: var(--space-2xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-weight: 500;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.role-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.role-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(253, 126, 20, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.role-card:hover::before {
  opacity: 1;
}

.role-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.role-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
  text-align: center;
}

.role-card:hover .role-icon {
  transform: scale(1.1) rotate(5deg);
}

.role-card h3 {
  color: var(--primary);
  margin-bottom: var(--space-md);
  font-size: 1.35rem;
  text-align: center;
}

.role-card p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.role-card p:last-child {
  margin-bottom: 0;
}

/* ========================================
   How It Works Section
   ======================================== */
.how-it-works-section {
  padding: var(--space-2xl) 8%;
  background: var(--white);
  position: relative;
}

.how-it-works-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(40, 167, 69, 0.02) 0%, transparent 70%);
  pointer-events: none;
}

.how-it-works-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.how-it-works-container h2 {
  text-align: center;
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.how-it-works-subtitle {
  text-align: center;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  color: var(--gray-dark);
  margin-bottom: var(--space-2xl);
  font-weight: 500;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.step-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(40, 167, 69, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.step-card:hover::before {
  opacity: 1;
}

.step-card:hover {
  border-color: var(--green);
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.15);
  transform: translateY(-4px);
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto var(--space-md);
  transition: transform var(--transition-normal);
}

.step-card:hover .step-number {
  transform: scale(1.1) rotate(5deg);
}

.step-card h3 {
  color: var(--green);
  margin-bottom: var(--space-md);
  font-size: 1.35rem;
}

.step-card p {
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ========================================
   Summary Section
   ======================================== */
.summary-section {
  padding: var(--space-2xl) 8%;
  background: var(--light);
  position: relative;
}

.summary-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.summary-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.summary-container h2 {
  text-align: center;
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.summary-lead {
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  color: var(--gray-dark);
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
  font-weight: 500;
  text-align: center;
}

.summary-container p:not(.summary-lead) {
  font-size: 1.1rem;
  color: var(--gray-dark);
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
  text-align: center;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.stat-item {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  text-align: center;
  transition: all var(--transition-normal);
}

.stat-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.stat-label {
  display: block;
  font-size: 0.95rem;
  color: var(--gray-dark);
  font-weight: 600;
}

/* ========================================
   Value Proposition Section
   ======================================== */
.value-prop-section {
  padding: var(--space-2xl) 8%;
  background: var(--white);
  position: relative;
}

.value-prop-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(40, 167, 69, 0.02) 0%, transparent 70%);
  pointer-events: none;
}

.value-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.value-container h2 {
  text-align: center;
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.value-subtitle {
  text-align: center;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  color: var(--gray-dark);
  margin-bottom: var(--space-2xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-weight: 500;
}

.value-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.value-before,
.value-after {
  position: relative;
}

.value-header {
  margin-bottom: var(--space-lg);
}

.value-label {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.value-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Side rule removed: at gray-light on white it read as a rendering seam rather
   than an accent, and the radius plus padding already separate the items. */
.value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.value-item:hover {
  border-left-color: var(--primary);
  background: rgba(253, 126, 20, 0.03);
  transform: translateX(4px);
}

.value-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--red);
  font-weight: 700;
}

.value-icon.check {
  color: var(--green);
}

.value-item p {
  color: var(--gray-dark);
  margin: 0;
  line-height: 1.6;
}

.value-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
}

.arrow-icon {
  font-size: 2.5rem;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.value-arrow:hover .arrow-icon {
  transform: scale(1.2);
}

.value-arrow span {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* ========================================
   Benefits Section
   ======================================== */
.benefits-section {
  padding: var(--space-2xl) 8%;
  background: var(--light);
  position: relative;
}

.benefits-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.benefits-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.benefits-container h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.benefit-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(40, 167, 69, 0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.benefit-card:hover::before {
  opacity: 1;
}

.benefit-card:hover {
  border-color: var(--green);
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.15);
  transform: translateY(-4px);
}

.benefit-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  transition: transform var(--transition-normal);
}

.benefit-card:hover .benefit-icon {
  transform: scale(1.1) rotate(5deg);
}

.benefit-card h3 {
  color: var(--green);
  margin-bottom: var(--space-md);
  font-size: 1.35rem;
}

.benefit-card p {
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ========================================
   Solution CTA Section
   ======================================== */
.solution-cta-section {
  padding: var(--space-2xl) 8%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.solution-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.solution-cta-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.solution-cta-container h2 {
  color: var(--white);
  margin-bottom: var(--space-md);
  font-size: clamp(2rem, 5vw, 2.5rem);
}

.cta-lead {
  color: var(--white);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin-bottom: var(--space-md);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-weight: 500;
}

.cta-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin-bottom: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

.solution-cta-container .btn-cta-large {
  background: var(--white);
  color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.solution-cta-container .btn-cta-large:hover {
  background: var(--light);
  color: var(--primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.cta-note {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  opacity: 0.9;
  color: var(--white);
  font-weight: 400;
}

/* ========================================
   Problem/Solution Cards - Ultra-Smooth
   ======================================== */
.problem-solution-section {
  padding: var(--space-2xl) 8%;
  background: linear-gradient(180deg, var(--white) 0%, var(--light) 100%);
  position: relative;
}

.problem-solution-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(253, 126, 20, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.problem-solution-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.ps-column {
  display: flex;
  flex-direction: column;
}

.ps-heading {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: 1.75rem;
  position: relative;
  padding-bottom: var(--space-md);
}

.ps-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 3px;
  /* No transition here: this rule used to animate its own width, but nothing
     anywhere changes that width, so it animated nothing and only cost a
     layout-property transition on an otherwise static rule. */
}

.problems-heading {
  color: var(--primary);
}

.problems-heading::after {
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
}

.solutions-heading {
  color: var(--green);
}

.solutions-heading::after {
  background: linear-gradient(90deg, var(--green), var(--green-light), var(--green));
}

.ps-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.problem-card,
.solution-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

/* Red vs green is the only thing distinguishing these two cards, so the colour
   stays. It moves from a 5px side slab to a bar along the top, clipped by the
   card's own radius via the overflow:hidden above. ::after rather than
   ::before, which is already taken by the hover wash below. */
.problem-card::after,
.solution-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.problem-card::after {
  background: var(--red);
}

.solution-card::after {
  background: var(--green);
}

.problem-card::before,
.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.02) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.problem-card:hover::before,
.solution-card:hover::before {
  opacity: 1;
}

.problem-card:hover,
.solution-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-lg);
}

.problem-card-icon,
.solution-card-icon {
  font-size: 1.75rem;
  font-weight: 700;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-normal);
}

.problem-card-icon {
  color: var(--white);
  background: var(--red);
}

.solution-card-icon {
  color: var(--white);
  background: var(--green);
}

.problem-card:hover .problem-card-icon,
.solution-card:hover .solution-card-icon {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.problem-card p,
.solution-card p {
  color: var(--gray-dark);
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* What's Included Section */
.whats-included {
  padding: 4rem 8%;
}

.whats-included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.whats-included-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid var(--gray-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
}

.whats-included-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(253, 126, 20, 0.15);
  transform: translateY(-4px);
}

.whats-included-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.35rem;
}

.whats-included-card p {
  color: var(--gray-dark);
}

/* Solution Details */
.solution-details {
  padding: 4rem 8%;
  background: var(--light);
}

.solution-details-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   Category Banners - Smooth & Professional
   ======================================== */
.category-banner {
  padding: var(--space-3xl) 8%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-2xl);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xl);
}

.category-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 100%);
  pointer-events: none;
}

.category-banner.revenue-banner {
  background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 25% 75%, var(--orange-light) 100%);
  border: 2px solid var(--orange);
}

.category-banner.automation-banner {
  background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 25% 75%, var(--orange-light) 100%);
  border: 2px solid var(--orange);
}

.category-banner.it-banner {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-mid) 25% 75%, var(--accent-light) 100%);
  border: 2px solid var(--accent-mid);
}

/* Was a near-black gradient (var(--dark)/var(--dark-soft)) -- the same
   "black hero bar" pattern flagged elsewhere on this site. Reuses the
   Primary -> Deep Orange gradient already established for .home-final-cta,
   so "Launch Program" reads as an exciting on-brand moment instead of a
   dark template default; white text already validated for contrast against
   this exact gradient. */
.category-banner.launch-banner {
  padding: var(--space-2xl) 8%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: 2px solid var(--primary-dark);
}

.banner-content {
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.banner-svg {
  flex-shrink: 0;
  width: 200px;
  height: 120px;
  transition: transform var(--transition-normal);
}

.category-banner:hover .banner-svg {
  transform: scale(1.05);
}

.banner-svg svg {
  width: 100%;
  height: 100%;
}

.banner-text {
  flex: 1;
}

.banner-text h2 {
  color: var(--dark);
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.banner-text p {
  color: var(--gray-dark);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: 0;
  line-height: 1.7;
  font-weight: 500;
}

/* Dark banner text (launch program) */
.category-banner.launch-banner .banner-text h2,
.category-banner.launch-banner .banner-text p {
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.category-banner.launch-banner .banner-text h2,
.category-banner.launch-banner .banner-text p {
  color: var(--white);
}

.category-badge {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--primary-dark);
}

.category-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.category-badge.gray {
  background: var(--gray);
  border-color: var(--gray-dark);
}

.category-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.category-badge.gray {
  background: var(--gray);
}

/* Default .category-badge is orange-on-light, built for the other banners'
   light backgrounds -- against this banner's now-orange background it
   would nearly disappear into it. White-on-orange instead. */
.category-banner.launch-banner .category-badge {
  background: var(--white);
  color: var(--primary) !important;
  border-color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Services Grid Container */
.services-grid-container {
  padding: var(--space-xl) 8%;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* auto-fit let the browser pick a column count from available width, which
   for a 4-card group at typical desktop widths meant 3 fit per row and the
   4th wrapped alone underneath -- an orphaned card, not a deliberate
   layout. Explicit per-count column classes instead: 4 cards is a clean
   2x2, not "3 in a row plus 1 hanging." */
.services-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.services-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.services-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .services-grid--2,
  .services-grid--3,
  .services-grid--4 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .services-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sub-groups keep each services-grid to <=4 cards with a labeled break
   between them, instead of one flat 8-11 card wall -- the direct fix for
   cards reading as an undifferentiated pile with no way to tell a
   flagship offering from a minor add-on. */
.services-subgroup {
  margin-top: var(--space-2xl);
}

.services-subgroup:first-child {
  margin-top: 0;
}

.services-subgroup-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin: 0;
}

/* ========================================
   Responsive adjustments
   ======================================== */
@media (max-width: 768px) {
  .service-card,
  .launch-card {
    padding: 2rem 1.5rem;
  }
  .service-card-icon,
  .launch-card-icon {
    font-size: 2rem;
  }
  .service-card h3,
  .launch-card h3 {
    font-size: 1.25rem;
  }
  .launch-program-section {
    padding: 3rem 8%;
  }
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .banner-svg {
    width: 250px;
    height: 150px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .problem-solution-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .whats-included-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  /* Solution Page Responsive */
  .solution-capabilities,
  .support-pillars,
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .value-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .value-arrow {
    padding: var(--space-md);
  }
  
  .value-arrow span {
    display: none;
  }
  
  .capability-card {
    padding: var(--space-lg) var(--space-md);
  }
  
  .capability-icon {
    font-size: 2.25rem;
  }
  
  .pillar-icon {
    font-size: 2.5rem;
  }
  
  /* Story Section Responsive */
  .story-character {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .story-character h3 {
    min-width: 100%;
  }
  
  /* Changes Grid Responsive */
  .changes-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .change-arrow {
    padding: var(--space-md);
    transform: rotate(90deg);
  }
  
  /* Role Cards Responsive */
  .role-card {
    padding: var(--space-lg) var(--space-md);
  }
  
  /* Step Cards Responsive */
  .step-card {
    padding: var(--space-lg) var(--space-md);
  }
  
  /* Stat Items Responsive */
  .stat-item {
    padding: var(--space-md);
  }
  
  .stat-number {
    font-size: 1.75rem;
  }
  
  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .changes-grid {
    gap: var(--space-sm);
  }
  
  .change-item {
    flex-direction: column;
    text-align: center;
  }
  
  .change-arrow {
    display: none;
  }
  
  .change-item.before {
    display: none;
  }
}

@media (max-width: 480px) {
  .category-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
  }
  .banner-text h2 {
    font-size: 1.75rem;
  }
  .banner-text p {
    font-size: 1rem;
  }
  .problem-solution-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .problem-card,
  .solution-card {
    padding: 1.25rem;
  }
  .problem-card-icon,
  .solution-card-icon {
    font-size: 1.25rem;
  }
  .problem-card p,
  .solution-card p {
    font-size: 1rem;
  }
  .whats-included-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Solutions Overview Page
   ======================================== */
.solutions-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: var(--space-3xl) 8% var(--space-2xl);
  color: var(--white);
  text-align: center;
}

.solutions-hero-content {
  max-width: 1200px;
  margin: 0 auto;
}

.solutions-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

.solutions-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.solutions-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.trust-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
}

.trust-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

/* Solutions Value Section */
.solutions-value {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.solutions-value-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.solutions-value h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-value-text {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.solutions-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.value-item {
  text-align: center;
  padding: var(--space-lg);
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.value-item:hover .value-icon {
  transform: scale(1.1);
}

.value-item h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.value-item p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Solutions Categories Section */
.solutions-categories {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.solutions-categories-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.solutions-categories h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.categories-subtitle {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.category-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--dark);
  display: block;
}

.category-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.category-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.category-number {
  background: var(--primary);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
}

.category-label {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-card h3 {
  color: var(--dark);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.category-card > p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.category-features {
  list-style: none;
  margin-bottom: var(--space-lg);
  padding: 0;
}

.category-features li {
  color: var(--gray);
  padding: var(--space-xs) 0;
  position: relative;
  padding-left: var(--space-md);
}

.category-features li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
}

.category-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  transition: all var(--transition-fast);
}

.category-cta:hover {
  color: var(--primary-dark);
  transform: translateX(4px);
}

.category-card.launch {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
}

.category-card.launch h3,
.category-card.launch > p {
  color: var(--dark);
}

.category-card.launch .category-label {
  background: var(--primary);
  color: var(--white);
}

/* Solutions How It Works */
.solutions-how {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.solutions-how-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.solutions-how h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.how-subtitle {
  color: var(--gray-dark);
  font-size: 1.15rem;
  margin-bottom: var(--space-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.how-step {
  text-align: center;
  padding: var(--space-lg);
}

.how-step .step-number {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: var(--space-md);
}

.how-step h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.how-step p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Solutions CTA Section */
.solutions-cta-section {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: var(--space-3xl) 8%;
  color: var(--white);
  text-align: center;
}

.solutions-cta-container {
  max-width: 900px;
  margin: 0 auto;
}

.solutions-cta-section h2 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-cta-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.solutions-cta-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* Solutions Responsive */
@media (max-width: 768px) {
  .solutions-hero {
    padding: var(--space-2xl) 6% var(--space-xl);
  }
  
  .solutions-value,
  .solutions-categories,
  .solutions-how,
  .solutions-cta-section {
    padding: var(--space-2xl) 6%;
  }
  
  .solutions-trust {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .solutions-value-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .category-card {
    padding: var(--space-lg);
  }
  
  .how-step {
    padding: var(--space-md);
  }
}


/* ========================================
   Polished Homepage Styles
   ======================================== */
.hero-polished {
  background: linear-gradient(135deg, var(--white) 0%, var(--light) 100%);
  padding: var(--space-3xl) 8% var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-polished-content {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-polished h1 {
  color: var(--dark);
  font-size: clamp(2.25rem, 6vw, 3rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero-polished-lead {
  color: var(--gray-dark);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.hero-polished-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.hero-polished-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.trust-pair {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--gray);
  font-size: 0.95rem;
  font-weight: 500;
}

.trust-icon {
  color: var(--primary);
  font-weight: bold;
}

/* Homepage Hero - Professional & Clean */
/* Same fix as .hero-professional -- flat white matching the header
   directly above it, instead of a tinted wash that visibly didn't match
   the header's flat white at the seam. */
.hero-homepage {
  background: var(--white);
  padding: var(--space-3xl) 6% var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-homepage-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Geographic eyebrow above the h1. Uppercase and tracked out so it reads as a
   label rather than as a competing headline -- it has to register in
   peripheral vision without pulling weight away from the h1 below it.
   --primary rather than --orange: this is text, so it needs the AA-contrast
   variant. Pill treatment (background/radius/padding) folded in from the
   duplicate rule removed above -- a light orange tint instead of that
   rule's leftover pale green. */
.hero-eyebrow {
  display: inline-block;
  color: var(--primary);
  background: rgba(182, 82, 9, 0.08);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  position: relative;
}

.hero-homepage h1 {
  color: var(--dark);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Sits between the lead and the buttons, so it steps down from the lead's
   weight rather than matching it. The lead's own bottom margin is tightened
   when this element follows it, rather than pulling this one up with a negative
   margin -- a negative margin here would silently depend on the exact value of
   the lead's margin-bottom and break the moment that changed. */
.hero-homepage-lead:has(+ .hero-homepage-sub) { margin-bottom: var(--space-sm); }

.hero-homepage-sub {
  color: var(--gray);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

.hero-homepage-lead {
  color: var(--gray-dark);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
  font-weight: 600;
}

.hero-homepage-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.hero-homepage-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--gray);
  font-size: 0.95rem;
}

.trust-check {
  color: var(--primary);
  font-weight: bold;
}

/* Pricing Router -- a guided narrower above the flat quicknav index, so a
   first-time visitor gets routed to one section instead of the full
   9-category catalog before any filter. */
.pricing-router {
  padding: var(--space-lg) 6% 0;
  max-width: 1400px;
  margin: 0 auto;
}

.pricing-router-container {
  background: rgba(182, 82, 9, 0.04);
  border: 1px solid rgba(182, 82, 9, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.pricing-router-question {
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 var(--space-md);
}

.pricing-router-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.pricing-router-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pricing-router-option strong {
  color: var(--primary);
  font-size: 1rem;
}

.pricing-router-option span {
  color: var(--gray-dark);
  font-size: 0.85rem;
}

.pricing-router-option:hover,
.pricing-router-option:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Brief highlight on the section a router option jumps to, so the scroll
   destination is obvious rather than an unannounced jump cut. */
.pricing-router-highlight {
  animation: pricing-router-pulse 2s ease-out;
}

@keyframes pricing-router-pulse {
  0% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 182, 82, 9), 0.25); }
  100% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 182, 82, 9), 0); }
}

/* Pricing Page Quick Navigation */
.pricing-quicknav {
  padding: var(--space-md) 6%;
  background: linear-gradient(to bottom, var(--white) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 70px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
  .pricing-quicknav {
    padding: 0.5rem 0;
    top: 60px;
  }
  .pricing-quicknav-label { display: none; }
  .pricing-quicknav-content {
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
  }
  .pricing-quicknav-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Was scoped to .pricing-section[id] only -- every other anchor-linked
   target sitewide (category banners on /services/, solution-page sections
   like #email-hosting, anything else jumped to via #id) still landed with
   its heading hidden behind the sticky header, since scroll-margin-top
   was never applied globally. scroll-padding-top on the scrolling root
   covers every anchor jump on the site in one rule instead of needing a
   per-page selector added every time a new anchor target shows up. */
html {
  scroll-padding-top: 130px;
}

.pricing-quicknav-container {
  max-width: 1400px;
  margin: 0 auto;
}

.pricing-quicknav-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.pricing-quicknav-label {
  font-weight: 600;
  color: var(--gray-dark);
  font-size: 0.9rem;
}

.pricing-quicknav-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.pricing-quicknav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  color: var(--dark-soft);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  backdrop-filter: blur(4px);
}

.pricing-quicknav-link:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.pricing-quicknav-link:active {
  transform: translateY(1px);
}

/* Home Page Specific Styles */

/* Why TKTech (credibility band) */
.home-why-us {
  padding: var(--space-2xl) 8%;
  background: linear-gradient(180deg, rgba(182, 82, 9, 0.05) 0%, rgba(182, 82, 9, 0.015) 100%);
}

.home-why-us-container {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.home-why-us-mark {
  width: 48px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: 0 auto var(--space-lg);
}

.home-why-us-heading {
  color: var(--dark);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.home-why-us-statement {
  color: var(--dark);
  font-size: clamp(1.15rem, 2.75vw, 1.5rem);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.home-why-us-detail {
  color: var(--gray-dark);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* Restored -- deleted as "dead" in a prior pass on the assumption it was
   homepage-only, but /about-us/ and /brevard-county/ both still depend on
   it (verified via grep before restoring, unlike the deletion). */
.home-value-section {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.home-value-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.home-value-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.home-value-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.home-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.home-value-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.home-value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.home-value-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.home-value-card:hover .home-value-card-icon {
  transform: scale(1.1);
}

.home-value-card h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.home-value-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Home What's Costing Section (Dark) */
/* Was a full-bleed near-black band (var(--dark), #1c1c1c) with white-on-
   5%-white-overlay cards -- zero brand color anywhere in it, on a page
   that's otherwise light throughout. Read as a generic dark "problem
   section" template default, not this site's identity, and the user
   flagged the extreme-dark treatment specifically. Lightened to match
   the rest of the page, with --primary carrying the accent instead of
   darkness carrying the contrast. */
.home-whats-costing {
  padding: var(--space-3xl) 8%;
  background: rgba(182, 82, 9, 0.04);
  color: var(--gray-dark);
}

.home-whats-costing-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.home-whats-costing-container h2 {
  color: var(--gray-dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.home-whats-costing-subtitle {
  color: var(--gray);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.home-whats-costing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.home-whats-costing-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-light);
  border-top: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.home-whats-costing-card:hover {
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.home-whats-costing-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.home-whats-costing-card h3 {
  color: var(--gray-dark);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}

.home-whats-costing-card p {
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
}

.home-whats-costing-note {
  color: var(--gray);
  font-style: italic;
  margin-top: var(--space-xl);
}

/* Home Solutions Preview */
.home-solutions-preview {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.home-solutions-preview-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.home-solutions-preview-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.home-solutions-preview-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.home-solutions-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.home-solution-preview-card {
  background: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
}

.home-solution-preview-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary);
}

.home-solution-preview-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: 2rem;
}

.home-solution-preview-card h3 {
  color: var(--dark);
  font-size: 1.35rem;
  margin-bottom: var(--space-sm);
}

.home-solution-preview-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.home-solution-preview-more {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  transition: color var(--transition-fast);
}

.home-solution-preview-card:hover .home-solution-preview-more {
  color: var(--primary-dark);
}

.home-solutions-preview-cta {
  text-align: center;
}

/* Live Demos page */
.nav-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--forest-green); color: #fff; border-radius: 99px; padding: 2px 8px;
  margin-left: 6px; vertical-align: 2px;
}
.demo-notice { max-width: 1400px; margin: var(--space-xl) auto 0; padding: 0 8%; }
.demo-notice-inner {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-md);
  padding: 14px 20px; font-size: 0.95rem; color: #92400E; display: flex; gap: 10px; align-items: flex-start;
}
.demo-section { padding: var(--space-2xl) 8% var(--space-3xl); background: var(--white); }
.demo-container { max-width: 1400px; margin: 0 auto; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); }
.demo-card {
  background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm); transition: all var(--transition-normal); text-align: left; overflow: hidden;
  display: flex; flex-direction: column;
}
.demo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--primary); }
.demo-card-body { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; }
.demo-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center;
  justify-content: center; margin-bottom: var(--space-md); font-size: 1.15rem; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
}
.demo-color-green { background: var(--forest-green); }
.demo-color-green-light { background: var(--forest-green-light); }
.demo-color-orange { background: var(--primary); }
.demo-color-blue { background: var(--blue-dark); }
.demo-color-teal { background: var(--teal); }
.demo-color-gray { background: var(--gray); }
.demo-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.demo-card p { color: var(--gray-dark); line-height: 1.6; font-size: 0.95rem; flex: 1; margin-bottom: var(--space-md); }
.demo-status {
  font-size: 0.7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 5px; padding: 3px 9px; display: inline-block; margin-bottom: 10px; align-self: flex-start;
}
.status-live { background: #F0FFF4; color: var(--forest-green); }
.status-soon { background: var(--gray-light); color: var(--gray); }
.demo-launch {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
  border-top: 1px solid var(--gray-light); background: var(--light); font-weight: 700; font-size: 0.95rem;
  color: var(--primary);
}
.demo-card:hover .demo-launch { color: var(--primary-dark); }
.demo-final-cta { padding: var(--space-3xl) 8%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); text-align: center; }
.demo-final-cta h2 { color: #fff; }
.demo-final-cta p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto var(--space-xl); font-size: 1.1rem; }

/* Home ROI Section */
/* Value Section */
.value-section {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.value-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.value-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.value-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.value-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.value-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.value-card:hover .value-card-icon {
  transform: scale(1.1);
}

.value-card h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.value-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Problems Section */
.problems-section {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.problems-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.problems-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.problems-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.problem-card {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.problem-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.problem-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.problem-card:hover .problem-icon {
  transform: scale(1.1);
}

.problem-card h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.problem-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Solutions Preview */
.solutions-preview {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.solutions-preview-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.solutions-preview-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-preview-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.solutions-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.solution-preview-card {
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--dark);
  display: block;
}

.solution-preview-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.solution-preview-number {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: var(--space-md);
}

.solution-preview-card h3 {
  color: var(--dark);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}

.solution-preview-card > p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.solution-preview-more {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  transition: all var(--transition-fast);
}

.solution-preview-more:hover {
  color: var(--primary-dark);
  transform: translateX(4px);
}

.solutions-preview-cta {
  margin-top: var(--space-lg);
}

/* ROI Section Polished */
.roi-section-polished {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  color: var(--white);
  text-align: center;
}

.roi-container {
  max-width: 1200px;
  margin: 0 auto;
}

.roi-section-polished h2 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-2xl);
  letter-spacing: -0.02em;
}

.roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.roi-value {
  color: var(--primary);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.roi-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.roi-equals {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.roi-cost {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.5;
}

.roi-note {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* Final CTA Polished */
.final-cta-polished {
  padding: var(--space-3xl) 8%;
  background: var(--white);
  text-align: center;
}

.final-cta-container {
  max-width: 900px;
  margin: 0 auto;
}

.final-cta-polished h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.final-cta-container > p:first-of-type {
  color: var(--gray-dark);
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.cta-subtitle {
  color: var(--gray);
  font-size: 0.95rem;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* ========================================
   Polished Solutions Page Styles
   ======================================== */
.solutions-hero-polished {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: var(--space-3xl) 8% var(--space-2xl);
  color: var(--white);
  text-align: center;
}

.solutions-hero-polished-content {
  max-width: 1200px;
  margin: 0 auto;
}

.solutions-hero-polished h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 6vw, 3rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.solutions-hero-polished-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.solutions-hero-polished-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.solutions-hero-polished-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Solutions Value Polished */
.solutions-value-polished {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.solutions-value-polished-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.solutions-value-polished-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-value-polished-text {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.solutions-value-polished-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.solutions-value-polished-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.solutions-value-polished-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.solutions-value-polished-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.solutions-value-polished-card:hover .solutions-value-polished-icon {
  transform: scale(1.1);
}

.solutions-value-polished-card h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.solutions-value-polished-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Solutions Categories Polished */
.solutions-categories-polished {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.solutions-categories-polished-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.solutions-categories-polished h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-categories-polished-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.solutions-categories-polished-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.solutions-category-polished-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--dark);
  display: block;
}

.solutions-category-polished-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--primary);
}

.solutions-category-polished-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.solutions-category-polished-number {
  background: var(--primary);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
}

.solutions-category-polished-type {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solutions-category-polished-card h3 {
  color: var(--dark);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.solutions-category-polished-card > p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.solutions-category-polished-features {
  list-style: none;
  margin-bottom: var(--space-lg);
  padding: 0;
}

.solutions-category-polished-features li {
  color: var(--gray);
  padding: var(--space-xs) 0;
  position: relative;
  padding-left: var(--space-md);
}

.solutions-category-polished-features li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
}

.solutions-category-polished-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  transition: all var(--transition-fast);
}

.solutions-category-polished-cta:hover {
  color: var(--primary-dark);
  transform: translateX(4px);
}

.solutions-category-polished-launch {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
}

.solutions-category-polished-launch h3,
.solutions-category-polished-launch > p {
  color: var(--dark);
}

.solutions-category-polished-launch .solutions-category-polished-type {
  background: var(--primary);
  color: var(--white);
}

/* Solutions How Polished */
.solutions-how-polished {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.solutions-how-polished-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.solutions-how-polished h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-how-polished-subtitle {
  color: var(--gray-dark);
  font-size: 1.15rem;
  margin-bottom: var(--space-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.solutions-how-polished-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.solutions-how-polished-step {
  text-align: center;
  padding: var(--space-lg);
}

.solutions-how-polished-step-number {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: var(--space-md);
}

.solutions-how-polished-step h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.solutions-how-polished-step p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Solutions CTA Polished */
.solutions-cta-polished {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: var(--space-3xl) 8%;
  color: var(--white);
  text-align: center;
}

.solutions-cta-polished-container {
  max-width: 900px;
  margin: 0 auto;
}

.solutions-cta-polished h2 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.solutions-cta-polished-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.solutions-cta-polished-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* ========================================
   Responsive - Polished Pages
   ======================================== */
@media (max-width: 768px) {
  .hero-polished {
    padding: var(--space-2xl) 6% var(--space-xl);
  }
  
  .hero-polished-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-polished-actions .btn-cta {
    width: 100%;
    max-width: 400px;
    margin-bottom: var(--space-md);
  }
  
  .hero-polished-actions .btn-secondary {
    width: 100%;
    max-width: 400px;
  }
  
  .hero-polished-trust {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .value-section,
  .problems-section,
  .solutions-preview {
    padding: var(--space-2xl) 6%;
  }
  
  .value-grid,
  .problems-grid,
  .solutions-preview-grid {
    grid-template-columns: 1fr;
  }
  
  .solutions-hero-polished {
    padding: var(--space-2xl) 6% var(--space-xl);
  }
  
  .solutions-hero-polished-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .solutions-value-polished,
  .solutions-categories-polished,
  .solutions-how-polished,
  .solutions-cta-polished {
    padding: var(--space-2xl) 6%;
  }
  
  .solutions-value-polished-grid,
  .solutions-categories-polished-grid,
  .solutions-how-polished-steps {
    grid-template-columns: 1fr;
  }
  
  .roi-section-polished {
    padding: var(--space-2xl) 6%;
  }
  
  .roi-grid {
    grid-template-columns: 1fr;
  }
  
  .final-cta-polished {
    padding: var(--space-2xl) 6%;
  }
}

@media (max-width: 480px) {
  .value-card,
  .problem-card,
  .solution-preview-card,
  .solutions-value-polished-card,
  .solutions-category-polished-card {
    padding: var(--space-lg);
  }
  
  .solutions-how-polished-step {
    padding: var(--space-md);
  }
  
  .roi-card {
    padding: var(--space-lg);
  }
}

/* ========================================
   Style Guide Page
   ======================================== */
.style-guide-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-soft) 100%);
  padding: var(--space-3xl) 8% var(--space-2xl);
  color: var(--white);
  text-align: center;
}

.style-guide-hero-content {
  max-width: 1200px;
  margin: 0 auto;
}

.style-guide-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.style-guide-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.style-guide-section {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.style-guide-section.light {
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.style-guide-container {
  max-width: 1400px;
  margin: 0 auto;
}

.style-guide-section h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  text-align: center;
}

.style-guide-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
  text-align: center;
}

/* Color Sections */
.color-section {
  margin-bottom: var(--space-3xl);
}

.color-section h3 {
  color: var(--dark);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.color-section-desc {
  color: var(--gray);
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: 0.95rem;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.color-grid.variants {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.color-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

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

.color-card.small {
  grid-column: span 1;
}

.color-swatch {
  height: 150px;
  width: 100%;
}

.color-card.small .color-swatch {
  height: 100px;
}

.color-info {
  padding: var(--space-md);
  background: var(--white);
}

.color-name {
  display: block;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-xs);
}

.color-hex {
  display: block;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  font-family: monospace;
}

.color-rgb {
  display: block;
  color: var(--gray);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  font-family: monospace;
}

.color-use {
  display: block;
  color: var(--gray-dark);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Typography */
.typography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.typography-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.typography-sample {
  margin-bottom: var(--space-md);
  color: var(--dark);
}

.typography-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.typography-name {
  font-weight: 700;
  color: var(--dark);
}

.typography-use {
  color: var(--gray-dark);
  font-size: 0.9rem;
}

.typography-stack {
  color: var(--gray);
  font-size: 0.8rem;
  font-family: monospace;
  word-break: break-all;
}

.typography-scales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.typography-scale {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

.typography-scale h4 {
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.h-sample {
  color: var(--dark);
  margin: var(--space-xs) 0;
  padding: var(--space-sm);
  background: var(--light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.h1 { font-size: 2.75rem; font-weight: 700; }
.h2 { font-size: 2.25rem; font-weight: 700; }
.h3 { font-size: 1.5rem; font-weight: 700; }
.h4 { font-size: 1.25rem; font-weight: 700; }

.body-sample {
  color: var(--dark);
  margin: var(--space-xs) 0;
  padding: var(--space-sm);
  background: var(--light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.body-sample.small { font-size: 0.95rem; }
.body-sample.large { font-size: 1.15rem; }

/* Spacing */
.spacing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-lg);
}

.spacing-card {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.spacing-visual {
  height: 20px;
  background: var(--primary-light);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
}

.spacing-visual.xs { width: 20%; margin-left: auto; margin-right: auto; }
.spacing-visual.sm { width: 40%; margin-left: auto; margin-right: auto; }
.spacing-visual.md { width: 60%; margin-left: auto; margin-right: auto; }
.spacing-visual.lg { width: 80%; margin-left: auto; margin-right: auto; }
.spacing-visual.xl { width: 90%; margin-left: auto; margin-right: auto; }
.spacing-visual.2xl { width: 95%; margin-left: auto; margin-right: auto; }
.spacing-visual.3xl { width: 100%; margin-left: auto; margin-right: auto; }

.spacing-name {
  display: block;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-xs);
}

.spacing-value {
  display: block;
  color: var(--gray);
  font-size: 0.85rem;
  font-family: monospace;
}

/* Border Radius */
.radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-lg);
}

.radius-card {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.radius-visual {
  height: 40px;
  background: var(--primary-light);
  margin-bottom: var(--space-sm);
  width: 100%;
}

.radius-visual.sm { border-radius: var(--radius-sm); }
.radius-visual.md { border-radius: var(--radius-md); }
.radius-visual.lg { border-radius: var(--radius-lg); }
.radius-visual.xl { border-radius: var(--radius-xl); }
.radius-visual.full { border-radius: 50%; }

.radius-name {
  display: block;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-xs);
}

.radius-value {
  display: block;
  color: var(--gray);
  font-size: 0.85rem;
  font-family: monospace;
}

/* Shadows */
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.shadow-card {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.shadow-visual {
  height: 60px;
  background: var(--primary-light);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  width: 100%;
}

.shadow-visual.sm { box-shadow: var(--shadow-sm); }
.shadow-visual.md { box-shadow: var(--shadow-md); }
.shadow-visual.lg { box-shadow: var(--shadow-lg); }
.shadow-visual.xl { box-shadow: var(--shadow-xl); }
.shadow-visual.primary { box-shadow: var(--shadow-primary); }
.shadow-visual.primary-lg { box-shadow: var(--shadow-primary-lg); }

.shadow-name {
  display: block;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-xs);
}

.shadow-value {
  display: block;
  color: var(--gray);
  font-size: 0.75rem;
  font-family: monospace;
  word-break: break-all;
}

/* Components */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.component-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.component-card h4 {
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.component-card .btn-cta,
.component-card .btn-secondary {
  margin: var(--space-sm) 0 var(--space-md);
}

.component-example-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
}

.component-code {
  background: var(--light);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--dark);
  margin-top: var(--space-sm);
}

/* Usage Guidelines */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.usage-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

.usage-color {
  height: 40px;
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.usage-card h4 {
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.usage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.usage-list li {
  color: var(--gray-dark);
  padding: var(--space-xs) 0;
  position: relative;
  padding-left: var(--space-md);
}

.usage-list li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
}

/* Style Guide Responsive */
@media (max-width: 768px) {
  .style-guide-hero {
    padding: var(--space-2xl) 6% var(--space-xl);
  }
  
  .style-guide-section {
    padding: var(--space-2xl) 6%;
  }
  
  .color-grid {
    grid-template-columns: 1fr;
  }
  
  .color-grid.variants {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .typography-grid,
  .spacing-grid,
  .radius-grid,
  .shadow-grid,
  .component-grid,
  .usage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .color-card.small .color-swatch {
    height: 80px;
  }
  
  .spacing-visual {
    height: 15px;
  }
  
  .radius-visual {
    height: 30px;
  }
  
  .shadow-visual {
    height: 40px;
  }
}

/* Forest Green Section */
.forest-green-section {
  background: linear-gradient(135deg, var(--forest-green) 0%, var(--forest-green-dark) 100%);
}

/* Deep Teal Section */
.deep-teal-section {
  background: linear-gradient(135deg, var(--deep-teal) 0%, var(--deep-teal-dark) 100%);
}

/* Forest Green CTA Button */
.btn-forest-green {
  background: var(--forest-green);
  color: var(--white) !important;
  border: none;
}

.btn-forest-green:hover {
  background: var(--forest-green-dark);
  color: var(--white) !important;
}

/* Deep Teal CTA Button */
.btn-deep-teal {
  background: var(--deep-teal);
  color: var(--white) !important;
  border: none;
}

.btn-deep-teal:hover {
  background: var(--deep-teal-dark);
  color: var(--white) !important;
}

/* Category Cards with Brand Colors */
.category-card-forest-green {
  border-color: var(--forest-green);
  background: linear-gradient(135deg, var(--forest-green-light) 0%, var(--white) 100%);
}

.category-card-forest-green .category-number {
  background: var(--forest-green);
  color: var(--white);
}

.category-card-forest-green .category-label {
  background: var(--forest-green);
  color: var(--white);
}

.category-card-deep-teal {
  border-color: var(--deep-teal);
  background: linear-gradient(135deg, var(--deep-teal-light) 0%, var(--white) 100%);
}

.category-card-deep-teal .category-number {
  background: var(--deep-teal);
  color: var(--white);
}

.category-card-deep-teal .category-label {
  background: var(--deep-teal);
  color: var(--white);
}

/* Text colors for colored sections */
.forest-green-section,
.forest-green-section h2,
.forest-green-section h3,
.forest-green-section h4,
.forest-green-section p,
.forest-green-section span,
.forest-green-section a,
.forest-green-section li {
  color: var(--white);
}

.forest-green-section .roi-value,
.forest-green-section .roi-label,
.forest-green-section .roi-equals {
  color: var(--white);
}

.forest-green-section .roi-cost {
  color: rgba(255, 255, 255, 0.85);
}

.forest-green-section .roi-note {
  color: rgba(255, 255, 255, 0.75);
}

.deep-teal-section,
.deep-teal-section h2,
.deep-teal-section h3,
.deep-teal-section h4,
.deep-teal-section p,
.deep-teal-section span,
.deep-teal-section a,
.deep-teal-section li {
  color: var(--white);
}

.deep-teal-section .problem-icon,
.deep-teal-section .problem-card h3,
.deep-teal-section .problem-card p {
  color: var(--white);
}

/* ROI card adjustments for forest green section */
.forest-green-section .roi-card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.forest-green-section .roi-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-light);
}

.forest-green-section .roi-value {
  color: var(--white);
}

.forest-green-section .roi-label {
  color: rgba(255, 255, 255, 0.9);
}

.forest-green-section .roi-cost {
  color: rgba(255, 255, 255, 0.8);
}

/* Problem card adjustments for deep teal section */
.deep-teal-section .problem-card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.deep-teal-section .problem-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--blue-light);
}

/* Reset colored sections to white backgrounds */
.forest-green-section,
.deep-teal-section {
  background: var(--white) !important;
}

/* Problem card with color accents */
.problem-card {
  border-top: 3px solid transparent;
  transition: all var(--transition-normal);
}

/* Was primary / blue / forest-green / forest-green-dark / primary-dark /
   blue-dark -- a different, unrelated hue on 4 of the 6 cards. Cycles
   through the orange family's own 5 distinct shades instead (repeating the
   first for the 6th), so the row still varies card-to-card without reading
   as leftover multi-color experiments. */
.problem-card:nth-child(1) { border-top-color: var(--primary); }
.problem-card:nth-child(2) { border-top-color: var(--orange); }
.problem-card:nth-child(3) { border-top-color: var(--primary-dark); }
.problem-card:nth-child(4) { border-top-color: var(--orange-dark); }
.problem-card:nth-child(5) { border-top-color: var(--primary-light); }
.problem-card:nth-child(6) { border-top-color: var(--primary); }

.problem-icon {
  transition: transform var(--transition-normal);
}

/* Big Problem Cards - 2 per row */
.problems-grid-big {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.problem-card-big {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.problem-card-big:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.problem-icon-big {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  transition: all var(--transition-normal);
}

.problem-card-big:hover .problem-icon-big {
  transform: scale(1.1);
}

.problem-content-big {
  flex: 1;
}

.problem-content-big h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.problem-content-big p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin: 0;
}

/* Solutions Row - 2 per row */
.solutions-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.solutions-categories-polished-grid {
  max-width: 1400px;
  margin: 0 auto;
}

.solutions-category-polished-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  color: var(--dark);
  display: block;
}

.solutions-category-polished-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.15);
}

.solutions-category-polished-header {
  margin-bottom: var(--space-md);
  padding-top: var(--space-md);
}

.solutions-category-polished-number {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  margin-right: var(--space-sm);
}

.solutions-category-polished-type {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solutions-category-polished-card h3 {
  color: var(--dark);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.solutions-category-polished-card > p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.solutions-category-polished-features {
  list-style: none;
  margin-bottom: var(--space-lg);
  padding: 0;
}

.solutions-category-polished-features li {
  color: var(--gray);
  padding: var(--space-xs) 0;
  position: relative;
  padding-left: var(--space-md);
}

.solutions-category-polished-features li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
}

.solutions-category-polished-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  transition: all var(--transition-fast);
}

.solutions-category-polished-cta:hover {
  color: var(--primary-dark);
  transform: translateX(4px);
}

/* Responsive - Big Problem Cards */
@media (max-width: 768px) {
  .problems-grid-big {
    grid-template-columns: 1fr;
  }
  
  .problem-card-big {
    padding: var(--space-lg);
    gap: var(--space-md);
  }
  
  .problem-icon-big {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .problem-card-big {
    flex-direction: column;
    text-align: center;
  }
  
  .problem-icon-big {
    margin: 0 auto var(--space-md);
  }
}

/* Responsive - Solutions Row */
@media (max-width: 768px) {
  .solutions-row {
    grid-template-columns: 1fr;
  }
  
  .solutions-category-polished-card {
    padding: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .solutions-category-polished-card {
    padding: var(--space-md);
  }
  
  .solutions-category-polished-features {
    margin-bottom: var(--space-md);
  }
}

/* Solutions preview CTA with two buttons */
.solutions-preview-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Why Choose Us Section */
.why-choose-us {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.why-choose-us-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.why-choose-us h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.why-choose-intro {
  color: var(--gray-dark);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.why-choose-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  text-align: center;
}

.why-choose-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-light);
}

.why-choose-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.why-choose-card:hover .why-choose-icon {
  transform: scale(1.1);
}

.why-choose-card h3 {
  color: var(--dark);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.why-choose-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}

/* Responsive - Why Choose Us */
@media (max-width: 768px) {
  .why-choose-us {
    padding: var(--space-2xl) 6%;
  }
  
  .why-choose-grid {
    grid-template-columns: 1fr;
  }
  
  .why-choose-card {
    padding: var(--space-lg);
  }
}

/* ========================================
   New Pricing Page Styles
   ======================================== */

/* Pricing Hero */
.pricing-hero {
  padding: var(--space-3xl) 8%;
  background: linear-gradient(135deg, var(--forest-green-dark) 0%, var(--forest-green) 100%);
  color: var(--white);
  text-align: center;
}

.pricing-hero-container {
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: var(--space-lg);
}

.pricing-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.pricing-hero-note {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0;
}

.pricing-hero-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

/* Pricing Section Intro */
.pricing-section-intro {
  color: var(--gray-dark);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
  line-height: 1.7;
}

/* Pricing Card Description */
.pricing-card-description {
  color: var(--gray-dark);
  font-size: 1rem;
  margin: 0 0 var(--space-lg);
  line-height: 1.6;
}

/* Pricing Card Note */
.pricing-card-note {
  color: var(--gray-dark);
  font-size: 0.9rem;
  margin: var(--space-md) 0 0;
  font-style: italic;
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-light);
}

/* Pricing Card Savings Callout */
/* The green tint and green text already mark this as the savings note, so the
   3px side rule was saying the same thing a third time. With it gone the
   radius can close on all four corners instead of being squared off on the
   left to sit flush against the tab. */
.pricing-card-savings {
  font-size: 0.82rem;
  color: var(--forest-green-dark);
  background: rgba(34, 85, 51, 0.07);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  border-radius: 4px;
  font-style: italic;
}

/* Billing Addon Section */
.pricing-section.billing-addon {
  background: var(--gray-light);
}

/* Phone System Two-Part Layout */
.phone-two-part {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .phone-two-part {
    grid-template-columns: 1fr;
  }
  .phone-plus {
    text-align: center;
  }
}

.phone-part {
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: var(--space-xl);
}

.phone-part-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

.phone-part-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--forest-green-dark);
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.phone-part-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-dark);
}

.phone-part-desc {
  font-size: 0.88rem;
  color: var(--gray-dark);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}

.phone-plus {
  font-size: 2rem;
  font-weight: 300;
  color: var(--gray);
  padding-top: 3rem;
  align-self: start;
}

.phone-carrier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

.phone-carrier-table thead tr {
  background: var(--forest-green-dark);
  color: white;
}

.phone-carrier-table th {
  padding: var(--space-sm) var(--space-sm);
  text-align: left;
  font-weight: 600;
}

.phone-carrier-table tbody tr {
  border-bottom: 1px solid var(--gray-light);
}

.phone-carrier-table td {
  padding: var(--space-sm) var(--space-sm);
  color: var(--dark);
  vertical-align: top;
}

.phone-carrier-note {
  font-size: 0.82rem;
  color: var(--gray-dark);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* Phone Total Example */
.phone-total-example {
  margin-top: var(--space-xl);
  background: var(--dark);
  border-radius: 10px;
  padding: var(--space-xl);
}

.phone-total-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 600px) {
  .phone-total-inner {
    grid-template-columns: 1fr;
  }
}

.phone-total-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.phone-total-math {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.phone-total-math span {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
}

.phone-total-math strong {
  color: white;
}

.phone-total-sum {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 1.1rem !important;
  color: #6fcf97 !important;
}

.phone-total-sum strong {
  color: #6fcf97 !important;
}

.phone-total-vs {
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: var(--space-xl);
}

.phone-total-bad {
  color: rgba(255,100,100,0.9) !important;
}

.phone-total-bad strong {
  color: rgba(255,100,100,0.9) !important;
}

/* Phone Fax Addon */
.phone-fax-addon {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  /* Tint alone carries the accent; the 3px side rule was redundant with it. */
  background: rgba(34, 85, 51, 0.05);
  border-radius: 8px;
}

.phone-fax-addon h3 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  color: var(--dark);
}

.phone-fax-addon p {
  font-size: 0.9rem;
  color: var(--gray-dark);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* Pricing Section Note */
.pricing-section-note {
  color: var(--gray-dark);
  font-size: 1rem;
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--gray);
}

.addon-description {
  color: var(--gray-dark);
  font-size: 0.95rem;
  margin: var(--space-sm) 0 var(--space-md);
  line-height: 1.6;
}

/* Full RCM Section */
.full-rcm-section {
  background: linear-gradient(135deg, rgba(34, 85, 51, 0.04) 0%, transparent 60%);
}

.rcm-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  margin: var(--space-xl) 0;
  padding: var(--space-xl);
  background: white;
  border-radius: 12px;
  border: 1px solid var(--gray-light);
}

@media (max-width: 700px) {
  .rcm-hero { grid-template-columns: 1fr; }
}

.rcm-hero-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.rcm-hero-sub {
  font-size: 0.9rem;
  color: var(--gray-dark);
  margin: 0;
  line-height: 1.6;
}

.rcm-hero-price {
  text-align: center;
  min-width: 180px;
  padding: var(--space-lg);
  background: rgba(34, 85, 51, 0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.rcm-hero-from {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-dark);
}

.rcm-hero-amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--forest-green-dark);
  line-height: 1;
}

.rcm-hero-amount span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-dark);
}

.rcm-hero-note {
  font-size: 0.78rem;
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

/* RCM Service Cards */
.rcm-service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (max-width: 800px) {
  .rcm-service-cards { grid-template-columns: 1fr; }
}

/* The accent was a 3px border-top against a 1px border on the other three
   sides. At the top corners the two weights miter into each other and the
   radius renders a visible notch. Same accent, drawn as a bar clipped by the
   card's own radius, so the border stays a uniform 1px. */
.rcm-service-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  padding: var(--space-lg);
}

.rcm-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--forest-green);
}

.rcm-service-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-sm);
}

.rcm-service-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 var(--space-md);
}

.rcm-service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rcm-service-card ul li {
  font-size: 0.88rem;
  color: var(--gray-dark);
  padding: var(--space-xs) 0;
  padding-left: 1.2rem;
  position: relative;
  border-bottom: 1px solid var(--gray-light);
  line-height: 1.4;
}

.rcm-service-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--forest-green);
  font-weight: 700;
  font-size: 0.8rem;
}

/* RCM Band Expandable */
.rcm-band-details {
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  overflow: hidden;
}

.rcm-band-summary {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  user-select: none;
}

.rcm-band-summary::-webkit-details-marker { display: none; }

.rcm-band-summary::after {
  content: "▸ View pricing table";
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rcm-band-details[open] .rcm-band-summary::after {
  content: "▾ Hide";
}

.rcm-band-details[open] .rcm-band-summary {
  border-bottom: 1px solid var(--gray-light);
}

/* RCM Band Section */
.rcm-band-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
  background: white;
  padding: var(--space-xl);
}

@media (max-width: 700px) {
  .rcm-band-section { grid-template-columns: 1fr; }
}

.rcm-band-left h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 var(--space-md);
}

.rcm-band-left p {
  font-size: 0.9rem;
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

/* Tint carries the accent; side rule removed and the radius closed up, as on
   .pricing-card-savings above. */
.rcm-band-note {
  font-size: 0.82rem;
  color: var(--gray-dark);
  background: rgba(34, 85, 51, 0.06);
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  line-height: 1.5;
  margin: 0;
}

.rcm-band-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.rcm-band-table thead tr {
  background: var(--forest-green);
  color: white;
}

.rcm-band-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
}

.rcm-band-table tbody tr {
  border-bottom: 1px solid var(--gray-light);
  transition: background 0.15s;
}

.rcm-band-table tbody tr:hover {
  background: rgba(34, 85, 51, 0.05);
}

.rcm-band-table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--dark);
}

.rcm-band-table td:last-child {
  font-weight: 600;
  color: var(--forest-green-dark);
}

/* Practice Operations Partner Section */
.ops-partner-section {
  background: linear-gradient(135deg, rgba(253, 126, 20, 0.04) 0%, transparent 60%);
}

.ops-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

@media (max-width: 800px) {
  .ops-tiles { grid-template-columns: 1fr; }
}

/* Same fix as .rcm-service-card above: 4px accent border-top against 1px on
   the other sides mitered badly into the 10px radius. */
.ops-tile {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: var(--space-xl);
}

.ops-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
}

.ops-tile-icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-md);
}

.ops-tile h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 var(--space-sm);
}

.ops-tile > p {
  font-size: 0.88rem;
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-light);
}

.ops-tile ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ops-tile ul li {
  font-size: 0.85rem;
  color: var(--dark);
  padding: var(--space-xs) 0;
  padding-left: 1.2rem;
  position: relative;
  border-bottom: 1px solid var(--gray-light);
  line-height: 1.4;
}

.ops-tile ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.ops-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: var(--space-xl);
}

@media (max-width: 700px) {
  .ops-bottom { grid-template-columns: 1fr; }
}

.ops-pricing-block-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-dark);
  margin-bottom: var(--space-xs);
}

.ops-pricing-block-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}

.ops-pricing-block-note {
  font-size: 0.85rem;
  color: var(--gray-dark);
  line-height: 1.5;
}

.ops-availability-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.ops-avail-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 20px;
}

.ops-availability-block > p {
  font-size: 0.88rem;
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.billing-note {
  color: var(--gray-dark);
  font-size: 1rem;
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--gray);
}

/* Pricing CTA Section */
.pricing-cta {
  padding: var(--space-3xl) 8%;
  background: var(--forest-green-dark);
  color: var(--white);
  text-align: center;
}

.pricing-cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-cta h2 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--space-lg);
}

.pricing-cta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0 0 var(--space-xl);
  line-height: 1.7;
}

/* Large CTA Button */
.btn-cta-large {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-primary);
}

.btn-cta-large:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-lg);
}

/* Pricing Page Enhancements */
.pricing-grid.three-column {
  grid-template-columns: repeat(3, 1fr);
}

.pricing-section.billing-suite,
.pricing-section.it-services {
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.03) 0%, transparent 50%);
}

.pricing-section.billing-addons,
.pricing-section.records-section {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.03) 0%, transparent 50%);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.addon-card {
  display: flex;
  flex-direction: column;
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.addon-card > .btn-cta {
  margin-top: auto;
}

.addon-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.addon-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.05) 0%, transparent 50%);
}

.addon-card-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--primary);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.addon-card h4 {
  margin: 0 0 var(--space-md);
  color: var(--dark);
}

.addon-card h4 a {
  color: var(--dark);
  text-decoration: none;
}

.addon-card h4 a:hover {
  color: var(--primary);
}

.addon-description {
  color: var(--gray-dark);
  margin: 0 0 var(--space-lg);
  line-height: 1.7;
}

.addon-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 var(--space-lg);
}

.addon-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-dark);
}

.addon-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.addon-features li {
  padding: var(--space-xs) 0;
  color: var(--gray-dark);
  position: relative;
  padding-left: var(--space-lg);
}

.addon-features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: bold;
}

.addon-included-note {
  font-size: 0.9rem;
  color: var(--green);
  font-style: italic;
  margin: var(--space-md) 0 var(--space-sm);
  text-align: center;
}

.addon-price-note {
  font-size: 0.9rem;
  color: var(--gray-dark);
  font-style: italic;
  margin: 0 0 var(--space-md);
  text-align: center;
}

.addon-card-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

.pricing-card-cta {
  margin-top: auto;
  padding-top: var(--space-lg);
  text-align: center;
}

.pricing-card-cta .btn-cta {
  width: 100%;
  max-width: 200px;
}

/* KatFax and Individual SaaS Tools cards end with a bare <a class="btn-cta">
   Learn More</a>, not wrapped in .pricing-card-cta, so it never picked up
   the margin-top: auto that pins the CTA to a shared baseline -- with
   feature lists of different lengths (Time Keeping's 5 items vs. everyone
   else's 4), the buttons landed at different heights per card. */
.pricing-card > .btn-cta {
  margin-top: auto;
  align-self: center;
}

.pricing-card-note {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0 0 var(--space-md);
  font-style: italic;
}

.suite-note,
.billing-note,
.records-note {
  text-align: center;
  font-size: 1.1rem;
  color: var(--gray-dark);
  margin-top: var(--space-xl);
  font-weight: 500;
}

.suite-note strong,
.billing-note strong,
.records-note strong {
  color: var(--dark);
}

/* Pricing Hero Updates */
.pricing-hero {
  background: linear-gradient(135deg, rgba(244, 121, 32, 0.05) 0%, rgba(78, 205, 196, 0.03) 100%);
  padding: var(--space-3xl) 8%;
  text-align: center;
}

.pricing-hero-container {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--dark);
  margin-bottom: var(--space-lg);
}

.pricing-hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: var(--gray-dark);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.pricing-hero-note {
  color: var(--gray);
  font-size: 1rem;
  font-style: italic;
}

/* Section Intro Updates */
.pricing-section-intro {
  text-align: center;
  color: var(--gray-dark);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

/* Responsive - New Pricing Styles */
@media (max-width: 768px) {
  .pricing-hero {
    padding: var(--space-2xl) 6%;
  }
  
  .pricing-hero h1 {
    font-size: 2rem;
  }
  
  .pricing-hero-subtitle {
    font-size: 1rem;
  }
  
  .pricing-section {
    padding: var(--space-2xl) 6%;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-card {
    padding: var(--space-lg);
  }
  
  .addon-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-value-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-cta {
    padding: var(--space-2xl) 6%;
  }
}

/* ========================================
   SaaS Solution Page Styles
   ======================================== */

/* Problem & Solution Section */
.problem-solution-section {
  padding: var(--space-3xl) 8%;
  background: var(--white);
}

.problem-solution-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.problem-column,
.solution-column {
  background: var(--light);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  border: 2px solid var(--gray-light);
}

.problem-column h2,
.solution-column h2 {
  color: var(--dark);
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--primary);
}

/* Problem & Solution Cards Grid */
.problem-cards-grid,
.solution-cards-grid {
  display: grid;
  gap: var(--space-md);
}

.problem-card,
/* NOTE: this is the second .solution-card block in this file (the first is up
   near .problem-card). Both target the same elements in
   layouts/_default/solution-page.html, and being later this one won -- which
   meant the green border-left in the first block never rendered and solution
   cards were drawn orange, identical to nothing else in the pair. The side
   border is dropped here so the semantic red/green ::after defined alongside
   .problem-card is what actually shows. */
.solution-card {
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-md);
  color: var(--gray-dark);
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.problem-card:hover,
.solution-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.problem-card {
  border-left-color: var(--red);
}

.solution-card {
  border-left-color: var(--green);
}

@media (max-width: 768px) {
  .problem-solution-container {
    grid-template-columns: 1fr;
  }
}

/* Benefits Section */
.benefits-section {
  padding: var(--space-3xl) 8%;
  background: var(--gray-light);
}

.benefits-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.benefits-section h2 {
  color: var(--dark);
  margin-bottom: var(--space-2xl);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.benefit-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  text-align: center;
  transition: all var(--transition-normal);
}

.benefit-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-4px);
}

.benefit-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.benefit-card h3 {
  color: var(--dark);
  margin-bottom: var(--space-sm);
}

.benefit-card p {
  color: var(--gray-dark);
  margin: 0;
  line-height: 1.6;
}

/* Secondary Button */
.btn-secondary-large {
  display: inline-block;
  background: var(--white);
  color: var(--primary);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--primary);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-left: var(--space-md);
}

.btn-secondary-large:hover {
  background: var(--primary);
  color: var(--white);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* Solution Details */
.solution-details {
  padding: var(--space-3xl) 8%;
  background: var(--white);
  border-top: 1px solid var(--gray-light);
}

.solution-details-content {
  max-width: 1200px;
  margin: 0 auto;
}

.solution-details-content h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 3px solid var(--primary);
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Feature Cards for Included Items - 2x2 Grid */
.solution-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .solution-features-grid {
    grid-template-columns: 1fr;
  }
}

.solution-feature-card {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

/* Feature Cards for Included Items - New 2x2 Grid (Professional) */
.solution-features-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .solution-features-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

.solution-feature-card-2x2 {
  background: var(--white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-light);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.solution-feature-card-2x2:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-4px);
}

.solution-feature-card-2x2 .feature-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  color: var(--primary);
  display: block;
}

.solution-feature-card-2x2 h3 {
  color: var(--primary);
  font-size: 1.35rem;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--primary-light);
  font-weight: 700;
  flex-grow: 0;
}

.solution-feature-card-2x2 p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
  font-size: 1.05rem;
  flex-grow: 1;
}

/* Feature Items as Badges */
.feature-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
}

.feature-item-badge {
  padding: var(--space-xs) var(--space-md);
  background: var(--primary-light);
  color: var(--dark);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.solution-feature-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-4px);
}

.feature-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  color: var(--primary);
  display: block;
}

.solution-feature-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-4px);
}

.solution-feature-card h3 {
  color: var(--primary);
  font-size: 1.35rem;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--primary-light);
  font-weight: 700;
}

.solution-feature-card p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin: 0;
  font-size: 1.05rem;
}

.solution-feature-card ul {
  color: var(--gray-dark);
  padding-left: 0;
  margin: var(--space-sm) 0 0;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.solution-feature-card li {
  margin-bottom: 0;
  position: relative;
  padding: var(--space-xs) var(--space-md);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.solution-feature-card li:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--dark);
}

.solution-feature-card li:before {
  display: none;
}

/* Alternative: Regular content styling (for pages without feature grid) */
.solution-details-content h3 {
  color: var(--dark);
  font-size: 1.3rem;
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--gray-light);
}

.solution-details-content p {
  color: var(--gray-dark);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.solution-details-content ul {
  color: var(--gray-dark);
  padding-left: var(--space-xl);
  margin: var(--space-md) 0 var(--space-lg);
  line-height: 1.7;
}

.solution-details-content li {
  margin-bottom: var(--space-sm);
}

.solution-details-content code {
  background: var(--gray-light);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--dark);
}

/* Responsive - SaaS Solution Page */
@media (max-width: 768px) {
  .problem-solution-container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-secondary-large {
    margin-left: 0;
    margin-top: var(--space-md);
  }
}

/* Responsive - Pricing Page */
@media (max-width: 768px) {
  .pricing-grid.three-column {
    grid-template-columns: 1fr;
  }
  
  .addon-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-card-header {
    text-align: center;
  }
  
  .pricing-card-cta,
  .addon-card-cta {
    text-align: center;
  }
  
  .pricing-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .addon-card-badge {
    position: relative;
    top: 0;
    right: 0;
    margin-bottom: var(--space-md);
  }
}

/* Case Study Page */
.case-study-content {
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.case-study-container {
  line-height: 1.8;
  font-size: 1.05rem;
  color: #333;
}
.case-study-container h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: #1a1a2e;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 0.5rem;
}
.case-study-container h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #2d3748;
}
.case-study-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.case-study-container th,
.case-study-container td {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.case-study-container th {
  background: #f7fafc;
  font-weight: 600;
}
.case-study-container tr:nth-child(even) {
  background: #f9fafb;
}
.case-study-container blockquote {
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(var(--primary-rgb), 0.06);
  border-radius: 0 8px 8px 0;
}
.case-study-container strong {
  color: #1a1a2e;
}
.case-study-container hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 2.5rem 0;
}
.case-study-container .check-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.case-study-container .check-list li {
  position: relative;
  padding-left: 1.75rem;
}
.case-study-container .check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* Blog List Page -- was rendering via the single-post template with no
   list markup at all (Hugo matched _default/blog.html by content type,
   not layout intent), so /blog/ showed only the section's own empty
   body and a CTA button -- no links to any post. layouts/blog/list.html
   fixes the template; this styles it. */
.blog-list-section {
  padding: var(--space-3xl) 8%;
  max-width: 1400px;
  margin: 0 auto;
}
.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}
.blog-list-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-decoration: none;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}
.blog-list-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--primary-light);
}
.blog-list-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.blog-list-card h2 {
  font-size: 1.25rem;
  color: var(--dark);
  margin-bottom: var(--space-sm);
  line-height: 1.35;
}
.blog-list-card p {
  color: var(--gray-dark);
  line-height: 1.6;
  font-size: 0.95rem;
  flex: 1;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-list-card-link {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Blog Post Page -- also had zero dedicated CSS; the article rendered in
   unstyled default browser typography. */
/* Blog post hero reuses the sitewide .hero-professional component (see
   /services/, /case-studies/) instead of the bare, un-anchored narrow
   column this used to be -- that bare version had no full-width visual
   context, so on a wide desktop viewport the title and body just floated
   in a sea of empty page with nothing else scaling to fill it. */
.blog-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  color: var(--gray);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: var(--space-md);
}
.blog-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 8% var(--space-3xl);
  line-height: 1.8;
  font-size: 1.05rem;
  color: var(--gray-dark);
}
.blog-content h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--dark);
  border-bottom: 2px solid var(--gray-light);
  padding-bottom: 0.5rem;
}
.blog-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--dark);
}
.blog-content p { margin-bottom: 1.25rem; }
.blog-content ul, .blog-content ol { margin: 0 0 1.25rem 1.5rem; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content a { color: var(--primary); font-weight: 600; }
.blog-content strong { color: var(--dark); }
.blog-content blockquote {
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(182, 82, 9, 0.04);
  border-radius: 0 8px 8px 0;
}
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.blog-content th, .blog-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-light);
  text-align: left;
}
.blog-content th { background: var(--light); font-weight: 600; }
.blog-cta {
  text-align: center;
  padding: var(--space-3xl) 8%;
  background: rgba(182, 82, 9, 0.04);
}
.blog-cta h2 { color: var(--dark); margin-bottom: var(--space-md); }
.blog-cta p { color: var(--gray-dark); max-width: 600px; margin: 0 auto var(--space-lg); }

/* Pricing Badge */
.pricing-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--primary);
  color: white;
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0 8px 0 8px;
}
.pricing-card.featured {
  position: relative;
}

/* Records Request Page */
.records-page-wide {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.records-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .records-two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.records-faq-col h2,
.records-form-col h2 {
  margin-bottom: 1.5rem;
  color: #1a1a2e;
}

/* Contact Page -- same two-column pattern as /records/ (info/context left,
   form right) instead of the old stacked hero -> options -> onboarding ->
   full-width form -> disconnected phone/email section. */
.contact-page-wide {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .contact-two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.contact-info-col h2,
.contact-form-col h2 {
  margin-bottom: 1.5rem;
  color: #1a1a2e;
}
.contact-info-col h2 + .onboarding-steps {
  margin-bottom: 2.5rem;
}
/* .hours/.service-area default to --gray-on-dark for dark-background
   contexts (e.g. the footer); this column has a plain light background,
   so they need the readable-on-light step instead, left-aligned rather
   than the centered treatment those classes assume elsewhere. */
.contact-info-col .hours,
.contact-info-col .service-area {
  color: var(--gray-dark);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.contact-info-col p {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.contact-info-col a {
  color: var(--primary);
  font-weight: 600;
}
.contact-info-col a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}
.faq-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item h3 {
  color: #2d3748;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}
.faq-item p, .faq-item ul {
  color: #4a5568;
  line-height: 1.7;
}
.faq-item ul {
  padding-left: 1.5rem;
}
.faq-item li {
  margin-bottom: 0.3rem;
}
.records-form-intro {
  color: #4a5568;
  margin-bottom: 1.5rem;
}

/* Homepage: Proven Results */
.home-proven-results {
  padding: 4rem 8%;
  background: rgba(182, 82, 9, 0.04);
  text-align: center;
}
.home-proven-results-container h2 { color: #1a1a2e; margin-bottom: 0.5rem; }
.home-proven-results-intro { color: #4a5568; margin-bottom: 2rem; }
.home-proven-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .home-proven-results-grid { grid-template-columns: repeat(2, 1fr); }
}
.home-proven-stat { padding: 1.5rem; }
.home-proven-stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: #276749;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.home-proven-stat-label {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.4;
}

/* Homepage: How It Works */
.home-how-it-works {
  padding: 4rem 8%;
  background: #fff;
  text-align: center;
}
.home-how-it-works-container h2 { color: #1a1a2e; margin-bottom: 0.5rem; }
.home-how-it-works-intro { color: #4a5568; margin-bottom: 2.5rem; }
.home-how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .home-how-it-works-grid { grid-template-columns: repeat(2, 1fr); }
}
.home-how-step { text-align: center; }
.home-how-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a1a2e;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.home-how-step h3 {
  margin-bottom: 0.5rem;
  color: #1a1a2e;
}
.home-how-step p {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.5;
}

/* Phone-width homepage fixes. Two problems the 768px breakpoint above
   didn't touch: (1) .home-proven-results-grid and .home-how-it-works-grid
   stayed at 2 columns all the way down to phone width, unlike every other
   homepage grid, which auto-fits to 1; (2) every home-* section kept full
   desktop padding (var(--space-3xl)/4rem) at every width, so the page was
   exactly as vertically long per-section on a phone as on desktop. */
@media (max-width: 480px) {
  .home-proven-results-grid,
  .home-how-it-works-grid {
    grid-template-columns: 1fr;
  }
  .home-why-us,
  .home-whats-costing,
  .home-solutions-preview,
  .home-proven-results,
  .home-how-it-works,
  .roi-calc-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* ========================================
   FAQ Page
   ======================================== */
.faq-section {
  padding: var(--space-3xl) 8%;
  max-width: 1300px;
  margin: 0 auto;
}
.faq-section h2 {
  text-align: center;
  color: var(--dark);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: var(--space-xl);
}
/* Was a single 900px-wide column -- on a page whose other sections run
   1400-1600px, an 8-item list at that width read as a thin, undersized
   afterthought. Two columns fill the width properly; each item's expand/
   collapse only affects its own column's row height, not the other
   column's layout. */
.faq-accordion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2xl);
}
@media (max-width: 700px) {
  .faq-accordion {
    grid-template-columns: 1fr;
  }
}
.faq-accordion-item {
  border-bottom: 1px solid var(--gray-light);
}
.faq-accordion-item:last-child {
  border-bottom: none;
}
.faq-accordion-item summary {
  padding: var(--space-md) 0;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--space-xl);
}
.faq-accordion-item summary::-webkit-details-marker {
  display: none;
}
.faq-accordion-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: var(--space-md);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
.faq-accordion-item[open] summary::after {
  content: '\2212';
}
.faq-accordion-item p {
  color: var(--gray-dark);
  line-height: 1.7;
  padding-bottom: var(--space-md);
}
.faq-container .faq-item {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--gray-light);
}
.faq-container .faq-item:last-child { border-bottom: none; }
.faq-container .faq-item h3 {
  color: var(--dark);
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}
.faq-container .faq-item p {
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ========================================
   Pricing Comparison Table
   ======================================== */
.pricing-comparison {
  padding: var(--space-3xl) 8%;
  background: var(--light);
}
.pricing-comparison-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.pricing-comparison h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-xl);
  text-align: left;
}
.comparison-table th, .comparison-table td {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--gray-light);
}
.comparison-table th {
  background: var(--dark);
  color: var(--white);
  font-weight: 600;
}
.comparison-table td { color: var(--gray-dark); }
.comparison-table .comparison-highlight {
  background: rgba(244, 121, 32, 0.08);
}
.comparison-table .comparison-highlight td {
  color: var(--dark);
}
@media (max-width: 768px) {
  .comparison-table { font-size: 0.85rem; }
  .comparison-table th, .comparison-table td { padding: var(--space-sm); }
}

/* ========================================
   ROI Calculator
   ======================================== */
.roi-calc-section {
  padding: var(--space-3xl) 8%;
  background: var(--light);
  text-align: center;
}
.roi-calc-container {
  max-width: 700px;
  margin: 0 auto;
}
.roi-calc-container h2 {
  color: var(--dark);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: var(--space-md);
}
.roi-calc-intro {
  color: var(--gray-dark);
  margin-bottom: var(--space-xl);
}
.roi-calc-inputs {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.roi-calc-inputs .form-group { text-align: left; }
.roi-calc-submit {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.roi-calc-inputs label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--dark);
}
.roi-input {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  font-size: 1rem;
  width: 180px;
}
.roi-calc-result {
  background: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-primary);
}
.roi-result-value {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}
.roi-result-label {
  color: var(--gray-dark);
  margin-bottom: var(--space-lg);
}
.roi-calc-alt {
  margin-top: var(--space-lg);
  color: var(--gray-dark);
  font-size: 0.95rem;
}
.roi-calc-alt a {
  color: var(--primary);
  font-weight: 600;
}

/* ========================================
   Onboarding Section (Contact Page)
   ======================================== */
.onboarding-section {
  padding: var(--space-3xl) 8%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.onboarding-section h2 {
  color: var(--dark);
  margin-bottom: var(--space-xl);
}
.onboarding-steps {
  text-align: left;
  display: grid;
  gap: var(--space-md);
}
/* Side rule removed; the tinted background and radius already group the step.
   Steps are numbered in the markup, so the accent was not carrying sequence. */
.onboard-step {
  padding: var(--space-md) var(--space-lg);
  background: var(--light);
  border-radius: var(--radius-md);
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Reduced motion

   This stylesheet had no prefers-reduced-motion block at all, while animating
   transforms, opacity and colour throughout. Users who ask their OS to reduce
   motion were getting every transition and animation at full strength.

   Deliberately NOT a blanket `animation: none !important` kill: that also
   destroys state changes people rely on (a nav underline appearing, a card
   registering hover), which leaves the interface feeling broken rather than
   calmer. Durations collapse to near-zero so the end state still applies
   instantly, and only genuinely decorative looping motion is stopped outright.
   --------------------------------------------------------------------------- */
@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;
  }
}

/* ==========================================================================
   Local / Brevard County page
   Scaffolding for /brevard-county/. Reuses the existing hero and final-cta
   components; only the long-form prose treatment is defined here.

   The town-card grid, per-town cross-links and drive-time note that used to
   live in this block are gone along with the seven town pages they belonged
   to -- see layouts/brevard-county/list.html for why those were removed.
   ========================================================================== */

/* Long-form prose. Constrained to a readable measure and left-aligned -- the
   surrounding page components are centered, which works for short blurbs and
   fails badly for body text. */
.local-context { max-width: 780px; text-align: left; }
.local-context h2 { text-align: left; margin: var(--space-xl) 0 var(--space-md); }
.local-context h2:first-child { margin-top: 0; }
.local-context p { margin-bottom: var(--space-md); line-height: 1.75; color: var(--gray-dark); }
.local-context ul { margin: 0 0 var(--space-md) var(--space-md); line-height: 1.75; color: var(--gray-dark); }
.local-context li { margin-bottom: var(--space-xs); }
.local-context strong { color: var(--dark); }