/*
 * Navy card carrying partials/lead-form.php: the closing capture block of
 * the home page, of a course page and of the certification page were three
 * copies of the same fifty lines. The form skin itself is 13-lead-form.css,
 * written for a white surface - everything here is the re-tint for the dark
 * one, including the focus ring and the status strip, whose defaults lose
 * contrast on navy (static-site-css.md #9 allows exactly this locally).
 *
 * A section that renders the light variant of the same card simply does not
 * add this class (sections/course-offer.php with no bonuses).
 */

.lead-card {
    padding: 2.08vw;
    background: var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-emphasis);
}

.lead-card .lead__title {
    font-size: 1.67vw;
    color: #fff;
}

.lead-card .lead__text {
    color: rgba(255, 255, 255, 0.85);
}

.lead-card .lead-form {
    max-width: none;
}

.lead-card .lead-form__field {
    color: #fff;
}

.lead-card .lead-form__agreement {
    color: rgba(255, 255, 255, 0.85);
}

.lead-card .lead-form__agreement a {
    color: #fff;
    text-decoration: underline;
}

.lead-card .lead-form__note,
.lead-card .lead-form__hint {
    color: rgba(255, 255, 255, 0.85);
}

.lead-card .lead-form__required {
    color: var(--color-cta);
}

.lead-card .lead-form__submit {
    box-shadow: 0 0.63vw 1.25vw rgba(230, 57, 70, 0.3);
}

.lead-card .lead-form :focus-visible {
    outline-color: var(--color-surface);
}

.lead-card .lead-form__status.is-success,
.lead-card .lead-form__status.is-error {
    color: var(--color-surface);
    background: color-mix(in srgb, var(--color-surface) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

.lead-card .lead-form__status.is-error {
    border-color: var(--color-cta);
}

@media only screen and (max-width: 767.98px) {
    .lead-card {
        padding: 6.4vw;
    }

    .lead-card .lead__title {
        font-size: 6.4vw;
    }
}