/* ═══════════════════════════════════════════════════════════════════════════
   SEOFIXPRO — L'ASPETTO DEL SITO
   ---------------------------------------------------------------------------
   REGOLA UNICA DI QUESTO FILE: qui dentro non c'è NESSUN colore scritto a mano.
   Ogni colore è un richiamo — var(--nome) — alle variabili di `temi.css`.
   Se domani serve cambiare l'indaco in blu, si tocca temi.css e basta.

   Se stai cercando dove si cambia un TESTO: non è qui. I testi stanno nelle
   pagine .html. Qui c'è solo come sono fatte le cose.

   L'impalcatura (nomi delle classi, misure, punti di rottura) è la stessa del
   sito RegiaPro, apposta: i due siti devono sembrare della stessa famiglia.
   Le parti che qui non servivano — i cinque moduli, il modulo di iscrizione,
   le guide — non sono state copiate. Le parti nuove, che RegiaPro non ha, sono
   in fondo al file e sono tre: il REFERTO a semaforo, i NUMERI MISURATI e le
   due PIATTAFORME (WordPress e Shopify).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── basi ─────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* nessuno scorrimento laterale, mai */
}
img,svg{max-width:100%;height:auto;display:block}
/* «hidden» deve vincere sempre. Senza questa riga un elemento nascosto che ha
   anche una classe con display:flex resta visibile. */
[hidden]{display:none!important}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink-strong);
  text-wrap:balance;
}
h1{font-size:clamp(32px,5.2vw,54px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(18px,2vw,21px);letter-spacing:-.01em}
h4{font-size:16px;letter-spacing:0}
p{max-width:var(--larghezza-testo)}

/* Il collegamento invisibile che serve a chi naviga con la tastiera o con un
   lettore di schermo: "salta il menu e vai al contenuto". */
.salta-al-contenuto{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--ink-strong);
  padding:12px 18px;border-radius:var(--r-s);border:1px solid var(--line);
  font-weight:700;
}
.salta-al-contenuto:focus{left:12px;top:12px}

/* ─────────────────────────── impalcatura ─────────────────────────── */
.contenitore{width:100%;max-width:var(--larghezza);margin-inline:auto;padding-inline:20px}
.fascia{padding-block:var(--passo)}
.fascia-stretta{padding-block:calc(var(--passo) * .6)}
.fascia-incassata{background:var(--surface-2);border-block:1px solid var(--line-soft)}

.testa-sezione{max-width:700px;margin-bottom:44px}
.testa-sezione.centrata{margin-inline:auto;text-align:center}
.testa-sezione.centrata p{margin-inline:auto}
.testa-sezione p{margin-top:14px;font-size:17px;color:var(--ink-2)}
/* I titoli di sezione sono grandi, con UNA SOLA parte in evidenza: se è
   evidenziato tutto, non è evidenziato niente. Il colore lo mette .evidenzia. */
.testa-sezione h2,.titolo-blocco{font-size:clamp(30px,4.4vw,46px);line-height:1.1}
.titolo-blocco{margin-bottom:18px}

/* ─────────────────────────── etichette ─────────────────────────── */
.occhiello{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:6px 12px;border-radius:var(--r-gg);
}
.stato{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.03em;
  padding:4px 10px;border-radius:var(--r-gg);white-space:nowrap;
}
/* ⚠ IL TESTO DELLA PASTIGLIA VA SULL'INCHIOSTRO, NON SUL SEGNALE. Delle tre
   righe qui sotto solo la prima lo faceva: le altre due usavano --warn e
   --info, cioe' il colore della luce, sopra il proprio fondo tinto. Misurato
   in pagina a 11px: 4,14 contro il 4,5 che serve. Gli *-ink esistono apposta,
   ed erano gia' li'. */
.stato-attivo{background:var(--ok-bg);color:var(--ok-ink)}
.stato-arrivo{background:var(--warn-bg);color:var(--warn-ink)}
.stato-parziale{background:var(--info-bg);color:var(--info-ink)}

/* ─────────────────────────── pulsanti ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-m);
  font-size:15px;font-weight:800;font-family:inherit;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-strong);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--tr),border-color var(--tr),transform .06s,filter var(--tr);
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
/* Un pulsante spento deve VEDERSI spento: altrimenti la persona ci clicca
   sopra tre volte e pensa che il sito sia rotto. */
.btn:disabled{opacity:.45;filter:grayscale(.5);cursor:not-allowed;transform:none}
/* «spento»: un collegamento che c'è ma non porta ancora dove dovrebbe, perché
   la cosa a cui punta non esiste ancora (per esempio la scheda sul repository
   di WordPress.org, che va pubblicata prima di poterci mandare qualcuno). */
.btn.spento{opacity:.55;filter:grayscale(.6)}
.btn.spento::after{content:"— non ancora attivo";font-weight:700;opacity:.85}
/* Sul telefono la scritta in coda faceva diventare il pulsante più largo dello
   schermo, e la pagina scorreva di lato: qui va a capo invece di sfondare. */
