.nf-form {
  display: grid;
  gap: var(--nf-space-12);
  width: min(100%, var(--nf-content-width));
}

.nf-form--wide {
  width: min(100%, 720px);
}

.nf-form-grid {
  display: grid;
  gap: var(--nf-space-12);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nf-field,
.nf-form textarea {
  width: 100%;
  min-height: 44px;
  border-radius: var(--nf-radius-12);
  border: var(--nf-border-strong);
  background: var(--nf-surface-600);
  color: inherit;
  padding: 0 0.875rem;
  font: inherit;
  transition: border-color var(--nf-theme-transition), box-shadow var(--nf-theme-transition), background-color var(--nf-theme-transition);
}

.nf-form textarea {
  min-height: 120px;
  padding: 0.875rem;
  resize: vertical;
}

.nf-field:focus,
.nf-form textarea:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 234, 255, 0.12);
}

.nf-form-actions {
  display: flex;
  gap: var(--nf-space-16);
  flex-wrap: wrap;
  align-items: center;
}

.nf-feedback {
  color: var(--nf-text-300);
}

.nf-form-label {
  display: grid;
  gap: 0.35rem;
  color: var(--nf-text-100);
}

.nf-form-challenge {
  display: grid;
  gap: var(--nf-space-12);
  padding: var(--nf-space-16);
  border-radius: var(--nf-radius-16);
  border: var(--nf-border-subtle);
  background: rgba(0, 234, 255, 0.05);
}

.nf-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .nf-form,
  .nf-form--wide {
    width: 100%;
  }
}