/* SellSpark - Organic & Handcrafted Theme */

/* Color Variables following 60% Neutral, 30% Complementary, 10% Brand rule */
:root {
  /* Brand Colors (10%) */
  --spark-orange: #FF6B35;
  --trustworthy-teal: #00A6A6;
  --growth-green: #00C896;
  --innovation-coral: #FF7F7F;
  --platform-gold: #FFC93C;


  /* Neutral Colors (60%) - Warm, organic tones */
  --cream-white: #FDF9F0;
  --warm-white: #FAF7F2;
  --soft-beige: #F5F2EC;
  --light-taupe: #EDE8E0;
  --medium-taupe: #D4CFC5;
  --mediumdark-taupe: #beb6a7;
  --warm-gray: #9B968C;
  --dark-taupe: #6B6559;
  --charcoal: #3A352C;

  /* Complementary Colors (30%) - Earth tones */
  --sage-green: #A8B5A0;
  --dusty-rose: #D4A5A0;
  --warm-terracotta: #C8896B;
  --soft-lavender: #B8A8C8;
  --muted-blue: #8BAAC0;
  --wheat-gold: #D4C49A;

  /* Typography */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing & Sizing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ==========================================================================
     TYPOGRAPHY SCALE - Responsive Font Sizes
     Desktop values (default). Overridden at 768px and 480px breakpoints.
     ========================================================================== */

  /* Section Titles - Large headings for main sections */
  --font-size-section-title: 2.5rem;
  --font-size-section-title-secondary: 2rem;

  /* Component Titles - Headings within cards/components */
  --font-size-component-title: 1.5rem;
  --font-size-component-title-sm: 1.25rem;

  /* CTA Titles - Call-to-action box headings */
  --font-size-cta-title: 1.8rem;

  /* Body Text - Paragraphs and descriptions */
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.95rem;
  --font-size-body-xs: 0.9rem;

  /* Small Text - Captions, labels, hints */
  --font-size-caption: 0.875rem;
  --font-size-caption-sm: 0.8rem;
  --font-size-label: 0.75rem;

  /* List Items - Bullet points and list content */
  --font-size-list-item: 0.95rem;
  --font-size-list-item-sm: 0.9rem;

  /* Special Elements */
  --font-size-badge: 0.75rem;
  --font-size-button: 1rem;
  --font-size-input: 1rem;

  /* Section Spacing - Padding for major sections */
  --section-padding-y: var(--space-3xl);
  --section-padding-x: var(--space-lg);

  /* Component Spacing - Internal padding for cards/components */
  --component-padding: var(--space-xl);
  --component-padding-sm: var(--space-lg);
  --component-gap: var(--space-xl);
  --component-gap-sm: var(--space-lg);

  /* Border Radius - Heavily rounded for organic feel */
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* Shadows - Soft, organic */
  --shadow-sm: 0 2px 8px rgba(58, 53, 44, 0.08);
  --shadow-md: 0 4px 16px rgba(58, 53, 44, 0.12);
  --shadow-lg: 0 8px 32px rgba(58, 53, 44, 0.16);
  --shadow-organic: 0 4px 20px rgba(58, 53, 44, 0.1), 0 1px 4px rgba(58, 53, 44, 0.08);

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 400ms ease-out;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Focus management */
:focus {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

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

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
  background-color: var(--cream-white);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(168, 181, 160, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(212, 165, 160, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255, 195, 60, 0.02) 0%, transparent 50%);
  /* Subtle paper-like texture - remove fixed attachment for mobile performance */
  background-attachment: scroll;
  /* Performance improvements */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Only use fixed background on larger screens */
@media (min-width: 1024px) {
  body {
    background-attachment: fixed;
  }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.3;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

h1 { font-size: 3rem; font-weight: 700; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: var(--space-sm);
  color: var(--dark-taupe);
}

/* Global Focus Styles - Keyboard navigation only */
button:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* Buttons - Organic styling */
.btn-primary {
  background: linear-gradient(135deg, var(--spark-orange) 0%, #FF8A5C 100%);
  /* Fallback for browsers that don't support gradients */
  background: var(--spark-orange);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  /* Accessibility improvements */
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 107, 53, 0.3), var(--shadow-md);
}

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

/* Focus visible for buttons (keyboard only) */
.btn-primary:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.btn-primary:focus:not(:focus-visible) {
  outline: none;
}

.btn-primary.large {
  padding: var(--space-md) var(--space-xl);
  font-size: 1.125rem;
}

.btn-secondary {
  background: var(--warm-white);
  color: var(--charcoal);
  border: 2px solid var(--light-taupe);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--soft-beige);
  border-color: var(--medium-taupe);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary.large {
  padding: var(--space-md) var(--space-xl);
  font-size: 1.125rem;
}

.btn-spark {
  color: var(--platform-gold);
  font-size: 1.2em;
  animation: sparkle 2s ease-in-out infinite;
}

/* Ensure minimum touch targets for buttons only */
button,
.btn-primary,
.btn-secondary {
  min-width: 44px;
  min-height: 44px;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; }
}

/* Safer animation with fallback */
@supports not (transform: scale(1.1)) {
  @keyframes sparkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
}

/* Cross-browser compatibility */
@-webkit-keyframes sparkle {
  0%, 100% { -webkit-transform: scale(1) rotate(0deg); opacity: 1; }
  50% { -webkit-transform: scale(1.1) rotate(180deg); opacity: 0.8; }
}

@-moz-keyframes sparkle {
  0%, 100% { -moz-transform: scale(1) rotate(0deg); opacity: 1; }
  50% { -moz-transform: scale(1.1) rotate(180deg); opacity: 0.8; }
}

/* Navigation */
.nav {
  background: rgba(253, 249, 240, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(237, 232, 224, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all var(--transition-normal);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) 0;
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--charcoal);
  text-decoration: none;
  transition: color var(--transition-fast);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-logo:hover {
  color: var(--spark-orange);
}

/* Focus visible for logo (keyboard only) */
.nav-logo:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.nav-logo:focus:not(:focus-visible) {
  outline: none;
}

.logo-image {
  height: 32px;
  width: auto;
  display: block;
}

.logo-spark {
  color: var(--spark-orange);
  font-size: 1.8rem;
  animation: sparkle 3s ease-in-out infinite;
}

/* AI superscript branding - subtle elevated "AI" text */
.ai-super {
  font-size: 0.6em;
  vertical-align: super;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.02em;
  margin-left: 0.1em;
}

/* Email protection - anti-bot obfuscation */
.eml-protected {
  display: inline;
}

.eml-placeholder {
  color: var(--spark-orange);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.eml-placeholder:hover {
  opacity: 0.8;
}

.eml-placeholder .eml-icon {
  margin-right: 0.3em;
}

.eml-revealed {
  color: var(--spark-orange);
  text-decoration: none;
}

.eml-revealed:hover {
  text-decoration: underline;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Centered via justify-content: center on .nav-container */
}

/* Positioned relative to .nav-container since .nav-links has no position set */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-link {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--dark-taupe);
  text-decoration: none;
  transition: color var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--charcoal);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--spark-orange);
  border-radius: var(--radius-sm);
  transition: width var(--transition-normal);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-cta {
  background: var(--spark-orange);
  color: #fff;
  border: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
  /* background: var(--platform-gold); */
  /* color: #332500; */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.nav-signin {
  background: transparent;
  color: var(--dark-taupe);
  border: 2px solid var(--light-taupe);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.nav-signin:hover {
  background: var(--soft-beige);
  border-color: var(--dark-taupe);
  color: var(--dark-taupe);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Logout link - hidden by default, shown when authenticated */
.nav-logout-link {
  display: none;
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--dark-taupe);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.nav-logout-link.visible {
  display: inline;
}

.nav-logout-link:hover {
  color: var(--spark-orange);
}

/* Focus visible for navigation elements (keyboard only) */
.nav-link:focus-visible,
.nav-signin:focus-visible,
.nav-logout-link:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.nav-link:focus:not(:focus-visible),
.nav-signin:focus:not(:focus-visible),
.nav-logout-link:focus:not(:focus-visible),
.nav-cta:focus:not(:focus-visible) {
  outline: none;
}

.nav-mobile {
  display: none;
}

/* Mobile navigation functionality */
.nav-links {
  z-index: 1000;
}

/* Nav container margin - up to 1220px (all devices) */
@media (max-width: 1220px) {
  .nav-container {
    margin: 0 22px 0;
  }
}

/* Hamburger menu styles - up to 1050px (all devices) */
@media (max-width: 1050px) {
  /* Push hamburger to the right */
  .nav-container {
    justify-content: end;
  }

  /* Grey overlay behind mobile nav menu */
  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
  }

  .nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Prevent body scroll when menu is open */
  body.nav-menu-open {
    overflow: hidden;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background: var(--cream-white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 70px var(--space-md) var(--space-md);
    gap: 0;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--light-taupe);
    transition: right var(--transition-normal);
    z-index: 999;
    overflow-y: auto;
    transform: none;
    left: auto;
  }

  /* Auth buttons flow naturally inside hamburger menu */
  .nav-buttons {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-mobile {
    display: block;
  }

  .nav-toggle {
    position: relative;
    z-index: 1001;
  }

  .nav-link {
    width: 100%;
    padding: var(--space-md);
    border-bottom: 1px solid var(--light-taupe);
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-link:last-of-type {
    border-bottom: none;
  }

  .nav-signin {
    margin: 0;
    padding: var(--space-md);
    width: 100%;
    text-align: center;
  }

  .nav-cta {
    margin: 0;
    padding: var(--space-md);
    width: 100%;
    text-align: center;
  }

  /* Only show logout link when authenticated (.visible class added by JS) */
  .nav-logout-link.visible {
    display: block;
    margin: 0;
    padding: var(--space-md);
    width: 100%;
    text-align: center;
  }
}

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: end;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.nav-toggle span {
  width: 24px;
  height: 3px;
  background: var(--charcoal);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

/* Hero Section */
.hero {
  padding: calc(80px + var(--space-3xl)) var(--space-lg) var(--space-3xl);
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 195, 60, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(168, 181, 160, 0.06) 0%, transparent 50%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Initially hide hero elements for consistent loading animation */
.hero-title,
.hero-description,
.hero-cta,
.hero-visual {
  opacity: 0;
  transform: translateY(30px);
}

/* ==========================================================================
   HERO SECTION - Mobile-First Approach
   Base styles are mobile/stacked layout. Desktop layout is applied via
   explicit media query for non-touch devices only.
   ========================================================================== */
.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column */
  gap: var(--space-xl);
  align-items: center;
  text-align: center;
}

/* Mobile-first: hero-content children become direct grid items for reordering */
.hero-content {
  display: contents;
}

.hero-title {
  order: 1;
}

.hero-visual {
  order: 2;
}

.hero-description {
  order: 3;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  order: 4;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--charcoal);
}

.title-highlight {
  background: linear-gradient(135deg, var(--spark-orange) 0%, var(--platform-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--dark-taupe);
  margin-bottom: var(--space-xl);
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.proof-item {
  font-size: 0.875rem;
  color: var(--dark-taupe);
}

.proof-item strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--warm-gray);
  margin-bottom: 2px;
}

/* Hero Visual */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-showcase {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-direction: column; /* Mobile-first: stacked vertically */
  width: 100%;
}

/* .showcase-before, .showcase-after {
  flex: 1;
} */

.image-placeholder {
  background: var(--warm-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
}

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

.image-placeholder.active {
  border: 2px solid var(--growth-green);
}

.before .image-content {
  height: 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
  border-radius: var(--radius-md);
  position: relative;
}

.product-item {
  width: 100%;
  height: 100%;
  background: var(--warm-terracotta);
  border-radius: var(--radius-md);
  position: relative;
}

.product-item.polished {
  background: linear-gradient(135deg, var(--dusty-rose) 0%, var(--warm-terracotta) 100%);
  box-shadow: var(--shadow-sm);
}

.image-label {
  position: absolute;
  bottom: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-taupe);
  background: rgba(253, 249, 240, 0.9);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
}

/* .showcase-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
} */

.arrow-spark {
  color: var(--spark-orange);
  font-size: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

.arrow-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, var(--spark-orange), transparent);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

/* Cross-browser pulse animation */
@-webkit-keyframes pulse {
  0%, 100% { -webkit-transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(1.2); opacity: 0.7; }
}

@-moz-keyframes pulse {
  0%, 100% { -moz-transform: scale(1); opacity: 1; }
  50% { -moz-transform: scale(1.2); opacity: 0.7; }
}

.image-grid {
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  gap: var(--space-sm);
  flex-direction: row; /* Mobile-first: horizontal row */
  justify-content: center;
}

.image-grid .image-placeholder {
  padding: var(--space-sm);
}

.image-grid .image-content {
  height: 80px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  position: relative;
}

.image-grid .product-item {
  width: 100%;
  height: 100%;
}

.before-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--dark-taupe);
  background: rgba(253, 249, 240, 0.9);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-sm);
  visibility: hidden;
}

.image-placeholder:hover .before-badge {
  visibility: visible;
}

/* Carousel Navigation Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid var(--light-taupe);
  border-radius: 50%;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--charcoal);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding-bottom: 2px;
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--growth-green);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-left {
  left: -42px;
}

.carousel-arrow-right {
  right: -42px;
}

.carousel-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* ==========================================================================
   DESKTOP HERO LAYOUT - Non-Touch Devices Only
   This media query applies desktop 2-column layout ONLY to devices with
   hover capability (mouse/trackpad) at viewport width 769px and above.
   Touch devices (phones, tablets, iPad Pro) will NEVER get this layout.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .hero-container {
    grid-template-columns: 1fr 1fr;
    /* gap: var(--space-3xl); */
    gap: var(--space-lg);
    text-align: left;
  }

  .hero-content {
    display: block; /* Reset to normal flow for desktop */
    max-width: 600px;
  }

  .hero-title {
    order: unset;
  }

  .hero-visual {
    order: unset;
  }

  .hero-description {
    order: unset;
    margin-left: 0;
    margin-right: 0;
  }

  .hero-cta {
    order: unset;
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ==========================================================================
   DESKTOP VISUAL SHOWCASE - Non-Touch Devices at 901px+
   visual-showcase becomes horizontal row, image-grid becomes vertical column
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .visual-showcase {
    flex-direction: row;
    /* gap: var(--space-3xl); */
    gap: var(--space-lg);
  }

  .image-grid {
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1255px) {
  .hero-container {
    gap: var(--space-3xl);
  }

  .visual-showcase {
    gap: var(--space-3xl);
  }
}



/* Section Containers */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* How It Actually Works Section */
/* How It Works - TWO-PHASE CARD LAYOUT */
.how-it-works {
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg,
    var(--cream-white) 0%,
    var(--soft-beige) 100%
  );
}

.workflow-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin: var(--space-xl) auto;
  max-width: 1200px;
}

.workflow-phase-card {
  background: #ffffff70;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.workflow-phase-card:hover {
  background: #fff;
  border-color: var(--spark-orange);
  box-shadow: 0 8px 24px rgba(255, 121, 85, 0.15);
  transform: translateY(-4px);
}

.phase-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.phase-badge {
  background: linear-gradient(135deg, var(--spark-orange) 0%, #ff8c61 100%);
  color: white;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: center;
}

.phase-badge.phase-2 {
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}

.phase-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-taupe);
  margin: 0;
}

.phase-steps-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex: 1;
}

.mini-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--soft-beige);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.mini-step:hover {
  background: var(--light-taupe);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mini-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--spark-orange) 0%, #ff8c61 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 121, 85, 0.25);
}

.mini-text {
  font-size: 0.875rem;
  color: var(--dark-taupe);
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

.mini-arrow {
  display: none;
}

.phase-summary {
  font-size: 0.875rem;
  color: var(--warm-gray);
  line-height: 1.6;
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--light-taupe);
  text-align: center;
}

.phase-connector {
  font-size: 3rem;
  color: var(--spark-orange);
  font-weight: 700;
  text-align: center;
  opacity: 0.4;
  align-self: center;
  line-height: 1;
}

/* Compact Value Props - Flat Badge Style with Hint Panel */
.value-props-wrapper {
  margin-top: var(--space-xl);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.value-props-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
}

.value-item {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid var(--light-taupe);
  border-radius: 50px;
  transition: all 0.25s ease;
  box-shadow: none;
  cursor: pointer;
  position: relative;
}

.value-item:hover {
  border-color: var(--dark-taupe);
  background: var(--soft-beige);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.value-item.active {
  border-color: var(--spark-orange);
  box-shadow: 0 4px 12px rgba(255, 121, 85, 0.15);
}

.value-item strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark-taupe);
  white-space: nowrap;
  line-height: 1;
}

/* Hint Panel - Matches Phase Summary Style */
.value-hint-panel {
  margin-top: var(--space-md);
  padding-top: 0;
  border-top: 1px solid var(--light-taupe);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease,
              opacity 0.35s ease,
              padding-top 0.35s ease;
  opacity: 0;
}

.value-hint-panel.active {
  max-height: 80px;
  opacity: 1;
  padding-top: var(--space-md);
}

.value-hint-content {
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  color: var(--warm-gray);
  line-height: 1.6;
  margin: 0;
  text-align: center;
  font-style: italic;
}

/* Responsive for How It Works */
@media (max-width: 1024px) {
  .workflow-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-md);
  }

  .phase-connector {
    font-size: 2rem;
    transform: rotate(90deg);
    margin: 0;
  }
}

/* Tablet: Restore horizontal layout with tighter spacing (745px - 1024px) */
@media (min-width: 745px) and (max-width: 1024px) {
  .workflow-container {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    gap: var(--space-sm);
  }

  .phase-connector {
    transform: rotate(0deg);
  }
}

@media (max-width: 768px) {
  .workflow-phase-card {
    padding: var(--space-md);
  }

  .value-props-compact {
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
  }

  .value-item {
    padding: var(--space-xs) var(--space-md);
  }

  .value-item strong {
    font-size: 0.875rem;
  }

  .value-hint-panel.active {
    max-height: 100px;
  }

  .value-hint-content {
    font-size: 0.8125rem;
  }

  .phase-steps-compact {
    gap: var(--space-xs);
  }

  .mini-step {
    padding: var(--space-xs) var(--space-sm);
  }

  .mini-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .mini-text {
    font-size: 0.8rem;
  }

  .phase-summary {
    font-size: 0.8125rem;
  }

  .phase-header h3 {
    font-size: 1.125rem;
  }

  .phase-connector {
    font-size: 1.75rem;
  }
}

/* Problem Statement Section */
.problem-statement {
  padding: var(--space-2xl) var(--space-lg);
  background: linear-gradient(135deg, 
    var(--warm-white) 0%, 
    rgba(245, 242, 236, 0.8) 50%,
    var(--soft-beige) 100%);

  /* background: linear-gradient(135deg, rgba(168, 181, 160, 0.15) 0%, rgba(168, 181, 160, 0.12) 50%, rgba(168, 181, 160, 0.18) 100%); */
  position: relative;
  overflow: hidden;
}

