/* ARCHCME - foglio di stile del sito (archiwave.tech/archcme/).
 *
 * Tema «Officina Digital» di archiwave.tech, COPIATO e non collegato il 23/09/2026:
 * i valori vengono dal blocco #aw-digital di archiwave/css/site.css (ne esiste una copia
 * generata in archiwave/tech/css/site.css). Se il portale cambia tema questa copia NON
 * lo segue da sola: e' una scelta (spec 2026-09-23-sito-archcme-stile-archiwave-design.md,
 * decisione D4), perche' includere o linkare i file del portale romperebbe link, test e
 * anteprima locale.
 *
 * Contratti con site.js e prezzari.php, presidiati da tests/test_site_*.py: le regole
 * [hidden] di .pidx e .more, nessuna display su .group, .list in position:relative, le
 * colonne di .row, il collasso FAQ a max-height:0. La classe js su <html> la mette una
 * riga nel <head> di ogni pagina: tutto cio' che nasconde qualcosa in attesa del JS e'
 * scritto come .js ... cosi' senza JavaScript la pagina resta completa.
 * Caratteri self-hosted, nessun CDN.
 */

@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2'),url('fonts/IBMPlexMono-Regular.ttf') format('truetype')}

:root{
  --bg:#121a1e;--panel:#1b262b;--panel-2:#172126;--panel-3:#162126;--hover:#202d33;
  --ink:#edf0ee;--soft:#bdc6c9;--muted:#9fadb2;
  --line:#35454d;--line-2:#304047;--line-3:#536a75;
  --accent:#a8c5d0;--accent-hi:#c4dae2;--on-accent:#121a1e;
  --sans:'Inter',Arial,sans-serif;--mono:'IBM Plex Mono',Consolas,monospace;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
b,strong{font-weight:600}
code{font:400 .9em var(--mono);color:var(--soft);background:var(--panel-2);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px}
:is(a,button,input):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--bg)}
.wrap{max-width:1480px;margin:0 auto;padding:0 clamp(22px,4.5vw,72px)}
.mono{font-family:var(--mono)}

/* ---- Tipografia condivisa ---- */
.kicker{font:400 11px/1.6 var(--mono);letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.kicker-lead{display:flex;align-items:center;gap:12px;color:var(--accent)}
.kicker-lead::before{content:'';width:22px;height:1px;background:var(--accent)}

/* ---- Barra del portale (identica a archiwave.tech) ---- */
.nav-inner{position:relative;min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-brand img{width:48px;height:29px;object-fit:contain;filter:brightness(0) invert(.8)}
.brand-name{display:block;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-1px}
.brand-name em,.footer-brand-name em{font-style:normal;font-weight:400;color:var(--accent)}
.brand-mode{display:block;margin-top:4px;font:400 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav-menu{display:flex;align-items:center;flex-wrap:wrap;gap:4px 30px}
.nav-menu a{position:relative;display:flex;align-items:center;min-height:44px;font-size:12px;color:var(--soft)}
.nav-menu a:hover,.nav-menu a[aria-current]{color:var(--ink)}
.nav-menu a.x{margin-left:12px;color:var(--accent)}
.nav-menu a[aria-current]::after,.pbar-nav a[aria-current]::after{content:'';position:absolute;left:0;bottom:0;width:16px;height:2px;background:var(--accent)}
.nav-toggle,.pbar-more{display:none}
.nav-toggle{flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:9px;background:transparent;border:0}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:1px}

/* ---- Barra di prodotto ---- */
.pbar{border-bottom:1px solid var(--line)}
.pbar-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.pbar-id{display:flex;align-items:center;gap:14px;min-width:0}
.pbar-id img{width:34px;height:34px;border-radius:8px;flex-shrink:0}
.pbar-crumb{display:block;font:400 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pbar-name{display:block;font-size:19px;line-height:1.15;font-weight:500;letter-spacing:-.045em}
.pbar-name em{font-style:normal;font-weight:400;color:var(--accent)}
.pbar-ver{align-self:flex-end;margin:0 0 2px 6px;padding:5px 8px;border:1px solid var(--line);border-radius:3px;font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.pbar-nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 26px;font-size:12px;color:var(--soft)}
.pbar-nav a{position:relative;display:flex;align-items:center;min-height:44px;white-space:nowrap}
.pbar-nav a:hover,.pbar-nav a[aria-current]{color:var(--ink)}
.pbar-sep{width:1px;height:18px;background:var(--line)}
.pbar-more{align-items:center;gap:8px;min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--soft)}

/* ---- Pulsanti (come .btn del portale) ---- */
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:46px;padding:11px 0;background:transparent;border:0;border-bottom:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink);transition:color .2s,background .2s,transform .2s}
.btn::after{content:'\2197';font:400 20px/1 Arial,sans-serif}
.btn:hover{color:var(--accent);transform:translateY(-2px)}
.btn.primary{padding:13px 19px;background:var(--accent);border:1px solid var(--accent);border-radius:5px;color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hi);color:var(--on-accent)}

