/* ==========================================================================
   HORNOI — AUTONOMIA DIGITALE · LEAD GENERATION
   Solo quello che ha questa pagina: la fotografia al posto del video, le
   quattro fasi in versione corta e il modulo a un campo.

   Tutto il resto — apertura, sfumature, ritratto, numeri, pannello «cosa ti
   resta», recensioni — arriva da story.css e da pages.css, che è il motivo
   per cui questa pagina è nata in un pomeriggio invece che in due giorni.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA FOTOGRAFIA
   Prende il posto che sulla pagina lunga è del video. Non è un ripiego: su
   una pagina che si legge in un minuto una foto vera dice «c'è una persona»
   molto più in fretta di qualunque paragrafo.
   -------------------------------------------------------------------------- */
.hornoi .al-shot {
    position: relative;
    max-width: 940px;
    margin: clamp(34px, 4.4vw, 56px) auto 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 2 / 1;
}

.al-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.35) contrast(1.05);
    transition: filter .7s var(--ease-io), transform .9s var(--ease);
}
.al-shot:hover img { filter: grayscale(0); transform: scale(1.02); }

.al-shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 3px;
    padding: clamp(20px, 2.4vw, 28px);
    text-align: left;
    background: linear-gradient(to top, rgba(10, 10, 10, .88), transparent);
}
.al-shot figcaption b {
    font-family: var(--f-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
}
.al-shot figcaption span { font-size: .82rem; color: rgba(255, 255, 255, .68); }

/* --------------------------------------------------------------------------
   LE QUATTRO FASI, IN CORTO
   Niente stepper con le scene animate: questa pagina si scorre in fretta, e
   una meccanica da esplorare col mouse non la esplora nessuno.
   -------------------------------------------------------------------------- */
/* Niente margin/padding/list-style qui: li azzera già il reset di core.css,
   e riscriverli con il prefisso .hornoi vale (0,2,0) — la stessa specificità
   di .hornoi .mt-7, che sta prima nel foglio e quindi perdeva. Risultato: il
   titolo della sezione restava incollato alle schede. */
.al-fasi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1000px) { .al-fasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .al-fasi { grid-template-columns: minmax(0, 1fr); } }

.al-fase {
    padding: clamp(22px, 2.4vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.al-fase__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.al-fase__ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 90, 31, .14);
    color: var(--orange);
}
.al-fase__ico svg { width: 15px; height: 15px; }

.al-fase__when {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    color: var(--fg-muted);
    white-space: nowrap;
}

.hornoi .al-fase p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   IL MODULO
   Un campo e il bottone sulla stessa riga: due elementi che si guardano
   sembrano un'unica azione, incolonnati sembrano due passaggi.
   -------------------------------------------------------------------------- */
.al-form {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.hornoi .al-form__t { margin-top: var(--sp-3); text-wrap: balance; }

.hornoi .al-form__lead {
    max-width: 54ch;
    margin: var(--sp-4) auto 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--fg-soft);
}

.al-form__f { margin-top: clamp(28px, 3.4vw, 40px); }

/* Nome e numero affiancati, il bottone su una riga sua. Con tre elementi
   sulla stessa riga il campo del telefono si stringeva fino a non far più
   vedere le ultime cifre mentre si scrive — che su un numero è il momento
   in cui si controlla di non aver sbagliato. */
.al-form__campi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 620px) { .al-form__campi { grid-template-columns: minmax(0, 1fr); } }

.al-form__campo { min-width: 0; }

.al-form__campo input {
    width: 100%;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--fg);
    font-size: 1.05rem;
}
.al-form__campo input::placeholder { color: var(--fg-faint); }
.al-form__campo input:focus-visible {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, .14);
}

.al-form__go {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

/* fuori dallo schermo e fuori dal percorso di tabulazione: un umano non lo
   trova, un bot lo riempie */
.al-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.al-form__privacy {
    display: flex;
    gap: 11px;
    margin-top: 18px;
    text-align: left;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--fg-muted);
    cursor: pointer;
}
.al-form__privacy input { margin-top: 3px; flex: none; accent-color: var(--orange); }
.al-form__privacy a { color: var(--orange); text-underline-offset: 3px; }

.hornoi .al-form__nota {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    text-align: left;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--fg-faint);
}
.al-form__nota svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.al-form__sig { justify-content: center; margin-top: clamp(28px, 3.4vw, 40px); }

/* --------------------------------------------------------------------------
   L'ESITO
   Arriva dall'indirizzo dopo il redirect. role="status" nel markup: chi usa
   un lettore di schermo lo sente senza dover ritrovare il punto.

   Queste tre regole sembrano non usate a un controllo automatico: il blocco
   esiste solo dopo un invio, quando l'indirizzo porta ?lead=. Non si tolgono.
   -------------------------------------------------------------------------- */
.hornoi .al-esito {
    display: flex;
    gap: 12px;
    margin: clamp(24px, 3vw, 32px) 0 0;
    padding: 16px 20px;
    border-radius: var(--r);
    text-align: left;
    font-size: .95rem;
    line-height: 1.55;
}
.al-esito svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

.al-esito--ok {
    border: 1px solid rgba(63, 207, 107, .32);
    background: rgba(63, 207, 107, .08);
    color: var(--green-hi);
}
.al-esito--ko {
    border: 1px solid rgba(255, 90, 31, .34);
    background: rgba(255, 90, 31, .08);
    color: var(--orange-hi);
}