/* ==========================================================================
   CLEANER STYLES - Design System Approach
   Built with consistent spacing, CSS custom properties, and component hierarchy
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Spacing Scale (8px base unit) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 60px;
  --space-10: 80px;

  /* Colors - Primary */
  --color-coral: #ff584d;
  --color-coral-hover: #e64d43;
  --color-blue: #154ffb;
  --color-cyan: #00C6F7;

  /* Colors - Neutral */
  --color-bg: #F4F4F0;
  --color-card: #f9f9f9;
  --color-dark: #2A2A28;
  --color-dark-deep: #1a1a18;
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-text-faint: #999;
  --color-border: #e0e0e0;
  --color-white: #fff;

  /* Typography */
  --font-family: 'Hanken Grotesk', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 56px;
  --text-hero: 62pt;

  --letter-spacing-body: -0.03em;
  --letter-spacing-heading: -0.07em;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-neumorphic:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05),
    0 4px 8px rgba(0,0,0,0.05);

  --shadow-neumorphic-dark:
    inset 1px 1px 0 rgba(255,255,255,0.1),
    inset -1px -1px 0 rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.2);

  --shadow-colored:
    inset 1px 1px 0 rgba(255,255,255,0.3),
    inset -1px -1px 0 rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1);

  --shadow-button:
    inset 1px 1px 0 rgba(255,255,255,0.3),
    inset -1px -1px 0 rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1);

  /* Card Stack Offsets */
  --card-offset: 12px;
  --card-offset-sm: 8px;

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

  /* Layout */
  --max-width: 1200px;
  --container-padding: var(--space-7);
  --section-padding: var(--space-9);
  --card-padding: var(--space-5);
}

/* Mobile overrides */
@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-4);
    --section-padding: var(--space-7);
    --text-hero: 36pt;
  }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  min-height: 100dvh;
  background-color: var(--color-bg);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

h2 {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

p {
  text-wrap: pretty;
}

.serif-italic {
  font-family: var(--font-family);
  font-style: italic;
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.section {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.container {
  padding: 0 var(--container-padding);
}

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-5); }
.gap-lg { gap: var(--space-7); }

/* ==========================================================================
   5. ATOMIC COMPONENTS - BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.05);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.btn--light {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-neumorphic);
}

.btn--light:hover {
  background: #ebebeb;
}

.btn--coral {
  background: var(--color-coral);
  color: var(--color-white);
  box-shadow: var(--shadow-button);
}

.btn--coral:hover {
  background: var(--color-coral-hover);
}

.btn--lg {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* Spacing between stacked card actions */
.btn--full + .book-call {
  margin-top: var(--space-5);
}

/* ==========================================================================
   6. ATOMIC COMPONENTS - PILLS
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
  position: relative;
  z-index: 10;
}

.pill__dot {
  width: 10px;
  height: 10px;
  background: var(--color-coral);
  border-radius: 50%;
}

.pill--sm {
  padding: var(--space-2) 14px;
  font-size: var(--text-xs);
}

.pill--border-blue { border-color: var(--color-blue); }
.pill--border-coral { border-color: var(--color-coral); }
.pill--border-cyan { border-color: var(--color-cyan); }

.pill--light {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
  color: var(--color-white);
}

.pill--light .pill__dot {
  background: var(--color-white);
}

/* ==========================================================================
   7. CARD SYSTEM
   ========================================================================== */

/* Card Stack Container */
.card-stack {
  position: relative;
  z-index: 20;
}

/* Card Back (offset shadow element) */
.card-back {
  position: absolute;
  top: var(--card-offset);
  left: calc(var(--card-offset) * -1);
  right: var(--card-offset);
  bottom: calc(var(--card-offset) * -1);
  background: var(--color-card);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-neumorphic);
  overflow: hidden;
}

.card-back--dark {
  background: var(--color-dark-deep);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--shadow-neumorphic-dark);
}

.card-back--colored {
  box-shadow: var(--shadow-colored);
}

.card-back--coral { background: var(--color-coral); }
.card-back--blue {
  background: var(--color-blue);
  border: none;
}
.card-back--cyan { background: var(--color-cyan); }

/* Small offset variant for benefit cards */
.card-stack--sm .card-back {
  top: var(--card-offset-sm);
  left: calc(var(--card-offset-sm) * -1);
  right: var(--card-offset-sm);
  bottom: calc(var(--card-offset-sm) * -1);
}

/* Base Card */
.card {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-md);
  padding: var(--card-padding);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-neumorphic);
}

/* Dark Card Variant */
.card--dark {
  background: var(--color-dark);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: var(--shadow-neumorphic-dark);
}

/* Colored Card Variants */
.card--coral {
  background: var(--color-coral);
  color: var(--color-white);
  box-shadow:
    var(--shadow-colored),
    0 4px 12px rgba(255,88,77,0.3);
}

.card--blue {
  background: var(--color-blue);
  color: var(--color-white);
  border: none;
  box-shadow:
    var(--shadow-colored),
    0 4px 12px rgba(21,79,251,0.3);
}

.card--cyan {
  background: var(--color-cyan);
  color: var(--color-white);
  box-shadow:
    var(--shadow-colored),
    0 4px 12px rgba(0,198,247,0.3);
}

