/* ═══════════════════════════════════════════════════════════════════
   FOGLIO COMUNE DELLE PAGINE STATICHE (Come funziona, Prezzi, guide,
   privacy). Stesso piede e stessa scala tipografica del resto del sito
   (home, /prezza, /redigi): i valori sono quelli di app.html, e se
   cambiano la' vanno cambiati anche qui.
   Scala: titolo 32/800, sezione 20/800, testo 17/1.6 (privacy 15.5),
   colori #000C47 per i titoli e #475569 per il testo.
   ═══════════════════════════════════════════════════════════════════ */
:root{--blu:#0185FD;--blu2:#1d4ed8;--cielo:#0ea5e9;--navy:#000C47;--bordo:#e2e8f0}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#fff;color:#0f172a;margin:0;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#2563eb}

/* La barra in alto e' in sito-testata.css (comune a tutto il sito). */

/* testo */
.wrap{max-width:780px;margin:0 auto;padding:40px 24px 64px}
h1{color:var(--navy);font-size:clamp(23px,3.1vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.8px;margin:0 0 14px}
h2{color:var(--navy);font-size:20px;font-weight:800;line-height:1.35;letter-spacing:-.3px;margin:34px 0 8px}
p,li{font-size:17px;line-height:1.6;color:#475569}
p{margin:0 0 14px}
b{color:#334155}
ul{padding-left:22px}
.agg{font-size:13.5px;color:#64748b}
.doc p,.doc li{font-size:15.5px}
.nav{font-size:14.5px;color:#64748b;margin-top:26px}
.box{background:#f8fafc;border:1px solid var(--bordo);border-radius:14px;padding:16px 20px;margin:18px 0}
.box p{margin:0 0 10px}.box p:last-child{margin:0}
/* stessa misura della CTA "Anteprima gratuita" delle prime schermate di /redigi e /prezza */
.cta{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blu2),var(--cielo));color:#fff;padding:15px 34px;border-radius:12px;
  font-weight:800;font-size:17px;line-height:1.2;text-decoration:none;margin:16px 0;box-shadow:0 10px 30px rgba(14,165,233,.38)}

/* piede: identico a quello di home, /prezza e /redigi */
.cmi-fo{background:#000C47;padding:52px 32px 0;box-sizing:border-box}
.cmi-fo-w{max-width:1180px;margin:0 auto}
.cmi-fo-top{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap}
.cmi-fo-brand{width:280px;flex-shrink:0}
.cmi-fo-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;min-width:0;
  /* BASE FISSA, non "auto". Con la base automatica la larghezza richiesta
     dalle colonne era quella del loro testo piu' lungo: aprendo una tendina
     ("Chi siamo", "Come funziona la tecnologia") il testo si allargava, le
     colonne non stavano piu' accanto al marchio e cadevano sotto, spingendo
     tutto il piede verso il basso. Con 560px il punto in cui vanno a capo
     dipende solo dalla larghezza dello schermo, mai da cio' che e' aperto. */
  flex:1 1 560px}
.cmi-fo-ct{font-size:12px;font-weight:800;letter-spacing:1.6px;color:#0185FD;margin-bottom:4px}
.cmi-fo a,.cmi-fo button.lk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;font-family:inherit;cursor:pointer;border-bottom:1px solid #1a2550;padding:12px 0;font-size:14.5px;color:#c7d0e8;text-decoration:none}
.cmi-fo a:hover,.cmi-fo button.lk:hover{color:#fff}
.cmi-fo .dati{border-bottom:1px solid #1a2550;padding:10px 0 14px;font-size:12.5px;line-height:1.75;color:#7d89b4}
.cmi-fo-legale a.pec{display:inline;border:none;padding:0;width:auto;font-size:inherit;color:#9fb0e0;text-decoration:underline}
.cmi-fo-legale{margin-top:40px;border-top:1px solid #1a2550;padding:16px 0 20px;font-size:11.5px;line-height:1.7;color:#7d89b4;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cmi-fo details{border-bottom:1px solid #1a2550}
.cmi-fo summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 0;font-size:14.5px;color:#c7d0e8}
.cmi-fo summary::-webkit-details-marker{display:none}
.cmi-fo summary:hover{color:#fff}
.cmi-fo summary::after{content:"";margin-left:auto;width:7px;height:7px;flex-shrink:0;
  border-right:1.8px solid #7d89b4;border-bottom:1.8px solid #7d89b4;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.cmi-fo details[open]>summary::after{transform:rotate(-135deg) translateY(2px);border-color:#0185FD}
.cmi-fo details[open]>summary{color:#fff}
.cmi-fo .corpo{padding:0 0 15px;font-size:12.5px;line-height:1.75;color:#7d89b4}
.cmi-fo .corpo a{display:inline;border:none;padding:0;color:#0185FD;text-decoration:underline}
.cmi-fo .vuoto{color:#5a6690;font-style:italic}
@media(max-width:900px){
  .cmi-fo-cols{grid-template-columns:1fr}
  .cmi-fo{padding:40px 20px 0}
  .cmi-fo-top{gap:34px}
  .cmi-fo-brand{width:100%}
}

/* ═══ PAGINE DEL MENU: Come funziona, Prezzi ═══════════════════════════
   Stessi componenti delle sezioni di /prezza e /redigi: etichetta azzurra
   con filetto, titolo di sezione 32/800, schede bianche, prezzi. */
.pag-testa{max-width:1244px;margin:0 auto;padding:clamp(28px,6vh,56px) 32px 8px} /* 1180 di contenuto + 2x32: allineato a .sez-w */
.pag-testa h1{font-size:44px;font-weight:900;letter-spacing:-1.4px;line-height:1.1;margin:0 0 14px;color:var(--navy)}
.pag-testa p{font-size:18px;line-height:1.55;color:#475569;margin:0;max-width:820px}
.sez{padding:56px 32px}
.sez.grigia{background:#f8fafc;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.sez-w{max-width:1180px;margin:0 auto}
.sez-t{display:flex;align-items:baseline;gap:18px;margin-bottom:30px}
.sez-t h2{margin:0;font-size:13px;font-weight:800;letter-spacing:2.2px;color:var(--blu);line-height:1.4}
.sez-t i{flex-grow:1;height:1px;background:var(--bordo);display:block}
.sez-lead{margin:0 0 30px;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.8px;color:var(--navy)}
/* tre passi */
.passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px}
.passo-n{font-size:44px;font-weight:900;margin-bottom:8px;line-height:1;letter-spacing:-1.5px;
  background:linear-gradient(120deg,#1d4ed8,#0ea5e9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.passo-t{font-weight:800;font-size:22px;margin-bottom:7px;color:var(--navy);letter-spacing:-.4px}
.passo-d{color:#475569;font-size:17px;line-height:1.6}
/* video + testo affiancati */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;margin-top:44px}
.duo video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#0f172a;border:1px solid var(--bordo);box-shadow:0 18px 44px rgba(15,23,42,.12)}
.duo ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.duo li{padding-left:26px;position:relative}
.spunte li::before,.cmi-pz li::before{content:"";position:absolute;left:2px;top:6px;width:13px;height:7px;
  border-left:2.4px solid var(--blu);border-bottom:2.4px solid var(--blu);transform:rotate(-45deg)}
.cta-riga{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cta.sec{background:#fff;color:var(--blu2);border:2px solid #bfdbfe;box-shadow:none}
.cta{margin:0}
/* prezzi (identici alla sezione QUANTO COSTA) */
.cmi-lancio{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(1,133,253,.10),rgba(1,133,253,.04));
  border:1px solid rgba(1,133,253,.28);border-radius:14px;padding:20px 26px;margin-bottom:26px}
.cmi-lancio .eti{font-size:12px;font-weight:800;letter-spacing:1.4px;color:#fff;background:var(--blu);padding:7px 14px;border-radius:999px;flex-shrink:0}
.cmi-lancio .txt{font-size:16.5px;line-height:1.5;color:#1e293b;font-weight:600}
.cmi-lancio .data{color:var(--blu);font-weight:800;white-space:nowrap}
.cmi-prezzi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.cmi-pz{border:1px solid var(--bordo);border-radius:18px;padding:32px 30px;display:flex;flex-direction:column;gap:18px;background:#fff}
.cmi-pz.top{border:2px solid var(--blu);box-shadow:0 16px 40px rgba(1,133,253,.14)}
.cmi-pz .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:1.2px;padding:6px 12px;border-radius:999px;color:var(--blu);background:rgba(1,133,253,.09)}
.cmi-pz.top .tag{color:#fff;background:var(--blu)}
.cmi-pz.gri .tag{color:#64748b;background:#f1f5f9}
.cmi-pz .nome{font-size:21px;font-weight:800;color:var(--navy)}
.cmi-pz .cifra{font-size:50px;font-weight:900;color:var(--navy);letter-spacing:-2px;line-height:1}
.cmi-pz .unit{font-size:14px;color:#64748b;margin-top:-8px}
.cmi-pz .cifre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cmi-pz .prima{font-size:22px;font-weight:700;color:#94a3b8;text-decoration-thickness:2px}
.cmi-pz .sconto{align-self:center;font-size:12px;font-weight:900;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#dc2626,#f97316);padding:4px 9px;border-radius:999px}
.cmi-pz ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cmi-pz li{padding-left:26px;position:relative}
.cmi-pz .btn{margin-top:auto;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:15px 22px;border-radius:11px;
  text-decoration:none;border:1.5px solid var(--blu);color:var(--blu);background:#fff;cursor:pointer;font-family:inherit;width:100%}
.cmi-pz .btn.pieno{background:var(--blu);color:#fff;border-color:var(--blu);box-shadow:0 10px 24px rgba(1,133,253,.30)}
.cmi-pz .btn.gri{border-color:#cbd5e1}
.cmi-pz .btn[disabled]{background:#f1f5f9;color:#94a3b8;border-color:var(--bordo);box-shadow:none;cursor:default}
.cmi-pz .due{display:flex;gap:10px;margin-top:auto}.cmi-pz .due .btn{margin-top:0}
.nota-c{font-size:14px;color:#64748b;text-align:center;margin-top:22px;line-height:1.6}
.err-c{font-size:14px;color:#b91c1c;text-align:center;margin-top:16px}
.fatti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.fatti.tre{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.fatti.tre .fatto{padding:30px 28px}
.fatti.tre .fatto b{font-size:21px;margin-bottom:10px;
  background:linear-gradient(100deg,#1d4ed8 0%,#0ea5e9 60%,#6366f1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#1d4ed8}
/* video ai 2/3, testo al terzo restante; linguette Redigi / Prezza sopra al video */
.duo.terzi{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;align-items:start;max-width:var(--colonna,1180px);margin-left:auto;margin-right:auto}
.duo-testo{padding-top:58px}
.duo.terzi .spunte li{font-size:15px;line-height:1.5}
.linguette{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:12px;background:#eef2f7}
.linguette button{border:none;background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:#475569;padding:9px 18px;border-radius:9px}
.linguette button.on{background:#fff;color:#1d4ed8;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.passo-d b{color:var(--navy);font-weight:700}
.fatto{background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:24px 22px}
.fatto b{display:block;font-size:19px;color:var(--navy);margin-bottom:6px;letter-spacing:-.3px}
.fatto span{font-size:16px;line-height:1.55;color:#475569}
@media(max-width:900px){
  .passi,.cmi-prezzi{grid-template-columns:1fr;gap:26px}
  .duo{grid-template-columns:1fr;gap:28px}
  .fatti{grid-template-columns:1fr 1fr}
  .fatti.tre{grid-template-columns:1fr}
  .duo.terzi{grid-template-columns:1fr;gap:24px}
  .duo-testo{padding-top:0}
  .linguette{display:flex}.linguette button{flex:1;padding:9px 8px;font-size:14px}
  .sez{padding:44px 20px}.pag-testa{padding:28px 20px 4px}
  .pag-testa h1{font-size:32px}.pag-testa p{font-size:16.5px}.sez-lead{font-size:23px}
}
@media(max-width:560px){.fatti{grid-template-columns:1fr}.cmi-pz .due{flex-direction:column}}
@media(max-width:700px){.cmi-lancio{padding:16px 18px;gap:12px}.cmi-lancio .txt{font-size:15px}}
/* COME FUNZIONA, computer e tablet largo (05/10/2026): il testo a destra e'
   alto quanto il video (non quanto video + linguette): spunte e pulsante,
   uno dopo l'altro, stanno al centro di quell'altezza. */
@media(min-width:901px){
  .duo.terzi{grid-template-rows:auto auto;row-gap:0;align-items:stretch}
  .duo.terzi>.duo-video{display:contents}
  .duo.terzi .linguette{grid-column:1;grid-row:1;justify-self:start;align-self:end}
  .duo.terzi video{grid-column:1;grid-row:2}
  .duo.terzi>.duo-testo{grid-column:2;grid-row:2;padding-top:0;display:flex;flex-direction:column}
  .duo.terzi>.duo-testo{justify-content:center}
  .duo.terzi [data-pannello] .cta-riga{margin-top:26px;flex-direction:column;align-items:flex-start;gap:12px}
  .duo.terzi [data-pannello] .cta-riga .cta.sec{font-size:16px;padding:14px 24px;white-space:nowrap}
}
/* PAGINA PREZZI, computer (05/10/2026): listino, sconto e le tre schede
   tutti nella prima schermata. Schede piu' compatte; se ancora non ci
   stanno, l'autoadattamento (data-adatta) rimpicciolisce la sezione. */
@media(min-width:901px){
  #listino.sez{padding-top:26px;padding-bottom:30px}
  #listino .sez-t{margin-bottom:16px}
  #listino .cmi-lancio{padding:12px 20px;margin-bottom:16px;gap:16px}
  #listino .cmi-lancio .txt{font-size:15.5px}
  #listino .cmi-pz{padding:18px 22px!important;gap:10px!important;border-radius:16px}
  #listino .cmi-pz .tag{padding:5px 11px;font-size:10.5px}
  #listino .cmi-pz .nome{font-size:19px}
  #listino .cmi-pz .cifra{font-size:38px!important}
  #listino .cmi-pz.premium .cifra{font-size:30px!important}
  #listino .cmi-pz .prima{font-size:19px}
  #listino .cmi-pz .unit{margin-top:-4px;font-size:13px}
  #listino .cmi-pz ul{gap:5px}
  #listino .cmi-pz li{font-size:14px!important;line-height:1.4!important}
  #listino .cmi-pz li::before{top:5px}
  #listino .cmi-pz.premium li.oro{padding:7px 10px 7px 32px;margin:0 -8px 2px}
  #listino .cmi-pz.premium li.oro::before{top:11px}
  #listino .cmi-pz .btn{padding:11px 18px;margin-top:auto}
  #listino .cmi-prezzi~.nota-c{margin-top:16px!important;font-size:13.5px}
  #listino .nota-c+.nota-c{margin-top:4px!important}
}