/* Demo request overlay, shared by every page that has the contact dialog. */
.home-contact-actions {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.demo-dialog .contact-dialog__panel {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  width: min(100%, 980px);
  max-height: calc(100dvh - 44px);
  padding: 0;
  overflow-y: auto;
  text-align: left;
}

.demo-dialog .contact-dialog__close {
  z-index: 2;
  background: var(--surface-1);
  color: var(--fg);
}

.demo-dialog__intro,
.demo-dialog__form-side {
  padding: clamp(34px, 5vw, 62px);
}

.demo-dialog__intro {
  display: flex;
  flex-direction: column;
  min-height: 570px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 12%, var(--blue-wash), transparent 48%),
    radial-gradient(circle at 90% 94%, var(--red-wash), transparent 45%),
    var(--surface-2);
}

.demo-dialog__intro h2 {
  margin-top: 20px;
  font-size: clamp(2.25rem, 3.4vw, 3.35rem);
  line-height: 1.08;
}

.demo-dialog__intro > p {
  max-width: 370px;
  margin-top: 22px;
  color: var(--fg-2);
  font-size: .98rem;
  line-height: 1.7;
}

.demo-dialog__direct {
  margin-top: auto;
  padding-top: 46px;
}

.demo-dialog__label {
  display: block;
  color: var(--fg-3);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.demo-dialog .contact-dialog__email {
  display: inline-block;
  margin: 12px 0 18px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.demo-dialog__direct .btn { display: flex; width: fit-content; }

.demo-dialog__form-side {
  padding-top: clamp(52px, 5vw, 62px);
  background: var(--surface-1);
}

.demo-dialog__form-side h3 {
  margin-top: 20px;
  padding-right: 36px;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.2;
}

.demo-form { display: grid; margin-top: 30px; }
.demo-form label {
  margin: 0 0 9px;
  color: var(--fg);
  font-size: .85rem;
  font-weight: 600;
}
.demo-form__optional { color: var(--fg-3); font-weight: 400; }
.demo-form input,
.demo-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: 15px 16px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.demo-form input { margin-bottom: 22px; }
.demo-form textarea { min-height: 150px; resize: vertical; }
.demo-form__verification:not(:empty) { margin-top: 20px; }
.demo-form :is(input, textarea)::placeholder { color: var(--fg-4); }
.demo-form :is(input, textarea):focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
.demo-form__submit { width: fit-content; margin-top: 22px; }
.demo-form__submit:disabled { opacity: .65; cursor: wait; transform: none; }
.demo-form__status { min-height: 1.5em; margin-top: 14px; color: var(--fg-2); font-size: .84rem; line-height: 1.5; }
.demo-form__status[data-state="error"] { color: var(--red); }
.demo-form__status[data-state="success"] { color: var(--green); }

@media (max-width: 760px) {
  .demo-dialog { padding: 12px; }
  .demo-dialog .contact-dialog__panel {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 24px);
  }
  .demo-dialog__intro,
  .demo-dialog__form-side { padding: 30px 26px; }
  .demo-dialog__intro { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .demo-dialog__intro h2 { max-width: 12ch; }
  .demo-dialog__direct { padding-top: 28px; }
  .demo-dialog__form-side { padding-top: 34px; }
}

@media (max-width: 420px) {
  .demo-dialog__intro,
  .demo-dialog__form-side { padding-left: 22px; padding-right: 22px; }
  .demo-dialog__intro h2 { font-size: 2rem; }
  .demo-form__submit { width: 100%; }
}