/* ⚠️ LE MISURE DEI TESTI ARRIVANO DAL MODELLO — 09/09/2026.
   Questo foglio non ha un :root suo: si appoggia a --t-vicino, --t-nota e
   --t-etichetta, che stanno nel :root dei cinque modelli di sito. Il valore
   dopo la virgola è la rete, se un modello nuovo si dimenticasse di metterle.
   🔴 IL PAVIMENTO È 14 px: sotto quella riga non scende niente.
   Il modellino, con le otto regole di impaginazione:
   https://claude.ai/code/artifact/2af67a64-89ce-4750-8cb3-ff05929fbb9b */

/* ══ LA STRISCIA DELLA PROPOSTA E LE SUE FINESTRELLE ══════════════════════
   Estratto dai cinque modelli il 28/08/2026, quando le copie sono diventate
   cinque: erano circa centottanta righe identiche in ogni file, e questa è
   esattamente la classe di trappola che il progetto ha già pagato due volte.

   ⚠️ QUESTA ROBA NON È IL SITO DEL CLIENTE: è il nostro involucro. Per questo
   il foglio sta qui e l'HTML lo scrive il server (functions/_middleware.js),
   che già decideva da solo se mostrarla, sostituirla o toglierla in base allo
   stato della pagina.

   📌 Il file lo carica il SERVER, non il modello: viene aggiunto solo alle
   pagine che la striscia ce l'hanno davvero. Un cliente che ha pagato non se
   lo scarica nemmeno.
   ⚠️ Usa var(--brand), var(--line), var(--ink) e var(--muted): sono definite
   in tutti e cinque i modelli. Un modello nuovo deve averle. */

/* ⚠️ RIFATTA SOTTILE il 30/08/2026, su richiesta di Simone: era alta il doppio,
   e con i tasti fissi in fondo allo schermo del sito restava poco spazio per il
   sito vero — che è la cosa che deve convincere. Adesso è UNA riga: la parola
   che dice cos'è, il prezzo, il collegamento piccolo e il tasto.
   📌 Quello che stava qui — «come funziona», «altri piani», «rimuovi questa
   pagina» — è sceso in fondo alla pagina, in .demofondo. */
/* ══ LA CORNICE APPICCICATA — 04/09/2026 ═══════════════════════════════════
   🔴 Chiesto da Simone: anche la riga «Questo sito è tuo» resta in vista, sul
   telefono e sul computer.
   ⚠️ NON si possono appiccicare due cose una sotto l'altra: si sovrappongono, e
   la seconda dovrebbe sapere quanto è alta la prima — che però si accorcia
   scorrendo. Quindi si appiccica UNA cornice che le contiene tutte e due, e
   dentro restano ferme.
   📌 La striscia da sola (le vetrine «esempio») questa cornice non ce l'ha, e
   resta appiccicata da sé: le due regole qui sotto coprono tutti e due i casi. */
.alto{position:sticky;top:0;z-index:70;overflow-anchor:none}
.alto .demobar{position:static;z-index:auto}
.demobar{position:sticky;top:0;z-index:70;overflow-anchor:none;background:#141010;color:#fff;
  padding:.42rem .9rem;font-size:var(--t-nota,.9375rem);line-height:1.3}
.demobar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:.7rem}
.demobar-chi{display:flex;align-items:center;gap:.6rem;min-width:0}
.demobar-pill{flex:none;font-size:var(--t-etichetta,.875rem);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.28);border-radius:2px;padding:.16rem .4rem;color:rgba(255,255,255,.75)}
.demobar-azione{display:flex;align-items:center;gap:.8rem;flex:none}
.demobar-prezzo{margin:0;color:rgba(255,255,255,.62);font-size:var(--t-etichetta,.875rem);white-space:nowrap}
.demobar-prezzo b{color:#fff;font-size:var(--t-vicino,1rem);font-weight:700;letter-spacing:-.01em}
/* 🔴 INGRANDITO IL 04/09/2026 — Simone, provando dal telefono: «anche io che
   so che quel bottone è lì in alto, non lo vedevo». Da .82 a .95rem e con più
   respiro intorno. ⚠️ NON di più: la striscia è alta una riga sola apposta
   (deciso il 30/08), e un tasto più grosso la farebbe crescere. */
/* ⚠️ line-height 1.2 e non l'1.3 della barra: senza, alzando il testo la
   striscia cresceva di un pixel e mezzo. In una barra quello che occupa
   spazio non è la misura del testo, è l'interlinea che si porta dietro. */
.demobar-cta{flex:none;background:var(--brand);color:#fff;text-decoration:none;font-weight:800;
  font-size:var(--t-vicino,1rem);line-height:1.2;
  padding:.55rem 1.15rem;border-radius:999px;white-space:nowrap;transition:opacity .16s,transform .16s;
  position:relative;overflow:hidden;box-shadow:0 2px 14px -4px rgba(0,0,0,.55)}
/* ⚠️ IL LUCCICHIO PASSA SOPRA IL TASTO INTERO, non solo sul testo: il testo è
   bianco e da solo non si noterebbe (rilievo di Simone). È una passata lenta,
   ogni quattro secondi e mezzo — non un lampeggio.
   📌 Si spegne da solo per chi sul telefono ha acceso «riduci le animazioni». */
.demobar-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.45) 48%,transparent 64%);
  transform:translateX(-125%);animation:luccichio 3s ease-in-out .8s infinite}
@keyframes luccichio{0%{transform:translateX(-125%)}55%,100%{transform:translateX(125%)}}
@media(prefers-reduced-motion:reduce){.demobar-cta::after{animation:none}}

/* ══ SUL COMPUTER IL TASTO CAMBIA COLORE, E NON È UN CAPRICCIO — 04/09/2026 ══
   🔴 Simone: «anche io che so che quel bottone è lì in alto, non lo vedevo».
   Il tasto prendeva il colore del sito (var(--brand)), quindi si confondeva con
   la pagina proprio mentre doveva staccarsene: è il tasto che porta alla cassa,
   e il suo mestiere è spezzare la monotonia, non accompagnarla.
   ⚠️ SOLO DAL COMPUTER IN SU. Sul telefono resta il colore del sito: lì la barra
   è stretta, il tasto è già l'unica cosa colorata, e il correttivo delle
   dimensioni basta — provato da Simone.
   📌 Rosso acceso su tutti, tranne la ristorazione: quella è già rossa e se lo
   mangerebbe, e lì va un verde acido, che sopra il fondo nero della barra è la
   cosa più visibile che ci sia. */
/* 🔴 08/09/2026 — IL COLORE A CONTRASTO VALE ANCHE SUL TELEFONO.
   Prima era solo dal computer in su: sul telefono il tasto restava del colore
   del sito. Simone, guardandolo dal vivo: «su desktop il bottone cta è con
   colore a contrasto, scelta voluta e con effetto fantastico, mentre su mobile
   l'avevamo lasciato in tinta. Applicalo anche su mobile». */
