/* ============================================================================
   LA PAGINA DELL'EDITORIALE (`/articolo`) — 02/10/2026
   ----------------------------------------------------------------------------
   Un foglio SOLO per questa pagina, e poche regole: il guscio (barra, contenitori, riquadri) e il
   modulo (`iv-form`, pulsanti) arrivano da `studio.css` e `invite.css`, che sono gli stessi di
   `/opportunity` e `/crew`. Qui c'è soltanto quello che è nuovo: l'apertura, i tre numeri, le scelte del
   modulo («fin dove vuoi arrivare»), i riquadri ripiegati (i dieci portali, la distribuzione, i tre
   passi, i motivi), il consenso e l'elenco delle richieste per lo staff.

   Le variabili (`--st-*`, `--mood-primary`) le definisce `studio.css`, comprese le versioni del tema
   scuro: usando quelle, la pagina si comporta come tutte le altre senza una riga in più. I valori di
   ripiego restano scritti perché un foglio caricato da solo non diventi illeggibile.
   ============================================================================ */

/* ============================================================================
   LA TAVOLOZZA DELLA LANDING (07/10/2026)
   ----------------------------------------------------------------------------
   Il titolare: «ora voglio che sia più in stile landing page anche /articolo, così è bello graficamente
   allineato». La landing — `public/landing/editorial/` — ha già la sua tavolozza, scritta nel suo foglio
   (`css/editorial.css`, il blocco `:root`): il navy della copertina, il ciano, il viola, l'oro, i due
   gradienti (le icone tonde e la pillola che invita), il raggio 22 delle schede e la sua ombra.
   Quei valori si RILEGGONO qui con il prefisso `--ld-` davanti (landing), invece di essere ricopiati a
   naso dentro le regole: un colore si cambia in un posto solo, e si vede che è un prestito della landing
   e non un colore inventato per questa pagina. Il prefisso serve anche a non pestare i piedi a nessuno:
   `--st-*` è di `studio.css`, `--mood-*` di `mood.css`, e questi sono di questa pagina.
   I valori di ripiego restano scritti dentro le regole (come già fa il resto di questo foglio): se un
   giorno il file si carica da solo, la pagina non diventa illeggibile — diventa senza colore.
   ============================================================================ */
