.hero-section {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  color: #ffffff;
  padding: var(--spacing-20) var(--spacing-4);
}
.hero-section h1 {
  color: #ffffff;
}
.hero-section p {
  max-width: 600px;
  margin-bottom: var(--spacing-8);
}
.hero-section img {
  margin-bottom: var(--spacing-8);
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.options-section, .rates-section, .approval-section, .process-section, .documentation-section, .calculator-section, .stories-section {
  padding: var(--spacing-16) var(--spacing-4);
}
.options-section, .rates-section, .approval-section, .documentation-section {
  background-color: var(--color-neutral-100);
}
.process-section img, .stories-section img {
  margin-top: var(--spacing-8);
  border-radius: var(--radius-lg);
}
.calculator-section .card {
  max-width: 600px;
  margin: 0 auto;
}
.calculator-section label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-weight: 600;
}
.calculator-section input {
  margin-bottom: var(--spacing-4);
}
.mt-4 {
  margin-top: var(--spacing-4);
}
@media (max-width: 768px) {
  .hero-section {
    padding: var(--spacing-12) var(--spacing-4);
  }
  .options-section, .rates-section, .approval-section, .process-section, .documentation-section, .calculator-section, .stories-section {
    padding: var(--spacing-8) var(--spacing-4);
  }
  .hero-section img {
    margin-bottom: var(--spacing-4);
  }
}