/* Sistema di design del prototipo Teal, estratto dall'export di Claude Design
   della home e reso riutilizzabile per le pagine sorelle.
   I token e le misure sono quelli originali: se la home cambia, qui si
   aggiornano i valori in cima e il resto segue. */

:root{
  /* esistenti · non toccare */
  /* Le tinte sono quelle di sempre: dopo l'audit di contrasto si e' abbassata
     solo la luminosita' di due grigi, quanto bastava ad arrivare a 4,5:1.
     --ink3 era #5E8E8C e faceva 3,66 sul bianco e 3,16 sulla fascia tenue:
     e' il colore di occhielli, didascalie, note e partita IVA, cioe' quasi
     tutto quello che non e' titolo. --ink2 era #2B7A78 e sulla fascia tenue
     si fermava a 4,35. */
  --bg:#FEFFFF; --bg2:#DEF2F1; --ink:#17252A; --ink2:#2A7775; --ink3:#4C7371;
  --line:#C9E6E4; --card:#DEF2F1; --acc:#3AAFA9; --acc2:#DEF2F1;
  /* L'accento fa 2,66 sul bianco: regge da riempimento, non da scritta. Dove
     e' inchiostro si usa questo, che e' lo stesso verde piu' scuro (4,5:1).
     Il marchio resta sull'accento pieno: un logotipo e' esente dalla regola,
     e cambiarlo vorrebbe dire cambiare il marchio. */
  --acc-testo:#2B837F;
  --accInk:#FEFFFF; --hero:#FEFFFF;
  /* Le pagine restano sulla loro tipografia: Montserrat titola, Raleway
     spiega, Roboto Mono etichetta. Cormorant Garamond e Inter Tight servono
     solo al marchio, dove il brand manual le prescrive. */
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Montserrat',Impact,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans-ui:'Inter Tight',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* semantici · derivati dalla palette, desaturati di proposito:
     un rosso pieno accanto al teal urla e sposta l'attenzione sul problema
     invece che sul dato. Fill e ink sono token diversi perche' #C98A2E fa
     2,9:1 sul bianco (regge da fondo, non da inchiostro) mentre #8A5A12 fa
     6,4:1 e regge da testo. */
  --success:#3AAFA9;
  --warn-fill:#C98A2E;  --warn-ink:#8A5A12;
  --err:#B4453C;
  --ai-surface:#F3EFE7; --ai-line:#E4DFD4;
  --overlay:rgba(23,37,42,.6);

  /* fasce · devono passare da variabili, altrimenti in tema scuro restano
     identiche e il contrasto interno cambia senso */
  /* Su fascia teal chiara l'inchiostro e' scuro anche per i titoli. Il bianco
     su #3AAFA9 fa 2,66:1, sotto il minimo del sistema (4,6:1) e sotto anche
     la soglia 3:1 del testo grande: era gia' cosi' nell'export originale.
     Con #17252A si sale a 6,9:1 e la gerarchia la fa la dimensione. */
  --band-teal-bg:#3AAFA9; --band-teal-ink:#17252A; --band-teal-ink2:#17252A;
  --band-teal-line:#2B7A78; --band-teal-card:#FEFFFF;
  --band-dark-bg:#17252A; --band-dark-ink:#FEFFFF; --band-dark-line:rgba(255,255,255,.18);

  /* spacing · base 4, nove passi */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px;

  /* radius ed elevazione · il bordo separa, non l'ombra */
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --elev-1:0 10px 26px rgba(23,37,42,.14);
  --elev-2:0 24px 60px rgba(23,37,42,.24);

  /* motion · una curva sola */
  --t-fast:120ms; --t-base:200ms; --t-slow:320ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Il margine laterale della pagina. Le fasce lo usano per uscire dalla
     colonna e rientrarci: se questo cambia, cambiano insieme. */
  --gutter:32px;

  /* breakpoint · come riferimento */
  --bp-mobile:768px; --bp-tablet:1024px; --bp-desktop:1440px;
}
/* Niente tema scuro: il sito ha una sola palette. Le fasce scure restano, ma
   sono una scelta di composizione, non un tema. */

*{box-sizing:border-box}
/* Serve !important: le regole del browser per [hidden] valgono display:none,
   ma qualunque display dichiarato da noi (grid, flex) le batte, e l'elemento
   resterebbe a schermo pur essendo marcato nascosto. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Raleway",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc-testo)}
img{max-width:100%}

input,textarea,select{font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%;outline:none}
/* Sotto i 16px iOS ingrandisce la pagina quando si tocca un campo, e poi tocca
   a chi scrive rimpicciolirla a due dita. Non si disattiva lo zoom nel meta
   viewport (chi ha bisogno di ingrandire deve poterlo fare): si porta il testo
   dei campi a 16px sul telefono, che e' la condizione che toglie lo scatto. */
@media(max-width:760px){
  input,textarea,select{font-size:16px}
}
input:focus,textarea:focus,select:focus{border-color:var(--acc)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---- impaginazione ---- */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
main.wrap{padding-bottom:8px}
section{padding:80px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0;padding-top:72px}
.stack{display:flex;flex-direction:column;gap:18px}
.split{display:grid;grid-template-columns:1fr 2fr;gap:64px}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.split-wide{display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px}
/* un form non deve allungarsi per pareggiare la colonna accanto */
.split > form,.split-even > form,.split-wide > form{align-self:start}

/* fascia a tutta larghezza dentro al contenitore */
.band{margin:0 calc(-1 * var(--gutter));padding:var(--s9) var(--gutter)}
.band-teal{background:var(--band-teal-bg);color:var(--band-teal-ink)}
.band-teal .eyebrow,.band-teal p,.band-teal .small,.band-teal .tiny{color:var(--band-teal-ink2)}
/* Terza fascia, tenue. Serviva un gradino intermedio: con solo bianco, teal
   pieno e scuro, una pagina lunga o alterna in modo brusco o resta tutta
   uguale. Questa cambia il fondo senza cambiare voce. */
.band-tint{background:var(--bg2)}
.band-tint .card{background:var(--bg);border-color:var(--line)}
.band-tint input,.band-tint select,.band-tint textarea{background:var(--bg)}
.band-dark{background:var(--band-dark-bg);color:var(--band-dark-ink);
  border-radius:var(--r-lg);padding:var(--s9) var(--gutter)}
.band-dark p{opacity:.8}

/* ---- tipografia ---- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.h1,.h2,.h3-big{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:58px;line-height:1.02}
.h2{font-size:44px;line-height:1.08}
.h3-big{font-size:32px;line-height:1.1}
.lead{font-size:20px;line-height:1.45;color:var(--ink2);max-width:56ch;text-wrap:pretty}
.body{color:var(--ink2);text-wrap:pretty}
.small{font-size:15px;color:var(--ink2);text-wrap:pretty}
.tiny{font-size:13px;color:var(--ink3)}
.em{color:var(--acc-testo);font-style:normal}
h3,.h3{font-size:18px;font-weight:600;line-height:1.25}
.h3-md{font-size:22px;font-weight:600;line-height:1.2;text-wrap:balance}

/* ---- pulsanti ---- */
.btn,.btn-o,.btn-sm{display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-weight:600;white-space:nowrap}
.btn{background:var(--ink);color:var(--bg);padding:15px 24px;font-size:16px}
.btn:hover{background:var(--acc);color:var(--accInk)}
.btn-o{border:1px solid var(--ink);color:var(--ink);padding:14px 23px;font-size:16px;font-weight:500}
.btn-o:hover{border-color:var(--acc);color:var(--acc-testo)}
.btn-sm{background:var(--ink);color:var(--bg);padding:11px 18px;font-size:14px;align-self:flex-start}
.btn-sm:hover{background:var(--acc);color:var(--accInk)}
.btns{display:flex;gap:var(--s3);flex-wrap:wrap}
/* pulsante scuro sopra una fascia colorata: sulla fascia il fondo pagina non
   c'e', quindi serve un inchiostro esplicito che passa comunque da token */
.btn-ink,.btn-sm.btn-ink{background:var(--band-dark-bg);color:var(--band-dark-ink)}
.btn-ink:hover{background:var(--ink2);color:var(--band-dark-ink)}

/* ---- schede ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.card-plain{background:transparent;border:1px solid var(--line)}
.card-acc{background:var(--acc);color:var(--band-teal-ink2);border:0;padding:var(--s6)}
.card-acc .small,.card-acc .tiny{color:var(--band-teal-ink2)}
/* la nota sulla provenienza usava --ink3, che sul teal pieno fa 1,7:1 e
   sparisce: sulla card colorata prende l'inchiostro della fascia, smorzato */
.card-acc .metric-note,.card-acc .eyebrow{color:var(--band-teal-ink2);opacity:.85}
.grid{display:grid;gap:16px}
/* senza questo una cella non scende sotto la larghezza minima del suo
   contenuto, e un'etichetta lunga fa sfondare l'intera riga */
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* griglia dei casi: uno largo e due stretti. Sta in una classe e non inline,
   perche' uno stile inline batte le media query e sotto i 640px sfonderebbe. */
.g-case{grid-template-columns:1.3fr 1fr 1fr}
 /* un elemento che ne occupa due nella griglia. Serve una classe e non uno
   stile scritto a mano: "span 2" dentro a una griglia gia' collassata a una
   colonna ne creerebbe una seconda implicita, e la pagina sfonderebbe. */
.span2{grid-column:span 2}

/* coppie di campi affiancati nei form */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

/* griglia unita da una linea sola, come nella fascia AI Guys della home */
.grid-hair{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.grid-hair > div{background:var(--bg);padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.band-teal .grid-hair{background:var(--band-teal-line);border-color:var(--band-teal-line)}
.band-teal .grid-hair > div{background:var(--band-teal-card);color:var(--ink)}
.band-teal .grid-hair > div p{color:var(--ink2)}

/* schede su fondo scuro */
.band-dark .card{background:transparent;border:1px solid var(--band-dark-line);color:var(--band-dark-ink)}
.band-dark .card p{opacity:.75;font-size:14.5px}
/* Il numeretto di passo: opacity .5 su bianco faceva 3,16. Su fondo chiaro
   prende il grigio di servizio a piena opacita'; sul fondo scuro resta
   trasparente, che li' basta e avanza. */
.num{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.band-dark .num,.card-acc .num{color:inherit;opacity:.7}
.pill{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.25);padding:5px 10px;
  border-radius:999px;opacity:.85}
.chip{font-size:10px;padding:3px 7px;border-radius:999px;background:var(--acc2);color:var(--ink)}

/* ---- numeri ---- */
.stats{display:flex;gap:32px;flex-wrap:wrap;padding-top:14px}
.stat{display:flex;flex-direction:column}
.stat strong{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--ink2)}
.band-dark .stat span,.card-acc .stat span{color:inherit;opacity:.85}

/* ---- domande frequenti, senza JavaScript ---- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;cursor:pointer;font-size:18px;font-weight:600;color:var(--ink);
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink3)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;font-size:16px;color:var(--ink2);max-width:62ch;text-wrap:pretty}
/* sulla fascia teal --ink2 faceva 1,90, il peggio del sito: la fascia ha
   gia' il suo inchiostro dichiarato, che fa 6,9 */
.band-teal .faq details p,.band-teal .faq summary{color:var(--band-teal-ink)}
.band-teal .faq summary::after{color:var(--band-teal-ink);opacity:.7}

/* ============================================================
   TAG SYSTEM · quattro assi, una scala sola.
   La forma non cambia mai: mono 11, tracking .12em, maiuscolo,
   padding 5/10, pillola. Cambia solo il peso del colore.
   Un tag porta informazione vera, oppure non c'e'.
   ============================================================ */
.tags{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.tag-type,.tag-status{display:inline-flex;align-items:center;gap:var(--s1);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;line-height:1}

/* Type · cosa sto guardando. Bordato, inchiostro secondario, uno per schermata. */
.tag-type{border:1px solid var(--line);color:var(--ink2);background:transparent}

/* Status · a che punto e'. Pieno: e' l'unico tag che puo' contraddire il
   marketing, quindi pesa di piu'. */
.tag-status{border:0;color:var(--accInk);background:var(--ink2)}
/* bianco su #3AAFA9 fa 2,66: la pillola resta verde, cambia l'inchiostro */
.tag-status[data-s="live"],.tag-status[data-s="production"]{background:var(--success);color:var(--ink)}
.tag-status[data-s="beta"]{background:var(--warn-fill);color:#2A1B05}
.tag-status[data-s="soon"]{background:transparent;color:var(--warn-ink);
  border:1px dashed var(--warn-fill)}

/* Category · per chi e'. Testo semplice, filtrabile, resta leggero. */
.tag-cat{font-size:13px;color:var(--ink3)}

/* Results · il numero misurato. Solo numeri verificati, con la fonte a fianco. */
.tag-result{display:inline-flex;align-items:baseline;gap:var(--s2);
  font-family:var(--mono);font-size:13px;padding:5px 10px;border-radius:var(--r-sm);
  background:var(--band-dark-bg);color:var(--band-dark-ink)}
.tag-result b{font-weight:500}
.tag-result span{opacity:.6;font-size:11.5px}

/* ---- metric card e metric row ---------------------------------
   Un numero in Montserrat 900 deve essere misurato, e portare accanto
   come e' stato misurato: la nota non e' facoltativa. */
.metric{display:flex;flex-direction:column;gap:var(--s1);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.metric .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.metric .v{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.metric .d{font-size:14px;color:var(--ink2)}
.metric .src{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.4}
.band-dark .metric{border-color:var(--band-dark-line)}
.band-dark .metric .v,.band-dark .metric .d{color:var(--band-dark-ink)}
.band-dark .metric .k,.band-dark .metric .src{color:var(--band-dark-ink);opacity:.6}
.metric-note{margin-top:var(--s2);font-family:var(--mono);font-size:11px;color:var(--ink3)}

/* ---- solution card · con stato e destinazione ---- */
.sol-card{position:relative;background:var(--bg);border-color:var(--line);
  padding-top:30px;overflow:hidden}
.sol-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--acc)}
/* quella che non e' ancora in produzione lo dice anche col filo, smorzato */
.sol-card:has(.tag-status[data-s="soon"])::before{background:var(--line)}
.band-tint .sol-card{background:var(--bg)}
.sol-card .tags{margin-bottom:var(--s1)}
.sol-card .dest{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink3);
  display:flex;justify-content:space-between;gap:var(--s3);align-items:center}

/* ---- process flow · un solo passo e' teal, quello dove decide una persona --- */
.flow{display:flex;align-items:stretch;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.flow-step{flex:1 1 130px;min-width:130px;border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1);
  background:var(--bg)}
.flow-step .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.flow-step .t{font-size:15px;font-weight:600;line-height:1.25}
.flow-step .s{font-size:13px;color:var(--ink2);line-height:1.35}
.flow-step--human{background:var(--acc);border-color:var(--acc)}
.flow-step--human .k{color:var(--band-teal-ink2);opacity:.85}
.flow-step--human .t,.flow-step--human .s{color:var(--band-teal-ink2)}
.flow-sep{align-self:center;color:var(--ink3);font-size:15px;line-height:1}
.band-dark .flow-step{background:transparent;border-color:var(--band-dark-line);color:var(--band-dark-ink)}
.band-dark .flow-step .s{color:var(--band-dark-ink);opacity:.75}

/* ---- avvisi in pagina ---- */
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg2);
  font-size:14.5px;color:var(--ink2)}
.alert b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.alert .ico{flex:0 0 auto;font-size:15px;line-height:1.4}
.alert--warn{background:var(--ai-surface);border-color:var(--ai-line);color:var(--warn-ink)}
.alert--warn b{color:var(--warn-ink)}
.alert--err{background:var(--bg);border-color:var(--err);color:var(--err)}
.alert--err b{color:var(--err)}
.alert--ok{background:var(--bg2);border-color:var(--acc)}

/* ---- stepper ---- */
.stepper{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--ink3)}
.stepper i{font-style:normal;width:24px;height:24px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:11.5px}
.stepper .done i{background:var(--success);border-color:var(--success);color:var(--accInk)}
.stepper .now{color:var(--ink)}
.stepper .now i{border-color:var(--ink);color:var(--ink)}
.stepper span{display:inline-flex;align-items:center;gap:var(--s2)}

