.hly-form {
    max-width: 40rem;
}
.hly-form [hidden] {
    display: none !important;
}
.hly-form__row {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1rem;
}
.hly-form__cols {
    display: flex;
    gap: 1rem;
}
.hly-form label {
    font-size: .9rem;
    font-weight: 600;
}
.hly-form label small {
    color: var(--hly-muted, #6d6a62);
    font-weight: 400;
}
.hly-form input[type="text"],
.hly-form input[type="email"],
.hly-form input[type="tel"],
.hly-form select,
.hly-form textarea {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid #8a8578;
    border-radius: var(--hly-radius-sm, 12px);
    background: #fff;
    font: inherit;
}
.hly-form input:focus-visible,
.hly-form select:focus-visible,
.hly-form textarea:focus-visible {
    border-color: var(--hly-teal, #386858);
    outline: 3px solid var(--hly-teal, #386858);
    outline-offset: 1px;
}
.hly-form button:focus-visible {
    outline: 3px solid var(--hly-ink, #2b2a27);
    outline-offset: 3px;
}
.hly-form__check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 400;
}
.hly-form__check input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .1rem;
    accent-color: var(--hly-teal, #386858);
}
.hly-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.hly-form__alert {
    margin-bottom: 1.25rem;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--hly-orange, #d98a3a);
    border-radius: 8px;
    background: var(--hly-orange-soft, #fbeedd);
}
.hly-form--done {
    padding: 1.5rem;
    border: 1px solid var(--hly-line, #e6dfd2);
    border-radius: 16px;
    background: var(--hly-cream, #faf6ef);
}
.hly-form--done h3 {
    margin: 0 0 .5rem;
}
.hly-form button.hly-btn[type="submit"] {
    display: inline-block;
    padding: .85em 1.8em !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--hly-teal, #386858) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.hly-form button.hly-btn[type="submit"]:hover {
    background: var(--hly-teal-dark, #2a5144) !important;
}
@media (max-width: 640px) {
    .hly-form__cols {
        flex-direction: column;
        gap: 0;
    }
}