/* ---- Comparsa allo scorrimento (solo con JS) ---- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---- Home: apertura ---- */
.hero{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1.1fr);column-gap:56px;align-items:start;padding-top:56px;padding-bottom:60px}
.hero-copy{padding-top:12px}
.hero .kicker-lead{margin-bottom:32px}
.display{font-size:clamp(48px,5.65vw,82px);line-height:1.025;font-weight:500;letter-spacing:-.07em}
.display span{display:block;font-weight:400;color:var(--accent)}
.intro{margin-top:31px}
.intro p{max-width:44ch;font-size:14px;line-height:1.8;color:var(--soft)}
.intro .hint{margin-top:26px;font:400 11px/1.6 var(--mono);color:var(--muted)}
.intro .hint b{font-weight:400;color:var(--soft)}
.stage{display:flex;flex-direction:column;min-width:0}
.stage-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;font:400 9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.stage-top .plus{font:400 22px/1 var(--sans);letter-spacing:0}
.frame{overflow:hidden;background:var(--panel-3);border:1px solid var(--line);border-radius:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.frame .bar span{margin-left:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 10px var(--mono);color:var(--muted)}
.frame img{width:100%}
.stage figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;color:var(--soft)}
.stage figcaption .mono{font-size:10px;color:var(--muted)}

/* ---- Home: sezioni a striscia ---- */
.strip{padding:56px 0 60px;border-top:1px solid var(--line)}
.strip-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:60px;margin-bottom:36px}
.strip-head .kicker{margin-bottom:14px}
.strip-head h2{font-size:35px;font-weight:400;line-height:1.2;letter-spacing:-.05em}
.strip-head p{max-width:54ch;font-size:13px;line-height:1.8;color:var(--soft)}
.accent-mono{font-family:var(--mono);color:var(--accent)}

/* Funzioni: schede nello stile della console prodotti del portale */
.console-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font:400 10px var(--mono);color:var(--muted)}
.console-head .ok{color:var(--accent)}
.feats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:feat}
.feat{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:27px 25px 22px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;counter-increment:feat;transition:border-color .2s,transform .2s}
.feat:hover{border-color:var(--accent);transform:translateY(-4px)}
.feat .ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:30px;border:1px solid var(--line-3);border-radius:10px;color:var(--accent)}
.feat .ic svg{width:22px;height:22px}
.feat h3{margin-bottom:12px;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.05em}
.feat p{flex:1;font-size:12px;line-height:1.7;color:var(--muted)}
.feat::after{content:counter(feat,decimal-leading-zero);align-self:stretch;margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font:400 10px var(--mono);color:var(--muted)}

/* Vetrina prezzari */
.show{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:56px}
.show-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:17px;font:400 10px var(--mono);letter-spacing:.04em;color:var(--muted)}
.show-head span:first-child{text-transform:uppercase;color:var(--accent)}
.show h3{margin-bottom:14px;font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.05em}
.desc{font-size:13px;line-height:1.8;color:var(--soft)}
.ticks{display:grid;gap:9px;margin-top:25px;list-style:none;font-size:12px;color:var(--soft)}
.ticks li{padding-left:13px;border-left:2px solid var(--accent)}

