/* Transfer Max — il poco che il tema del sito non aveva.
   Colori e bottoni restano quelli di style.css (--Yellow, .btn.black), cosi' le
   landing sono la stessa cosa del sito. */

/* ── Landing: hero con il form accanto al titolo ──────────────────────────── */

.lp-hero {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 60px 0;
    color: var(--White);
}

.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.lp-hero .container {
    position: relative;
}

.lp-hero h1 {
    font-size: 46px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.lp-hero .lp-sub p {
    font-size: 19px;
    margin-bottom: 20px;
}

.lp-punti {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    gap: 8px;
}

.lp-punti li {
    font-size: 17px;
    font-weight: 400;
    padding-left: 30px;
    position: relative;
}

.lp-punti li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--Yellow);
}

.lp-azioni {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.lp-form {
    background-color: var(--White);
    color: var(--Black);
    border-radius: 20px;
    padding: 30px;
}

.lp-form h2 {
    font-size: 26px;
    margin-bottom: 20px;
}

.lp-form .block {
    margin-bottom: 14px;
}

.lp-form .form-label {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
}

.lp-form .form-control,
.lp-form .form-select {
    border: 1px solid var(--Grey);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 16px;
}

.lp-form .form-check-label {
    font-size: 13px;
    font-weight: 300;
}

.lp-form .btn.black {
    border-radius: 100px;
}

.lp-micro {
    font-size: 13px;
    font-weight: 300;
    margin: 12px 0 0;
    text-align: center;
}

.lp-esito {
    border-radius: 12px;
    padding: 20px;
    background-color: var(--GreyLight);
}

.lp-esito h3 {
    margin-bottom: 8px;
}

.lp-esito.ko {
    background-color: #ffe9e9;
}

@media (max-width: 992px) {
    .lp-hero {
        padding: 36px 0;
    }

    .lp-hero h1 {
        font-size: 32px;
    }

    .lp-form {
        margin-top: 28px;
        padding: 20px;
    }
}

/* Trust bar e tratte: due righe di contenuto che il sito non aveva. */

.lp-trust {
    background-color: var(--Black);
    color: var(--White);
    padding: 22px 0;
}

.lp-trust-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 34px;
}

.lp-trust-lista li {
    font-size: 16px;
    font-weight: 400;
    padding-left: 26px;
    position: relative;
}

.lp-trust-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .4em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--Yellow);
}

.lp-tratte {
    padding: 100px 0;
}

.lp-tratte h2,
.lp-tratte h3 {
    text-align: center;
}

.lp-tratte h3 {
    font-weight: 300;
    margin-bottom: 20px;
}

.lp-tratta {
    height: 100%;
    background-color: var(--GreyLight);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-tratta h3 {
    font-size: 21px;
    text-align: left;
    margin: 0;
}

.lp-tratta p {
    font-size: 15px;
    margin: 0 0 auto;
}

.lp-tratta .btn.yellow {
    margin-top: 18px;
    font-size: 16px;
    padding: 12px 26px;
}

@media (max-width: 992px) {
    .lp-tratte {
        padding: 50px 0;
    }
}

/* Su mobile il form deve restare a un filo di scroll dal titolo: le due colonne
   dell'hero diventano `display: contents`, cosi' i loro figli sono elementi
   della stessa riga flex e si possono riordinare (titolo, sottotitolo, form, e
   solo dopo punti e pulsanti). */

@media (max-width: 992px) {
    .lp-hero .lp-testo,
    .lp-hero .lp-col-form {
        display: contents;
    }

    /* con `display: contents` il selettore dei figli e' quello della colonna,
       non `.row > *`: la colonna non fa piu' box ma resta nell'albero */
    .lp-hero .lp-testo > *,
    .lp-hero .lp-col-form > * {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .lp-hero h1 { order: 1; }
    .lp-hero .lp-sub { order: 2; }
    .lp-hero .lp-form { order: 3; margin: 4px 0 24px; }
    .lp-hero .lp-punti { order: 4; }
    .lp-hero .lp-azioni { order: 5; }

    .lp-hero .lp-sub p { margin-bottom: 14px; }
    .lp-hero .lp-punti { margin-bottom: 22px; }
}




/* ── Pagina preventivo: i tre passi ───────────────────────────────────────── */

/* Il tema da' ai box dei passi un'altezza fissa di 120px e mette
   `overflow-x: auto` sulla riga: basta una riga di testo in piu' e dentro la
   riga compare una barra di scorrimento verticale. I passi qui sono stati
   riscritti (il calcolatore non c'e' piu'), quindi il box si adatta al testo. */

.section-12 .timeline {
    overflow: visible;
}

.section-12 .timeline .col-12 {
    height: auto;
    min-height: 120px;
}