/* Il foglio di stile del sito: gli stessi colori del gestionale, perche' chi arriva dal
   sito deve riconoscere il programma e non credere di essere finito altrove. */

:root {
    --fondo: #f8fafc;
    --scuro: #0f172a;
    --testo: #1e293b;
    --tenue: #64748b;
    --azione: #16a34a;
    --bordo: #e2e8f0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--testo);
    background: var(--fondo);
    line-height: 1.6;
}

a { color: #15803d; }

header.testata {
    background: var(--scuro);
    color: #e2e8f0;
    padding: 3.5rem 1.25rem;
}

.contenuto { max-width: 52rem; margin: 0 auto; }

h1 { font-size: 2rem; margin: 0 0 .75rem; line-height: 1.2; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; }

.sommario { font-size: 1.05rem; color: #cbd5e1; margin: 0; }

main { padding: 1rem 1.25rem 4rem; }

ul.elenco { padding-left: 1.2rem; }
ul.elenco li { margin: .35rem 0; }

.riquadro {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: .6rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.riquadro.errore { border-color: #fecaca; background: #fef2f2; }
.riquadro.bene { border-color: #bbf7d0; background: #f0fdf4; }

label { display: block; margin: .9rem 0; font-weight: 500; }
label small { display: block; font-weight: 400; color: var(--tenue); }

input[type=text], input[type=email], textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #cbd5e1;
    border-radius: .4rem;
    font: inherit;
    margin-top: .25rem;
}

button {
    background: var(--azione);
    color: #fff;
    border: 0;
    border-radius: .4rem;
    padding: .65rem 1.3rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button:hover { background: #15803d; }

/* Il campo esca: invisibile a un umano, compilato da un robot. Non si usa
   display:none, che qualche robot riconosce. */
.esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nota { color: var(--tenue); font-size: .92rem; }

.pagina-esito { padding: 3rem 1.25rem; }
.pagina-esito .riquadro { max-width: 34rem; margin: 0 auto; }

footer { border-top: 1px solid var(--bordo); padding: 1.5rem 1.25rem; color: var(--tenue); font-size: .9rem; }

/* ------------------------------------------------------------------ barra di navigazione */

.barra {
    background: var(--scuro);
    border-bottom: 1px solid #1e293b;
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra-dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.25rem;
    flex-wrap: wrap;
}

.marchio {
    color: #fff;
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.marchio strong { color: var(--azione); }

.barra-voci { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }

.barra-voci a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: .95rem;
}

.barra-voci a:hover { color: #fff; }
.barra-voci a.qui { color: #fff; font-weight: 600; }

.barra-voci a.barra-azione {
    background: var(--azione);
    color: #fff;
    padding: .4rem .9rem;
    border-radius: .4rem;
    font-weight: 600;
}

.barra-voci a.barra-azione:hover { background: #15803d; }

/* «Entra» sta accanto a «Chiedi un invito» ma non gli somiglia: chi ha già un accesso e
   chi non ce l'ha ancora vogliono due cose diverse, e due pulsanti pieni uno accanto
   all'altro fanno esitare entrambi. Contorno per il primo, pieno per il secondo. */
.barra-voci a.barra-entra {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .45);
    color: #4ade80;
    padding: .42rem .95rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.barra-voci a.barra-entra:hover {
    background: var(--azione);
    border-color: var(--azione);
    color: #fff;
}

/* La freccia si sposta di due pixel al passaggio: dice «questo porta via da qui», che e'
   esattamente cosa fa — manda a un altro indirizzo, non a un'altra pagina del sito. */
.barra-voci a.barra-entra .freccia { transition: transform .15s ease; }
.barra-voci a.barra-entra:hover .freccia { transform: translateX(2px); }

/* ------------------------------------------------------------------ testata e azioni */

header.testata.compatta { padding: 2.5rem 1.25rem; }

.azioni-testata { display: flex; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap; }

.pulsante, .pulsante-contorno {
    display: inline-block;
    padding: .65rem 1.3rem;
    border-radius: .4rem;
    font-weight: 600;
    text-decoration: none;
}

.pulsante { background: var(--azione); color: #fff; }
.pulsante:hover { background: #15803d; }

.pulsante-contorno { border: 1px solid #475569; color: #e2e8f0; }
.pulsante-contorno:hover { border-color: #94a3b8; }

/* ------------------------------------------------------------------ schede in griglia */

.griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 2rem;
}

.scheda {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: .6rem;
    padding: 1.1rem 1.2rem;
}

.scheda h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.scheda p { margin: 0; font-size: .95rem; }
.scheda.compatta p { font-size: .92rem; }

/* ------------------------------------------------------------------ funzionalità e fasi */

.area, .fase, .voce-storia {
    border-top: 1px solid var(--bordo);
    padding-top: 1.2rem;
    margin-top: 1.8rem;
}

.manca {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: .7rem .9rem;
    margin: .9rem 0 0;
    font-size: .93rem;
}

.fase-testa { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fase-testa h2 { margin: 0; flex: 1 1 auto; }

.numero-fase {
    background: var(--scuro);
    color: #fff;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    flex: none;
}

.distintivo {
    font-size: .78rem;
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.stato-fatta { background: #dcfce7; color: #166534; }
.stato-corso { background: #dbeafe; color: #1e40af; }
.stato-ferma { background: #fef3c7; color: #92400e; }
.stato-dafare { background: #f1f5f9; color: #475569; }

.voce-storia .data { color: var(--tenue); font-size: .85rem; margin: 0; }
.voce-storia h2 { margin: .2rem 0 .6rem; }

.riga-altro { margin-top: 2.5rem; font-weight: 600; }

code {
    background: #f1f5f9;
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-size: .9em;
}

footer p { margin: .4rem 0; }

/* ------------------------------------------------------------------ le tre carte

   Erano tre riquadri uguali in una griglia che ne metteva due per riga: il terzo restava
   spaiato con un buco accanto, e si leggeva come una pagina rotta. Adesso sono tre
   colonne vere, e se non ci stanno diventano una sola — mai due, che e' il caso in cui
   uno resta solo.

   Ogni carta porta un numero grande e una frase in evidenza: chi scorre legge quelle due
   cose e capisce il punto senza leggere il paragrafo. Chi vuole il perche' lo trova
   sotto. */

.sommario-sezione {
    color: var(--tenue);
    font-size: 1.02rem;
    margin: 0 0 1.5rem;
    max-width: 44rem;
}

/* La colonna del testo e. larga 52rem perche. oltre quella misura un paragrafo si legge
   male: l.occhio perde la riga tornando a capo. Tre carte in 52rem starebbero strette, e
   infatti la griglia di prima ne faceva stare solo due. Qui la sezione intera — titolo,
   sommario e carte — esce dalla colonna e si allarga: allargare solo le carte lascerebbe
   il titolo spostato a sinistra rispetto a quello che intitola, che si nota subito. */
.sezione-larga {
    width: min(64rem, calc(100vw - 2.5rem));
    margin-left: 50%;
    transform: translateX(-50%);
}

.griglia-tre {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin: 1.25rem 0 2.5rem;
}

.carta {
    position: relative;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: .75rem;
    padding: 1.5rem 1.35rem 1.35rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.carta:hover {
    border-color: #bbf7d0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .07);
    transform: translateY(-2px);
}

/* Il numero e' decorativo e si comporta come tale: grosso, tenue, dietro al titolo.
   Serve a dire «sono tre» con un'occhiata, non a essere letto. */
.carta-segno {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--azione);
    opacity: .6;
    margin-bottom: .55rem;
}

.carta h3 {
    margin: 0 0 .7rem;
    font-size: 1.12rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* La frase che fa capire il punto in tre secondi: piu' grande del corpo, su fondo chiaro,
   staccata dal resto. E' quella che si legge scorrendo col pollice. */
.carta-punto {
    margin: 0 0 .85rem;
    padding: .7rem .8rem;
    background: #f0fdf4;
    border-left: 3px solid var(--azione);
    border-radius: 0 .4rem .4rem 0;
    font-size: 1rem;
    color: #14532d;
}

.carta-punto strong { font-weight: 700; }

.carta p:not(.carta-punto) {
    margin: 0;
    font-size: .95rem;
    color: var(--tenue);
    line-height: 1.65;
}

/* Sotto gli 860px le tre colonne diventano una. Non due: con due, la terza carta resta
   sola in fondo con meta' riga vuota accanto, che e' il difetto da cui si e' partiti. */
@media (max-width: 860px) {
    .griglia-tre { grid-template-columns: 1fr; gap: .9rem; }
    .sezione-larga { width: auto; margin-left: 0; transform: none; }
    .carta { padding: 1.25rem 1.1rem 1.1rem; }
}

/* ------------------------------------------------------------------ leggibilità

   Il corpo del testo era 16px con interlinea 1.6 su una colonna di 52rem: giusto. Quello
   che mancava erano i titoli, tutti vicini fra loro di corpo, e la distanza fra le
   sezioni — un sito che spiega un prodotto si scorre, e lo scorrimento si guida con lo
   spazio bianco, non con i bordi. */

h1 { letter-spacing: -.02em; }

h2 {
    font-size: 1.6rem;
    letter-spacing: -.02em;
    margin: 3.25rem 0 .5rem;
}

h3 { letter-spacing: -.01em; }

main p { font-size: 1rem; }

/* I numeri — importi, percentuali, codici di scarto — a larghezza fissa anche qui: sono
   gli stessi numeri che si vedranno nel programma, e devono avere la stessa faccia. */
body { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.35rem; margin-top: 2.5rem; }
    header.testata { padding: 2.25rem 1.1rem; }
    main { padding: 1rem 1.1rem 3rem; }

    /* In testata i due pulsanti vanno a capo e si prendono tutta la larghezza: su un
       telefono un pulsante stretto in mezzo allo schermo si manca col pollice. */
    .azioni-testata { gap: .6rem; }
    .azioni-testata .pulsante, .azioni-testata .pulsante-contorno {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* La barra di navigazione non sta nella colonna del testo: le voci piu' il pulsante
   «Entra nell'app» non ci stavano in 52rem e il marchio finiva su una riga per conto suo.
   Si allarga quanto le sezioni delle carte, e il marchio non va mai a capo. */
.barra .contenuto { max-width: 64rem; }
.marchio { white-space: nowrap; }

@media (max-width: 760px) {
    /* Sul telefono la barra va a capo apposta: marchio sopra, voci sotto, e le voci
       scorrono in orizzontale invece di impilarsi su quattro righe. */
    .barra-dentro { gap: .5rem; padding: .6rem 1rem; }

    .barra-voci {
        width: 100%;
        gap: .9rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .15rem;
    }

    .barra-voci::-webkit-scrollbar { display: none; }
    .barra-voci a { white-space: nowrap; }
}

/* ------------------------------------------------------------------ piede

   I dati della società e l'altro prodotto: staccati dal resto da una riga, perché sono
   un'altra cosa rispetto a quello che si stava leggendo. Il nome e la partita IVA in
   evidenza — sono quello che si cerca quando si vuole sapere a chi si sta dando la
   propria contabilità. */

.dati-societa {
    border-top: 1px solid var(--bordo);
    margin-top: 1.25rem;
    padding-top: 1.1rem;
}

.dati-societa p { margin: 0; font-size: .9rem; line-height: 1.7; }
.dati-societa strong { color: var(--testo); }

.altro-prodotto {
    margin: 1.1rem 0 0;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: .5rem;
    font-size: .9rem;
}

.altro-prodotto strong { color: var(--testo); }

/* Un richiamo laterale dentro il flusso: sfondo tinto e un bordo a sinistra, come le
   frasi in evidenza delle carte, cosi' si legge che e' una cosa a parte senza che sembri
   una pubblicita' appiccicata. */
.richiamo {
    background: #f8fafc;
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--scuro);
    border-radius: 0 .5rem .5rem 0;
    padding: 1.1rem 1.25rem;
    margin: 2rem 0 0;
}

.richiamo h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.richiamo p { margin: 0 0 .5rem; font-size: .95rem; }
.richiamo p:last-child { margin-bottom: 0; font-weight: 600; }

/* ------------------------------------------------------------------ l'avviso della beta

   Giallo e non rosso: il rosso dice «e' andato storto qualcosa», e usarlo per un avviso
   che sta li' sempre lo svaluterebbe dove serve davvero. Il giallo dice «leggi prima di
   proseguire». I tre punti sono numerati apposta: la numerazione dice «sono tre cose,
   finiscono», e senza di essa un elenco di avvertenze si salta. */

.avviso-beta {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: .6rem;
    padding: 1.35rem 1.5rem;
    margin: 1.25rem 0 1.5rem;
    color: #713f12;
}

.avviso-beta .avviso-beta-titolo {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-size: 1.1rem; font-weight: 700;
    color: #78350f;
    margin: 0 0 .7rem;
}

.avviso-beta-segno {
    background: #92400e; color: #fff;
    border-radius: 999px;
    padding: .12rem .6rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
}

.avviso-beta p { margin: 0 0 .7rem; font-size: .97rem; }
.avviso-beta ol { margin: 0; padding-left: 1.3rem; }
.avviso-beta li { margin-bottom: .65rem; line-height: 1.65; font-size: .95rem; }
.avviso-beta li:last-child { margin-bottom: 0; }
.avviso-beta strong { color: #78350f; }

.avviso-beta .avviso-beta-coda {
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid #fde68a;
    font-size: .92rem;
}

@media (max-width: 560px) {
    .avviso-beta { padding: 1.1rem 1rem; }
    .avviso-beta ol { padding-left: 1.1rem; }
}

/* La riga nel piede: la stessa cosa detta in breve, per chi arriva in fondo a una pagina
   interna senza essere passato dal modulo. */
.piede-beta {
    border-top: 1px solid var(--bordo);
    padding-top: 1.1rem;
    margin-top: 1.25rem;
}