/* ---- stati dei componenti -------------------------------------
   Il pulsante non cambia larghezza fra gli stati. */
.btn,.btn-o,.btn-sm{transition:background var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:active,.btn-sm:active{background:var(--ink2)}
.btn[aria-disabled="true"],.btn-sm[aria-disabled="true"],
.btn:disabled,.btn-sm:disabled,button:disabled{opacity:.6;pointer-events:none}
.is-loading{position:relative;color:var(--bg)}
.is-ok{background:var(--success);color:var(--accInk)}
.is-err{background:var(--err);color:#fff}

/* campi */
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field > label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.field .hint{font-size:12.5px;color:var(--ink3)}
.field--err input,.field--err textarea,input.is-err{border-color:var(--err)}
.field--err .hint{color:var(--err)}
.field--ok input,input.is-ok{border-color:var(--success);background:var(--bg)}
input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}

/* ---- menu mobile a pannello ----------------------------------
   Sotto i 760px la nav andava semplicemente a capo: sette voci su due
   righe. Ora e' un pannello, con la CTA che resta sempre in barra. */
.nav-toggle{display:none;font:inherit;font-size:13px;color:var(--ink2);background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;
  min-height:44px;align-items:center;gap:var(--s2)}
.nav-toggle:hover{border-color:var(--acc);color:var(--acc-testo)}

/* ============================================================
   DEMO · input, elaborazione, scheda generata, mail gate.
   Regola che tiene tutto: la scheda si vede PRIMA, la mail si chiede
   dopo. Quello che l'utente ha ottenuto non si copre e non si cancella.
   ============================================================ */
.demo-card{background:var(--ai-surface);border-color:var(--ai-line);padding:var(--s5);gap:var(--s4)}
.demo-in{display:grid;grid-template-columns:2.3fr 1.1fr auto;gap:var(--s3);align-items:start}

/* elaborazione · dice il passo, non la percentuale. Mai "loading..." */
.ai-steps{display:flex;flex-direction:column;gap:var(--s2);font-family:var(--mono);font-size:13px}
.ai-steps li{list-style:none;display:flex;gap:var(--s2);align-items:center;color:var(--ink3)}
.ai-steps li.done{color:var(--ink2)}
.ai-steps li.now{color:var(--ink)}
.ai-steps li i{font-style:normal;width:16px;text-align:center}
.ai-steps li.done i{color:var(--success)}

/* la scheda generata */
/* minmax(0,...) non e' un vezzo: una colonna in "fr" ha larghezza minima
   automatica, cioe' non scende sotto al suo contenuto. Il grezzo dell'input e'
   un blocco di testo lungo e senza a capo, quindi la prima colonna si allargava
   fino a 1873px dentro a un contenitore da 1086 e spingeva la scheda generata a
   x=2074, novecento pixel oltre il bordo destro dello schermo. Da Desktop
   l'output c'era ma non lo vedeva nessuno. */
.pv{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s5);align-items:start}
.pv-col{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.pv-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pv-in{border:1px solid var(--ai-line);border-radius:var(--r-md);padding:var(--s4);
  background:var(--bg);display:flex;flex-direction:column;gap:var(--s2);font-size:13.5px;color:var(--ink2)}
/* ---- le tre scene generate dalla foto del prodotto ----
   Stanno sotto alla scheda, non dentro: la scheda e' il risultato che si
   giudica subito, le immagini arrivano dieci secondi dopo e non devono far
   ballare quello che si sta gia' leggendo. I riquadri hanno una proporzione
   fissa proprio per questo: sono li' e occupano il loro posto anche mentre
   sono vuoti, cosi' la pagina non salta quando si riempiono. */
.scene{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.scene-h{display:flex;flex-direction:column;gap:2px}
.scene-h .tiny{color:var(--ink3)}
.scene-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.scena{margin:0;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.scena-box{position:relative;aspect-ratio:1/1;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ai-surface);overflow:hidden;
  display:grid;place-items:center}
.scena-img{width:100%;height:100%;object-fit:cover;display:block}
/* Il marchietto va scritto per intero anche qui: lo stile che ha nella vetrina
   e' agganciato a .sc-img, quindi qui sopra restava testo scuro appoggiato su
   una fotografia, cioe' illeggibile. */
.scena-box .sc-badge{position:absolute;left:8px;top:8px;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--overlay);color:#FEFFFF;padding:5px 9px;border-radius:var(--r-pill)}
/* l'attesa pulsa piano: ferma sembrerebbe un riquadro rotto, veloce
   sembrerebbe un allarme */
.scena-attesa{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);animation:scena-respira 1.8s ease-in-out infinite}
@keyframes scena-respira{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.scena-attesa{animation:none}}
.scena-no{font-size:13px;color:var(--ink3);text-align:center;padding:var(--s4);text-wrap:pretty}
.scena-nome{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink2)}
/* Sul telefono le tre scene si sfogliano di lato invece di impilarsi.
   Ci sono arrivato per esclusione, misurando: tre in fila facevano riquadri da
   135px, tre francobolli su cui non si giudica un'immagine; due sopra e uno
   sotto a 16/9 tagliavano il terzo del 44 per cento, misurato, perche' la
   sorgente e' quadrata e il riquadro no. In colonna erano tre schermate di
   scorrimento. Cosi' invece ognuna e' grande quasi quanto lo schermo, quadrata
   come nasce, e non si taglia niente. Il ritaglio all'82% non e' estetica: e'
   il pezzo della seconda che si vede al bordo, ed e' l'unica cosa che dice che
   ce n'e' un'altra. */
/* La soglia e' 820 e non 640 perche' comprende il tablet in verticale: li' la
   griglia a tre restava, e i riquadri scendevano a 209px, piu' piccoli che su
   un telefono. Misurato su iPad mini. */
