.form-notice {
    border-radius: 2px;
    display: grid;
    gap: .2rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 30px #071e2a12;
}

.form-notice strong {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.25;
}

.form-notice span {
    color: var(--muted);
    line-height: 1.5;
}

.form-notice--success {
    color: #145f43;
    background: #e9f7f0;
    border-color: #2c8c61;
}

.form-notice--error {
    color: #8c2525;
    background: #fff0f0;
    border-color: #b43d3d;
}

.form-notice:focus {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
}

.field input:user-invalid,
.field textarea:user-invalid {
    border-color: #b43d3d;
    box-shadow: 0 0 0 3px #b43d3d1c;
}

.field input::placeholder {
    color: #60717a99;
}