.demobar-cta{background:#FF3B21;color:#fff}
.demobar[data-mestiere="ristorazione"] .demobar-cta{background:#C9F24E;color:#141010}
.demobar[data-mestiere="ristorazione"] .demobar-cta::after{
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.8) 48%,transparent 64%)}
/* ⚠️ I cinque modelli avevano due versioni diverse di questa riga — chi
   schiariva e chi scuriva — perché il marchio in un caso è scuro e nell'altro
   chiaro. È la prova in piccolo di cosa succede a cinque copie. L'opacità
   funziona su qualunque colore. */
.demobar-cta:hover{opacity:.88;transform:translateY(-1px)}
/* Scendendo si stringe ancora: resta il tasto e il prezzo. */
.demobar.compatta{padding:.3rem .9rem}
.demobar.compatta .demobar-pill,.demobar.compatta .demobar-perche{display:none}
.solo-stretto{display:none}
@media(max-width:680px){
  .demobar{padding:.38rem .7rem}
  .demobar-pill{display:none}          /* sul telefono ogni riga conta */
  .demobar-in{gap:.55rem}
  .demobar-chi{gap:.4rem}
  .demobar-prezzo{font-size:var(--t-etichetta,.875rem);line-height:1.15}
  .demobar-prezzo b{font-size:var(--t-nota,.9375rem)}
  .demobar-azione{gap:.55rem}
  .demobar-cta{font-size:var(--t-nota,.9375rem);padding:.5rem .9rem}
  /* 🔴 31/08/2026 — VIA IL COLLEGAMENTO «PERCHÉ UN SITO» SUL TELEFONO.
     A 390 px il testo usciva schiacciato: quattro cose su una riga sola non ci
     stanno. La barra però resta ALTA UNA RIGA, perché sotto ci sono già i tasti
     fissi e del sito vero resterebbe una finestrella (deciso il 30/08).
     📌 Quel collegamento serviva quando sotto la demo c'erano cinque domande.
     Adesso sotto c'è la landing intera: chi scorre ci finisce dentro da solo. */
  .demobar-perche{display:none}
  /* Il testo lungo non ci sta accanto al prezzo e al tasto: si accorcia.
     🐛 31/08/2026: «al mese» e «Perché un sito» si sovrapponevano. Il prezzo è
     scritto tutto su una riga e non si stringe, quindi sbordava sopra al
     collegamento accanto. Sul telefono adesso si legge «da 4,90 €/mese». */
  .solo-largo{display:none}
  .solo-stretto{display:inline}
}

/* ══ I TASTI SECONDARI, IN FONDO ALLA PAGINA ══
   Erano in cima, sotto la striscia. Servono a chi è già sceso fino in fondo:
   chi apre la pagina vuole vedere il sito, non le nostre opzioni. */
.demofondo{background:#141010;color:rgba(255,255,255,.45);padding:1.4rem 1.1rem 2rem;
  font-size:var(--t-nota,.9375rem);text-align:center;line-height:1.6}
.demofondo-in{max-width:660px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:.5rem 1.3rem}
.demofondo button{background:none;border:0;padding:0;font-family:inherit;font-size:var(--t-nota,.9375rem);
  color:rgba(255,255,255,.7);text-decoration:underline;cursor:pointer}
.demofondo button:hover{color:#fff}
/* 🩶 09/09/2026: era .4 di bianco, cioè 3,7:1 su questo nero. Sotto soglia. */
.demofondo p{margin:0 0 .9rem;color:rgba(255,255,255,.6)}

dialog{border:0;padding:0;background:transparent;max-width:min(430px,92vw)}
dialog::backdrop{background:rgba(35,27,20,.72)}
/* 💊 12/09/2026 — Angoli tondi anche qui: il foglio come le carte del sito
   (18px), i tasti dentro come tutti gli altri (pastiglie). */
.sheet{background:#fff;border:1px solid var(--line);padding:2rem;text-align:center;border-radius:18px}
.sheet h3{font-size:1.4rem;margin-bottom:.8rem}
.sheet p{color:var(--muted);font-size:var(--t-vicino,1rem);margin-bottom:1.8rem}
.sheet .row{display:flex;gap:.6rem}
.sheet button{flex:1;padding:.85rem;border-radius:999px;font-family:inherit;font-weight:700;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);font-size:var(--t-vicino,1rem)}
.sheet button.danger{background:var(--brand);border-color:var(--brand);color:#fff}
.sheet.sx{text-align:left}
.sheet.sx p{margin-bottom:.9rem}
.sheet .ultimo{margin-bottom:0}
.sheet.sx h3{text-align:center}
.chiudi{margin-top:1.5rem}
.piani{display:grid;gap:.55rem;margin-bottom:1.3rem}
.piani a{display:block;border:1px solid var(--line);border-radius:14px;padding:.85rem .95rem;text-decoration:none;
  color:var(--ink);transition:border-color .16s}
.piani a:hover{border-color:var(--brand)}
.piani strong{display:block;font-size:var(--t-vicino,1rem)}
.piani em{font-style:normal;color:var(--brand);font-weight:700}
.piani span{display:block;font-size:var(--t-nota,.9375rem);color:var(--muted);margin-top:.2rem;line-height:1.4}
/* 🐛 08/09/2026 — il bordo dice UNA cosa sola: «questa è la riga scelta». Il
   consigliato tiene la sua etichetta, che è un'informazione diversa. */
/* ══ IL TOCCO SI VEDE SUBITO — 04/09/2026 ══
   🔴 Rilievo di Simone: fra il tocco su un piano e l'apertura della cassa passa
   più di un secondo, e in quel tempo non succedeva niente. Sembrava che il
   tocco non fosse stato preso, e restava evidenziato il piano consigliato — che
   non era quello scelto. Adesso il bordo si sposta col dito giù, prima ancora
   che la pagina cominci a cambiare. */
/* ⚠️ Il velo della riga scelta era un rosa fisso (#FBF0EB), scritto quando il
   colore del sito era sempre il terracotta del ristorante. Dal 09/09/2026 il
   cliente sceglie il colore, e un velo rosa sotto un marchio blu stonava. */
.piani a.scelto{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff);box-shadow:inset 0 0 0 1px var(--brand)}
.piani a:active{background:#FBF0EB}
.piani-attesa{margin:.9rem 0 0;text-align:center;font-size:var(--t-nota,.9375rem);color:var(--muted)}
/* 🐛 08/09/2026 — LA FINESTRELLA USCIVA DAL BORDO, con la barra di scorrimento.
   Trovato da Simone sul ristorante di prova: un indirizzo è UNA PAROLA SOLA, e
   una parola che non ci sta allarga il riquadro invece di andare a capo. */
.piani span,.piani strong{overflow-wrap:anywhere}
/* ══ «CONTINUA», NON «CHIUDI» — 08/09/2026 ══
   Il tasto grosso porta avanti; per uscire c'è la ✕ in alto a destra.
   ⚠️ È una PASTIGLIA larga quanto le parole, come tutti i nostri tasti: la
   regola sta in CLAUDE.md 💊. */
.sheet .row.chiudi{justify-content:center}
.sheet button.avanti{flex:0 0 auto;width:fit-content;max-width:100%;
  background:var(--brand);border:0;color:#fff;
  font-size:var(--t-vicino,1rem);padding:.78rem 2.1rem;border-radius:999px}
.sheet button.avanti:hover{opacity:.9}
/* La rata non e' un piano, e' un modo di pagare il Completo: sta sotto la sua
   scheda, non in fila con le altre. Deciso il 28/08/2026.
   ⚠️ Il collegamento va rimesso in linea a mano: «.piani a» qui sopra e' un
   riquadro intero, con bordo e spaziatura. */
/* ⚠️ IN PAGINA i piani sono DUE, QUI sono TRE — e non è una svista.
   Deciso da Simone il 28/08/2026: la home deve far scegliere fra due cose, ma
   questo è il momento della cassa, e chi è arrivato fin qui deve trovare anche
   il modo di pagare che gli va bene. Il mensile vale quanto l'annuale. */
.rata{font-size:var(--t-nota,.9375rem);color:var(--muted);line-height:1.45;margin:.9rem 0 0;text-align:center}
.rata b{color:var(--ink)}
.piani-fine{display:none}
.piani a.consigliato::before{content:"Consigliato";display:block;font-size:var(--t-etichetta,.875rem);
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--brand);margin-bottom:.3rem}

/* ══ IL BIVIO SULLA VETRINA — 08/09/2026 ══════════════════════════════════
   Chi sceglie la Vetrina non arriva subito alla cassa: prima vede che indirizzo
   avrà con l'uno e con l'altro piano.
   ⚠️ NIENTE RIQUADRI QUI DENTRO. I due indirizzi si distinguono col PESO del
   testo e con un filo in mezzo: in tutta la finestrella resta pieno UN oggetto
   solo, il tasto che deve far premere. Il perché in DA-RICORDARE.md ▭.
   ⚠️ È la STESSA finestrella che sta nel pannello (site/pannello/index.html):
   se cambia qui, cambia anche lì.
   ⚠️ I nomi cominciano tutti per «bv-» perché questo foglio si carica SOPRA il
   sito del cliente, e un nome comune prima o poi si scontra col suo. */
.bivio-sheet,.con-ics{position:relative}
.bivio-sheet h3{text-align:left;margin:0 2.6rem .2rem 0}
/* 🐛 13/09/2026: col titolo lungo di Simone si è visto che qui il titolo era
   CENTRATO (la regola generale delle finestrelle vinceva) mentre nel pannello
   sta a sinistra. Stessa finestrella, stesso allineamento. */
#dlgBivio .sheet h3{text-align:left}
.bv-occhiello{margin:0 0 1.2rem!important}
.bv-occhiello b{font-weight:600;color:var(--ink)}
/* 🐛 LA ✕ NON ERA CENTRATA NEL PALLINO — visto da Simone l'08/09/2026. Il
   disegno dentro l'SVG stava bene: l'SVG era «in linea», e sotto gli restava lo
   spazio della riga di testo. «display:block» e riga a zero. */
.bv-ics{position:absolute;top:1rem;right:1rem;width:32px;height:32px;flex:0 0 auto!important;
  border:0!important;border-radius:50%!important;background:rgba(20,16,16,.07)!important;
  color:var(--ink)!important;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0!important;line-height:0}
.bv-ics svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round}
.bv-confronto{margin:0 0 1.2rem}
.bv-quale{font-size:var(--t-etichetta,.875rem);letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  margin:0 0 .25rem!important}
.bv-indir{margin:0!important;line-height:1.3;word-break:break-word}
.bv-riga.bv-vetrina .bv-quale{color:var(--muted);opacity:.75}
.bv-riga.bv-vetrina .bv-indir{color:var(--muted);font-size:var(--t-vicino,1rem)}
.bv-riga.bv-completo{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem}
.bv-riga.bv-completo .bv-quale{color:var(--brand)}