@media(max-width:820px){
  .scene-g{display:flex;overflow-x:auto;gap:var(--s3);
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* il respiro ai lati lo dà il padding, così la prima non parte incollata
       al bordo e l'ultima non ci finisce contro */
    padding-bottom:var(--s2);scrollbar-width:none}
  .scene-g::-webkit-scrollbar{display:none}
  .scena{flex:0 0 82%;scroll-snap-align:center}
  .scena-box{aspect-ratio:1/1}
}

/* La foto presa dalla pagina del cliente. Piccola: e' una prova, non una
   vetrina, e sopra c'e' gia' il suo indirizzo. Il fondo a scacchi non serve,
   ma "contain" si', perche' le foto di catalogo hanno proporzioni qualunque e
   ritagliarle fa sembrare che le abbiamo toccate noi. */
/* Il min-height serve a una cosa sola: le foto di catalogo pesano anche due
   mega e mezzo, e finche' non arriva un'immagine senza dimensioni e' alta
   zero. Il riquadro restava una riga da due pixel in mezzo alla colonna,
   che non si legge come "sto caricando", si legge come "e' rotto". */
/* 150px di altezza massima li avevo scelti guardando una foto orizzontale.
   Su una verticale, che nella moda e' la norma, 500x889 diventavano 85x150:
   un francobollo in piedi dentro a una colonna da 451, che non si legge come
   una foto ma come una cosa tagliata male. Il tetto ora e' sull'altezza vera
   e la larghezza segue, quindi orizzontali e verticali vengono grandi uguale.
   Il min-height resta per le foto pesanti: due mega e mezzo che devono ancora
   arrivare sono alti zero, e quel filo si legge come "e' rotto". */
/* Due tetti e nessuna larghezza imposta: il riquadro e' l'immagine, quindi
   niente bande vuote ai lati. Ci sono arrivato sbagliando due volte. Prima
   c'era solo max-height:150px, scelto guardando una foto orizzontale: su una
   verticale, che nella moda e' la norma, 500x889 diventavano 85x150, un
   francobollo in piedi. Poi avevo messo width:100% sul telefono, e su un
   tablet in verticale la stessa foto diventava una fascia 636x300 con l'
   immagine piccola in mezzo e il vuoto ai lati. Con width:auto piu' i due
   tetti si adatta da sola: verticale o orizzontale, telefono o monitor.
   Il min-height resta per le foto pesanti: due mega e mezzo che devono ancora
   arrivare sono alti zero, e quel filo si legge come "e' rotto". */
.pv-foto{max-width:100%;max-height:min(420px,50vh);min-height:60px;
  width:auto;height:auto;object-fit:contain;align-self:flex-start;
  border:1px solid var(--ai-line);border-radius:var(--r-sm);background:var(--ai-surface)}

/* Va a capo a ogni larghezza, non solo sul telefono. Con "pre" serviva uno
   scorrimento laterale dentro alla pagina per leggere una riga, e quel blocco
   non si legge parola per parola: serve a far vedere che l'ingresso e'
   disordinato, e tagliato a meta' non lo fa piu'. */
.pv-in code{font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  background:var(--ai-surface);border:1px solid var(--ai-line);border-radius:var(--r-sm);
  padding:var(--s2);display:block;white-space:pre-wrap;overflow-wrap:anywhere;
  max-width:100%;max-height:210px;overflow-y:auto}
.pv-out{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);overflow:hidden}
.pv-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}

/* Tab a cartella. Prima erano scritte grigie con un filetto sotto a quella
   aperta: da lontano sembravano una riga di testo, e infatti nessuno le
   apriva. Ora ognuna ha il suo bordo e il suo fondo, quella aperta e' chiara e
   si salda al pannello mangiandosi la riga sotto, le altre restano indietro
   sul fondo scuro. Si capisce che sono quattro cose da aprire senza doverle
   provare. */
.tabs{display:flex;gap:3px;padding:var(--s3) var(--s4) 0;border-bottom:1px solid var(--line);
  overflow-x:auto;background:var(--bg2)}
/* Sul telefono le quattro linguette misurano 413px e ne stanno 298: la quarta
   restava fuori, e una striscia che scorre di lato non lo dice a nessuno.
   Chi apriva la scheda dal telefono non sapeva che gli attributi esistevano.
   Vanno a capo: due righe si vedono, una riga tagliata no. */
@media(max-width:640px){
  .tabs{flex-wrap:wrap;overflow-x:visible;gap:2px;padding-left:var(--s3);padding-right:var(--s3)}
  .tabs button{padding-left:var(--s3);padding-right:var(--s3);font-size:13px}
}
.tabs button{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  background:transparent;border:1px solid transparent;border-bottom:0;
  border-radius:10px 10px 0 0;padding:var(--s3) var(--s4);color:#1B5451;
  white-space:nowrap;min-height:44px;position:relative;bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--bg);border-color:var(--line);
  color:var(--ink);box-shadow:inset 0 3px 0 var(--acc-testo)}
.tabs button:focus-visible{outline:2px solid var(--acc-testo);outline-offset:-3px}
.tab-panel{padding:var(--s4)}
.tab-panel[hidden]{display:none}

/* coppia etichetta-valore: l'etichetta in mono, cosi' si scorre con l'occhio */
.kv{display:grid;grid-template-columns:150px 1fr;gap:var(--s2) var(--s4);font-size:14px}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);padding-top:3px}
.kv dd{margin:0;color:var(--ink)}
.kv .src{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:var(--s2)}
.kv .miss{color:var(--warn-ink)}
.pv-more{font:inherit;font-size:13px;background:none;border:0;color:var(--ink2);
  cursor:pointer;padding:var(--s3) 0;text-decoration:underline}

/* barra di stato: resta attaccata mentre si scorre */
.qc{position:sticky;bottom:0;background:var(--bg2);border-top:1px solid var(--line);
  padding:var(--s3) var(--s4);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:12px;color:var(--ink2)}
.qc b{color:var(--ink);font-weight:500}
.qc .warn{color:var(--warn-ink)}
.qc .btn-sm{margin-left:auto}
.trace{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.6}

/* ---- mail gate · cinque stati, sempre SOTTO il risultato ---- */
.gate{border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--bg);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3)}
.gate h3{font-size:17px}
.gate p{font-size:14px;color:var(--ink2)}
.gate-form{display:grid;grid-template-columns:1fr auto;gap:var(--s2)}
/* La seconda riga del gate: cellulare e settore, facoltativi. Stanno sotto e
   non accanto alla mail perche' l'ordine dice cosa serve davvero: la mail e'
   la richiesta, questi due sono un di piu' che si puo' saltare. */
.gate-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2)}
.gate .priv{font-size:12.5px;color:var(--ink3)}
.gate--ok{border-left-color:var(--success);background:var(--bg2)}
.gate--blocked{border-left-color:var(--warn-fill)}
.gate--err{border-left-color:var(--err)}
.gate .err-msg{color:var(--err);font-size:13px}

/* stato "sto generando" del bottone: resta leggibile e non salta di larghezza */
.btn[aria-busy="true"],.btn[aria-disabled="true"]{opacity:.62;pointer-events:none}

/* errore della demo · ha bordo e colore propri, non si confonde con la nota */
.demo-err{border:1px solid var(--err);border-left:3px solid var(--err);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--bg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);font-size:14px}
.demo-err strong{color:var(--err)}
.demo-err .btns{margin-top:var(--s1)}

@media(max-width:900px){
  .pv{grid-template-columns:1fr}
  /* su mobile l'output ha la precedenza: l'input va sotto */
  .pv .pv-col--in{order:2}
  .kv{grid-template-columns:1fr;gap:var(--s1) 0}
  .kv dt{padding-top:var(--s2)}
  .demo-in{grid-template-columns:1fr}
  .gate-form{grid-template-columns:1fr}
  .gate-extra{grid-template-columns:1fr}
}

/* ---- contatti dei soci · link veri, con l'icona ----
   Prima era una riga di testo che sembrava cliccabile e non lo era. */
.contatti{display:flex;gap:var(--s4);margin-top:auto;padding-top:var(--s4);
  border-top:1px solid var(--line);flex-wrap:wrap}
.contatti a{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  color:var(--ink2);min-height:32px}
.contatti a:hover{color:var(--acc-testo)}
.contatti svg{width:17px;height:17px;flex:0 0 auto;fill:currentColor}
.contatti svg[stroke]{fill:none}

/* ---- illustrazioni a linee ----
   Stessa grammatica del sito pubblico: tratto sottile, colore ereditato, la
   linea che si disegna e si cancella. Stanno nel fondo delle schede che hanno
   poco testo, dove restava un buco. Sono decorazione: aria-hidden, e non
   intercettano il puntatore. */
.card{position:relative;overflow:hidden}
.card > *{position:relative;z-index:1}
/* Il riquadro era ancorato in basso a destra e il disegno finiva spinto in un
   angolo: dentro una scheda larga sembrava messo storto. Ora il riquadro e'
   centrato sull'asse della scheda e appoggiato al fondo, cosi' l'illustrazione
   sta sotto al testo invece che di fianco. Il viewBox degli SVG e' stretto sul
   tratto, quindi il centro del disegno coincide col centro del riquadro. */
.wire{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);
  width:min(80%, 260px);height:54%;z-index:0;
  pointer-events:none;color:var(--acc);opacity:.3}
.wire svg{width:100%;height:100%;display:block}
.card-acc .wire,.band-dark .wire{color:currentColor;opacity:.22}
/* pathLength=1 e' dichiarato nell'SVG, quindi il tratteggio vale per qualunque
   lunghezza del percorso e non serve misurarla col JS */
.wf-line{stroke-dasharray:1;stroke-dashoffset:1;animation:wf-draw 7s ease-in-out infinite}
@keyframes wf-draw{
  0%{stroke-dashoffset:1} 35%{stroke-dashoffset:0}
  65%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1}
}
@media (prefers-reduced-motion: reduce){
  .wf-line{animation:none!important;stroke-dashoffset:0!important}
}

/* ---- stato dei form · quello che prima non c'era proprio ----
   Un form che non dice se ha inviato e' peggio di un form assente: chi scrive
   se ne va convinto di aver mandato. Tre stati dichiarati, e su errore quello
   che ha scritto resta a schermo. */
.form-stato{font-size:14px;line-height:1.45;margin-top:var(--s2);
  border-left:3px solid var(--line);padding:var(--s2) var(--s3);border-radius:0 var(--r-sm) var(--r-sm) 0}
.form-stato--attesa{color:var(--ink3);border-left-color:var(--ink3)}
.form-stato--ok{color:var(--ink2);border-left-color:var(--success);background:var(--bg2)}
.form-stato--err{color:var(--err);border-left-color:var(--err)}
.band-teal .form-stato--ok,.band-teal .form-stato--attesa{background:transparent;color:var(--band-teal-ink2)}
/* il campo che ha fermato l'invio si fa riconoscere */
input.is-err,textarea.is-err{border-color:var(--err)}
input[type="checkbox"].is-err{outline:2px solid var(--err);outline-offset:2px}

