/* website2.0 — direzione "Tavola tecnica". Token, componenti e stati da design-spec §4–§12. */

@font-face{font-family:Archivo;src:url(../fonts/archivo-var-latin.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2018-201D,U+2026,U+20AC}
@font-face{font-family:Inter;src:url(../fonts/inter-var-latin.woff2)format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2018-201D,U+2026,U+20AC}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jbmono-var-latin.woff2)format("woff2");font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+2018-201D,U+2026,U+20AC}

:root{
  --bg:#F4F1E8;--bg-2:#FAF8F2;--bg-sunken:#EDE9DD;
  --ink:#14161A;--ink-dim:#454A50;--ink-mute:#5F6469;--ink-ghost:#837A6C;
  --rule:#DAD3C4;--rule-strong:#B7AE9C;
  --mark:#A8431C;--mark-press:#8A3413;--mark-tint:#F2E2D6;--signal:#7A5410;
  --vault:#101315;--vault-2:#171C1F;--vault-line:#2A3033;--vault-ink:#EDEAE0;--vault-dim:#A6A9A4;--vault-mark:#E7A46A;
  --focus:#A8431C;--focus-on-dark:#E7A46A;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:40px;
  --w-frame:1240px;--w-prose:66ch;--gap:24px;--pad-inline:clamp(16px,4vw,32px);
  --f-display:Archivo,ui-sans-serif,system-ui,sans-serif;
  --f-text:Inter,ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --t-display:clamp(2.125rem,1.4rem + 3.4vw,4rem);
  --t-h2:clamp(1.625rem,1.15rem + 1.9vw,2.5rem);
  --t-h3:1.1875rem;--t-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --t-body:1.0625rem;--t-small:.9375rem;--t-micro:.8125rem;--t-label:.6875rem;--t-num:.8125rem;
  --r-0:0;--r-dot:999px;
  --b-hair:1px solid var(--rule);--b-control:1px solid var(--ink-dim);
  --sh-header:0 1px 0 var(--rule);--sh-sheet:0 12px 32px rgba(20,22,26,.12);
  --dur-1:120ms;--dur-2:180ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --z-rail:10;--z-header:20;--z-sheet:30;--z-skip:40;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
h2{font-size:var(--t-h2);font-weight:700}
h1 em{background:linear-gradient(transparent 62%,var(--mark-tint) 62%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.35;letter-spacing:-.01em}
p,ul,dl,dd,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
summary{cursor:pointer}
:where(a,summary):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(a,summary):active{transform:translateY(1px)}

.skip-link{position:absolute;top:-100%;left:var(--pad-inline);z-index:var(--z-skip);background:var(--mark);color:var(--bg);padding:var(--s-2) var(--s-4);font:500 var(--t-small)/1.4 var(--f-text);text-decoration:none}
.skip-link:focus{top:var(--s-2)}

.frame{max-width:var(--w-frame);margin-inline:auto;padding-inline:var(--pad-inline)}
@media (min-width:768px){.frame{border-inline:1px solid var(--rule)}}
@media (min-width:1280px){
  .frame:has(> .rail){display:grid;grid-template-columns:64px minmax(0,1fr);padding-inline:0}
  .frame:has(> .rail)>:not(.rail){grid-column:2;padding-inline:var(--pad-inline)}
}
.rail{display:none}
@media (min-width:1280px){
  .rail{display:block;position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);padding:var(--s-6) 0 0 var(--s-4);border-right:var(--b-hair);z-index:var(--z-rail)}
  .rail__item{display:block;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-mute);text-decoration:none;padding:var(--s-3) 0;position:relative}
  .rail__item::before{content:"";position:absolute;left:-12px;top:50%;width:8px;height:8px;margin-top:-4px;background:transparent}
  .rail__item[aria-current="true"]{color:var(--ink)}
  .rail__item[aria-current="true"]::before{background:var(--mark)}
}