/* Card Content Elements */
.card__heading {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.card__tagline {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.card--dark .card__tagline,
.card--coral .card__tagline,
.card--blue .card__tagline,
.card--cyan .card__tagline {
  color: rgba(255,255,255,0.85);
}

/* ==========================================================================
   8. CARD HEADER (Animated Bars)
   ========================================================================== */

.card-header {
  position: relative;
  margin: calc(var(--card-padding) * -1);
  margin-bottom: var(--space-5);
  padding: var(--space-7) var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl) var(--radius-md) 0 0;
  overflow: hidden;
}

.animated-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) 0 var(--space-4);
}

.bar {
  flex: 1;
  height: 90px;
  background: var(--color-coral);
  border-radius: var(--radius-sm);
  transform-origin: center;
  animation: bar-wave 4s ease-in-out infinite;
  animation-play-state: paused;
  max-width: 4px;
}

.bar:nth-child(even) {
  animation: none;
  transform: scaleY(1);
  max-width: 8px;
}

.bar:nth-child(4n+2) {
  max-width: 4px;
}

/* Bar animation delays */
.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.15s; }
.bar:nth-child(5) { animation-delay: 0.3s; }
.bar:nth-child(6) { animation-delay: 0.25s; }
.bar:nth-child(7) { animation-delay: 0.4s; }
.bar:nth-child(8) { animation-delay: 0.35s; }
.bar:nth-child(9) { animation-delay: 0.5s; }
.bar:nth-child(10) { animation-delay: 0.45s; }
.bar:nth-child(11) { animation-delay: 0.6s; }
.bar:nth-child(12) { animation-delay: 0.55s; }
.bar:nth-child(13) { animation-delay: 0.7s; }
.bar:nth-child(14) { animation-delay: 0.65s; }
.bar:nth-child(15) { animation-delay: 0.75s; }
.bar:nth-child(16) { animation-delay: 0.8s; }
.bar:nth-child(17) { animation-delay: 0.85s; }
.bar:nth-child(18) { animation-delay: 0.9s; }
.bar:nth-child(19) { animation-delay: 0.95s; }
.bar:nth-child(20) { animation-delay: 1s; }
.bar:nth-child(21) { animation-delay: 1.05s; }
.bar:nth-child(22) { animation-delay: 1.1s; }
.bar:nth-child(23) { animation-delay: 1.15s; }
.bar:nth-child(24) { animation-delay: 1.2s; }
.bar:nth-child(25) { animation-delay: 1.25s; }
.bar:nth-child(26) { animation-delay: 1.3s; }
.bar:nth-child(27) { animation-delay: 1.35s; }
.bar:nth-child(28) { animation-delay: 1.4s; }
.bar:nth-child(29) { animation-delay: 1.45s; }
.bar:nth-child(30) { animation-delay: 1.5s; }
.bar:nth-child(31) { animation-delay: 1.55s; }
.bar:nth-child(32) { animation-delay: 1.6s; }
.bar:nth-child(33) { animation-delay: 1.65s; }
.bar:nth-child(34) { animation-delay: 1.7s; }
.bar:nth-child(35) { animation-delay: 1.75s; }
.bar:nth-child(36) { animation-delay: 1.8s; }
.bar:nth-child(37) { animation-delay: 1.85s; }
.bar:nth-child(38) { animation-delay: 1.9s; }
.bar:nth-child(39) { animation-delay: 1.95s; }
.bar:nth-child(40) { animation-delay: 2s; }

@keyframes bar-wave {
  0% { transform: scaleY(0.3) translateY(0); }
  25% { transform: scaleY(0.8) translateY(-10px); }
  50% { transform: scaleY(1) translateY(0); }
  75% { transform: scaleY(0.8) translateY(10px); }
  100% { transform: scaleY(0.3) translateY(0); }
}

.card-header.is-animating .bar {
  animation-play-state: running;
}

/* ==========================================================================
   9. BOOK CALL COMPONENT
   ========================================================================== */

.book-call {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
}

.book-call__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.book-call__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.book-call__text {
  display: flex;
  flex-direction: column;
}

.book-call__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.book-call__link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.book-call__arrow {
  width: 40px;
  height: 40px;
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--color-text);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
}

/* ==========================================================================
   10. SECTION COMPONENTS
   ========================================================================== */

.section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-faint);
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-3);
}

.section-heading {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.section-subheading {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 700px;
  margin: var(--space-4) auto var(--space-7);
  line-height: 1.5;
}

/* ==========================================================================
   11. HERO SECTION
   ========================================================================== */

.hero {
  composes: section;
}

.hero__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-7);
  position: relative;
}

.hero__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  max-width: 650px;
  gap: var(--space-9);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hero__logo {
  height: 40px;
  width: auto;
}

.hero__buttons {
  display: flex;
  gap: var(--space-3);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: left;
}

.hero__subtitle {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-faint);
  margin-top: calc(var(--space-7) * -1);
}

.hero__right {
  flex-shrink: 0;
  width: 380px;
  position: relative;
  z-index: 1;
}

.hero-card {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%),
    url('/assets/happypages-hero-small-3.webp');
  background-size: cover;
  background-position: center;
  padding-top: calc(var(--card-padding) + var(--space-3));
  padding-bottom: calc(var(--card-padding) + 150px);
  border: 2px solid var(--color-blue);
}

.hero-card .card__tagline {
  color: var(--color-white);
}