/* ---- selettore degli argomenti · scelte, non pillole in mezzo al vuoto ---- */
.split-sel{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.scelte{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.scelta{font:inherit;text-align:left;cursor:pointer;
  background:var(--band-teal-card);border:1px solid var(--band-teal-card);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);
  display:flex;flex-direction:column;gap:2px;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.scelta:hover{transform:translateY(-2px);box-shadow:var(--elev-1)}
.scelta-t{font-weight:600;font-size:15.5px;color:var(--ink)}
.scelta-d{font-size:13px;color:var(--ink2)}
/* l'ultima da sola su una riga da due: prende tutta la larghezza */
.scelte > :last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:900px){
  .split-sel{grid-template-columns:1fr;gap:32px}
  .scelte{grid-template-columns:1fr}
  .scelte > :last-child:nth-child(odd){grid-column:auto}
}

/* Sulla fascia teal i campi devono staccare dal fondo, se no il form sparisce */
.band-teal input,.band-teal select,.band-teal textarea{background:var(--band-teal-card)}
.band-teal .card{background:var(--band-teal-card);border-color:var(--band-teal-card)}
.band-teal .card-plain{background:transparent;border-color:var(--band-teal-line)}
.band-teal .ms-menu{background:var(--band-teal-card);border-color:var(--band-teal-line)}

/* ---- caso studio · riepilogo largo, poi il corpo in tre ----
   I numeri stavano in alto a destra, accanto al titolo: due cose grosse che si
   contendevano la stessa riga, e il titolo perdeva. Ora stanno in fondo, nella
   barra insieme alla nota e al pulsante, che e' il punto in cui uno ha appena
   letto il caso e vuole il conto. */
.caso-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s7);flex-wrap:wrap}
.caso-corpo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);
  border-top:1px solid var(--band-teal-line);padding-top:var(--s5);margin-top:var(--s4)}
.caso-corpo h3{margin-bottom:6px}
@media(max-width:900px){.caso-corpo{grid-template-columns:1fr;gap:var(--s5)}}

/* ---- LA BARRA · i numeri e l'azione sotto al blocco, non di fianco al titolo.
   Cosi' in alto restano allineati titolo, testo e immagine, e in fondo c'e'
   una riga sola che porta il conto e il pulsante. ---- */
.barra{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5) var(--s7);
  flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.barra .stats{padding-top:0;margin:0}
.barra .metric-note{margin-top:0;max-width:46ch}
.barra-fine{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.card-acc .barra,.band-dark .barra{border-top-color:var(--band-teal-line)}
.band-dark .barra{border-top-color:var(--band-dark-line)}
@media(max-width:760px){
  .barra{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .barra-fine{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  /* Sul telefono i tre numeri andavano a capo dove capitava: due sulla prima
     riga, il terzo da solo sotto, ognuno largo quanto la sua cifra. Sembravano
     buttati li'. In griglia stanno su una riga sola, tre colonne uguali, e le
     etichette partono tutte dalla stessa verticale. */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3);
    align-items:start}
  .stat strong{font-size:26px}
  .stat span{font-size:11.5px;line-height:1.35}
}
/* sotto i 380px tre colonne diventano strette: meglio due, con la terza sotto */
@media(max-width:380px){
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- LE SCENE · immagini generate, con la loro didascalia.
   Dove il racconto in HTML diventava un riquadro fitto da leggere prima di
   aver capito cosa si vende, ci va un'immagine. La didascalia dichiara sempre
   che e' generata con AI: non e' la foto di un lavoro fatto. ---- */
.scena{margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--bg2)}
.scena img{display:block;width:100%;height:auto}
.scena figcaption{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.5;
  padding:10px 14px;border-top:1px solid var(--line);background:var(--bg)}
/* senza cornice, dove l'immagine sta gia' su un fondo colorato */
.scena--nuda{border:0;background:none;border-radius:0}
.scena--nuda img{border-radius:var(--r-lg)}
/* senza cornice anche la didascalia perde il suo riquadro, se no resta una
   striscia bianca appiccicata sotto l'immagine */
.scena--nuda figcaption{background:none;border-top:0;padding:9px 2px 0}
/* Sul telefono l'ordine e' immagine, titolone, descrizione, pulsante: prima si
   vede la cosa, poi la si legge. Nella colonna il testo resta nel suo ordine. */
@media(max-width:980px){
  .split > .scena,.split-even > .scena,.split-wide > .scena{order:-1}
}

/* ---- APERTURA CON IMMAGINE · la gerarchia e' etichette, foto, titolo.
   Le etichette (tipo, stato, occhiello) dicono in due parole di cosa si
   parla: vengono prima, se no la foto arriva senza che si sappia di che.
   Poi la foto, che e' la cosa. Poi il titolo, la descrizione e l'azione.
   Su schermo largo le etichette e il testo stanno in colonna a sinistra e
   la foto occupa la colonna a destra per tutta l'altezza; su telefono la
   stessa sequenza si incolonna, e la foto finisce dov'e' scritta. ---- */
.intro{display:grid;grid-template-columns:1.2fr .8fr;gap:0 64px;align-items:start}
.intro--pari{grid-template-columns:1fr 1fr}
.intro-eti{grid-column:1;grid-row:1;display:flex;flex-direction:column;
  gap:14px;align-items:flex-start;margin-bottom:26px}
.intro > .scena{grid-column:2;grid-row:1 / 3;align-self:center}
.intro > .stack{grid-column:1;grid-row:2}
/* nella variante a colonne pari titolo, testo e immagine partono dalla stessa
   riga: e' il senso di metterli affiancati */
.intro--pari > .scena{grid-row:2;align-self:start}
@media(max-width:980px){
  .intro{grid-template-columns:1fr;gap:26px}
  /* una colonna sola, e la sequenza la decide order: etichette, foto, testo.
     Serve ripetere i selettori: quelli di sopra pesano piu' di `.intro > *`. */
  .intro-eti,.intro > .scena,.intro > .stack{grid-column:1;grid-row:auto}
  .intro-eti{order:1;margin-bottom:0}
  .intro > .scena{order:2}
  .intro > .stack{order:3}
}

/* nella pagina contatti le due schede finiscono alla stessa quota */
.contatti-top > *{height:100%}

/* ---- elenco con la spunta ---- */
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ticks li{position:relative;padding-left:22px;font-size:15px;color:var(--ink2)}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--acc);font-weight:700}

/* ---- confronto prima/dopo · costruito, non fotografato ---- */
.pd{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s4);align-items:start}
.pd-col{display:flex;flex-direction:column;gap:var(--s3)}
@media(max-width:760px){.pd{grid-template-columns:1fr}}

/* ---- sigla dei soci · sta al posto del ritratto finche' non c'e' ---- */
.sigla{width:64px;height:64px;border-radius:var(--r-md);background:var(--bg);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.02em;
  color:var(--acc-testo)}

/* ---- zona di rilascio del file e tabella dei dati estratti ---- */
.drop{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--bg);
  padding:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  text-align:center;transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.drop.drag{border-color:var(--acc);background:var(--acc2)}
.drop .tiny{max-width:44ch}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px;min-width:420px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);font-weight:400;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--bg2)}
.tbl td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);color:var(--ink2);
  vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{text-align:right;font-family:var(--mono);font-size:12.5px;white-space:nowrap}

/* ============================================================
   MODALE · il posto dove si prova una soluzione senza cambiare pagina.
   E' un <dialog> vero, non un div travestito: la pila, il fondo, il
   fuoco e il tasto Esc li fa il browser, e li fa meglio di noi.
   Su schermo stretto sale dal basso e prende quasi tutta l'altezza,
   perche' dentro c'e' una chat e la tastiera del telefono mangia meta'
   schermo.
   ============================================================ */
.modal{width:min(760px, calc(100vw - 32px));max-height:min(86vh, 900px);padding:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:var(--ink);
  box-shadow:var(--elev-2);overflow:hidden}
.modal::backdrop{background:var(--overlay)}
.modal[open]{display:flex;flex-direction:column;animation:modal-in var(--t-slow) var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--line);background:var(--bg)}
.modal-top .eyebrow{display:block;margin-bottom:var(--s1)}
.modal-top h2{font-size:22px;font-weight:600;line-height:1.2;text-wrap:balance}
.modal-x{font:inherit;font-size:20px;line-height:1;color:var(--ink2);background:none;
  border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;flex:0 0 auto;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--acc);border-color:var(--line)}
.modal-body{padding:var(--s5);overflow:auto;display:flex;flex-direction:column;gap:var(--s4)}
/* LA MODALE CHE CONTIENE UNA CHAT.
   Regola sola: un posto che scorre, e quel posto e' il registro dei messaggi.
   Prima scorrevano sia il corpo della modale sia il log, annidati uno dentro
   l'altro: il dito ne muoveva uno a caso, i messaggi si tagliavano contro il
   bordo del contesto e sembrava che non scorresse niente. Ora la modale ha
   un'altezza sua, tutto il resto e' fisso e il log si prende quello che
   avanza. */
.modal:has(.chat){height:min(94vh, 820px);max-height:94vh}
.modal-body:has(> .chat){overflow:hidden;flex:1 1 auto;min-height:0;
  padding:var(--s4) var(--s5) var(--s5);gap:var(--s3)}
/* Il contesto qui e' contorno: tre righe strette in cima, non tre schede.
   Ogni pixel che si prende lo toglie alla conversazione, che e' la cosa per
   cui la gente ha premuto "provalo". */
.modal-body:has(> .chat) > .grid{gap:10px}
.modal-body:has(> .chat) > .grid > .card{padding:12px 14px;gap:4px;border-radius:var(--r-sm)}
.modal-body:has(> .chat) > .grid > .card h3{font-size:13px}
.modal-body:has(> .chat) > .grid > .card p{font-size:12.5px;line-height:1.45}
/* In una finestra bassa non c'e' spazio per il contesto e per la chat: la
   chat vince, se no restano due centimetri di conversazione. */
@media(max-height:780px){
  .modal-body:has(> .chat) > .grid{display:none}
}
.modal-body:has(> .chat) > *{flex:0 0 auto}
.modal-body > .chat{flex:1 1 auto;min-height:0}
.chat-top,.chat-ctx,.chat-sugg,.chat-in,.chat > .gate{flex:0 0 auto}
.modal-body .chat-log{flex:1 1 auto;min-height:0;max-height:none}
/* I messaggi si appoggiano in basso, come in qualunque app di messaggi. Con il
   log vuoto restava un buco fra la prima riga e il campo per scrivere, e il
   riquadro sembrava rotto. margin-top:auto sul primo messaggio, non
   justify-content:flex-end: quello, quando i messaggi superano l'altezza,
   taglia i primi e non si riesce a risalire. */
.chat-log > :first-child{margin-top:auto}
/* dentro alla modale il contesto e' contorno, non contenuto: sta stretto e
   lascia lo spazio alla cosa che si e' venuti a provare */
