.starting-mortgage-alert {
  display: grid;
  gap: 0.28rem;
  margin: 0.86rem 0 1rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(190, 38, 38, 0.34);
  border-left: 5px solid #c62828;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 247, 247, 0.98), rgba(255, 238, 232, 0.96)),
    #fff7f4;
  box-shadow:
    0 14px 32px rgba(128, 30, 30, 0.18),
    0 0 0 3px rgba(198, 40, 40, 0.06);
  color: #2a2115;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.32;
  animation: startingMortgageAlertEnter 420ms cubic-bezier(0.2, 1, 0.22, 1), startingMortgageAlertPulse 1300ms ease 420ms 2;
}

.starting-mortgage-alert[hidden] {
  display: none;
}

.starting-mortgage-alert strong {
  color: #c62828;
  font-size: 1.08rem;
  font-weight: 900;
}

.starting-mortgage-alert span {
  color: #30251f;
  font-size: 1rem;
  font-weight: 700;
}

.starting-mortgage-field-error {
  border-color: #bd8b2e !important;
  background: #fff8e8 !important;
  box-shadow:
    0 0 0 3px rgba(216, 188, 103, 0.2),
    0 8px 18px rgba(105, 74, 22, 0.12) !important;
}

@keyframes startingMortgageAlertEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes startingMortgageAlertPulse {
  0%,
  100% {
    box-shadow:
      0 14px 32px rgba(128, 30, 30, 0.18),
      0 0 0 3px rgba(198, 40, 40, 0.06);
  }

  50% {
    box-shadow:
      0 16px 36px rgba(128, 30, 30, 0.22),
      0 0 0 7px rgba(198, 40, 40, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .starting-mortgage-alert {
    animation: none;
  }
}