:root {
    --ld-navy-1: #0a1338;
    --ld-navy-2: #142a72;
    --ld-navy-3: #35206e;

    --ld-cyan: #4fd8ff;
    --ld-violet: #6d4dfa;
    --ld-blue: #3f6df0;
    --ld-gold: #f7bb3c;

    --ld-ink: #0a0f1f;
    --ld-ink-soft: #26304d;
    --ld-muted: #5d6781;
    --ld-card: #fff;
    --ld-card-soft: #f7f9fe;
    --ld-border: #e7ecf7;
    --ld-border-strong: #cfd8f2;

    --ld-grad-ico: linear-gradient(135deg, #2fb9f5 0%, #3f6df0 100%);
    --ld-grad-cta: linear-gradient(100deg, #5b2fd6 0%, #3f6df0 46%, #2f9bf6 100%);

    --ld-grad-hero:
        radial-gradient(118% 76% at 82% 10%, rgba(60,124,255,.55) 0%, rgba(60,124,255,0) 62%),
        radial-gradient(90% 60% at 8% 96%, rgba(120,70,255,.35) 0%, rgba(120,70,255,0) 70%),
        linear-gradient(160deg, var(--ld-navy-1) 0%, var(--ld-navy-2) 46%, var(--ld-navy-3) 100%);

    --ld-r-card: 22px;
    --ld-r-step: 14px;
    --ld-shadow-card: 0 18px 44px rgba(18,28,70,.10);

    /* I NUMERI DELLA FASCIA: un gettone a parte, perché sul fondo scuro il blu va schiarito o non si legge. */
    --ld-dato: #3f6df0;
}

[data-theme="dark"] {
    --ld-ink: #eef1ff;
    --ld-ink-soft: #c9d1ec;
    --ld-muted: #98a2c6;
    --ld-card: #1a2043;
    --ld-card-soft: #202751;
    --ld-border: #2c3462;
    --ld-border-strong: #3b457c;
    --ld-shadow-card: 0 18px 44px rgba(0,0,0,.5);
    --ld-dato: #7fb0ff;
}

.ar-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 2rem;
    padding: 26px 22px 58px;
    border: 1px solid transparent;
    border-radius: var(--ld-r-card, 22px);
    background-color: var(--ld-navy-1, #0a1338);
    background-image: var(--ld-grad-hero);
    box-shadow: 0 18px 40px rgba(14,22,66,.24);
}

.ar-hero > * { position: relative; z-index: 1; }

.ar-fascio {
    position: absolute;
    left: -22%;
    top: 46%;
    width: 148%;
    /* height: 0.5px; */
    transform: rotate(
349deg);
    background-image: linear-gradient(90deg, rgb(63 81 181 / 19%) 0%, #7a5cff8f 26%, #b39bff 44%, #1b297266 66%, rgb(27 42 114 / 35%) 100%);
    box-shadow: 0 0 22px 6px rgb(27 42 115 / 76%), 0 0 60px 20px rgb(72 97 194 / 66%);
    pointer-events: none;
    z-index: 0;
}

/* La riga del marchio: l'occhiello a sinistra, il segno LSNN a destra — la stessa riga della `hero-bar`
   della landing (titolo a sinistra, marchio a destra), senza il tasto indietro: quello è già nella barra
   del titolo qui sopra e nella barra di Mood. */
.ar-copertina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ar-marchio {
    height: 20px;
    width: auto;
    flex: 0 0 auto;
}

/* L'OCCHIELLO È UNA PASTIGLIA (07/10/2026): era una riga di testo color grano che si perdeva sul navy.
   Adesso è la pastiglia della landing (`.badge-lsnn`: azzurro trasparente, raggio pieno), dove «ventisette
   anni» — il numero che dice da quanto esiste questo editoriale — è la prima cosa che si legge. */
.ar-occhiello {
    align-self: flex-start;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgb(3 169 244 / 21%);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d5ecff;
}

/* IL TITOLO: più grande, più pesante e più stretto, come `.hero-title` della landing (peso 900, spaziatura
   negativa, ombra scura dietro le lettere perché il navy qui è chiaro e l'alone azzurro è dietro l'angolo). */
.ar-titolo {
    margin: 0;
    font-size: clamp(1.085rem, 1.01rem + 2vw, 2.5rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 3px 22px rgba(4,10,40,.5);
}

/* La parola accesa (è `.hl-cyan` della landing): quella che si ricorda anche leggendo di sfuggita. */
.ar-acceso { color: var(--ld-cyan, #4fd8ff); }

.ar-lead {
    margin: 0;
    max-width: 36em;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.62;
    color: #dbe2f8;
}

.ar-lead b { color: #fff; }

/* LA NOTA DI VETRO: fondo appena più chiaro del navy e bordo bianco tenue — si stacca senza fare
   un'altra scatola bianca dentro la copertina, che era il difetto di prima. */
.ar-stato {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    font-size: .96rem;
    line-height: 1.55;
    color: #e7ecff;
}

.ar-stato b { color: #fff; }

.ar-azioni { margin-top: 4px; }
.ar-vai { text-decoration: none; }

/* I DUE COMANDI DELLA COPERTINA (07/10/2026). Il primo è la pillola della landing (`.cta` in fondo alla
   pagina, `.chiedi-invia` nel suo modulo: gradiente viola → azzurro, raggio pieno, ombra colorata, e si
   alza di due pixel sotto il dito); il secondo è la stessa pillola in vetro, perché porta dentro questa
   pagina e non deve competere col primo. Sul telefono diventano due righe piene (la regola dei 640px). */
.ar-hero .ar-vai,
.ar-hero .iv-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    background-image: var(--ld-grad-cta);
    box-shadow: 0 14px 30px rgba(63,109,240,.42);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s ease, box-shadow .22s ease;
}

.ar-hero .ar-vai:hover,
.ar-hero .iv-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(63,109,240,.5);
}

.ar-hero .ar-vai:active,
.ar-hero .iv-btn--primary:active { transform: translateY(0) scale(.985); }

.ar-hero .ar-vai svg,
.ar-hero .iv-btn--primary svg { width: 20px; height: 20px; flex: 0 0 auto; }

.ar-hero .iv-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease;
}

.ar-hero .iv-btn--ghost:hover { background: rgba(255,255,255,.18); }
.ar-hero .iv-btn--ghost svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* IL FATTORE DI REALTÀ: il servizio è a pagamento (03/10/2026). Il titolare: «manca fattore di realtà ... il
   servizio è a pagamento, contattaci per... va messo che si vede». Non è una nota legale in fondo: sta sotto
   i due bottoni dell'apertura, con l'icona dello scontrino e il bordo che la stacca dal resto — si legge
   prima di lasciare l'email. La metà che rassicura (la richiesta è gratuita) è nella stessa riga apposta:
   una pagina che dice solo «si paga» spaventa chi era interessato. */
.ar-costo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 2px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    /* Il bordo dell'oro sulla sinistra: la riga che dice «questo si paga» ha una spia accesa, e sta
       dentro la copertina invece di essere una nota legale in fondo alla pagina. */
    border-left: 3px solid var(--ld-gold, #f7bb3c);
    background: rgba(6,12,42,.28);
    font-size: .94rem;
    line-height: 1.55;
    color: #e7ecff;
}

.ar-costo svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ld-gold, #f7bb3c);
}

.ar-costo b {color: var(--ld-gold, #f7bb3c);}

.ar-coda {
    align-self: flex-start;
    margin: 0;
    font-size: .86rem;
    color: var(--ld-cyan, #4fd8ff);
    padding: 5px 23px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
}

.ar-sezione {
    margin: 1rem;
    margin-top: 30px;
    padding: 20px 18px 22px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: var(--ld-r-card, 22px);
    background: var(--ld-card, #fff);
    box-shadow: 0 0 1px 5px rgb(58 135 241);
}

.ar-testo {
    margin: 0 0 12px 0;
    font-size: .98rem;
    line-height: 1.62;
    color: var(--ld-muted, #5d6781);
}

.ar-testo b { color: var(--ld-ink, #0a0f1f); }

/* LA RETE, RIGA PER RIGA (02/10/2026 — e la correzione della stessa sera). Prima erano dieci pillole tutte
   uguali in fila, e sembravano dieci cose da scegliere una per volta. Adesso ogni riga è un brand — il nome
   in grande, i suoi indirizzi sotto e QUANDO esce — e la riga del portale madre si vede che è quella: è
   l'unica che esce sempre, e sempre insieme alla sua coppia fissa To5.me e To5.it. */
.ar-portali {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.ar-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border-radius: var(--ld-r-step, 14px);
    border: 1px solid var(--ld-border, #e7ecf7);
    background: var(--ld-card-soft, #f7f9fe);
    overflow-wrap: anywhere;
    transition: border-color .18s ease, transform .18s ease;
}

.ar-brand:hover {
    border-color: var(--ld-border-strong, #cfd8f2);
    transform: translateY(-1px);
}

.ar-brand b {
    font-size: .93rem;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--ld-ink, #0a0f1f);
}

.ar-brand span {
    font-size: .86rem;
    color: var(--ld-muted, #5d6781);
}

.ar-brand em {
    font-style: normal;
    font-size: .78rem;
    color: var(--ld-muted, #5d6781);
}

/* IL PORTALE MADRE: la riga che esce SEMPRE — le altre si scelgono, quindi non si travestono uguali.
   Il segno è quello della landing (il blu dei collegamenti), non il viola di Studio. */
.ar-brand--madre {
    border-color: var(--ld-blue, #3f6df0);
    background: color-mix(in srgb, var(--ld-blue, #3f6df0) 6%, transparent);
}

/* I TRE PASSI: il numero è disegnato dal CSS, così l'HTML resta un elenco normale (e chi usa un lettore
   di schermo sente «1, 2, 3» dal contatore vero della lista, non da un carattere scritto a mano). */
.ar-passi {
    margin: 0;
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ld-muted, #5d6781);
}

.ar-passi li::marker {
    color: var(--ld-blue, #3f6df0);
    font-weight: 800;
}

.ar-passi b { color: var(--ld-ink, #0a0f1f); }

.ar-motivi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ld-muted, #5d6781);
}
.ar-motivi li:nth-child(odd),
.ar-motivi li:nth-child(even){
    background:transparent;
}
.ar-motivi li {
    position: relative;
    padding-left: 26px;
}

.ar-motivi li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .45em;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid var(--ld-blue, #3f6df0);
    border-bottom: 2.5px solid var(--ld-blue, #3f6df0);
    transform: rotate(-45deg);
}

.ar-motivi b { color: var(--ld-ink, #0a0f1f); }

/* --------- il modulo --- */
.ar-modulo { scroll-margin-top: 84px; }
.iv-form__campo > span em {
    font-style: normal;
    font-weight: 500;
    font-size: .82em;
    color: var(--ld-muted, #5d6781);
}

/* QUI C'ERANO IL VESTITO DEL CONSENSO E DELLA «MIA RICHIESTA» — RIFATTI PIÙ IN BASSO (07/10/2026).
   `.ar-consenso`, `.ar-mia`, `.ar-fatto` e `.ar-coda-badge` avevano il loro vestito di Studio qui, e
   adesso il loro vestito è quello della landing, nel blocco «IL MODULO, VESTITO COME QUELLO DELLA LANDING»
   in fondo al foglio. Le regole vecchie sono state tolte invece di lasciarle sotto alle nuove: due
   definizioni della stessa cosa che dicono cose diverse sono la copia che diverge, ed è esattamente il
   difetto che questo progetto annota ogni volta.
   (Trovate contando: `.ar-passi li::marker` era scritto DUE volte nel file, e `.ar-fatto` era vestito due
   volte — verde a 4px di bordo a riga 480, scheda della landing a riga 1100.) */

/* L'ELENCO DELLE RIGHE DEI DATI (`dl`), e questo serve a DUE pagine: `/articolo` quando la richiesta
   c'è già, e `/richiesta` — il link personale — che di quella scatola è fatto. Per questo sta qui e non
   dentro il perimetro `.ar-modulo`: `/richiesta` non è il modulo, e quella pagina non si tocca. */
.ar-mia dl {
    margin: 8px 5px 8px 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 0px;
    font-size: .9rem;
}

.ar-mia dt {color: var(--ld-muted, #5d6781);min-width: 100px;max-width: 150px;border-bottom: 1px solid var(--border-color);padding-right: 8px;}
.ar-mia dd {margin: 0;border-bottom: 1px solid var(--border-color);}


/* L'ELENCO DELLO STAFF NON ESISTE PIÙ SU QUESTA PAGINA (04/10/2026), E IL SUO VESTITO SE N'È ANDATO
   CON LUI (07/10/2026). Qui c'erano `.ar-richieste`, `.ar-richiesta`, `.ar-richiesta__capo`, `__chi`,
   `__stato`, `__dati`, `__testo`, `__quando` e `.ar-vuoto`: una settantina di righe per disegnare la coda
   delle richieste in fondo a `/articolo`. Il 04/10 la coda si è spostata dove si risponde davvero — l'area
   «Editoriale» del pannello, `/admin#editoriale` — e `articolo.js` non disegna più niente di tutto questo
   (l'elenco se n'è andato da `disegnaElenco`, e la prova `E` verifica che non torni). Erano regole per
   elementi che non esistono più: tolte, non commentate. Se un giorno servisse una coda dentro una pagina,
   la si riscrive sapendo cosa deve dire — non si riesuma un vestito senza il suo contenuto. */

/* ---------------------------------------------------------------- sul telefono --- */
@media (max-width: 640px) {
    .ar-hero { padding: 22px 16px 52px; }
    .ar-lead { font-size: 1rem; }
    /* I due comandi della copertina, uno per riga a piena larghezza: sul telefono il pollice non mira. */
    .ar-azioni { display: flex; flex-direction: column; gap: 10px; }
    .ar-azioni .iv-btn { width: 100%; justify-content: center; }
    .ar-mia dl { grid-template-columns: 1fr; gap: 2px; }
    .ar-mia dt { font-weight: 600; }
}

/* Chi ha chiesto meno animazioni al sistema non se le vede nemmeno qui (comprese le pillole della
   copertina, che si alzerebbero di due pixel a ogni passaggio del dito). */
@media (prefers-reduced-motion: reduce) {
    .ar-azioni .iv-btn,
    .ar-hero .ar-vai,
    .ar-hero .iv-btn--primary,
    .ar-hero .iv-btn--ghost,
    .ar-scelta,
    .ar-brand { transition: none; }
}

/* IL DATO, CHE SALE SULLA COPERTINA (07/10/2026). Era una fascia di tre caselle bianche sotto
   l'apertura, separate da essa: si leggevano come «poi ci sono anche i numeri». Adesso è la fascia
   della landing (`.how` che sale su `.hero` col margine negativo): le tre caselle appoggiano sul bordo
   inferiore del navy, e l'occhio legge copertina e numeri come un blocco solo — la promessa e la prova.
   Le caselle restano TRE anche sul telefono: sono tre parole («27 anni», «10 portali», «60 testate») e in
   fila si leggono in un secondo; in colonna occuperebbero mezza schermata, e la copertina è già alta. */
.ar-numeri {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ar-numero {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 9px 15px;
    border-radius: 18px;
    border: 1px solid var(--ld-border, #e7ecf7);
    background: var(--ld-card, #fff);
    box-shadow: 0 14px 30px rgba(18,28,70,.14);
    text-align: center;
}

.ar-numero b {
    display: block;
    font-size: clamp(1.6rem, 1.15rem + 2.4vw, 2.3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ld-dato, #3f6df0);
}

/* La riga del gradiente sotto il numero: è lo stesso gradiente delle icone tonde della landing, corto —
   il segno che lega questa fascia alla copertina e al resto della pagina. */
.ar-numero b::after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin: 7px auto 0;
    border-radius: 999px;
    background-image: var(--ld-grad-ico);
}

.ar-numero span {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ld-ink, #0a0f1f);
}

.ar-numero em {
    font-style: normal;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--ld-muted, #5d6781);
}

/* IL DATO DENTRO UN RIQUADRO (07/10/2026): la stessa informazione della fascia, più piccola, dentro il
   riquadro che spiega cos'è un portale di comunicazione. È chiusa lì dentro apposta: chi la cerca la
   trova, e la pagina non si allunga di una riga. */
.ar-dato {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ar-dato li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 8px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 12px;
    background: var(--ld-card-soft, #f7f9fe);
    text-align: center;
}

.ar-dato b {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ld-dato, #3f6df0);
}

.ar-dato span {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ld-ink, #0a0f1f);
}

.ar-dato em {
    font-style: normal;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--ld-muted, #5d6781);
}

/* ---------------------------------------------------------------- le scelte («decidi tu») ---
   Tre caselle cliccabili con dentro un radio VERO: chi usa un lettore di schermo sente «opzione
   selezionata», non una scritta colorata. La casella scelta si accende con `:has()`; dove `:has()` non
   c'è resta grigia, e il pallino del radio dice comunque la stessa cosa. */
.ar-scelte {
    margin: 4px 0 0 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ar-scelte__capo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2rem 0px 1rem 0px;
}

.ar-scelte__capo b {font-size: .95rem;font-weight: 800;color: var(--ld-ink, #0a0f1f);/* padding-left: 13px; */}

/* LE SEI SCELTE (07/10/2026): le stesse caselle, coi colori della landing. Il bordo e il fondo sono quelli
   delle sue card di modulo (`.chiedi-piega`: bordo tenue, fondo `--card-soft`), e la scelta fatta si accende
   col BLU — non col viola di Mood — perché è il colore che la landing usa per dire «questo è scelto». */
.ar-scelta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: var(--ld-r-step, 14px);
    border: 1px solid var(--ld-border, #e7ecf7);
    background: var(--ld-card-soft, #f7f9fe);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.ar-scelta:hover {
    border-color: var(--ld-border-strong, #cfd8f2);
    transform: translateY(-1px);
}

.ar-scelta:has(input:checked) {
    border-color: var(--ld-blue, #3f6df0);
    background: color-mix(in srgb, var(--ld-blue, #3f6df0) 7%, transparent);
}

/* IL SEGNO DELLA SCELTA, disegnato col CSS (due bordi ruotati) come la spunta dei motivi: nessun carattere
   e nessuna icona da caricare. Si vede solo sulla casella scelta. */
.ar-scelta:has(input:checked)::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 14px;
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--ld-blue, #3f6df0);
    border-bottom: 2.5px solid var(--ld-blue, #3f6df0);
    transform: rotate(-45deg);
}

.ar-scelta input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0 0;
    accent-color: var(--ld-blue, #3f6df0);
}

.ar-scelta__corpo { display: flex; flex-direction: column; gap: 2px; padding-right: 18px; }
.ar-scelta__corpo b { font-size: .95rem; font-weight: 800; color: var(--ld-ink, #0a0f1f); }

.ar-scelta__corpo em {
    font-style: normal;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ld-muted, #5d6781);
}

/* ---------------------------------------------------------------- i riquadri ripiegati ---
   «non fare tutto in un punto» (il titolare): quello che si vuole sapere sta qui, CHIUSO, e si apre uno
   per volta. La freccetta è disegnata con due bordi ruotati — nessun carattere, nessuna icona in più da
   caricare, e la stessa faccia su ogni telefono. */
.ar-zona { margin-top: 26px; }
.ar-zona li:nth-child(odd),
.ar-zona li:nth-child(even){
    background: transparent;
}
/* (Qui c'era una SECONDA copia di `.ar-passi li::marker`, identica a quella di riga 397: due volte lo
   stesso selettore nello stesso foglio, e la seconda non serviva a niente. Trovata contando i selettori
   ripetuti del file — l'occhio non la vede, perché le due regole dicono la stessa cosa.) */
/* IL TITOLO DELLA ZONA (07/10/2026): era una riga maiuscola piccola e grigia, con un margine a quattro
   misure diverse; adesso è il titolo della landing (`how-head-text h2`: misura del corpo, peso 800,
   spaziatura stretta) con la bacchetta del gradiente davanti — la stessa delle icone e del fascio. */
.ar-zona-titolo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 4px 14px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ld-ink, #0a0f1f);
}

.ar-zona-titolo::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background-image: var(--ld-grad-ico);
}

/* I RIQUADRI RIPIEGATI (07/10/2026): le schede della landing — raggio, bordo tenue, ombra larga — invece
   delle scatole di Studio. L'icona prende il posto che ha nella landing: un tassello tondo-soft col viola
   dei collegamenti, così si vede a colpo d'occhio dove si tocca per aprire. */
.ar-piega {
    margin-top: 12px;
    padding: 0;          /* il riquadro di casa ha il suo margine interno: qui comanda il riassunto */
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 18px;
    background: var(--ld-card, #fff);
    box-shadow: var(--ld-shadow-card);
    overflow: hidden;
}

.ar-piega > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ld-ink, #0a0f1f);
}

.ar-piega > summary::-webkit-details-marker { display: none; }
.ar-piega > summary:hover { background: var(--ld-card-soft, #f7f9fe); }

/* L'icona a sinistra: prima che `mood-init.js` la converta è un `<i>`, dopo è un `<svg>` — le due regole
   dicono la stessa cosa, e quella dell'`svg` porta anche il tassello tondo col viola (34px, raggio 11). */
.ar-piega > summary i { flex: none; color: var(--ld-violet, #6d4dfa); }

.ar-piega > summary svg {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 11px;
    color: var(--ld-violet, #6d4dfa);
    background: color-mix(in srgb, var(--ld-violet, #6d4dfa) 10%, transparent);
}

.ar-piega > summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ld-muted, #5d6781);
    border-bottom: 2px solid var(--ld-muted, #5d6781);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.ar-piega[open] > summary::after { transform: rotate(-135deg) translate(0, 0); }
.ar-piega[open] > summary { border-bottom: 1px solid var(--ld-border, #e7ecf7); }

.ar-piega__corpo { padding: 14px 18px 18px 18px; }
.ar-piega__corpo > :last-child { margin-bottom: 0; }
.ar-piega__corpo .ar-testo { margin-bottom: 12px; }
.ar-piega__corpo .iv-hint { display: block; }

/* ---------------------------------------------------------------- sul telefono (i pezzi nuovi) --- */
@media (max-width: 640px) {
    .ar-numero { padding: 12px 7px 13px; border-radius: 16px; }
    .ar-numero span { font-size: .72rem; letter-spacing: .06em; }
    .ar-numero em { font-size: .72rem; }
    .ar-dato { gap: 6px; }
    .ar-dato li { padding: 9px 6px; }
    .ar-dato em { font-size: .68rem; }
    .ar-piega > summary { padding: 14px; font-size: .95rem; }
    .ar-piega__corpo { padding: 12px 14px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ar-piega > summary::after { transition: none; }
}

/* ----------------------------------------------------------- la barra di Mood e il titolo della pagina --- */
/* 03/10/2026 — DA QUANDO QUESTA PAGINA HA LA BARRA DI NAVIGAZIONE (`components/nav.php`, incluso
   subito dopo `<body>`), la barra del titolo non si appiccica più in cima.
   Il perché, e non è un'opinione: `.mood-nav` è `position: sticky; top: 0; z-index: 100` (`mood.css`,
   riga 174) e `.st-topbar` era `position: sticky; top: 0; z-index: 30` (`studio.css`, riga 64). Due
   barre ferme sullo stesso bordo, e la seconda — quella con il titolo «Editoriale» — sarebbe finita
   SOTTO la prima appena si scorreva, perché ha lo z-index più basso. Il titolo rientra nel flusso:
   scorre via con il contenuto, e il comando resta alla barra di Mood, che è quella che deve restare
   sempre in vista.
   Due classi nel selettore (`.st-body .st-topbar`) per vincere su `studio.css` senza `!important`; e
   sta qui, in un foglio che carica SOLO questa pagina, quindi nessun'altra pagina dello Studio si
   muove (`/crew` e `/opportunity` tengono la loro barra appiccicata). */
.st-body .st-topbar {
    position: relative;
    top: auto;
    z-index: 1;
}

/* LA FASCIA DEI NUMERI NON SI SPEZZA PIÙ IN UNA COLONNA (07/10/2026).
   Qui c'era `@media (max-width: 444px) { .ar-numeri { grid-template-columns: repeat(1, 1fr); } }`, e
   faceva una cosa sola: sotto i 444px i tre numeri andavano uno sotto l'altro. Misurato sulla pagina
   viva (prima della cura): a 390px la fascia era alta **302px** — tre caselle in colonna, una schermata
   di scorrimento per leggere «27 anni, 10 portali, 60 testate», che sono tre parole. Adesso restano in
   fila a qualunque larghezza (le misure del telefono stanno nel blocco dei 640px: caselle di 7px di
   imbottitura e numeri più piccoli), e a 390px la stessa fascia è alta ~120px.
   E non è solo una questione di pixel: la fascia ADESSO sale di 34px sulla copertina (`margin-top`
   negativo, come `.how` sulla landing), e in colonna avrebbe appoggiato una casella sul navy e due per
   terra — un blocco spezzato invece di una fascia sola. */
/* ============================================================================
   IL MODULO, VESTITO COME QUELLO DELLA LANDING (07/10/2026)
   ----------------------------------------------------------------------------
   Il modulo di questa pagina nasce col vestito di `/invita` (`invite.css`), e si vede: i campi hanno
   **bordo 2px rosso** (`#F44336`, riga 709 di quel foglio — una scelta del modulo degli inviti, che qui
   sembra un errore da correggere), le etichette hanno 13px di rientro (`label span { padding-left: 13px }`,
   riga 687), e il bottone è la pillola viola di Mood.
   Sulla landing, il modulo che chiede la stessa cosa — «Fatti pubblicare» — è vestito con i suoi gettoni
   (`editorial.css`, blocco `.chiedi-*`): campi sul fondo tenue `--card-soft` con bordo tenue e raggio 12,
   anello blu quando si scrive dentro, etichette 12.5px in grassetto, il bottone col gradiente della CTA.
   Qui si rifanno quelle regole, con i gettoni `--ld-*` e il perimetro `.ar-modulo` davanti: le stesse
   classi (`iv-form`, `iv-btn`), lo stesso HTML, lo stesso javascript — cambia solo il vestito, e solo
   dentro questa scheda. Le altre pagine che usano `invite.css` (`/invita`, `/crew`, `/opportunity`) non
   si muovono di un pixel, perché questo foglio lo carica soltanto `/articolo`.
   LA MISURA DEI CAMPI È 16px E NON 14.5 (come nel foglio degli inviti, riga 711): sotto i 16px iOS
   ingrandisce la pagina al primo tocco dentro un campo, e da lì in poi il modulo resta zoomato e
   sbagliato. È la stessa regola che la landing ha scritto nel suo foglio.
   ============================================================================ */

/* LA TESTATA DELLA SCHEDA: l'icona tonda col gradiente (`.how-head`/`.set-head` della landing) e il
   sottotitolo sotto il titolo, con la riga che dice cosa si sta facendo. */
.ar-modulo .st-card-head { align-items: center; gap: 12px; margin-bottom: 16px; }

.ar-modulo .st-card-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--ld-ink, #0a0f1f);
}

.ar-modulo .st-card-title > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ar-modulo .st-card-title svg {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 50%;
    color: #fff;
    background-image: var(--ld-grad-ico);
    box-shadow: 0 8px 18px rgba(59,110,240,.35);
}

.ar-modulo .st-card-title em {
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--ld-muted, #5d6781);
}

/* LE ETICHETTE, SENZA IL RIENTRO DI 13px DEL FOGLIO DEGLI INVITI. */
.ar-modulo .iv-form__campo > span {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
    color: var(--ld-ink-soft, #26304d);
}

.ar-modulo .iv-form__capo b {
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ld-ink, #0a0f1f);
}

.ar-modulo .iv-hint { padding-left: 0; font-size: 12.5px; line-height: 1.5; color: var(--ld-muted, #5d6781); }
.ar-modulo .iv-hint b { color: var(--ld-ink-soft, #26304d); }

/* I CAMPI: bordo tenue al posto del rosso, fondo tenue, raggio 12, e l'anello blu quando si scrive. */
.ar-modulo .iv-form__campo input:not([type="checkbox"]):not([type="radio"]),
.ar-modulo .iv-form__campo select,
.ar-modulo .iv-form__campo textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-radius: 12px;
    background: var(--ld-card-soft, #f7f9fe);
    color: var(--ld-ink, #0a0f1f);
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ar-modulo .iv-form__campo input:focus,
.ar-modulo .iv-form__campo select:focus,
.ar-modulo .iv-form__campo textarea:focus {
    outline: none;
    border-color: var(--ld-blue, #3f6df0);
    box-shadow: 0 0 0 3px rgba(63,109,240,.18);
}

.ar-modulo .iv-form__campo input::placeholder,
.ar-modulo .iv-form__campo textarea::placeholder { color: var(--ld-muted, #5d6781); opacity: .85; }

/* DUE COLONNE SOLO QUANDO C'È SPAZIO (come `.chiedi-due` della landing: una riga per campo sul telefono,
   due da 540px in su). `auto-fit` da solo faceva due colonne strette già a 470px, e i campi con dentro
   un suggerimento lungo («es. il giornale o l'azienda per cui scrivi») andavano a capo su due righe. */
.ar-modulo .iv-form__due { grid-template-columns: 1fr; gap: 12px; }

/* LA CORNICE AMBRA NON È DI QUESTA PAGINA (07/10/2026). Il modulo prende il vestito di `.iv-form` da
   `invite.css` (riga 660): `padding: 18px 16px`, `border: 2px solid #ffb020` e un fondo ambrato — è il
   modulo degli INVITI (`/invita`), dove l'arancione è il colore di quella pagina. Dentro la scheda
   bianca di `/articolo`, quella cornice gialla sembrava un avviso di errore attorno a tutto il modulo
   (trovata misurando i bordi della pagina viva: `form.iv-form`, 2px, rgb(255, 176, 32), su tutti e
   quattro i lati — l'occhio la legge come «c'è qualcosa che non va» e non lo dice nessuno).
   Qui si spegne: la scheda `.ar-sezione` ha GIÀ il suo bordo, il suo raggio e il suo fondo, e due
   contenitori con due bordi diversi attorno alla stessa cosa sono uno di troppo. Il perimetro
   `.ar-modulo` tiene la cura dentro questa pagina: `/invita` e `/crew` tengono il loro arancione. */
.ar-modulo .iv-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

@media (min-width: 540px) {
    .ar-modulo .iv-form__due { grid-template-columns: 1fr 1fr; }
}

/* IL BOTTONE CHE MANDA LA RICHIESTA: la pillola col gradiente della landing (`.chiedi-invia`), non quella
   viola di Mood. Dentro la scheda del modulo, perché nel hero c'è già la pillola del primo comando: due
   bottoni identici a due schermate di distanza vanno bene, è la stessa promessa e la stessa strada. */
.ar-modulo .iv-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    background-image: var(--ld-grad-cta);
    box-shadow: 0 12px 26px rgba(63,109,240,.36);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s ease, box-shadow .22s ease, opacity .2s ease;
}

.ar-modulo .iv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(63,109,240,.46); }
.ar-modulo .iv-btn--primary:active { transform: translateY(0) scale(.985); }
.ar-modulo .iv-btn--primary[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: 0 8px 18px rgba(63,109,240,.28); }
.ar-modulo .iv-btn--primary svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* IL CONSENSO ALLA PRIVACY: casella grande e testo piccolo e quieto, come `.chiedi-consenso` della
   landing. Il collegamento all'informativa è viola e sottolineato: è l'unico punto da cui si esce dalla
   pagina, e deve vedersi che è un collegamento. Il rientro di 13px del foglio degli inviti si toglie
   anche qui (colpisce ogni `span` dentro un'etichetta). */
.ar-modulo .ar-consenso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: start;
    padding: 4px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ld-muted, #5d6781);
}

.ar-modulo .ar-consenso span { padding-left: 0; }
.ar-modulo .ar-consenso input { width: 19px; height: 19px; margin: 2px 0 0 0; accent-color: var(--ld-blue, #3f6df0); }
.ar-modulo .ar-consenso a { color: var(--ld-violet, #6d4dfa); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* «FIN DOVE VUOI ARRIVARE»: il capo del gruppo si stringe (aveva 2rem sopra e 1rem sotto, misurati a
   occhio) e le sue due righe non prendono il rientro delle etichette. */
.ar-modulo .ar-scelte__capo {padding: 22px 0 12px;}
.ar-modulo .ar-scelte__capo .iv-hint { padding-left: 0; }
.ar-modulo .ar-scelta__corpo { padding-left: 0; }

/* LA RICHIESTA GIÀ FATTA (`#arMia`) E LA RICEVUTA (`#arFatto`): i due riquadri che il javascript disegna
   dentro la scheda. Prima erano verdi e viola con bordi spessi 4px e raggi da 31px — due colori che nella
   landing non esistono. Adesso sono le sue schede (`.chiedi-fatto`): bordo tenue, riga verde a sinistra
   per la ricevuta, riga BLU per «la richiesta c'è già» — perché quella non è un successo, è
   un'informazione (è la stessa distinzione dei distintivi nel pannello, dove il colore dice lo stato). */
.ar-mia {
    margin: 0 0 16px 0;
    padding: 15px 16px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-left: 3px solid var(--ld-blue, #3f6df0);
    border-radius: 16px;
    background: var(--ld-card-soft, #f7f9fe);
    font-size: .94rem;
    line-height: 1.55;
    color: var(--ld-ink, #0a0f1f);
}

.ar-mia h3 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; letter-spacing: -.015em; }

.ar-fatto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--ld-border, #e7ecf7);
    border-left: 3px solid #1f9d55;
    border-radius: 16px;
    background: var(--ld-card-soft, #f7f9fe);
    font-size: .96rem;
    line-height: 1.6;
    color: var(--ld-ink, #0a0f1f);
}

.ar-fatto h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.ar-fatto p { margin: 0; color: var(--ld-ink-soft, #26304d); }
.ar-fatto b { color: var(--ld-ink, #0a0f1f); }

/* `hidden` DEVE VINCERE SU `display` (07/10/2026). La ricevuta e il riquadro «hai già chiesto» nascono
   nascosti con l'attributo `hidden`, che è solo un `display: none` di partenza: da quando `.ar-fatto` ha
   un `display: flex` per distanziare le sue righe, una regola con `display` batterebbe l'attributo — e
   prima di mandare la richiesta si vedrebbe il bordo di una scatola vuota. È lo stesso difetto trovato
   nel modulo della landing il 06/10 (là la cura è in `editorial.css`: `.chiedi-form[hidden]`), e la cura
   è la stessa riga. */
.ar-mia[hidden], .ar-fatto[hidden] { display: none; }

/* IL DISTINTIVO DELLE RICHIESTE IN CODA (lo accende `articolo.js` quando ce n'è almeno una): la pastiglia
   della landing, in blu. */
.ar-coda-badge {
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ld-blue, #3f6df0) 10%, transparent);
    color: var(--ld-blue, #3f6df0);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .ar-numeri {
        display: flex;
        padding: 0 10px;
        gap: 10px 10px;
    }
    .ar-copertina { align-items: flex-start; }
    .ar-occhiello {border-radius: 14px;line-height: 1.3;font-size: 9px;}
    .ar-marchio {margin-left: auto;margin-top: 4px;display: none;}
}
@media (max-width: 360px) {
    .ar-numeri {
        padding: 0 10px;
        grid-template-columns: repeat(1, 1fr);
    }
}