/**
 * LA PAGINA DEL PROGRAMMA DI AFFILIAZIONE
 * ===========================================================================
 *
 * ── PERCHE' UN FOGLIO SUO ───────────────────────────────────────────────────
 * Perche' e' l'unica pagina del sito che deve convincere qualcuno a lavorare
 * con noi, e non assomiglia a niente altro: non e' una macchina, non e' la
 * dashboard, e soprattutto non e' un documento legale — quelli hanno
 * `legale.css`, colonna stretta e righe alte, che e' il contrario di cio' che
 * serve qui.
 *
 * ── NESSUN COLORE NUOVO ─────────────────────────────────────────────────────
 * Tutto viene da `tokens.css`. Una pagina che vende con colori suoi e' una
 * pagina che il giorno del cambio di marca resta indietro, e lo si scopre
 * dalla foto di un affiliato.
 *
 * ── LA MISURA ───────────────────────────────────────────────────────────────
 * 62rem, piu' larga dei documenti (che stanno sui 40) e piu' stretta delle
 * pagine di prodotto: le schermate hanno bisogno di spazio, il testo no.
 *
 * powered by visualsense.it
 */

.prog {
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(var(--space-6), 6vw, var(--space-10)) var(--space-5) var(--space-10);
}

/* ── 1 · L'apertura ──────────────────────────────────────────────────────── */

.prog__apertura {
    text-align: center;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border);
}

.prog__occhiello {
    margin: 0 0 var(--space-3);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.prog__titolo {
    margin: 0 0 var(--space-4);
    font-family: var(--type-family-display);

    /* Due righe su desktop, quante ne servono sul telefono: il `<br>` viene
       dal testo, ma sotto una certa larghezza va a capo comunque. */
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.15;
    color: var(--text);
}

.prog__claim {
    max-width: 40rem;
    margin: 0 auto var(--space-6);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-dim);
}

/* ── LE DUE CIFRE ────────────────────────────────────────────────────────────
   Stanno nel sottotitolo dentro una frase, e li' si leggono come tutto il
   resto. Qui si GUARDANO: chi scorre veloce deve poterle prendere senza
   leggere, perche' sono la ragione per cui la pagina viene aperta. */
.prog__cifre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin: 0 auto var(--space-7);
    padding: 0;
    max-width: 44rem;
}

.prog__cifre > div {
    flex: 1 1 14rem;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .015);
}

.prog__cifre dt {
    font-family: var(--type-family-display);
    font-size: clamp(2rem, 6vw, 2.9rem);
    line-height: 1;
    color: var(--accent);
}

.prog__cifre dd {
    margin: var(--space-2) 0 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-dim);
}

.prog__azione { margin: 0 0 var(--space-3) }

/* Il pulsante: e' lo stesso gesto in cima e in fondo, quindi lo stesso oggetto. */
.prog__cta {
    display: inline-block;
    padding: var(--space-3) var(--space-7);
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-size: 1.02rem;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.prog__cta:hover,
.prog__cta:focus-visible {
    background: var(--accent);
    color: var(--bg);
}

.prog__nota {
    margin: 0;
    font-size: .85rem;
    color: var(--text-faint);
}

.prog__nota a { color: var(--text-dim) }

/* ── Le sezioni ──────────────────────────────────────────────────────────── */

.prog__sezione { padding: var(--space-8) 0; border-bottom: 1px solid var(--border) }

.prog__h2 {
    margin: 0 0 var(--space-4);
    font-family: var(--type-family-display);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    color: var(--accent);
}

.prog__testo {
    max-width: 44rem;
    margin: 0 0 var(--space-5);
    line-height: 1.7;
    color: var(--text-dim);
}

/* ── 2 · I tre passi ─────────────────────────────────────────────────────── */

.prog__passi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.prog__passo {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .015);
}

.prog__passo h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
    color: var(--text);
}

.prog__passo p { margin: 0; line-height: 1.65; color: var(--text-dim); font-size: .95rem }

/* Il numero non e' un `list-style`: deve stare sopra il titolo e avere un
   peso suo, e un contatore CSS non si puo' impaginare. */
.prog__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-family: var(--type-family-utility);
    font-size: .9rem;
    color: var(--accent);
}

/* ── 3 · Le schermate ────────────────────────────────────────────────────── */

