/* ──────────────────────────────────────────────────────────────────────────
   listino.css - Il listino dei piani, uno solo per tutto il sito.

   Lo caricano la home, /prezzi e /wordpress, e le impostazioni dell'app ne
   usano l'interruttore. Fino al 17/09 il listino esisteva in tre forme: quella
   nuova su /prezzi (con l'annuale), e due vecchie nella home e su /wordpress,
   ferme al mese e con i prezzi scritti a mano. Chi guardava i prezzi dalla
   home non sapeva che l'annuale esiste.

   Non dichiara token: usa quelli del foglio della pagina che lo carica
   (page.css, app.css, wordpress.css), che hanno gli stessi nomi. La guardia
   del contrasto lo legge tre volte, con i token di ognuno dei tre fogli.
   ────────────────────────────────────────────────────────────────────────── */

/* ── La domanda in cima, e l'interruttore della cadenza ─────────────────────
   La domanda non filtra e non nasconde: riordina, e toglie di mezzo i piani
   che non riguardano chi legge. Prima di rispondere si vedono tutti, perché
   chi sa già cosa vuole non deve passare da una domanda per arrivarci.
   Nessuno dei quattro listini guardati (Semrush, Peec, Otterly, Profound) ha
   un quiz, e non è una dimenticanza: un quiz che nasconde le opzioni fa
   sentire indirizzati, e chi si sente indirizzato non compra. */
.pz-dom { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 22px; }
@media (min-width: 700px) { .pz-dom { grid-template-columns: 1fr 1fr; } }
.pz-dom-t { font-family: var(--font-head); font-weight: 700; font-size: 20px; margin: 0 0 12px; color: var(--primary); }
.pz-dom-o { display: block; width: 100%; text-align: left; font-family: var(--font-body); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; padding: 18px 20px;
  transition: border-color .16s var(--ease), transform .16s var(--ease); }
.pz-dom-o:hover { border-color: var(--primary); transform: translateY(-2px); }
.pz-dom-o[aria-pressed="true"] { border-color: var(--terracotta); border-width: 2px; padding: 17px 19px; }
.pz-dom-o b { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.pz-dom-o span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

.pz-cad-riga { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.pz-cad { display: inline-flex; border: 1.5px solid var(--border); border-radius: 99px; padding: 4px; background: var(--cream-soft); }
.pz-cad button { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; padding: 9px 20px; border: 0;
  border-radius: 99px; background: transparent; color: var(--ink-muted); cursor: pointer; min-height: 44px; }
.pz-cad button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; }
.pz-cad-nota { font-size: 14px; font-weight: 700; color: var(--terracotta); margin: 0 0 20px; }

/* LE DUE CADENZE STANNO TUTTE E DUE NEL MARKUP, e l'interruttore ne nasconde
   una. Fino al 17/09 il prezzo annuale viaggiava dentro un attributo
   (`data-anno="490€ l'anno, addebitati in una volta"`) e il JavaScript lo
   scriveva al posto del mensile: la traduzione delle pagine tocca i nodi di
   testo e non quegli attributi, quindi su /en/prezzi premendo «All'anno» la
   carta tornava in italiano. Un nodo di testo per cadenza passa dal
   dizionario come tutto il resto.
   `display: none` esplicito perché `hidden` perde contro qualunque `display`
   scritto da un foglio (vedi CLAUDE.md, la prima trappola). */
[data-se][hidden] { display: none !important; }

/* Le carte dei piani che la domanda mette da parte. Non è `display:none` su un
   contenitore: è un attributo sulla singola carta, così la griglia si
   ricompone da sola e non restano colonne vuote. */
.pz-piano[hidden] { display: none; }

/* Cosa NON ha, col motivo nella stessa riga. Una riga che manca senza
   spiegazione si legge come una mancanza; con il motivo accanto si legge come
   una scelta. Nessuno dei concorrenti lo fa. */
.pz-piano li.pz-manca { color: var(--ink-muted); }
.pz-piano li.pz-manca svg { color: var(--ink-muted); }

/* I quattro piani: auto-fit ne metteva tre in fila e lasciava Agenzia sola
   sotto, allineata a sinistra, come se fosse un ripensamento. */
.pz-piani { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 4px 0 20px; }
@media (min-width: 620px) { .pz-piani { grid-template-columns: repeat(2, 1fr); } }
/* QUANTE COLONNE DIPENDE DA QUANTE CARTE SI VEDONO, e il conto lo scrive il
   JavaScript su `data-visibili`. Con quattro colonne fisse cinque carte
   diventavano 4 + 1, e l'ultima restava sola in fondo. Cinque si dispongono
   3 + 2; rispondendo alla domanda ne restano tre e stanno in riga. Senza
   JavaScript non c'è l'attributo e valgono le quattro colonne. */
@media (min-width: 1000px) {
  .pz-piani { grid-template-columns: repeat(4, 1fr); }
  .pz-piani[data-visibili="5"] { grid-template-columns: repeat(3, 1fr); }
  .pz-piani[data-visibili="3"] { grid-template-columns: repeat(3, 1fr); }
}
.pz-piano { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px 30px; display: flex; flex-direction: column; }
.pz-piano-top { border-color: var(--terracotta); border-width: 2px; }
/* Le schede reagiscono al passaggio del mouse come le altre del sito: senza,
   la scheda evidenziata sembrava l'unica cosa non toccabile della pagina. */
.pz-piano { transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.pz-piano:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 30px -20px rgba(15, 37, 61, .5); }
.pz-piano-top:hover { border-color: var(--terracotta-hover); }
.pz-et { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 9px; min-height: 17px; }
.pz-nome { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0; color: var(--primary); }
.pz-prezzo { font-family: var(--font-head); font-weight: 900; font-size: 36px; line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 4px; color: var(--ink); }
.pz-prezzo span span { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink-muted); }
.pz-periodo { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 18px; min-height: 38px; }
.pz-chi { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; }
.pz-piano ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.pz-piano li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.pz-piano li svg { width: 17px; height: 17px; color: var(--terracotta); margin-top: 2px; }
.pz-cta { display: block; text-align: center; font-weight: 700; font-size: 15.5px; text-decoration: none; padding: 15px 18px; border-radius: 12px; margin-top: auto; min-height: 44px; background: var(--terracotta); color: var(--on-terracotta); transition: filter .18s var(--ease), transform .18s var(--ease); }
.pz-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.pz-cta-2 { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.pz-cta-2:hover { border-color: var(--primary); filter: none; }

/* Sotto le carte, una riga: cosa vale per tutti i prezzi, e dove si
   confrontano riga per riga. */
.pz-sotto { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; }
/* Un link da solo su una riga è un bersaglio: 44px d'altezza, come ogni comando. */
.pz-sotto a { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

@media (max-width: 640px) { .pz-prezzo { font-size: 32px; } .pz-periodo { min-height: 0; } }