/* ==========================================================================
   Roomve Lab — roomve.it
   Il sito è un fascicolo: ogni sezione è un foglio, e ogni foglio ha due lati.
   Lato A = carta chiara, lato B = retro scuro (come il biglietto da visita).
   File scritto a mano: non c'è nessun passaggio di compilazione.
   ========================================================================== */

/* ---------- Caratteri (tutti in locale) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/jetbrains-mono-500.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/jetbrains-mono-700.woff2") format("woff2")}
/* Riserva con le stesse metriche di Poppins: il testo non salta quando arriva il carattere vero. */
@font-face{font-family:"Poppins Riserva";src:local("Arial");size-adjust:112.16%;ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%}

:root{
  --sans:"Poppins","Poppins Riserva",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --top-h:56px;
  --xs:.6875rem; /* 11 px: sotto questa misura non si scrive niente */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- I due lati ----------
   Ogni blocco dichiara un tono: .tone-a oppure .tone-b.
   Sul lato A, tone-a è carta e tone-b è inchiostro; sul lato B si scambiano.
   Due interruttori (--isP = carta, --isI = inchiostro) valgono «initial» o uno spazio:
   var(--isP, X) restituisce X solo quando il blocco è carta. Così ogni colore è scritto una volta sola. */
.tone-a{--isP:initial;--isI: ;color-scheme:light}
.tone-b{--isP: ;--isI:initial;color-scheme:dark}
:root[data-side="b"] .tone-a{--isP: ;--isI:initial;color-scheme:dark}
:root[data-side="b"] .tone-b{--isP:initial;--isI: ;color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-side]) .tone-a{--isP: ;--isI:initial;color-scheme:dark}
  :root:not([data-side]) .tone-b{--isP:initial;--isI: ;color-scheme:light}
}
html{background:#f3f1f8}
html[data-side="b"]{background:#14111f}
@media (prefers-color-scheme:dark){html:not([data-side]){background:#14111f}}

.tone-a,.tone-b{
  --bg:      var(--isP,#f3f1f8) var(--isI,#14111f);
  --bg-2:    var(--isP,#faf9fd) var(--isI,#1b1729);
  --bg-3:    var(--isP,#e9e4f4) var(--isI,#251f38);
  --glass:   var(--isP,rgba(243,241,248,.9)) var(--isI,rgba(20,17,31,.88));
  --fg:      var(--isP,#14111f) var(--isI,#f3f1f8);
  --fg-2:    var(--isP,#565069) var(--isI,#aea7c8);
  --accent:  var(--isP,#7e22ce) var(--isI,#d2b0ff);
  --accent-2:var(--isP,#a21caf) var(--isI,#f0abfc);
  --vivid:   var(--isP,#8b2be2) var(--isI,#b68cff);
  --on-vivid:var(--isP,#ffffff) var(--isI,#14111f);
  --bad:     var(--isP,#b4124e) var(--isI,#ff9dbf);
  --hair:    var(--isP,rgba(20,17,31,.16)) var(--isI,rgba(243,241,248,.17));
  --hair-2:  var(--isP,rgba(20,17,31,.34)) var(--isI,rgba(243,241,248,.36));
  --grid:    var(--isP,rgba(76,29,149,.065)) var(--isI,rgba(182,140,255,.075));
  /* il gradiente del marchio è riservato al titolo e al logo */
  --grad:    var(--isP,linear-gradient(115deg,#c026d3 0%,#a21caf 40%,#4c1d95 100%)) var(--isI,linear-gradient(115deg,#f0d4ff 0%,#b68cff 100%));
  /* un solo linguaggio per i pulsanti: inchiostro pieno sulla carta, lilla pieno sull'inchiostro */
  --btn-bg:  var(--isP,#14111f) var(--isI,#d2b0ff);
  --btn-fg:  var(--isP,#f3f1f8) var(--isI,#14111f);
  --btn-bg-h:var(--isP,#7e22ce) var(--isI,#f3e3ff);
  --btn-fg-h:var(--isP,#ffffff) var(--isI,#14111f);
  --shadow:  var(--isP,0 24px 60px -28px rgba(76,29,149,.45),0 2px 0 rgba(20,17,31,.9)) var(--isI,0 24px 60px -24px rgba(0,0,0,.8),0 2px 0 rgba(182,140,255,.5));
  /* la veduta sullo schermo: di giorno sulla carta, di notte sull'inchiostro */
  --px-s1:   var(--isP,#f7f1ff) var(--isI,#150c33);
  --px-s2:   var(--isP,#f0e6fd) var(--isI,#1e1049);
  --px-s3:   var(--isP,#e8d9fb) var(--isI,#2b1566);
  --px-s4:   var(--isP,#e1cbf8) var(--isI,#3f1c8c);
  --px-s5:   var(--isP,#dfbdf4) var(--isI,#5b24ad);
  --px-s6:   var(--isP,#e6b3ef) var(--isI,#8a2fc4);
  --px-s7:   var(--isP,#f0b4ea) var(--isI,#c04bd6);
  --px-s8:   var(--isP,#f8cdee) var(--isI,#f29be6);
  --px-sun:  var(--isP,#c026d3) var(--isI,#f0d4ff);
  --px-sun-2:var(--isP,#d946ef) var(--isI,#d2adff);
  --px-star: var(--isP,transparent) var(--isI,#f0d4ff);
  --px-far:  var(--isP,#a98de3) var(--isI,#321880);
  --px-far-hi:var(--isP,#cdbcf2) var(--isI,#6a3fc4);
  --px-hill: var(--isP,#8f6dd6) var(--isI,#241060);
  --px-mid:  var(--isP,#5b2bb0) var(--isI,#130836);
  --px-win:  var(--isP,#f7f1ff) var(--isI,#ffd28a);
  --px-near: var(--isP,#231250) var(--isI,#0b061d);
  --px-edge: var(--isP,#8b2be2) var(--isI,#7c3aed);
  --px-grass:var(--isP,#6d28d9) var(--isI,#a855f7);
  --px-speck:var(--isP,#3b2180) var(--isI,#2a1466);
  --px-hud:  var(--isP,#a21caf) var(--isI,#e879f9);
  --px-hat:  var(--isP,#c026d3) var(--isI,#e879f9);
  --px-skin: var(--isP,#14111f) var(--isI,#f0d4ff);
  --px-body: var(--isP,#14111f) var(--isI,#b68cff);
  /* il banco prova usa gli stessi inchiostri */
  --bn-0:    var(--isP,#ebe4f7) var(--isI,#0d0a16);
  --bn-1:    var(--isP,#7e22ce) var(--isI,#f0d4ff);
  --bn-2:    var(--isP,#4c1d95) var(--isI,#b68cff);
  --bn-3:    var(--isP,#c026d3) var(--isI,#e879f9);
  --bn-4:    var(--isP,#14111f) var(--isI,#7c3aed);
  --bn-5:    var(--isP,#c9badf) var(--isI,#2a1f4a);
  background-color:var(--bg);
  color:var(--fg);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2.5px}
b,strong{font-weight:600}
i{font-style:normal}
dfn{font-style:normal}
sup{font-size:.7em;line-height:0;color:var(--accent)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:2px}
::selection{background:#a21caf;color:#fff}
[hidden]{display:none!important}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-120px;z-index:100;padding:12px 18px;background:#a21caf;color:#fff;font-weight:600;border-radius:6px;transition:top .15s}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1288px;margin-inline:auto;padding-inline:clamp(16px,4.4vw,56px)}

/* Il marchio è disegnato due volte, una per tono: si vede quella giusta. */
.on-p{display:var(--isP,inline) var(--isI,none)}
.on-i{display:var(--isP,none) var(--isI,inline)}

/* Etichette da modulo: monospazio, maiuscolo, spaziato */
.label,.kicker,.sheet-head,.docid,.form-title,.sign-top,.foot-corners,.part-top,.footnote,.notice,.fields dt,.id-fields dt,.area-f span,.chan-k,.chan-s,.spec th,.trial-t thead th,.nav-list a,.flip,.sign-legend,.cap,.leg-note{font-family:var(--mono)}
.label{font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.label-strong{color:var(--fg);font-weight:700}
.kicker{font-size:.78rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.kicker i{margin-inline:.35em}
@media (max-width:479px){.kicker{font-size:.72rem;letter-spacing:.12em}.kicker i{margin-inline:.1em}}
.kn{display:inline-block;margin-right:.7em;padding:.15em .5em .1em;background:var(--fg);color:var(--bg);font-weight:700;letter-spacing:.08em;border-radius:3px}

h1,h2,h3,h4{font-weight:700;line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
h2,.h2{font-size:clamp(2rem,1.15rem + 3.4vw,3.6rem)}
h3,h4{font-size:1.35rem;letter-spacing:-.015em;line-height:1.15}
.lede{font-size:clamp(1.12rem,1rem + .55vw,1.4rem);line-height:1.45;color:var(--fg-2);max-width:34em;text-wrap:pretty}
p{text-wrap:pretty}

/* ---------- Segni ricorrenti ---------- */
.barcode{width:64px;height:18px;color:var(--fg);flex:none}
.rule{border:0;height:3px;background:var(--fg);margin:clamp(14px,2vw,24px) 0 clamp(24px,3.2vw,44px)}

.meter{display:inline-flex;gap:4px;vertical-align:middle}
.meter i{width:14px;height:14px;border:1.5px solid var(--vivid);background:transparent}
.meter i.on{background:var(--vivid)}
.meter-4 i{width:34px;height:14px}

.box{display:inline-block;flex:none;width:18px;height:18px;border:1.5px solid var(--fg);border-radius:2px;vertical-align:-.2em;margin-right:.6em;position:relative}
.on>.box::before,.box.on::before,input:checked+.box::before,.on>.box::after,.box.on::after,input:checked+.box::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2.5px;margin:-1.25px 0 0 -11px;background:var(--accent-2);border-radius:2px;transform:rotate(45deg)}
.on>.box::after,.box.on::after,input:checked+.box::after{transform:rotate(-45deg)}

/* Pittogrammi: pieni se la cosa c'è, sbarrati se non è prevista */
.picto{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:var(--fg);color:var(--bg)}
.picto svg{width:68%;height:68%}
.off>.picto{background:transparent;color:var(--fg-2);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.off>.picto svg{opacity:.7}
.off>.picto::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top right,transparent calc(50% - 1.1px),var(--accent-2) calc(50% - 1.1px),var(--accent-2) calc(50% + 1.1px),transparent calc(50% + 1.1px))}
.cap{font-size:var(--xs);font-weight:500;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
.off>.cap{color:var(--fg-2);text-decoration:line-through;text-decoration-color:var(--accent-2);text-decoration-thickness:1.5px}

.stamp{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:9px 16px 8px;border:2.5px solid currentColor;border-radius:7px;outline:1.5px solid currentColor;outline-offset:3px;color:var(--accent-2);font:700 .82rem/1.25 var(--mono);letter-spacing:.2em;text-transform:uppercase;transform:rotate(-7deg);white-space:nowrap}

/* Pulsanti: monospazio maiuscolo come ogni altra etichetta del fascicolo */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:48px;padding:.55em 1.2em;border:1.5px solid var(--fg);border-radius:8px;font:700 .8125rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;text-align:center;color:var(--fg);background:transparent;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s,transform .16s var(--ease),box-shadow .16s}
.btn .ic{flex:none;transition:transform .18s var(--ease)}
.btn-1{border-color:var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg)}
.btn-1:hover{border-color:var(--btn-bg-h);background:var(--btn-bg-h);color:var(--btn-fg-h)}
.btn-2:hover,.btn-s:not(.btn-1):hover{background:var(--fg);color:var(--bg)}
.btn:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--fg)}
.btn:active{transform:none;box-shadow:none}
.btn:hover .ic:last-child{transform:translate(2px,-2px)}
.btn[href^="#"]:hover .ic:last-child{transform:translateY(3px)}
.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-s{min-height:44px;font-size:.75rem;padding:.4em 1em}
.btn-xl{min-height:56px;font-size:.9rem;letter-spacing:.04em;text-transform:none}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.footnote{font-size:.8rem;line-height:1.6;color:var(--fg-2);letter-spacing:.01em}
.footnote a{color:var(--fg)}

/* ---------- Barra superiore ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--glass);border-bottom:1px solid var(--hair);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
.top-in{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);min-height:var(--top-h)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;min-height:44px;min-width:44px}
.brand-m{display:block;width:30px;height:30px;flex:none}
/* il nome compare quando l'intestazione della scheda è uscita dallo schermo: mai due marchi insieme */
.brand-t{font-weight:600;font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
.top.past .brand-t,.brand-t.always{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.nav{position:static;order:2}
.nav-list{display:none;gap:2px}
.nav-list a{display:flex;align-items:center;gap:.6em;min-height:40px;padding:0 10px;font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--fg-2);border-radius:6px;transition:color .15s,background-color .15s}
.nav-list .n{color:var(--accent);font-weight:700}
.nav-list a:hover{color:var(--fg);background:var(--bg-3)}
.nav-list a[aria-current]{color:var(--bg);background:var(--fg)}
.nav-list a[aria-current] .n{color:inherit}

.nav-menu summary{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1.5px solid var(--fg);border-radius:7px;font:700 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;list-style:none;user-select:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu-ic{display:grid;gap:3px;width:14px}
.nav-menu-ic i{height:1.5px;background:currentColor}
.nav-menu summary b{font-weight:inherit}
.nav-menu[open] summary{background:var(--fg);color:var(--bg)}
.nav-drop{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:3px solid var(--fg);padding:8px clamp(16px,4.4vw,56px) 16px;box-shadow:0 30px 50px -30px rgba(0,0,0,.5)}
.nav-drop a{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair);font-weight:600;font-size:1.05rem;text-decoration:none}
.nav-drop li:last-child a{border-bottom:0}
.nav-drop .n{font:700 .75rem var(--mono);letter-spacing:.14em;color:var(--accent)}

/* Pag. 0n/07: dove si è arrivati nel fascicolo. Lo aggiorna lo script, che è anche l'unico a mostrarlo. */
.pag{display:none;order:1;align-items:center;gap:10px;font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.js .pag{display:flex;visibility:hidden}
.js-on .pag{visibility:visible}
.pag b{color:var(--fg);font-weight:700}
.pag-l{display:none}
.pag-bar{position:absolute;left:0;right:0;bottom:-2px;display:flex;gap:3px;height:3px}
.pag-bar i{flex:1;background:var(--hair);transition:background-color .3s}
.pag-bar i.on{background:var(--vivid)}

/* il selettore del lato compare solo se lo script può farlo funzionare */
.flip{display:none;order:3;align-items:center;gap:0;flex:none}
.js .flip{display:flex;visibility:hidden}
.js-on .flip{visibility:visible}
.flip-l{display:none;margin-right:10px;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.flip-b{width:40px;height:42px;padding:0;border:1.5px solid var(--fg);background:transparent;font:700 .8rem/1 var(--mono);cursor:pointer;transition:background-color .15s,color .15s}
.flip-b:first-of-type{border-radius:7px 0 0 7px;border-right-width:0}
.flip-b:last-of-type{border-radius:0 7px 7px 0}
.flip-b:hover{background:var(--bg-3)}
.flip-b[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.flip-b:focus-visible{position:relative;z-index:1}

@media (max-width:439px){
  .brand-t:not(.always){display:none}
  .nav-menu summary{padding:0 10px;letter-spacing:.08em}
}
@media (max-width:339px){.nav-menu summary b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (min-width:1100px){
  .nav{order:0}
  .nav-list{display:flex}
  .nav-menu{display:none}
  .pag{order:0;padding-left:clamp(8px,1.4vw,18px);border-left:1px solid var(--hair-2);min-height:24px}
  .pag-bar{position:static;height:auto;gap:3px}
  .pag-bar i{flex:none;width:11px;height:9px;background:transparent;border:1.5px solid var(--vivid)}
  .flip{order:0}
}
@media (min-width:1100px) and (max-width:1259px){.nav-list a{padding:0 8px;letter-spacing:.09em}}
@media (min-width:1260px){.pag-l,.flip-l{display:inline}}

/* ---------- Il foglio ---------- */
.sheet{position:relative;overflow-x:hidden;overflow-x:clip;padding-block:clamp(44px,6vw,88px) clamp(60px,8vw,120px);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:center top}
.crops{position:absolute;inset:clamp(8px,1.5vw,22px);pointer-events:none;--c:var(--hair-2);
  background:
    linear-gradient(var(--c),var(--c)) left top/22px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left top/1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/22px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right top/1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/22px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/22px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1.5px 22px no-repeat}

.sheet-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding-bottom:14px;margin-bottom:clamp(32px,4.6vw,64px);border-bottom:3px solid var(--fg);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.sheet-head>p{display:flex;align-items:center;gap:.7em;white-space:nowrap}
.sheet-head>p:first-child span:first-child{color:var(--fg);font-weight:700}
.sheet-head>p:last-child span:first-of-type,.sheet-head>p:last-child i{display:none}
.sheet-head .barcode{margin-left:.6em}
.side::after{content:var(--isP,"Lato A") var(--isI,"Lato B")}
/* segnaletica del foglio: quattro pittogrammi, accesi o sbarrati */
.signs{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding-top:12px;border-top:1px solid var(--hair);letter-spacing:0}
.signs li{display:flex;align-items:center;gap:9px;min-width:0}
.signs .picto{flex:none;width:28px;border-radius:6px}
.signs .cap{white-space:nowrap}
@media (max-width:439px){.sheet-head{font-size:var(--xs);letter-spacing:.1em}.sheet-head .barcode{display:none}}
@media (min-width:560px){
  .sheet-head>p:last-child span:first-of-type,.sheet-head>p:last-child i{display:inline}
  .signs{grid-template-columns:repeat(4,auto);justify-content:space-between}
}
@media (min-width:1100px){
  .signs{order:0;flex:0 1 auto;display:flex;gap:16px;padding:0;border:0}
  .signs .picto{width:26px}
}

.sec-head{display:grid;gap:18px;margin-bottom:clamp(30px,4.2vw,56px)}
.sec-intro{color:var(--fg-2);max-width:40em;font-size:1.04rem}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
  .sec-intro{padding-bottom:.4em}
}

/* ---------- 00 · Scheda di identificazione (hero) ---------- */
.hero{padding-top:clamp(20px,2.6vw,34px);padding-bottom:clamp(36px,4.5vw,64px)}
.letterhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px}
.rl-logo{width:auto;height:clamp(54px,6.2vw,84px);aspect-ratio:709/200;overflow:visible}
.docid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;flex:1 1 240px;font-size:var(--xs);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.docid strong{grid-column:1;color:var(--fg);font-weight:700;letter-spacing:.18em}
.docid span{grid-column:1}
.docid .barcode{grid-column:2;grid-row:1/3}
.docid i{margin-inline:.3em}
@media (min-width:700px){
  .docid{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;font-size:.78rem;letter-spacing:.2em;text-align:right}
  .docid strong{font-size:1.08em;letter-spacing:.22em}
  .docid .barcode{width:88px;height:24px;margin-top:4px}
}

.hero-grid{display:grid;gap:clamp(36px,5vw,64px)}
h1{font-size:clamp(2.2rem,1.1rem + 4vw,3.85rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:.42em}
.h1-b{display:block;margin-top:.14em;color:var(--accent-2);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.hero .lede{margin-bottom:clamp(22px,2.8vw,34px)}
.hero .actions .btn{flex:1 1 auto}
@media (min-width:520px){.hero .actions .btn{flex:0 0 auto}}

/* Pannello esperimenti: l'unica insegna intera del sito */
.sign{position:relative;padding:clamp(20px,2.6vw,30px);border-radius:12px;box-shadow:var(--shadow);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.sign .crops{inset:9px;--c:var(--hair)}
.sign-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding-bottom:12px;border-bottom:1.5px solid var(--fg)}
.sign-num{display:flex;align-items:flex-end;gap:clamp(14px,2vw,22px);padding:clamp(18px,2.4vw,26px) 0 clamp(14px,2vw,20px)}
.num{font-weight:700;font-size:clamp(5.4rem,4rem + 6vw,8.6rem);line-height:.74;letter-spacing:-.05em;margin-left:-.04em}
.num small{font:500 1rem/1 var(--mono);letter-spacing:.06em;color:var(--fg-2);margin-left:.35em}
.sign-what{display:grid;gap:3px;padding-bottom:2px;min-width:0}
.sign-what strong{font-weight:700;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.1;letter-spacing:-.02em}
.sign-what .label{font-size:var(--xs);letter-spacing:.16em}
.sign-sub{font:400 .76rem var(--mono);color:var(--fg-2)}
.sign-meter{display:flex;align-items:center;gap:14px;padding:12px 0;border-block:1px solid var(--hair);margin-bottom:16px}
.sign-meter .meter{flex:1;gap:5px}
.sign-meter .meter i{flex:1;width:auto;height:12px}
.sign-meter .label{color:var(--fg);font-weight:700;font-size:var(--xs);letter-spacing:.14em;white-space:nowrap}
.pictos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.pictos li{display:grid;gap:7px;align-content:start}
.pictos .cap{min-height:2.6em} /* due righe riservate: le due file restano allineate */
.sign-legend{display:flex;gap:20px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:var(--xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.sign-legend span{display:flex;align-items:center;gap:8px}
.k{width:11px;height:11px;border-radius:2.5px;box-shadow:inset 0 0 0 1.5px var(--hair-2);background:linear-gradient(to top right,transparent calc(50% - 1px),var(--accent-2) calc(50% - 1px),var(--accent-2) calc(50% + 1px),transparent calc(50% + 1px))}
.k.on{background:var(--fg);box-shadow:none}
/* sugli schermi stretti i pittogrammi si mettono in due colonne, con la didascalia di fianco */
@media (max-width:459px){
  .pictos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .pictos li{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px}
  .pictos .cap{min-height:0}
}

.hero-foot{display:grid;gap:16px;margin-top:clamp(34px,4.5vw,60px)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.fields div{border-top:1.5px solid var(--fg);padding-top:9px}
.fields dt{font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.fields dd{font-weight:600;font-size:1.06rem;line-height:1.3;margin-top:2px}
.notice{font-size:.78rem;line-height:1.6;color:var(--fg-2)}
@media (min-width:620px){.fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
  .fields{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(380px,.78fr);align-items:start}
  .sign{margin-top:4px}
}

/* ---------- 01 · Laboratorio ---------- */
.lab-grid{display:grid;gap:clamp(36px,5vw,72px)}
.lab-text h2{margin-bottom:.5em}
.lab-text .lede{color:var(--fg);margin-bottom:1.2em}
.lab-text p:not(.lede):not(.kicker){color:var(--fg-2);max-width:36em}
.lab-text p+p{margin-top:.9em}
@media (min-width:980px){.lab-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}}

.form,.channels,.trial,.spec{background:var(--bg-2);border:1.5px solid var(--fg);border-radius:10px;padding:clamp(18px,2.6vw,30px)}
.form-title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:12px;border-bottom:1.5px solid var(--fg);font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.form-title span:first-child{color:var(--fg);font-weight:700}
.form-row{padding:16px 0;border-bottom:1px solid var(--hair)}
.form-q{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.form-q b{color:var(--accent);font-weight:700;margin-right:.3em}
.form-q small{font-size:1em;text-transform:none;letter-spacing:.02em;opacity:.9}
.checks{display:flex;flex-wrap:wrap;gap:8px 26px}
.checks li{display:flex;align-items:center;color:var(--fg-2);font-size:1.02rem}
.checks li.on{color:var(--fg);font-weight:600}
.checks .box{margin-right:.55em}
.form-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:16px;min-height:74px}
.form-note{font:400 .84rem var(--mono);color:var(--fg-2)}
.form-foot .stamp{margin:6px 6px 8px 0}

/* ---------- 02 · Aree: un registro, non quattro scatole ---------- */
.areas{border-bottom:1.5px solid var(--fg)}
.area{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;padding:22px 0;border-top:1.5px solid var(--fg)}
.area .picto{grid-column:1;grid-row:1;width:56px}
.area-n{grid-column:2;grid-row:1;justify-self:end;font-weight:700;font-size:clamp(2.6rem,2rem + 2.6vw,4rem);line-height:.8;letter-spacing:-.05em}
.area-b,.area-f,.area-go{grid-column:1/-1}
.area-b p{margin-top:8px;color:var(--fg-2);max-width:32em}
.area-f{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--vivid)}
.area-f span{font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.area-f b{font-size:1.04rem;line-height:1.3}
/* l'area che ha un esperimento in corso si stacca dal registro e porta alla scheda tecnica */
.area-hot{margin-inline:calc(-1 * clamp(8px,2vw,24px));padding:24px clamp(8px,2vw,24px);border:0;border-radius:12px;box-shadow:var(--shadow)}
.area-hot+.area{border-top:0}
.area-go{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:9px 16px;border:1.5px solid var(--fg);border-radius:8px;text-decoration:none;font:700 .8125rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;transition:background-color .16s,color .16s}
.area-go small{display:block;font-size:var(--xs);font-weight:500;letter-spacing:.16em;color:var(--fg-2);transition:color .16s}
.area-go .ic{flex:none;transition:transform .18s var(--ease)}
.area-go:hover{background:var(--fg);color:var(--bg)}
.area-go:hover small{color:inherit}
.area-go:hover .ic{transform:translateY(3px)}
@media (min-width:900px){
  .area{grid-template-columns:6.2rem 68px minmax(0,1fr) 17.5rem;gap:10px 28px;padding-block:26px}
  .area-n{grid-column:1;justify-self:start}
  .area .picto{grid-column:2;width:68px}
  .area-b{grid-column:3;grid-row:1}
  .area-f{grid-column:4;grid-row:1}
  .area-hot{padding-block:30px}
  .area-go{grid-column:4;grid-row:2;align-self:start}
  .area-hot .area-n,.area-hot .picto,.area-hot .area-b,.area-hot .area-f{align-self:start}
  .area-hot .area-b{grid-row:1/3}
  .area-hot .area-n,.area-hot .picto{grid-row:1/3}
}

/* ---------- 03 · Veduta Console ---------- */
#veduta{display:block}
.ved-head{display:grid;gap:24px;margin-bottom:clamp(30px,4.5vw,56px)}
.ved-title{position:relative}
.display{font-size:clamp(2.9rem,.9rem + 9vw,7.4rem);line-height:.94;letter-spacing:-.045em;color:var(--accent-2);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.1em;margin-bottom:.12em}
.ved-title .lede{color:var(--fg)}
.dict{max-width:27em;padding-left:16px;border-left:3px solid var(--vivid);color:var(--fg-2);font-size:.98rem}
.dict dfn{font-weight:600;color:var(--fg);font-size:1.1em;letter-spacing:-.01em}
.dict-g{font:400 .82em var(--mono);margin-inline:.3em}
/* il timbro sta sul cartiglio del titolo, non in giro per il foglio */
.stamp-2{font-size:.9rem;margin:6px 0 20px 6px}
.stamp-2 span:first-child{font-size:.78em;font-weight:500;letter-spacing:.3em}
@media (min-width:600px){.stamp-2{position:absolute;top:2.6rem;right:clamp(0px,4vw,48px);margin:0}}
@media (min-width:900px){
  .ved-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:48px}
  .dict{justify-self:end;margin-bottom:.5rem}
}

.tav{display:grid;gap:clamp(24px,3.2vw,44px)}
.plate{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg-2);border:1.5px solid var(--fg);border-radius:10px;overflow:hidden}
.plate figcaption{margin-top:auto;border-top:1.5px solid var(--fg)}
.bp-stage,.plate-draw,.stack,.bench-rig{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px}
.bp-stage{position:relative;aspect-ratio:640/520}
.bp-stage .draw{position:absolute;inset:0;width:100%;height:100%}
.plate-draw{flex:1;display:grid;place-items:center;padding:clamp(6px,1.4vw,18px)}
.plate-draw .draw{width:100%;height:auto;max-height:560px}

/* Cartiglio: tavola, oggetto, scala, revisione */
.tb{display:grid;grid-template-columns:auto minmax(0,1fr);font-family:var(--mono)}
.tb>div{padding:9px 14px 10px;border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.tb>div:nth-child(2n){border-right:0}
.tb>div:nth-last-child(-n+2){border-bottom:0}
.tb dt{font-size:var(--xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.tb dd{font-size:.8rem;font-weight:700;line-height:1.35;letter-spacing:.02em;color:var(--fg)}
.tb-note{padding:10px 14px 12px;border-top:1px solid var(--hair-2);font:400 .76rem/1.55 var(--mono);color:var(--fg-2)}
@media (min-width:560px){
  .tb{grid-template-columns:auto minmax(0,1fr) auto auto}
  .tb>div{border-bottom:0}
  .tb>div:nth-child(2n){border-right:1px solid var(--hair-2)}
  .tb>div:last-child{border-right:0}
}

/* Comandi di una tavola (li mostra lo script) */
.plate-ctl,.bench-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 14px;border-top:1.5px solid var(--fg)}
.plug-count{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.plug-count output{margin-left:.5em;font-weight:700;font-size:1rem;letter-spacing:.1em;color:var(--fg)}

/* Disegno */
.draw text{font-family:var(--mono);font-weight:500}
.d-body{fill:var(--bg);stroke:var(--fg);stroke-width:2.5}
.d-thin{fill:none;stroke:var(--hair-2);stroke-width:1}
.d-line{fill:none;stroke:var(--fg);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.d-key,.d-bezel{fill:var(--bg-3)}
.d-scr{fill:#0b0816;stroke:var(--fg);stroke-width:1}
.d-fill{fill:var(--fg)}
.draw .d-key-t{fill:var(--fg);font-family:var(--sans);font-weight:600;font-size:18px}
.d-axis{fill:none;stroke:var(--hair-2);stroke-width:1;stroke-dasharray:14 4 2 4}
.d-proj{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round}
.d-hid{fill:none;stroke:var(--fg);stroke-width:1.4;stroke-dasharray:5 3.5}
.d-glass{fill:none;stroke:var(--vivid);stroke-width:4;stroke-linecap:round}
.d-dim{fill:none;stroke:var(--accent);stroke-width:1}
.d-dim text{fill:var(--accent);stroke:none;font-size:14px;letter-spacing:.08em}
/* la quota interrompe la linea: un rettangolo del colore del fondo, che cresce insieme alla scritta */
.d-knock{fill:var(--bg);stroke:none;transform-box:fill-box;transform-origin:center}
.d-dim-out .d-knock{fill:var(--bg-2)}
.d-arrow{fill:var(--accent);stroke:none}
.d-view{fill:var(--fg-2);font-size:13.5px;letter-spacing:.2em}
.d-lead{fill:none;stroke:var(--accent-2);stroke-width:1.25}
.d-tag circle{fill:var(--vivid);transition:fill .15s}
.d-tag text{fill:var(--on-vivid);font-weight:700;font-size:16px;transition:fill .15s}
.d-lab text{fill:var(--fg);font-weight:700;font-size:15px;letter-spacing:.14em}
.d-guide{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 5}
.iso *{vector-effect:non-scaling-stroke}
.iso-s{fill:var(--bg-2);stroke:var(--fg);stroke-width:1.8;stroke-linejoin:round}
.iso-k{fill:var(--bg-3)}
.iso-t{fill:none;stroke:var(--fg);stroke-width:1.1}
.iso-dots{stroke-dasharray:1.5 4.5}
.iso-f{fill:var(--fg);stroke:var(--fg);stroke-width:1}
.iso-scr{fill:var(--px-s3);stroke:var(--vivid);stroke-width:1.4}
.iso-ghost{fill:none;stroke:var(--hair-2);stroke-width:1;stroke-dasharray:3 4}
/* sugli schermi stretti il disegno si rimpicciolisce: scritte e richiami crescono, per restare leggibili */
@media (max-width:1099px) and (min-width:980px),(max-width:600px){
  .d-tag text{font-size:19px}.d-tag circle{r:16px}
  .d-dim text,.d-view{font-size:18px}.draw .d-key-t{font-size:20px}
  .d-knock{transform:scale(1.3)}
  .d-view{letter-spacing:.12em}
}
@media (max-width:440px){
  .d-tag text{font-size:22px}.d-tag circle{r:18px}
  .d-dim text,.d-view{font-size:22px}.draw .d-key-t{font-size:23px}
  .d-knock{transform:scale(1.58)}
  .d-lab text{font-size:19px;letter-spacing:.08em}
}
@media (max-width:360px){
  .d-tag text{font-size:25.5px}.d-tag circle{r:20px}
  .d-dim text,.d-view{font-size:25.5px}.draw .d-key-t{font-size:26px}
  .d-knock{transform:scale(1.82)}
  .d-view{letter-spacing:.06em}
  .d-lab text{font-size:21.5px;letter-spacing:.04em}
}

/* Lo schermo acceso: una veduta a 80×60 punti, e il registro d'avvio di VedutaOS */
.scr{position:absolute;left:31.25%;top:40.3846%;width:37.5%;height:34.6154%;overflow:hidden;background:#0b0816;container-type:inline-size}
.scr-scene{position:absolute;inset:0;width:100%;height:100%}
.px-s1{fill:var(--px-s1)}.px-s2{fill:var(--px-s2)}.px-s3{fill:var(--px-s3)}.px-s4{fill:var(--px-s4)}.px-s5{fill:var(--px-s5)}.px-s6{fill:var(--px-s6)}.px-s7{fill:var(--px-s7)}.px-s8{fill:var(--px-s8)}
.px-sun{fill:var(--px-sun)}.px-sun-2{fill:var(--px-sun-2)}.px-star{fill:var(--px-star)}
.px-far{fill:var(--px-far)}.px-far-hi{fill:var(--px-far-hi)}.px-hill{fill:var(--px-hill)}.px-mid{fill:var(--px-mid)}.px-win{fill:var(--px-win)}
.px-near{fill:var(--px-near)}.px-edge{fill:var(--px-edge)}.px-grass{fill:var(--px-grass)}.px-speck{fill:var(--px-speck)}
.px-hud{fill:var(--px-hud)}.px-hat{fill:var(--px-hat)}.px-skin{fill:var(--px-skin)}.px-body{fill:var(--px-body)}
.spr-b{visibility:hidden}
.scr-boot{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;gap:.28em;padding:0 6%;background:#0b0816;color:#dcc8ff;font:500 11px/1.25 var(--mono);white-space:pre}
@supports (font-size:1cqw){.scr-boot{font-size:clamp(11px,6.2cqw,17px)}}
.scr-boot span:first-child{color:#fff;font-weight:700;margin-bottom:.35em}
.cur{display:inline-block;width:.6em;height:1em;margin-left:.3em;background:#e879f9;vertical-align:-.15em}
.bp.is-off .scr-scene,.bp.is-boot .scr-scene{visibility:hidden}
.bp.is-boot .scr-boot{display:flex}

.legend{align-self:center}
.legend>.label{margin-bottom:14px}
.leg{counter-reset:leg;display:grid;gap:0}
.leg li{counter-increment:leg;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--hair);color:var(--fg-2);font-size:.95rem;line-height:1.5;transition:color .15s}
.leg li:last-child{border-bottom:1px solid var(--hair)}
.leg li::before{content:counter(leg);position:absolute;left:0;top:11px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--vivid);color:var(--on-vivid);font:700 .86rem/1 var(--mono);transition:background-color .15s,color .15s}
.leg b{display:block;color:var(--fg);font-size:1.04rem}
.leg li:focus-visible{outline-offset:-2px;border-radius:6px}
.leg-note{margin-top:16px;font-size:.78rem;line-height:1.6;color:var(--fg-2)}
@media (min-width:980px){.tav{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}

/* Legenda e disegno si illuminano a vicenda (cursore o tastiera) */
.p,.t{transition:opacity .2s}
.bp[data-hot] .p,.bp[data-hot] .t{opacity:.28}
.bp[data-hot="1"] .p1,.bp[data-hot="2"] .p2,.bp[data-hot="3"] .p3,.bp[data-hot="4"] .p4,.bp[data-hot="5"] .p5,.bp[data-hot="6"] .p6,
.bp[data-hot="1"] .t1,.bp[data-hot="2"] .t2,.bp[data-hot="3"] .t3,.bp[data-hot="4"] .t4,.bp[data-hot="5"] .t5,.bp[data-hot="6"] .t6{opacity:1}
.bp[data-hot="1"] .t1 circle,.bp[data-hot="2"] .t2 circle,.bp[data-hot="3"] .t3 circle,.bp[data-hot="4"] .t4 circle,.bp[data-hot="5"] .t5 circle,.bp[data-hot="6"] .t6 circle{fill:var(--fg)}
.bp[data-hot="1"] .t1 text,.bp[data-hot="2"] .t2 text,.bp[data-hot="3"] .t3 text,.bp[data-hot="4"] .t4 text,.bp[data-hot="5"] .t5 text,.bp[data-hot="6"] .t6 text{fill:var(--bg)}
.bp[data-hot="1"]~.legend li:nth-child(1),.bp[data-hot="2"]~.legend li:nth-child(2),.bp[data-hot="3"]~.legend li:nth-child(3),.bp[data-hot="4"]~.legend li:nth-child(4),.bp[data-hot="5"]~.legend li:nth-child(5),.bp[data-hot="6"]~.legend li:nth-child(6){color:var(--fg)}
.bp[data-hot="1"]~.legend li:nth-child(1)::before,.bp[data-hot="2"]~.legend li:nth-child(2)::before,.bp[data-hot="3"]~.legend li:nth-child(3)::before,.bp[data-hot="4"]~.legend li:nth-child(4)::before,.bp[data-hot="5"]~.legend li:nth-child(5)::before,.bp[data-hot="6"]~.legend li:nth-child(6)::before{background:var(--fg);color:var(--bg)}

/* Dati di targa accanto alla vista esplosa: due riquadri alti uguali */
.spec-grid{display:grid;gap:clamp(24px,3.2vw,44px);margin-top:clamp(24px,3.2vw,44px)}
.spec{display:flex;flex-direction:column}
.spec table{flex:1;width:100%;height:100%;border-collapse:collapse}
.spec tr{border-bottom:1px solid var(--hair)}
.spec tr:last-child{border-bottom:0}
.spec th{width:32%;padding:12px 16px 12px 0;text-align:left;vertical-align:top;font-size:var(--xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);line-height:2.1}
.spec td{padding:11px 0;font-weight:500;line-height:1.45;vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{padding-bottom:0}
@media (max-width:479px){.spec th{width:40%;letter-spacing:.06em}}
@media (min-width:980px){.spec-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch}}

/* 03/B · Che cosa c'è dentro: tre allegati, due tavole, un verbale.
   Nel documento ogni tavola segue il suo allegato; sugli schermi larghi gli allegati stanno in fila e le tavole sotto. */
.alleg{display:grid;gap:16px}
.part{display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2.4vw,28px);background:var(--bg-2);border:1.5px solid var(--fg);border-radius:10px}
.part-top{display:flex;justify-content:space-between;align-items:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.picto-s{width:48px}
.part h4{font-size:1.7rem;letter-spacing:-.03em}
.part-sub{font:500 .72rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:6px 0 16px}
.part a{color:var(--accent);font-weight:600}
.ticks{display:grid;gap:9px;margin:16px 0 22px}
.ticks li{position:relative;padding-left:22px;color:var(--fg-2);font-size:.95rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--vivid)}
.ticks:last-child{margin-bottom:0}
.aside{margin-top:auto;padding-top:14px;border-top:1px dashed var(--hair-2);font:400 .8rem/1.55 var(--mono);color:var(--fg)}
.aside::before{content:"N.B. ";font-weight:700;color:var(--accent)}
@media (min-width:1000px){
  .alleg{grid-template-columns:repeat(12,minmax(0,1fr))}
  .alleg>.part{grid-row:1;grid-column:span 4}
  .alleg>.stackfig{grid-row:2;grid-column:1/span 5}
  .alleg>.bench{grid-row:2;grid-column:6/span 7}
  .alleg>.trial{grid-row:3;grid-column:1/-1}
}

/* Tav. 3: gli strati di VedutaOS */
.stack{flex:1;display:grid;align-content:stretch;gap:8px;padding:clamp(14px,2.2vw,24px)}
.stack>li{display:grid;align-content:center;gap:1px;padding:11px 16px 12px;border:1.5px solid var(--fg);border-radius:6px;background:var(--bg)}
.stack b{font-weight:600;font-size:1.02rem;line-height:1.3}
.stack span{font:400 .78rem/1.5 var(--mono);color:var(--fg-2)}
.stack .stack-one{background:var(--fg);color:var(--bg)}
.stack-one span{color:inherit;opacity:.82}
.stack-one ul{display:grid;gap:6px;margin-top:9px}
.stack-one ul li{padding:8px;text-align:center;border:1.5px solid currentColor;border-radius:4px;font:700 .74rem/1.25 var(--mono);letter-spacing:.04em}
@media (min-width:480px){.stack-one ul{grid-template-columns:repeat(3,minmax(0,1fr))}.stack-one ul li{display:grid;place-items:center}}
.stack .stack-ghost{border-style:dashed;border-color:var(--hair-2);background:repeating-linear-gradient(-45deg,transparent 0 8px,var(--hair) 8px 9px)}
.stack-ghost b{color:var(--fg-2)}
.stack-ghost s{text-decoration-color:var(--accent-2);text-decoration-thickness:2px}
.stack .stack-base{background:var(--bg-3)}

/* Tav. 4: banco prova */
.bench-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;padding:12px 14px;border-bottom:1.5px solid var(--fg)}
.bench-top .label{color:var(--fg);font-weight:700;font-size:.72rem;letter-spacing:.16em}
.bench-top .label i{margin-inline:.3em;color:var(--fg-2)}
.bench-frame{font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.bench-frame b{color:var(--fg);font-weight:700}
.bench-rig{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;align-items:start;gap:12px clamp(10px,2vw,20px);padding:clamp(14px,2.4vw,24px)}
.bench-scr{aspect-ratio:4/3;border:1.5px solid var(--fg);border-radius:4px;overflow:hidden;background:var(--bn-0)}
.bench-scr svg,.bench-scr canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.bn-0{fill:var(--bn-0)}.bn-1{fill:var(--bn-1)}.bn-2{fill:var(--bn-2)}.bn-3{fill:var(--bn-3)}.bn-4{fill:var(--bn-4)}.bn-5{fill:var(--bn-5)}
.bench-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;margin-top:8px;font:500 var(--xs)/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.bench-cap b{color:var(--fg);font-weight:700}
.bench-cap code{font:inherit;font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--fg)}
.bench-verdict{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:10px;padding:4px 0;font:700 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bench-eq{font:700 1.9rem/1 var(--mono)}
.bench-verdict.is-bad{color:var(--bad)}
.bench-track{display:flex;gap:2px;padding:0 14px 14px;background:inherit}
.bench-track i{flex:1;height:8px;border:1px solid var(--vivid)}
.bench-track i.on{background:var(--vivid)}
.bench-track i.bad{border-color:var(--bad);background:var(--bad)}
.bench-ctl{border-top:1px solid var(--hair-2);justify-content:flex-start;font:500 .75rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.bench-seed{display:flex;align-items:center;gap:10px}
.bench-seed input{width:5.6em;min-height:44px;padding:0 10px;border:1.5px solid var(--fg);border-radius:6px;background:var(--bg);color:var(--fg);font:700 .9rem/1 var(--mono);letter-spacing:.06em}
.bench-check{position:relative;display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--fg)}
.bench-check input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:pointer}
.bench-check input:focus-visible+.box{outline:3px solid var(--accent-2);outline-offset:3px}
.bench-ctl .btn{margin-left:auto}
@media (max-width:639px){.bench-cap{display:grid}.bench-ctl .btn{flex:1 1 100%;margin:0}}
.eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:14px;border-bottom:1px solid var(--hair-2);font:700 clamp(.8rem,.7rem + .4vw,.95rem)/1.2 var(--mono)}
.eq .nw{display:inline-flex;align-items:center;gap:10px}
.eq-t{padding:.5em .75em;border:1.5px solid var(--fg);border-radius:6px;background:var(--bg);white-space:nowrap}
.eq-r{border-color:var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg)}
.eq-o{color:var(--accent);font-size:1.3em}
@media (min-width:640px){
  .bench-rig{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
  .bench-verdict{grid-column:2;grid-row:1;flex-direction:column;gap:6px;min-width:6.5em;padding-bottom:30px;font-size:var(--xs);letter-spacing:.12em}
  .bench-eq{font-size:2.2rem}
}

/* Verbale di collaudo */
.trial{display:flex;flex-direction:column;min-width:0}
.trial-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;padding-bottom:18px;border-bottom:1.5px solid var(--fg)}
.trial-head h4{margin-top:6px;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);letter-spacing:-.025em}
.trial-bar{display:flex;align-items:center;gap:14px}
.trial-bar b{color:var(--fg);font-weight:700}
.trial-t{width:100%;border-collapse:collapse}
.trial-t th,.trial-t td{padding:13px 16px 13px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.trial-t thead th{font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding-block:12px}
.trial-t tbody th{font-weight:600;font-size:1.02rem}
.trial-t td{color:var(--fg-2)}
.trial-t td:nth-child(2){white-space:nowrap;font-weight:500}
.trial-t .ok td:nth-child(2){color:var(--fg);font-weight:600}
.trial .footnote{margin-top:auto;padding-top:14px}
.actions-c{justify-content:center;margin-top:clamp(32px,4.5vw,56px)}
@media (max-width:639px){
  .trial-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .trial-t,.trial-t tbody,.trial-t tr,.trial-t th,.trial-t td{display:block}
  .trial-t tr{padding:14px 0;border-bottom:1px solid var(--hair)}
  .trial-t th,.trial-t td{padding:0;border:0}
  .trial-t td{margin-top:6px;font-size:.95rem}
  .actions-c .btn{flex:1 1 auto}
}

/* ---------- 04 · Personale ---------- */
.ids{display:grid;gap:clamp(20px,2.6vw,32px)}
.idcard{position:relative;height:100%;display:flex;flex-direction:column;padding:clamp(22px,3vw,40px);border-radius:12px;box-shadow:var(--shadow);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px}
.idcard .crops{inset:9px}
.id-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 20px}
.id-top .rl-logo{height:clamp(40px,4.4vw,54px)}
.idcard .docid{font-size:var(--xs);letter-spacing:.14em}
.idcard .docid strong{font-size:1em;letter-spacing:.16em}
.idcard .docid .barcode{width:64px;height:18px}
.idcard .rule{margin:clamp(14px,1.8vw,20px) 0 clamp(18px,2.4vw,28px);height:2.5px}
.id-body{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.idcard .kicker{font-size:.72rem;margin-bottom:.7rem}
.idcard h3{font-size:clamp(1.85rem,1.1rem + 2.4vw,2.9rem);line-height:.98;letter-spacing:-.035em;text-transform:uppercase}
.idcard h3 span{display:block}
.id-role{margin-top:.75em;color:var(--fg-2);font-size:1.02rem;line-height:1.35;max-width:17em}
.id-photo{flex:none;position:relative;display:grid;justify-items:center;align-content:center;gap:2px;width:clamp(96px,10vw,124px);aspect-ratio:4/5;border:1.5px dashed var(--hair-2);border-radius:8px;background:var(--bg-3);color:var(--fg-2);text-align:center;padding:8px 5px}
.id-photo svg{width:46%;opacity:.75}
.id-photo b{font:700 1rem/1.2 var(--mono);letter-spacing:.12em;color:var(--fg)}
.id-photo span{font:500 var(--xs)/1.3 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.id-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:clamp(22px,3vw,34px)}
.id-fields div{min-width:0}
.id-fields dt{font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.id-fields dd{font:500 .9rem/1.5 var(--mono);margin-top:2px;overflow-wrap:anywhere}
.id-fields a{display:inline-block;padding-block:6px;margin-block:-6px;color:var(--accent)}
.redact{display:inline-block;width:min(9.5em,100%);height:1em;background:var(--fg);border-radius:2px;vertical-align:-.12em}
.id-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hair-2)}
.id-fields+.id-foot{margin-top:clamp(20px,2.6vw,28px)}
.id-foot p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.id-foot .label{font-size:var(--xs);letter-spacing:.16em}
@media (max-width:479px){.id-fields div:last-child{grid-column:1/-1}.idcard .kicker{letter-spacing:.08em}}
.id-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-top:clamp(20px,2.6vw,32px);padding:15px 20px;border:1.5px dashed var(--hair-2);border-radius:10px;font:400 .82rem/1.5 var(--mono);color:var(--fg-2)}
.id-next b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.id-next+.footnote{margin-top:18px;max-width:52em}
@media (min-width:1000px){.ids{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 05 · Contatti ---------- */
.con-grid{display:grid;gap:clamp(36px,5vw,72px)}
.con-text h2{margin-bottom:.45em}
.con-text .lede{color:var(--fg);margin-bottom:1em}
.con-text p:not(.lede):not(.kicker):not(.actions){color:var(--fg-2);max-width:35em}
.con-text .actions{margin-top:1.8em}
.btn-xl .ic-l{margin-right:-.1em}
.chan li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
.chan-k{font-size:var(--xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.chan-v{grid-column:1/-1;font-weight:600;font-size:1.12rem;color:var(--fg-2)}
.chan .on .chan-v{color:var(--fg)}
.chan-v a{display:inline-block;text-decoration:none}
.chan-u{display:block;font:400 .84rem var(--mono);color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.chan-s{grid-row:1;grid-column:2;justify-self:end;display:flex;align-items:center;gap:8px;font-size:var(--xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.dot{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.chan .on .dot{background:var(--vivid);box-shadow:0 0 0 3px var(--bg-3)}
.chan .on .chan-s{color:var(--fg);font-weight:700}
.chan-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding-top:12px}
.chan-more .label{margin-right:auto;font-size:var(--xs)}
@media (max-width:519px){.chan-more .label{flex-basis:100%}}
.chan-more a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:.96rem}
.exit{margin-top:clamp(36px,5vw,64px);padding-top:16px;border-top:1px solid var(--hair-2);font:400 .8rem/1.65 var(--mono);color:var(--fg-2)}
.exit b{color:var(--fg);font-weight:700}
.exit span{white-space:normal}
@media (min-width:980px){.con-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}}

/* ---------- Retro del fascicolo (footer) ---------- */
.foot{padding-block:clamp(40px,5vw,64px) clamp(36px,4vw,52px)}
.foot-corners{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.foot-id{position:relative;display:grid;justify-items:center;text-align:center;padding:clamp(48px,7vw,96px) 0 clamp(44px,6vw,80px)}
.foot-id::before,.foot-id::after{content:"";position:absolute;background:var(--hair);pointer-events:none}
.foot-id::before{left:50%;top:0;bottom:0;width:1px}
.foot-id::after{left:0;right:0;top:calc(clamp(48px,7vw,96px) + 74px);height:1px}
.foot-mark{position:relative;z-index:1;width:148px;height:148px;background:var(--bg);box-shadow:0 0 0 26px var(--bg);border-radius:50%}
.foot-name,.foot-motto{position:relative;z-index:1;background:var(--bg);padding-inline:28px}
.foot-name{margin-top:36px;padding-top:6px;font-weight:600;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);letter-spacing:.42em;text-transform:uppercase;padding-left:calc(28px + .42em)}
.foot-motto{padding-block:10px 12px;color:var(--accent);font-size:clamp(1rem,.9rem + .5vw,1.22rem);line-height:1.5}
.foot-cols{display:grid;gap:32px;padding-block:clamp(28px,3.6vw,44px);border-block:1px solid var(--hair-2);margin-bottom:22px}
.foot-cols .label{margin-bottom:12px;color:var(--accent)}
.foot-cols nav a{display:inline-flex;align-items:center;min-height:40px;font-weight:500;text-decoration:none}
.foot-cols nav a:hover{text-decoration:underline}
.foot-legal ol{counter-reset:par}
.foot-legal li{counter-increment:par;position:relative;padding-left:3.1em;color:var(--fg-2);font-size:.9rem;line-height:1.6}
.foot-legal li+li{margin-top:10px}
.foot-legal li::before{content:"§ " counter(par);position:absolute;left:0;top:.2em;font:700 .75rem/1.6 var(--mono);letter-spacing:.04em;color:var(--accent)}
@media (min-width:860px){.foot-cols{grid-template-columns:minmax(0,.7fr) minmax(0,.8fr) minmax(0,2fr);gap:48px}}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h));display:flex;align-items:center;padding-block:clamp(28px,4vw,48px)}
.lost .wrap{display:grid;gap:clamp(28px,4vw,48px)}
.lost-grid{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
.lost-n{font-weight:700;font-size:clamp(7rem,3rem + 22vw,19rem);line-height:.76;letter-spacing:-.06em;color:var(--accent-2);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em;margin-left:-.04em}
.lost h1{font-size:clamp(1.9rem,1.1rem + 2.6vw,3rem);margin-bottom:.45em}
.lost .lede{margin-bottom:1.2em}
.lost .form{margin-bottom:1.5em;padding-block:clamp(16px,2vw,22px) clamp(12px,1.6vw,18px)}
.lost .form-foot{min-height:0}
.lost .foot-corners{padding-top:16px;border-top:1px solid var(--hair-2)}
.lost .sheet-head{margin-bottom:0}
.brand-m img{width:30px;height:30px}
img.on-p{display:var(--isP,block) var(--isI,none)}
img.on-i{display:var(--isP,none) var(--isI,block)}
@media (min-width:960px){.lost-grid{grid-template-columns:auto minmax(0,1fr)}}

/* ---------- Movimento (solo se gradito) ---------- */
.rl-gear{transform-box:view-box;transform-origin:100px 100px}
@media (prefers-reduced-motion:no-preference){
  /* l'ingranaggio dell'intestazione gira piano; la luce del gradiente resta ferma */
  .rl-gear{animation:rl-gira 48s linear infinite}
  .gear-rest .rl-gear{animation-play-state:paused}
  @keyframes rl-gira{to{transform:rotate(360deg)}}

  /* la veduta scorre a scatti di un punto, come su uno schermo vero */
  /* il piano scorre a sinistra e la sua finestra torna a destra della stessa misura: resta ferma, e dietro passa il motivo */
  .lay-far,.lay-far .win{animation:px-scorri 64s steps(160) infinite}
  .lay-mid,.lay-mid .win{animation:px-scorri 26s steps(160) infinite}
  .lay-near,.lay-near .win{animation:px-scorri 11s steps(160) infinite}
  .lay .win{animation-name:px-finestra}
  .spr-a{animation:px-passo .5s steps(1) infinite}
  .spr-b{animation:px-passo .5s steps(1) -.25s infinite}
  .tw{animation:px-stella 2.6s steps(1) infinite}
  .tw:nth-child(2n){animation-delay:-1.1s}
  .cur{animation:px-stella .8s steps(1) infinite}
  .away .lay,.away .win,.away .spr-a,.away .spr-b,.away .tw{animation-play-state:paused}
  @keyframes px-scorri{to{transform:translateX(-160px)}}
  @keyframes px-finestra{to{x:160px}}
  @keyframes px-passo{0%{visibility:visible}50%,100%{visibility:hidden}}
  @keyframes px-stella{0%{opacity:1}50%,100%{opacity:.15}}
  /* le righe d'avvio compaiono una alla volta */
  .bp.is-boot .scr-boot span{opacity:0;animation:px-riga .01s steps(1) forwards}
  .bp.is-boot .scr-boot span:nth-child(2){animation-delay:.4s}
  .bp.is-boot .scr-boot span:nth-child(3){animation-delay:.8s}
  .bp.is-boot .scr-boot span:nth-child(4){animation-delay:1.2s}
  .bp.is-boot .scr-boot span:nth-child(5){animation-delay:1.6s}
  @keyframes px-riga{to{opacity:1}}

  .js-reveal .reveal{opacity:0;transform:translateY(22px)}
  .js-reveal .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js-reveal .ids .reveal:nth-child(2){transition-delay:.09s}

  /* le tacche si accendono una alla volta */
  .js-reveal .meter i.on{background:transparent;transition:background-color .18s}
  .js-reveal .meter.in i.on{background:var(--vivid)}
  .meter i:nth-child(2){transition-delay:.12s}.meter i:nth-child(3){transition-delay:.24s}.meter i:nth-child(4){transition-delay:.36s}

  /* il timbro arriva dall'alto */
  .js-reveal .stamp{opacity:0;transform:rotate(-7deg) scale(1.7)}
  .js-reveal .stamp.in{opacity:1;transform:rotate(-7deg) scale(1);transition:opacity .12s .35s,transform .28s cubic-bezier(.3,1.5,.5,1) .35s}

  /* cambio lato: il foglio si gira */
  html.flipping::view-transition{background:#0b0912}
  html.flipping::view-transition-old(root){animation:rl-esce .22s cubic-bezier(.5,0,1,.7) both}
  html.flipping::view-transition-new(root){animation:rl-entra .34s cubic-bezier(0,.55,.35,1) .22s both}
  @keyframes rl-esce{to{transform:perspective(2200px) rotateY(88deg) scale(.96);opacity:.35}}
  @keyframes rl-entra{from{transform:perspective(2200px) rotateY(-88deg) scale(.96);opacity:.35}}
}
@media (prefers-reduced-motion:reduce){.btn,.btn .ic,.area-go .ic{transition:none}.btn:hover{transform:none}}

/* ---------- Stampa: resta un fascicolo ---------- */
@media print{
  .top,.skip,.actions,.plate-ctl,.bench-ctl,.bench-track{display:none!important}
  .sheet{padding-block:24pt;break-inside:avoid-page;background-image:none}
  .tone-a,.tone-b{--isP:initial!important;--isI: !important}
  .sign,.idcard,.area-hot{box-shadow:none;border:1pt solid #14111f}
}

/* ---------- Contrasto forzato: niente testo «dipinto» col gradiente ---------- */
@media (forced-colors:active){
  .h1-b,.display,.lost-n{background:none;-webkit-text-fill-color:currentColor}
  .picto,.meter i.on,.kn,.pag-bar i.on,.bench-track i.on{forced-color-adjust:none}
}