/* ============================================================
   /free/ - free brand check landing page
   Migrated from the WordPress page /en/free/ ("LP 4 Free") on
   2026-10-10. Everything else on the page is shared lp-* / sales-* /
   cs-study / trusted-logos markup; this file only places the
   shared brand-check card (includes/brandcheck-card.php) in the
   hero.
   ============================================================ */

/* --- Hero: copy left, brand-check card right ------------------
   Three grid items so the card can sit between the copy and the
   buttons on phones (the form is the point of the page). */
.free-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
        "text    card"
        "actions card";
    column-gap: var(--space-3xl);
    align-items: center;
}

.free-hero__text    { grid-area: text; align-self: end; }
.free-hero__actions { grid-area: actions; align-self: start; }
.free-hero__card    { grid-area: card; }

/* The homepage shows the card only in 'form' mode or when #brand-check is
   targeted; here it is always on, and fills its column. */
.free-hero .hero__checkcard {
    display: block;
    max-width: none;
    margin-top: 0;
}

/* an <input> keeps its intrinsic ~240px min width inside the flex row, which
   pushed "Check my brand" past the card's padding at 1440px */
.free-hero .hero__check-input { min-width: 0; }

/* Narrow card column on small desktops: field above button, as on phones. */
@media (min-width: 901px) and (max-width: 1199px) {
    .free-hero .hero__check { flex-direction: column; align-items: stretch; }
    .free-hero .hero__check-input { flex: none; width: 100%; }
    .free-hero .hero__check .btn { width: 100%; }
}

@media (max-width: 900px) {
    .free-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "card"
            "actions";
        row-gap: var(--space-xl);
    }

    .free-hero .lp-hero__lead { margin-bottom: 0; }
}

/* --- "How it works" button under the steps ------------------- */
.free-steps__cta {
    margin-top: var(--space-2xl);
    text-align: center;
}