.problem-statement::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, 
    rgba(212, 165, 160, 0.08) 0%, 
    transparent 70%);
  animation: floatBackground 20s ease-in-out infinite;
}

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

.problem-title {
  font-size: var(--font-size-section-title-secondary);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-xl);
  font-family: var(--font-primary);
  line-height: 1.3;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

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

.pain-point {
  background: #ffffff70;
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pain-point:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(58, 53, 44, 0.15);
}

.pain-point-1:hover {
  border-color: var(--dusty-rose);
  box-shadow: 0 8px 24px rgba(255, 179, 179, 0.2);
}

.pain-point-2:hover {
  border-color: var(--warm-terracotta);
  box-shadow: 0 8px 24px rgba(255, 121, 85, 0.15);
}

.pain-point-3:hover {
  border-color: var(--muted-blue);
  box-shadow: 0 8px 24px rgba(141, 175, 193, 0.2);
}

.pain-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
  line-height: 1;
}

/* SVG Pain Icon Styles */
.pain-icon-svg {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
  transition: transform 0.25s ease-out;
  cursor: pointer;
}

.pain-icon-svg:hover {
  transform: translateY(-2px);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pain-icon-svg {
    transition: none;
  }
  
  .pain-icon-svg:hover {
    transform: none;
  }
}

.pain-title {
  font-size: var(--font-size-component-title-sm);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
  font-family: var(--font-primary);
}

.pain-description {
  color: var(--dark-taupe);
  line-height: 1.6;
  font-size: var(--font-size-body);
  margin: 0;
}

/* ==========================================================================
   CHAT BUBBLES - Pain Points as Conversation
   Responsive design for all viewports with scroll-driven reveal
   ========================================================================== */

/* Dark theme background for chat section */
.problem-statement {
  background: var(--charcoal);
}

/* Hide card-based layout, use chat instead */
.pain-points {
  display: none;
}

.problem-title {
  display: none;
}

/* Chat container */
.pain-chat-mobile {
  display: block;
  padding: var(--space-lg) 0;
}

/* Chat title */
.problem-title-mobile {
  display: block;
  font-size: var(--font-size-section-title-secondary);
  font-weight: 700;
  color: var(--light-taupe);
  text-align: center;
  margin-bottom: var(--space-md);
  font-family: var(--font-primary);
  line-height: 1.2;
}

/* Chat intro text */
.chat-intro {
  text-align: center;
  font-size: var(--font-size-body-lg);
  color: var(--mediumdark-taupe);
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* Messages container - centered with max-width for readability */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 600px;
  margin: 0 auto;
}

/* Individual chat bubble */
.chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 85%;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Revealed state */
.chat-bubble.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Alternating alignment */
.chat-bubble-1 {
  align-self: flex-start;
}

.chat-bubble-2 {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble-3 {
  align-self: flex-start;
}

/* Emoji avatar */
.bubble-emoji {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 4px;
}

/* Message text bubble - Wheat Parchment gradient */
.chat-bubble p {
  background: linear-gradient(135deg, #F7F2E8 0%, #EDE5D5 100%);
  border: 1px solid rgba(58, 53, 44, 0.08);
  border-radius: 20px 20px 20px 6px;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--charcoal);
  box-shadow: 0 2px 12px rgba(58, 53, 44, 0.1);
}

/* Right-aligned bubble tail */
.chat-bubble-2 p {
  border-radius: 20px 20px 6px 20px;
}

.chat-bubble p em {
  font-style: italic;
  color: var(--warm-terracotta);
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: #9b968c3d;
  border-radius: 20px;
  width: fit-content;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.typing-indicator.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Position typing indicators to align with next message */
.typing-1 {
  align-self: flex-end;
  margin-right: 15%;
}

.typing-2 {
  align-self: flex-start;
  margin-left: 2.5rem;
}

/* Bouncing dots */
.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--medium-taupe);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}

/* Chat outro section */
.chat-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-xl);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.chat-outro.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Final typing indicator */
.typing-final {
  opacity: 1;
  transform: none;
  margin-bottom: var(--space-md);
}

/* Outro thought text */
.outro-thought {
  font-size: var(--font-size-body-lg);
  font-style: italic;
  color: var(--mediumdark-taupe);
  text-align: center;
  margin: 0 0 var(--space-lg) 0;
}

/* Scroll hint */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  animation: gentlePulse 2s ease-in-out infinite;
}

.scroll-text {
  font-size: var(--font-size-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--spark-orange);
}

.scroll-arrow {
  font-size: 1.25rem;
  color: var(--spark-orange);
  animation: bounceDown 1.5s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Large desktop: Wider container, more compact layout */
@media (min-width: 1200px) {
  .chat-messages {
    max-width: 650px;
    gap: var(--space-sm);
  }

  .chat-bubble {
    max-width: 80%;
  }

  .problem-title-mobile {
    font-size: 2.25rem;
  }

  .chat-intro {
    font-size: 1.15rem;
  }

  .typing-1 {
    margin-right: 20%;
  }
}

/* Tablet: Medium adjustments */
@media (min-width: 769px) and (max-width: 1199px) {
  .chat-messages {
    max-width: 580px;
    gap: var(--space-md);
  }

  .chat-bubble {
    max-width: 82%;
  }

  .problem-title-mobile {
    font-size: 2rem;
  }
}

/* Mobile: Full-width, scroll-driven reveal optimized */
@media (max-width: 768px) {
  .pain-chat-mobile {
    padding: var(--space-md) 0;
  }

  .chat-messages {
    max-width: 100%;
    gap: var(--space-md);
  }

  .chat-bubble {
    max-width: 88%;
  }

  .problem-title-mobile {
    /* font-size controlled by --font-size-section-title-secondary variable */
    margin-bottom: var(--space-sm);
  }

  .chat-intro {
    /* font-size controlled by --font-size-body-lg variable */
    margin-bottom: var(--space-lg);
  }

  .bubble-emoji {
    font-size: 1.75rem;
  }

  .chat-bubble p {
    font-size: var(--font-size-body-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .typing-1 {
    margin-right: 12%;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .chat-bubble {
    max-width: 92%;
  }

  .chat-bubble p {
    font-size: var(--font-size-body-sm);
    padding: var(--component-padding-sm);
  }

  .bubble-emoji {
    font-size: 1.5rem;
  }
}

/* Reduced motion: disable animations but keep reveal */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble,
  .typing-indicator,
  .chat-outro {
    transition: opacity 0.2s ease-out;
    transform: none;
  }

  .chat-bubble.revealed,
  .typing-indicator.revealed,
  .chat-outro.revealed {
    transform: none;
  }

  .typing-indicator span,
  .scroll-arrow,
  .scroll-hint {
    animation: none;
  }
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-title {
  font-size: var(--font-size-section-title);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.section-description {
  font-size: var(--font-size-body-lg);
  color: var(--dark-taupe);
  max-width: 600px;
  margin: 0 auto;
}

/* Use Cases Section */
.use-cases {
  padding: var(--space-xl) 0;
  background: radial-gradient(circle at 20% 30%, rgba(168, 181, 160, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(212, 165, 160, 0.04) 0%, transparent 50%);
  position: relative;
}

.use-cases h2 {
  font-size: var(--font-size-section-title-secondary);
  margin-bottom: var(--space-md);
}

.use-cases::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 107, 53, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 166, 166, 0.03) 0%, transparent 40%);
  pointer-events: none;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--component-gap-sm);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.use-case-card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: var(--component-padding-sm);
  border: 1px solid var(--light-taupe);
  box-shadow: 0 2px 12px rgba(106, 101, 89, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-md);
  align-items: center;
}

.use-case-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--spark-orange), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.use-case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(106, 101, 89, 0.1);
  border-color: var(--spark-orange);
}

.use-case-card:hover::before {
  opacity: 0.02;
}

.use-case-icon {
  font-size: 2rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(255, 107, 53, 0.08);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.use-case-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.use-case-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-body-lg);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0;
  text-align: left;
  line-height: 1.3;
}

.use-case-description {
  font-family: var(--font-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.5;
  color: var(--dark-taupe);
  margin-bottom: 0;
  text-align: left;
}

.use-case-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-start;
  margin-bottom: 0;
}

.platform-tag {
  background: var(--soft-beige);
  color: var(--dark-taupe);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: var(--font-size-caption-sm);
  font-weight: 500;
  border: 1px solid var(--light-taupe);
  transition: all 0.2s ease;
}

.use-case-card:hover .platform-tag {
  background: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.3);
  color: var(--spark-orange);
}

.use-case-results {
  text-align: center;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--light-taupe);
  padding-left: var(--space-md);
}

.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-number {
  font-family: var(--font-primary);
  font-size: var(--font-size-component-title);
  font-weight: 700;
  color: var(--spark-orange);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-secondary);
  font-size: var(--font-size-caption-sm);
  color: var(--warm-gray);
  font-weight: 500;
}


/* How It Works */
.how-it-works {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: var(--cream-white);
}

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

.step-card {
  background: var(--cream-white);
  padding: var(--component-padding);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-organic);
  border: 1px solid var(--light-taupe);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--spark-orange) 0%, var(--platform-gold) 100%);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

.step-card:hover::before {
  transform: translateX(0);
}

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

.step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: 2rem;
  box-shadow: var(--shadow-sm);
}

.step-title {
  font-size: var(--font-size-component-title);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.step-description {
  font-size: var(--font-size-body);
  color: var(--dark-taupe);
  line-height: 1.6;
}

/* Features Section */
.features {
  padding: var(--section-padding-y) var(--section-padding-x);
  /* background: var(--warm-white); */
  /* background: linear-gradient(135deg, var(--warm-white) 0%, rgba(245, 242, 236, 0.8) 50%, var(--soft-beige) 100%); */
  background: var(--soft-beige);
}

.features-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-gap);
}

.feature-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--component-gap);
  align-items: center;
}

.feature-spotlight.reverse {
  direction: rtl;
}

.feature-spotlight.reverse > * {
  direction: ltr;
}

.feature-content {
  max-width: 500px;
}

.feature-title {
  font-size: var(--font-size-section-title-secondary);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.feature-description {
  font-size: var(--font-size-body-lg);
  color: var(--dark-taupe);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.feature-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--dark-taupe);
}

.benefit-icon {
  color: var(--growth-green);
  font-weight: 700;
  font-size: var(--font-size-body-lg);
}

.feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Before/After Slider */
.before-after-slider {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-organic);
  cursor: pointer;
}

.slider-before, .slider-after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slider-after {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  transition: clip-path var(--transition-normal);
}

.before-after-slider:hover .slider-after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.sample-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sample-image.cluttered {
  background: linear-gradient(45deg, var(--medium-taupe) 0%, var(--warm-gray) 100%);
}

.sample-image.clean {
  background: linear-gradient(45deg, var(--cream-white) 0%, var(--warm-white) 100%);
}

.product-demo {
  width: 60px;
  height: 60px;
  background: var(--warm-terracotta);
  border-radius: var(--radius-md);
}

.product-demo.polished {
  background: linear-gradient(135deg, var(--dusty-rose) 0%, var(--warm-terracotta) 100%);
  box-shadow: var(--shadow-md);
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--spark-orange);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.handle-grip {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: var(--radius-full);
}

/* Platform Showcase */
.platform-showcase {
  position: relative;
  width: 300px;
  height: 300px;
  /* Ensure it doesn't overflow on smaller screens */
  max-width: 100%;
  margin: 0 auto;
  /* Contain the orbital animation */
  overflow: hidden;
}

.central-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.source-photo {
  width: 100%;
  height: 100%;
  background: var(--warm-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-organic);
}

.platform-outputs {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.output-item {
  position: absolute;
  width: 50px;
  height: 50px;
  animation: orbit 10s linear infinite;
  /* Cross-browser animation support */
  -webkit-animation: orbit 10s linear infinite;
  -moz-animation: orbit 10s linear infinite;
  /* Ensure visibility for accessibility */
  min-width: 44px;
  min-height: 44px;
  /* Improve performance */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Center the orbit around the container center */
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.output-item:nth-child(1) { --orbit-delay: 0s; }
.output-item:nth-child(2) { --orbit-delay: -2.5s; }
.output-item:nth-child(3) { --orbit-delay: -5s; }
.output-item:nth-child(4) { --orbit-delay: -7.5s; }

@keyframes orbit {
  from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

/* Cross-browser orbit animation */
@-webkit-keyframes orbit {
  from { -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to { -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@-moz-keyframes orbit {
  from { -moz-transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to { -moz-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

/* Orbit animation fallback */
@supports not (transform: rotate(360deg)) {
  .output-item {
    animation: none;
    position: static;
    display: inline-block;
    margin: var(--space-xs);
  }
}

.output-item {
  animation-delay: var(--orbit-delay);
}

.output-image {
  width: 100%;
  height: 100%;
  background: var(--warm-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.output-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark-taupe);
  background: var(--cream-white);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Template Gallery */
.template-gallery {
  width: 100%;
  max-width: 400px;
}

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

.template-card {
  background: var(--warm-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--spark-orange);
}

.template-preview {
  width: 100%;
  height: 60px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.template-card.minimal .template-preview {
  background: linear-gradient(135deg, var(--cream-white) 0%, var(--soft-beige) 100%);
}

.template-card.lifestyle .template-preview {
  background: linear-gradient(135deg, var(--sage-green) 0%, var(--muted-blue) 100%);
}

.template-card.luxury .template-preview {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark-taupe) 100%);
}

.template-card.seasonal .template-preview {
  background: linear-gradient(135deg, var(--dusty-rose) 0%, var(--warm-terracotta) 100%);
}

.template-card.craft .template-preview {
  background: linear-gradient(135deg, var(--wheat-gold) 0%, var(--platform-gold) 100%);
}

.template-card.modern .template-preview {
  background: linear-gradient(135deg, var(--muted-blue) 0%, var(--soft-lavender) 100%);
}

.template-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-taupe);
}

/* Difference Section */
.difference {
  padding: var(--space-3xl) 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 195, 60, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0, 166, 166, 0.04) 0%, transparent 50%);
}

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

.difference-card {
  background: var(--cream-white);
  padding: var(--component-padding);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-organic);
  border: 1px solid var(--light-taupe);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.difference-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--trustworthy-teal) 0%, var(--growth-green) 100%);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

.difference-card:hover::before {
  transform: translateX(0);
}

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

.difference-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: 2rem;
  box-shadow: var(--shadow-sm);
}

.difference-title {
  font-size: var(--font-size-component-title);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.difference-description {
  font-size: var(--font-size-body);
  color: var(--dark-taupe);
  line-height: 1.6;
}

/* Analytics Dashboard */
.analytics-dashboard {
  background: var(--warm-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-organic);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--light-taupe);
}

.dashboard-header h4 {
  color: var(--charcoal);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.dashboard-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--growth-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-text {
  color: var(--dark-taupe);
  font-size: 0.875rem;
  font-weight: 500;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Metrics Row */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-card {
  background: var(--cream-white);
  border: 1px solid var(--medium-taupe);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all var(--transition-normal);
}

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

.metric-card.sales {
  border-left: 4px solid var(--growth-green);
}

.metric-card.time {
  border-left: 4px solid var(--platform-gold);
}

.metric-card.compliance {
  border-left: 4px solid var(--trustworthy-teal);
}

.metric-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
}

.metric-label {
  font-size: 0.75rem;
  color: var(--warm-gray);
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Platform Section */
.platform-section h5 {
  color: var(--charcoal);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.platform-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.platform-item {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: 0.75rem;
}

.platform-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark-taupe);
}

.platform-bar {
  background: var(--soft-beige);
  border-radius: var(--radius-sm);
  height: 8px;
  overflow: hidden;
  position: relative;
}

.platform-progress {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 1.5s ease-out;
  animation: fillProgress 2s ease-out;
}

.platform-item:nth-child(1) .platform-progress {
  background: var(--trustworthy-teal);
  width: 94%;
}

.platform-item:nth-child(2) .platform-progress {
  background: var(--platform-gold);
  width: 86%;
}

.platform-item:nth-child(3) .platform-progress {
  background: var(--warm-terracotta);
  width: 78%;
}

.platform-score {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
}

@keyframes fillProgress {
  from { width: 0%; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .analytics-dashboard {
    padding: 1rem;
  }
  
  .metrics-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .metric-card {
    padding: 0.75rem;
  }
  
  .platform-item {
    grid-template-columns: 50px 1fr 35px;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .dashboard-header h4 {
    font-size: 1.125rem;
  }
}

/* Pricing Section */
.pricing {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: var(--warm-white);
}

/* Shared Features Banner - Hidden by default (desktop shows full table) */
.pricing-shared-features {
  display: none;
}

/* Shared Features Banner - Visible on card layouts (≤1133px) */
@media (max-width: 1133px) {
  .pricing-shared-features {
    display: block;
    background: linear-gradient(135deg, var(--soft-beige) 0%, var(--cream-white) 100%);
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
  }

  .pricing-shared-features-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-body-lg);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 var(--space-md) 0;
  }

  .pricing-shared-features-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
  }

  .pricing-shared-feature-item {
    font-family: var(--font-secondary);
    font-size: var(--font-size-caption);
    color: var(--dark-taupe);
    white-space: nowrap;
  }

  /* ----- Featured Card Styling - Card Layouts Only ----- */

  /* Task 2a: ALL devices - Featured card topup option hover (orange tint) */
  .pricing-header-cell.plan-header.featured .card-topup-content .topup-option:hover {
    background: #ff6b351f;
  }

  /* Task 1a: TOUCH devices only - Featured card ::before always visible */
  .touch-device .pricing-header-cell.plan-header.featured::before {
    opacity: 0.15;
  }

  /* Task 1b: TOUCH devices only - Featured card topup option background (subtle orange) */
  .touch-device .pricing-header-cell.plan-header.featured .card-topup-content .topup-option {
    background: #ff6b350a;
  }
}

/* Shared Features Banner - Mobile adjustments (≤640px) */
@media (max-width: 640px) {
  .pricing-shared-features {
    padding: var(--space-md);
  }

  .pricing-shared-features-title {
    font-size: var(--font-size-body);
    margin-bottom: var(--space-sm);
  }

  .pricing-shared-features-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .pricing-shared-feature-item {
    font-size: var(--font-size-caption-sm);
  }
}

/* Shared Features Banner - Small mobile adjustments (≤480px) */
@media (max-width: 480px) {
  .pricing-shared-features {
    padding: var(--space-sm) var(--space-md);
  }

  .pricing-shared-features-title {
    font-size: var(--font-size-body-sm);
  }

  .pricing-shared-feature-item {
    font-size: var(--font-size-label);
  }
}

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

.pricing-card {
  background: var(--cream-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-xl);
  padding: var(--component-padding);
  position: relative;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-organic);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  align-items: start;
}

.pricing-card.featured {
  border-color: var(--spark-orange);
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.15), var(--shadow-lg);
}

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

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--spark-orange);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.pricing-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pricing-title {
  font-size: var(--font-size-component-title);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

.price-currency {
  font-size: var(--font-size-component-title);
  font-weight: 600;
  color: var(--spark-orange);
}

.price-amount {
  font-size: 3rem;
  font-weight: 700;
  color: var(--charcoal);
}

.price-period {
  font-size: var(--font-size-body);
  color: var(--warm-gray);
}

.pricing-subtitle {
  color: var(--dark-taupe);
  font-size: var(--font-size-body-xs);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  align-self: stretch;
}

.pricing-features .feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--dark-taupe);
}