.modal-body > .grid > .card{padding:18px 18px;gap:8px}
.modal-body > .grid > .card h3{font-size:16px}
.modal-body > .grid > .card p{font-size:14px}
/* Dentro alla modale c'e' meno spazio: i video si abbassano invece di
   spingersi fuori. La regola vecchia parlava di colonne, che qui non ci sono
   piu': la fila e' flessibile e va a capo da sola. */
.modal-body .vg{--h-video:300px}
html.modal-aperta{overflow:hidden}
/* Sul telefono la modale non e' piu' un foglio che sale dal basso ma occupa
   tutto lo schermo, come un'app di messaggi: barra in alto, conversazione che
   scorre, campo per scrivere appoggiato al fondo. Il foglio a meta' altezza
   lasciava alla chat due centimetri, e con la tastiera aperta nemmeno quelli.
   L'altezza e' in dvh, non vh: con la barra del browser che compare e sparisce
   vh resta fermo sul valore grande e il fondo della modale finisce coperto. */
@media(max-width:640px){
  .modal{width:100vw;max-width:100vw;height:100dvh;max-height:none;margin:0;
    border-radius:0;border:0}
  .modal:has(.chat){height:100dvh;max-height:none}
  .modal-body{flex:1 1 auto;min-height:0}
  .modal-body .vg{--h-video:auto}
  @keyframes modal-in{from{opacity:0}to{opacity:1}}
}

/* ============================================================
   HERO · testo a sinistra, palco a destra.
   Il palco NON ha un'altezza scritta a mano: occupa due righe della
   griglia (testo + form) e si stira per quanto sono alte quelle. Cosi'
   le due colonne finiscono pari da sole, a qualunque lunghezza di titolo.
   Su mobile l'ordine cambia: prima il testo, poi il palco, poi il form,
   perche' il palco deve spiegare cosa fa il campo che sta sotto.
   ============================================================ */
.hero{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:auto 1fr;
  gap:0 56px;align-items:stretch}
.hero-copy{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:24px;align-self:start}
.hero-form{grid-column:1;grid-row:2;align-self:start;padding-top:28px;
  display:flex;flex-direction:column;gap:var(--s3)}
.hero-stage{grid-column:2;grid-row:1 / 3;min-height:440px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  overflow:hidden;display:flex;flex-direction:column;position:relative}

/* ---- vetrina · schede generate da noi che si danno il cambio ---- */
.sc{flex:1;display:flex;flex-direction:column;min-height:0}
.sc-slides{flex:1;position:relative;min-height:0}
.sc-slide{position:absolute;inset:0;display:grid;grid-template-rows:1.15fr auto;
  opacity:0;visibility:hidden;transition:opacity var(--t-slow) var(--ease)}
.sc-slide[data-on="1"]{opacity:1;visibility:visible}
.sc-slide--senza-figura{grid-template-rows:1fr}
.sc-img{position:relative;overflow:hidden;background:var(--bg2)}
.sc-img img,.sc-img picture{width:100%;height:100%;object-fit:cover;display:block}
/* la scritta dice come e' fatta l'immagine: e' generata, non fotografata */
.sc-img .sc-badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--overlay);color:#FEFFFF;
  padding:5px 9px;border-radius:var(--r-pill)}
.sc-body{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.sc-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.sc-name{font-family:var(--sans-ui);font-weight:700;font-size:16px;line-height:1.25;color:var(--ink)}
.sc-kv{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);font-size:13px;margin-top:2px}
.sc-kv dt{color:var(--ink3)}
.sc-kv dd{color:var(--ink2);margin:0}
/* le righe entrano una alla volta: e' la scheda che si scrive, non un fondu */
.sc-slide[data-on="1"] .sc-kv > *{animation:sc-row var(--t-slow) var(--ease) backwards}
.sc-slide[data-on="1"] .sc-kv > *:nth-child(1),
.sc-slide[data-on="1"] .sc-kv > *:nth-child(2){animation-delay:120ms}
.sc-slide[data-on="1"] .sc-kv > *:nth-child(3),
.sc-slide[data-on="1"] .sc-kv > *:nth-child(4){animation-delay:260ms}
.sc-slide[data-on="1"] .sc-kv > *:nth-child(5),
.sc-slide[data-on="1"] .sc-kv > *:nth-child(6){animation-delay:400ms}
@keyframes sc-row{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s2)}
.sc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink2);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 8px}

/* piede della vetrina: didascalia a sinistra, avanzamento a destra */
/* i pallini stanno a sinistra: a destra ci finiva sopra la pillola della chat */
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--bg2)}

.sc-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3)}
/* Va detto, e va detto qui: chi guarda vede prodotti che sembrano veri, con
   fotografie che sembrano fotografie. Non sono ne' l'uno ne' l'altro. */
.sc-disclaimer{font-size:11.5px;line-height:1.4;color:var(--ink3);
  padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--bg2)}
/* la riga del dato mancante, in vetrina, non deve gridare: e' una funzione */
.sc-kv dd.miss{color:var(--warn-ink);font-size:12.5px}
.sc-dots{display:flex;gap:6px}
.sc-dots button{width:22px;height:14px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center}
.sc-dots button::after{content:"";display:block;width:100%;height:3px;border-radius:2px;
  background:var(--line);transition:background var(--t-base) var(--ease)}
.sc-dots button[aria-current="true"]::after{background:var(--acc)}

/* ---- il palco mentre genera · scheletro, non spinner ----
   Le righe grigie hanno la forma che avranno i dati veri, quindi quando
   arrivano non salta niente. Il passo scritto dice a che punto siamo. */
.sk{flex:1;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.sk-row{height:12px;border-radius:var(--r-sm);background:linear-gradient(90deg,
  var(--bg2) 0%, var(--acc2) 50%, var(--bg2) 100%);background-size:220% 100%;
  animation:sk-slide 1.25s linear infinite}
.sk-row.w40{width:40%} .sk-row.w60{width:60%} .sk-row.w80{width:80%}
.sk-img{flex:1;min-height:120px;border-radius:var(--r-md);background:var(--bg2);
  display:flex;align-items:center;justify-content:center}
@keyframes sk-slide{from{background-position:120% 0}to{background-position:-120% 0}}
.sk-step{font-family:var(--mono);font-size:12px;color:var(--ink2);
  display:flex;align-items:center;gap:var(--s2);margin-top:auto}
.sk-step .sk-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:sk-pulse 1.1s var(--ease) infinite}
@keyframes sk-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* dopo un po' l'attesa va dichiarata invece di far finta di niente */
.sk-slow{font-size:12px;color:var(--warn-ink)}

/* ---- il palco con dentro la scheda vera ---- */
.hero-stage .stage-out{flex:1;overflow:auto;padding:var(--s5);display:flex;
  flex-direction:column;gap:var(--s3);animation:stage-in var(--t-slow) var(--ease)}
@keyframes stage-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage-out .sc-name{font-size:17px}
.stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.stage-src{font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.stage-back{font:inherit;font-size:12.5px;background:none;border:0;padding:0;
  color:var(--ink2);text-decoration:underline;cursor:pointer;align-self:flex-start}
.stage-back:hover{color:var(--acc)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero-copy,.hero-form,.hero-stage{grid-column:1;grid-row:auto}
  .hero-copy{order:1;align-self:auto}
  /* Su schermo stretto l'immagine prendeva quel che restava dopo la scheda, e
     quel che restava erano 160px su 348 di larghezza: una striscia, non la
     foto di un prodotto. Ora l'altezza della figura e' fissa e a variare e'
     il resto: cosi' non balla fra una scheda e l'altra mentre girano, che
     era l'altro difetto (andava da 274 a 330 a seconda del testo). */
  .hero-stage{order:2;min-height:724px;margin-top:28px}
  .sc-slide{grid-template-rows:320px auto}
  .sc-body{padding:var(--s4) var(--s5) var(--s5)}
  .sc-kv{font-size:12.5px}
  .sc-name{font-size:15.5px}
  /* con la figura ad altezza fissa le schede piu' corte lasciano uno spazio in
     fondo: i tag ci si appoggiano, cosi' lo stacco sta fra gli attributi e i
     tag e sembra voluto, invece di essere un buco dopo l'ultima riga */
  .sc-tags{margin-top:auto}
  .hero-form{order:3;align-self:auto;padding-top:20px}
}

/* ============================================================
   CHAT SYSTEM · un componente, tre usi.
   AIR Support, AIR Bot e il caso dentisti sono la stessa cosa: cambia
   il contesto e la posizione, non il sistema.
   ============================================================ */
.chat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden}
.chat-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line)}
.chat-top .nome{font-weight:600;font-size:15px}
/* contatore: mono, secondario, in alto a destra. Nessun countdown, nessun
   rosso: sei e' il massimo, non la norma, e chi fa due domande non lo vede. */
.chat-count{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink3)}
.chat-count[hidden]{display:none!important}

.chat-ctx{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);background:var(--bg2);font-size:13px;align-items:center}
.chat-ctx .lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3)}
.ctx-btn{font:inherit;font-size:13px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink2);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;min-height:32px}
.ctx-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.chat-log{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);
  max-height:380px;overflow-y:auto;overscroll-behavior:contain}
.msg{max-width:84%;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  font-size:14.5px;line-height:1.45;animation:msg-in var(--t-base) var(--ease)}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg--u{align-self:flex-end;background:var(--card);color:var(--ink);border-bottom-right-radius:var(--r-sm)}
/* Il conto alla rovescia di chi si e' fatto beccare. Grande e in mono: e'
   un numero, non una frase, e deve leggersi al volo mentre scende. */
.msg--conto{font-family:var(--mono);font-size:22px;font-weight:700;
  padding:var(--s2) var(--s4);letter-spacing:.05em}
/* la foto ricordo: la bolla si toglie di mezzo e lascia solo l'immagine */
.msg--foto{padding:0;overflow:hidden;max-width:min(78%,320px)}
.msg--foto img{display:block;width:100%;height:auto;border-radius:var(--r-md)}

.msg--a{align-self:flex-start;background:var(--ai-surface);border:1px solid var(--ai-line);
  color:var(--ink);border-bottom-left-radius:var(--r-sm)}
/* "Non lo so" e' uno stato progettato, non un errore: niente rosso. */
.msg--idk{align-self:flex-start;background:var(--bg);border:1px dashed var(--ai-line);
  color:var(--warn-ink);border-radius:var(--r-md)}
.msg--hand{align-self:flex-start;background:var(--bg2);border:1px solid var(--acc);
  color:var(--ink);border-radius:var(--r-md)}
.msg .azioni{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* la citazione della fonte: e' la cosa che distingue il prodotto, quindi non
   e' una nota in grigio ma un blocco a se' */
.cite{margin-top:var(--s3);border-top:1px solid var(--ai-line);padding-top:var(--s2);
  display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink3)}
.cite b{color:var(--ink2);font-weight:500}
.cite a{color:var(--acc-testo);text-decoration:none}
.cite a:hover{text-decoration:underline}