/* Schermate + lightbox */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;counter-reset:shot}
.shot{display:block;min-width:0;padding:0;background:none;border:0;text-align:left;cursor:zoom-in;counter-increment:shot}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top left;background:var(--panel-3);border:1px solid var(--line);border-radius:7px;transition:border-color .2s}
.shot:hover img{border-color:#718e9b}
.shot .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:13px;color:var(--ink)}
.shot .cap::after{content:counter(shot,decimal-leading-zero);font:400 10px var(--mono);color:var(--muted)}
.lb,.vm{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,15,18,.94)}
.lb{z-index:120;padding:40px}
.vm{z-index:130;padding:24px}
.lb.open,.vm.open{display:flex}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw}
.lb-img{width:auto;max-width:92vw;max-height:80vh;background:var(--panel-3);border:1px solid var(--line);border-radius:8px}
.lb-cap{font-size:13px;color:var(--soft)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:400 11px var(--mono);color:var(--muted)}
.lb-x,.lb-nav,.vm-x{display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:5px;color:var(--ink);font:300 24px/1 var(--sans);transition:border-color .2s,color .2s}
.lb-x:hover,.lb-nav:hover,.vm-x:hover{border-color:var(--accent);color:var(--accent)}
.lb-x{position:absolute;top:16px;right:20px;width:44px;height:44px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:30px}
.lb-prev{left:18px}
.lb-next{right:18px}
.vm-box{position:relative;width:min(95vw,1180px);aspect-ratio:16/10;max-height:88vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.vm-frame{display:block;width:100%;height:100%;border:0}
.vm-frame[hidden]{display:none}
.vm-x{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px}

/* ---- Catalogo prezzari: markup di prezzari.php, ridisegnato SOLO qui ---- */
.pcat{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.pcat .head{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:13px;color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:1}
.count{font:400 11px var(--mono);white-space:nowrap;color:var(--muted)}
.count b{font-weight:400;color:var(--accent)}
.pidx{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.pidx[hidden]{display:none}
.pidx-b{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 20px;background:var(--panel);border:0;border-left:2px solid transparent;font-size:13px;text-align:left;color:var(--soft);transition:color .2s,background .2s}
.pidx-b .n{font:400 11px var(--mono);color:var(--muted)}
.pidx-b:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.pidx-b[aria-expanded="true"]{background:var(--hover);border-left-color:var(--accent);color:var(--ink)}
.pidx-b[aria-expanded="true"] .n{color:var(--accent)}
.pidx-b:disabled{opacity:.45;cursor:default}
.pidx-b:focus-visible{outline-offset:-2px}
.pidx-b:last-child:nth-child(odd){grid-column:1/-1}
.list{position:relative}
.group .ghead{display:flex;align-items:baseline;gap:12px;padding:22px 20px 12px;background:var(--panel-2);border-top:1px solid var(--line);font:400 11px var(--mono);letter-spacing:.075em;text-transform:uppercase;color:var(--accent)}
.pidx+.group .ghead{border-top:none}
.ghead .gc{letter-spacing:.04em;color:var(--muted)}
.group.hide{display:none}
.row{display:grid;grid-template-columns:minmax(0,1fr) 116px 92px 320px;gap:20px;align-items:center;padding:17px 20px;border-top:1px solid var(--line)}
.row .nm{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.02em}
.row .nm small{display:block;margin-top:4px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.pill{font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.pill.own{color:var(--accent)}
.row .voci{font:400 11px var(--mono);color:var(--muted)}
.row .act{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:nowrap;white-space:nowrap;font-size:12px}
.row .get{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-3);border-radius:4px;font:400 11px var(--mono);color:var(--ink)}
.row .get:hover{border-color:var(--accent);color:var(--accent)}
.row .fonte{color:var(--soft)}
.row .segnala{color:var(--muted)}
.row .fonte:hover,.row .segnala:hover{color:var(--accent)}
.row.hide{display:none}
.nores{display:none;padding:34px 20px;text-align:center;color:var(--muted)}
.nores a,.note a,.desc a{color:var(--accent);border-bottom:1px solid currentColor}
.more{display:flex;justify-content:center;padding:14px 20px;border-top:1px solid var(--line)}
.more[hidden]{display:none}
.more button{min-height:44px;padding:0 16px;background:none;border:0;border-bottom:1px solid var(--line);font-size:12px;color:var(--soft)}
.more button:hover{color:var(--accent)}
.note{max-width:92ch;margin-top:24px;padding-left:14px;border-left:1px solid var(--accent);font-size:12px;line-height:1.8;color:var(--muted)}
.note b{font-weight:500;color:var(--soft)}

/* ---- Come si ottiene (pannello CTA del portale) ---- */
.ctapanel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:65px;padding:45px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.ctapanel h2,.endcta h2{font-size:clamp(30px,3.4vw,46px);font-weight:400;line-height:1.1;letter-spacing:-.06em}
.ctapanel h2{max-width:16ch;margin-top:16px}
.ctapanel .side-note{max-width:40ch;margin-top:22px;font-size:12px;line-height:1.8;color:var(--muted)}
.ctapanel .cta-row{margin-top:0}
.req{margin-top:18px;font:400 11px var(--mono);color:var(--muted)}
.hash{margin-top:26px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:4px;font:400 11px/1.6 var(--mono);color:var(--soft);word-break:break-all}
.hash .lab{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.smart{margin-top:18px;padding-left:14px;border-left:1px solid var(--accent);font-size:12px;line-height:1.75;color:var(--muted)}
.smart b{font-weight:500;color:var(--soft)}

/* ---- Pagine interne: testata e pannello finale ---- */
.page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:60px;padding:62px 0 52px;border-bottom:1px solid var(--line)}
.page-head h1{margin-top:16px;font-size:clamp(60px,7.6vw,106px);font-weight:400;line-height:1.02;letter-spacing:-.075em}
.page-head h1 span{color:var(--accent)}
.page-head p{max-width:53ch;font-size:14px;line-height:1.8;color:var(--soft)}
.endcta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:65px;margin:24px 0 60px;padding:45px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.endcta h2{max-width:16ch}
.endcta p{font-size:13px;line-height:1.8;color:var(--soft)}
.endcta .cta-row{margin-top:20px}

/* ---- FAQ ---- */
.faq-body{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:60px;padding:40px 0}
.faq-toc{position:sticky;top:24px;display:grid;gap:2px}
.faq-toc a{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding-left:14px;border-left:1px solid var(--line);font-size:13px;color:var(--soft)}
.faq-toc a:hover{border-left-color:var(--accent);color:var(--ink)}
.faq-toc a b{font:400 10px var(--mono);color:var(--muted)}
.faq .grp{padding-bottom:40px;scroll-margin-top:24px}
.faq .grp+.grp{padding-top:28px}
.faq .grp h2{margin-bottom:18px;font-size:23px;font-weight:400;letter-spacing:-.04em}
.faq .qa{border-top:1px solid var(--line)}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq .q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:62px;padding:16px 0;background:none;border:0;text-align:left;font-size:17px;letter-spacing:-.025em;color:var(--ink)}
.faq .q:hover{color:var(--accent)}
.faq .q .chev{position:relative;flex:none;width:28px;height:28px;border:1px solid var(--line-3);border-radius:50%;transition:background .2s,border-color .2s}
.faq .q .chev::before,.faq .q .chev::after{content:"";position:absolute;background:var(--accent);border-radius:1px}
.faq .q .chev::before{top:12px;left:8px;width:10px;height:2px}
.faq .q .chev::after{top:8px;left:12px;width:2px;height:10px;opacity:0;transition:opacity .2s}
.faq .qa.open .q .chev{background:var(--accent);border-color:var(--accent)}
.faq .qa.open .q .chev::before{background:var(--on-accent)}
.js .faq .qa:not(.open) .q .chev::after{opacity:1}
.js .faq .a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq .qa.open .a{max-height:600px}
.faq .a .inner{max-width:78ch;padding:0 64px 22px 0;font-size:14px;line-height:1.8;color:var(--soft)}
.faq .a .inner b{font-weight:500;color:var(--ink)}
.faq .a .inner a{color:var(--accent);border-bottom:1px solid currentColor}

/* ---- Guida: indice (generato da site.js) a sinistra, sezioni a destra ---- */
.guide-body{padding-top:44px;counter-reset:sez}
.js .guide-body{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);column-gap:72px}
.js .guide-body>.toc{grid-column:1;grid-row:1/span 40;position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto}
.js .guide-body>.sec{grid-column:2}
.js .guide-body>.endcta{grid-column:1/-1}
.toc h2{margin-bottom:16px;font:400 11px/1.6 var(--mono);letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.toc ol{list-style:none;border-top:1px solid var(--line)}
.toc li a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12px;color:var(--soft)}
.toc li a:hover{color:var(--ink)}
.toc li a .n{font:400 10px var(--mono);color:var(--muted)}
.guide .sec{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;padding:34px 0;border-top:1px solid var(--line);counter-increment:sez;scroll-margin-top:24px}
.guide-body>.sec:first-child,.guide-body>.toc+.sec{padding-top:0;border-top:0}
.guide .sec::before{content:counter(sez,decimal-leading-zero);grid-column:1;grid-row:1/span 60;padding-top:10px;font:400 13px var(--mono);color:var(--accent)}
.guide .sec>*{grid-column:2}
.guide .sec h2{margin-bottom:16px;font-size:30px;font-weight:400;line-height:1.2;letter-spacing:-.05em}
.guide .sec h3{margin:26px 0 10px;font-size:17px;font-weight:500;letter-spacing:-.02em}
.guide .sec p,.guide .sec li{font-size:14px;line-height:1.8;color:var(--soft)}
.guide .sec p+p,.guide .sec ol+p,.guide .sec ul+p,.guide .sec table+p,.guide .sec figure+p{margin-top:14px}
.guide .sec b{font-weight:500;color:var(--ink)}
.guide .sec a{color:var(--accent);border-bottom:1px solid currentColor}
.guide .sec ol,.guide .sec ul{display:grid;gap:8px;margin-top:14px;list-style:none}
.guide .sec ol{counter-reset:passo}
.guide .sec ol>li{position:relative;padding-left:34px;counter-increment:passo}
.guide .sec ol>li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:0;font:400 11px/2.3 var(--mono);color:var(--muted)}
.guide .sec ul>li{padding-left:13px;border-left:2px solid var(--accent)}
.guide .sec figure{margin-top:22px}
.guide .sec figure img{width:100%;background:var(--panel-3);border:1px solid var(--line);border-radius:7px}
.guide .sec figcaption{margin-top:12px;font-size:12px;color:var(--muted)}
.guide .sec table{width:100%;margin-top:18px;border-collapse:collapse;font-size:13px}
.guide .sec th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);font:400 10px var(--mono);letter-spacing:.075em;text-transform:uppercase;text-align:left;color:var(--muted)}
.guide .sec td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--soft)}
.guide .sec td:first-child{color:var(--ink)}