/* Hero Responsive */
@media (max-width: 1024px) {
  .hero__content {
    flex-direction: column;
  }

  .hero__left {
    max-width: 100%;
  }

  .hero__right {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .hero__logo {
    height: 38px;
  }

  .hero__buttons {
    display: none;
  }

  .hero__subtitle {
    font-size: var(--text-lg);
    margin-top: calc(var(--space-6) * -1);
  }

  .card__heading {
    display: none;
  }

  .hero-card .card__heading,
  .faq-card .card__heading {
    display: block;
    font-size: var(--text-4xl);
  }

  .hero-card .card__tagline {
    font-size: var(--text-lg);
  }
}

/* ==========================================================================
   12. STEP CARDS (How It Works)
   ========================================================================== */

.step-cards {
  display: flex;
  justify-content: center;
  gap: var(--space-7);
  margin: var(--space-9) var(--space-7) 0;
  position: relative;
}

.step-card-stack {
  position: relative;
  z-index: 20;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.step-card {
  position: relative;
  width: 320px;
  height: 440px;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.step-card__image {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.step-card__img {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  border-radius: 18px var(--radius-sm) 0 0;
  margin: 2px 2px 0 2px;
}

.step-card__content {
  padding: var(--card-padding);
}

.step-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.step-card__description {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* Step Card Animation - Initial bunched state */
.step-cards .step-card-stack:nth-child(1) {
  transform: translateX(180px) rotate(-12deg);
  opacity: 0.9;
  z-index: 30;
}

.step-cards .step-card-stack:nth-child(2) {
  transform: translateX(0) rotate(2deg);
  opacity: 0.95;
  z-index: 20;
}

.step-cards .step-card-stack:nth-child(3) {
  transform: translateX(-180px) rotate(12deg);
  opacity: 0.9;
  z-index: 10;
}

/* Step Card Animation - Spread state */
.step-cards.is-visible .step-card-stack {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

/* Step Cards Responsive */
@media (max-width: 768px) {
  .step-cards {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    margin: var(--space-7) var(--space-4) 0;
  }

  .step-card-stack {
    transition: none;
  }

  .step-cards .step-card-stack:nth-child(1),
  .step-cards .step-card-stack:nth-child(2),
  .step-cards .step-card-stack:nth-child(3),
  .step-cards.is-visible .step-card-stack {
    transform: none;
    opacity: 1;
  }

  .step-card {
    width: 100%;
    max-width: 320px;
  }
}

/* Mobile: show GIF, hide video */
@media (max-width: 768px) {
  .step-card__video { display: none; }
  .step-card__gif { display: block; }
}

/* Desktop: show video, hide GIF */
@media (min-width: 769px) {
  .step-card__gif { display: none; }
  .step-card__video { display: block; }
}

/* ==========================================================================
   13. CLIENT LOGOS
   ========================================================================== */

.client-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-9);
  margin-bottom: var(--space-5);
}

.client-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-9);
  margin-top: var(--space-9);
}

.client-logo {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(100%);
}

.client-logo[alt="Gousto"] {
  filter: grayscale(100%) invert(1);
}

@media (max-width: 768px) {
  .client-logos {
    padding: 0 var(--space-4);
    gap: var(--space-5);
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   14. BENEFITS SECTION
   ========================================================================== */

.benefits-carousel {
  position: relative;
  overflow: hidden;
  padding: 0 var(--space-7);
}

.benefits-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--transition-fast);
  padding-right: var(--space-9);
  padding-left: var(--space-3);
}

.benefit-item {
  flex-shrink: 0;
  width: 200px;
}

.benefit-card {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-md);
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-neumorphic);
  overflow: hidden;
  contain: layout paint style;
}

.benefit-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.benefit-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Carousel Navigation */
.carousel-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
  font-size: var(--text-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.carousel-btn:hover {
  background: var(--color-bg);
}

@media (max-width: 768px) {
  .benefits-carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--space-4);
  }

  .benefits-carousel::-webkit-scrollbar {
    display: none;
  }

  .benefits-track {
    transform: none !important;
  }

  .carousel-nav {
    display: none;
  }
}

/* ==========================================================================
   15. BENEFIT PATTERNS
   ========================================================================== */

.benefit-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Pattern 1: Cards (Coral) */
.benefit-pattern--cards {
  padding: var(--space-7);
}

.mini-card {
  width: 24px;
  height: 40px;
  background: var(--color-coral);
  border-radius: var(--radius-md);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
  animation: card-slide 3s ease-in-out infinite;
  animation-play-state: paused;
}

.mini-card:nth-child(1) { animation-delay: 0s; }
.mini-card:nth-child(2) { animation-delay: 0.75s; }
.mini-card:nth-child(3) { animation-delay: 1.5s; }
.mini-card:nth-child(4) { animation-delay: 2.25s; }

@keyframes card-slide {
  0% { transform: translateX(-24px); }
  75% { transform: translateX(88px); }
  100% { transform: translateX(200px); }
}

/* Pattern 2: Bars (Blue) */
.benefit-pattern--bars {
  flex-direction: column;
  padding: var(--space-7);
  justify-content: center;
}

.benefit-pattern--bars::after {
  content: '';
  width: 100%;
  height: 12px;
  background: var(--color-blue);
  border-radius: 6px;
  opacity: 0.8;
}

.bar-blob {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--color-blue);
  border-radius: 50%;
  top: 50%;
  margin-top: -28px;
  left: 40px;
  animation: blob-merge 3s ease-in-out infinite;
  animation-play-state: paused;
}

.bar-blob:nth-child(1) { animation-delay: 0s; }
.bar-blob:nth-child(2) { animation-delay: 1s; }
.bar-blob:nth-child(3) { animation-delay: 2s; }