.feature-check {
  color: var(--growth-green);
  font-weight: 700;
  font-size: 1.1rem;
}

.pricing-guarantee {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--warm-gray);
  font-size: 0.9rem;
}

/* Pricing Table Layout - New Format */
.pricing-table-container {
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--cream-white) 0%, var(--warm-white) 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(168, 181, 160, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) repeat(4, 1fr);
}

.pricing-header-row {
  display: contents;
}

.pricing-header-cell {
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  min-height: 220px;
}

.pricing-header-cell:not(.plan-header) {
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.pricing-header-cell.feature-header {
  display: flex !important;
}

.pricing-header-cell.feature-header {
  /*background: linear-gradient(135deg, var(--medium-taupe) 0%, #8B9A83 100%);
  color: var(--cream-white);
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: var(--space-xl) var(--space-lg); */
  background: var(--medium-taupe);
  color: var(--charcoal);
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-lg);
  position: sticky;
  left: 0;
  z-index: 2;
}

.pricing-header-cell.feature-header h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: 0.5px;
}

.plan-headers-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  grid-column: 2 / 6;
}

.pricing-header-cell.plan-header {
  border-left: 1px solid rgba(168, 181, 160, 0.1);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: var(--space-lg);
  min-height: 200px;
  max-height: fit-content;
}

.plan-badge-placeholder {
  grid-row: 1;
  height: 0;
  visibility: hidden;
}

.plan-badge {
  grid-row: 1;
  align-self: start;
  justify-self: center;
}

.plan-content {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  width: 100%;
  height: 100%;
  max-height: fit-content;
}

.plan-name {
  margin-bottom: var(--space-sm);
}

.plan-price {
  margin-bottom: var(--space-sm);
}

.plan-subtitle {
  margin: 0;
  flex-grow: 0;
}

.pricing-header-cell.plan-header:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pricing-header-cell.plan-header.featured {
  /*background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);*/
  /*border-left: 2px solid var(--spark-orange);
  border-right: 2px solid var(--spark-orange);*/
  /*box-shadow: 0 0 30px rgba(255, 107, 53, 0.15);*/
  z-index: 1;
}

.pricing-header-cell.plan-header.featured:hover {
  transform: translateY(-2px);
  /*box-shadow: 0 0 40px rgba(255, 107, 53, 0.25);*/
}

.plan-badge {
  background: var(--spark-orange);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: -10px;
  white-space: nowrap;
}

.plan-name {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--charcoal);
  margin: 0 0 var(--space-xs) 0;
}

.plan-price {
  margin: var(--space-xs) 0 var(--space-sm) 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.price-currency {
  font-size: 1rem;
  color: var(--warm-gray);
  vertical-align: top;
}

.price-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--charcoal);
  font-family: var(--font-primary);
}

.featured .price-amount {
  color: var(--spark-orange);
  /* color: var(--trustworthy-teal); */
}

.price-period {
  font-size: 0.9rem;
  color: var(--warm-gray);
}

.plan-content {
  flex-grow: 1;
  /* display: flex; */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  /*grid-row: 2;*/
}

.plan-subtitle {
  color: var(--warm-gray);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.pricing-feature-row {
  display: contents;
}

.pricing-feature-row .feature-name,
.pricing-feature-row .feature-value {
  border-bottom: 1px solid var(--light-taupe);
  align-self: stretch;
  min-height: 60px;
}

.pricing-feature-row:nth-child(even) .feature-name,
.pricing-feature-row:nth-child(even) .feature-value {
  background: rgba(245, 242, 236, 0.3);
}

.pricing-feature-row:hover .feature-name,
.pricing-feature-row:hover .feature-value {
  background: rgba(168, 181, 160, 0.05);
}

.pricing-header-cell {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 242, 236, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(168, 181, 160, 0.15);
  position: relative;
}



.feature-name {
  padding: var(--space-md) var(--space-lg);
  font-weight: 500;
  color: var(--charcoal);
  background: var(--soft-beige);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--light-taupe);
}

.feature-value {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(168, 181, 160, 0.1);
  color: var(--dark-taupe);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  transition: all 0.2s ease;
}

.feature-value.featured {
  /*background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);*/
  /*border-left: 2px solid var(--spark-orange);
  border-right: 2px solid var(--spark-orange);*/
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1rem;
}

/* Custom check and cross marks styling */
.feature-value:contains('✓') {
  color: #4CAF50;
  font-weight: 700;
  font-size: 1.1rem;
}

.feature-value:contains('✗') {
  color: #E57373;
  font-weight: 700;
  font-size: 1.1rem;
  opacity: 0.6;
}

/* ✅ Expandable Top-Up Row Styles */
.pricing-feature-row.expandable-row {
  /* grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) repeat(4, 1fr); */
  cursor: pointer;
  transition: background-color 0.2s;
  border-top: 2px solid rgba(168, 181, 160, 0.15);
}

.pricing-feature-row.expandable-row:hover {
  background-color: rgba(168, 181, 160, 0.05);
}

/* Focus visible for expandable row (keyboard only) */
.pricing-feature-row.expandable-row:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.pricing-feature-row.expandable-row:focus:not(:focus-visible) {
  outline: none;
}

.expandable-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  /* padding: var(--space-md) var(--space-lg); */
}

.expand-icon {
  transition: transform 0.3s ease;
  font-size: 0.8em;
  color: var(--sage-green);
  display: inline-block;
}

.pricing-feature-row.expandable-row.expanded .expand-icon {
  transform: rotate(90deg);
}

.collapsed-price-range {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Expanded Content Row */
.pricing-feature-row-expanded {
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  padding: var(--space-md) 0;
  background: linear-gradient(135deg, rgba(168, 181, 160, 0.04) 0%, rgba(168, 181, 160, 0.02) 100%);
  border-bottom: 2px solid rgba(168, 181, 160, 0.15);
}

.feature-name-expanded {
  padding: var(--space-sm) var(--space-lg);
  color: var(--warm-gray);
  font-style: italic;
  display: flex;
  align-items: center;
}

.feature-value-expanded {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-xs);
  border-left: 1px solid rgba(168, 181, 160, 0.1);
}

/* Top-up Options (inside each column) */
.topup-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--wheat-gold);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid rgba(168, 181, 160, 0.15);
  transition: all 0.2s;
}

.topup-option:hover {
  border-color: var(--dusty-rose);
  box-shadow: 0 2px 8px rgba(168, 181, 160, 0.15);
  transform: translateY(-1px);
}

.topup-price {
  font-weight: 600;
  color: var(--charcoal);
  margin-left: var(--space-xs);
}

.topup-na {
  text-align: center;
  font-style: italic;
  opacity: 0.6;
  padding: var(--space-sm);
}

/* Card Topup Section - Hidden by default on desktop (only visible on responsive ≤1133px) */
.card-topup-section {
  display: none;
}

/* Add hover effect to entire pricing table */
.pricing-table-container:hover .pricing-header-cell.plan-header:not(:hover) {
  opacity: 0.85;
  filter: grayscale(10%);
}

.pricing-table-container:hover .feature-value:not(.featured) {
  opacity: 0.85;
}

/* Most Popular Label */
.most-popular-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  align-content: end;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(255, 107, 53, 0.08) 100%);
  color: #ff6b35;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-align: center;
  line-height: 18px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 107, 53, 0.15);
  /* border-bottom: 1px solid #008c8c0f; */
  z-index: 2;
  transition: all 0.3s ease;

  /* background: linear-gradient(135deg, rgba(0, 166, 166, 0.14) 0%, rgba(0, 200, 150, 0.10) 100%);
  color: #00a6a6; */
}

.pricing-header-cell.plan-header.featured:hover .most-popular-label {
  /*color: #ff6b35;*/
  /*color: #ff6b35c4;*/
  color: #ff6b358f;
  /* color: #008c8c; */
}

/* Enhanced featured column styling */
.pricing-header-cell.plan-header.featured::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--spark-orange), #ff8a5c, var(--spark-orange));
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.1;

  /* background: linear-gradient(45deg, var(--trustworthy-teal), var(--growth-green), var(--trustworthy-teal)); */
}

.pricing-header-cell.plan-header.featured:hover::before {
  /* opacity: 0.05; */
  opacity: 0.15;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Smooth scrolling indicator for mobile */
.pricing-table-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure proper contrast for featured elements */
.feature-value.featured {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add subtle animation to feature rows */
.pricing-feature-row {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
}

.pricing-feature-row:nth-child(1) { animation-delay: 0.1s; }
.pricing-feature-row:nth-child(2) { animation-delay: 0.15s; }
.pricing-feature-row:nth-child(3) { animation-delay: 0.2s; }
.pricing-feature-row:nth-child(4) { animation-delay: 0.25s; }
.pricing-feature-row:nth-child(5) { animation-delay: 0.3s; }
.pricing-feature-row:nth-child(6) { animation-delay: 0.35s; }
.pricing-feature-row:nth-child(7) { animation-delay: 0.4s; }
.pricing-feature-row:nth-child(8) { animation-delay: 0.45s; }
.pricing-feature-row:nth-child(9) { animation-delay: 0.5s; }
/* .pricing-feature-row:nth-child(10) { animation-delay: 0.55s; } */

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Responsive Design for Pricing Table */
@media (max-width: 1024px) {
  .pricing-table-container {
    margin: 0 var(--space-md);
  }
  
  .pricing-header-row {
    grid-template-columns: minmax(180px, 1.2fr) 1fr;
    font-size: 0.9rem;
    gap: 0;
  }
  
  .plan-headers-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .pricing-header-cell {
    padding: var(--space-lg) var(--space-md);
    min-height: 220px;
  }
  
  .feature-name,
  .feature-value {
    padding: var(--space-md) var(--space-sm);
  }
  
  .plan-name {
    font-size: 1.3rem;
  }
  
  .price-amount {
    font-size: 2.8rem;
  }

  /* Hide some less important features on tablet */
  .pricing-feature-row:nth-child(n+9) {
    display: none;
  }
}

@media (max-width: 768px) {
  .pricing-table-container {
    margin: 0 var(--space-sm);
  }
  
  .plan-headers-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  
  .pricing-header-cell,
  .feature-header,
  .feature-cta,
  .feature-name,
  .feature-value {
    padding: var(--space-xs);
  }
  
  .plan-name {
    font-size: 0.95rem;
  }
  
  .price-amount {
    font-size: 1.2rem;
  }
  
  .plan-subtitle {
    font-size: 0.7rem;
    min-height: 1.8rem;
  }
}

/* NOTE: Mobile pricing table styles (≤640px) moved to ISSUE 1 section below
   for better organization and full feature display on mobile cards */

/* Community Section - Enhanced */
.community {
  padding: var(--section-padding-y) var(--section-padding-x);
  background:
    radial-gradient(circle at 20% 30%, rgba(168, 181, 160, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 165, 160, 0.06) 0%, transparent 50%);
  /* Ensure section is accessible */
  position: relative;
  overflow: hidden;
}

.community-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--component-gap);
  align-items: stretch;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Fix layout structure */
  min-height: 500px;
  position: relative;
}

/* Grid fallback for community content */
@supports not (display: grid) {
  .community-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .community-text,
  .community-visual {
    flex: 1 1 45%;
    margin-bottom: var(--space-lg);
  }
}

.community-text {
  max-width: 500px;
  /* Better spacing and alignment */
  padding-right: var(--space-md);
}

/* Screen reader only content */
.stats-title,
.features-title,
.testimonials-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.community-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: rgba(253, 249, 240, 0.5);
  border-radius: var(--radius-lg);
  border: 2px solid var(--light-taupe);
  /* CRITICAL: Ensure all 3 stat items fit properly */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  /* Force grid to contain all items */
  grid-auto-rows: minmax(120px, auto);
  align-items: stretch;
}

/* Grid fallback for stats */
@supports not (display: grid) {
  .community-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  
  .stat-item {
    flex: 1 1 calc(33.333% - var(--space-sm));
    max-width: calc(33.333% - var(--space-sm));
    margin-bottom: var(--space-md);
  }
}

.stat-item {
  text-align: center;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  outline: none;
  background: var(--cream-white);
  border: 2px solid rgba(168, 181, 160, 0.2);
  /* CRITICAL: Ensure item stays within grid cell */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-sm);
  /* Prevent any overflow */
  overflow: hidden;
  position: relative;
}

.stat-item:hover,
.stat-item:focus {
  background: rgba(255, 107, 53, 0.08);
  transform: translateY(-3px) scale(1.03);
  border-color: var(--spark-orange);
  box-shadow: 
    0 8px 25px rgba(58, 53, 44, 0.12),
    0 0 0 3px rgba(255, 107, 53, 0.15);
}

.stat-item:focus-visible {
  outline: 3px solid var(--spark-orange);
  outline-offset: 2px;
}

.stat-item:active {
  transform: translateY(-1px) scale(1.01);
}

.stat-item strong {
  display: block;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 700;
  color: var(--spark-orange);
  margin-bottom: 4px;
  /* Better number formatting */
  font-variant-numeric: tabular-nums;
}

.stat-item span {
  font-size: var(--font-size-caption);
  color: var(--dark-taupe);
  font-weight: 500;
  /* Better line height for readability */
  line-height: 1.4;
}

.community-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: rgba(253, 249, 240, 0.3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(168, 181, 160, 0.15);
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin-left: 0;
  padding-left: var(--space-lg);
}

.community-features .feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--dark-taupe);
  font-weight: 500;
  line-height: 1.5;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  outline: none;
  border: 2px solid transparent;
  list-style: none;
  /* Fix spacing and layout */
  width: 100%;
  box-sizing: border-box;
  background: var(--cream-white);
  margin: 0;
  position: relative;
}

.community-features .feature-item:hover,
.community-features .feature-item:focus {
  background: rgba(168, 181, 160, 0.12);
  color: var(--charcoal);
  transform: translateX(8px) scale(1.02);
  border-color: rgba(168, 181, 160, 0.3);
  box-shadow: 0 6px 20px rgba(58, 53, 44, 0.12);
}

.community-features .feature-item:focus-visible {
  outline: 2px solid var(--sage-green);
  outline-offset: 2px;
}

.community-features .feature-item:active {
  transform: translateX(3px) scale(1.01);
}

.feature-icon {
  font-size: 1.2rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.community-features .feature-item:hover .feature-icon {
  color: var(--sage-green);
}

/* Growth Tree Visualization - In Feature Visual */
.feature-visual .community-tree-visualization {
  position: relative;
  height: 400px;
  width: 100%;
  background: transparent;
}

.growth-tree-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Foundation Label */
.foundation-label {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.foundation-text {
  color: var(--dark-taupe);
  font-size: 0.875rem;
  font-weight: 500;
  text-shadow: none;
  background: rgba(253, 249, 240, 0.9);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--light-taupe);
  box-shadow: var(--shadow-sm);
}

/* Tree Animation Keyframes */
@keyframes rootGrowth {
  0% {
    stroke-dasharray: 0 1000;
    opacity: 0;
  }
  100% {
    stroke-dasharray: 1000 0;
    opacity: 0.8;
  }
}

@keyframes branchGrowth {
  0% {
    stroke-dasharray: 0 1000;
    opacity: 0;
  }
  100% {
    stroke-dasharray: 1000 0;
    opacity: 1;
  }
}

@keyframes leafFadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes trunkGrowth {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 0.9;
  }
}

@keyframes trunkPulse {
  0%, 100% {
    transform: scaleY(1);
    opacity: 0.9;
  }
  50% {
    transform: scaleY(1.05);
    opacity: 1;
  }
}

