.subscribe-modal[hidden] {
  display: none;
}

.subscribe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.subscribe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 28, 42, 0.72);
  backdrop-filter: blur(7px);
}

.subscribe-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fbfaf6;
  padding: 48px;
  box-shadow: 0 30px 90px rgba(8, 28, 42, 0.35);
}

.subscribe-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid #dce3e6;
  background: transparent;
  color: #112a3c;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.subscribe-modal__eyebrow {
  margin: 0 0 18px;
  color: #167bc5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.subscribe-modal h2 {
  font-size: clamp(40px, 7vw, 58px);
}

.subscribe-modal__copy {
  margin: 22px 0 30px;
  color: #667783;
  font-size: 15px;
  line-height: 1.7;
}

.subscribe-modal__field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.subscribe-modal__field label {
  color: #112a3c;
  font-size: 11px;
  font-weight: 800;
}

.subscribe-modal__field input {
  width: 100%;
  border: 1px solid #cbd6da;
  background: #fff;
  padding: 14px;
  color: #112a3c;
}

.subscribe-modal__referral {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid #dce3e6;
  background: #f8faf9;
  cursor: pointer;
}

.subscribe-modal__referral input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #2a9df4;
  flex: 0 0 auto;
}

.subscribe-modal__referral span,
.subscribe-modal__referral small {
  display: block;
}

.subscribe-modal__referral strong {
  color: #112a3c;
  font-size: 13px;
}

.subscribe-modal__referral small {
  margin-top: 5px;
  color: #667783;
  font-size: 11px;
  line-height: 1.5;
}

.subscribe-modal__submit {
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  border: 0;
  background: #2a9df4;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.subscribe-modal__submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.subscribe-modal__privacy,
.subscribe-modal__message {
  margin: 14px 0 0;
  color: #667783;
  font-size: 11px;
  line-height: 1.55;
}

.subscribe-modal__message.error {
  color: #a43333;
}

.subscribe-modal__message.success,
.subscribe-modal__message.info {
  color: #167bc5;
}

body.subscribe-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .subscribe-modal {
    padding: 12px;
  }

  .subscribe-modal__dialog {
    max-height: calc(100vh - 24px);
    padding: 42px 24px 28px;
  }
}