/* Focused visual refinements for the public site; brand colors remain admin-configurable. */
:focus-visible {
  outline: 3px solid var(--blue, #356fa8);
  outline-offset: 3px;
}

.hero {
  gap: clamp(24px, 4vw, 52px);
}

.hero-copy {
  max-width: 580px;
}

.hero h1 {
  max-width: 12ch;
  line-height: 1.06;
  text-wrap: balance;
}

.hero-description {
  max-width: 43ch;
  line-height: 1.75;
}

.hero-art {
  border-radius: 26px;
  background: radial-gradient(ellipse at 52% 48%, #f1f7fc 0%, #f5f9fc 47%, transparent 74%);
}

.button-primary {
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(24, 66, 108, .18);
}

.price-band {
  min-height: 116px;
  border-radius: 18px;
  border-color: #e1eaf2;
  box-shadow: 0 14px 34px rgba(18, 43, 73, .06);
}

.steps-grid,
.benefits-grid {
  align-items: stretch;
}

.step-card,
.benefit-card {
  border-radius: 15px;
  border-color: #e2eaf1;
}

.step-card p,
.benefit-card p {
  font-size: 12px;
  line-height: 1.75;
}

@media (max-width: 680px) {
  .hero {
    gap: 2px;
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(40px, 11.8vw, 56px);
    line-height: 1.08;
    letter-spacing: -2px;
  }

  .hero-description {
    max-width: 42ch;
    font-size: 15px;
  }

  .hero-art {
    min-height: clamp(265px, 78vw, 320px);
  }

  .price-band {
    width: auto;
    min-height: 0;
    padding: 15px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .step-card p,
  .benefit-card p {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 40px;
    letter-spacing: -1.8px;
  }

  .price-band {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .price-value {
    grid-column: 2;
    grid-row: 2;
  }

  .price-link {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin: 0;
    padding: 4px 0 0;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-primary {
    transition: none;
  }

  .button-primary:hover {
    transform: none;
  }
}