.button {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-pill);
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.button:hover {
  transform: translateY(-0.125rem);
}

.button--primary {
  background: var(--color-green-600);
  color: var(--color-white);
}

.button--primary:hover {
  background: var(--color-green-700);
}

.button--secondary {
  border-color: var(--color-navy-900);
  background: transparent;
  color: var(--color-navy-900);
}

.button--secondary:hover {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.button--gold {
  background: var(--color-gold-500);
  color: var(--color-navy-950);
}

.button--gold:hover {
  background: #d7b873;
}

.button--text {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--color-green-700);
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.card {
  height: 100%;
  padding: clamp(var(--space-24), 4vw, var(--space-40));
  border: 0.0625rem solid var(--color-gray-200);
  border-radius: var(--radius-20);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.card__number {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-24);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--color-green-100);
  color: var(--color-green-700);
  font-weight: 900;
}

.card__title {
  margin-bottom: var(--space-12);
}

.card__text {
  margin-bottom: var(--space-24);
  color: var(--color-gray-700);
}

.card--feature {
  border-top: 0.25rem solid var(--color-gold-500);
}

.badge {
  display: inline-flex;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  align-items: center;
  background: var(--color-green-100);
  color: var(--color-green-700);
  font-size: var(--font-size-14);
  font-weight: 800;
}

.badge--gold {
  background: var(--color-gold-100);
  color: #6d4b0f;
}

.field {
  display: grid;
  gap: var(--space-8);
}

.field__label {
  color: var(--color-navy-900);
  font-weight: 800;
}

.field__required {
  color: var(--color-error);
}

.field__control {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid #aeb7bd;
  border-radius: var(--radius-12);
  background: var(--color-white);
}

textarea.field__control {
  min-height: 9rem;
  resize: vertical;
}

.field__control:focus {
  border-color: var(--color-focus);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.field__help,
.field__error {
  margin: 0;
  font-size: var(--font-size-14);
}

.field__help {
  color: var(--color-gray-700);
}

.field__error {
  color: var(--color-error);
  font-weight: 700;
}

.field--error .field__control {
  border-color: var(--color-error);
}

.check {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.check input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.25rem 0 0;
  accent-color: var(--color-green-700);
}

.notice {
  padding: var(--space-20) var(--space-24);
  border: 0.0625rem solid;
  border-radius: var(--radius-12);
}

.notice__title {
  margin-bottom: var(--space-4);
  font-weight: 900;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice--success {
  border-color: #86d5a7;
  background: var(--color-success-soft);
  color: #0b522f;
}

.notice--error {
  border-color: #f3a6a0;
  background: var(--color-error-soft);
  color: #7a1b14;
}

.section-heading {
  display: grid;
  max-width: 52rem;
  margin-bottom: var(--space-48);
  gap: var(--space-12);
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.color-swatch {
  min-height: 8rem;
  padding: var(--space-20);
  border: 0.0625rem solid var(--color-gray-200);
  border-radius: var(--radius-12);
  display: flex;
  align-items: flex-end;
  font-weight: 800;
}

.color-swatch--navy {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.color-swatch--green {
  background: var(--color-green-600);
  color: var(--color-white);
}

.color-swatch--gold {
  background: var(--color-gold-500);
  color: var(--color-navy-950);
}

.color-swatch--ivory {
  background: var(--color-ivory);
  color: var(--color-navy-900);
}

@media (max-width: 47.9375rem) {
  .button {
    min-height: 3.5rem;
    width: 100%;
  }

  .button--text {
    width: auto;
  }
}