@keyframes blob-merge {
  0% { transform: translateX(-20px) scale(0.6); opacity: 0; }
  30% { transform: translateX(30px) scale(1); opacity: 1; }
  70% { transform: translateX(70px) scale(1); opacity: 1; }
  100% { transform: translateX(140px) scale(0.6); opacity: 0; }
}

/* Pattern 3: Streaks (Cyan) */
.benefit-pattern--streaks::before,
.benefit-pattern--streaks::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 6px;
  background: var(--color-cyan);
  border-radius: 3px;
  animation-play-state: paused;
}

.benefit-pattern--streaks::before {
  top: 60px;
  left: 20px;
  animation: streak-move 2s ease-out infinite;
}

.benefit-pattern--streaks::after {
  top: 100px;
  left: 40px;
  animation: streak-move 2s ease-out infinite 0.3s;
}

@keyframes streak-move {
  0% { transform: translateX(-60px) scaleX(0.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100px) scaleX(1.5); opacity: 0; }
}

/* Pattern 4: Star (Coral) */
.benefit-pattern--star::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background:
    linear-gradient(var(--color-coral), var(--color-coral)) center/4px 100% no-repeat,
    linear-gradient(var(--color-coral), var(--color-coral)) center/100% 4px no-repeat,
    linear-gradient(45deg, transparent 46%, var(--color-coral) 46%, var(--color-coral) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--color-coral) 46%, var(--color-coral) 54%, transparent 54%);
  animation: star-rotate 8s linear infinite;
  animation-play-state: paused;
}

@keyframes star-rotate {
  0% { transform: rotate(0deg) scale(0.8); opacity: 0.7; }
  50% { transform: rotate(180deg) scale(1); opacity: 1; }
  100% { transform: rotate(360deg) scale(0.8); opacity: 0.7; }
}

/* Pattern 5: Scale (Blue) */
.benefit-pattern--scale::before,
.benefit-pattern--scale::after {
  content: '';
  position: absolute;
  border: 4px solid var(--color-blue);
  border-radius: var(--radius-lg);
  animation-play-state: paused;
}

.benefit-pattern--scale::before {
  width: 60px;
  height: 60px;
  animation: scale-grow 4s ease-in-out infinite;
}

.benefit-pattern--scale::after {
  width: 100px;
  height: 100px;
  animation: scale-grow 4s ease-in-out infinite 1s;
}

@keyframes scale-grow {
  0%, 100% { transform: scale(0.6); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* Animate when visible */
.benefit-card.is-animating .mini-card,
.benefit-card.is-animating .bar-blob,
.benefit-card.is-animating .benefit-pattern--streaks::before,
.benefit-card.is-animating .benefit-pattern--streaks::after,
.benefit-card.is-animating .benefit-pattern--star::before,
.benefit-card.is-animating .benefit-pattern--scale::before,
.benefit-card.is-animating .benefit-pattern--scale::after {
  animation-play-state: running;
  will-change: transform, opacity;
}

/* ==========================================================================
   16. WORKS SECTION
   ========================================================================== */

.works-section {
  overflow: visible;
  contain: layout style;
  padding-bottom: var(--space-7);
}

.works-cards {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding: 0 var(--space-7);
  position: relative;
  z-index: 20;
}

.works-card-left {
  flex: 2;
}

.works-card-right {
  flex: none;
  width: 380px;
}

/* Works Deck Container */
.works-deck-container {
  position: relative;
  padding-bottom: var(--space-5);
  overflow: visible;
}

.works-deck {
  position: relative;
  width: 90%;
  height: 580px;
  margin-left: 0;
  margin-right: auto;
}

/* Individual Deck Cards */
.works-deck-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 580px;
  transition: transform var(--transition-fast);
  contain: layout paint style;
}

.works-deck-card-back {
  position: absolute;
  top: var(--card-offset);
  left: calc(var(--card-offset) * -1);
  right: var(--card-offset);
  bottom: calc(var(--card-offset) * -1);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-colored);
}