@keyframes countUp {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

/* Enhanced animation for text-on-path labels */
@keyframes branchTextGlow {
  0% {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(2px);
  }
  30% {
    opacity: 0.5;
    transform: scale(1.1);
    filter: blur(1px);
  }
  60% {
    opacity: 0.8;
    transform: scale(0.95);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Legacy animation for compatibility */
@keyframes statLabelGlow {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sequential Animation Phases */

/* Phase 1: Foundation (0-2s) - Roots grow first */
.tree-roots .root {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: rootGrowth 1.5s ease-out forwards;
}

.tree-roots .root-1 { animation-delay: 0.3s; }
.tree-roots .root-2 { animation-delay: 0.6s; }
.tree-roots .root-3 { animation-delay: 0.9s; }
.tree-roots .root-4 { animation-delay: 1.2s; }

/* Phase 2: Community Growth (2-4s) - Trunk grows with counter */
.tree-trunk .trunk-base {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: trunkGrowth 2s ease-out forwards, trunkPulse 3s ease-in-out infinite;
  animation-delay: 2s, 4.5s;
}

.tree-trunk .trunk-highlight {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: trunkGrowth 2s ease-out forwards;
  animation-delay: 2.2s;
}

/* Phase 3: Services (4-6s) - Branches extend sequentially */
.tree-branches .branch {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: branchGrowth 1.2s ease-out forwards;
}

/* Left branches (Support & Guidance) */
.tree-branches .branch-support { animation-delay: 4.5s; }
.tree-branches .branch-mentorship { animation-delay: 5s; }

/* Right branches (Growth & Tools) */
.tree-branches .branch-mastery { animation-delay: 5.2s; }
.tree-branches .branch-strategies { animation-delay: 5.6s; }
.tree-branches .branch-network { animation-delay: 6s; }

/* Phase 4: Benefits (6-8s) - Leaves bloom by service cluster */
.tree-leaves .leaf {
  opacity: 0;
  transform-origin: center;
  animation: leafFadeIn 0.6s ease-out forwards;
}

/* 24/7 Peer Support Benefits */
.tree-leaves .support-leaf-1 { animation-delay: 6.2s; }
.tree-leaves .support-leaf-2 { animation-delay: 6.4s; }
.tree-leaves .support-leaf-3 { animation-delay: 6.6s; }

/* Expert Mentorship Benefits */
.tree-leaves .mentorship-leaf-1 { animation-delay: 6.8s; }
.tree-leaves .mentorship-leaf-2 { animation-delay: 7s; }
.tree-leaves .mentorship-leaf-3 { animation-delay: 7.2s; }

/* Platform Mastery Benefits */
.tree-leaves .mastery-leaf-1 { animation-delay: 7.4s; }
.tree-leaves .mastery-leaf-2 { animation-delay: 7.6s; }
.tree-leaves .mastery-leaf-3 { animation-delay: 7.8s; }

/* Success Strategies Benefits */
.tree-leaves .strategies-leaf-1 { animation-delay: 8s; }
.tree-leaves .strategies-leaf-2 { animation-delay: 8.2s; }
.tree-leaves .strategies-leaf-3 { animation-delay: 8.4s; }

/* Community Network Benefits */
.tree-leaves .network-leaf-1 { animation-delay: 8.6s; }
.tree-leaves .network-leaf-2 { animation-delay: 8.8s; }
.tree-leaves .network-leaf-3 { animation-delay: 9s; }

/* Label Animations */
.tree-stats .trunk-counter,
.tree-stats .trunk-label {
  opacity: 0;
  animation: statLabelGlow 0.8s ease-out forwards;
}

.tree-stats .trunk-label { animation-delay: 2.2s; }
.tree-stats .trunk-counter { animation-delay: 2.5s; }

.tree-stats .service-label {
  opacity: 0;
  animation: statLabelGlow 0.6s ease-out forwards;
}

/* Text-on-path branch label styling with enhanced integration */
.tree-stats .branch-text-group {
  opacity: 0;
  animation: branchTextGlow 0.8s ease-out forwards;
}

/* Staggered animation delays for organic appearance */
.tree-stats .support-group { animation-delay: 4.8s; }
.tree-stats .mentorship-group { animation-delay: 5.0s; }
.tree-stats .mastery-group { animation-delay: 5.2s; }
.tree-stats .strategies-group { animation-delay: 5.4s; }
.tree-stats .network-group { animation-delay: 5.6s; }

/* Service text styling with enhanced visibility and integration */
.service-text {
  font-family: var(--font-secondary);
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(0, 0, 0, 0.4),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8);
  letter-spacing: 0.03em;
  paint-order: stroke fill;
}

/* Enhanced shadows for strategies text on gold background */
.strategies-text {
  text-shadow: 
    0 1px 4px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 0, 0, 0.6),
    1px 1px 0 rgba(0, 0, 0, 0.9),
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    2px 2px 0 rgba(0, 0, 0, 0.8),
    -2px -2px 0 rgba(0, 0, 0, 0.8);
}

/* Text path positioning and flow */
.text-path {
  dominant-baseline: central;
  text-anchor: middle;
}

/* Branch stroke enhancement for better text integration */
.branch-with-text .branch {
  filter: drop-shadow(0 2px 4px rgba(58, 53, 44, 0.2));
  transition: all 0.3s ease;
}

/* Hover effects for better interactivity */
.branch-with-text:hover .branch {
  filter: drop-shadow(0 3px 6px rgba(58, 53, 44, 0.3));
  stroke-width: 22;
}

.branch-with-text:hover .service-text {
  text-shadow: 
    0 1px 4px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.9),
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9);
}

/* Legacy branch label styling for compatibility */
.branch-label-bg {
  filter: drop-shadow(0 1px 2px rgba(58, 53, 44, 0.15));
}

.service-label {
  font-family: var(--font-secondary);
  font-weight: 600;
}

/* Interactive Leaf Hover Tooltips */
.leaf-group {
  cursor: pointer;
}

.benefit-tooltip {
  pointer-events: none;
}

.tooltip-bg,
.tooltip-text {
  transition: opacity 0.2s ease-out;
}

/* Hover Effects */
.leaf-group:hover .leaf {
  transform: scale(1.2);
  transition: transform 0.2s ease-out;
}

.leaf-group:hover .tooltip-bg,
.leaf-group:hover .tooltip-text {
  opacity: 1;
}

/* Focus states for accessibility */
.leaf-group:focus-within .leaf {
  transform: scale(1.2);
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.leaf-group:focus-within .tooltip-bg,
.leaf-group:focus-within .tooltip-text {
  opacity: 1;
}

/* Enhanced tooltip styling */
.tooltip-bg {
  filter: drop-shadow(0 2px 4px rgba(58, 53, 44, 0.1));
}

.tooltip-text {
  font-family: var(--font-secondary);
  font-weight: 500;
}

/* Mobile Touch Support */
@media (hover: none) and (pointer: coarse) {
  .leaf-group {
    cursor: default;
  }
  
  .leaf-group:active .leaf {
    transform: scale(1.2);
  }
  
  .leaf-group:active .tooltip-bg,
  .leaf-group:active .tooltip-text {
    opacity: 1;
  }
}

/* Keyboard Navigation Support */
.leaf-group {
  outline: none;
}

.leaf-group:focus {
  outline: none;
}

.leaf {
  transition: transform 0.2s ease-out;
}

/* Motion Sensitivity Support */
@media (prefers-reduced-motion: reduce) {
  .tree-roots .root,
  .tree-branches .branch {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
  
  .tree-trunk .trunk-base {
    animation: none;
    opacity: 0.9;
  }
  
  .tree-leaves .leaf {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
  
  .tree-stats .stat-label,
  .tree-stats .stat-sublabel,
  .tree-stats .service-label,
  .tree-stats .branch-label-group,
  .tree-stats .branch-text-group {
    animation: none;
    opacity: 1;
  }
  
  .branch-with-text:hover .branch {
    transition: none;
  }
  
  .leaf-group:hover .leaf,
  .leaf-group:focus-within .leaf {
    transform: none;
    transition: none;
  }
  
  .tooltip-bg,
  .tooltip-text {
    transition: none;
  }
}

/* Responsive adjustments for tree */
@media (max-width: 768px) {
  .feature-visual .community-tree-visualization {
    height: 350px;
  }
  
  .feature-visual .tree-stats .stat-label {
    font-size: 14px;
  }
  
  .feature-visual .tree-stats .stat-sublabel {
    font-size: 10px;
  }
  
  /* Mobile optimizations for text-on-path labels */
  .service-text {
    font-size: 9px;
    font-weight: 600;
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.7),
      1px 1px 0 rgba(0, 0, 0, 0.9),
      -1px -1px 0 rgba(0, 0, 0, 0.9),
      1px -1px 0 rgba(0, 0, 0, 0.9),
      -1px 1px 0 rgba(0, 0, 0, 0.9);
  }
  
  /* Enhanced mobile shadows for strategies text */
  .strategies-text {
    text-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.8),
      1px 1px 0 rgba(0, 0, 0, 0.95),
      -1px -1px 0 rgba(0, 0, 0, 0.95),
      1px -1px 0 rgba(0, 0, 0, 0.95),
      -1px 1px 0 rgba(0, 0, 0, 0.95);
  }
  
  .branch-with-text .branch {
    stroke-width: 18;
  }
  
  .branch-with-text:hover .branch {
    stroke-width: 20;
  }
  
  /* Legacy tablet branch label support */
  .branch-label-bg {
    height: 12px;
  }
  
  .service-label {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .feature-visual .community-tree-visualization {
    height: 300px;
  }
  
  .feature-visual .foundation-text {
    font-size: 0.75rem;
  }
  
  /* Very small screens - ultra compact text-on-path */
  .service-text {
    font-size: 7px;
    font-weight: 600;
    text-shadow: 
      0 1px 1px rgba(0, 0, 0, 0.8),
      1px 1px 0 rgba(0, 0, 0, 0.9),
      -1px -1px 0 rgba(0, 0, 0, 0.9);
  }
  
  /* Enhanced micro shadows for strategies text */
  .strategies-text {
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.9),
      1px 1px 0 rgba(0, 0, 0, 0.95),
      -1px -1px 0 rgba(0, 0, 0, 0.95);
  }
  
  .branch-with-text .branch {
    stroke-width: 16;
  }
  
  .branch-with-text:hover .branch {
    stroke-width: 18;
  }
  
  /* Legacy mobile branch label support */
  .branch-label-bg {
    height: 10px;
    width: 60px;
  }
  
  .service-label {
    font-size: 8px;
  }
}

/* Right column wrapper for visual + CTA */
.community-right-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center; /* Center the button in the column */
}

.community-cta {
  display: inline-flex;
}

.community-visual {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  padding-left: var(--space-md);
  position: relative;
  width: 100%;
  min-height: 400px;
  /* Force visibility on screen */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
  background: rgba(253, 249, 240, 0.1);
  /* border: 1px solid rgba(168, 181, 160, 0.1); */
  /* border-radius: var(--radius-md); */
  /* CRITICAL: Prevent any transforms that move element out of view */
  transform: none !important;
  will-change: auto !important;
}

.community-showcase {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 450px;
  position: relative;
  /* Force showcase visibility */
  background: rgba(253, 249, 240, 0.5);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(168, 181, 160, 0.2);
  box-shadow: var(--shadow-md);
  margin: 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Loading and error states */
.community-loading,
.community-error {
  position: relative;
  margin: var(--space-lg) 0;
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 400px;
  width: 100%;
}

.community-loading {
  background: linear-gradient(135deg, var(--cream-white) 0%, var(--warm-white) 100%);
  border: 2px solid rgba(168, 181, 160, 0.3);
  color: var(--dark-taupe);
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.loading-spinner {
  animation: sparkRotate 1.5s linear infinite;
  font-size: 1.5rem;
  color: var(--spark-orange);
}

@keyframes sparkRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.community-error {
  background: linear-gradient(135deg, #ffeaea 0%, #ffe0e0 100%);
  border: 2px solid #ff6b6b;
  color: #c62828;
}

.error-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.error-retry {
  background: var(--spark-orange);
  color: white;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  margin-top: var(--space-sm);
}

.error-retry:hover,
.error-retry:focus {
  background: #ff5722;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  outline: none;
}

.error-retry:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.member-card {
  background: var(--cream-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-organic);
  display: flex !important;
  align-items: flex-start;
  gap: var(--space-md);
  transition: all var(--transition-normal);
  position: relative;
  cursor: pointer;
  outline-offset: 2px;
  /* Force visibility */
  opacity: 1 !important;
  visibility: visible !important;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-md);
}

/* Focus visible for member card (keyboard only) */
.member-card:focus-visible {
  outline: 3px solid var(--spark-orange);
  outline-offset: 3px;
}

.member-card:focus:not(:focus-visible) {
  outline: none;
}

.member-card:hover {
  transform: translateX(10px) scale(1.03);
  box-shadow:
    0 12px 30px rgba(58, 53, 44, 0.15),
    0 4px 8px rgba(255, 107, 53, 0.1);
  border-color: var(--spark-orange);
  background: linear-gradient(135deg, var(--warm-white) 0%, var(--cream-white) 100%);
}

.member-card:active {
  transform: translateX(4px) scale(1.01);
}

.member-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--dusty-rose) 0%, var(--warm-terracotta) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* Better positioning and accessibility */
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--warm-white);
}

.member-card:hover .member-avatar,
.member-card:focus-visible .member-avatar {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.member-content {
  flex: 1;
  /* Better text flow */
  min-width: 0;
}

.member-name {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 2px;
  /* Better text wrapping */
  word-wrap: break-word;
}

.member-platform {
  font-size: var(--font-size-label);
  color: var(--warm-gray);
  margin-bottom: var(--space-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-quote {
  margin: 0;
  padding: 0;
}

.member-quote p {
  font-size: var(--font-size-caption);
  color: var(--dark-taupe);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  /* Better quote styling */
  position: relative;
  padding-left: var(--space-sm);
}

.member-quote p::before {
  content: '"';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--spark-orange);
  font-size: 1.2em;
  font-weight: bold;
}

.member-tier {
  color: var(--platform-gold);
  font-size: 1.2rem;
  /* Better positioning */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  /* Add visual enhancement */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-fast);
}

.member-card:hover .member-tier,
.member-card:focus-visible .member-tier {
  transform: scale(1.2);
  text-shadow: 0 2px 4px rgba(255, 195, 60, 0.3);
}

/* Community to Growth Journey Section */
.community-to-growth {
  padding: var(--space-3xl) 0;
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
  position: relative;
  overflow: hidden;
}

.community-to-growth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(168, 181, 160, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.journey-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
  flex-wrap: wrap;
}

.journey-step {
  background: var(--cream-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
  max-width: 280px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.journey-step:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 12px 32px rgba(58, 53, 44, 0.15),
    0 4px 8px rgba(255, 107, 53, 0.1);
  border-color: var(--spark-orange);
}

.step-number {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: var(--spark-orange);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: var(--shadow-md);
}

.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-xs);
}

.step-description {
  color: var(--dark-taupe);
  line-height: 1.5;
  font-size: 0.9rem;
  text-align: center;
}

.step-icon {
  font-size: 2rem;
  margin-top: var(--space-sm);
  opacity: 0.8;
}

.journey-arrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--spark-orange);
}

.arrow-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--spark-orange) 0%, var(--medium-taupe) 100%);
  border-radius: 1px;
}

.arrow-spark {
  font-size: 1.5rem;
  color: var(--spark-orange);
  animation: sparkPulse 2s ease-in-out infinite;
}

@keyframes sparkPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.member-graduation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

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

.graduation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--spark-orange) 0%, var(--growth-green) 100%);
}

.graduation-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 12px 32px rgba(58, 53, 44, 0.15),
    0 4px 8px rgba(255, 107, 53, 0.1);
  border-color: var(--spark-orange);
}

.graduation-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--dusty-rose) 0%, var(--warm-terracotta) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--warm-white);
}

.graduation-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

.graduation-journey {
  color: var(--dark-taupe);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-left: var(--space-sm);
}

.graduation-journey::before {
  content: '"';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--spark-orange);
  font-size: 1.2em;
  font-weight: bold;
}

.graduation-progression {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.progress-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progress-badge.from {
  background: rgba(155, 150, 140, 0.2);
  color: var(--warm-gray);
  border: 1px solid var(--medium-taupe);
}

.progress-badge.to {
  background: rgba(255, 107, 53, 0.15);
  color: var(--spark-orange);
  border: 1px solid var(--spark-orange);
}

.progress-arrow {
  color: var(--spark-orange);
  font-weight: bold;
  font-size: 1.1rem;
}

.journey-cta {
  background: var(--cream-white);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  margin-top: var(--space-2xl);
  box-shadow: var(--shadow-organic);
  position: relative;
  overflow: hidden;
}

.journey-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--spark-orange) 0%, var(--growth-green) 50%, var(--trustworthy-teal) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.cta-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

.cta-description {
  color: var(--dark-taupe);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-note {
  color: var(--warm-gray);
  font-size: 0.875rem;
  margin-top: var(--space-md);
  font-style: italic;
}

/* Responsive Design for Community to Growth */
@media (max-width: 968px) {
  .journey-progression {
    flex-direction: column;
    gap: var(--space-xl);
  }
  
  .journey-arrow {
    transform: rotate(90deg);
  }
  
  .arrow-line {
    width: 2px;
    height: 40px;
  }
  
  .member-graduation {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .community-to-growth {
    padding: var(--space-2xl) 0;
  }
  
  .journey-step {
    max-width: 100%;
    padding: var(--space-lg);
    min-height: 150px;
  }
  
  .graduation-card {
    padding: var(--space-lg);
  }
  
  .journey-cta {
    padding: var(--space-xl);
  }
  
  .cta-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .graduation-progression {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .progress-arrow {
    transform: rotate(90deg);
  }
}


/* ==========================================================================
   FOOTER - Mobile-First Responsive Design
   Base styles are mobile, desktop styles preserved at 900px+
   ========================================================================== */

/* --- MOBILE BASE (default) --- */
.footer {
  background: var(--charcoal);
  color: var(--light-taupe);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand {
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--light-taupe);
  margin-bottom: var(--space-md);
}

.footer-logo .logo-image {
  height: 36px;
  width: auto;
}

.footer-description {
  color: var(--medium-taupe);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.social-link {
  width: 40px;
  height: 40px;
  background: var(--dark-taupe);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-taupe);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--spark-orange);
  transform: translateY(-2px);
}

/* Focus visible for social links (keyboard only) */
.social-link:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}
.social-link:focus:not(:focus-visible) {
  outline: none;
}

/* Hide all social links except Pinterest - keeping HTML intact for future use */
.footer-social .social-link[aria-label="Follow us on X (Twitter)"] {
  display: none;
}

.footer-social .social-link[aria-label="Follow us on Instagram"] {
  display: none;
}

.footer-social .social-link[aria-label="Connect on LinkedIn"] {
  display: none;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-lg);
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.footer-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--light-taupe);
  margin-bottom: var(--space-md);
}

.footer-link {
  color: var(--medium-taupe);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--spark-orange);
}

/* Focus visible for footer links (keyboard only) */
.footer-link:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}
.footer-link:focus:not(:focus-visible) {
  outline: none;
}