@media (max-width:520px){
  .btn.spento{white-space:normal;text-align:center;flex-wrap:wrap;gap:4px}
  .btn.spento::after{display:block;width:100%;font-size:.85em}
}
.btn-forte{background:var(--logo-gradient);border-color:transparent;color:var(--su-accento)}
.btn-forte:hover{filter:brightness(1.07);border-color:transparent}
.btn-piccolo{padding:9px 15px;font-size:13.5px;border-radius:var(--r-s)}
.btn-grande{padding:16px 28px;font-size:16.5px}
.btn-blocco{width:100%}
.gruppo-bottoni{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* I pulsanti lunghi («Fai l'audit gratis su WordPress.org») a 375 pixel
   sfondavano lo schermo e la pagina scorreva di lato: qui vanno a capo.
   ⚠ 28 agosto 2026: la regola valeva solo per .btn-grande e .btn.spento, e il
   difetto è tornato al primo pulsante lungo NORMALE («Il confronto con Yoast e
   Rank Math»): a 375 pixel la home scorreva di 12 pixel. Adesso la regola vale
   per TUTTI i .btn, così non si ripresenta al prossimo testo lungo.
   L'unica eccezione è il pulsante piccolo della barra in cima, che è corto e
   deve restare su una riga sola per non far crescere la barra. */
@media (max-width:520px){
  .btn{white-space:normal;text-align:center}
  .btn-grande{padding:15px 20px;font-size:15.5px}
  .azioni-barra .btn-piccolo{white-space:nowrap}
}

/* ─────────────────────────── barra in cima ─────────────────────────── */
.barra{
  position:sticky;top:0;z-index:80;
  background:var(--velo-barra);
  border-bottom:1px solid var(--line-soft);
}
@supports (backdrop-filter:blur(12px)){.barra{backdrop-filter:blur(12px)}}
.barra-dentro{
  max-width:var(--larghezza);margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;gap:16px;
}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.marchio-segno{
  width:36px;height:36px;border-radius:12px;background:var(--logo-gradient);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.marchio-segno svg{width:20px;height:20px}
.marchio-nome{
  font-family:var(--font-display);font-size:18px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink-strong);line-height:1;
}
.marchio-nota{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  padding:9px 11px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:700;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;   /* una voce di menu non va mai a capo: vedi qui sotto */
  transition:background var(--tr),color var(--tr);
}
/* IL MENU HA SETTE VOCI, e fra 941 e 1060 pixel ci stanno per un soffio.
   Senza questo blocco «Come funziona» andava a capo dentro la sua pastiglia e
   la barra in cima diventava alta il doppio, storta, su tutte le pagine.
   Trovato guardando il sito a 960 pixel, non leggendo il codice. */
@media (min-width:941px) and (max-width:1060px){
  .menu a{padding:9px 7px;font-size:13.5px}
  .barra-dentro{gap:10px}
  .azioni-barra{margin-left:4px;gap:7px}
}
.menu a:hover{background:var(--surface-2);color:var(--ink-strong)}
.menu a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
/* Il pulsante pieno dentro il menu del telefono: senza queste due righe il
   colore grigio delle voci di menu vincerebbe sul bianco del pulsante, e la
   scritta diventerebbe illeggibile sull'indaco. */
.menu a.btn{color:var(--ink-strong)}
.menu a.btn-forte{background:var(--logo-gradient);color:var(--su-accento)}
/* Il pulsante della barra non reagiva al passaggio del mouse: stessa regola per
   lo stato normale e per :hover, quindi non cambiava un pixel e sembrava morto.
   Il gradiente non si puo' schiarire con filter senza toccare anche il testo,
   quindi si alza appena e prende un'ombra: si vede che e' vivo. */
.menu a.btn-forte:hover{background:var(--logo-gradient);color:var(--su-accento);
  transform:translateY(-1px);box-shadow:0 4px 14px -4px rgba(67,56,202,.55)}
@media (prefers-reduced-motion:reduce){.menu a.btn-forte:hover{transform:none}}
.azioni-barra{display:flex;align-items:center;gap:9px;margin-left:10px}

/* ⚠️ 44px, NON 38. Questi due — l'interruttore del tema e il pulsante del
   menu — si toccano col dito, e wp-admin non c'entra: e' il sito pubblico.
   Sotto i 44 il bersaglio e' piu' piccolo del polpastrello e si sbaglia bottone.
   Restano 38 di riquadro visibile fino a che non serve: e' l'area cliccabile
   a crescere, non il disegno. */
.btn-tondo{
  width:44px;height:44px;padding:0;border-radius:var(--r-s);
  display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.btn-tondo:hover{background:var(--surface-2);color:var(--ink-strong)}
.btn-tondo svg{width:18px;height:18px}
/* le due icone del tema: si mostra quella giusta, l'altra sparisce */
.icona-scuro{display:none}
:root[data-theme="dark"] .icona-chiaro{display:none}
:root[data-theme="dark"] .icona-scuro{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icona-chiaro{display:none}
  :root:not([data-theme="light"]) .icona-scuro{display:block}
}

.apri-menu{display:none}
@media (max-width:940px){
  .apri-menu{display:grid}
  .menu{
    position:absolute;left:12px;right:12px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-m);box-shadow:var(--shadow-lg);padding:10px;
  }
  .menu[hidden]{display:none}
  .menu a{padding:12px 14px;font-size:16px}
  .barra-dentro{position:relative}
  .azioni-barra{margin-left:auto}
  .azioni-barra .btn{display:none}   /* il pulsante resta dentro il menu aperto */
  .menu .btn{display:inline-flex;margin-top:8px}
}
@media (min-width:941px){
  .menu .btn{display:none}
  .menu[hidden]{display:flex}        /* su schermo grande il menu è sempre aperto */
}

/* ─────────────────────────── vetrina (la testa della pagina) ─────────────── */
.vetrina{background:var(--sfondo-vetrina);padding-block:clamp(48px,7vw,88px) var(--passo)}
.vetrina-griglia{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:940px){.vetrina-griglia{grid-template-columns:minmax(0,1fr)}}
.vetrina h1{margin-top:18px}
.vetrina .sommario{font-size:clamp(17px,2vw,19.5px);color:var(--ink-2);margin-top:20px}
.evidenzia{color:var(--accent)}

.riga-fiducia{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:30px;
  font-size:14px;font-weight:700;color:var(--ink-2);
}
.riga-fiducia span{display:inline-flex;align-items:center;gap:7px}
/* ⚠ Sul grigio delle aree incassate il verde-segnale sta a 4,26: sotto il
   4,5. L'inchiostro passa, e la spunta resta verde. */
.spunta{color:var(--ok-ink);font-weight:900;flex-shrink:0}

/* ─────────────── finto schermo: l'esempio dell'interfaccia ─────────────── */
.schermo{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-x);box-shadow:var(--shadow-lg);overflow:hidden;
}
.schermo-testa{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
.pallino{width:10px;height:10px;border-radius:50%;background:var(--line);flex-shrink:0}
.schermo-titolo{
  margin-left:6px;font-size:12px;font-weight:800;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
}
.schermo-corpo{padding:18px}
/* ⚠️ --ink-2, NON --ink-3, E IL MOTIVO STA IN OTTO CENTESIMI.
   Su fondo piatto --ink-3 sta a 4,58: passa il 4,5 per un soffio. Ma queste
   tre scritte vivono sul gradiente della vetrina, che impasta il 7% di accento
   nella propria cima e porta il fondo a rgb(220,226,230): li' lo stesso
   inchiostro fa 4,13. Misurato in pagina il 28 agosto.
   La sonda del contrasto non lo vedeva ed era giusto cosi': si ferma sui
   gradienti e dichiara l'elemento non misurabile invece di inventare un
   fondo. Lo zero era vero per cio' che misurava — questi non erano dentro. */
.schermo-didascalia{
  margin-top:12px;font-size:12.5px;color:var(--ink-2);text-align:center;max-width:none;
}

/* ─────────────────────────── griglie e schede ─────────────────────────── */
.griglia{display:grid;gap:18px}
.griglia-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.griglia-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr))}
/* ⚠ Perché 224 e non 272 (28 agosto 2026): con 272 pixel, a 768 di larghezza
   ci stavano solo DUE colonne, e le griglie da tre schede lasciavano la terza
   sola sull'ultima riga. A 768 lo spazio utile è 728: tre colonne più due
   spazi da 18 chiedono al massimo 230 pixel a colonna. 224 le fa entrare con
   un margine, e sul telefono resta comunque una colonna sola. */