.typing{align-self:flex-start;display:flex;gap:5px;padding:var(--s3) var(--s4)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.25;
  animation:blink 1200ms infinite}
.typing i:nth-child(2){animation-delay:150ms}
.typing i:nth-child(3){animation-delay:300ms}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* Le domande di partenza stanno su una riga sola che scorre di lato. A capo
   diventavano tre righe fisse sopra al campo: cento pixel tolti per sempre
   alla conversazione, che e' la cosa che si e' venuti a vedere. */
.chat-sugg{display:flex;gap:var(--s2);flex-wrap:nowrap;overflow-x:auto;
  overscroll-behavior-x:contain;padding:var(--s3) var(--s4);scrollbar-width:none;
  background:var(--bg);border-top:1px solid var(--line)}
.chat-sugg:empty{display:none}
.chat-sugg::-webkit-scrollbar{display:none}
.sugg{font:inherit;font-size:13px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink2);border-radius:var(--r-pill);padding:8px 13px;cursor:pointer;text-align:left;
  flex:0 0 auto;white-space:nowrap}
.sugg:hover{border-color:var(--acc);color:var(--acc-testo)}

.chat-in{display:grid;grid-template-columns:1fr auto;gap:var(--s2);
  padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line)}
.chat-in input{border-radius:var(--r-pill);background:var(--bg)}
.chat .gate{border-radius:0;border-left-width:3px;border-top:1px solid var(--line)}

/* ============================================================
   ZONA CONTATTO · il bottone grande e il pallino del bot.
   Contattaci era finito solo nell'header, che su una pagina lunga sparisce
   dopo la prima schermata: chi si convince a meta' pagina non aveva piu'
   niente da premere. Ora resta appoggiato in basso per tutta la lettura,
   e accanto c'e' il bot per chi ha una domanda prima di scrivere.
   ============================================================ */
.bot{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;
  align-items:flex-end;gap:var(--s3)}
.bot-azioni{display:flex;align-items:center;gap:var(--s3)}
.bot-cta{font:inherit;font-size:17px;font-weight:600;background:var(--ink);color:var(--bg);
  border:0;border-radius:var(--r-pill);padding:17px 30px;cursor:pointer;box-shadow:var(--elev-2);
  min-height:58px;display:inline-flex;align-items:center;letter-spacing:.01em}
.bot-cta:hover{background:var(--acc);color:var(--accInk)}
/* il pallino: il bot ha una faccia, quindi si capisce che risponde una
   macchina prima di scriverci, non dopo */
.bot-dot{width:58px;height:58px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--elev-2);
  color:var(--acc);display:grid;place-items:center;padding:0}
.bot-dot svg{width:32px;height:32px;display:block}
.bot-dot:hover{border-color:var(--acc);background:var(--ai-surface)}
.bot-dot[aria-expanded="true"]{background:var(--acc);color:var(--accInk);border-color:var(--acc)}

/* il messaggio che ogni tanto si apre da solo. Si chiude da solo, si chiude
   a mano, e una volta chiuso non torna: un fumetto che insiste e' un popup. */
.bot-nudge{display:flex;align-items:flex-start;gap:var(--s2);max-width:250px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  border-bottom-right-radius:var(--r-sm);padding:12px 12px 12px 14px;
  box-shadow:var(--elev-2);animation:nudge-in var(--t-slow) var(--ease)}
.bot-nudge p{font-size:14px;line-height:1.4;color:var(--ink)}
.bot-nudge-x{font:inherit;font-size:15px;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--ink3);padding:2px 2px;flex:0 0 auto}
.bot-nudge-x:hover{color:var(--acc)}
@keyframes nudge-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.bot-nudge{animation:none}}

.bot-panel{width:400px;max-width:calc(100vw - 32px);box-shadow:var(--elev-2)}
.bot-panel .chat-log{max-height:min(46vh,340px)}
.bot-close{font:inherit;font-size:18px;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--ink3);padding:4px 6px}
.bot-close:hover{color:var(--acc)}

@media(max-width:760px){
  /* Il pannello va a piena schermata: 400px col dito non si usano, e con la
     tastiera aperta un riquadro che galleggia lascia il campo sotto le dita.
     Il fondo resta libero per la zona contatto quando la chat e' chiusa. */
  .bot{right:14px;bottom:14px;left:14px;align-items:stretch}
  .bot-azioni{gap:10px}
  .bot-cta{flex:1;justify-content:center;font-size:16px;padding:16px 20px}
  .bot-panel{width:auto;max-width:none;position:fixed;inset:0;border:0;border-radius:0;
    height:100dvh;display:flex;flex-direction:column}
  .bot-panel .chat-log{max-height:none;flex:1 1 auto;min-height:0}
  .bot-nudge{align-self:flex-end}
  /* col pannello aperto a piena schermata il bottone di contatto resterebbe
     stampato sopra la conversazione, e sotto non c'e' piu' pagina da scorrere */
  html.bot-aperto{overflow:hidden}
  html.bot-aperto .bot-azioni{display:none}
}

/* ============================================================
   VIDEO SYSTEM · ogni video dichiara come e' stato fatto.
   Cosa si vede, come e' stato prodotto, quanto ci e' voluto: sono i tre
   metadati che rendono la galleria una prova invece di un portfolio.
   I video veri sono verticali (9:16 e 3:4), non 16:9: ogni card tiene il
   proprio rapporto invece di ritagliare il materiale.
   ============================================================ */
/* ---- la vetrina dei formati ----
   Tre colonne uguali con dentro video di forma diversa davano una fila
   sfrangiata: il 3/4 alto 425px accanto al 9/16 alto 570, il terzo che
   galleggiava da solo con mezzo metro di vuoto a sinistra, e le didascalie
   che finivano a altezze diverse a seconda di quante righe erano.
   Il punto della sezione pero' e' proprio che i formati sono diversi, quindi
   la risposta non e' ritagliarli tutti uguali: e' dargli la stessa ALTEZZA e
   lasciare che sia la larghezza a cambiare, come una pellicola. Con
   aspect-ratio addosso al riquadro, fissata l'altezza la larghezza viene da
   se': il verticale esce stretto e alto, gli altri larghi e bassi, e la riga
   in fondo e' dritta. */
.vg{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:stretch;
  margin-top:var(--s5)}
.vg > .vcard{flex:0 0 auto}
.vg .vbox{height:var(--h-video,500px);width:auto;flex:0 0 auto}
/* La larghezza della scheda la deve dare il video, non la didascalia. Senza
   questa riga due video della stessa forma uscivano larghi 366 e 333, perche'
   la scheda si allargava sul testo piu' lungo: la fila sembrava storta e la
   colpa era di una parola. Con width:0 la didascalia non pesa piu' sul calcolo
   e min-width:100% le fa comunque prendere tutta la scheda. */
.vg .vcard > .tiny{width:0;min-width:100%;box-sizing:border-box}
.vcard{display:flex;flex-direction:column;gap:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg)}
/* La didascalia non aveva margini interni: toccava i bordi laterali e, con il
   ritaglio della scheda, l'ultima parola veniva tagliata. Il video sta bene
   a filo, il testo no. */
.vcard > .tiny{margin:0;padding:0 var(--s4) var(--s4);text-wrap:pretty}
.vbox{position:relative;aspect-ratio:var(--ar,3/4);background:var(--ai-surface);
  display:block;width:100%;border:0;padding:0;cursor:pointer;overflow:hidden}
.vbox img,.vbox video{width:100%;height:100%;object-fit:cover;display:block}
.vbox .play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(23,37,42,.18);transition:background var(--t-fast) var(--ease)}
.vbox:hover .play{background:rgba(23,37,42,.30)}
.vbox .play span{width:52px;height:52px;border-radius:50%;background:var(--bg);
  display:grid;place-items:center;color:var(--ink);font-size:16px;box-shadow:var(--elev-1)}
.vfail{display:flex;flex-direction:column;gap:var(--s2);justify-content:center;height:100%;
  padding:var(--s5);text-align:left;font-size:13.5px;color:var(--warn-ink);
  background:var(--ai-surface)}
.vfail b{font-weight:600}
.vfail a{color:var(--acc-testo)}
.vdur{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:11px;
  background:var(--band-dark-bg);color:var(--band-dark-ink);padding:3px 7px;border-radius:var(--r-sm)}
.vmeta{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.vmeta .t{font-size:14.5px;font-weight:600;line-height:1.3}
.vmeta .m{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.5}

/* la raccolta bloccata: una card sola che dice quanti sono e cosa sono.
   Niente lucchetti sulle anteprime, niente sfocature drammatiche. */
.vlock{display:flex;flex-direction:column;justify-content:center;gap:var(--s3);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s5);
  background:var(--bg2);min-height:220px}
.vlock .n{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--ink)}
.vlock .l{font-size:14px;color:var(--ink2)}
.vlock .s{font-family:var(--mono);font-size:11.5px;color:var(--ink3);line-height:1.6}

/* Piu' si stringe, piu' l'altezza scende: cosi' su due colonne i video
   restano dentro alla riga invece di uscirne. */
@media(max-width:1300px){.vg{--h-video:430px}}
@media(max-width:1100px){.vg{--h-video:360px}}
@media(max-width:900px){.vg{--h-video:300px}}
/* Sul telefono torna una colonna sola e l'altezza la decide la larghezza,
   perche' li' un'altezza fissa vorrebbe dire video grandi come francobolli. */
@media(max-width:640px){
  .vg{display:grid;grid-template-columns:1fr}
  .vg .vbox{height:auto;width:100%}
  .vg .vcard > .tiny{min-height:0}
}

/* ---- tendina a scelta multipla del calcolatore ---- */
.ms{position:relative}
.ms > summary{list-style:none;cursor:pointer;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:16px;color:var(--ink)}
.ms > summary::-webkit-details-marker{display:none}
.ms > summary::after{content:"▾";color:var(--ink3);font-size:13px}
.ms[open] > summary{border-color:var(--acc)}
.ms[open] > summary::after{content:"▴"}
.ms-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-lab.ms-vuoto{color:var(--ink3)}
.ms-menu{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--bg);
  border:1px solid var(--acc);border-radius:6px;padding:6px;display:flex;flex-direction:column;
  max-height:290px;overflow:auto;box-shadow:0 10px 26px rgba(23,37,42,.14)}
.ms-menu label{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:5px;
  font-size:15px;line-height:1.3;cursor:pointer;color:var(--ink)}
.ms-menu label:hover{background:var(--acc2)}
.ms-menu input{width:auto;margin:2px 0 0;accent-color:var(--acc)}
/* La tendina aperta deve stare sopra al riquadro del risultato, che le sta
   sotto nella stessa scheda. Non basta lo z-index del menu: "\2e card > *" mette a
   1 tutti i figli della scheda, quindi il menu resta chiuso dentro il suo, e
   fra due contesti pari vince l'ultimo nel documento, cioe' il risultato.
   Si alza il ramo che contiene la tendina aperta, non il menu. */