.footer-bottom {
  border-top: 1px solid var(--dark-taupe);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer-copyright {
  color: var(--medium-taupe);
  font-size: 0.9rem;
}

.footer-tagline {
  color: var(--medium-taupe);
  font-size: 0.9rem;
  font-style: italic;
}

/* --- TABLET (600px+) --- */
@media (min-width: 600px) {
  .footer-container {
    padding: 0 var(--space-lg);
  }

  .footer-brand {
    text-align: left;
  }

  .footer-logo {
    justify-content: flex-start;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-column {
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* --- DESKTOP (900px+) - Original desktop styles preserved --- */
@media (min-width: 900px) {
  .footer {
    padding: var(--space-3xl) 0 var(--space-lg);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-3xl);
  }

  .footer-brand {
    max-width: 300px;
  }

  .footer-links {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: var(--space-xs);
    align-items: center;
  }
}

/* ==========================================================================
   NON-TOUCH RESPONSIVE DESIGN
   Width-based breakpoints for non-touch devices (desktops, laptops).
   Also serves as fallback for touch devices at smaller widths.
   ========================================================================== */

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  :root {
    /* Spacing Scale - Tablet/Mobile */
    --space-xs: 0.25rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;

    /* Typography Scale - Tablet (768px) */
    --font-size-section-title: 2rem;
    --font-size-section-title-secondary: 1.75rem;
    --font-size-component-title: 1.35rem;
    --font-size-component-title-sm: 1.15rem;
    --font-size-cta-title: 1.5rem;
    --font-size-body-lg: 1.05rem;
    --font-size-body: 0.95rem;
    --font-size-body-sm: 0.9rem;
    --font-size-body-xs: 0.85rem;
    --font-size-caption: 0.825rem;
    --font-size-caption-sm: 0.75rem;
    --font-size-label: 0.7rem;
    --font-size-list-item: 0.9rem;
    --font-size-list-item-sm: 0.85rem;
    --font-size-badge: 0.7rem;
    --font-size-button: 0.95rem;
    --font-size-input: 1rem;

    /* Section & Component Spacing - Tablet */
    --section-padding-y: var(--space-2xl);
    --section-padding-x: var(--space-md);
    --component-padding: var(--space-lg);
    --component-padding-sm: var(--space-md);
    --component-gap: var(--space-lg);
    --component-gap-sm: var(--space-md);
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  /* Mobile reordering: title, visual, description, cta */
  .hero-content {
    display: contents; /* Children become direct grid items */
  }

  .hero-title {
    order: 1;
  }

  .hero-visual {
    order: 2;
  }

  .hero-description {
    order: 3;
  }

  .hero-cta {
    order: 4;
    flex-direction: column;
    align-items: center;
  }

  .visual-showcase {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .image-grid {
    flex-direction: row;
    justify-content: center;
  }

  /* .showcase-arrow {
    flex-direction: row;
  } */

  .arrow-line {
    width: 40px;
    height: 2px;
  }

  .feature-spotlight {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }
  
  .feature-spotlight.reverse {
    direction: ltr;
  }
  
  .community-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: left;
    min-height: auto;
  }
  
  .community-text {
    padding-right: 0;
    max-width: none;
    margin-bottom: var(--space-xl);
  }
  
  .community-visual {
    padding-left: 0;
    width: 100%;
    min-height: auto;
  }
  
  
  .community-showcase {
    max-width: 100%;
    padding: var(--space-md);
  }
  
  .community-stats {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 100%;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
  }
  
  .community-features {
    padding: var(--space-md);
    gap: var(--space-sm);
  }
  
  .community-features .feature-item {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .pain-points {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .problem-title {
    /* font-size now controlled by --font-size-section-title-secondary variable */
    margin-bottom: var(--space-lg);
  }

  .pain-point {
    padding: var(--component-padding);
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* Use Cases Responsive Layout */
@media (max-width: 768px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .use-case-card {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
  }
  
  .use-case-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }
  
  .stat-number {
    font-size: 1.25rem;
  }
  
  .use-case-results {
    padding-left: var(--space-sm);
  }
}

/* ==========================================================================
   MOBILE BREAKPOINT (480px) - Typography & Spacing Scale Overrides
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    /* Typography Scale - Mobile (480px) */
    --font-size-section-title: 1.65rem;
    --font-size-section-title-secondary: 1.45rem;
    --font-size-component-title: 1.2rem;
    --font-size-component-title-sm: 1.05rem;
    --font-size-cta-title: 1.3rem;
    --font-size-body-lg: 1rem;
    --font-size-body: 0.9rem;
    --font-size-body-sm: 0.85rem;
    --font-size-body-xs: 0.8rem;
    --font-size-caption: 0.8rem;
    --font-size-caption-sm: 0.7rem;
    --font-size-label: 0.65rem;
    --font-size-list-item: 0.85rem;
    --font-size-list-item-sm: 0.8rem;
    --font-size-badge: 0.65rem;
    --font-size-button: 0.9rem;
    --font-size-input: 1rem;

    /* Section & Component Spacing - Mobile */
    --section-padding-y: var(--space-xl);
    --section-padding-x: var(--space-sm);
    --component-padding: var(--space-md);
    --component-padding-sm: var(--space-sm);
    --component-gap: var(--space-md);
    --component-gap-sm: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .use-case-card {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  
  .use-case-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto var(--space-sm);
  }
  
  .use-case-content {
    text-align: center;
  }
  
  .use-case-title {
    text-align: center;
  }
  
  .use-case-description {
    text-align: center;
  }
  
  .use-case-platforms {
    justify-content: center;
  }
  
  .use-case-results {
    border-left: none;
    border-top: 1px solid var(--light-taupe);
    padding-left: 0;
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
  }
}

/* ==========================================================================
   HERO TITLE RESPONSIVE FONT SIZING (All Devices)
   ========================================================================== */
@media (max-width: 419px) {
  .hero-title {
    font-size: 2.09rem;
    line-height: 1.15;
  }
}

@media (min-width: 420px) and (max-width: 599px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 480px) {
  .section-title {
    /* font-size now controlled by --font-size-section-title variable */
    line-height: 1.3;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .steps-grid {
    grid-template-columns: 1fr;
  }
  
  .difference-grid {
    grid-template-columns: 1fr;
  }
  
  .community-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    text-align: center;
    padding: var(--space-sm);
    /* Ensure container width doesn't exceed parent */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .stat-item {
    padding: var(--space-xs);
    /* Ensure even small screens can fit 3 items */
    min-width: 0;
    font-size: 0.875rem;
  }
  
  .stat-item strong {
    font-size: 1.1rem;
  }
  
  .stat-item span {
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  .member-card {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }
  
  .member-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .member-name {
    font-size: 0.875rem;
  }
  
  .member-platform {
    font-size: 0.675rem;
  }
  
  .member-quote p {
    font-size: 0.75rem;
  }
  
  .problem-title {
    /* font-size controlled by --font-size-section-title-secondary variable */
    line-height: 1.2;
  }

  .pain-point {
    padding: var(--component-padding);
  }

  .pain-icon {
    font-size: 2.5rem;
  }

  .platform-showcase {
    width: 250px;
    height: 250px;
  }
  
  .output-item {
    width: 40px;
    height: 40px;
  }
  
  .central-image {
    width: 80px;
    height: 80px;
  }
  
  .before-after-slider {
    width: 100%;
    max-width: 250px;
    height: 150px;
    margin: 0 auto;
  }
  
  .visual-showcase {
    flex-direction: column;
    align-items: center;
  }

  .image-grid {
    flex-direction: row;
    justify-content: center;
    max-width: 200px;
  }
}

/* ===== CRITICAL FIXES AND OPTIMIZATIONS ===== */

/* Grid fallbacks for older browsers */
@supports not (display: grid) {
  .hero-container,
  .feature-spotlight,
  .community-content {
    display: flex;
    flex-wrap: wrap;
  }
  
  .steps-grid,
  .difference-grid,
  .pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .steps-grid > *,
  .difference-grid > *,
  .pricing-grid > * {
    flex: 1 1 300px;
    margin: var(--space-sm);
  }
}

/* Flexbox fallbacks */
@supports not (display: flex) {
  .nav-container,
  .hero-cta,
  .cta-buttons {
    display: block;
    text-align: center;
  }
  
  .btn-primary,
  .btn-secondary {
    display: inline-block;
    margin: var(--space-xs);
  }
  
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid var(--charcoal);
  }
  
  .btn-secondary {
    border: 2px solid var(--charcoal);
  }
}

/* Print styles */
@media print {
  .nav,
  .hero-visual {
    display: none;
  }
  
  .community-visual {
    display: block;
    page-break-inside: avoid;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* Ensure minimum touch targets for buttons only */
/* button,
.btn-primary,
.btn-secondary {
  min-width: 44px;
  min-height: 44px;
} */

/* Fix broken layout on very small screens */
@media (max-width: 320px) {
  .hero-cta {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    margin-bottom: var(--space-sm);
  }
  
}

/* Performance optimizations */
.btn-primary:not(:hover):not(:focus),
.btn-secondary:not(:hover):not(:focus),
.step-card:not(:hover):not(:focus),
.difference-card:not(:hover):not(:focus),
.pricing-card:not(:hover):not(:focus) {
  will-change: auto;
}

/* CRITICAL: Prevent stat-item overflow on all screen sizes */
@media (max-width: 320px) {
  .community-stats {
    grid-template-columns: 1fr !important;
    gap: var(--space-xs) !important;
    padding: var(--space-xs) !important;
  }
}

/* Additional safeguard for stat container */
.community-stats .stat-item:nth-child(3) {
  /* Ensure third stat item never overflows */
  grid-column: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================================
   Authentication Modals
   ============================================================================ */

.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

#signupModal .auth-modal-content {
  max-width: 480px;
}

#loginModal .auth-modal-content {
  max-width: 600px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-modal-content {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 50%;
  max-width: 730px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease-out;
}

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

.auth-modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--light-taupe);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-modal-header h2 {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--dark-taupe);
  margin: 0;
}

.auth-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--medium-taupe);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.auth-modal-close:hover {
  background: var(--soft-beige);
  color: var(--dark-taupe);
}

/* Focus visible for modal close button (keyboard only) */
.auth-modal-close:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.auth-modal-close:focus:not(:focus-visible) {
  outline: none;
}

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

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

.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.auth-form-group label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--dark-taupe);
}

.auth-form-group input {
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--light-taupe);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: all var(--transition-fast);
  background: white;
}

.auth-form-group input:focus {
  outline: none;
  border-color: var(--spark-orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 51, 0.1);
}

.auth-form-group input::placeholder {
  color: var(--medium-taupe);
}

.auth-error {
  display: none;
  padding: var(--space-sm) var(--space-md);
  background: #fee;
  border: 1px solid #fcc;
  border-radius: var(--radius-md);
  color: #c33;
  font-size: 0.9rem;
  font-family: var(--font-primary);
}

/*.auth-submit-btn {
  background: var(--spark-orange);
  color: white;
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-sm);
}

.auth-submit-btn:hover {
  background: #ff4f17;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}*/

.auth-submit-btn {
  /* background: linear-gradient(135deg, var(--spark-orange) 0%, #FF8A5C 100%);
  background: var(--spark-orange);
  color: white;
  border: none;
  padding: var(--space-md) var(--space-lg); */
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  /* transition: all var(--transition-normal); */
  box-shadow: var(--shadow-sm);

  background: var(--spark-orange);
  border: 2px solid var(--spark-orange);
  color: white;
  padding: var(--space-sm);
  transition: all var(--transition-normal);
}

.auth-submit-btn:hover {
  /* transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); */

  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  /* background: transparent;
  color: var(--spark-orange);
  border: 2px solid var(--spark-orange); */
}

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

/* Focus visible for auth submit button (keyboard only) */
.auth-submit-btn:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.auth-submit-btn:focus:not(:focus-visible) {
  outline: none;
}

/* Form checkbox styling (matches .compare-checkbox) */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--medium-taupe);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: var(--cream-white);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.form-checkbox input[type="checkbox"]:hover {
  border-color: var(--spark-orange);
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1);
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--spark-orange);
  border-color: var(--spark-orange);
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 14px;
  font-weight: bold;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.form-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

/* .form-checkbox label {
  cursor: pointer;
  user-select: none;
} */

.auth-divider {
  text-align: center;
  margin: var(--space-md) 0;
  color: var(--medium-taupe);
  font-size: 0.9rem;
  position: relative;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--light-taupe);
}

.auth-divider::before {
  left: 0;
}

.auth-divider::after {
  right: 0;
}

.auth-switch {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 0.9rem;
  color: var(--medium-taupe);
}

.auth-switch a {
  color: var(--spark-orange);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.auth-switch a:hover {
  color: #ff4f17;
  text-decoration: underline;
}

/* Form helper (for checkboxes and links) */
.form-helper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Form checkbox styling */
/* .form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
} */

/* .form-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--medium-taupe);
  border-radius: var(--radius-xs);
  cursor: pointer;
  position: relative;
  background: var(--cream-white);
  transition: all var(--transition-fast);
  flex-shrink: 0;
} */

/* .form-checkbox input[type="checkbox"]:hover {
  border-color: var(--spark-orange);
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1);
} */

/* .form-checkbox input[type="checkbox"]:checked {
  background: var(--spark-orange);
  border-color: var(--spark-orange);
} */

/* .form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 14px;
  font-weight: bold;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
} */

/* .form-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
} */

.form-checkbox input[type="checkbox"]:focus:not(:focus-visible) {
  outline: none;
}

.form-checkbox label {
  font-size: 0.9rem;
  color: var(--dark-taupe);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-secondary);
}

/* Terms link styling - matches .legal-section a from terms.css */
.terms-link {
  color: var(--spark-orange);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.terms-link:hover {
  text-decoration: underline;
}

/* Focus visible for terms link (keyboard only) */
.terms-link:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.terms-link:focus:not(:focus-visible) {
  outline: none;
}

/* Form link (forgot password, etc.) */
.form-link {
  color: var(--spark-orange);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition-fast);
  font-family: var(--font-secondary);
}

.form-link:hover {
  color: #ff4f17;
  text-decoration: underline;
}

.form-link:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.form-link:focus:not(:focus-visible) {
  outline: none;
}

/* Form divider */
.form-divider {
  text-align: center;
  color: var(--medium-taupe);
  font-size: 0.9rem;
  position: relative;
  font-family: var(--font-secondary);
}

.form-divider::before,
.form-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(47% - 70px);
  height: 1px;
  background: var(--soft-beige);
}

.form-divider::before {
  left: 0;
}

.form-divider::after {
  right: 0;
}

/* Social buttons */
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--soft-beige);
  border-radius: var(--radius-md);
  background: white;
  color: var(--dark-taupe);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-secondary);
}

.social-btn:hover {
  background: var(--soft-beige);
  border-color: var(--medium-taupe);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

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

.social-btn:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
}

.social-btn:focus:not(:focus-visible) {
  outline: none;
}

.social-btn svg {
  flex-shrink: 0;
}

/* Auth modal scrollbar - aligned with container */
.auth-modal-content::-webkit-scrollbar {
  width: 6px;
}

.auth-modal-content::-webkit-scrollbar-track {
  background: var(--soft-beige);
  border-radius: var(--radius-xl);
  margin: 1.3rem 0; /* Keeps scrollbar inside rounded corners */
}

.auth-modal-content::-webkit-scrollbar-thumb {
  /* background: var(--medium-taupe); */
  background: #d4cfc5ad;
  border-radius: var(--radius-sm);
}

.auth-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--warm-gray);
}

/* Password Field Enhancements (Modern 2025 Standards) */
.password-field {
  position: relative;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  padding-right: 45px;
  width: 100%;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--medium-taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--dark-taupe);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--spark-orange);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.password-toggle:focus:not(:focus-visible) {
  outline: none;
}

/* Password Strength Indicator */
.password-strength-indicator {
  height: 4px;
  background: var(--soft-beige);
  border-radius: var(--radius-full);
  margin-top: var(--space-xs);
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  width: 0%;
  background: var(--innovation-coral);
  transition: all 0.3s ease;
  border-radius: var(--radius-full);
}

/* Password Requirements */
.password-requirements {
  font-size: 0.85rem;
  color: var(--medium-taupe);
  margin-top: var(--space-xs);
}

.requirement {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}

.requirement-icon {
  font-size: 1rem;
  color: var(--warm-gray);
  font-weight: bold;
}

/* Social Button Primary (Google) */
.social-btn-primary {
  background: var(--charcoal);
  border: 2px solid var(--charcoal);
  border-width: 2px;
  color: #fff;
}

.social-btn-primary:hover {
  /* color: var(--dark-taupe); */
  background: var(--charcoal);
  border: 2px solid var(--charcoal);
}

/* Two-column layout for form fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.form-row .form-group,
.form-row .auth-form-group {
  margin-bottom: 0;
}

/* Stack to single column on mobile */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .form-row .form-group,
  .form-row .auth-form-group {
    margin-bottom: var(--space-sm);
  }

  .form-row .form-group:last-child,
  .form-row .auth-form-group:last-child {
    margin-bottom: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .auth-modal-content {
    max-width: none;
  }

  .auth-modal-header h2 {
    font-size: 1.5rem;
  }

  .auth-modal-header,
  .auth-modal-body {
    padding: var(--space-md);
  }
}

@media (max-width: 1221px) {
  .auth-modal-content {
    width: 95%;
  }
}

/* ============================================ */
/* PHASE 3: ALTERNATIVE PROOF SECTIONS */
/* ============================================ */

/* Before/After Visual Proof */
.before-after-proof {
  padding: var(--space-3xl) 0;
  background: linear-gradient(to bottom, var(--cream-white), white);
}

/* Carousel Wrapper */
.proof-carousel-wrapper {
  position: relative;
  margin-top: var(--space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Carousel Arrows - Positioned outside the carousel */
.proof-arrow-left {
  left: -60px;
}

.proof-arrow-right {
  right: -60px;
}

/* Carousel Dots Navigation (Hidden on Desktop) */
.proof-carousel-dots {
  display: none;
}

/* Carousel Grid - Show only one card at a time */
.proof-comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  min-height: 500px; /* Fixed minimum height to prevent layout shift */
}

/* Card Design - Match Dashboard Pattern with FIXED dimensions */
.proof-comparison-card {
  background: white;
  border: 1px solid var(--light-taupe);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-organic);
  /* Remove transition to avoid conflict with animation */
  position: absolute;
  width: 100%;
  min-height: 500px; /* Fixed minimum height */
  opacity: 0;
  pointer-events: none;
  margin: auto;
}

.proof-comparison-card.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.proof-comparison-card.active:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Image Comparison Section */
.proof-comparison-images {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-lg);
}

.proof-image-container {
  position: relative;
}

.proof-image-placeholder {
  background: var(--soft-beige);
  border: 1px solid var(--light-taupe);
  border-radius: var(--radius-md);
  aspect-ratio: 5 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

/* Proof images: fill container without affecting dimensions */
.proof-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.proof-image-container.before .proof-image-placeholder {
  border-color: var(--medium-taupe);
  background: var(--cream-white);
}

.proof-image-container.after .proof-image-placeholder {
  border-color: var(--growth-green);
  background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e9 100%);
}

.proof-image-placeholder .label {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.proof-image-placeholder .image-text {
  font-size: 0.9rem;
  color: var(--medium-taupe);
  font-weight: 500;
  text-align: center;
}

/* Arrow */
.comparison-arrow {
  font-size: 1.75rem;
  color: var(--warm-terracotta);
  font-weight: 700;
  opacity: 0.8;
}

/* Slider Handle (Hidden on Desktop) */
.proof-slider-handle {
  display: none;
}

/* Details Section */
.proof-details {
  padding-top: var(--space-md);
  border-top: 1px solid var(--light-taupe);
}

.proof-product-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.proof-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Clean insight text - no backgrounds for regular items */
.insight-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dark-taupe);
  margin: 0;
}

.insight-text strong {
  color: var(--warm-terracotta);
  font-weight: 600;
}