.works-deck-card-front {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.works-deck-card__image {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.works-deck-card__image img {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  background: white;
  border-radius: calc(var(--radius-xl) - 2px) calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px);
}

.works-deck-card__content {
  padding: var(--card-padding);
}

.works-deck-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.works-deck-card__description {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* Card color variants */
.works-deck-card[data-index="0"] .works-deck-card-front { background: #BAEDE9; box-shadow: var(--shadow-colored), 0 4px 12px rgba(186,237,233,0.3); }
.works-deck-card[data-index="0"] .works-deck-card__title,
.works-deck-card[data-index="0"] .works-deck-card__description { color: #1a1a1a; }
.works-deck-card[data-index="1"] .works-deck-card-front { background: #EBB445; box-shadow: var(--shadow-colored), 0 4px 12px rgba(235,180,69,0.3); }
.works-deck-card[data-index="2"] .works-deck-card-front { background: #FF0033; box-shadow: var(--shadow-colored), 0 4px 12px rgba(255,0,51,0.3); }

.works-deck-card[data-index="0"] .works-deck-card-back { background: #BAEDE9; }
.works-deck-card[data-index="1"] .works-deck-card-back { background: #EBB445; }
.works-deck-card[data-index="2"] .works-deck-card-back { background: #FF0033; }

/* Stacked positions */
.works-deck-card[data-position="0"] { transform: translateX(0) rotate(0deg); z-index: 30; }
.works-deck-card[data-position="1"] { transform: translateX(-6%) rotate(-4deg); z-index: 20; }
.works-deck-card[data-position="2"] { transform: translateX(-12%) rotate(-8deg); z-index: 10; }

/* Works Patterns */
.works-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.works-pattern--coral {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.05) 0%, transparent 60%);
}

.works-pattern--blue {
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 35%),
    radial-gradient(circle at 60% 60%, rgba(0,0,0,0.05) 0%, transparent 50%);
}

.works-pattern--cyan {
  background:
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 20%, rgba(0,0,0,0.05) 0%, transparent 45%);
}

/* Works Deck Navigation */
.works-deck-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-7);
  justify-content: flex-end;
  padding-right: 10%;
}

/* Works Text Card */
.works-text-card {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 580px;
  overflow: hidden;
  position: relative;
}

.works-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-5);
}

/* Grid Animation */
.grid-animation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.grid-row {
  display: flex;
  gap: var(--space-1);
}

.grid-box {
  width: 20px;
  height: 20px;
  background: var(--color-coral);
  border-radius: var(--radius-sm);
  animation: wave-a 3s ease-in-out infinite;
  animation-play-state: paused;
}

.works-text-card.is-animating .grid-box {
  animation-play-state: running;
}

/* Grid animation delays */
.grid-box:nth-child(1) { animation-delay: calc(14 * 0.15s); }
.grid-box:nth-child(2) { animation-delay: calc(13 * 0.15s); }
.grid-box:nth-child(3) { animation-delay: calc(12 * 0.15s); }
.grid-box:nth-child(4) { animation-delay: calc(11 * 0.15s); }
.grid-box:nth-child(5) { animation-delay: calc(10 * 0.15s); }
.grid-box:nth-child(6) { animation-delay: calc(9 * 0.15s); }
.grid-box:nth-child(7) { animation-delay: calc(8 * 0.15s); }
.grid-box:nth-child(8) { animation-delay: calc(7 * 0.15s); }
.grid-box:nth-child(9) { animation-delay: calc(6 * 0.15s); }
.grid-box:nth-child(10) { animation-delay: calc(5 * 0.15s); }
.grid-box:nth-child(11) { animation-delay: calc(4 * 0.15s); }
.grid-box:nth-child(12) { animation-delay: calc(3 * 0.15s); }
.grid-box:nth-child(13) { animation-delay: calc(2 * 0.15s); }
.grid-box:nth-child(14) { animation-delay: calc(1 * 0.15s); }
.grid-box:nth-child(15) { animation-delay: 0s; }

/* Row timing variations */
.grid-row:nth-child(1) .grid-box { animation-duration: 6.75s; animation-name: wave-a; }
.grid-row:nth-child(2) .grid-box { animation-duration: 4.5s; animation-name: wave-b; }
.grid-row:nth-child(3) .grid-box { animation-duration: 5.625s; animation-name: wave-c; }
.grid-row:nth-child(4) .grid-box { animation-duration: 6.75s; animation-name: wave-d; }
.grid-row:nth-child(5) .grid-box { animation-duration: 4.5s; animation-name: wave-c; }

@keyframes wave-a {
  0%, 100% { opacity: 0.1; }
  20% { opacity: 0.3; }
  40% { opacity: 0.6; }
  50% { opacity: 0.9; }
  60% { opacity: 0.6; }
  80% { opacity: 0.3; }
}

@keyframes wave-b {
  0%, 100% { opacity: 0.12; }
  25% { opacity: 0.4; }
  50% { opacity: 0.4; }
  75% { opacity: 0.12; }
}

@keyframes wave-c {
  0%, 100% { opacity: 0.1; }
  15% { opacity: 0.25; }
  35% { opacity: 0.5; }
  50% { opacity: 0.85; }
  65% { opacity: 0.5; }
  85% { opacity: 0.25; }
}

@keyframes wave-d {
  0%, 100% { opacity: 0.15; }
  30% { opacity: 0.45; }
  50% { opacity: 0.7; }
  70% { opacity: 0.45; }
}

/* Works Section Responsive */
@media (max-width: 1024px) {
  .works-cards {
    flex-direction: column;
    align-items: center;
  }

  .works-card-left,
  .works-card-right {
    flex: none;
    width: 100%;
    max-width: 400px;
  }

  .works-deck {
    margin: 0 auto;
  }

  .works-deck-nav {
    justify-content: center;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .works-cards {
    padding: 0 var(--space-4);
  }

  .works-deck,
  .works-deck-card {
    height: 420px;
  }

  .works-text-card {
    min-height: auto;
    height: auto;
  }

  .works-card-right {
    width: calc(100% - 40px);
    max-width: none;
    margin: 0 auto;
  }

  .grid-box {
    width: 16px;
    height: 16px;
  }

  .grid-row {
    gap: 3px;
  }

  .grid-animation {
    gap: 3px;
  }

  .grid-row .grid-box:nth-child(n+12) {
    display: none;
  }
}

/* Shuffle animations */
@keyframes shuffle-out-left {
  0% { transform: translateX(0) rotate(0deg); }
  40% { transform: translateX(-120%) rotate(-12deg); }
  60% { transform: translateX(-120%) rotate(-12deg); }
  100% { transform: translateX(-12%) rotate(-8deg); }
}

@keyframes shuffle-in-from-back {
  0% { transform: translateX(-12%) rotate(-8deg); }
  40% { transform: translateX(-120%) rotate(-12deg); }
  60% { transform: translateX(-120%) rotate(-12deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.works-deck-card.shuffling-out {
  animation: shuffle-out-left var(--transition-slow) forwards;
  z-index: 50;
}

.works-deck-card.shuffling-out.returning {
  z-index: 5;
}

.works-deck-card.shuffling-in {
  animation: shuffle-in-from-back var(--transition-slow) forwards;
  z-index: 5;
}

.works-deck-card.shuffling-in.arriving {
  z-index: 50;
}

.works-deck.is-shuffling .works-deck-card {
  transition: none;
}

.works-deck.is-shuffling .works-deck-card:not(.shuffling-out):not(.shuffling-in) {
  transition: transform var(--transition-medium) 0.3s;
}

/* ==========================================================================
   17. PRICING SECTION
   ========================================================================== */

.pricing-cards {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding: 0 var(--space-7);
  position: relative;
  z-index: 20;
}

.pricing-card-left {
  flex: 1;
}

.pricing-card-right {
  flex: 2;
}

/* Coral Pricing Card */
.pricing-card-coral {
  background-image: url('/assets/happypages-pricing-small-2.webp');
  background-size: cover;
  background-position: center;
  background-color: var(--color-coral);
  border: 2px solid var(--color-coral);
  padding: var(--card-padding);
  padding-bottom: calc(var(--card-padding) + 150px);
  color: var(--color-white);
}

.pricing-card-coral .pill {
  margin-bottom: var(--space-4);
}

.pricing-card-coral .card__heading {
  color: var(--color-white);
}

.pricing-card-coral .card__tagline {
  color: var(--color-white);
}

.pricing-card-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  margin: var(--space-4) 0 var(--space-3) 0;
  color: var(--color-text);
}

.pricing-card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Dark Pricing Card */
.pricing-card-dark {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-md);
  padding: var(--card-padding);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: var(--shadow-neumorphic-dark);
}

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

.pricing-tier-label {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-2);
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.pricing-price {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 100px;
  display: inline-block;
}

.pricing-period {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.6);
}

.pricing-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
  margin-bottom: var(--space-5);
}

.pricing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: var(--space-3) var(--space-7);
  list-style: none;
  margin-bottom: var(--space-6);
  padding: 0;
  min-height: 130px;
}

