.mn-contact-page .mn-contact-inner { max-width: calc(560px + 2 * var(--mn-gutter)); }
.mn-contact-page .mn-contact-h1 { color: var(--mn-violet-ink); }

.mn-contact-page .mn-contact-card {
  padding: var(--mn-space-6);
  background: var(--mn-bg);
  border: 1px solid var(--mn-hairline); border-radius: var(--mn-radius-xl);
}
@media (min-width: 861px) {
  .mn-contact-page .mn-contact-card { padding: var(--mn-space-10); }
}

.mn-contact-page .mn-contact-form { display: flex; flex-direction: column; gap: var(--mn-space-4); }
.mn-contact-page .mn-contact-form[hidden] { display: none; }
.mn-contact-page .mn-contact-fields { display: flex; flex-direction: column; gap: var(--mn-space-4); }

.mn-contact-page .mn-label { color: var(--mn-ink); }
.mn-contact-page .mn-label-req,
.mn-contact-page .mn-label-opt { color: var(--mn-muted); }

.mn-contact-page .mn-input[aria-invalid="true"] {
  border-color: var(--mn-coral-ink);
  box-shadow: 0 0 0 3px var(--mn-coral-tint);
}

.mn-contact-page .mn-contact-message {
  width: 100%; min-height: 144px; resize: vertical;
  line-height: 1.5;
}

.mn-contact-page .mn-contact-select { width: 100%; line-height: 1.4; cursor: pointer; }

.mn-contact-page .mn-contact-error { color: var(--mn-coral-ink); }
.mn-contact-page .mn-contact-error::before {
  background: currentColor;
  -webkit-mask: var(--mn-contact-error-icon) center / contain no-repeat;
  mask: var(--mn-contact-error-icon) center / contain no-repeat;
}
.mn-contact-page {
  --mn-contact-error-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27/%3E%3Cpath%20d%3D%27M12%208v5M12%2016.5v.01%27/%3E%3C/svg%3E");
}

.mn-contact-page .mn-contact-submit { width: 100%; padding: var(--mn-space-3) var(--mn-space-6); }

.mn-contact-page .mn-contact-confirm { color: var(--mn-ink); }
.mn-contact-page .mn-contact-confirm .confirm-mark { color: var(--mn-teal-ink); }
.mn-contact-page .mn-contact-confirm .confirm-body { color: var(--mn-muted); }
.mn-contact-page .mn-contact-confirm:focus { outline: none; }