/* Highlight only the KEY metric */
.insight-highlight {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: linear-gradient(135deg, #FFF8E7 0%, #F5E6D3 100%);
  border-left: 3px solid var(--wheat-gold);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.insight-highlight strong {
  color: var(--platform-gold);
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 1100px) {
  .proof-carousel-wrapper {
    max-width: 700px;
  }

  .proof-arrow-left,
  .proof-arrow-right {
    left: auto;
    right: auto;
  }

  .proof-arrow-left {
    left: -36px;
  }

  .proof-arrow-right {
    right: -36px;
  }
}

@media (max-width: 768px) {
  /* === Before/After Slider Mode for Mobile === */
  .proof-comparison-images {
    display: block;
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--radius-md);
    /* Allow vertical scroll when touching images (not slider handle) */
    touch-action: pan-y;
  }

  /* Block ALL touch actions ONLY during active slider drag */
  .proof-comparison-images.dragging {
    touch-action: none;
  }

  /* Hide the arrow in slider mode */
  .proof-comparison-images .comparison-arrow {
    display: none;
  }

  /* Both containers overlay each other */
  .proof-comparison-images .proof-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .proof-comparison-images .proof-image-container .proof-image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
  }

  /* Before image: full width, underneath */
  .proof-comparison-images .proof-image-container.before {
    z-index: 1;
  }

  /* After image: clipped from left based on slider position */
  .proof-comparison-images .proof-image-container.after {
    z-index: 2;
    clip-path: inset(0 0 0 var(--slider-position, 50%));
  }

  /* Slider Handle */
  .proof-slider-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slider-position, 50%);
    transform: translateX(-50%);
    z-index: 10;
    cursor: ew-resize;
    touch-action: none;
  }

  /* Vertical Line */
  .proof-slider-line {
    width: 3px;
    height: 100%;
    background: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  }

  /* Grip Handle (Circle with arrows) */
  .proof-slider-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }

  .proof-slider-grip .grip-arrow {
    font-size: 1rem;
    font-weight: 700;
    color: var(--warm-terracotta);
    line-height: 1;
  }

  /* Label positioning: Before on left, After on right */
  .proof-comparison-images .proof-image-container.before .proof-image-placeholder .label {
    left: var(--space-sm);
    right: auto;
  }

  .proof-comparison-images .proof-image-container.after .proof-image-placeholder .label {
    left: auto;
    right: var(--space-sm);
  }

  /* Label transitions for smooth hide/show during drag */
  .proof-comparison-images .proof-image-placeholder .label {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  /* Hide labels while dragging */
  .proof-comparison-images.dragging .proof-image-placeholder .label {
    opacity: 0;
    transform: scale(0.9);
  }

  /* Adjust card min-height for slider mode */
  .proof-comparison-card {
    min-height: auto;
    margin: unset;
  }

  .proof-carousel-wrapper {
    max-width: 100%;
  }

  /* === Mobile Carousel: Hide Arrows, Show Dots + Swipe === */

  /* Hide arrow buttons on mobile */
  .proof-arrow-left,
  .proof-arrow-right {
    display: none;
  }

  /* Show dots navigation */
  .proof-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    margin-top: var(--space-sm);
  }

  /* Individual dot button */
  .proof-dot {
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    border: 2px solid var(--medium-taupe);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .proof-dot:hover {
    border-color: var(--warm-terracotta);
    background: rgba(255, 121, 85, 0.2);
  }

  .proof-dot:focus-visible {
    outline: 2px solid var(--spark-orange);
    outline-offset: 2px;
  }

  /* Active dot */
  .proof-dot.active {
    background: var(--growth-green);
    border-color: var(--growth-green);
    transform: scale(1.2);
  }

  /* === Horizontal Swipe Carousel for Mobile === */

  /* Parent container: clips horizontally + padding for shadow space */
  .before-after-proof .section-container {
    overflow-x: clip;
    overflow-y: visible;
    /* Padding creates shadow space INSIDE the clip boundary */
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  /* Wrapper: NO width changes - shadows extend into parent's padding */
  .proof-carousel-wrapper {
    overflow: visible;
  }

  /* Grid becomes horizontal flex container */
  .proof-comparison-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-3xl); /* Gap between cards */
    overflow: visible;
    position: relative;
    min-height: auto; /* Override desktop fixed height */
    /* Allow both horizontal swipe (JS-handled) and vertical scroll (native) */
    touch-action: auto;
    /* Transform controlled by JS via CSS variable */
    transform: translateX(var(--carousel-offset, 0px));
    /* Snap transition - disabled during drag via .dragging class */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  /* Disable transition during active drag for instant response */
  .proof-comparison-grid.dragging {
    transition: none;
    cursor: grabbing;
  }

  /* Lock horizontal swipe when gesture is confirmed horizontal */
  .proof-comparison-grid.swiping-horizontal {
    touch-action: pan-x;
  }

  /* ALL cards visible and properly sized - MAXIMUM SPECIFICITY */
  .proof-carousel-wrapper .proof-comparison-grid .proof-comparison-card,
  .proof-carousel-wrapper .proof-comparison-grid .proof-comparison-card.active {
    /* Flex properties - prevent shrinking/collapsing */
    flex: 0 0 100%;
    flex-shrink: 0;
    flex-grow: 0;
    /* Explicit sizing */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    /* Override desktop absolute positioning */
    position: relative;
    /* CRITICAL: Force visibility - opacity controlled by JS based on position */
    visibility: visible;
    display: block;
    /* Override desktop pointer-events */
    pointer-events: auto;
    /* Override desktop fixed height */
    min-height: auto;
    /* Ensure proper stacking */
    z-index: 1;
    /* Smooth opacity transition during snap animation */
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Disable opacity transition during drag for instant response */
  .proof-comparison-grid.dragging .proof-comparison-card {
    transition: none;
  }

  /* Disable hover transform during carousel mode */
  .proof-carousel-wrapper .proof-comparison-grid .proof-comparison-card.active:hover {
    transform: none;
  }
}

/* Why It Works (Educational Authority) */
.why-it-works-education {
  padding: var(--space-3xl) 0;
  background: linear-gradient(to bottom, var(--soft-beige), var(--cream-white));
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--component-gap-sm);
  margin-top: var(--space-xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.principle-card {
  background: white;
  padding: var(--component-padding);
  border: 1px solid var(--light-taupe);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

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

/* Header Section (Button for accordion on mobile) */
.principle-header {
  /* Button reset */
  width: 100%;
  background: transparent;
  border: none;
  cursor: default; /* No pointer on desktop */
  font-family: inherit;
  /* Visual styles */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-lg);
  padding: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--light-taupe);
}

/* Toggle Icon (Hidden on Desktop) */
.principle-toggle-icon {
  display: none;
}

/* Body Section */
.principle-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.principle-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.principle-card:nth-child(1) .principle-icon {
  background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
  color: var(--warm-terracotta);
}

.principle-card:nth-child(2) .principle-icon {
  background: linear-gradient(135deg, #F0F9F0 0%, #E0F2E0 100%);
  color: var(--growth-green);
}

.principle-card:nth-child(3) .principle-icon {
  background: linear-gradient(135deg, #FFF8E7 0%, #FFF0D3 100%);
  color: var(--platform-gold);
}

.principle-title {
  font-size: var(--font-size-body-lg);
  font-weight: 600;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.4;
  min-height: 3.08rem;
}

.title-subtitle {
  display: block;
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: var(--dark-taupe);
  margin-top: 0.25rem;
}

.principle-description {
  font-size: var(--font-size-body-sm);
  color: var(--dark-taupe);
  line-height: 1.7;
  margin-bottom: var(--space-md);
  flex: 1;
}

.principle-example {
  background: var(--soft-beige);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: auto;
  border-left: 3px solid var(--warm-terracotta);
  font-size: var(--font-size-body-xs);
  line-height: 1.6;
}

.principle-card:nth-child(1) .principle-example {
  border-left-color: var(--warm-terracotta);
}

.principle-card:nth-child(2) .principle-example {
  border-left-color: var(--growth-green);
}

.principle-card:nth-child(3) .principle-example {
  border-left-color: var(--platform-gold);
}

.example-label {
  color: var(--charcoal);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.example-content {
  color: var(--dark-taupe);
}

.example-list {
  margin: var(--space-sm) 0 0 0;
  padding-left: var(--space-md);
  list-style: none;
}

.example-list li {
  position: relative;
  padding-left: var(--space-sm);
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--dark-taupe);
  line-height: 1.5;
}

.example-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--warm-terracotta);
  font-weight: 700;
}

.example-list li strong {
  display: inline;
  color: var(--charcoal);
  font-weight: 600;
}

/* Responsive Design for Principles */
@media (max-width: 1024px) {
  .principles-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .principle-card {
    min-height: auto;
    overflow: hidden;
  }

  .principle-title {
    min-height: auto;
  }

  /* === Accordion Behavior for Mobile/Tablet === */

  /* Header becomes clickable accordion trigger */
  .principle-header {
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-bottom: 0;
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: background-color var(--transition-fast);
  }

  .principle-header:hover {
    background: var(--warm-white);
  }

  .principle-header:focus-visible {
    outline: 2px solid var(--spark-orange);
    outline-offset: -2px;
  }

  /* Icon adjustments for horizontal layout */
  .principle-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  /* Title takes remaining space */
  .principle-title {
    flex: 1;
    margin: 0;
  }

  /* Show toggle icon on mobile/tablet */
  .principle-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--warm-terracotta);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
  }

  /* Rotate toggle icon when expanded */
  .principle-header[aria-expanded="true"] .principle-toggle-icon {
    transform: rotate(45deg);
  }

  /* Body becomes collapsible */
  .principle-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0 var(--space-md);
  }

  /* Expanded state */
  .principle-header[aria-expanded="true"] + .principle-body {
    max-height: 1000px;
    padding: var(--space-md);
    padding-top: 0;
    border-top: 1px solid var(--light-taupe);
  }

  /* Adjust description spacing when expanded */
  .principle-header[aria-expanded="true"] + .principle-body .principle-description {
    padding-top: var(--space-md);
  }
}

/* What Makes SellSpark Different (Comparison Table) */
.differentiation-section {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: white;
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
}

.comparison-table-wrapper {
  margin-top: var(--space-xl);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.differentiation-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: var(--font-size-body-xs);
}

.differentiation-table thead {
  background: linear-gradient(135deg, var(--charcoal), #424242);
}

.differentiation-table th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  color: white;
  font-weight: 600;
  font-size: var(--font-size-body);
}

.differentiation-table tbody tr {
  border-bottom: 1px solid var(--light-taupe);
  transition: background-color var(--transition-fast);
}

.differentiation-table tbody tr:hover {
  /* background: var(--soft-beige); */
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
}

.differentiation-table tbody tr:last-child {
  border-bottom: none;
}

.differentiation-table td {
  padding: var(--space-lg);
  vertical-align: top;
}

.approach-cell {
  font-weight: 600;
  color: var(--charcoal);
  width: 20%;
}

.approach-cell strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-body);
}

.approach-subtitle {
  font-size: var(--font-size-caption);
  font-weight: 400;
  color: var(--mediumdark-taupe);
}

.problem-cell {
  background: #FFF3E0;
  width: 40%;
}

.solution-cell {
  background: #E8F5E9;
  width: 40%;
}

.problem-list,
.solution-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem-list li,
.solution-list li {
  padding: 6px 0;
  line-height: 1.5;
  position: relative;
  padding-left: var(--space-md);
}

.problem-list li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #D32F2F;
  font-weight: 700;
}

.solution-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--growth-green);
  font-weight: 700;
}

/* Differentiation CTA */
.differentiation-cta {
  text-align: center;
  /* margin-top: var(--space-2xl); */
  /* padding: var(--space-xl); '/
  /* background: linear-gradient(135deg, var(--soft-beige), var(--cream-white));
  background: var(--cream-white); */
  border-radius: var(--radius-lg);
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); */
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg, 
    var(--soft-beige) 0%, 
    var(--warm-white) 50%, 
    var(--cream-white) 100%
  );
  /* Remove the solid cream-white override */

  border: 2px solid rgba(168, 181, 160, 0.25);
  /* Replace current no border */

  box-shadow: 0 8px 32px rgba(58, 53, 44, 0.12), 
              0 4px 16px rgba(168, 181, 160, 0.08);
  /* Replace current: 0 4px 16px rgba(0, 0, 0, 0.08) */

  margin-top: calc(var(--space-3xl) + var(--space-2xl));
  padding: var(--space-2xl) var(--space-xl); /* from var(--space-xl) */
  margin-bottom: var(--space-xl); /* Add bottom margin */
}

/* .differentiation-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--spark-orange) 0%, var(--growth-green) 50%, var(--trustworthy-teal) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
} */

.differentiation-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--spark-orange) 0%, 
    var(--growth-green) 50%, 
    var(--spark-orange) 100%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.differentiation-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(212, 165, 160, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 181, 160, 0.04) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--radius-lg);
  z-index: 0;
}

.differentiation-cta > * {
  position: relative;
  z-index: 1;
}

.differentiation-cta h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.differentiation-cta > p {
  font-size: 1.1rem;
  color: var(--dark-taupe);
  margin-bottom: var(--space-lg);
}

.guarantee-text {
  font-size: 0.9rem !important;
  color: var(--mediumdark-taupe) !important;
  margin-top: var(--space-md);
  font-style: italic;
}

/* Responsive Design for Phase 3 Sections */
@media (max-width: 1024px) {
  .demo-workflow-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
  }

  .principles-grid {
    grid-template-columns: 1fr;
  }

  .comparison-table-wrapper {
    overflow-x: scroll;
  }

  .differentiation-table {
    min-width: 800px;
  }
}

@media (max-width: 768px) {
  .demo-workflow-grid {
    grid-template-columns: 1fr;
  }

  /* proof-comparison-images slider styles defined earlier in file */

  .differentiation-table th,
  .differentiation-table td {
    padding: var(--space-sm);
    font-size: 0.85rem;
  }

  .approach-cell {
    width: 25%;
  }

  .problem-cell,
  .solution-cell {
    width: 37.5%;
  }
}

@media (max-width: 480px) {
  .see-it-in-action,
  .before-after-proof,
  .why-it-works-education,
  .differentiation-section {
    padding: var(--space-xl) 0;
  }

  .demo-step {
    padding: var(--space-md);
  }

  .comparison-card {
    padding: var(--space-md);
  }

  .principle-card {
    padding: var(--space-lg);
  }

  .differentiation-cta h3 {
    font-size: 1.4rem;
  }

  .differentiation-cta > p {
    font-size: 1rem;
  }
}

/* ============================================================================
   FAQ SECTION (Phase 5)
   ============================================================================ */

.faq-section {
  padding: var(--section-padding-y) var(--section-padding-x);
  padding-bottom: 0;
  background: linear-gradient(to bottom, white, var(--cream-white));
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--component-gap-sm);
  margin-top: var(--space-xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  align-items: start; /* Prevent grid cells from stretching to match tallest item in row */
}

.faq-item {
  background: white;
  border: 1px solid var(--light-taupe);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
  overflow: hidden;
  max-height: fit-content;
}

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

.faq-question {
  width: 100%;
  text-align: left;
  background: white;
  border: none;
  padding: var(--component-padding-sm) var(--space-md);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: background-color var(--transition-normal);
}

.faq-question:hover {
  background: var(--soft-beige);
}

.faq-question:focus {
  outline: 2px solid var(--warm-terracotta);
  outline-offset: -2px;
}

.faq-question-text {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.5;
  flex: 1;
}

.faq-icon {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--warm-terracotta);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--soft-beige) 0%, var(--light-taupe) 100%);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 var(--space-lg);
}

.faq-question[aria-expanded="true"] + .faq-answer {
  max-height: 1000px;
  padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg);
}

.faq-answer p {
  font-size: var(--font-size-body-sm);
  color: var(--dark-taupe);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer strong {
  color: var(--charcoal);
  font-weight: 600;
}

.faq-answer a {
  color: var(--spark-orange);
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
}

.faq-answer ul {
  list-style: none;
  padding-left: 0;
  margin: var(--space-sm) 0 var(--space-md) 0;
}

.faq-answer ul li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: 0.95rem;
  color: var(--dark-taupe);
  line-height: 1.6;
}

.faq-answer ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--growth-green);
  font-weight: 700;
  font-size: 1rem;
}

/* Responsive Design for FAQ */
@media (max-width: 1024px) {
  .faq-grid {
    grid-template-columns: 1fr;
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: var(--space-2xl) 0;
  }

  .faq-question {
    padding: var(--space-md);
  }

  .faq-question-text {
    font-size: 1rem;
  }

  .faq-icon {
    font-size: 1.5rem;
    width: 28px;
    height: 28px;
  }

  .faq-answer {
    padding: 0 var(--space-md);
  }

  .faq-question[aria-expanded="true"] + .faq-answer {
    padding: var(--space-sm) var(--space-md) var(--space-md) var(--space-md);
  }

  .faq-answer p,
  .faq-answer ul li {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .faq-grid {
    gap: var(--space-md);
  }

  .faq-question {
    padding: var(--space-sm) var(--space-md);
  }

  .faq-question-text {
    font-size: 0.95rem;
  }
}

/* ============================================================================
   FINAL CTA SECTION
   ============================================================================ */

.final-cta-section {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: linear-gradient(to bottom, var(--cream-white), white);
}

/* Final CTA - Matches .differentiation-cta pattern exactly */
.final-cta {
  text-align: center;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg,
    var(--soft-beige) 0%,
    var(--warm-white) 50%,
    var(--cream-white) 100%
  );

  border: 2px solid rgba(168, 181, 160, 0.25);

  box-shadow: 0 8px 32px rgba(58, 53, 44, 0.12),
              0 4px 16px rgba(168, 181, 160, 0.08);

  /* margin-top: var(--space-3xl); */
  padding: var(--component-padding);
  margin-bottom: var(--space-xl);
}

/* Top gradient accent bar */
.final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--spark-orange) 0%,
    var(--growth-green) 50%,
    var(--spark-orange) 100%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Subtle radial gradient overlay */
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 165, 160, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 181, 160, 0.04) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--radius-lg);
  z-index: 0;
}

/* Ensure content sits above pseudo-elements */
.final-cta > * {
  position: relative;
  z-index: 1;
}

.final-cta h3 {
  font-size: var(--font-size-cta-title);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.final-cta > p {
  font-size: var(--font-size-body-lg);
  color: var(--dark-taupe);
  margin-bottom: var(--space-lg);
}

.final-cta .guarantee-text {
  font-size: var(--font-size-body-xs) !important;
  color: var(--mediumdark-taupe) !important;
  margin-top: var(--space-md);
  font-style: italic;
}

/* ============================================================================

/* ============================================================================
   TECHNICAL OPTIMIZATION SECTION (Accordion Pattern)
   ============================================================================ */

.technical-optimization-section {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: linear-gradient(135deg, var(--cream-white) 0%, var(--warm-white) 100%);
  background: linear-gradient(to bottom, var(--warm-white), var(--light-taupe));
}

.optimization-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--component-gap-sm);
  margin-bottom: var(--space-3xl);
}

.optimization-card {
  background: white;
  border: 1px solid var(--light-taupe);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-organic);
  transition: all var(--transition-normal);
  overflow: hidden;
  max-height: fit-content;
}

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

/* Card Header (Button - Matches FAQ) */
.optimization-card-header {
  width: 100%;
  text-align: left;
  background: white;
  border: none;
  padding: var(--component-padding);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  transition: background-color var(--transition-normal);
}

.optimization-card-header:hover {
  /* background: var(--soft-beige); */
  background: var(--warm-white);
}

.optimization-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.optimization-header-content {
  flex: 1;
  min-width: 0;
}

