/* Foglio di stile del sito KLS.

   Fino al 20/09/2026 questo CSS stava dentro <style> in index.html. E' uscito
   nel lotto 3 della revisione perche' la CSP di produzione non ammette
   'unsafe-inline' su style-src (KLS-020): con il CSS in un file esterno la
   direttiva resta 'self' e non va ricalcolato nessun hash a ogni modifica.

   Le @font-face stanno qui e non in un foglio a parte: erano in
   assets/fonts/fonts.css, che era il secondo foglio bloccante della pagina.
   Un foglio solo invece di due e' quanto si puo' fare senza rimettere il CSS
   inline (KLS-038). Le famiglie dichiarate sono le tre che la pagina chiede
   davvero, misurate sui tre motori il 20/09: le altre diciassette non sono mai
   state richieste e i loro file sono stati tolti (KLS-040). */

@font-face { font-family: "Anybody Width"; font-style: normal; font-stretch: 50% 150%; font-display: swap; src: url("fonts/anybody-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); }

:root{
  --bg:#F4EEE3; --ink:#1C1815; --mute:#5C544B; --rule:rgba(28,24,21,.18);
  --acc:#A93F17; --acc2:#F8E2D7; --acc3:#FFF3EA; --paper:#fff; --dark:#1E1A17;
  --card-ink:#1C1815; --card-mute:#5C544B; --card-line:#E6E0D6;
  --head:"Anybody Width","Anybody","Familjen Grotesk",system-ui,sans-serif;
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --gut:clamp(20px,5vw,72px);
  --fascia-h:30px;
}
body[data-theme="crema"] {--bg:#F4EEE3; --ink:#1C1815; --mute:#5C544B; --rule:rgba(28,24,21,.18)}
body[data-theme="nero"]  {--bg:#1E1A17; --ink:#F1EBE0; --mute:#B9B0A4; --rule:rgba(241,235,224,.18)}
body[data-theme="bianco"]{--bg:#FFFFFF; --ink:#1C1815; --mute:#5C544B; --rule:rgba(28,24,21,.14)}
body[data-theme="blu"]   {--bg:#16305C; --ink:#EEF1F7; --mute:#B7C3DA; --rule:rgba(238,241,247,.2)}
body[data-theme="rosso"] {--bg:#A93F17; --ink:#FFF3EA; --mute:#F8E2D7; --rule:rgba(255,243,234,.25)}
body{--mark:var(--acc)}
body[data-theme="rosso"],body[data-theme="blu"]{--mark:var(--ink)}
body:not(.bozza){--fascia-h:0px}
body:not(.bozza) .fascia{display:none}
[hidden]{display:none!important}

/* Testo per i soli lettori di schermo: nessun ingombro e nessuna resa visiva. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Salto al contenuto: sta fuori dallo schermo finche' non riceve il focus da tastiera. */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:var(--gut);top:calc(var(--fascia-h) + 10px);background:var(--ink);color:var(--bg);font:500 14px var(--sans);text-decoration:none;padding:10px 18px;border-radius:999px}

/* Tre attributi style="" tolti dal markup nel lotto 3: una CSP con hash non
   copre gli stili inline allo stesso modo di quelli in un foglio (KLS-021).
   I valori sono gli stessi che erano scritti in pagina, non e' cambiato
   nulla a vedersi. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.mb18{margin-bottom:18px}
.mb20{margin-bottom:20px}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--fascia-h);background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17.5px;line-height:1.5;font-synthesis:none;transition:background-color .7s ease,color .7s ease}
h1,h2,h3{font-family:var(--head);font-weight:400;margin:0;letter-spacing:-.01em;font-stretch:100%}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

/* Indicatore di focus da tastiera. Il default del browser e' nero fisso e non
   segue il tema: sui fondi scuri scende sotto 1.5:1 e sparisce. Qui il contorno
   prende il colore del testo del tema, che per costruzione e' il piu' contrastato
   rispetto allo sfondo. Due eccezioni dove lo sfondo non segue il tema: il
   riquadro della demo, sempre scuro, e la pastiglia bianca della hero. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.demo :focus-visible{outline-color:#F1EBE0}
.chip:focus-visible{outline-color:#1C1815}
/* Il contenitore principale riceve il focus solo dal salto al contenuto: non e'
   un comando, quindi non gli serve un indicatore e un contorno sull'intera
   pagina sarebbe solo rumore. */
main:focus{outline:none}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.wrap{padding:0 var(--gut)}

.fascia{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--fascia-h);background:#1C1815;color:#fff;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:16px}
.fascia span:last-child{opacity:.6}

header{position:sticky;top:var(--fascia-h);z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .7s ease}
.nav{display:flex;align-items:center;height:68px;gap:26px;border-bottom:1px solid var(--rule)}
.brand{font:400 24px/1 var(--head);font-stretch:125%;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.31em}
.brand svg{display:block;height:1.06em;width:.83em;color:var(--mark);transition:color .7s ease}
.brand span{padding-top:.05em}
.nav ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:22px}
.nav a{text-decoration:none;color:var(--ink);font-size:15px}
/* WCAG 2.5.8: da riga di testo i link del menu sono alti 18 px, sotto la soglia
   di 24. Il bersaglio si allarga con uno pseudo-elemento trasparente, che sta
   fuori dal flusso e non sposta niente. Il padding, provato prima, portava il
   riquadro a 30.5 px ma alzava i glifi di 1.1 px: misurato e scartato. */
.nav ul a{position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.lang{display:flex;gap:2px;font:500 12px var(--mono)}
.lang span{padding:5px 8px;border-radius:4px}
.lang .on{background:var(--ink);color:var(--bg);transition:background-color .7s ease,color .7s ease}
.lang .off{color:var(--mute);cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#fff;font:600 16px var(--sans);padding:14px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background-color .15s}
.btn:hover{background:#8F3312;transform:translateY(-1px)}
.btn.ink{background:var(--ink);color:var(--bg);transition:background-color .7s ease,color .7s ease,transform .15s}
.btn.ink:hover{transform:translateY(-1px)}
.btn.line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--bg)}
.nav .btn{padding:10px 16px;font-size:14px}

/* hero */
.hero{position:relative;padding:70px var(--gut) 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:calc(100vh - 100px);overflow:hidden}
.hero .copy{position:relative;z-index:2}
.hero .pill{margin-bottom:26px;display:inline-flex;align-items:center;gap:10px;background:var(--acc3);color:var(--acc);padding:7px 12px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hero h1{font-size:clamp(42px,6.2vw,96px);line-height:.94;max-width:12ch}
.hero h1 span{color:var(--acc)}
.rot{margin-top:22px;position:relative}
.rot-stack{position:relative;font-family:var(--head);font-size:clamp(48px,5.8vw,92px);line-height:1;height:1.05em;color:var(--acc)}
.rot-word{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;font-stretch:60%;transition:opacity .55s ease,font-stretch .7s cubic-bezier(.2,.7,.2,1)}
.rot-word.is-in{opacity:1;font-stretch:100%}
/* Comando che ferma le parole che cambiano. Il movimento continuo del hero e'
   voluto, ma WCAG 2.2.2 chiede che si possa fermare qualcosa che si muove da
   solo per piu' di cinque secondi. Il comando sta fuori dallo schermo finche'
   non riceve il focus da tastiera, come il salto al contenuto: cosi' esiste
   davvero senza aggiungere un elemento visibile al hero. Quando compare resta
   fuori dal flusso, quindi non sposta niente. */
.rot-stop{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;border:0;padding:0;background:none}
.rot-stop:focus{left:0;top:100%;width:auto;height:auto;overflow:visible;z-index:6;background:var(--ink);color:var(--bg);font:500 13px var(--sans);border-radius:999px;padding:8px 14px;white-space:nowrap}
.hero .sub{font-size:clamp(18px,1.4vw,22px);color:var(--mute);max-width:46ch;margin:30px 0 34px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.scene{position:relative;height:560px;perspective:1400px;z-index:1}
.stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.sheet{position:absolute;width:300px;min-height:200px;background:var(--paper);border:1px solid #D5CDBF;border-radius:10px;padding:18px 20px;box-shadow:0 30px 60px -30px rgba(28,24,21,.35);font-size:14px;color:var(--card-ink);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transform-style:preserve-3d}
.sheet .h{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--card-mute);margin-bottom:10px;display:flex;justify-content:space-between}
.sheet .h b{color:var(--acc);font-weight:500}
.sheet p{line-height:1.45}
.s1{left:6%;top:6%;transform:translateZ(60px) rotateX(8deg) rotateY(-12deg) rotateZ(-6deg)}
.s2{left:38%;top:28%;transform:translateZ(0) rotateX(-6deg) rotateY(10deg) rotateZ(4deg);background:#FCF6F0}
.s3{left:14%;top:52%;transform:translateZ(-60px) rotateX(10deg) rotateY(6deg) rotateZ(7deg)}
.table-card{position:absolute;left:8%;top:12%;width:84%;background:var(--dark);color:#F1EBE0;border-radius:12px;padding:22px 24px;opacity:0;transform:translateZ(120px) translateY(40px) scale(.96);transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s,opacity .6s .35s;pointer-events:none}
.table-card .h{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc2);margin-bottom:14px;display:flex;justify-content:space-between}
.table-card table{width:100%;border-collapse:collapse;font-size:13.5px}
.table-card td{padding:8px 0;border-top:1px solid rgba(255,255,255,.12)}
.table-card td:first-child{font-family:var(--mono);font-size:12px;color:var(--acc2)}
.table-card td:last-child{text-align:right;font-family:var(--mono);font-size:12px}
.table-card .warn td:last-child{color:var(--acc2)}
.scene.ordered .s1{transform:translateZ(0) translate(60%,90%) rotate(-2deg) scale(.86);opacity:.5}
.scene.ordered .s2{transform:translateZ(-10px) translate(10%,60%) rotate(1.5deg) scale(.86);opacity:.5}
.scene.ordered .s3{transform:translateZ(-20px) translate(80%,20%) rotate(3deg) scale(.86);opacity:.5}
.scene.ordered .table-card{opacity:1;transform:translateZ(120px) translateY(0) scale(1)}
.scene-ctl{position:absolute;left:0;bottom:0;display:flex;gap:10px;align-items:center;z-index:5}
.scene-ctl .mono{margin:0}
.chip{font:500 13px var(--sans);background:var(--paper);color:var(--card-ink);border:1.5px solid var(--card-ink);border-radius:999px;padding:9px 14px;cursor:pointer}
.chip:hover{background:var(--card-ink);color:#fff}

/* sezioni: il colore lo da' il body, la sezione e' trasparente */
section{padding:110px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:64px}
.sec-head h2{font-size:clamp(36px,4.8vw,72px);line-height:.98}
.sec-head p{font-size:19px;max-width:48ch;justify-self:end;align-self:end;color:var(--mute)}
/* L'etichetta sta su una riga sua e il margine negativo riavvicina il titolo:
   il saldo col gap della griglia deve restare +10px. Se si cambia il gap in una
   media query va cambiato anche questo margine, altrimenti il saldo diventa
   negativo e l'etichetta finisce sopra il titolo. E' successo: KLS-056. */
.sec-head .mono{grid-column:1/-1;margin-bottom:-30px}

/* titoli che si compongono parola per parola, dal 05 */
.w{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .split .w{opacity:0;font-stretch:60%;transition:opacity .6s ease,font-stretch .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  .js .split.is-on .w{opacity:1;font-stretch:100%}
}

/* famiglie: schede bianche fisse sulla banda rossa */
.fam{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;z-index:2}
.f{background:var(--paper);color:var(--card-ink);border-radius:14px;padding:30px 28px 28px;box-shadow:0 30px 60px -40px rgba(28,24,21,.45);transition:transform .2s}
.f:hover{transform:translateY(-4px)}
.f .n{font:400 44px/1 var(--head);font-stretch:125%;color:var(--acc)}
.f h3{font-size:24px;line-height:1.1;margin:18px 0 10px;font-stretch:96%}
.f .sub{font-size:13.5px;color:var(--acc);font-weight:600;margin-bottom:8px}
.f .prob{font-size:15px;color:var(--card-mute)}
.f ul{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--card-line);display:grid;gap:8px}
.f li{font-size:14.5px;padding-left:16px;position:relative}
.f li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.f1{grid-column:span 3}.f2{grid-column:span 3}.f3{grid-column:span 3}.f4{grid-column:span 3}
.f1 .tag{display:inline-block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--acc3);border-radius:999px;padding:4px 10px;margin-left:12px;vertical-align:middle}

/* demo: riquadro scuro fisso, la sezione sta sul nero */
.demo-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.demo-head h2{font-size:clamp(32px,4.2vw,60px);line-height:1}
.demo-head p{color:var(--mute);font-size:18px;max-width:46ch;justify-self:end}
.demo-list{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.demo-list a,.demo-list span{text-decoration:none;color:var(--ink);font:500 14px var(--sans);border:1.5px solid var(--rule);border-radius:999px;padding:9px 16px}
.demo-list a.on{background:var(--acc);border-color:var(--acc);color:#fff}
.demo-list .soon{color:var(--mute);border-style:dashed;cursor:not-allowed}
.demo{background:#2A2521;color:#F1EBE0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.demo-tabs{display:flex;gap:6px;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-tab{font:500 13px var(--sans);color:#C9C0B2;background:transparent;border:1px solid transparent;border-radius:999px;padding:8px 14px;cursor:pointer}
.demo-tab.is-active{background:#F1EBE0;color:#1C1815}
.demo-grid{display:grid;grid-template-columns:5fr 7fr}
.demo-col{padding:24px 26px;min-width:0}
.demo-col-in{border-right:1px solid rgba(255,255,255,.08)}
.demo-label{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#B9B0A4;margin-bottom:14px}
.demo-in{font:400 15.5px/1.6 var(--sans);white-space:pre-wrap;margin:0;background:#1E1A17;border-radius:10px;padding:18px;min-height:220px;color:#F1EBE0}
.demo-meta{display:flex;gap:22px;font-size:13.5px;color:#C9C0B2;margin-bottom:14px}
.demo-meta b{color:#fff;margin-right:6px;font-weight:500}
.demo-table{width:100%;border-collapse:collapse;font-size:14.5px}
.demo-table th{text-align:left;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#B9B0A4;padding:0 10px 10px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.demo-table td{padding:12px 10px 12px 0;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.demo-row{animation:rowin .45s both;animation-delay:calc(var(--i) * 90ms)}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demo-cod{font:500 12.5px var(--mono);color:var(--acc2);white-space:nowrap}
.demo-qta{font-family:var(--mono);font-size:13px;white-space:nowrap}
.demo-note{font-size:12.5px;color:var(--acc2);margin-top:5px}
.demo-badge{font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.demo-conf-media .demo-badge{background:var(--acc);color:#fff}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;font-size:13.5px;color:#C9C0B2}
.demo-confirm{font:600 14px var(--sans);background:var(--acc);color:#fff;border:0;border-radius:999px;padding:11px 16px;cursor:pointer}
.demo-done{color:var(--acc2)}
@media (prefers-reduced-motion:reduce){.demo-row{animation:none}}

/* metodo: numeri enormi */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.s{border-top:3px solid var(--ink);padding-top:22px;transition:border-color .7s ease}
.s .n{font:400 clamp(60px,7vw,110px)/1 var(--head);font-stretch:130%;color:var(--acc)}
@media (prefers-reduced-motion:no-preference){
  .js .s .n{opacity:0;font-stretch:50%;transform:translateY(24px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1),font-stretch .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  .js .s.in .n{opacity:1;font-stretch:130%;transform:none}
  .s:nth-child(1) .n{--d:0ms}.s:nth-child(2) .n{--d:140ms}.s:nth-child(3) .n{--d:280ms}.s:nth-child(4) .n{--d:420ms}
}
.s h3{font-size:24px;margin:18px 0 10px;font-stretch:96%}
.s p{color:var(--mute);font-size:15.5px}
.s:nth-child(even){transform:translateY(40px)}

/* lavori */
.works{display:grid;grid-template-columns:1fr;gap:0}
.w-row{display:grid;grid-template-columns:80px 1.2fr 1fr 140px;gap:24px;padding:28px 0;border-top:1px solid var(--rule);align-items:baseline}
.w-row:last-child{border-bottom:1px solid var(--rule)}
.w-row .n{font:400 28px var(--head);font-stretch:125%;color:var(--acc)}
.w-row h3{font-size:clamp(22px,2.2vw,32px);line-height:1.08;font-stretch:96%}
.w-row p{color:var(--mute);font-size:15.5px}
.w-row .st{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:right;color:var(--ink)}
.w-row .st i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px}
.w-row .st.eval i{background:var(--acc2);border:1px solid var(--acc)}

/* appunti e domande: stanno sul blu, seguono il tema */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.note{background:rgba(255,255,255,.08);border:1px solid var(--rule);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:14px}
.note .mono{color:var(--mute)}
.note h3{font-size:24px;line-height:1.1;font-stretch:96%}
.note p{color:var(--mute);font-size:15.5px}
.note a{margin-top:auto;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule);align-self:flex-start;padding-bottom:3px}
.faq{margin-top:96px}
.faq .sec-head{margin-bottom:40px}
/* Il titolo delle domande e' un h3 perche' il blocco sta dentro la sezione
   Appunti: l'albero dei titoli segue l'annidamento del DOM. La resa resta
   quella che aveva da h2, qui sotto ci sono le stesse due proprieta'. */
.faq .sec-head h3{font-size:clamp(30px,3.6vw,52px);line-height:.98}
.q{display:grid;grid-template-columns:1fr 1.2fr;gap:24px 48px;padding:24px 0;border-top:1px solid var(--rule)}
.q:last-child{border-bottom:1px solid var(--rule)}
.q h3{font-size:clamp(20px,2vw,28px);line-height:1.1;font-stretch:96%}
.q p{color:var(--mute);font-size:16px;max-width:56ch}

/* chi */
.who{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center}
.photo{aspect-ratio:4/5;background:var(--acc2);border-radius:16px;display:grid;place-items:center;color:var(--acc);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;max-width:420px}
.who p{font-size:21px;line-height:1.5}
.who .name{margin-top:26px;font:400 22px var(--head);font-stretch:110%}
.who .name span{display:block;font:500 12px var(--mono);color:var(--mute);margin-top:4px;letter-spacing:.05em}

/* contatto */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.contact h2{font-size:clamp(38px,5vw,80px);line-height:.96}
.contact p{margin-top:22px;font-size:19px;color:var(--mute);max-width:40ch}
.contact .ways{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:24px}
.contact a.mail{display:inline-block;color:var(--ink);font:500 15px var(--mono);text-decoration:none;border-bottom:2px solid var(--acc)}
.cal{height:560px;padding:24px;border-radius:16px;background:rgba(255,255,255,.04);border:1px dashed var(--rule);display:grid;place-items:center;text-align:center;color:var(--mute);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--acc)}

footer{padding:36px 0 60px;font-size:14px;color:var(--mute)}
footer .row{display:flex;gap:26px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--rule);padding-top:26px}
footer a{text-decoration:none;color:var(--mute)}
footer .brand{font-size:18px}
footer .lang{margin-left:auto}

/* Pagine di testo: privacy.html e note-legali.html, nate in F5 il 21/09/2026.
   Stessi token del sito, nessun colore e nessun carattere nuovo. Non caricano
   JavaScript: non hanno demo, blocchi che si rivelano ne' parola cinetica. */
.doc{max-width:760px;margin:0 auto;padding:54px 0 40px}
.doc h1{font-size:clamp(38px,6vw,64px);line-height:1;font-stretch:112%;margin:6px 0 0}
.doc h2{font-size:clamp(22px,3vw,30px);line-height:1.15;font-stretch:104%;margin:48px 0 14px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc strong{font-weight:600}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:3px}
.doc .agg{color:var(--mute);margin:14px 0 34px}
.doc .mono:not(.agg){margin:0}
.doc .mono a{color:var(--mute)}
/* Nomi di dominio e indirizzi dentro <code>: una sola parola lunga senza spazi.
   Chromium la spezza da solo, WebKit no, e a 320 px sbordava di 5 px sulla
   privacy (trovato il 21/09/2026 con l'arrivo di Web Analytics). La regola
   vale solo qui dentro e non tocca la resa altrove. */
.doc code{font-family:var(--mono,ui-monospace,monospace);font-size:.92em;overflow-wrap:anywhere;word-break:break-word}

/* Il ritratto di "chi c'e' dietro" non esiste ancora e il suo riquadro sta
   commentato nel markup: senza quella colonna il testo resta leggibile invece
   di allargarsi per tutta la pagina. */
.who.solo-testo{grid-template-columns:minmax(0,760px)}

@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
  .js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,header,.lang .on,.btn.ink,.brand svg{transition:none}
  .scene .table-card{opacity:1;transform:none}
  .scene .sheet{opacity:.5}
  .scene-ctl{display:none}
  .rot-word{transition:none}
}
@media (max-width:1100px){
  .fam{grid-template-columns:repeat(2,1fr)}
  .f1,.f2,.f3,.f4{grid-column:span 1}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav ul{display:none}
  .fascia span:last-child{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:48px}
  .hero h1{font-size:12vw;max-width:none}
  .rot-stack{font-size:13vw}
  .scene{height:460px}
  .sheet{width:230px;font-size:13px}
  .sec-head,.demo-head,.who,.contact{grid-template-columns:1fr;gap:20px}
  /* Il gap fra le righe della griglia scende da 40 a 20 px, ma il margine
     negativo dell'etichetta resta -30: il saldo diventa -10 e l'etichetta
     finisce sopra il titolo. E' KLS-056.
     Si restituiscono i 20 px al titolo invece di ridurre il margine negativo:
     ridurlo apriva lo spazio ma alzava l'etichetta di 12 px, mentre cosi'
     l'etichetta resta esattamente dov'era e si muove solo il titolo. La
     costruzione torna identica a quella sopra gli 860 px: etichetta a 12 px
     dall'inizio della griglia, titolo a 40. Misurato prima di scegliere. */
  .sec-head h2,.sec-head h3{margin-top:20px}
  .sec-head p,.demo-head p{justify-self:start}
  .fam{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}
  .demo-col-in{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .steps{grid-template-columns:1fr}
  .s:nth-child(even){transform:none}
  .w-row{grid-template-columns:1fr;gap:6px}
  .w-row .st{text-align:left}
  .notes{grid-template-columns:1fr}
  .q{grid-template-columns:1fr;gap:8px}
  .faq{margin-top:64px}
  .cal{height:640px}
  section{padding:76px 0}
}
/* Su schermo stretto la tabella della demo non entra: codice, quantita' e stato
   non si spezzano e trascinano fuori anche il riquadro "Come arriva". Sotto i
   560px ogni riga diventa una scheda impilata. Sopra, la resa non cambia. */
@media (max-width:560px){
  .demo-tabs{flex-wrap:wrap}
  .demo-col{padding:20px 18px}
  .demo-meta{flex-wrap:wrap;gap:6px 22px}
  .demo-table{position:relative}
  .demo-table,.demo-table tbody{display:block}
  .demo-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .demo-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .demo-table td{display:block;padding:0;border:0}
  .demo-row td:nth-child(1){grid-area:1/1}
  .demo-row td:nth-child(4){grid-area:1/2}
  .demo-row td:nth-child(2){grid-area:2/1/auto/-1}
  .demo-row td:nth-child(3){grid-area:3/1/auto/-1}
  .demo-foot{flex-wrap:wrap}
}