.pricing-features li {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
}

.pricing-cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}

.pricing-cta-row .pricing-cta {
  width: 50%;
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-coral);
  color: var(--color-white);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-button);
}

.pricing-cta-row .pricing-cta:hover {
  background: var(--color-coral-hover);
}

.pricing-cta-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pricing-cta-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.pricing-flex-text {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* Pricing Toggle */
.pricing-toggle {
  position: absolute;
  top: 80px;
  right: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pricing-toggle-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}

.pricing-toggle-label:first-child {
  color: rgba(255,255,255,1);
}

.pricing-toggle.is-pro .pricing-toggle-label:first-child {
  color: rgba(255,255,255,0.6);
}

.pricing-toggle.is-pro .pricing-toggle-label:last-child {
  color: var(--color-coral);
  font-weight: var(--font-weight-semibold);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  cursor: pointer;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  display: flex;
  align-items: center;
  width: 72px;
  height: 36px;
  background: #4a4a48;
  border-radius: 18px;
  padding: 4px;
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,0.3),
    inset -1px -1px 2px rgba(255,255,255,0.1);
}

.toggle-knob {
  width: 28px;
  height: 28px;
  background: #e8e8e8;
  border-radius: 50%;
  box-shadow:
    2px 2px 4px rgba(0,0,0,0.3),
    inset 1px 1px 0 rgba(255,255,255,0.8),
    inset -1px -1px 0 rgba(0,0,0,0.1);
  transition: transform var(--transition-fast);
}

.toggle-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.toggle-input:checked + .toggle-track .toggle-knob {
  transform: translateX(36px);
}

.pricing-toggle.is-pro .toggle-indicator {
  border-color: var(--color-coral);
}

/* Typing highlight */
.typing-highlight {
  color: rgba(255,255,255,1);
}