.optimization-title {
  font-size: var(--font-size-component-title-sm);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.optimization-card-header .optimization-summary {
  background: var(--soft-beige);
  font-size: var(--font-size-body-sm);
  color: var(--dark-taupe);
  line-height: 1.5;
  margin: 0;

  border: 2px solid var(--light-taupe);
  margin-top: var(--space-sm);
  padding: var(--component-padding) var(--component-padding-sm);
  transition: background var(--transition-normal);
}

.optimization-card-header:hover .optimization-summary {
  background: #ffffff70;
}

/* Toggle Icon (Matches FAQ exactly) */
.optimization-toggle-icon {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--warm-terracotta);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.optimization-card-header[aria-expanded="true"] .optimization-toggle-icon {
  transform: rotate(45deg);
}

/* Details Section (Collapsible - Matches FAQ Pattern) */
.optimization-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              margin-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 var(--space-lg);
}

/* Expanded state - using aria-expanded on header button */
.optimization-card-header[aria-expanded="true"] + .optimization-details {
  max-height: 3000px;
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  margin-top: var(--space-sm);
}

/* Details Content Styling */
.optimization-description {
  font-size: var(--font-size-body-sm);
  color: var(--dark-taupe);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.optimization-description strong {
  color: var(--charcoal);
  font-weight: 600;
}

.optimization-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--soft-beige);
  border-radius: var(--radius-sm);
}

.benefit-item {
  border: 2px solid var(--medium-taupe);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: auto 1fr 2fr;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--dark-taupe);
  line-height: 1.6;
  padding: var(--space-xs) var(--space-sm);
}

.benefit-icon {
  color: var(--growth-green);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-item strong {
  color: var(--charcoal);
  font-weight: 600;
}

.benefit-item strong span {
  font-weight: normal;
}

.optimization-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--soft-beige);
  border-radius: var(--radius-sm);
}

.comparison-item {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: white;
  border: 2px solid var(--light-taupe);
  text-align: center;
}

.comparison-item.competitor {
  border-color: var(--dusty-rose);
}

.comparison-item.sellspark {
  border-color: var(--growth-green);
}

.comparison-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.comparison-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-xs);
}

.comparison-result {
  font-size: 0.85rem;
  font-weight: 500;
}

.optimization-workflow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--soft-beige);
  border-radius: var(--radius-sm);
}

.workflow-step {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: white;
  border: 2px solid var(--light-taupe);
}

.workflow-step.competitor-workflow {
  border-color: var(--dusty-rose);
}

.workflow-step.sellspark-workflow {
  border-color: var(--growth-green);
}

.workflow-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-xs);
}

.workflow-steps > div {
  font-size: 0.85rem;
  color: var(--dark-taupe);
  line-height: 1.4;
}

.workflow-time {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--spark-orange);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--light-taupe);
}

.optimization-impact {
  font-size: 0.9rem;
  color: var(--dark-taupe);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.05) 0%, rgba(0, 166, 166, 0.05) 100%);
  border-left: 3px solid var(--growth-green);
  border-radius: var(--radius-sm);
  line-height: 1.6;
  margin: 0;
}

.optimization-impact strong {
  color: var(--charcoal);
  font-weight: 600;
}

/* Summary Section */
.optimization-summary {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.04) 0%, rgba(255, 107, 53, 0.02) 100%);
  background: #ffffff70;
  border-radius: var(--radius-lg);
}

.optimization-summary:hover {
  background: var(--warm-white);
}

.optimization-summary h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-xl);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.summary-point {
  text-align: center;
}

.summary-point strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--spark-orange);
  margin-bottom: var(--space-sm);
}

.summary-point p {
  font-size: 0.9rem;
  color: var(--dark-taupe);
  line-height: 1.6;
}

/* Responsive Design for Technical Optimization */
@media (max-width: 1024px) {
  .optimization-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .optimization-comparison,
  .optimization-workflow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .technical-optimization-section {
    padding: var(--space-2xl) 0;
  }

  .optimization-card-header {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .optimization-icon {
    font-size: 2rem;
  }

  .optimization-title {
    font-size: 1.1rem;
  }

  .optimization-summary {
    font-size: 0.9rem;
  }

  .optimization-details {
    padding: 0 var(--space-md);
  }

  .optimization-card-header[aria-expanded="true"] + .optimization-details {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }

  .optimization-summary h3 {
    font-size: 1.5rem;
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .technical-optimization-section {
    padding: var(--space-xl) 0;
  }

  .optimization-card-header {
    padding: var(--space-sm) var(--space-md);
  }

  .optimization-icon {
    font-size: 1.75rem;
  }

  .optimization-title {
    font-size: 1rem;
  }

  .optimization-summary {
    font-size: 0.85rem;
  }

  .benefit-item {
    font-size: 0.85rem;
  }

  .comparison-value,
  .workflow-time {
    font-size: 0.85rem;
  }

  /* .optimization-summary {
    padding: var(--space-lg);
  } */

  .optimization-summary h3 {
    font-size: 1.3rem;
  }

  .summary-point strong {
    font-size: 1rem;
  }

  .summary-point p {
    font-size: 0.85rem;
  }
}

/* ============================================================================
   MOBILE & TABLET RESPONSIVE FIXES
   Issue 1: Differentiation Table & Pricing Table Responsiveness
   Issue 2: Visual Showcase Mobile Layout
   Issue 3: Touch Device Carousel for .showcase-before
   ============================================================================ */

/* ==========================================================================
   ISSUE 1: DIFFERENTIATION TABLE - MOBILE RESPONSIVE
   Elegant card-based layout with proper visual hierarchy
   Mobile-first approach with tablet and desktop enhancements
   ========================================================================== */

/* --- Reusable Responsive Table Card Classes --- */
.responsive-card-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.responsive-card-label--problem {
  color: #D32F2F;
}

.responsive-card-label--solution {
  color: var(--growth-green);
}

/* --- Differentiation Tabs: Base Styles (Hidden on Desktop) --- */
.differentiation-tabs {
  display: none; /* Hidden by default (desktop) */
}

/* --- Differentiation Tabs: Mobile/Tablet Styles (≤1024px) --- */
@media (max-width: 1024px) {
  /* Tab Navigation Container */
  .differentiation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding: var(--space-xs);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-organic);
    border: 1px solid var(--light-taupe);
  }

  /* Individual Tab Button */
  .differentiation-tab {
    flex: 1 1 calc(50% - var(--space-xs));
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--soft-beige);
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .differentiation-tab:hover {
    background: var(--light-taupe);
    border-color: var(--mediumdark-taupe);
  }

  .differentiation-tab:focus-visible {
    outline: 2px solid var(--spark-orange);
    outline-offset: 2px;
  }

  /* Active Tab State */
  .differentiation-tab.active {
    background: linear-gradient(135deg, var(--charcoal), #424242);
    border-color: var(--charcoal);
    box-shadow: 0 2px 8px rgba(58, 53, 44, 0.2);
  }

  .differentiation-tab.active .tab-title {
    color: white;
  }

  .differentiation-tab.active .tab-subtitle {
    color: rgba(255, 255, 255, 0.75);
  }

  /* Tab Title */
  .tab-title {
    font-weight: 600;
    font-size: var(--font-size-caption);
    color: var(--charcoal);
    line-height: 1.3;
    transition: color var(--transition-fast);
  }

  /* Tab Subtitle */
  .tab-subtitle {
    font-size: var(--font-size-label);
    font-weight: 400;
    color: var(--mediumdark-taupe);
    line-height: 1.2;
    transition: color var(--transition-fast);
  }

  /* Hide inactive rows in tab mode */
  .differentiation-table tbody .differentiation-row {
    display: none;
  }

  .differentiation-table tbody .differentiation-row.active {
    display: flex;
    flex-direction: column;
  }

  /* Hide card header (first td) since tabs already show the approach name */
  .differentiation-table tbody .differentiation-row td:first-child {
    display: none;
  }
}

/* --- Tablet Tab Adjustments (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .differentiation-tabs {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .differentiation-tab {
    flex: 1 1 calc(25% - var(--space-sm));
    padding: var(--space-md);
  }

  .tab-title {
    font-size: var(--font-size-body-sm);
  }

  .tab-subtitle {
    font-size: var(--font-size-caption);
  }

  /* On tablet, active row uses grid layout (side-by-side cells) */
  .differentiation-table tbody .differentiation-row.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr; /* Single row since header is hidden */
  }

  /* Hide card header on tablet too */
  .differentiation-table tbody .differentiation-row td:first-child {
    display: none;
  }

  /* Problem and solution cells take full grid positions */
  .differentiation-table tbody .differentiation-row .problem-cell {
    grid-column: 1;
    grid-row: 1;
  }

  .differentiation-table tbody .differentiation-row .solution-cell {
    grid-column: 2;
    grid-row: 1;
  }
}

/* --- Small Mobile Tab Adjustments (≤480px) --- */
@media (max-width: 480px) {
  .differentiation-tabs {
    gap: var(--space-xs);
    padding: var(--space-xs);
    margin-bottom: var(--space-md);
  }

  .differentiation-tab {
    flex: 1 1 calc(50% - var(--space-xs) / 2);
    padding: var(--space-sm);
  }

  .tab-title {
    font-size: var(--font-size-label);
  }

  .tab-subtitle {
    font-size: 0.65rem;
  }
}

/* --- Mobile: Card Layout (≤768px) --- */
@media (max-width: 768px) {
  /* Remove horizontal scroll, enable card layout */
  .comparison-table-wrapper {
    overflow-x: visible;
    box-shadow: none;
    background: transparent;
  }

  .differentiation-table {
    display: block;
    background: transparent;
    min-width: unset;
  }

  .differentiation-table table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .differentiation-table thead {
    display: none;
  }

  .differentiation-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .differentiation-table tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-organic);
  }

  .differentiation-table tbody tr:hover {
    background: white;
  }

  .differentiation-table td {
    display: block;
    width: 100% !important;
    padding: var(--space-md);
    text-align: left;
    border: none;
  }

  /* First cell (Approach) becomes card header */
  .differentiation-table tbody tr td:first-child {
    background: linear-gradient(135deg, var(--charcoal), #424242);
    color: white;
    padding: var(--space-md) var(--space-lg);
    text-align: center;
  }

  .differentiation-table tbody tr td:first-child strong {
    color: white;
    font-size: var(--font-size-body-lg);
    display: block;
    margin-bottom: var(--space-xs);
  }

  .differentiation-table tbody tr td:first-child .approach-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-caption);
  }

  /* Problem cell styling */
  .differentiation-table .problem-cell {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%);
    position: relative;
    padding-top: calc(var(--space-md) + 2rem);
    border-top: 3px solid #FFCCBC;
  }

  .differentiation-table .problem-cell::before {
    content: "⚠ The Problem";
    position: absolute;
    top: var(--space-sm);
    left: var(--space-md);
    font-weight: 700;
    font-size: var(--font-size-caption-sm);
    color: #D32F2F;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Solution cell styling */
  .differentiation-table .solution-cell {
    background: linear-gradient(135deg, #F1F8F2 0%, #E8F5E9 100%);
    position: relative;
    padding-top: calc(var(--space-md) + 2rem);
    border-top: 3px solid #A5D6A7;
  }

  .differentiation-table .solution-cell::before {
    content: "✓ SellSpark Solution";
    position: absolute;
    top: var(--space-sm);
    left: var(--space-md);
    font-weight: 700;
    font-size: var(--font-size-caption-sm);
    color: var(--growth-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Cell content bullet styling */
  .differentiation-table .cell-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .differentiation-table .cell-content div {
    padding: var(--space-xs) 0;
    line-height: 1.5;
  }
}

/* --- Small Mobile (≤480px) --- */
@media (max-width: 480px) {
  .differentiation-table tbody {
    gap: var(--space-md);
  }

  .differentiation-table td {
    padding: var(--space-sm);
    font-size: var(--font-size-caption);
  }

  .differentiation-table tbody tr td:first-child {
    padding: var(--space-sm) var(--space-md);
  }

  .differentiation-table tbody tr td:first-child strong {
    font-size: var(--font-size-body);
  }

  .differentiation-table .problem-cell,
  .differentiation-table .solution-cell {
    padding-top: calc(var(--space-sm) + 1.8rem);
  }

  .differentiation-table .problem-cell::before,
  .differentiation-table .solution-cell::before {
    font-size: var(--font-size-label);
  }
}

/* --- Tablet: Card Layout with Side-by-Side Cells (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Keep card layout but extend from mobile */
  .comparison-table-wrapper {
    overflow-x: visible;
    box-shadow: none;
    background: transparent;
    width: 100%;
  }

  .differentiation-table {
    display: block;
    background: transparent;
    min-width: unset;
    width: 100%;
  }

  .differentiation-table table {
    display: block;
    width: 100%;
  }

  .differentiation-table thead {
    display: none;
  }

  .differentiation-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
  }

  /* Card layout using CSS Grid for side-by-side cells */
  .differentiation-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-organic);
  }

  .differentiation-table tbody tr:hover {
    background: white;
  }

  .differentiation-table td {
    padding: var(--space-md);
    text-align: left;
    border: none;
    width: 100%;
  }

  /* First cell (Approach) spans full width as card header - row 1 */
  .differentiation-table tbody tr td:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    background: linear-gradient(135deg, var(--charcoal), #424242);
    color: white;
    padding: var(--space-md) var(--space-lg);
    text-align: center;
  }

  .differentiation-table tbody tr td:first-child strong {
    color: white;
    font-size: var(--font-size-component-title-sm);
    display: block;
    margin-bottom: var(--space-xs);
  }

  .differentiation-table tbody tr td:first-child .approach-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-caption);
  }

  /* Problem cell - left side, row 2 */
  .differentiation-table .problem-cell {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%);
    position: relative;
    padding-top: calc(var(--space-md) + var(--space-lg));
    border-top: 3px solid #FFCCBC;
    border-right: 1px solid var(--light-taupe);
  }

  .differentiation-table .problem-cell::before {
    content: "⚠ The Problem";
    position: absolute;
    top: var(--space-sm);
    left: var(--space-md);
    font-weight: 700;
    font-size: var(--font-size-caption-sm);
    color: #D32F2F;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Solution cell - right side, row 2 */
  .differentiation-table .solution-cell {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    background: linear-gradient(135deg, #F1F8F2 0%, #E8F5E9 100%);
    position: relative;
    padding-top: calc(var(--space-md) + var(--space-lg));
    border-top: 3px solid #A5D6A7;
  }

  .differentiation-table .solution-cell::before {
    content: "✓ SellSpark Solution";
    position: absolute;
    top: var(--space-sm);
    left: var(--space-md);
    font-weight: 700;
    font-size: var(--font-size-caption-sm);
    color: var(--growth-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Cell content styling */
  .differentiation-table .cell-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
  }

  .differentiation-table .cell-content div {
    padding: var(--space-xs) 0;
    line-height: 1.5;
    font-size: var(--font-size-body-sm);
  }
}

/* ==========================================================================
   ISSUE 1: PRICING TABLE - MOBILE RESPONSIVE WITH FEATURES
   Industry-standard card layout with feature display (no "view on desktop")
   Based on SaaS best practices: stacked cards with visible features
   ========================================================================== */

/* --- Reusable Pricing Card Feature Classes --- */
.pricing-card-features {
  width: 100%;
  text-align: left;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--light-taupe);
}

.pricing-card-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-caption);
  color: var(--dark-taupe);
  line-height: 1.5;
}

.pricing-card-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.pricing-card-feature-item::before {
  content: "✓";
  color: var(--growth-green);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Mobile: Full Card Layout with Features (≤640px) --- */
@media (max-width: 640px) {
  .pricing-table-container {
    display: block;
    padding: var(--space-sm);
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .pricing-header-row {
    display: block;
  }

  .plan-headers-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .pricing-header-cell.feature-header {
    display: none !important;
  }

  /* Each plan becomes a full-featured card */
  .pricing-header-cell.plan-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-organic);
    margin-bottom: 0;
    min-height: auto;
    position: relative;
  }

  .pricing-header-cell.plan-header.featured {
    border: 2px solid var(--spark-orange);
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2);
    transform: scale(1.02);
  }

  /* Keep most-popular-label as top bar - same as desktop, don't reposition */
  .pricing-header-cell.plan-header.featured .most-popular-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .plan-badge {
    margin-top: 0;
    margin-bottom: var(--space-sm);
  }

  .plan-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Add top padding to account for most-popular-label bar */
    padding-top: var(--space-xs);
  }

  .pricing-header-cell.plan-header.featured .plan-content {
    /* padding-top: calc(22px + var(--space-xs)); */
    padding-top: var(--space-xs);
  }

  .plan-name {
    font-size: var(--font-size-component-title-sm);
    margin-bottom: var(--space-xs);
    color: var(--charcoal);
  }

  .plan-price {
    margin-bottom: var(--space-xs);
  }

  .price-amount {
    font-size: var(--font-size-section-title);
    font-weight: 700;
    color: var(--charcoal);
  }

  .price-currency,
  .price-period {
    color: var(--warm-gray);
  }

  .plan-subtitle {
    font-size: var(--font-size-body-xs);
    min-height: auto;
    color: var(--dark-taupe);
    margin-bottom: var(--space-md);
  }

  /* Show differentiating features inside each card using ::after */
  .pricing-header-cell.plan-header::after {
    content: attr(data-features);
    display: block;
    white-space: pre-line;
    text-align: center;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.8;
    color: var(--charcoal);
    padding: var(--space-md) 0 0 0;
    border-top: 1px solid var(--light-taupe);
    margin-top: var(--space-sm);
    width: 100%;
    border-bottom: 1px solid var(--light-taupe);
    padding: var(--space-sm) 0;
  }

  /* Hide feature rows on mobile - they're shown in cards now */
  .pricing-feature-row {
    display: none !important;
  }

  .pricing-feature-row-expanded {
    display: none !important;
  }

  .pricing-guarantee {
    margin-top: var(--space-lg);
  }

  /* ===== Card Topup Section - Expandable per-card topup options ===== */
  /* Position BELOW the ::after features using flexbox order */
  .card-topup-section {
    display: block;
    width: 100%;
    order: 99; /* Ensures it appears after ::after pseudo-element */
    margin-top: var(--space-sm);
  }

  .card-topup-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: transparent;
    transition: color 0.2s;
    font-size: var(--font-size-caption-sm);
    font-weight: 500;
    color: var(--warm-gray);
    flex-flow: wrap;
  }

  .card-topup-trigger:hover {
    color: var(--charcoal);
  }

  .card-topup-trigger:focus-visible {
    outline: 2px solid var(--spark-orange);
    outline-offset: 2px;
  }

  .card-topup-trigger:focus:not(:focus-visible) {
    outline: none;
  }

  .card-topup-trigger .expand-icon {
    transition: transform 0.3s ease;
    font-size: 0.6em;
    color: var(--sage-green);
    opacity: 0.7;
  }

  .card-topup-trigger.expanded .expand-icon {
    transform: rotate(90deg);
    opacity: 1;
  }

  .card-topup-label {
    flex-shrink: 0;
  }

  .card-topup-price-hint {
    font-size: var(--font-size-caption-sm);
    color: var(--warm-gray);
    font-weight: 400;
    opacity: 0.6;
  }

  /* Hide price hint when expanded */
  .card-topup-trigger.expanded .card-topup-price-hint {
    display: none;
  }

  .card-topup-content {
    display: none;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding: var(--space-xs);
  }

  .card-topup-content.expanded {
    display: flex;
    animation: fadeIn 0.3s ease-out;
  }

  /* Subtle topup options styling */
  .card-topup-content .topup-option {
    font-size: var(--font-size-caption-sm);
    background: rgba(168, 181, 160, 0.05);
    border: 1px solid rgba(168, 181, 160, 0.08);
    padding: var(--space-xs) 0.75rem;
  }

  .card-topup-content .topup-option:hover {
    background: rgba(168, 181, 160, 0.1);
  }

  .card-topup-content .topup-na {
    font-size: var(--font-size-caption-sm);
    text-align: center;
    font-style: italic;
    opacity: 0.5;
    padding: var(--space-xs);
    color: var(--warm-gray);
  }
}

