/* Reference composition, scoped to the public homepage. */
.homepage-hero {
    padding-block: clamp(1.25rem, 2.5vw, 2rem);
    background: radial-gradient(ellipse at 100% 30%, #e7f3ff 0, transparent 60%), linear-gradient(155deg, #fff 15%, #f1f7ff 60%, #fff);
}
.homepage-hero > .container > .row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
.homepage-hero .eyebrow { color: #2160f5; font-size: .85rem; }
.homepage-hero .display-title { font-size: clamp(2.2rem, 3.2vw, 3.4rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.12; text-wrap: initial; }
.homepage-hero .display-title span { color: #2160f5; }
.homepage-hero .hero-copy { max-width: none; margin-top: .5rem !important; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.5; }
.homepage-hero .vehicle-check-form { margin-top: .85rem !important; padding: 1rem 1.25rem 0; border: 1px solid #e0ebfa; border-radius: 1rem; background: #ffffffed; box-shadow: 0 10px 25px #10254b08; overflow: hidden; }
.homepage-hero .vehicle-check-form .form-label { margin-bottom: .5rem; font-size: .82rem; font-weight: 750; letter-spacing: 0; }
.homepage-hero .vehicle-check-form__controls { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
.homepage-hero .registration-input { min-height: 3.75rem; font-size: clamp(1.6rem, 2.3vw, 2.3rem); letter-spacing: .12em; font-weight: 700; color: #334155; background: linear-gradient(110deg, #ffd719, #facc15); }
.homepage-hero .registration-input::placeholder { color: #475569; opacity: 1; }
.homepage-hero .registration-input:hover:not(.is-invalid) { border-color: var(--color-dark); }
.homepage-hero .registration-input:focus,
.homepage-hero .registration-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: none; }
.homepage-hero .vehicle-check-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-width: 10rem; min-height: 3.75rem; padding-inline: 1rem; border-radius: .65rem; background: #2160f5; font-size: .95rem; }
.homepage-hero .vehicle-check-form__submit:hover { background: #1d4ed8; }
.homepage-hero .vehicle-check-form__arrow { font-size: 1.65rem; font-weight: 400; line-height: 1; }
.homepage-hero #registration-hint { font-size: .85rem; line-height: 1.5; margin-bottom: .5rem !important; }
.homepage-hero .hero-assurance { display: flex; align-items: center; margin: .4rem -1.25rem 0 !important; padding: .35rem 1.25rem; background: #f0f7ff; color: #17243c; font-size: .82rem; font-weight: 500; line-height: 1.4; gap: .5rem; }
.homepage-hero .hero-assurance > span { display: grid; place-items: center; flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #dcecff; color: #2160f5; font-size: .95rem; font-weight: 600; line-height: 1; }
.homepage-hero .hero-benefits { position: relative; isolation: isolate; overflow: hidden; padding: 1.25rem; border: 1px solid #193052; border-radius: 1rem; background: radial-gradient(ellipse at 100% 65%, #12345c 0, transparent 55%), linear-gradient(130deg, #071428, #0b1e39); box-shadow: 0 10px 25px #10254b12; }
.homepage-hero .hero-benefits::before { content: ""; position: absolute; z-index: -1; right: -9rem; top: 28%; width: 17rem; height: 22rem; background: url("../images/hero-car.svg") center / contain no-repeat; opacity: .22; pointer-events: none; }
.homepage-hero .hero-benefits__heading { position: relative; gap: .75rem; margin-bottom: .6rem; }
.homepage-hero .hero-benefits__line { width: 1.8rem; }
.homepage-hero .hero-benefits h2 { font-size: clamp(1.2rem, 1.55vw, 1.45rem); font-weight: 800; line-height: 1.3; }
.homepage-hero .hero-benefit { position: relative; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .75rem; padding-block: .85rem; border-color: #253953; }
.homepage-hero .hero-benefit__number { position: relative; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 1rem; background: #14345c; color: #3092ff; }
.homepage-hero .hero-benefit__number svg { width: 1.65rem; height: 1.65rem; }
.homepage-hero .hero-benefit h3 { font-size: 1rem; font-weight: 750; margin-bottom: .25rem; }
.homepage-hero .hero-benefit p { font-size: .9rem; color: #bccce2; line-height: 1.5; }
@media (min-width: 1200px) {
    /* Scope the shared width to the four upper sections; preserve CTA/footer. */
    .homepage-hero > .platescan-container,
    .homepage .home-fuel > .platescan-container,
    .homepage .home-benefits > .platescan-container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: 24px;
    }
    .homepage .home-fuel__finder,
    .homepage .home-benefits__panel { max-width: none; }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .homepage-hero .vehicle-check-form { padding-inline: 1rem; }
    .homepage-hero .hero-assurance { margin-inline: -1rem !important; padding-inline: 1rem; }
    .homepage-hero .vehicle-check-form__controls { gap: .6rem; }
    .homepage-hero .vehicle-check-form__submit { min-width: 9rem; font-size: .9rem; }
    .homepage-hero .hero-benefits { padding: 1.25rem; }
}
@media (max-width: 991.98px) {
    .homepage-hero > .container > .row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .homepage-hero .display-title { font-size: clamp(2.1rem, 4.8vw, 3rem); }
    .homepage-hero .hero-benefits { display: block; }
}
@media (max-width: 575.98px) {
    .homepage-hero { padding-block: 1.25rem; }
    .homepage-hero .display-title { font-size: clamp(1.9rem, 6.8vw, 2.35rem); }
    .homepage-hero .vehicle-check-form { padding: 1rem 1rem 0; }
    .homepage-hero .vehicle-check-form__controls { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .homepage-hero .registration-input { min-height: 3.5rem; font-size: 1.8rem; }
    .homepage-hero .vehicle-check-form__submit { min-height: 3.5rem; width: 100%; }
    .homepage-hero .hero-assurance { margin-inline: -1rem !important; padding-inline: 1rem; font-size: .8rem; }
    .homepage-hero .hero-benefits { padding: 1.25rem; }
    .homepage-hero .hero-benefit { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .65rem; }
    .homepage-hero .hero-benefit p { font-size: .9rem; }
}