.griglia-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
/* Griglia a due colonne VERE anche su schermo largo. Serve dove le schede
   sono QUATTRO e dicono cose lunghe: con .griglia-2 lo spazio bastava per
   tre colonne, e la quarta scheda restava sola su una riga tutta sua.
   Trovato guardando la home a 1280 pixel, non leggendo il codice. */
.griglia-larga{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.scheda{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow-sm);
  min-width:0;
  transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr);
}
a.scheda{text-decoration:none;color:inherit;display:block}
a.scheda:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.scheda h3{margin-bottom:9px}
.scheda p{font-size:14.5px;color:var(--ink-2);max-width:none}
.scheda p + p{margin-top:10px}
.scheda-icona{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:16px;
}
.scheda-icona svg{width:23px;height:23px}
.scheda-icona.blu{background:var(--info-bg);color:var(--info)}
/* ⚠ Segnale sopra il proprio fondo tinto = contrasto basso: misurati 4,14 e
   4,15 a 14px, sotto il 4,5. Gli *-ink servono a questo. */
.scheda-icona.arancio{background:var(--warn-bg);color:var(--warn-ink)}
.scheda-icona.rosso{background:var(--bad-bg);color:var(--bad-ink)}
.scheda-icona.verde{background:var(--ok-bg);color:var(--ok-ink)}
.scheda-icona.chiaro{background:var(--accent-bright-soft);color:var(--accent)}
.scheda-testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.scheda-testa h3{margin:0}
.freccia{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:14px;font-weight:800;color:var(--accent)}

/* ─────────────────────────── prima / dopo ─────────────────────────── */
.confronto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.colonna{border-radius:var(--r-l);padding:26px;border:1px solid var(--line);min-width:0}
.colonna-prima{background:var(--surface-2)}
.colonna-dopo{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)}
.etichetta-colonna{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:16px;padding:5px 11px;border-radius:var(--r-gg);
}
.colonna-prima .etichetta-colonna{background:var(--idle-bg);color:var(--idle)}
.colonna-dopo .etichetta-colonna{background:var(--accent-soft);color:var(--accent)}
.elenco-segni{list-style:none;display:grid;gap:13px}
.elenco-segni li{display:flex;gap:11px;font-size:14.5px;line-height:1.5}
.segno{flex-shrink:0;font-weight:900;line-height:1.45}
/* ⚠ Anche qui l'inchiostro, non il segnale: misurato 4,26 a 15px sul grigio
   delle aree incassate, sotto il 4,5. Il segno resta verde e rosso. */
.segno-no{color:var(--bad-ink)}
.segno-si{color:var(--ok-ink)}

/* ─────────────────────────── passi numerati ─────────────────────────── */
.passi{list-style:none;display:grid;gap:16px;counter-reset:passo}
.passo{
  display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-sm);min-width:0;
}
.passo-numero{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:17px;
  background:var(--accent-soft);color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.passo-testo{min-width:0}
.passo-testo h3{margin-bottom:7px}
.passo-testo p{font-size:14.5px;color:var(--ink-2);max-width:none}
.passo-testo p + p{margin-top:9px}

/* ─────────────────────── blocchi in profondità ─────────────────────── */
.blocco{
  scroll-margin-top:90px;
  padding-block:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft);
}
.blocco:first-of-type{border-top:0;padding-top:0}
.blocco-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
@media (max-width:940px){.blocco-griglia{grid-template-columns:minmax(0,1fr)}}

/* ── L'IMPAGINAZIONE A ZIG-ZAG ────────────────────────────────────────────
   Nel testo della pagina il blocco di spiegazione viene SEMPRE PRIMA della
   figura, anche nei blocchi invertiti. È lo spostamento a essere fatto qui, e
   solo su schermo largo. Così sul telefono, dove le due colonne si impilano
   una sopra l'altra, si legge sempre prima la spiegazione e poi si guarda la
   figura — che è l'ordine in cui una persona capisce le cose. */
@media (min-width:941px){
  .blocco-griglia.invertita > .lato-testo{grid-column:2;grid-row:1}
  .blocco-griglia.invertita > .lato-foto {grid-column:1;grid-row:1}
}
/* Un sottotitolo dentro la colonna di testo. Senza questa riga si appoggia sul
   paragrafo di sopra e sembra la sua ultima frase in grassetto, invece che
   l'inizio di un discorso nuovo. */
.lato-testo > h3{margin-top:26px;margin-bottom:9px}
/* E i paragrafi di seguito: il foglio di stile azzera tutti i margini in cima
   al file, quindi due paragrafi uno sotto l'altro si attaccavano e sembravano
   un blocco solo. Dentro le schede, i riquadri e le risposte questa distanza
   c'era già; qui, nella colonna di testo dei blocchi, mancava.
   Trovato guardando la pagina WordPress a 1280 pixel, non leggendo il codice. */
.lato-testo > p + p{margin-top:14px}
.elenco-punti{list-style:none;display:grid;gap:12px;margin-top:20px}
.elenco-punti li{display:flex;gap:11px;font-size:15px;line-height:1.55}
.elenco-punti li b{color:var(--ink-strong)}

.riquadro{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-m);padding:18px 20px;margin-top:22px;
}
/* Il titoletto dentro un riquadro è un <h3> e non un <h4>: nella scala dei
   titoli arriva subito dopo un <h2>, e saltare un gradino fa uscire un indice
   storto. Queste righe gli tengono l'aspetto di un titoletto piccolo. */
.riquadro h3{font-size:16px;letter-spacing:0;margin-bottom:7px;color:var(--accent)}
.riquadro h4{margin-bottom:7px;color:var(--accent)}
.riquadro p{font-size:14.5px;color:var(--ink-2);max-width:none}
.riquadro p + p{margin-top:9px}
.riquadro-avviso{border-left-color:var(--warn)}
.riquadro-avviso h3,.riquadro-avviso h4{color:var(--warn)}
.riquadro-buono{border-left-color:var(--ok)}
.riquadro-buono h3,.riquadro-buono h4{color:var(--ok)}

/* ─────────────────────────── segnaposto dichiarati ─────────────────────── */
.segnaposto{
  border:2px dashed var(--segnaposto-bordo);
  background:var(--segnaposto-sfondo);
  border-radius:var(--r-l);padding:24px;text-align:center;min-width:0;
}
.segnaposto .titolo-segnaposto{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--segnaposto-testo);margin-bottom:11px;
}
.segnaposto p{font-size:14.5px;color:var(--ink-2);margin-inline:auto;max-width:56ch}
.segnaposto p + p{margin-top:9px}

/* ─────────────────────────── prezzi ─────────────────────────── */
.interruttore{
  display:inline-flex;gap:4px;padding:4px;margin-inline:auto;margin-bottom:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-gg);
}
.interruttore button{
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:9px 18px;border-radius:var(--r-gg);
  font-family:inherit;font-size:14px;font-weight:800;
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--tr),color var(--tr);
}
.interruttore button[aria-pressed="true"]{background:var(--surface);color:var(--ink-strong);box-shadow:var(--shadow-sm)}
.risparmio{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-gg);
  background:var(--ok-bg);color:var(--ok-ink)}