/* --- Small Mobile (≤480px) --- */
@media (max-width: 480px) {
  .plan-headers-container {
    gap: var(--space-md);
  }

  .pricing-header-cell.plan-header {
    padding: var(--space-lg) var(--space-md);
  }

  .pricing-header-cell.plan-header.featured {
    transform: none;
  }

  .plan-name {
    font-size: var(--font-size-body-lg);
  }

  .price-amount {
    font-size: var(--font-size-section-title-secondary);
  }

  /* Smaller feature text for small mobile */
  .pricing-header-cell.plan-header::after {
    font-size: var(--font-size-caption-sm);
    line-height: 1.5;
  }
}

/* --- Tablet: Elegant 2x2 Card Grid (641px - 1133px) --- */
@media (min-width: 641px) and (max-width: 1133px) {
  .pricing-table-container {
    display: block;
    padding: var(--space-sm);
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .pricing-header-row {
    display: block;
  }

  /* 2x2 Grid layout for tablets - saves vertical space */
  .plan-headers-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .pricing-header-cell.feature-header {
    display: none !important;
  }

  /* Card styling - same as mobile but optimized for grid */
  .pricing-header-cell.plan-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-organic);
    min-height: auto;
    position: relative;
  }

  .pricing-header-cell.plan-header.featured {
    border: 2px solid var(--spark-orange);
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2);
  }

  /* Keep most-popular-label as top bar - same as desktop */
  .pricing-header-cell.plan-header.featured .most-popular-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .plan-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: var(--space-xs);
  }

  .pricing-header-cell.plan-header.featured .plan-content {
    /* padding-top: calc(22px + var(--space-xs)); */
    padding-top: var(--space-xs);
  }

  .plan-name {
    font-size: var(--font-size-body-lg);
    margin-bottom: var(--space-xs);
    color: var(--charcoal);
  }

  .plan-price {
    margin-bottom: var(--space-xs);
  }

  .price-amount {
    font-size: var(--font-size-section-title-secondary);
    font-weight: 700;
    color: var(--charcoal);
  }

  .price-currency,
  .price-period {
    color: var(--warm-gray);
  }

  .plan-subtitle {
    font-size: var(--font-size-caption-sm);
    min-height: auto;
    color: var(--dark-taupe);
    margin-bottom: var(--space-sm);
  }

  /* Show differentiating features inside each card using ::after */
  .pricing-header-cell.plan-header::after {
    content: attr(data-features);
    display: block;
    white-space: pre-line;
    text-align: center;
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    line-height: 1.7;
    color: var(--charcoal);
    padding: var(--space-sm) 0 0 0;
    border-top: 1px solid var(--light-taupe);
    margin-top: var(--space-xs);
    width: 100%;
    border-bottom: 1px solid var(--light-taupe);
    padding: var(--space-sm) 0;
  }

  /* Hide feature comparison rows on tablet - shown in cards */
  .pricing-feature-row {
    display: none !important;
  }

  .pricing-guarantee {
    margin-top: var(--space-lg);
  }

  /* ===== Card Topup Section - Expandable per-card topup options (Tablet) ===== */
  /* Position BELOW the ::after features using flexbox order */
  .card-topup-section {
    display: block;
    width: 100%;
    order: 99; /* Ensures it appears after ::after pseudo-element */
    margin-top: var(--space-xs);

  }

  .card-topup-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    background: transparent;
    transition: color 0.2s;
    font-size: var(--font-size-caption-sm);
    font-weight: 500;
    color: var(--warm-gray);
    flex-flow: wrap;
  }

  .card-topup-trigger:hover {
    color: var(--charcoal);
  }

  .card-topup-trigger:focus-visible {
    outline: 2px solid var(--spark-orange);
    outline-offset: 2px;
  }

  .card-topup-trigger:focus:not(:focus-visible) {
    outline: none;
  }

  .card-topup-trigger .expand-icon {
    transition: transform 0.3s ease;
    font-size: 0.6em;
    color: var(--sage-green);
    opacity: 0.7;
  }

  .card-topup-trigger.expanded .expand-icon {
    transform: rotate(90deg);
    opacity: 1;
  }

  .card-topup-label {
    flex-shrink: 0;
  }

  .card-topup-price-hint {
    font-size: var(--font-size-label);
    color: var(--warm-gray);
    font-weight: 400;
    opacity: 0.6;
  }

  /* Hide price hint when expanded */
  .card-topup-trigger.expanded .card-topup-price-hint {
    display: none;
  }

  .card-topup-content {
    display: none;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding: var(--space-xs);
  }

  .card-topup-content.expanded {
    display: flex;
    animation: fadeIn 0.3s ease-out;
  }

  /* Subtle topup options styling */
  .card-topup-content .topup-option {
    font-size: var(--font-size-caption-sm);
    background: rgba(168, 181, 160, 0.05);
    border: 1px solid rgba(168, 181, 160, 0.08);
    padding: var(--space-xs) 0.75rem;
  }

  .card-topup-content .topup-option:hover {
    background: rgba(168, 181, 160, 0.1);
  }

  .card-topup-content .topup-na {
    font-size: var(--font-size-caption-sm);
    text-align: center;
    font-style: italic;
    opacity: 0.5;
    padding: var(--space-xs);
    color: var(--warm-gray);
  }
}

/* --- Large Tablet: 4-column grid (769px - 1133px) --- */
@media (min-width: 769px) and (max-width: 1133px) {
  .plan-headers-container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .pricing-header-cell.plan-header {
    padding: var(--space-md) var(--space-sm);
  }

  .plan-name {
    font-size: var(--font-size-body);
  }

  .price-amount {
    font-size: var(--font-size-cta-title);
  }

  .plan-subtitle {
    font-size: var(--font-size-label);
  }

  /* Compact differentiating features for 4-column layout */
  .pricing-header-cell.plan-header::after {
    font-size: var(--font-size-caption-sm);
    font-weight: 500;
    line-height: 1.5;
  }

  /* Adjust most-popular-label for compact cards */
  .pricing-header-cell.plan-header.featured .most-popular-label {
    font-size: var(--font-size-badge);
    height: var(--space-sm);
    line-height: var(--space-sm);
  }

  .pricing-header-cell.plan-header.featured .plan-content {
    padding-top: var(--space-xs);
  }

  /* Compact card-topup for 4-column layout */
  .card-topup-section {
    margin-top: var(--space-xs);
  }

  .card-topup-trigger {
    padding: 4px;
    font-size: var(--font-size-label);
    flex-wrap: wrap;
  }

  .card-topup-label {
    font-size: var(--font-size-label);
  }

  .card-topup-price-hint {
    font-size: var(--font-size-badge);
    width: 100%;
    text-align: center;
    margin-top: 2px;
  }

  .card-topup-content .topup-option {
    font-size: var(--font-size-label);
  }
}

/* ==========================================================================
   DESKTOP: ELEGANT TABLE LAYOUT (≥1134px)
   Shows shared features banner above a streamlined table with only
   differentiating features (Photos per month, Resolution, Additional Photos)
   ========================================================================== */
@media (min-width: 1134px) {
  /* ----- Shared Features Banner: Visible Above Table ----- */
  .pricing-shared-features {
    display: block;
    background: linear-gradient(135deg, var(--soft-beige) 0%, var(--cream-white) 100%);
    border: 1px solid var(--light-taupe);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
  }

  .pricing-shared-features-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-component-title-sm);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 var(--space-md) 0;
  }

  .pricing-shared-features-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-lg);
  }

  .pricing-shared-feature-item {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    color: var(--dark-taupe);
    white-space: nowrap;
  }

  /* ----- Hide Shared/Redundant Feature Rows -----
     nth-of-type counts ALL sibling divs including .pricing-header-row:
     div:nth-of-type(1) = .pricing-header-row
     div:nth-of-type(2) = Photos per month (KEEP)
     div:nth-of-type(3) = Resolution Quality (KEEP)
     div:nth-of-type(4) = Additional Photos expandable (KEEP)
     div:nth-of-type(5) = Additional Photos expanded (KEEP - hidden by default)
     div:nth-of-type(6) = AI Product Analysis (HIDE)
     div:nth-of-type(7) = Photography Best Practices (HIDE)
     div:nth-of-type(8) = AI Framework Recommendations (HIDE)
     div:nth-of-type(9) = Complete Presentation Control (HIDE)
     div:nth-of-type(10) = AI Image Generation (HIDE)
  */
  .pricing-feature-row:nth-of-type(6),
  .pricing-feature-row:nth-of-type(7),
  .pricing-feature-row:nth-of-type(8),
  .pricing-feature-row:nth-of-type(9),
  .pricing-feature-row:nth-of-type(10) {
    display: none !important;
  }

  /* ----- Elegant Table Container ----- */
  .pricing-table-container {
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(168, 181, 160, 0.15);
    overflow: hidden;
  }

  /* ----- Cleaner Feature Header Column ----- */
  .pricing-header-cell.feature-header {
    background: var(--soft-beige);
    padding: var(--space-lg);
  }

  .pricing-header-cell.feature-header h3 {
    font-size: var(--font-size-body-lg);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
  }

  /* ----- Refined Plan Headers ----- */
  .pricing-header-cell.plan-header {
    padding: var(--space-lg) var(--space-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 249, 240, 0.9) 100%);
    transition: all var(--transition-normal);
  }

  .pricing-header-cell.plan-header:hover {
    background: rgba(255, 255, 255, 1);
  }

  /* Plan name typography */
  .plan-name {
    font-size: var(--font-size-body-lg);
    margin-bottom: var(--space-xs);
  }

  /* Price typography */
  .price-amount {
    font-size: var(--font-size-cta-title);
  }

  /* Subtitle typography */
  .plan-subtitle {
    font-size: var(--font-size-caption);
    line-height: 1.4;
    min-height: 2.8em;
  }

  /* ----- Featured Column Emphasis ----- */
  .pricing-header-cell.plan-header.featured {
    background: linear-gradient(180deg, rgba(255, 107, 53, 0.06) 0%, rgba(255, 107, 53, 0.02) 100%);
  }

  .pricing-header-cell.plan-header.featured:hover {
    background: linear-gradient(180deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);
  }

  /* Most popular label refinement */
  .most-popular-label {
    font-size: var(--font-size-caption-sm);
    letter-spacing: 0.5px;
  }

  /* ----- Cleaner Feature Rows ----- */
  .pricing-feature-row .feature-name {
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    padding: var(--space-md) var(--space-lg);
    background: var(--soft-beige);
  }

  .pricing-feature-row .feature-value {
    font-size: var(--font-size-body-sm);
    padding: var(--space-md);
  }

  .pricing-feature-row .feature-value.featured {
    font-size: var(--font-size-body);
    font-weight: 600;
  }

  /* Refined row heights for streamlined table */
  .pricing-feature-row .feature-name,
  .pricing-feature-row .feature-value {
    min-height: 52px;
  }

  /* ----- Expandable Row Styling ----- */
  .pricing-feature-row.expandable-row .feature-name {
    font-weight: 600;
  }

  /* ----- Expanded Row: Remove Animation Delay for Instant Display ----- */
  .pricing-feature-row.pricing-feature-row-expanded {
    animation-delay: 0s;
  }

  /* ----- Pricing Guarantee Spacing ----- */
  .pricing-guarantee {
    margin-top: var(--space-lg);
    font-size: var(--font-size-caption);
  }
}

/* ==========================================================================
   ISSUE 2: VISUAL SHOWCASE - MOBILE LAYOUT FIX
   .visual-showcase: flex-direction: column
   .image-grid: flex-direction: row, justify-content: center, gap: var(--space-xs)
   ========================================================================== */

@media (max-width: 768px) {
  .visual-showcase {
    flex-direction: column !important;
    gap: var(--space-lg);
    align-items: center;
  }

  /* "After" image first (on top) */
  .showcase-after {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Thumbnails below */
  .showcase-before {
    order: 2;
    width: 100%;
  }

  /* Thumbnails in horizontal row */
  .image-grid {
    flex-direction: row !important;
    justify-content: center !important;
    gap: var(--space-xs) !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-xs) 0;
    -webkit-overflow-scrolling: touch;
  }

  /* Adjust "After" image size for mobile */
  .before .image-content {
    min-height: 220px;
    min-width: 220px;
    width: 50vw;
    height: 50vw;
  }

  /* Slightly smaller thumbnails on mobile */
  .image-grid .image-content {
    height: 60px;
    width: 60px;
    min-width: 60px; /* Prevent shrinking */
  }

  .image-grid .image-placeholder {
    padding: var(--space-xs);
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .visual-showcase {
    gap: var(--space-md);
  }

  .before .image-content {
    min-height: 190px;
    min-width: 190px;
    width: 62vw;
    height: 62vw;
  }

  .image-grid .image-content {
    height: 50px;
    width: 50px;
    min-width: 50px;
  }

  .image-grid {
    gap: var(--space-xs) !important;
  }
}

/* ==========================================================================
   ISSUE 3: TOUCH DEVICE CAROUSEL FOR .showcase-before

   CONCEPT: A track wrapper holds items in a flex row. The track is translated
   left/right as user drags. Whichever item is closest to center gets highlighted.
   ========================================================================== */

/* Touch device detection via class added by JavaScript */
.touch-device .showcase-before {
  position: relative;
  overflow: hidden; /* Hide items that slide outside */
}

/* The carousel container - clips horizontally but allows vertical overflow for scale */
.touch-device .image-grid {
  /* Override mobile CSS that conflicts with carousel calculations */
  justify-content: flex-start !important; /* Must be flex-start for translateX math */
  -webkit-overflow-scrolling: auto !important; /* Disable native momentum scrolling */
  overflow-x: clip !important; /* Use clip, not auto - we handle scrolling via JS */
  overflow-y: visible;
  justify-self: center;
  position: relative;
  width: 100%;
  padding: var(--space-sm) 0; /* Extra space for scaled items */
  /* Gradient fade mask - items fade out at edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}

/* The track that holds items and gets translated */
.touch-device .carousel-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  will-change: transform;
}

.touch-device .carousel-track:active,
.touch-device .carousel-track.dragging {
  cursor: grabbing;
}

/* During drag - disable transitions for smooth real-time movement */
.touch-device .carousel-track.dragging {
  transition: none !important;
}

/* Also disable transitions on items during dragging to prevent jumpy scaling */
/* when items are repositioned for infinite loop effect */
/* Use higher specificity to override .carousel-active rules */
.touch-device .carousel-track.dragging .image-placeholder,
.touch-device .carousel-track.dragging .image-placeholder.carousel-active {
  transition: none !important;
}

/* Hide the "Click" badges on touch devices */
.touch-device .before-badge {
  display: none !important;
}

/* Items in the carousel track - normal flow, no absolute positioning */
.touch-device .carousel-track .image-placeholder {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  transform: scale(0.9);
  cursor: default; /* Non-center items are not clickable */
  pointer-events: none; /* DISABLE all touch/click on non-active items */
}

/* Active/Center item - highlighted with green border and larger */
.touch-device .carousel-track .image-placeholder.carousel-active {
  opacity: 1;
  border-color: var(--growth-green);
  box-shadow: 0 4px 16px rgba(0, 200, 150, 0.3);
  transform: scale(1.05);
  z-index: 10;
  cursor: pointer; /* Only center item is clickable */
  pointer-events: auto; /* ENABLE touch/click ONLY on active item */
  overflow: hidden;
}

/* Non-active items */
.touch-device .carousel-track .image-placeholder:not(.carousel-active) {
  border-color: var(--light-taupe);
}

/* Ensure the track itself receives touch events for dragging */
.touch-device .carousel-track {
  pointer-events: auto;
}

/* Disable hover effects on touch devices */
.touch-device .image-placeholder:hover {
  transform: none;
}

.touch-device .carousel-track .image-placeholder.carousel-active:hover {
  transform: scale(1.05);
}

/* Swipe hint indicator */
.carousel-swipe-hint {
  display: none; /* Hidden by default */
}

.touch-device .carousel-swipe-hint {
  display: block;
  text-align: center;
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--warm-gray);
  transition: opacity 0.3s ease;
}

/* TAP overlay as pseudo-element on the highlighted item */
.touch-device .carousel-track .image-placeholder.carousel-active::after {
  content: 'TAP';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Flexbox for vertical + horizontal centering of text */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a352cd6;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 20;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Show the TAP hint when .show-tap-hint class is applied */
.touch-device .carousel-track .image-placeholder.carousel-active.show-tap-hint::after {
  opacity: 1;
}

/* ============================================================================
   TOUCH DEVICE HERO LAYOUT - HIGHEST PRIORITY (End of file)
   ============================================================================
   This section is placed at the END of the CSS file to ensure it has the
   HIGHEST CASCADE PRIORITY. Touch devices (phones, tablets, iPad Pro in any
   orientation) will ALWAYS get mobile/stacked layout regardless of viewport.

   Combined with mobile-first base styles and non-touch desktop media query,
   this guarantees:
   - Touch devices: ALWAYS mobile layout (any viewport size)
   - Non-touch devices: Mobile layout ≤768px, desktop layout ≥769px
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
    text-align: center !important;
  }

  .hero-content {
    display: contents !important;
  }

  .hero-title {
    order: 1 !important;
  }

  .hero-visual {
    order: 2 !important;
  }

  .hero-description {
    order: 3 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-cta {
    order: 4 !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .visual-showcase {
    flex-direction: column !important;
    gap: var(--space-lg) !important;
    align-items: center !important;
  }

  .image-grid {
    flex-direction: row !important;
    justify-content: center !important;
  }

  .arrow-line {
    width: 40px !important;
    height: 2px !important;
  }
}

/* Touch Device Font Sizing - Responsive typography by viewport width
   These come LAST in the file to override general responsive queries via cascade */
@media (hover: none) and (pointer: coarse) and (max-width: 419px) {
  .hero-title {
    font-size: 2.09rem;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 420px) and (max-width: 599px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1024px) {
  .hero-title {
    font-size: 2.8rem;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 1025px) {
  .hero-title {
    font-size: 3.2rem;
  }
}