/* ==========================================================================
   NextDigital - server-rendered form states
   Layered on marketing.css, which already provides .form-panel, .field-group,
   .field, textarea, .form-note, .btn-block and .success-mark.
   ========================================================================== */

:root { --danger: #dc2626; --danger-wash: rgba(220, 38, 38, .08); }
html[data-theme="dark"] { --danger: #f87171; --danger-wash: rgba(248, 113, 113, .12); }

.form-title {
    margin: 0 0 20px;
    font-size: 21px;
    line-height: 1.25;
}

.form-alert {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--danger);
    border-radius: 14px;
    background: var(--danger-wash);
    color: var(--danger);
    font-size: 13.5px;
    line-height: 1.6;
}

.field-error {
    margin: 0;
    color: var(--danger);
    font-size: 12.5px;
    line-height: 1.5;
}

.field.is-invalid {
    border-color: var(--danger);
}
.field.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.form-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.form-note a:hover { text-decoration: underline; }

.form-success {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 12px 0;
    text-align: center;
}
.form-success h2 { font-size: 22px; line-height: 1.25; }
.form-success .copy { max-width: 36ch; }
.form-success .success-mark svg { width: 24px; height: 24px; }

.contact-direct { color: var(--muted); font-size: 15px; line-height: 1.7; }
.contact-direct a { color: var(--accent); font-weight: 600; text-decoration: none; }
.contact-direct a:hover { text-decoration: underline; }

/* Honeypot: off-screen for people, still fillable by naive bots. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}