.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);border-bottom:var(--b-hair);box-shadow:var(--sh-header)}
.site-header .frame{display:flex;align-items:center;gap:var(--s-5);height:56px;border-inline:0;padding-inline:max(var(--pad-inline),calc((100vw - var(--w-frame))/2))}
.wordmark{display:inline-flex;align-items:center;gap:var(--s-2);font:700 1rem/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.wordmark::before{content:"";width:10px;height:10px;background:var(--mark)}
.navrun{display:none;margin-left:auto;align-self:stretch;border-left:var(--b-hair)}
.cellnav{display:flex}
.cellnav__item{display:inline-flex;align-items:center;height:100%;padding:0 var(--s-4);border-right:var(--b-hair);font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.cellnav__item:hover{background:var(--bg-2);color:var(--ink)}
.cellnav__item[aria-current]{background:var(--ink);color:var(--bg)}
.cellnav__cta{display:inline-flex;align-items:center;height:100%;padding:0 var(--s-5);background:var(--mark);color:var(--bg);font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color var(--dur-1) var(--ease-out)}
.cellnav__cta:hover{background:var(--mark-press)}
.btn--compact{margin-left:auto}
@media (min-width:1024px){.navrun{display:flex}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s-5);border:1px solid transparent;border-radius:0;font:500 1rem/1.2 var(--f-text);text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
@media (min-width:1024px){.btn{min-height:48px}}
.btn--primary{background:var(--mark);color:var(--bg)}
.btn--primary:hover{background:var(--mark-press)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-dim)}
.btn--ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.btn--compact{min-height:40px;padding:0 var(--s-4);background:var(--mark);color:var(--bg);font:500 var(--t-small)/1.2 var(--f-text)}
.btn--compact:hover{background:var(--mark-press)}
/* Una sola CTA da 1024 px in su: resta la cella PARLIAMONE della nav. Deve stare dopo
   .btn/.btn--compact, che sono più avanti nel foglio e vincerebbero la cascata. */
@media (min-width:1024px){.btn--compact,.sheet{display:none}}

.sheet{position:relative}
.sheet summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s-3);border:var(--b-control);font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;list-style:none}
.sheet summary::-webkit-details-marker{display:none}
.sheet[open] summary{background:var(--bg-2)}
.sheet__panel{position:fixed;left:0;right:0;top:56px;z-index:var(--z-sheet);background:var(--bg);border-bottom:1px solid var(--rule-strong);box-shadow:var(--sh-sheet)}
.sheet__panel a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 var(--pad-inline);border-bottom:var(--b-hair);text-decoration:none;font:500 var(--t-small)/1.2 var(--f-text)}

/* Selettore lingua v2: utility di documento, non voce di navigazione. Sta fuori dal
   landmark <nav> (cambia la versione del documento, non la sezione) e non è una cella:
   niente bordo, niente height:100%, Inter 13px, hover senza fondo, corrente sottolineato.
   --mark resta alla CTA: qui il corrente è --ink + sottolineatura, non colore da solo.
   >=1024 sta in .navrun fra la nav e la CTA; <1024 è l'ultima riga del pannello.
   Deve restare dopo la regola ".sheet__panel a" (riga 95): stessa specificità. */