.pricing-features li.typing-highlight {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

/* Pricing Bars - Exponential heights */
.pricing-bars .bar {
  transform-origin: bottom;
  animation: bar-wave-pricing 4s ease-in-out infinite;
  animation-play-state: paused;
  max-width: 4px;
}

.pricing-bars .bar:nth-child(even) {
  animation: none;
  transform: scaleY(1);
  max-width: 8px;
}

.pricing-bars .bar:nth-child(4n+2) {
  max-width: 4px;
}

/* Exponential height curve */
.pricing-bars .bar:nth-child(1) { height: 10px; }
.pricing-bars .bar:nth-child(2) { height: 11px; }
.pricing-bars .bar:nth-child(3) { height: 12px; }
.pricing-bars .bar:nth-child(4) { height: 13px; }
.pricing-bars .bar:nth-child(5) { height: 14px; }
.pricing-bars .bar:nth-child(6) { height: 15px; }
.pricing-bars .bar:nth-child(7) { height: 16px; }
.pricing-bars .bar:nth-child(8) { height: 17px; }
.pricing-bars .bar:nth-child(9) { height: 19px; }
.pricing-bars .bar:nth-child(10) { height: 20px; }
.pricing-bars .bar:nth-child(11) { height: 22px; }
.pricing-bars .bar:nth-child(12) { height: 23px; }
.pricing-bars .bar:nth-child(13) { height: 25px; }
.pricing-bars .bar:nth-child(14) { height: 27px; }
.pricing-bars .bar:nth-child(15) { height: 29px; }
.pricing-bars .bar:nth-child(16) { height: 31px; }
.pricing-bars .bar:nth-child(17) { height: 33px; }
.pricing-bars .bar:nth-child(18) { height: 35px; }
.pricing-bars .bar:nth-child(19) { height: 38px; }
.pricing-bars .bar:nth-child(20) { height: 40px; }
.pricing-bars .bar:nth-child(21) { height: 43px; }
.pricing-bars .bar:nth-child(22) { height: 46px; }
.pricing-bars .bar:nth-child(23) { height: 49px; }
.pricing-bars .bar:nth-child(24) { height: 52px; }
.pricing-bars .bar:nth-child(25) { height: 56px; }
.pricing-bars .bar:nth-child(26) { height: 59px; }
.pricing-bars .bar:nth-child(27) { height: 63px; }
.pricing-bars .bar:nth-child(28) { height: 67px; }
.pricing-bars .bar:nth-child(29) { height: 71px; }
.pricing-bars .bar:nth-child(30) { height: 76px; }
.pricing-bars .bar:nth-child(31) { height: 80px; }
.pricing-bars .bar:nth-child(32) { height: 85px; }
.pricing-bars .bar:nth-child(33) { height: 90px; }
.pricing-bars .bar:nth-child(34) { height: 96px; }
.pricing-bars .bar:nth-child(35) { height: 102px; }
.pricing-bars .bar:nth-child(36) { height: 108px; }
.pricing-bars .bar:nth-child(37) { height: 114px; }
.pricing-bars .bar:nth-child(38) { height: 121px; }
.pricing-bars .bar:nth-child(39) { height: 128px; }
.pricing-bars .bar:nth-child(40) { height: 135px; }

/* Pricing bar animation delays */
.pricing-bars .bar:nth-child(1) { animation-delay: 0s; }
.pricing-bars .bar:nth-child(2) { animation-delay: 0.05s; }
.pricing-bars .bar:nth-child(3) { animation-delay: 0.1s; }
.pricing-bars .bar:nth-child(4) { animation-delay: 0.15s; }
.pricing-bars .bar:nth-child(5) { animation-delay: 0.2s; }
.pricing-bars .bar:nth-child(6) { animation-delay: 0.25s; }
.pricing-bars .bar:nth-child(7) { animation-delay: 0.3s; }
.pricing-bars .bar:nth-child(8) { animation-delay: 0.35s; }
.pricing-bars .bar:nth-child(9) { animation-delay: 0.4s; }
.pricing-bars .bar:nth-child(10) { animation-delay: 0.45s; }
.pricing-bars .bar:nth-child(11) { animation-delay: 0.5s; }
.pricing-bars .bar:nth-child(12) { animation-delay: 0.55s; }
.pricing-bars .bar:nth-child(13) { animation-delay: 0.6s; }
.pricing-bars .bar:nth-child(14) { animation-delay: 0.65s; }
.pricing-bars .bar:nth-child(15) { animation-delay: 0.7s; }
.pricing-bars .bar:nth-child(16) { animation-delay: 0.75s; }
.pricing-bars .bar:nth-child(17) { animation-delay: 0.8s; }
.pricing-bars .bar:nth-child(18) { animation-delay: 0.85s; }
.pricing-bars .bar:nth-child(19) { animation-delay: 0.9s; }
.pricing-bars .bar:nth-child(20) { animation-delay: 0.95s; }
.pricing-bars .bar:nth-child(21) { animation-delay: 1s; }
.pricing-bars .bar:nth-child(22) { animation-delay: 1.05s; }
.pricing-bars .bar:nth-child(23) { animation-delay: 1.1s; }
.pricing-bars .bar:nth-child(24) { animation-delay: 1.15s; }
.pricing-bars .bar:nth-child(25) { animation-delay: 1.2s; }
.pricing-bars .bar:nth-child(26) { animation-delay: 1.25s; }
.pricing-bars .bar:nth-child(27) { animation-delay: 1.3s; }
.pricing-bars .bar:nth-child(28) { animation-delay: 1.35s; }
.pricing-bars .bar:nth-child(29) { animation-delay: 1.4s; }
.pricing-bars .bar:nth-child(30) { animation-delay: 1.45s; }
.pricing-bars .bar:nth-child(31) { animation-delay: 1.5s; }
.pricing-bars .bar:nth-child(32) { animation-delay: 1.55s; }
.pricing-bars .bar:nth-child(33) { animation-delay: 1.6s; }
.pricing-bars .bar:nth-child(34) { animation-delay: 1.65s; }
.pricing-bars .bar:nth-child(35) { animation-delay: 1.7s; }
.pricing-bars .bar:nth-child(36) { animation-delay: 1.75s; }
.pricing-bars .bar:nth-child(37) { animation-delay: 1.8s; }
.pricing-bars .bar:nth-child(38) { animation-delay: 1.85s; }
.pricing-bars .bar:nth-child(39) { animation-delay: 1.9s; }
.pricing-bars .bar:nth-child(40) { animation-delay: 1.95s; }

@keyframes bar-wave-pricing {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.35); }
}

.pricing-header-large.is-animating .pricing-bars .bar {
  animation-play-state: running;
}