/* ---- Novita': un mese per riga, le versioni a destra ---- */
.news-body{padding-top:12px;padding-bottom:24px}
.mese{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:72px;padding:40px 0;border-bottom:1px solid var(--line)}
.mese:last-child{border-bottom:0}
.news .month{position:sticky;top:24px;align-self:start;font-size:30px;font-weight:400;line-height:1.2;letter-spacing:-.05em}
.rels{display:grid;gap:14px}
.news .rel{padding:26px 28px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.news .mese:first-child .rel:first-child{background:linear-gradient(110deg,#273b44,#1b262b 70%)}
.news .vh{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.news .mese:first-child .rel:first-child .vh::after{content:'Versione corrente';margin-left:auto;font:400 10px/1.6 var(--mono);letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.news .vpill{font:400 12px var(--mono);color:var(--accent)}
.news .vlead{margin-bottom:14px;font-size:22px;font-weight:400;line-height:1.25;letter-spacing:-.045em}
.news .rel ul{display:grid;gap:9px;list-style:none}
.news .rel li{padding-left:13px;border-left:2px solid var(--accent);font-size:13px;line-height:1.75;color:var(--soft)}
.news .rel b{font-weight:500;color:var(--ink)}

/* ---- Piede del portale (4 colonne) ---- */
.footer-grid{display:grid;grid-template-columns:1.3fr .65fr .65fr 1fr;gap:30px;padding:38px 0;border-top:1px solid var(--line)}
.footer-brand-name{display:block;font-size:22px;line-height:1.2;letter-spacing:-1px}
.footer-brand .brand-mode{font-size:9px}
.footer-brand p{max-width:27ch;margin-top:18px;font-size:11px;line-height:1.7;color:var(--muted)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:11px;color:var(--soft)}
.footer-col .kicker{margin-bottom:10px;font-size:10px}
.footer-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.footer-col .mono{font-size:11px;color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.footer-bottom a{margin-left:8px;color:var(--soft)}
.online{font:400 10px var(--mono);white-space:nowrap}
.online::before{content:'';display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:middle}

/* ---- Schermi medi ---- */
@media (max-width:1050px){
  .nav-menu{gap:4px 22px}
  .pbar-nav{gap:4px 18px}
  .feats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- Tablet e telefoni: le barre diventano menu (solo con JS), griglie su una colonna ---- */
@media (max-width:860px){
  .hero,.show,.strip-head,.ctapanel,.page-head,.endcta,.faq-body,.mese{grid-template-columns:1fr;gap:28px}
  .hero{padding-top:36px}
  .js .guide-body{display:block}
  .js .guide-body>.toc{position:static;max-height:none;margin-bottom:32px}
  .faq-toc,.news .month{position:static}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.3fr 1fr;gap:32px}
  .nav-inner{min-height:85px;flex-wrap:wrap;gap:8px 20px;padding-top:10px;padding-bottom:10px}
  .pbar-inner{flex-wrap:wrap;gap:8px 20px;padding-top:10px;padding-bottom:10px}
  .nav-menu a.x{margin-left:0}
  .js .nav-inner,.js .pbar-inner{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .js .nav-toggle{display:flex}
  .js .pbar-more{display:inline-flex}
  .js .nav-menu,.js .pbar-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 12px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .js .nav-menu.open,.js .pbar-nav.open{display:flex}
  .js .nav-menu a,.js .pbar-nav a{padding:0 16px;border-bottom:1px solid var(--line)}
  .js .nav-menu a:last-child,.js .pbar-nav a:last-child{border-bottom:0}
  .js .pbar-sep{display:none}
  .row{grid-template-columns:1fr;gap:12px}
  .row .voci,.row .pillcell{display:none}
  .row .act{justify-content:flex-start}
}
@media (max-width:640px){.pidx{grid-template-columns:1fr}}
@media (max-width:640px){
  .faq .a .inner{padding-right:0}
  .guide .sec{grid-template-columns:1fr;row-gap:6px}
  .guide .sec::before{grid-row:auto;padding-top:0}
  .guide .sec>*{grid-column:1}
}

/* ---- Telefoni ---- */
@media (max-width:520px){
  .wrap{padding-left:22px;padding-right:22px}
  .brand-name{font-size:23px}
  .display{font-size:clamp(41px,11.15vw,61px);line-height:1.04}
  .hero .kicker-lead{gap:10px;margin-bottom:26px;font-size:9px;letter-spacing:.04em}
  .intro p{font-size:13px}
  .strip{padding:36px 0 40px}
  .strip-head h2{font-size:30px}
  .feats{grid-template-columns:1fr;gap:10px}
  .feat{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:18px}
  .feat .ic{grid-row:span 2;margin:0}
  .feat h3{margin:2px 0 6px;font-size:19px}
  .feat::after{display:none}
  .shots{gap:22px 14px}
  .row{padding:16px 14px}
  .row .act{gap:12px}
  .ctapanel,.endcta{padding:27px 24px}
  .page-head{padding:36px 0}
  .page-head h1{font-size:64px}
  .faq .q{font-size:16px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:27px 20px}
  .footer-brand,.footer-col:last-child{grid-column:1/-1}
  .footer-bottom{display:block}
  .online{display:block;margin-bottom:12px}
  .lb{padding:16px}
  .lb-nav{width:40px;height:54px}
  .lb-x{top:10px;right:12px}
  .vm{padding:10px}
  .vm-box{aspect-ratio:auto;height:78vh}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}