.lang-utility{display:flex;align-items:center;gap:var(--s-2);padding-inline:var(--s-3) var(--s-4)}
.lang-utility a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;color:var(--ink-mute);font:400 var(--t-micro)/1.2 var(--f-text);text-decoration:none;white-space:nowrap;transition:color var(--dur-1) var(--ease-out)}
.lang-utility a:hover{color:var(--ink)}
.lang-utility a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lang-utility__sep{font:400 var(--t-micro)/1 var(--f-text);color:var(--rule-strong);user-select:none}
.lang-utility__label{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.lang-row{border-top:1px solid var(--rule-strong);background:var(--bg-2)}
.lang-row .lang-utility{width:100%;min-height:52px;gap:var(--s-3);padding-inline:var(--pad-inline)}
.lang-row .lang-utility a{min-height:44px;padding:0;border-bottom:0}
.lang-row .lang-utility a:first-of-type{margin-left:auto}
.sheet__panel>a:last-of-type{border-bottom:0}

.sec{position:relative;padding-block:clamp(56px,6vw,96px);scroll-margin-top:56px}
#hero .grid--7-5>:first-child{background-image:repeating-linear-gradient(0deg,rgba(183,174,156,.4),rgba(183,174,156,.4) 1px,transparent 1px,transparent 72px),repeating-linear-gradient(90deg,rgba(183,174,156,.4),rgba(183,174,156,.4) 1px,transparent 1px,transparent 72px)}
.sec--alt{background:var(--bg-sunken)}
.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);padding-bottom:var(--s-3);border-bottom:var(--b-hair);margin-bottom:var(--s-5)}
.sec__num{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;color:var(--mark)}
.sec__label{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.sec__meta{margin-left:auto;font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.sec>*+*{margin-top:var(--s-5)}

.grid{display:grid;gap:var(--gap)}
.grid>:where(div,aside,figure,form)>*+*{margin-top:var(--s-4)}
.grid>:where(div,aside,figure)>h1,.grid>:where(div,aside,figure)>h2{margin-top:var(--s-2)}
.grid>div:not(.plan)>*+*{margin-top:var(--s-4)}
@media (max-width:767px){.grid{gap:var(--s-4)}}
@media (min-width:768px){
  .grid--7-5{grid-template-columns:7fr 5fr}
  .grid--5-7{grid-template-columns:5fr 7fr}
  .grid--4-4-4{grid-template-columns:repeat(3,1fr)}
  .grid--6-6{grid-template-columns:1fr 1fr}
}

.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-dim);max-width:var(--w-prose)}
.prose{max-width:var(--w-prose)}
.prose li+li{margin-top:var(--s-2)}
.prose li{position:relative;padding-left:var(--s-4)}
.prose li::before{content:"·";position:absolute;left:0;color:var(--mark)}
.micro{font-size:var(--t-micro);line-height:1.45;color:var(--ink-mute);max-width:var(--w-prose)}
.label{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.num{font:500 var(--t-num)/1.2 var(--f-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.spec{font:400 var(--t-micro)/1.45 var(--f-mono);color:var(--ink-mute);max-width:var(--w-prose)}
aside.micro{border-left:2px solid var(--signal);padding-left:var(--s-4);color:var(--signal)}
main p>a:not(.btn){text-decoration:none;border-bottom:1px solid var(--rule-strong);transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
main p>a:not(.btn):hover{border-color:var(--mark);color:var(--mark)}
blockquote{padding-left:var(--s-5);border-left:2px solid var(--mark);font-size:var(--t-lead);line-height:1.45;max-width:var(--w-prose)}
blockquote footer{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:var(--s-3)}

.ledger{border-top:var(--b-hair)}
.ledger>div{display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-bottom:var(--b-hair)}
.ledger h3{margin:0}
.ledger p{max-width:var(--w-prose)}
.plate .ledger dt{font:700 1.5rem/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ledger dd{color:var(--ink-dim)}

.plan{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6) var(--s-5);background:var(--bg-2);border:var(--b-hair)}
.plan>*+*{margin:0}
.plan--featured{border:2px solid var(--mark)}
.plan .micro{max-width:none}
.plan__price{display:block;margin-top:auto;padding-top:var(--s-4);border-top:var(--b-hair);font-family:var(--f-display);font-weight:700;font-size:2.5rem;line-height:1;letter-spacing:-.02em;color:var(--mark)}
@media (max-width:767px){.plan{padding:var(--s-5) var(--s-4)}}

.plate{padding:var(--s-4);border:var(--b-hair);background:var(--bg-2)}
.plate img{margin-top:var(--s-2);width:100%;background:var(--bg-sunken)}
.plate picture{display:block;margin-top:0}
.grid>.plate:has(picture){align-self:start}
.plate__cap{display:block;font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
/* spec §6.6 / §11.2: la plate della banda AI privata, sotto 768, è 4:5 con tetto 60vh
   — solo qui `object-fit` ha una cornice da riempire, sul resto vale `height:auto` (§5.5). */
@media (max-width:767px){#ai-privata .plate img,#confidential-ai .plate img{aspect-ratio:4/5;max-height:60vh;object-fit:cover}}

/* fig. 00 — la misura del divario. Classi dichiarate in sistema-immagini-v2.md §3.1:
   .fig .fig__cap .fig__axis .fig__mark .fig__mark--pmi .fig__mark--grandi */
.fig__cap{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 var(--s-2)}
.fig__axis{position:relative;height:48px;border-bottom:1px solid var(--rule-strong)}
.fig__axis::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--rule-strong) 0 1px,transparent 1px calc(100%/10))}
.fig__axis::after{content:"";position:absolute;left:8%;right:29%;bottom:0;height:3px;background:var(--mark-tint)}
.fig__mark{position:absolute;bottom:0;transform:translateX(-50%);padding-bottom:9px;white-space:nowrap;
  font:500 var(--t-label)/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.fig__mark::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:8px;background:currentColor}
.fig__mark b{display:block;margin-bottom:2px;font:700 .875rem/1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.fig__mark--pmi{left:8%;color:var(--mark)}
.fig__mark--pmi b{color:var(--mark)}
.fig__mark--grandi{left:71%}

table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
caption{text-align:left;font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:var(--s-2)}
th,td{text-align:left;vertical-align:top;padding:var(--s-3) var(--s-3) var(--s-3) 0;border-bottom:var(--b-hair)}
th{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
td p{color:var(--ink-dim)}

footer{border-top:var(--b-hair);padding-block:var(--s-7);background-image:repeating-linear-gradient(0deg,rgba(183,174,156,.28),rgba(183,174,156,.28) 1px,transparent 1px,transparent 72px),repeating-linear-gradient(90deg,rgba(183,174,156,.28),rgba(183,174,156,.28) 1px,transparent 1px,transparent 72px)}
footer .grid--4-4-4{grid-template-columns:repeat(3,1fr)}
footer ul{display:grid;gap:var(--s-2)}
footer a{text-decoration:none;border-bottom:1px solid transparent;color:var(--ink-dim);transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
footer a:hover{border-color:var(--mark);color:var(--ink)}
@media (max-width:767px){footer .grid--4-4-4{grid-template-columns:1fr;gap:var(--s-5)}}

#notfound{min-height:calc(100vh - 56px);display:grid;align-content:center;gap:var(--s-4)}
#notfound .num{font:800 clamp(88px,18vw,200px)/1 var(--f-display);letter-spacing:-.04em;color:var(--ink-ghost)}
#notfound .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
#notfound .cta__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}

/* §06: indirizzo = target a sé, min-height 24 (2.5.8); no wrap a 768 (sfora nel gap). Idem 404. */
.grid--6-6 .spec a,#notfound .cta__links a{display:inline-flex;align-items:center;min-height:24px;white-space:nowrap}
/* Cella PARLIAMONE su --mark: anello interno, l'esterno esce dalla barra. */
.cellnav__cta:focus-visible{outline:2px solid var(--bg);outline-offset:-3px}

.js [data-reveal]{opacity:0;transform:translateY(8px)}
.js [data-reveal="in"]{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}

.frame-open{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-skip);pointer-events:none;color:var(--rule-strong)}
.frame-open path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .js .frame-open path{stroke-dashoffset:100;animation:frame-draw 300ms var(--ease-inout) both}
  .js .frame-open path:nth-of-type(2){animation-delay:200ms}
  .js .frame-open path:nth-of-type(3){animation-delay:400ms}
  .js .frame-open path:nth-of-type(4){animation-delay:600ms}
}
@keyframes frame-draw{to{stroke-dashoffset:0}}
@media (max-width:767px){.frame-open{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}
@media (prefers-contrast:more){
  :root{--rule:var(--ink-dim);--rule-strong:var(--ink-dim);--ink-mute:var(--ink-dim);--ink-ghost:var(--ink-dim);--vault-dim:var(--vault-ink)}
  h1 em{background:var(--mark-tint);border-bottom:2px solid var(--mark)}
}