/* ══ QUELLO CHE IL COMPLETO AGGIUNGE ══
   Tre righe corte con una spunta verde, che compaiono una dopo l'altra.
   📌 Non due colonne affiancate: il nome di un'attività vera è lungo
   («trattoriadelborgo.urbianslab.com» sono trentadue caratteri) e in mezza
   schermata andrebbe a capo tre volte. */
.bv-piu{display:grid;gap:.5rem;margin:.15rem 0 0!important;padding:0;list-style:none}
.bv-piu li{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--t-vicino,1rem);line-height:1.35;
  color:var(--ink);overflow-wrap:anywhere;min-width:0}
.bv-piu li>span{min-width:0;overflow-wrap:anywhere}
.bv-piu b{font-weight:700}
/* ⚠️ Verde ACCESO, non il verde scuro degli esiti: qui è un segno positivo
   dentro una finestrella che deve piacere. */
.bv-piu .spunta{flex:none;width:16px;height:16px;margin-top:.1rem;display:block;
  fill:none;stroke:#1FA34A;stroke-width:2.9;stroke-linecap:round;stroke-linejoin:round}
/* 🪪 I due fogli in piccolo accanto alla voce del bivio — 13/09/2026, forma B
   del modellino scelta da Simone. Le FORME stanno in fogli.css (condiviso col
   pannello); qui solo i COLORI: quelli del sito sotto, cioè il colore scelto
   dal cliente o quello del modello, così biglietto e locandina sono già in
   tinta. I caratteri li scrive il codice (Fogli.FONT). */
.bv-piu li:has(.qf-scena-mini){align-items:center}
.qf-scena-mini{--q-brand:var(--brand);--q-bg:var(--bg,#FCF7EF);--q-surface:var(--surface,var(--bg,#F4EBDB));
  --q-line:var(--line,#E5D9C4);--q-ink:var(--ink,#231B14);--q-muted:var(--muted,#7B6C5A)}
#dlgBivio[open] .bv-piu li{animation:bvSale .52s cubic-bezier(.22,.8,.3,1) both}
#dlgBivio[open] .bv-piu li:nth-child(1){animation-delay:.12s}
#dlgBivio[open] .bv-piu li:nth-child(2){animation-delay:.28s}
#dlgBivio[open] .bv-piu li:nth-child(3){animation-delay:.44s}
@keyframes bvSale{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ══ LA PASTIGLIA MESE · ANNO — 08/09/2026 ══
   I piani erano quattro (Vetrina, Completo, e di nuovo tutti e due «a rate»).
   Chi arriva qui ne ha appena visti DUE sulla landing, e trovarne quattro lo
   rimanda indietro a capire. Adesso sono due, e il modo di pagare è questa
   pastiglia — la stessa che sta nelle schede delle landing. */
.per-piani{display:flex;justify-content:center;gap:.15rem;padding:.2rem;border-radius:999px;
  background:rgba(20,16,16,.06);margin:0 auto 1rem;width:fit-content}
.per-piani button{flex:0 0 auto!important;border:0!important;background:none!important;
  font:inherit;font-size:var(--t-nota,.9375rem);font-weight:700;padding:.38rem 1.05rem!important;
  border-radius:999px!important;cursor:pointer;color:var(--muted)!important;
  transition:background .15s,color .15s}
.per-piani button[aria-pressed="true"]{background:#fff!important;color:var(--ink)!important;
  box-shadow:0 1px 3px rgba(20,16,16,.16)}
@media(prefers-reduced-motion:reduce){#dlgBivio[open] .bv-piu li{animation:none}}
.bv-scelte{display:grid;gap:.15rem;justify-items:center}
.bv-scelta{display:block;width:fit-content;max-width:100%;text-align:center;
  text-decoration:none;border-radius:999px;
  font-family:inherit;cursor:pointer;transition:background .16s}
.bv-scelta.forte{background:var(--brand);color:#fff;padding:.78rem 1.9rem;
  font-size:var(--t-vicino,1rem);font-weight:700}
/* Il prezzo sta SOTTO la pastiglia, non dentro: dentro faceva una capsula a due
   righe, che è una forma pesante. */
.bv-sottoprezzo{margin:.5rem 0 .1rem!important;font-size:var(--t-nota,.9375rem);color:var(--muted);text-align:center}
/* La scelta minore è testo, non un tasto disegnato: c'è, si legge, e non
   compete con l'altra. */
.bv-scelta.quieta{background:transparent;color:var(--ink);padding:.8rem;font-size:var(--t-vicino,1rem);font-weight:500}
.bv-scelta.quieta .bv-cifra{color:var(--muted)}
.bv-scelta.quieta .bv-cifra::before{content:" · "}
.bv-scelta.quieta:hover{background:rgba(20,16,16,.05)}

/* ══ «PERCHÉ AVERE UN SITO» IN FONDO ALLA PAGINA ══════════════════════════
   Compare solo finché il cliente non ha comprato. Lo stacco è un filo corto
   centrato: serve a dire «qui finisce il tuo sito e comincia una cosa nostra»
   senza mettere un muro. ⚠️ Usa var(--brand) e var(--muted) del modello. */
.demobar-perche{color:rgba(255,255,255,.7);text-decoration:underline;font-size:var(--t-etichetta,.875rem)}
.demobar-perche:hover{color:#fff}

.perchesito{background:#141010;color:rgba(255,255,255,.78);padding:3.2rem 1.1rem 3.6rem}
.pq-in{max-width:660px;margin:0 auto}
.pq-stacco{display:block;width:44px;height:2px;background:var(--brand);margin:0 auto 1.9rem}
.pq-occhio{margin:0 0 .5rem;text-align:center;font-size:var(--t-etichetta,.875rem);letter-spacing:.19em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.45)}
.pq-tit{margin:0 0 2.2rem;text-align:center;color:#fff;font-size:clamp(1.5rem,4.6vw,2rem);
  line-height:1.14;letter-spacing:-.015em}
.pq-lista{display:grid;gap:1.7rem}
.pq-q{margin:0;color:#fff;font-weight:700;font-size:1.04rem;line-height:1.35}
.pq-a{margin:.4rem 0 0;font-size:var(--t-vicino,1rem);line-height:1.62;color:rgba(255,255,255,.7)}
.pq-a i{font-style:italic}
.pq-a b{color:#fff;font-weight:700}
.pq-go{display:block;margin-top:2.4rem;text-align:center;color:var(--brand);
  font-weight:700;font-size:var(--t-vicino,1rem);text-decoration:none;filter:brightness(1.45)}
.pq-go:hover{text-decoration:underline}
@media(min-width:720px){
  .perchesito{padding:4rem 1.1rem 4.4rem}
  .pq-lista{gap:2rem}
}

/* il ritorno alla landing, a sinistra nella striscia */
.demobar-indietro{color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--t-etichetta,.875rem);
  white-space:nowrap;flex:none}
.demobar-indietro:hover{color:#fff;text-decoration:underline}
.demobar.compatta .demobar-indietro{display:none}
@media(max-width:680px){.demobar-indietro{font-size:var(--t-etichetta,.875rem)}}

/* ══ LA CODA: LA LANDING INTERA SOTTO LA DEMO — 31/08/2026 ═════════════════
   Sotto il piè di pagina del sito che sta guardando ci va la pagina di vendita
   del suo mestiere, per intero. L'HTML lo scrive functions/_coda-landing.js.

   🔴 OGNI REGOLA QUI SOTTO STA DENTRO «.perchesito», E NON È PIGNOLERIA:
   questo foglio viene appoggiato sopra il sito di qualcun altro, che ha già le
   sue regole su h3, p, ul e details. Una regola sciolta gli sposta il sito.
   Per lo stesso motivo qui dentro si azzerano i margini: quello che arriva dal
   modello sotto è imprevedibile.

   🎨 I COLORI STANNO TUTTI QUI SOPRA, IN OTTO NOMI — rifatti il 31/08/2026,
   perché Simone li ha visti sparsi e incoerenti, e aveva ragione: il colore
   dell'attività era finito addosso a tutto (tre filetti dei passi, i pallini di
   dieci voci, due sfondi diversi delle schede), e quando un accento è ovunque
   non indica più niente.
   ➡️ La regola adottata, in una riga: **fondo neutro, testo bianco a tre
   intensità, e il colore dell'attività in cinque posti soli** — l'occhiello, il
   filetto dell'obiezione, la pastiglia «il più scelto», il bordo della scheda
   del Completo e il tasto pieno. Tutto il resto è bianco trasparente.
   ⚠️ E dentro quei cinque, due usi diversi che NON vanno mescolati:
     · quello che si RIEMPIE (la pastiglia, il tasto) prende «--brand» pieno,
       lo stesso identico blu del tasto nella striscia in cima — è la stessa
       azione, e due blu diversi per la stessa azione si notano;
     · quello che è una RIGA o del TESTO prende «--coda-acc», cioè lo stesso
       colore schiarito: un filo da un pixel e una parola, in tinta piena su
       fondo nero, non si leggono.
   📌 Perché il colore resta quello del CLIENTE e non uno nostro: la coda sta
   appoggiata sul suo sito, e un rosso Urbians sopra il sito di un'attività
   arancione litigherebbe. Il suo colore invece ci va d'accordo per definizione.
   ⚠️ Sul nero, il colore di un'attività può essere troppo scuro per leggerlo:
   per questo l'accento è schiarito con color-mix. La riga di colore normale
   sopra è la scialuppa per i browser vecchi, e non si toglie.

   🔠 I CARATTERI SONO I NOSTRI, dal 12/09/2026. Prima si ereditavano da quelli
   del sito sopra — era voluto, perché la coda non sembrasse incollata da
   un'altra parte — ma il prezzo era che la stessa coda si leggeva in cinque
   modi diversi: Fraunces sulla scuola e sul ristorante, Jost sul generico,
   Karla sulla persona, e sul parrucchiere il CORMORANT, sottilissimo e
   strettissimo. Rilievo di Simone, che ha visto la coda della scuola leggersi
   molto meglio delle altre. Qui parla Urbians Lab, non il cliente: adesso la
   coda ha il carattere delle nostre pagine, uguale su tutte e cinque. */
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Karla;font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/karla-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Karla;font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/karla-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

.perchesito{
  --coda-serif:Fraunces,'Iowan Old Style',Georgia,serif;
  --coda-sans:Karla,'Helvetica Neue',Helvetica,sans-serif;
  font-family:var(--coda-sans);
  --coda-fondo:#121110;
  --coda-carta:rgba(255,255,255,.05);
  --coda-filo:rgba(255,255,255,.14);
  --coda-forte:#fff;
  --coda-testo:rgba(255,255,255,.72);
  --coda-tenue:rgba(255,255,255,.5);
  --coda-segno:rgba(255,255,255,.42);
  --coda-acc:var(--brand);
  background:var(--coda-fondo); color:var(--coda-testo);
  padding:2.8rem 1.1rem 3.4rem;
}
@supports (color:color-mix(in srgb,red,white)){
  .perchesito{--coda-acc:color-mix(in srgb,var(--brand) 68%,#fff)}
}
.cl-in{max-width:1000px;margin:0 auto}
/* I titoli col nostro serif, il resto col nostro sans: le stesse due famiglie
   della home e delle cinque landing. */
.perchesito .cl-tit,.perchesito .cl-h3,.perchesito .cl-sc h4,.perchesito .pq-q,
.perchesito .cl-chiudi h3,.perchesito .cl-card h3,.perchesito .cl-cifra,
.perchesito summary{font-family:var(--coda-serif)}
.perchesito h2,.perchesito h3,.perchesito h4,.perchesito p,.perchesito ul{margin:0}
.perchesito ul{list-style:none;padding:0}
.perchesito img{display:block;max-width:100%}
.perchesito b{color:var(--coda-forte);font-weight:700}
.perchesito a{color:inherit}

/* l'apertura: la scena, col nome vero di questa attività */
.cl-apre{text-align:center;max-width:640px;margin:0 auto}
/* ══ IL TASTO AL POSTO DELLA SCENA — 08/09/2026 ══
   Sotto la demo, in apertura di coda, non c'è più il discorso: c'è un tasto
   solo. Stesso colore a contrasto di quello ancorato nella barra in alto. */
.cl-apre-solo{padding:.4rem 0 .6rem}
.cl-btn-grosso{width:auto;padding:.95rem 2.2rem;
  font-size:1.06rem;letter-spacing:.01em;margin-top:1.4rem}
/* ❌ Qui il tasto si allargava a tutta la riga sotto i 520 px, cioè su ogni
   telefono: tolto il 09/09/2026, una pastiglia resta una pastiglia. */
@media(max-width:520px){.cl-btn-grosso{padding:.9rem 1.7rem}}
/* 🎨 09/09/2026 — ANCHE QUESTO SEGUE LA PALETTE, come i tasti dei prezzi e
   della chiusura. Copiava il rosso della fascia ancorata in alto (deciso
   l'08/09), ma quella è sottile e ha bisogno di gridare: qui sta in mezzo alla
   pagina, e in tinta è più elegante. Il colore è già schiarito quanto basta
   dal server. */
.cl-btn-barra{background:var(--cta-coda,var(--brand));border-color:var(--cta-coda,var(--brand));
  color:var(--cta-coda-testo,#fff)}
/* ❌ Qui la ristorazione riportava il VERDE ACIDO della fascia in alto: tolto
   il 09/09/2026. Lassù quel verde serve — la fascia è sottile e sopra il nero
   deve gridare — ma qui è un tasto grosso in mezzo alla pagina, e segue la
   palette del sito come tutti gli altri. */
.cl-btn-barra:hover{opacity:.88;transform:translateY(-1px)}
.cl-occhio{font-size:var(--t-etichetta,.875rem);letter-spacing:.19em;text-transform:uppercase;
  font-weight:700;color:var(--coda-acc);margin-bottom:.55rem}
.cl-tit{color:var(--coda-forte);font-size:clamp(1.5rem,4.8vw,2.15rem);line-height:1.16;
  letter-spacing:-.015em;font-weight:700}
.cl-lede{margin-top:.9rem;font-size:var(--t-vicino,1rem);line-height:1.6;color:var(--coda-testo)}

/* le sezioni, separate da un filo sottile invece che da un titolo grosso */
.cl-sez{margin-top:2.9rem;padding-top:2.4rem;border-top:1px solid var(--coda-filo)}
.cl-h3{color:var(--coda-forte);font-size:clamp(1.2rem,3.4vw,1.55rem);line-height:1.2;
  letter-spacing:-.01em;font-weight:700;margin-bottom:.7rem}
.cl-centro{text-align:center}
.cl-p{font-size:var(--t-vicino,1rem);line-height:1.62;color:var(--coda-testo);max-width:56ch}

/* ══ «QUESTO SITO È TUO» — 01/09/2026 ══════════════════════════════════════
   La riga che compare SOLO a chi ha appena creato la pagina, subito sotto la
   striscia. Dice due cose: che il sito è suo, e da dove si cambia.
   ⚠️ Nasce nascosta e la accende il codice: senza codice non si vede.
   ⚠️ Il fondo è quello dell'attività, non il nostro nero: questa riga parla a
   uno che sta guardando IL SUO sito, e il nero è l'involucro del venditore.
   📌 Le misure sono più generose del resto della striscia — 15 px, non 13 —
   perché qui non stiamo vendendo: stiamo dando istruzioni a chi ha appena
   ricevuto una cosa, e quello è il momento in cui la leggibilità conta. */
.tuosito{background:#F2EDE3;color:#17130F;border-bottom:1px solid rgba(23,19,15,.14)}
.tuosito-in{max-width:1000px;margin:0 auto;padding:.75rem 1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tuosito p{margin:0;font-size:var(--t-vicino,1rem);line-height:1.45}
.tuosito b{color:#17130F}
.tuosito-cta{flex:none;background:#17130F;color:#F2EDE3;text-decoration:none;
  font-weight:700;font-size:var(--t-vicino,1rem);padding:.5rem 1rem;border-radius:999px;
  transition:opacity .18s,transform .18s}
.tuosito-cta:hover{opacity:.88;transform:translateY(-1px)}
/* ⚠️ SCORRENDO, LA FRASE SPARISCE E RESTA IL TASTO — 04/09/2026.
   Le due righe appiccicate insieme, sul telefono, sarebbero alte quasi un sesto
   dello schermo. La frase serve a chi arriva; a chi sta già scorrendo serve solo
   il tasto. Si aggancia alla stessa classe «compatta» che accorcia la striscia,
   così le due cose si muovono insieme. */
.demobar.compatta+.tuosito .tuosito-piu{display:none}
.demobar.compatta+.tuosito .tuosito-in{padding-top:.4rem;padding-bottom:.4rem}
@media(max-width:600px){
  .tuosito-in{padding:.7rem .9rem;gap:.65rem}
  .tuosito p{font-size:var(--t-vicino,1rem)}
  .tuosito-cta{width:100%;text-align:center}
}

/* ⚠️ LE TRE SCHEDE DEI PASSI NON SI USANO PIÙ dal 01/09/2026: al loro posto
   c'è «.cl-scaletta», l'elenco che si compone scorrendo. Le regole restano
   scritte apposta — mai cancellare CSS a occhio, è già costato una volta.
   (I filetti erano NEUTRI: tre barre del colore dell'attività, una accanto
   all'altra, erano l'uso più rumoroso dell'accento.) */
/* ══ LA CHIUSURA CORTA IN FONDO ALLA CODA — 05/09/2026 ══
   Chi arriva qui si è letto tutte le domande: è il più vicino a decidere, e
   fino a ieri non trovava più niente. ⚠️ Tutto dentro «.perchesito», come il
   resto della coda: mai regole che scappino sul sito del cliente. */
.perchesito .cl-codino{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line);
  display:grid;justify-items:center;gap:1.1rem;text-align:center}
.perchesito .cl-codino p{margin:0;max-width:52ch;font-size:1rem;line-height:1.6;color:var(--muted)}
.perchesito .cl-codino a[href^="mailto"]{color:var(--brand);font-weight:700}

.cl-passi{display:grid;gap:1.5rem;margin-top:2.6rem}
.cl-passo{padding-top:.9rem;border-top:2px solid var(--coda-filo)}
.cl-passo h3{color:var(--coda-forte);font-size:1rem;font-weight:700;margin-bottom:.35rem}
.cl-passo p{font-size:var(--t-vicino,1rem);line-height:1.58;color:var(--coda-testo)}

/* ══ COSA OFFRIAMO, e i tre passaggi che si compongono — 01/09/2026 ═══════
   Sono i due pezzi arrivati con l'ordine nuovo. ⚠️ Qui il fondo è SCURO e
   sta appoggiato sopra il sito di qualcun altro: i colori arrivano dalle
   variabili «--coda-…», mai scritti a mano, altrimenti su una demo con
   l'accento diverso stonano. */
.cl-manifesto{text-align:center}
/* 📏 12/09/2026 — Era 24ch e andava a capo ogni quattro parole. Rilievo di
   Simone. Adesso 42rem, cioè 672 px: due righe sul computer, tre sul telefono.
   ⚠️ NON PIÙ IN «ch»: quell'unità è la larghezza dello «0» del carattere
   CORRENTE, quindi finché il carattere non è arrivato il tetto viene calcolato
   su quello di ripiego, e cambia sotto gli occhi. In rem è sempre lo stesso.
   ⚠️ Sul telefono non cambia niente: «max-width» è un tetto, non una
   larghezza, e il 100% lo tiene dentro lo schermo. */
.cl-manifesto .cl-h3{font-size:clamp(1.28rem,3.8vw,1.75rem);line-height:1.2;
  max-width:min(42rem,100%);margin-inline:auto;text-wrap:balance}
.cl-manifesto .cl-p{margin:.9rem auto 0;max-width:54ch;text-wrap:pretty}
/* ⚠️ Sul telefono la riga sotto il titolo va A SINISTRA, come sulla landing:
   centrata diventa quattro righe frastagliate da tutte e due le parti. */
@media(max-width:700px){.cl-manifesto .cl-p{text-align:left}}

.cl-scaletta{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:1.6rem}
.cl-sc{position:relative;padding-left:2.7rem}
.cl-sc h4{color:var(--coda-forte);font-size:1rem;font-weight:700;margin-bottom:.3rem}
.cl-sc p{font-size:var(--t-vicino,1rem);line-height:1.58;color:var(--coda-testo)}
.cl-punto{position:absolute;left:0;top:-.05rem;z-index:2;
  width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--coda-filo);
  display:grid;place-items:center;
  transition:background .22s ease,border-color .22s ease,transform .22s ease}
.cl-punto i{grid-area:1/1;font-style:normal;font-weight:700;font-size:var(--t-etichetta,.875rem);line-height:1;
  transition:opacity .22s ease,color .22s ease}
.cl-ok{font-size:var(--t-vicino,1rem)}
.cl-sc::before,.cl-sc::after{content:"";position:absolute;left:calc(.85rem - 1px);
  top:1.65rem;bottom:-1.65rem;width:2px;z-index:1}
.cl-sc::before{background:var(--coda-filo)}
.cl-sc::after{background:var(--coda-acc);transform-origin:top}
.cl-sc:last-child::before,.cl-sc:last-child::after{display:none}

/* ⚠️ DI PARTENZA L'ELENCO È ACCESO E FINITO: senza codice, o con «riduci le
   animazioni», la pagina è comunque completa. Il codice lo spegne (classe
   «viva») solo quando sa guidarlo. Stesso principio della landing. */
.cl-punto{background:var(--coda-acc);border-color:var(--coda-acc)}
.cl-n{color:var(--coda-fondo)}
.cl-sc-fine .cl-punto{background:#5C9A62;border-color:#5C9A62}
.cl-sc-fine .cl-n{opacity:0}
.cl-sc-fine .cl-ok{opacity:1;color:#0E1410}
.cl-sc::after{transform:scaleY(1)}

/* ── da qui comanda lo scorrimento: la riga avanza quanto avanza il dito.
   ⚠️ Niente transizione sulla riga, o arriverebbe in ritardo sul dito. */
.cl-scaletta.viva .cl-punto{background:var(--coda-fondo);border-color:var(--coda-filo)}
.cl-scaletta.viva .cl-n{color:var(--coda-tenue);opacity:1}
.cl-scaletta.viva .cl-ok{opacity:0}
.cl-scaletta.viva .cl-sc::after{transform:scaleY(var(--riempi,0));transition:none}
.cl-scaletta.viva .cl-sc.on .cl-punto{background:var(--coda-acc);border-color:var(--coda-acc);transform:scale(1.06)}
.cl-scaletta.viva .cl-sc.on .cl-n{color:var(--coda-fondo)}
.cl-scaletta.viva .cl-sc-fine.on .cl-punto{background:#5C9A62;border-color:#5C9A62}
.cl-scaletta.viva .cl-sc-fine.on .cl-n{opacity:0}
.cl-scaletta.viva .cl-sc-fine.on .cl-ok{opacity:1;color:#0E1410}

/* l'ultima spinta, dentro la chiusura */
.cl-spinta{color:var(--coda-forte);font-weight:700;margin-top:.8rem;font-size:var(--t-vicino,1rem)}

/* il pannello, con le schermate di questo mestiere */
.cl-pann{display:grid;gap:2rem;margin-top:1.9rem}
.cl-card h4{color:var(--coda-forte);font-size:var(--t-vicino,1rem);font-weight:700;margin:.9rem 0 .3rem}
.cl-card p{font-size:var(--t-nota,.9375rem);line-height:1.55;color:var(--coda-tenue)}
.cl-tel{width:min(212px,64vw);margin:0 auto;border-radius:26px;padding:7px;
  background:linear-gradient(160deg,#3A322A,#17140F);box-shadow:0 12px 30px rgba(0,0,0,.4)}
/* ⚠️ height:auto NON si toglie. Le schermate hanno width=480 height=960 scritti
   nel tag, e quel 960 vale come altezza: senza azzerarlo l'aspect-ratio non
   viene guardato e la schermata esce ingrandita e tagliata ai lati. */
/* 9/18.6 come in home e sulle landing: le fotografie sono 480×960. */
.cl-tel img{border-radius:20px;width:100%;height:auto;aspect-ratio:9/18.6;
  object-fit:cover;object-position:top center}

/* l'obiezione: una sola, la più frequente di questo mestiere */
.cl-obi{margin-top:2.9rem;padding:1.4rem 0 1.4rem 1.3rem;border-left:3px solid var(--coda-acc)}
.cl-obi-q{color:var(--coda-forte);font-size:1.12rem;font-weight:700;line-height:1.3}
.cl-obi-a{margin-top:.6rem;font-size:var(--t-vicino,1rem);line-height:1.62;color:var(--coda-testo);max-width:56ch}

/* ══ I PREZZI ══════════════════════════════════════════════════════════════
   ⚠️ RIFATTI il 31/08/2026 sulle misure della landing, che Simone preferiva:
   le schede erano più quadrate (rapporto 0,82 contro 0,71) e più povere di aria.
   Le tre cose che fanno la differenza, e che non si tolgono:
     · «align-self:flex-start» sulle pastiglie — senza, si allargavano per
       tutta la scheda (88% invece del 33%) e sembravano una barra;
     · «min-height» sotto la cifra — tiene in riga le due schede anche quando
       una nota è di una riga e l'altra di due;
     · il margine sotto l'elenco — senza, il testo del Completo restava
       APPICCICATO al tasto. (E ⚠️ non si scrive «padding-top» sul tasto: la
       scorciatoia «padding» più sotto lo cancella. È già successo.) */
.cl-sez-prezzi{text-align:center}
/* ⚠️ Il contenitore stretto è la manopola che rende le schede VERTICALI, ed è
   la stessa scelta fatta sulla landing il 30/08: si stringe il contenitore,
   non la scheda. Simone le vuole rettangolari in verticale, non quadrate. */
.cl-schede{display:grid;gap:1.1rem;margin:1.8rem auto 0;max-width:700px;text-align:left}
.cl-scheda{position:relative;display:flex;flex-direction:column;
  background:var(--coda-carta);border:1px solid var(--coda-filo);
  border-radius:18px;padding:1.6rem 1.45rem}
/* Il Completo si distingue col BORDO e con la pastiglia, non con un secondo
   sfondo: due grigi diversi accanto sembravano un errore di stampa. */
.cl-spicca{border-color:var(--coda-acc)}
.cl-stella{position:absolute;top:-.7rem;left:50%;translate:-50% 0;
  background:var(--brand);color:#fff;
  font-size:var(--t-etichetta,.875rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:999px;white-space:nowrap}
.cl-scheda h4{color:var(--coda-forte);font-size:1.15rem;font-weight:700}
.cl-chi{font-size:var(--t-nota,.9375rem);color:var(--coda-tenue);margin:.15rem 0 .9rem}
.cl-periodo{display:inline-flex;align-self:flex-start;gap:.15rem;margin-top:.9rem;
  padding:.2rem;background:rgba(0,0,0,.32);border-radius:999px}
.cl-periodo button{font:inherit;font-size:var(--t-nota,.9375rem);font-weight:700;cursor:pointer;
  border:0;background:none;color:var(--coda-tenue);padding:.34rem .8rem;border-radius:999px}
.cl-periodo button[aria-pressed="true"]{background:var(--coda-forte);color:#141010}
.cl-cifra{margin:.9rem 0 .25rem;color:var(--coda-forte);display:flex;align-items:baseline;gap:.25rem;
  font-weight:700;line-height:1}
.cl-cifra b{font-size:clamp(2.2rem,4.4vw,2.8rem);letter-spacing:-.02em}
.cl-cifra span{font-size:var(--t-vicino,1rem);font-weight:600;color:var(--coda-tenue)}
.cl-nota{font-size:var(--t-nota,.9375rem);line-height:1.5;color:var(--coda-tenue);min-height:2.4em}
.cl-scheda ul{margin:1rem 0 1.2rem;display:grid;gap:.55rem;font-size:var(--t-vicino,1rem);
  flex:1;align-content:start}
.cl-scheda li{position:relative;padding-left:1.3rem;line-height:1.45;color:var(--coda-testo)}
/* Il segno di spunta è neutro su tutte e due le schede: colorato, faceva
   sembrare le due colonne due prodotti diversi invece che due misure. */
.cl-scheda li::before{content:"\2713";position:absolute;left:0;color:var(--coda-segno);font-weight:700}
/* 💊 09/09/2026 — PASTIGLIE, non rettangoli larghi con dentro un testo piccolo.
   Erano larghi tutta la scheda, con gli angoli a 10 px e il testo a 15 px:
   l'unico posto del giro rimasto indietro rispetto ai tasti del pannello e
   delle finestrelle. Adesso sono larghi quanto le loro parole, in mezzo alla
   riga, e il testo è a 16 px.
   ⚠️ «align-self» centra dentro la scheda, che è una colonna flex; «margin-top
   auto» resta, ed è quello che tiene il tasto attaccato in fondo alla scheda
   anche quando gli elenchi sopra hanno un numero diverso di righe. */
.cl-btn{display:inline-flex;align-items:center;justify-content:center;
  align-self:center;width:auto;max-width:100%;margin-top:auto;
  text-align:center;text-decoration:none;
  font:inherit;font-weight:700;font-size:1rem;padding:.8rem 1.8rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:var(--coda-forte);
  transition:opacity .15s,transform .15s}
.cl-vuoto:hover{background:rgba(255,255,255,.07)}
/* 🎨 IL TASTO PIENO SEGUE LA PALETTE DEL SITO — 09/09/2026, chiesto da Simone.
   Il colore a contrasto serve SOLO sulla fascia ancorata in alto, che è
   sottile e l'occhio non la guarda. Qui no: in tinta è più elegante.
   ⚠️ «--cta-coda» la scrive il server, ed è il colore del sito già schiarito
   quanto basta per staccare dal nero — i chiari non li tocca nemmeno, gli
   scuri (grafite, blu notte) li alza restando nella loro tinta. */
.cl-pieno{background:var(--cta-coda,var(--brand));border-color:var(--cta-coda,var(--brand));
  color:var(--cta-coda-testo,#fff)}
.cl-pieno:hover{opacity:.88;transform:translateY(-1px)}

/* la chiusura */
.cl-chiudi{margin-top:2.9rem;padding-top:2.4rem;border-top:1px solid var(--coda-filo);
  text-align:center;max-width:520px;margin-left:auto;margin-right:auto}
.cl-chiudi h3{color:var(--coda-forte);font-size:clamp(1.3rem,3.8vw,1.75rem);line-height:1.18;font-weight:700}
.cl-chiudi p{margin-top:.7rem;font-size:var(--t-vicino,1rem);line-height:1.6;color:var(--coda-testo)}
.cl-chiudi .cl-btn{margin-top:1.6rem;width:auto;padding:.85rem 1.9rem}

/* Le domande del mestiere. ⚠️ Queste classi «pq-» nascono col blocco vecchio,
   più su nel foglio: qui si riportano dentro i colori della coda, altrimenti
   restano l'unico pezzo che parla un'altra lingua.
   📌 Dal 12/09/2026 stanno a fisarmonica anche loro, chiuse: «.pq-lista» non
   è più una griglia distanziata, sono righe separate da un filo come le altre. */
.perchesito .pq-stacco{background:var(--coda-acc)}
.perchesito .pq-q{color:var(--coda-forte)}
.perchesito .pq-a{color:var(--coda-testo)}
.perchesito .pq-a b{color:var(--coda-forte)}

/* le domande di sempre, a fisarmonica: chi ha quel dubbio le apre */
.cl-sez .pq-lista{margin-top:1.5rem;display:block}
/* le due liste si toccano: fra l'ultima riga della prima e la prima della
   seconda ci vuole un filo solo, non due né uno stacco */
.cl-sempre{margin-top:0}
.cl-sez .pq-lista + .cl-sempre details:first-of-type{border-top:0}
.perchesito details{border-top:1px solid var(--coda-filo)}
.perchesito details:last-of-type{border-bottom:1px solid var(--coda-filo)}
.perchesito summary{cursor:pointer;padding:.95rem 2rem .95rem 0;font-weight:700;
  color:var(--coda-forte);font-size:var(--t-vicino,1rem);position:relative;list-style:none}
.perchesito summary::-webkit-details-marker{display:none}
.perchesito summary::after{content:"+";position:absolute;right:.2rem;top:.72rem;
  color:var(--coda-acc);font-size:1.3rem;line-height:1}
.perchesito details[open] summary::after{content:"\2013"}
/* ⚠️ 12/09/2026: le risposte del mestiere prima stavano in «.pq-a», che aveva
   le sue regole per il grassetto e il corsivo. Adesso sono dentro un
   «details», e quelle regole non le prendono più: eccole qui. */
.perchesito details p b{color:var(--coda-forte);font-weight:700}
.perchesito details p i{font-style:italic}
.perchesito details p{padding:0 0 1.1rem;font-size:var(--t-vicino,1rem);line-height:1.6;
  color:var(--coda-testo);max-width:56ch}
.perchesito details a{color:var(--coda-acc);font-weight:700}

@media(min-width:760px){
  .perchesito{padding:3.6rem 1.4rem 4.2rem}
  .cl-passi{grid-template-columns:repeat(3,1fr);gap:1.8rem}
  .cl-scaletta{grid-template-columns:repeat(3,1fr);gap:1.8rem}
  .cl-sc{padding-left:0;padding-top:2.6rem}
  .cl-punto{top:0}
  .cl-sc::before,.cl-sc::after{left:1.8rem;right:-1.8rem;top:calc(.85rem - 1px);
    bottom:auto;width:auto;height:2px}
  .cl-sc::after{transform-origin:left;transform:scaleX(1)}
  .cl-scaletta.viva .cl-sc::after{transform:scaleX(var(--riempi,0))}
  .cl-pann{grid-template-columns:repeat(3,1fr)}
  .cl-schede{grid-template-columns:1fr 1fr;gap:1.4rem}
  .cl-sez{margin-top:3.4rem;padding-top:2.8rem}
}

/* ══ SOTTO LE DEMO, IL PANNELLO SI SCORRE DI LATO — 13/09/2026 ═════════════
   Rilievo di Simone: sulla landing le tre schede del pannello si scorrono col
   dito e hanno i puntini, mentre QUI stavano impilate — tre schermate da
   saltare, e una coda molto più lunga per arrivare ai prezzi.
   ⚠️ La coda ha un foglio suo, e le regole della landing (mestiere.css) sotto
   le pagine /d/ non ci sono: il carosello va riscritto qui, coi nomi «cl-».
   ⚠️ Va IN FONDO al file: «.cl-pann» più sopra è una griglia, stessa
   specificità, quindi vince chi è scritto per ultimo.
   📌 Come sulla landing, lo scorrimento sta tutto nel foglio: i puntini li
   aggiunge il codice, e se non gira resta un carosello che si scorre col dito. */
.cl-punti{display:none}
@media(max-width:719px){
  .cl-pann{display:flex;overflow-x:auto;gap:.85rem;margin-top:1.6rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .cl-pann::-webkit-scrollbar{display:none}
  .cl-pann > *{flex:0 0 86%;scroll-snap-align:center;min-width:0}
  /* 💶 13/09/2026 — E ANCHE LE DUE SCHEDE PREZZI. Erano rimaste in colonna: due
     schermate intere da scorrere per arrivare in fondo alla coda.
     ⚠️ Sono più larghe delle schede del pannello — 92% — perché dentro c'è
     «tuonomeattività.urbianslab.com», che per il browser è una parola sola e
     all'86% toccava il bordo. Stessa misura della landing.
     ⚠️ «padding-top» perché la stella «il più scelto» esce SOPRA la scheda, e
     un contenitore che scorre di lato taglia quello che esce. */
  .cl-schede{display:flex;overflow-x:auto;gap:.85rem;padding-top:.9rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .cl-schede::-webkit-scrollbar{display:none}
  .cl-schede > *{flex:0 0 92%;scroll-snap-align:center;min-width:0}
  .cl-schede li{overflow-wrap:break-word}
  .cl-punti{display:flex;justify-content:center;gap:.55rem;margin-top:1.2rem}
  .cl-punti button{width:9px;height:9px;padding:0;border:0;border-radius:50%;
    background:var(--coda-filo);cursor:pointer;transition:background .2s,transform .2s}
  .cl-punti button[aria-current="true"]{background:var(--coda-forte);transform:scale(1.3)}
  .cl-punti button:focus-visible{outline:2px solid var(--coda-forte);outline-offset:3px}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRA DEL CLIENTE SI RITIRA SOTTO LA CODA — 17/09/2026
   Rilievo di Simone dal suo telefono: scorrendo la coda — che è LA NOSTRA
   landing — restavano appiccicati in fondo «Chiama» e «Indicazioni», che sono
   i tasti della SCUOLA. Due padroni sulla stessa schermata: chi legge perché
   dovrebbe comprare un sito si ritrova sopra il tasto per telefonare a sé
   stesso.
   🔴 È L'UNICA REGOLA DI QUESTO FOGLIO CHE ESCE DA «.perchesito», e va spiegato
   perché non tradisce la disciplina scritta in cima a _coda-landing.js: quel
   foglio parla solo di quello che sta dentro la coda per non rompere il sito di
   nessuno, ma QUESTO foglio il server lo mette solo dove la striscia c'è —
   anteprime e vetrine, mai un sito pagato. Su un sito comprato questa regola
   non arriva, e la barra resta dov'è sempre stata.
   📌 Si ritira scivolando, non sparendo: sparire di colpo sembra un guasto.
   La classe la mette e la toglie CODICE_CODA, guardando quando la coda entra.
   ⚠️ La transizione sta sulla barra e non sulla classe: serve in tutti e due i
   versi, quando si ritira e quando torna.
   ══════════════════════════════════════════════════════════════════════════ */
.stickybar{transition:transform .24s ease-out}
html.ul-coda-sotto .stickybar{transform:translateY(110%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}