.contact-page {
  width: min(100%, 660px);
}

.contact-form {
  display: grid;
  gap: 9px;
  padding: clamp(16px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.contact-form label {
  font-weight: 650;
}

.contact-form label:not(:first-child) {
  margin-top: 8px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.contact-form textarea { resize: vertical; }
.contact-form small { color: var(--muted); }
.contact-form :is(input, textarea, button):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.contact-form altcha-widget {
  margin: 8px 0;
  --altcha-max-width: 100%;
  --altcha-color-base: var(--bg);
  --altcha-color-base-content: var(--text);
  --altcha-border-color: var(--line);
  --altcha-color-primary: var(--lime);
  --altcha-color-primary-content: var(--bg);
}

.contact-submit {
  justify-self: start;
  min-height: 44px;
}

.contact-submit:disabled { opacity: .58; cursor: default; }
.contact-status { margin: 0; min-height: 1.4em; }
.contact-status[data-error] { color: #ffc0bc; }

@media (max-width: 480px) {
  .contact-submit { justify-self: stretch; }
}