/* Brand Hero */
.hero--brand {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fef3c7 100%);
}

.hero--brand::before {
  background: radial-gradient(
    circle,
    rgba(255, 107, 53, 0.08) 0%,
    transparent 70%
  );
}

/* How It Works - Steps Connector */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  position: relative;
}

.steps-grid::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary-light),
    var(--color-secondary)
  );
  z-index: 0;
}

.step-card {
  position: relative;
  z-index: 1;
  background: var(--color-white);
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

/* Brand CTA */
.cta-section--brand {
  background: linear-gradient(135deg, var(--color-secondary), #e55a2b);
}

.cta-section--brand .btn--primary {
  background: var(--color-white);
  color: var(--color-secondary-dark);
}

.cta-section--brand .btn--primary:hover {
  color: var(--color-secondary-dark);
}

@media (max-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid::before {
    display: none;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}