#contact-dialog {
  width:min(570px,calc(100% - 32px));
  max-width:570px;
  padding:28px;
}

#contact-dialog h2 {
  font-size:27px;
  letter-spacing:-.6px;
  margin:0 0 8px;
}

#contact-intro {
  color:var(--muted);
  font-size:17px;
  margin:0 0 22px;
}

#contact-fields {
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}

#contact-fields label {
  display:block;
  font-weight:600;
  font-size:16px;
  margin:15px 0 7px;
}

#contact-fields label:first-of-type {
  margin-top:0;
}

#contact-fields input,#contact-message {
  display:block;
  width:100%;
  min-width:0;
  padding:11px 12px;
  min-height:46px;
  border:1px solid #8ab3df;
  border-radius:8px;
  font:inherit;
  font-size:17px;
  line-height:1.45;
  color:var(--ink);
  background:#fff;
}

#contact-message {
  min-height:138px;
  resize:vertical;
}

#contact-message:focus-visible {
  outline:3px solid #077ea4;
  outline-offset:4px;
}

#contact-fields [aria-invalid="true"] {
  border-color:#b23838;
}

#contact-fields:disabled {
  opacity:.7;
}

#contact-fields .contact-honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}

#contact-fields .contact-honeypot input {
  min-height:0;
}

#contact-dialog .contact-field-error {
  color:#a52d2d;
  font-size:14px;
  line-height:1.4;
  margin:7px 0 0;
}

#contact-dialog .contact-note {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:12px 0 0;
}

#contact-privacy {
  padding:0;
  min-height:0;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

#contact-dialog a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}

#contact-status {
  font-size:16px;
  line-height:1.6;
  margin:18px 0 0;
  border-radius:8px;
}

#contact-status:empty {
  margin:0;
}

#contact-status[data-kind="error"] {
  padding:12px 14px;
  color:#8c2929;
  border:1px solid #edc3c3;
  background:#fff4f3;
}

#contact-status[data-kind="success"] {
  padding:14px;
  color:#205d3b;
  border:1px solid #b7dcca;
  background:#eef9f2;
}

.contact-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

@media (max-width:480px) {
  #contact-dialog {
    padding:20px;
  }
  #contact-intro {
    margin-bottom:18px;
  }
  #contact-message {
    min-height:116px;
  }
  #contact-submit {
    flex:1;
  }
  .contact-actions button {
    padding:12px 14px;
    font-size:16px;
  }
  .contact-actions {
    gap:8px;
  }
}