.card > *:has(.ms[open]){z-index:3}
/* e la scheda smette di tagliare per il tempo in cui la tendina e' aperta:
   il ritaglio serve alle illustrazioni di sfondo, non qui */
.card:has(.ms[open]){overflow:visible}
/* ---- IL RISULTATO DEL CALCOLATORE ----
   E' la cosa per cui la sezione esiste, quindi ha un posto suo invece di
   essere una riga di testo in mezzo al modulo, dove "€ — – € —" sembrava un
   errore piu' che un campo ancora da riempire. Il riquadro dice che li' ci
   andra' un numero, e la riga sotto dice cosa manca per vederlo. */
.esito{margin-top:var(--s5);background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:2px}
.esito .eyebrow{margin-bottom:var(--s2)}
.esito .h3-big{line-height:1.05;color:var(--ink)}
.esito #c-totale{font-weight:600;color:var(--ink);margin-top:var(--s2)}
.esito #c-nota{color:var(--ink2);margin-top:var(--s1)}
/* quando la forbice c'e' la riga sotto resta vuota: non deve lasciare aria */
.esito #c-nota:empty{display:none}
.c-vuoto{color:var(--ink3)!important}

/* le tre voci del prezzo si distribuiscono sull'altezza del calcolatore, se no
   si accatastano in cima e sotto resta un buco alto mezza colonna */
.prezzo-voci{display:grid;gap:16px;align-content:stretch}
.prezzo-voci > .card{justify-content:center}
@media(max-width:980px){.prezzo-voci{align-content:start}}

/* ---- riquadri segnaposto e note di lavorazione ---- */
.ph{border:1px dashed var(--line);border-radius:14px;background:var(--bg2);
  display:grid;place-items:center;text-align:center;padding:28px;min-height:120px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink3)}
/* Nota di lavorazione. Prima usava il teal, cioe' lo stesso colore delle
   azioni, quindi si leggeva come contenuto del sito. Ora e' warning, ha
   un'etichetta esplicita, e un solo interruttore la spegne ovunque. */

/* ============================================================
   IL MARCHIO · lockup verticale, come da brand manual.
   Tutte le misure derivano dal corpo delle lettere, --S. Cambiando
   solo --S il lockup scala senza deformarsi, a qualunque dimensione.
   Palette teal: AI e le parole del payoff prendono l'inchiostro (quindi
   si invertono col tema), R e gli accenti restano teal sempre.
   ============================================================ */
.logo{--S:57px;display:inline-flex;flex-direction:column;align-items:center;
  gap:calc(var(--S) * .10);text-decoration:none;line-height:1}
.logo-air{display:flex;align-items:baseline;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;font-size:var(--S);line-height:.9;letter-spacing:-.02em;color:var(--ink)}
.logo-air .r{color:var(--acc);margin-left:.02em}
.logo-pay{display:flex;align-items:center;font-family:'Inter Tight',var(--sans-ui);
  font-size:calc(var(--S) * .108);letter-spacing:.16em;line-height:1;
  gap:calc(var(--S) * .069);color:var(--ink);white-space:nowrap}
.logo-pay .w{font-weight:500}
.logo-pay .ai{font-weight:700;color:var(--acc)}
.logo-pay .dot{width:calc(var(--S) * .031);height:calc(var(--S) * .031);
  border-radius:999px;background:var(--acc);display:inline-block;flex:0 0 auto}
.logo:hover .logo-air,.logo:hover .logo-pay{color:var(--ink)}
.logo:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:2px}

/* L'intestazione resta appiccicata in alto, quindi un salto a un'ancora
   (/air-now#demo) ci finisce sotto: si atterra sulla sezione giusta ma con il
   titolo coperto, e sembra di essere nel posto sbagliato. Lo scarto lascia
   passare l'intestazione, e vale anche per gli input, che quando prendono il
   fuoco vengono portati in vista allo stesso modo. */
[id]{scroll-margin-top:104px}
@media(max-width:900px){[id]{scroll-margin-top:88px}}

/* ---- intestazione ---- */
header.site{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
header.site .wrap{min-height:88px;display:flex;align-items:center;gap:var(--s8);white-space:nowrap}
/* ---- il cambio lingua ----
   Un interruttore a due stati, a destra accanto alla CTA. Mostra tutte e due
   le lingue, non solo la destinazione: una sigla sola si legge in due modi
   opposti ("questa pagina e' in inglese" oppure "portami in inglese"), mentre
   due sigle affiancate con una accesa dicono senza ambiguita' dove sei e dove
   puoi andare.
   Il fondo scuro sta sulla lingua CORRENTE, come il pollice di un interruttore
   fisico: e' lo stato, non l'azione. */
.lang{display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px;background:var(--bg)}
/* Il colore della lingua spenta e' --ink2 e non --ink3: sul fondo chiaro della
   pista, --ink3 stava a 4.52, cioe' passava la soglia per un pelo su un
   carattere di 11px. Un pelo su un carattere piccolo non basta. */
.lang-v{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  line-height:1;padding:10px 12px;border-radius:var(--r-pill);color:var(--ink2);
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lang-v--on{background:var(--ink);color:var(--bg)}
a.lang-v:hover{color:var(--ink);background:var(--acc2)}
a.lang-v:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.lang-v{transition:none}}
@media(max-width:760px){
  /* Sul telefono si clicca col pollice: la meta' spenta e' l'unica cliccabile
     delle due, quindi e' quella che deve avere un bersaglio vero. Cresce in
     altezza, non in larghezza, perche' in riga lo spazio se lo contendono
     marchio, CTA e Menu. */
  .lang-v{padding:12px 10px;min-width:34px;font-size:10.5px}
}
@media(max-width:400px){
  /* Sotto questa larghezza i quattro elementi in riga non ci stanno comodi.
     Si stringe la spaziatura, non il bersaglio. */
  .lang-v{padding:12px 8px;min-width:30px;letter-spacing:.04em}
  header.site .hdr-side{gap:8px}
}
/* la nav sta staccata dal marchio e vicina alle azioni: il gruppo si legge */
header.site nav{display:flex;gap:var(--s5);margin-left:auto;font-size:15px;font-weight:500;
  color:var(--ink2);align-items:center}
header.site nav a{color:var(--ink2);padding:4px 0;border-bottom:2px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}
/* Blog non ha ancora destinazione: lo dice sottovoce, non con una pillola
   tratteggiata piu' larga della voce che annota */
header.site nav a[aria-disabled="true"]{color:var(--ink3);cursor:default}
header.site nav a[aria-disabled="true"]:hover{color:var(--ink3)}
/* Il fumetto delle voci che non portano ancora da nessuna parte (il Blog).
   Compare al clic sotto la voce, resta un secondo e mezzo e se ne va. Prima
   c'era un'etichetta stampata di fianco, sempre presente, che allargava il
   menu per dire una cosa che serve solo a chi ci clicca. */
header.site nav [data-presto]{position:relative}
/* il bottone deve sembrare in tutto una voce di menu */
.nav-presto{font:inherit;font-size:15px;font-weight:500;color:var(--ink3);
  background:none;border:0;border-bottom:2px solid transparent;padding:4px 0;cursor:pointer}
.nav-presto:hover{color:var(--ink2)}
.presto{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--elev-1);
  pointer-events:none;z-index:30;animation:presto-in 220ms var(--ease) both}
