.lead-form-modal {
  inline-size: min(100% - 2 * var(--space-4), 34rem);
  max-inline-size: 34rem;
  margin: auto;
  overflow: visible;
  border: 1px solid rgb(255 204 41 / 42%);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #373435 0%, #171618 72%, #000 100%);
  color: var(--color-surface);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 48%), 0 0 0 1px rgb(255 255 255 / 6%);
}

.lead-form-modal::backdrop {
  background: rgb(0 0 0 / 78%);
}

.modal-header {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: flex-end;
  margin-block-end: var(--space-6);
}

.modal-heading {
  flex: 1;
}

.modal-kicker {
  margin-block-end: var(--space-2);
  color: var(--color-brand-yellow);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal-heading h2 {
  color: var(--color-surface);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  line-height: 0.95;
  text-wrap: balance;
}

.modal-close {
  display: inline-grid;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 22%);
  color: var(--color-surface);
  font-size: 1.75rem;
  line-height: 1;
}

.modal-close:hover {
  border-color: var(--color-brand-yellow);
  background: var(--color-brand-yellow);
  color: var(--color-brand-charcoal);
}

@media (width <= 30rem) {
  .lead-form-modal {
    padding: var(--space-4);
  }

  .modal-header {
    margin-block-end: var(--space-4);
  }
}

@media (width <= 40rem) and (height <= 44rem) {
  .lead-form-modal {
    border-radius: var(--radius-sm);
    padding: 0.875rem;
  }

  .modal-header {
    margin-block-end: var(--space-3);
  }

  .modal-heading h2 {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }
}