.piani{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:stretch}
.piano{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;
}
.piano-consigliato{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow)}
.piano-etichetta{
  align-self:flex-start;margin-bottom:12px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-gg);background:var(--accent-soft);color:var(--accent);
}
/* Etichetta vuota: tiene il posto sui piani che non hanno «Il più scelto»,
   così i prezzi delle quattro schede restano tutti alla stessa altezza. */
.piano-etichetta-vuota{visibility:hidden}
/* Sul telefono le schede sono una sotto l'altra: non c'è niente da allineare
   e lo spazio vuoto sarebbe solo spazio buttato. */
@media (max-width:760px){.piano-etichetta-vuota{display:none}}
.piano h3{font-size:19px;margin-bottom:5px}
.piano .a-chi{font-size:13.5px;color:var(--ink-3);max-width:none;min-height:2.8em}
.prezzo{display:flex;align-items:baseline;gap:6px;margin:18px 0 3px}
.prezzo .cifra{font-family:var(--font-display);font-size:40px;font-weight:800;
  color:var(--ink-strong);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.prezzo .periodo{font-size:14px;font-weight:700;color:var(--ink-3)}
.prezzo-nota{font-size:12px;color:var(--ink-3);max-width:none;min-height:1.5em}
/* LA CIFRA CHE NON È ANCORA DECISA. Deve VEDERSI che è un segnaposto anche a
   colpo d'occhio, altrimenti qualcuno la legge come un prezzo vero. */
.prezzo .cifra.da-decidere{
  color:var(--warn);
  background:var(--warn-bg);
  border:2px dashed var(--warn);
  border-radius:var(--r-s);
  padding:2px 10px;
}
.piano .btn{margin:20px 0 18px}
.piano-elenco{list-style:none;display:grid;gap:10px;font-size:14px;margin-top:auto}
.piano-elenco li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.piano-elenco li b{color:var(--ink-strong);font-weight:800}
.piano-elenco .segno{font-size:14px}

/* la tabella di confronto: scorre da sola se lo schermo è stretto */
.tabella-scorre{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  /* ⚠ position:relative NON è decorativo, ed è stato aggiunto il 28 agosto 2026
     dopo aver misurato il difetto. Un elemento in position:absolute NON viene
     trattenuto da un antenato che scorre, se quell'antenato non è a sua volta
     posizionato: i testi «solo-lettori» dentro le celle finivano a 700 pixel
     dal bordo e facevano scorrere di lato TUTTA LA PAGINA — 161 pixel a 375.
     La tabella scorreva dentro il suo riquadro, come deve; era la pagina a
     scorrere dietro di lei, e il difetto si vedeva solo sul telefono. */
  position:relative;
}
.tabella-piani{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.tabella-piani th,.tabella-piani td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;
}
/* ⚠ --ink-2 e non --ink-3: e' un'intestazione di colonna, non una
   didascalia. Con --ink-3 stava a 4,47 in chiaro e 3,53 al buio, sotto il
   4,5 richiesto a 11,5px. Il rimedio giusto era qui, non nel token: quello
   avrebbe schiarito le didascalie di tutto il sito per un elemento solo. */
.tabella-piani thead th{
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface-2);
}
.tabella-piani tbody th{font-weight:700;color:var(--ink-strong);width:34%}
.tabella-piani td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.tabella-piani tbody tr:last-child th,.tabella-piani tbody tr:last-child td{border-bottom:0}
.tabella-piani .colonna-forte{background:var(--accent-soft)}
.nota-tabella{font-size:13px;color:var(--ink-3);margin-top:14px;max-width:none}

/* ─────────────────────────── domande (fisarmonica) ─────────────────────── */
.domande{display:grid;gap:10px;max-width:820px}
.domanda{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;transition:border-color var(--tr);
}
.domanda[open]{border-color:var(--accent)}
.domanda summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-size:16px;font-weight:800;color:var(--ink-strong);
}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:700;color:var(--accent);line-height:1;
}
.domanda[open] summary::after{content:"−"}
.domanda summary:hover{background:var(--surface-2)}
.risposta{padding:0 20px 20px;font-size:15px;color:var(--ink-2)}
.risposta p{max-width:none}
.risposta p + p{margin-top:12px}
.risposta ul{margin:12px 0 0 20px;display:grid;gap:7px}

/* ─────────────────────────── richiamo finale ─────────────────────────── */
.richiamo{
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-x);
  padding:clamp(32px,5vw,56px);text-align:center;box-shadow:var(--shadow);
}
.richiamo p{margin-inline:auto;margin-top:14px;font-size:17px;color:var(--ink-2)}
.richiamo .gruppo-bottoni{justify-content:center}