/* Pricing Responsive */
@media (max-width: 768px) {
  .pricing-cards {
    flex-direction: column;
    padding: 0 var(--space-4);
    gap: var(--space-5);
  }

  .pricing-card-left,
  .pricing-card-right {
    flex: none;
    width: 100%;
  }

  .pricing-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
  }

  .pricing-header-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .pricing-toggle {
    position: relative;
    top: 0;
    right: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    max-width: 85px;
  }

  .pricing-toggle .pricing-toggle-label {
    order: -1;
  }

  .pricing-amount {
    margin-bottom: 0;
  }

  .pricing-header-row {
    margin-bottom: var(--space-4);
  }

  .pricing-price {
    font-size: 42px;
  }

  .pricing-features {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 10px;
  }

  .pricing-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-cta-row .pricing-cta {
    width: 100%;
  }

  .pricing-cta-bottom {
    margin-top: var(--space-3);
  }

  .pricing-flex-text {
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .step-card-stack,
  .works-deck-card {
    transition: none;
  }

  .bar,
  .mini-card,
  .bar-blob,
  .benefit-pattern--streaks::before,
  .benefit-pattern--streaks::after,
  .benefit-pattern--star::before,
  .benefit-pattern--scale::before,
  .benefit-pattern--scale::after,
  .grid-box,
  .pricing-bars .bar {
    animation: none;
  }

  .bar {
    transform: scaleY(0.6);
  }

  .grid-box {
    opacity: 0.3;
  }

  .mini-card:nth-child(1) { transform: translateX(30px); }
  .mini-card:nth-child(2) { transform: translateX(70px); }
  .mini-card:nth-child(3) { transform: translateX(110px); }
  .mini-card:nth-child(4) { transform: translateX(150px); }

  .bar-blob:nth-child(1) { transform: translateX(20px); }
  .bar-blob:nth-child(2) { transform: translateX(60px); }
  .bar-blob:nth-child(3) { transform: translateX(100px); }
}

/* ==========================================================================
   19. FAQ SECTION
   ========================================================================== */

.faq-section {
  overflow: visible;
}

.faq-content {
  display: flex;
  gap: var(--space-7);
  padding: 0 var(--space-7);
}

.faq-left {
  flex: 1;
}

.faq-right {
  flex: none;
  width: 380px;
}

.faq-title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--space-7);
}

/* Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-heading);
}

.faq-question:hover {
  color: var(--color-coral);
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

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

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

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

/* FAQ CTA Card */
.faq-card {
  padding: var(--card-padding);
  padding-top: calc(var(--card-padding) + var(--space-3));
  display: flex;
  flex-direction: column;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%),
    url('/assets/happypages-hero-small-3.webp');
  background-size: cover;
  background-position: center;
  padding-bottom: calc(var(--card-padding) + 150px);
  border: 2px solid var(--color-blue);
}

.faq-card .card__heading {
  margin-bottom: var(--space-5);
}

.faq-card .card__tagline {
  color: var(--color-white);
}

.faq-card__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-coral);
  color: var(--color-white);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  margin-bottom: var(--space-5);
}

.faq-card__cta:hover {
  background: var(--color-coral-hover);
}

/* Email contact row */
.faq-email-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
  margin-top: var(--space-5);
}

.faq-email-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.faq-email-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-email-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.faq-email-text {
  display: flex;
  flex-direction: column;
}

.faq-email-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.faq-email-address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.faq-email-arrow {
  width: 40px;
  height: 40px;
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--color-text);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(0,0,0,0.05);
  cursor: pointer;
}

/* FAQ Responsive */
@media (max-width: 1024px) {
  .faq-content {
    flex-direction: column;
  }

  .faq-right {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .faq-content {
    padding: 0 var(--space-4);
  }

  .faq-title {
    font-size: var(--text-4xl);
  }

  .faq-question {
    font-size: var(--text-base);
  }

  .faq-right {
    width: calc(100% - 40px);
    max-width: none;
    margin: 0 auto;
  }
}

/* ==========================================================================
   20. BOOK A CALL SECTION
   ========================================================================== */

.book-call-section {
  background: #2a2a28;
  padding: 0;
  max-width: none;
  border-left: none;
  border-right: none;
}

.book-call-section .container {
  max-width: var(--max-width);
  margin: 0 auto;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  padding: var(--space-10) var(--container-padding);
}

.book-call-content {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.book-call-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
}

.book-call-logo {
  height: 40px;
  width: auto;
  max-width: fit-content;
  align-self: flex-start;
  margin-bottom: var(--space-6);
}

.book-call-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.book-call-subtitle {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.book-call-right {
  flex: 1;
  min-height: 500px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.book-call-right #my-cal-inline-15min {
  min-height: 500px;
}

.book-call-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.book-call-footer-location {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

.book-call-footer-links {
  display: flex;
  gap: var(--space-5);
}

.book-call-footer-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.book-call-footer-link:hover {
  color: var(--color-white);
}

/* Book a Call Responsive */
@media (max-width: 1024px) {
  .book-call-content {
    flex-direction: column;
  }

  .book-call-left {
    padding-top: 0;
  }

  .book-call-right {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .book-call-content {
    padding: 0 var(--space-4);
  }

  .book-call-left {
    display: flex;
  }

  .book-call-title {
    display: block;
    font-size: var(--text-2xl);
  }

  .book-call-footer {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    padding: var(--space-6) var(--space-4) 0;
  }
}