.prog__scatto { margin: var(--space-6) 0 0 }

/* ── LA CORNICE A FINESTRA ───────────────────────────────────────────────────
   Prima c'era solo un bordo sottile e un'ombra, e non bastava: la schermata e'
   scura quanto la pagina, e chi scorreva vedeva il testo continuare dentro un
   riquadro senza capire dove finisse il sito e cominciasse l'esempio.

   La barra coi tre segni e' la convenzione che tutti riconoscono. Dice
   «finestra» prima che si legga la didascalia, e costa tre `<span>` vuoti. */
.prog__finestra {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;

    /* Piu' chiaro della pagina di un soffio: quanto basta perche' il bordo
       non sia l'unica cosa che separa. */
    background: rgb(255 255 255 / .02);
    box-shadow: 0 22px 60px rgb(0 0 0 / .5);
}

.prog__barra {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px var(--space-4);
    background: rgb(255 255 255 / .03);
    border-bottom: 1px solid var(--border);
}

.prog__barra span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--border-strong);
}

.prog__scatto img {
    display: block;
    width: 100%;
    height: auto;
}

.prog__scatto figcaption {
    margin-top: var(--space-3);
    font-size: .8rem;
    color: var(--text-faint);
    text-align: center;
}

/* ── 4 · Il conto ────────────────────────────────────────────────────────── */

/* Il conto in una scheda: e' un documento dentro la pagina, non un paragrafo
   con dei numeri a destra. */
.prog__conto {
    width: 100%;
    max-width: 34rem;
    margin: 0 0 var(--space-5);
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .015);
    overflow: hidden;
}

.prog__conto th:first-child { padding-left: var(--space-5) }
.prog__conto td:last-child  { padding-right: var(--space-5) }

.prog__conto th,
.prog__conto td {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 400;
}

.prog__conto th { color: var(--text-dim); font-size: .95rem }

.prog__conto td {
    text-align: right;
    font-family: var(--type-family-utility);
    color: var(--text);
    white-space: nowrap;
}

.prog__conto-forte th { color: var(--text) }

.prog__conto-forte td {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
}

.prog__conto-forte th,
.prog__conto-forte td { border-bottom: 0 }

/* ── 6 · A chi serve ─────────────────────────────────────────────────────── */

.prog__adatto {
    max-width: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.prog__adatto li {
    position: relative;
    padding-left: var(--space-6);
    line-height: 1.65;
    color: var(--text-dim);
}

.prog__adatto li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--accent);
}

/* ── 7 · Le domande ──────────────────────────────────────────────────────── */

.prog__faq { max-width: 48rem; border-top: 1px solid var(--border) }

.prog__domanda { border-bottom: 1px solid var(--border) }

.prog__domanda summary {
    padding: var(--space-4) var(--space-6) var(--space-4) 0;
    cursor: pointer;
    position: relative;
    color: var(--text);
    line-height: 1.5;

    /* Il triangolo predefinito lo mettiamo noi, piu' sotto: quello di serie
       cambia forma fra i browser e non si puo' colorare. */
    list-style: none;
}

.prog__domanda summary::-webkit-details-marker { display: none }

.prog__domanda summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--type-family-utility);
    font-size: 1.1rem;
    color: var(--accent);
}

.prog__domanda[open] summary::after { content: '−' }

.prog__domanda p {
    margin: 0 0 var(--space-5);
    padding-right: var(--space-6);
    line-height: 1.7;
    color: var(--text-dim);
    font-size: .95rem;
}

/* ── 8 · La chiusura ─────────────────────────────────────────────────────── */

.prog__finale { padding: var(--space-10) 0 0; text-align: center }

.prog__finale .prog__testo { margin-left: auto; margin-right: auto }

/* ── Il telefono ─────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
    .prog { padding-left: var(--space-4); padding-right: var(--space-4) }

    .prog__sezione { padding: var(--space-6) 0 }

    /* Una schermata larga 820px su uno schermo da 360 e' illeggibile comunque:
       si lascia scorrere invece di rimpicciolirla fino a non vedersi. */
    .prog__scatto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prog__scatto img { min-width: 30rem }
}

/* Chi ha chiesto meno movimento non deve trovarne. */
@media (prefers-reduced-motion: reduce) {
    .prog__cta { transition: none }
}