/* ─────────────────────────── contatti ─────────────────────────── */
.modulo-contatto{display:grid;gap:16px;max-width:560px}
.campo label{display:block;font-size:13.5px;font-weight:800;color:var(--ink-2);margin-bottom:7px}
.campo input,.campo textarea,.campo select{
  width:100%;padding:13px 15px;font-family:inherit;
  font-size:16px;      /* 16px: sotto i 16 iOS ingrandisce la pagina da solo */
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface-2);color:var(--ink);
}
.campo textarea{min-height:130px;resize:vertical;line-height:1.55}
.campo select{
  appearance:none;padding-right:38px;cursor:pointer;
  /* la freccina: disegnata col bordo, così non serve nessun file da scaricare */
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-3) 50%,transparent 52%),
                   linear-gradient(-45deg,transparent 49%,var(--ink-3) 50%,transparent 52%);
  background-size:9px 9px,9px 9px;
  background-position:right 18px center,right 12px center;
  background-repeat:no-repeat;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.riga-contatto{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.riga-contatto .scheda-icona{margin:0;width:40px;height:40px;border-radius:12px}
.riga-contatto div{min-width:0}
.riga-contatto strong{display:block;font-size:14px;color:var(--ink-strong)}
.riga-contatto span{font-size:14px;color:var(--ink-2);word-break:break-word}

/* ─────────────────────────── piede ─────────────────────────── */
.piede{background:var(--surface);border-top:1px solid var(--line);padding-block:52px 28px;margin-top:var(--passo)}
.piede-griglia{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:32px}
/* I titoletti delle colonne del piede sono <h2>, non <h4>: nella scala dei
   titoli arrivano dopo l'ultimo <h2> della pagina, e scriverli <h4> voleva
   dire saltare due gradini — proprio uno dei difetti che il prodotto trova
   sui siti degli altri. Queste due righe gli tengono l'aspetto di prima: la
   misura e il colore non cambiano di un pixel. */
.piede h2{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;line-height:1.2}
.piede ul{list-style:none;display:grid;gap:10px}
.piede a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.piede a:hover{color:var(--accent)}
.piede-descrizione{font-size:14px;color:var(--ink-2);margin-top:14px;max-width:36ch}
/* Le etichette «da scrivere» hanno .stato, che porta con sé white-space:nowrap.
   A 375 pixel sfondavano lo schermo: «Condizioni d'uso · da scrivere» nel piede
   di 28 pixel, «casella da attivare sul dominio» nei contatti di 7. Qui vanno a
   capo. Trovato misurando le pagine a 375 pixel, non leggendo il codice.
   Il nowrap resta dove serve davvero: sulle etichette corte accanto ai titoli
   («Attivo», «In costruzione»), che a capo starebbero male. */
.piede .stato,.riga-contatto .stato{white-space:normal}
.piede-basso{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:13px;color:var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE BRICIOLE (il percorso in cima alle pagine di dettaglio)
   Servono a due cose insieme: far capire a chi arriva da Google dove si trova,
   e dare a Google stesso il percorso (c'è anche in BreadcrumbList, nei dati
   strutturati in cima alla pagina). Piccole apposta: non devono rubare
   l'attenzione al titolo, che è la cosa per cui la persona è arrivata.
   ═══════════════════════════════════════════════════════════════════════════ */
.briciole{
  font-size:13.5px;color:var(--ink-2);margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
}
.briciole a{color:var(--ink-2);text-decoration:none}
.briciole a:hover{color:var(--accent);text-decoration:underline}
.briciole [aria-current="page"]{color:var(--ink-strong);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   LA FRASE MANIFESTO
   Prende una fascia sua, senza niente intorno che le rubi l'attenzione.
   ═══════════════════════════════════════════════════════════════════════════ */
.manifesto{
  background:var(--surface);
  border-block:1px solid var(--line);
  padding-block:clamp(56px,8vw,110px);
  text-align:center;
}
.manifesto p{
  font-family:var(--font-display);
  font-size:clamp(28px,5.2vw,52px);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;
  color:var(--ink-strong);
  max-width:19ch;margin-inline:auto;text-wrap:balance;
}
.manifesto p .parola-chiave{color:var(--accent)}
.manifesto .sotto{
  font-family:var(--font-sans);font-size:17px;font-weight:400;
  letter-spacing:0;color:var(--ink-2);max-width:52ch;margin:22px auto 0;line-height:1.55;
}

/* Blocchi corti: una riga, non un paragrafo. */
.griglia-secca{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.secco{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px;min-width:0;
}
.secco h3{font-size:17px;margin-bottom:6px}
.secco p{font-size:14.5px;color:var(--ink-2);max-width:none}

/* Un valore da riconoscere: un nome di file, un'intestazione, un tipo di schema. */
.valore{
  font-family:var(--font-mono);font-size:13px;
  background:var(--sunken);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;color:var(--ink-strong);
  overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ①  IL REFERTO A SEMAFORO — la cosa che RegiaPro non ha
   ---------------------------------------------------------------------------
   È il prodotto messo in figura: una riga per controllo, e a sinistra la luce.
   Non è una schermata vera del plugin, ed è scritto sotto ogni volta che
   compare: finché il pannello non esiste, una figura finta spacciata per vera
   sarebbe una bugia piccola su un sito che vende onestà tecnica.

   ACCESSIBILITÀ: il colore da solo non basta mai — chi non distingue il rosso
   dal verde vedrebbe tre pallini identici. Per questo ogni riga porta anche un
   SEGNO dentro la luce (✓ ! ✕) e una parola scritta a fianco.
   ═══════════════════════════════════════════════════════════════════════════ */
.referto{display:grid;gap:9px}
.riga-controllo{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);min-width:0;
}
.semaforo{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-size:14px;font-weight:900;line-height:1;
}
.semaforo-verde {background:var(--ok-bg);   color:var(--ok-ink)}
.semaforo-giallo{background:var(--warn-bg); color:var(--warn-ink)}
.semaforo-rosso {background:var(--bad-bg);  color:var(--bad-ink)}
.riga-controllo-testo{min-width:0;flex:1}
.riga-controllo-testo strong{
  display:block;font-size:14px;color:var(--ink-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.riga-controllo-testo span{display:block;font-size:12.5px;color:var(--ink-3)}
.esito{
  font-size:11px;font-weight:800;padding:4px 9px;border-radius:var(--r-gg);
  flex-shrink:0;letter-spacing:.02em;
}
.esito-verde {background:var(--ok-bg);   color:var(--ok-ink)}
.esito-giallo{background:var(--warn-bg); color:var(--warn-ink)}
.esito-rosso {background:var(--bad-bg);  color:var(--bad-ink)}
/* Sotto i 420 pixel l'etichetta dell'esito e il titolo del controllo non ci
   stanno sulla stessa riga: l'etichetta va sotto invece di stringere il titolo
   fino a farlo sparire nei puntini. Trovato guardando la home a 375 pixel. */
@media (max-width:420px){
  .riga-controllo{flex-wrap:wrap}
  .riga-controllo-testo{flex:1 1 100%;order:2}
  .esito{order:1;margin-left:auto}
}
.riga-riepilogo{
  margin-top:14px;padding:13px 15px;border-radius:var(--r-m);
  background:var(--accent-soft);border:1px dashed var(--accent);
  font-size:13.5px;color:var(--ink);
}
.riga-riepilogo b{color:var(--ink-strong)}

/* ═══════════════════════════════════════════════════════════════════════════
   ②  I NUMERI MISURATI
   ---------------------------------------------------------------------------
   Due dati veri, contati su sedici siti veri. Sono l'argomento di vendita più
   forte che abbiamo, e vanno mostrati come si mostra una misura: il numero
   grande, sotto cosa vuol dire, e sotto ancora da dove viene. Mai gonfiati.
   ═══════════════════════════════════════════════════════════════════════════ */
.misure{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.misura{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 24px;box-shadow:var(--shadow-sm);min-width:0;
  border-top:3px solid var(--bad);
}
.misura .numerone{
  font-family:var(--font-display);
  font-size:clamp(40px,6vw,60px);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--bad);font-variant-numeric:tabular-nums;
  margin-bottom:12px;
}
.misura h3{margin-bottom:8px}
.misura p{font-size:14.5px;color:var(--ink-2);max-width:none}
.misura .fonte{
  display:block;margin-top:14px;font-size:12.5px;color:var(--ink-3);
  padding-top:12px;border-top:1px solid var(--line-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ③  LE DUE PIATTAFORME
   ---------------------------------------------------------------------------
   WordPress e Shopify sono due prodotti diversi, non due bottoni della stessa
   cosa, e devono distinguersi a colpo d'occhio anche prima di leggere il nome.
   Le tinte non sono nuove: sono quelle che il tema ha già, riusate.
   ═══════════════════════════════════════════════════════════════════════════ */
.p-wordpress{--tinta:var(--info);         --tinta-velo:var(--info-bg)}
.p-shopify  {--tinta:var(--accent-bright);--tinta-velo:var(--accent-bright-soft)}

.marchio-piattaforma{display:inline-flex;align-items:center;gap:12px;min-width:0}
.marchio-piattaforma .bollo{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--tinta-velo);color:var(--tinta);
}
.marchio-piattaforma .bollo svg{width:24px;height:24px}
.marchio-piattaforma .dicitura{display:flex;flex-direction:column;line-height:1;min-width:0}
.marchio-piattaforma .sopra{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:4px;
}
.marchio-piattaforma .parola{
  font-family:var(--font-display);font-size:26px;font-weight:800;
  letter-spacing:-.025em;color:var(--ink-strong);
}
.marchio-piattaforma.grande .bollo{width:58px;height:58px;border-radius:18px}
.marchio-piattaforma.grande .bollo svg{width:30px;height:30px}
.marchio-piattaforma.grande .parola{font-size:clamp(28px,3.4vw,36px)}
.scheda-piattaforma{border-top:3px solid var(--tinta)}
a.scheda-piattaforma:hover{border-color:var(--tinta)}
.freccia-tinta{color:var(--tinta)}

/* Il rimando da una panoramica alla pagina completa. */
.rimando-pagina{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:24px;padding:16px 18px;
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-m);
}
.rimando-pagina span{font-size:14px;color:var(--ink-2);flex:1 1 240px}

/* ─────────────────────────── ritocchi per il telefono ─────────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  .scheda{padding:20px}
  .colonna{padding:22px}
  .passo{padding:18px;gap:14px}
  .piano{padding:22px 18px}
  .misura{padding:22px 18px}
  .riga-controllo{padding:10px;gap:10px}
  .marchio-nota{display:none}
  .testa-sezione{margin-bottom:32px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ④  LE TRE FIGURE NUOVE — 28 agosto 2026
   ---------------------------------------------------------------------------
   Sono le tre cose che il sito prima raccontava solo a parole:

     A. LA CONVIVENZA  (index.html)      — cosa esce già dal sito, cosa manca,
                                           cosa aggiunge SeoFixPro.
     B. IL CONFRONTO   (wordpress.html)  — Yoast, Rank Math e noi, comprese le
                                           righe dove sono meglio loro.
     C. LE 11 FAMIGLIE (come-funziona)   — i 94 controlli, contati.

   TRE REGOLE CHE VALGONO PER TUTTE E TRE, e che non vanno rotte:

   1. NESSUN COLORE SCRITTO QUI. Solo richiami a temi.css, come nel resto del
      file. Se un giorno il viola diventa blu, queste figure cambiano da sole.

   2. IL SEMAFORO RESTA IL SEMAFORO. Verde, giallo e rosso qui dentro NON
      compaiono per dire «bravi noi» o «male loro»: dicono uno stato del sito
      di chi legge. Il giudizio sul confronto usa l'accento del marchio e il
      grigio, che non sono luci del semaforo.

   3. MAI IL SOLO COLORE. Ogni pastiglia, ogni nodo e ogni segmento porta una
      PAROLA o un SIMBOLO oltre al colore: chi non distingue il rosso dal verde
      legge la stessa cosa di tutti gli altri.

   Il testo sta in HTML, non dentro l'SVG: così si ridimensiona, si traduce, e
   lo leggono i lettori di schermo. Gli SVG in linea disegnano SOLO le forme —
   nodi, collegamenti, frecce — e sono aria-hidden, perché la stessa cosa è
   scritta accanto a parole.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Testo che serve solo a chi ascolta la pagina invece di guardarla.
   Non "display:none": quello lo toglierebbe anche ai lettori di schermo. */
.solo-lettori{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ─────────────────────────────────────────────────────────────────────────
   A · LA CONVIVENZA — tre pannelli e due frecce
   La freccia gira di 90° quando i pannelli si incolonnano: una freccia che
   punta a destra sopra un pannello che sta sotto è un controsenso.
   ───────────────────────────────────────────────────────────────────────── */
.convivenza{
  display:grid;gap:14px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}
@media (max-width:900px){
  .convivenza{grid-template-columns:minmax(0,1fr)}
  .conv-freccia svg{transform:rotate(90deg)}
}
.conv-passo{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px 20px;min-width:0;display:flex;flex-direction:column;
}
.conv-passo.conv-nostro{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow);padding:21px 19px}
.conv-passo h3{font-size:16.5px;margin-bottom:6px}
.conv-passo > p{font-size:13.5px;color:var(--ink-3);max-width:none}
.conv-numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;margin-bottom:12px;
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.conv-nostro .conv-numero{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.conv-freccia{align-self:center;justify-self:center;color:var(--ink-3);display:grid;place-items:center;padding:4px}
.conv-freccia svg{width:26px;height:26px;display:block}

/* il disegnino del grafo: gli stessi nodi in tutti e tre i pannelli, ed è
   proprio questo il punto — il perno non cambia mai, si riempiono i buchi. */
.conv-grafo{width:100%;height:auto;display:block;margin:2px 0 14px;max-width:230px}

/* i nodi elencati a parole sotto il disegno */
.nodi{list-style:none;display:grid;gap:7px;margin-top:auto}
.nodi li{
  display:flex;align-items:baseline;gap:9px;min-width:0;
  font-size:12.5px;padding:8px 10px;border-radius:var(--r-s);
  border:1px solid var(--line-soft);background:var(--surface-2);
}
.nodi .tipo{font-family:var(--font-mono);font-size:12px;color:var(--ink-strong);overflow-wrap:anywhere}
.nodi .nota{color:var(--ink-3);margin-left:auto;flex-shrink:0;font-size:11.5px}
.nodi .segna{font-weight:900;flex-shrink:0;line-height:1.3}
/* un nodo che manca: tratteggiato, ambra, e con scritto «manca». Tre segnali
   per la stessa cosa, non uno solo. */
.nodi li.manca{border-style:dashed;border-color:var(--warn);background:var(--warn-bg)}
.nodi li.manca .tipo,.nodi li.manca .nota,.nodi li.manca .segna{color:var(--warn-ink)}
.nodi li.aggiunto{border-color:var(--accent);background:var(--accent-soft)}
.nodi li.aggiunto .tipo,.nodi li.aggiunto .nota,.nodi li.aggiunto .segna{color:var(--accent)}
.nodi li.tenuto .segna{color:var(--ok-ink)}

/* la riga finale: il consiglio di tutti, e il nostro, uno accanto all'altro */
.due-strade{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:22px}
.strada{
  border:1px solid var(--line);border-radius:var(--r-l);padding:22px 20px;
  background:var(--surface);min-width:0;display:flex;flex-direction:column;gap:12px;
}
.strada.strada-nostra{border-color:var(--accent);background:var(--accent-soft)}
.strada .etichetta-colonna{align-self:flex-start}
.strada.strada-altrui .etichetta-colonna{background:var(--idle-bg);color:var(--idle)}
.strada.strada-nostra .etichetta-colonna{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.strada svg{width:100%;height:auto;max-width:280px;display:block}
.strada p{font-size:14px;color:var(--ink-2);max-width:none}
.strada p b{color:var(--ink-strong)}

/* ─────────────────────────────────────────────────────────────────────────
   B · IL CONFRONTO ONESTO
   Tre gruppi di righe, e il primo è quello dove sono meglio loro. È voluto:
   una tabella in cui si vince su tutto non la crede nessuno, e chi la legge
   smette di credere anche alle righe vere.
   ───────────────────────────────────────────────────────────────────────── */
.tabella-confronto{width:100%;min-width:700px;border-collapse:collapse;font-size:14.5px}
.tabella-confronto th,.tabella-confronto td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.tabella-confronto thead th{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);white-space:nowrap;
}
.tabella-confronto tbody th{font-weight:600;color:var(--ink);width:34%}
.tabella-confronto td{text-align:center;color:var(--ink-2)}
.tabella-confronto td.giudizio{text-align:left;white-space:nowrap}
/* ⚠️ IL FONDO TINTO CAMBIA LE CARTE, E QUI SE N'ERA DIMENTICATO.
   La colonna evidenziata non sta sul fondo normale ma su --accent-soft, che
   al buio e' un verde scuro (circa rgb(35,62,68)). I colori scelti contro il
   fondo normale li' non bastano piu': misurati in pagina il 28 agosto,
   l'intestazione stava a 3,53 e le crocette a 4,48, contro il 4,5 richiesto.
   E' la stessa famiglia delle pastiglie del semaforo — un colore giusto
   altrove, usato sopra una tinta. */
.tabella-confronto .colonna-forte{background:var(--accent-soft)}
.tabella-confronto thead th.colonna-forte{color:var(--ink-strong)}
.tabella-confronto .colonna-forte .segno-no{color:var(--bad-su-tinta)}
.tabella-confronto .colonna-forte .segno-si{color:var(--ok-su-tinta)}
.tabella-confronto tbody tr:last-child th,.tabella-confronto tbody tr:last-child td{border-bottom:0}
/* l'intestazione di ciascuno dei tre gruppi di righe */
.riga-gruppo th{
  background:var(--sunken);color:var(--ink-strong);
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.verdetto{
  display:inline-block;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:var(--r-gg);letter-spacing:.02em;
}
/* ⚠ QUI NON C'È IL SEMAFORO, ED È UNA DECISIONE.
   «Meglio loro» non è un guasto del sito di chi legge, e «solo noi» non è un
   collaudo passato: il verde e il rosso direbbero una cosa che non è. Quindi
   grigio per loro, accento del marchio per noi, e la parola scritta sempre. */
.verdetto-loro{background:var(--idle-bg);color:var(--ink-strong)}
.verdetto-pari{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.verdetto-noi{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}

/* ─────────────────────────────────────────────────────────────────────────
   C · I 94 CONTROLLI IN 11 FAMIGLIE
   La barra in cima è la stessa cosa dei numeri sotto, disegnata. Se qualcuno
   cambia un numero e non l'altro, la barra e l'elenco si contraddicono a
   vista: è un difetto voluto del disegno, serve ad accorgersene.
   Le quattro tinte sono quelle che il tema ha già, e NON sono il semaforo.
   ───────────────────────────────────────────────────────────────────────── */
.barra-fronti{
  display:flex;width:100%;height:46px;border-radius:var(--r-gg);
  overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
}
.barra-fronti span{
  display:grid;place-items:center;min-width:0;
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--su-accento);
}
.fronte-1{background:var(--accent)}
.fronte-2{background:var(--accent-bright)}
.fronte-3{background:var(--info)}
.fronte-4{background:var(--idle)}
/* Sotto i 560 pixel il segmento da 9 su 94 è largo come due lettere: il
   numero dentro non ci sta e verrebbe tagliato. Sparisce dalla barra e resta
   nella legenda, dove non è mai mancato. */
@media (max-width:560px){.barra-fronti span{font-size:0}.barra-fronti{height:30px}}

.legenda-fronti{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;
  font-size:13.5px;color:var(--ink-2);
}
.legenda-fronti li{display:flex;align-items:center;gap:8px}
.legenda-fronti .bollino{width:13px;height:13px;border-radius:4px;flex-shrink:0}
.legenda-fronti b{color:var(--ink-strong);font-variant-numeric:tabular-nums}

.famiglie{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:26px}
.gruppo-famiglie{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:20px;min-width:0;border-top:3px solid var(--linea-fronte,var(--accent));
}
.gruppo-famiglie.f1{--linea-fronte:var(--accent)}
.gruppo-famiglie.f2{--linea-fronte:var(--accent-bright)}
.gruppo-famiglie.f3{--linea-fronte:var(--info)}
.gruppo-famiglie.f4{--linea-fronte:var(--idle)}
.gruppo-famiglie h3{font-size:16.5px;margin-bottom:3px}
.gruppo-famiglie .quanti{
  display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.elenco-famiglie{list-style:none;display:grid;gap:13px}
.elenco-famiglie li{display:grid;gap:5px;min-width:0}
.fam-testa{display:flex;align-items:baseline;gap:10px;min-width:0}
.fam-nome{font-size:14px;font-weight:700;color:var(--ink-strong);min-width:0}
.fam-num{
  margin-left:auto;flex-shrink:0;font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-gg);padding:2px 9px;
}
.fam-che-fa{font-size:13px;color:var(--ink-2);max-width:none}
/* la barretta: lunga in proporzione al numero, con 14 come massimo perche'
   quattordici e' la famiglia piu' grande. È un di più visivo — il numero
   scritto accanto resta la fonte. */
.fam-barra{
  display:block;height:6px;border-radius:var(--r-gg);
  background:var(--surface-2);border:1px solid var(--line-soft);overflow:hidden;
}
.fam-barra i{
  display:block;height:100%;
  width:calc(var(--q,1) / 14 * 100%);
  background:var(--linea-fronte,var(--accent));
}

/* ─────────────────────────── telefono ─────────────────────────────────── */
@media (max-width:620px){
  .conv-passo{padding:18px}
  .strada{padding:18px}
  .gruppo-famiglie{padding:18px}
}

/* ─────────────────────────────────────────────────────────────────────────
   LE TINTE DENTRO GLI SVG IN LINEA
   Stanno qui e non negli attributi dei disegni per due motivi: perché la
   regola del sito è che nelle pagine non si scrive nemmeno un colore, e
   perché una classe si ritinge da sola quando il tema cambia.
   Anche qui non c'è nessun colore a mano: solo richiami a temi.css.
   ───────────────────────────────────────────────────────────────────────── */
.d-linea    {stroke:var(--line);   fill:none;stroke-width:2}
.d-perno    {stroke:var(--ink-3);  fill:var(--surface)}
.d-nodo     {stroke:var(--ink-3);  fill:var(--surface-2)}
.d-manca    {stroke:var(--warn);   fill:var(--warn-bg);stroke-dasharray:5 4}
.d-nuovo    {stroke:var(--accent); fill:var(--accent-soft)}
.d-scatola  {stroke:var(--line);   fill:var(--surface-2)}
.d-spenta   {stroke:var(--warn);   fill:var(--warn-bg);stroke-dasharray:5 4}
.d-nostra   {stroke:var(--accent); fill:var(--accent-soft)}
.d-segno-manca  {stroke:var(--warn-ink);  fill:none;stroke-width:2.6;stroke-linecap:round}
.d-segno-nuovo  {stroke:var(--accent);    fill:none;stroke-width:2.6;stroke-linecap:round}
.d-segno-freccia{stroke:var(--accent);    fill:none;stroke-width:2;stroke-linecap:round}
.d-nodo,.d-manca,.d-nuovo,.d-perno,.d-scatola,.d-spenta,.d-nostra{stroke-width:2}
.d-testo{font-family:var(--font-sans);font-size:13px;font-weight:700;fill:var(--ink-strong)}
.d-testo-piccolo{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--ink-3)}
.d-testo-spento{fill:var(--warn-ink)}
.d-testo-nostro{fill:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   ⑤  LE SCHEDE ORFANE — 28 agosto 2026
   ---------------------------------------------------------------------------
   Una griglia che lascia UNA scheda sola sull'ultima riga si legge come un
   errore, anche quando non lo è. Con `auto-fit` il numero di colonne lo decide
   lo spazio, e a certe larghezze veniva fuori 3+1 (quattro schede) o 2+1 (tre).
   Misurato a 375, 768, 1024 e 1440 su tutte e otto le pagine.

   La cura NON è cambiare i minmax a caso — sposta il difetto a un'altra
   larghezza — ma imporre alle griglie con QUATTRO schede di passare da 1 a 2 a
   4 colonne saltando il 3, che è l'unico numero che le lascia spaiate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── quattro schede: 1 → 2 → 4, mai 3 ── */
.piani,.griglia-secca,.famiglie{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .piani,.griglia-secca,.famiglie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  /* A 1024 restano due colonne: quattro schede da 224 pixel sarebbero troppo
     strette per il testo che ci sta dentro, e 2+2 è comunque pari. */
  .piani,.griglia-secca{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Le famiglie restano SEMPRE due per riga anche sugli schermi larghi: ogni
   riquadro contiene fino a cinque famiglie con la loro descrizione, e a un
   quarto di schermo il testo si spezzerebbe su otto righe. Due colonne di
   quattro schede fanno 2+2 a ogni larghezza: nessun orfano possibile. */

/* ── tre schede affiancate anche a 768 ──
   .misure con tre voci (la pagina Shopify) faceva 2+1: con 280 pixel di minimo
   la terza colonna non entrava per una manciata di pixel. 228 la fa entrare, e
   dove le misure sono due (la pagina principale) non cambia niente. */
.misure{grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr))}

/* ── sette schede: l'ultima si prende la riga intera ──
   Sette non si dispone mai pari su due o tre colonne. Invece di lasciarla
   stretta e sola in fondo, l'ultima occupa tutta la riga: così si legge come
   una scelta e non come un buco. Va messa a mano, con la classe qui sotto,
   perché vale solo per le griglie con un numero dispari di schede. */
@media (min-width:900px){
  .griglia-larga.ultima-piena > :last-child{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⑥  LA TABELLA DI CONFRONTO SUL TELEFONO — 28 agosto 2026
   ---------------------------------------------------------------------------
   ⚠ QUESTO NON È UN ABBELLIMENTO: SENZA, LA TABELLA DICE IL CONTRARIO DEL VERO.
   A 375 pixel la tabella scorreva dentro il suo riquadro — come deve — ma di
   cinque colonne se ne vedeva UNA, «Yoast». Chi apriva la pagina sul telefono
   e non scorreva di lato leggeva, nel gruppo «dove non abbiamo trovato nessun
   altro», cinque crocette in colonna: sembravano NOSTRE. La colonna SeoFixPro,
   che è quella per cui la tabella esiste, restava fuori dallo schermo.

   Sotto i 700 pixel la tabella smette di essere una tabella e diventa un
   elenco di schede: una scheda per riga, e dentro ogni scheda le tre risposte
   una sotto l'altra, ognuna con il nome del suo plugin davanti. Il nome lo
   porta la cella stessa (data-col), quindi il testo non è scritto due volte e
   non può scollarsi dall'intestazione.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* niente più scorrimento laterale: non c'è più niente da scorrere */
  .tabella-scorre-confronto{overflow-x:visible}
  .tabella-confronto{min-width:0;display:block}
  .tabella-confronto thead{display:none}          /* i nomi stanno nelle celle */
  .tabella-confronto tbody,
  .tabella-confronto tr,
  .tabella-confronto td{display:block;width:auto}

  .tabella-confronto tbody tr{
    border-bottom:1px solid var(--line);padding:16px;
  }
  .tabella-confronto tbody tr:last-child{border-bottom:0}
  /* la domanda, in cima alla scheda */
  .tabella-confronto tbody th{
    display:block;width:auto;padding:0 0 12px;border:0;
    font-weight:700;color:var(--ink-strong);
  }
  /* le tre risposte: nome del plugin a sinistra, segno a destra */
  .tabella-confronto td{
    text-align:left;padding:7px 0;border:0;
    display:flex;align-items:center;gap:10px;
    border-top:1px solid var(--line-soft);
  }
  .tabella-confronto td::before{
    content:attr(data-col);
    flex:1 1 auto;min-width:0;
    font-size:13px;color:var(--ink-2);
  }
  /* la nostra colonna resta riconoscibile anche senza intestazione */
  .tabella-confronto td.colonna-forte{
    background:var(--accent-soft);border-radius:var(--r-s);
    padding-inline:10px;margin-inline:-10px;
  }
  .tabella-confronto td.colonna-forte::before{color:var(--accent);font-weight:800}
  /* il verdetto chiude la scheda, senza etichetta davanti */
  .tabella-confronto td.giudizio{border-top:0;padding-top:12px;white-space:normal}
  .tabella-confronto td.giudizio::before{content:none}
  /* l'intestazione di gruppo resta una fascia a tutta larghezza */
  .tabella-confronto tr.riga-gruppo{padding:0;border-bottom:0}
  .tabella-confronto .riga-gruppo th{padding:12px 16px}
}