/* la punta verso la voce, cosi' si capisce di chi sta parlando */
.presto::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);background:var(--ink)}
.presto--via{animation:presto-via 380ms var(--ease) both}
@keyframes presto-in{from{opacity:0;transform:translateX(-50%) translateY(-5px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes presto-via{from{opacity:1}to{opacity:0;transform:translateX(-50%) translateY(-4px)}}
@media (prefers-reduced-motion: reduce){
  .presto,.presto--via{animation:none}
}
/* nel pannello del menu sul telefono la voce e' larga tutta la riga: il
   fumetto sta accanto al testo invece che sotto, se no finisce sulla voce dopo */
@media(max-width:760px){
  .presto{left:auto;right:0;top:50%;transform:translateY(-50%);animation:none}
  .presto::before{display:none}
  .presto--via{opacity:0;transition:opacity 380ms var(--ease)}
}
.hdr-side{display:flex;align-items:center;gap:var(--s3)}
/* etichetta lunga su desktop, corta dove lo spazio non c'e' */
.cta-short{display:none}
.cta-hdr{background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:999px}
.cta-hdr:hover{background:var(--acc);color:var(--accInk)}

/* ---- piè di pagina ---- */
footer.site{border-top:1px solid var(--line);margin-top:40px}
/* spazio in fondo perche' la pillola di AIR Bot non copra gli ultimi link */
footer.site .wrap{padding-top:40px;padding-bottom:96px;display:grid;
  grid-template-columns:1fr auto;gap:32px;align-items:start;font-size:14px;color:var(--ink3)}
footer.site a{color:var(--ink3)}
/* Il marchio e' inline-flex dentro una colonna che stira: senza questo si
   allargava a tutta la colonna e finiva otticamente in mezzo alla pagina,
   staccato dalla riga della partita IVA che dovrebbe accompagnare. */
footer.site .logo{align-self:flex-start}
footer.site nav{display:grid;grid-template-columns:repeat(2,auto);gap:8px 32px;color:var(--ink2)}
footer.site nav a{color:var(--ink2)}

/* ---- il prototipo e' pensato per il desktop: qui sotto lo rendiamo
       almeno leggibile invece di lasciarlo sfondare in orizzontale ---- */
@media(max-width:1150px){ .tagline{display:none} }
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g-case{grid-template-columns:1fr}
  .split,.split-even,.split-wide{grid-template-columns:1fr;gap:36px}
  .h1{font-size:44px}
  .h2{font-size:34px}
}
/* ---- il capo della pagina non ci sta in una riga sotto ai 1030px ----
   Il menu a pannello non e' una cosa da telefono, e per mesi lo e' stato: le
   regole stavano dentro al blocco dei 760px, cioe' scattavano solo li'. Fra
   761 e 1030 restava in piedi la barra intera, marchio piu' sette voci piu'
   lo scambio di lingua piu' il tasto lungo, e non ci stava. Misurato pagina
   per pagina: a 761px la pagina sfondava di 270px in inglese e di 175 in
   italiano, e continuava a sfondare fino a 1021. Su un tablet in orizzontale
   o su un portatile con la finestra a meta' schermo tutto il sito scorreva di
   lato. Da qui in giu' il menu si chiude nel pannello e il tasto usa
   l'etichetta corta, che e' esattamente il motivo per cui esiste. */
@media(max-width:1030px){
  header.site .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:14px}
  .nav-toggle{display:inline-flex;order:3}
  .hdr-side{margin-left:auto;order:2;gap:var(--s2)}
  /* pannello a piena larghezza, voci da 44px, CTA sempre visibile in barra */
  header.site nav{order:4;width:100%;display:none;flex-direction:column;gap:0;
    margin-left:0;font-size:16px;border-top:1px solid var(--line);margin-top:var(--s2)}
  header.site[data-nav="open"] nav{display:flex}
  header.site nav a{padding:var(--s3) 0;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;min-height:44px}
  header.site nav a[aria-current="page"]{border-bottom-color:var(--line);
    color:var(--ink);font-weight:600}
  .cta-long{display:none}
  .cta-short{display:inline}
}

@media(max-width:760px){
  :root{--gutter:20px}
  /* una riga sola: marchio piu' piccolo, CTA compatta, menu a destra.
     Prima erano tre righe e 128px di altezza. */
  .logo{--S:36px}
  header.site .wrap{min-height:72px;gap:var(--s3);flex-wrap:wrap}
  .cta-hdr{font-size:13.5px;padding:10px 15px}
  .nav-toggle{padding:8px 12px}
  .band{padding-top:56px;padding-bottom:56px}
  .band-dark{padding:56px var(--gutter);border-radius:18px}
  section{padding:56px 0}
  .g2,.g3,.g4,.g-case,.grid-hair,.pair{grid-template-columns:1fr}
  .span2{grid-column:auto}
  /* Nella modale con la chat, qui le tre schede di contesto si incolonnano e
     mangiano tre schermate: chi ha premuto "provalo" e' venuto a provarla, non
     a leggerne la presentazione. Il titolo della modale e la prima riga della
     chat dicono gia' cosa fa. Su schermo largo restano. */
  .modal-body:has(> .chat) > .grid{display:none}
  .h1{font-size:34px}
  .h2{font-size:27px}
  .h3-big{font-size:24px}
  .lead{font-size:18px}
  .flow{flex-direction:column}
  .flow-sep{transform:rotate(90deg);align-self:flex-start;margin-left:var(--s5)}
  footer.site .wrap{grid-template-columns:1fr}
  /* bersaglio minimo per il dito: prima .btn-sm scendeva sotto i 40px */
  .btn-sm,.btn,.btn-o,.cta-hdr,header.site nav a{min-height:44px}
  .btn,.btn-o,.btn-sm{white-space:normal;text-align:center}
  header.site nav a{display:inline-flex;align-items:center}
}

/* Il movimento spiega uno stato, non decora. Chi ha chiesto meno movimento
   ottiene lo stesso risultato senza transizioni. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}

/* ============================================================
   NOTE LEGALI · prosa lunga, niente di piu'.
   Il testo viene dalle pagine scritte dal legale e non si tocca: qui si
   decide solo come si legge. Misura di riga corta, gerarchia fatta con la
   dimensione e non col colore, tabelle che scorrono invece di sfondare.
   ============================================================ */
.legale{margin-top:var(--s7);max-width:74ch;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.legale > * + *{margin-top:var(--s4)}
.legale h2{font-family:var(--sans-ui);font-size:21px;font-weight:700;line-height:1.25;
  color:var(--ink);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.legale h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legale h3{font-size:17px;font-weight:600;color:var(--ink);margin-top:var(--s6)}
.legale strong{color:var(--ink);font-weight:600}
.legale a{color:var(--acc-testo);text-decoration:underline;text-underline-offset:2px}
.legale ul,.legale ol{padding-left:22px}
.legale li + li{margin-top:var(--s2)}
.legale li::marker{color:var(--ink3)}
/* una tabella lunga su un telefono non si stringe: si fa scorrere */
.legale table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;
  font-size:15px;white-space:nowrap}
.legale th,.legale td{border:1px solid var(--line);padding:10px 14px;text-align:left;
  vertical-align:top}
.legale th{background:var(--bg2);color:var(--ink);font-weight:600}
@media(max-width:760px){
  .legale{font-size:16px}
  .legale h2{font-size:19px}
}

/* ============================================================
   BANNER DEL CONSENSO
   Sta in basso, non copre la pagina e non ha una X: una scelta va fatta,
   ma le due strade hanno lo stesso peso. "Rifiuta" non e' un link grigio
   in un angolo, e' un bottone come l'altro. Se non fosse cosi', il
   consenso non sarebbe libero e quindi non sarebbe valido.
   ============================================================ */
.ck{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:60;
  max-width:640px;margin:0 auto;background:var(--bg);color:var(--ink2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--elev-2);
  padding:var(--s5);display:flex;align-items:center;gap:var(--s5);
  animation:ck-su var(--t-slow) var(--ease)}
@keyframes ck-su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ck-testo{display:flex;flex-direction:column;gap:6px;min-width:0}
.ck-testo strong{color:var(--ink);font-size:15px;font-weight:700}
.ck-testo p{font-size:13.5px;line-height:1.5;margin:0;text-wrap:pretty}
/* il verde chiaro qui starebbe a 4.50 esatti su un testo di 12px: passa la
   soglia per un pelo, e un pelo su un carattere piccolo non basta */
.ck-link{font-size:13px;color:var(--ink2);text-decoration:underline;
  text-underline-offset:2px;align-self:flex-start}
.ck-tasti{display:flex;gap:var(--s2);flex:0 0 auto}
.ck-b{font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:11px 18px;border-radius:var(--r-pill);min-height:44px;
  border:1px solid var(--ink);background:var(--bg);color:var(--ink)}
.ck-b:hover{border-color:var(--acc);color:var(--acc-testo)}
.ck-b--si{background:var(--ink);color:var(--bg)}
.ck-b--si:hover{background:var(--acc);border-color:var(--acc);color:var(--accInk)}
@media(max-width:640px){
  /* sul telefono il banner sta sopra la zona contatto, che e' anch'essa in
     basso: se si sovrapponessero non si potrebbe premere ne' l'una ne' l'altro */
  .ck{flex-direction:column;align-items:stretch;gap:var(--s4);bottom:96px;
    left:12px;right:12px;padding:var(--s4)}
  .ck-tasti{display:grid;grid-template-columns:1fr 1fr}
  .ck-b{width:100%;text-align:center}
}
@media (prefers-reduced-motion: reduce){.ck{animation:none}}

/* ============================================================
   /prova · LA LANDING
   Stessi componenti del sito, disposti per una persona che ha trenta
   secondi e una domanda sola. Qui non si aggiunge grafica: si toglie
   quello che sul sito serve e qui rimanda la risposta.
   ============================================================ */
header.site--nuda .wrap{min-height:64px;justify-content:flex-start}
footer.site--nuda{margin-top:56px}
footer.site--nuda .wrap{display:flex;flex-direction:column;gap:10px;
  padding-top:28px;padding-bottom:32px;align-items:flex-start;
  font-size:13px;color:var(--ink2)}
.legali-min{display:flex;gap:16px;flex-wrap:wrap}
.legali-min a{color:var(--ink2)}

/* L'eroe della landing: il campo deve stare sopra la piega sul telefono,
   quindi qui il titolo e il testo hanno il fiato contato. Non e' una scelta
   di gusto: chi arriva da un messaggio scrolla solo se ha gia' visto qualcosa
   che vale la pena, e la cosa che vale la pena e' il campo. */
.prova-hero{padding-top:var(--s7)}
.prova-hero .h1{font-size:clamp(28px,5.2vw,46px);line-height:1.08}
.prova-hero .lead{max-width:60ch}
.prova-sotto{margin-top:var(--s7);color:var(--ink3)}
/* La vetrina ha bisogno di un contenitore con un'altezza vera. Le sue schede
   sono posizionate in assoluto una sopra l'altra, quindi non ne hanno una
   propria: sulla home gliela da' .hero-stage. Messa in una sezione qualunque
   restava alta zero e le schede finivano stampate sopra al testo sotto.
   Questo e' lo stesso mestiere di .hero-stage, senza la griglia dell'eroe. */
.prova-vetrina{margin-top:var(--s3);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
/* Le cinque schede si impilano nella stessa cella di griglia invece che una
   sopra l'altra in assoluto. Cambia una cosa sola ma importante: la cella
   prende l'altezza della scheda piu' alta, quindi il riquadro si misura da
   solo. Con il posizionamento assoluto le schede non avevano altezza propria
   e servivano numeri fissi, uno per larghezza di schermo: ne avevo gia'
   sbagliati due, e sarebbero tornati sbagliati al primo prodotto con un nome
   piu' lungo. L'immagine prende una proporzione invece di una frazione
   dell'altezza, perche' senza un'altezza definita "1.15fr" non ha piu' senso. */
.prova-vetrina .sc-slides{display:grid;flex:0 0 auto}
.prova-vetrina .sc-slide{position:relative;inset:auto;grid-area:1 / 1;
  grid-template-rows:auto auto}
.prova-vetrina .sc-img{aspect-ratio:4 / 3}
/* Su schermo largo il riquadro prenderebbe tutta la colonna e l'immagine con
   lui: un metro di anteprima per una cosa che qui e' un contorno. Si stringe:
   il protagonista e' il campo qui sopra. */
@media(min-width:761px){.prova-vetrina{max-width:520px}}

/* Stretta la vetrina, da Desktop restava mezza pagina bianca alla sua destra:
   la pagina sembrava finita li'. Quello spazio adesso dice cosa esce dalla
   generazione, che e' la domanda di chi sta ancora decidendo se incollare. */
.prova-esempi{display:grid;gap:var(--s5) var(--s6);align-items:start}
.prova-cosa{display:flex;flex-direction:column;gap:var(--s3)}
.prova-cosa .tiny{color:var(--ink3);max-width:52ch}
@media(min-width:901px){
  .prova-esempi{grid-template-columns:520px minmax(0,1fr)}
  /* La scheda d'esempio e' alta 746px, questa colonna 234: agganciata in alto
     lasciava mezzo metro di bianco sotto e la sezione sembrava interrotta a
     meta'. Centrata sta in equilibrio con la scheda accanto, e le righe
     respirano invece di stare appiccicate in cima. */
  .prova-esempi{align-items:center}
  .prova-cosa{gap:var(--s4);max-width:46ch}
  .prova-cosa .ticks{gap:var(--s3)}
  .prova-cosa .ticks li{font-size:16px}
  /* La riga della demo stirata su 1136px metteva mezzo metro fra il campo e
     il bottone: si incollava a sinistra e si cercava "Genera" dall'altra
     parte dello schermo. Larghezza contata, cosi' stanno vicini. Si stringe
     la riga, non la scheda che la contiene: dentro alla stessa scheda esce
     poi la scheda generata, e quella la larghezza la vuole tutta. */
  .prova-hero .demo-in,
  .prova-hero .demo-card > .tiny{max-width:880px}
}

@media(max-width:760px){
  .prova-hero{padding-top:var(--s5)}
  /* Ogni pixel qui e' pixel che il campo guadagna sulla piega. */
  .prova-hero .h1{font-size:27px;line-height:1.12}
  .prova-hero .lead{font-size:15.5px;line-height:1.45}
  .prova-hero .stack{gap:10px!important}
  .prova-hero .demo-card{margin-top:14px!important;padding:16px}
  .prova-hero .demo-card .tiny{margin-top:2px}
  /* L'anteprima delle schede d'esempio non deve competere con il campo per
     lo spazio sopra la piega: si vede scrollando, che e' il suo mestiere. */
  .prova-sotto{margin-top:var(--s6)}
}