/* SNForge, la landing (v2).
   Un solo accento, il verde, e vuol dire una cosa: fatto e verificato. Il blu notte è la superficie del prodotto.
   Il motivo è il trattino basso del logo: cursore nella chat, barra del lavoro, rotaia del percorso, pulsante primario.
   Font: Geist e Geist Mono incorporati (SIL OFL 1.1, fonti/OFL.txt), nessuna richiesta a terzi. */

@font-face { font-family: "Geist"; src: url("/fonti/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonti/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Ripieghi con le metriche di Geist, perché il cambio di font non sposti il testo. */
@font-face { font-family: "Geist Ripiego"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 95.94%; descent-override: 28.16%; line-gap-override: 0%; size-adjust: 104.76%; }
@font-face { font-family: "Geist Mono Ripiego"; src: local("Menlo"), local("Consolas"), local("Courier New"); ascent-override: 74.67%; descent-override: 21.92%; line-gap-override: 0%; size-adjust: 100%; }

:root {
  --notte: #0b2a3a;
  --notte-2: #0f3447;
  --notte-3: #16435a;
  --notte-riga: #1f4c63;
  --c-testo: #e7eff3;
  --c-testo-2: #a6bdc8;
  --c-testo-3: #8aa4b0;
  --c-bordo: #4f7a8e;
  --c-verde: #3ecf6e;

  --fondo: #f8fafb;
  --superficie: #ffffff;
  --banda: #eef3f5;
  --riga: #d9e2e7;
  --riga-forte: #b9c8d0;
  --testo: #0b2a3a;
  --testo-2: #3d5360;
  --testo-3: #566b77;
  --verde: #1f9a4f;
  --verde-testo: #137a3c;

  --tassello: #0b2a3a;
  --tassello-testo: #ffffff;
  --trattino: #3ecf6e;

  --ombra-console: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(11,42,58,.10), 0 30px 70px -34px rgba(11,42,58,.55), 0 12px 24px -18px rgba(11,42,58,.35);
  --ombra-tessera: 0 1px 2px rgba(11,42,58,.05), 0 8px 24px -16px rgba(11,42,58,.18);

  --sans: "Geist", "Geist Ripiego", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Ripiego", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --largo: 76rem;
  --lato: clamp(1.25rem, 4vw, 2.5rem);
  --esce: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #061822;
    --superficie: #0a2231;
    --banda: #081e2b;
    --riga: #17394a;
    --riga-forte: #2a5569;
    --testo: #e8f0f3;
    --testo-2: #aabfca;
    --testo-3: #8ea6b2;
    --verde: #3ecf6e;
    --verde-testo: #3ecf6e;
    --tassello: #ffffff;
    --tassello-testo: #0b2a3a;
    --trattino: #1f9a4f;
    --ombra-console: 0 0 0 1px #1f4c63, 0 40px 90px -40px rgba(0,0,0,.7);
    --ombra-tessera: 0 0 0 1px rgba(255,255,255,.02);
    color-scheme: dark;
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
code, .mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--tassello); color: var(--tassello-testo); padding: .7rem 1rem; border-radius: 10px; font-weight: 600; text-decoration: none; }
.salta:focus { top: 1rem; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenuto { max-width: var(--largo); margin: 0 auto; padding-inline: var(--lato); }

/* il logo: tassello, «sn», trattino. Segue il tema. */
.logo .t { fill: var(--tassello); }
.logo .s { fill: var(--tassello-testo); font: 500 24px var(--mono); letter-spacing: -.5px; }
.logo .b { fill: var(--trattino); }

/* testata */
.testata { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.testata.staccata { border-bottom-color: var(--riga); }
.testata .contenuto { display: flex; align-items: center; gap: 2rem; height: 4rem; }
.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-size: 1.1875rem; letter-spacing: -.02em; border-radius: 10px; }
.marchio b { font-weight: 650; }
.marchio span { font-weight: 430; }
.marchio svg { width: 1.9rem; height: 1.9rem; flex: none; }
.voci { display: flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .9375rem; }
.voci a { text-decoration: none; color: var(--testo-2); padding: .45rem .7rem; border-radius: 8px; transition: color .15s, background-color .15s; }
.voci a:hover { color: var(--testo); background: var(--banda); }
.voci .lingua { font: 500 .8125rem var(--mono); letter-spacing: .02em; color: var(--testo-2); border: 1px solid var(--riga); padding: .3rem .5rem; margin-inline: .5rem .25rem; }
.voci .bottone { margin-left: .25rem; }
@media (max-width: 900px) { .voci .largo { display: none; } }
@media (max-width: 420px) { .voci .demo-testata { display: none; } }

/* pulsanti. Il primario è il tassello del logo, con il trattino che si allunga. */
.bottone { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.875rem; padding: .7rem 1.2rem; border-radius: 11px; font: 600 1rem/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s var(--esce); -webkit-tap-highlight-color: transparent; }
.voci .bottone { min-height: 2.5rem; padding: .5rem .9rem; font-size: .9375rem; color: var(--testo); }
.bottone:active { transform: scale(.98); }
.bottone.primario { background: var(--tassello); color: var(--tassello-testo); }
.bottone.primario::after { content: ""; flex: none; align-self: flex-end; width: .5rem; height: .19rem; margin: 0 0 .36rem -.35rem; border-radius: 1px; background: var(--trattino); transition: width .25s var(--esce), margin-right .25s var(--esce); }
.voci .bottone.primario { color: var(--tassello-testo); }
.voci .bottone.primario::after { width: .4rem; margin-bottom: .3rem; }
.bottone.primario:hover::after { width: .85rem; margin-right: -.35rem; }
.voci .bottone.primario:hover::after { width: .6rem; margin-right: -.2rem; }
.bottone.primario:hover { background: color-mix(in srgb, var(--tassello) 88%, var(--verde)); }
.bottone.secondario { border-color: var(--riga-forte); color: var(--testo); background: transparent; }
.bottone.secondario:hover { background: var(--banda); border-color: var(--testo-3); }

/* apertura */
.apertura { padding: clamp(2.75rem, 2rem + 3.5vw, 5rem) 0 clamp(3.5rem, 2rem + 5vw, 7rem); overflow: clip; }
.apertura-testo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1.01; letter-spacing: -.045em; font-weight: 600; }
h1 .cursore { display: inline-block; width: .42em; height: .085em; margin-left: .06em; background: var(--verde); border-radius: 1px; vertical-align: baseline; }
.moto h1 .cursore { animation: lampeggia 1.1s steps(1) infinite; }
.moto h1 .cursore.fermo { animation: none; }
@keyframes lampeggia { 50% { opacity: 0; } }
.apertura .sotto { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.55; color: var(--testo-2); max-width: 34rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 900px) { .apertura-testo { grid-template-columns: 1fr; gap: 1.5rem; } }

/* il lavoro: la console dell'apertura */
.lavoro { margin: 0; }
.lav { position: relative; background: var(--notte); color: var(--c-testo); border-radius: 20px; box-shadow: var(--ombra-console); overflow: hidden; font-size: .875rem; line-height: 1.45; }
.lav-testa { position: relative; display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--notte-riga); color: var(--c-testo-2); }
.lav-marca { display: inline-flex; align-items: center; gap: .5rem; font: 500 .8125rem var(--mono); color: var(--c-testo); }
.lav-marca svg { width: 1.25rem; height: 1.25rem; }
.lav-marca .t { fill: #fff; } .lav-marca .s { fill: #0b2a3a; font: 500 24px var(--mono); } .lav-marca .b { fill: #1f9a4f; }
.lav-perc { font-size: .8125rem; }
.lav-perc .sep { color: var(--c-bordo); margin-inline: .35rem; }
.lav-stato { margin-left: auto; font-size: .8125rem; }
.lav-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr); }
.lav-pan { padding: 1.25rem 1.25rem 1.4rem; min-width: 0; }
.lav-pan + .lav-pan { border-left: 1px solid var(--notte-riga); }
.lav-tit { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: .8125rem; font-weight: 500; color: var(--c-testo-2); margin-bottom: .85rem; }
.lav-tit code { color: var(--c-testo); font-size: .78rem; }
.lav-tit .conta { margin-left: auto; font-variant-numeric: tabular-nums; }
.lav-tit.secondo { margin-top: 1.4rem; }
.lav-b { display: flex; flex-direction: column; }
.dest { margin-top: auto; display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--notte-riga); color: var(--c-testo); }
.lav-b .righe { margin-bottom: 1.25rem; }
.righe.log li { grid-template-columns: 3.6rem minmax(0, 1fr); }
.righe.log code { color: var(--c-verde); }
@media (min-width: 761px) { .lav-b .righe li { padding-block: .47rem; } }
.dest .cosa { display: block; font-size: .75rem; color: var(--c-testo-3); }

.bolla { background: var(--notte-2); border: 1px solid var(--notte-riga); border-radius: 12px 12px 12px 4px; padding: .8rem .9rem; }
.bolla .chi { display: block; font-size: .75rem; color: var(--c-testo-3); margin-bottom: .3rem; }
.bolla .msg { color: var(--c-testo); font-size: .9375rem; line-height: 1.5; }
.msg .w { position: relative; }
.lav-evento { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 1.1rem; font-size: .8125rem; color: var(--c-testo-2); }
.lav-evento::before { content: ""; width: .5rem; height: .15rem; border-radius: 1px; background: var(--c-verde); }

.agenti, .righe, .controlli, .catena { list-style: none; margin: 0; padding: 0; }
.lav .catena { padding: 1rem 1.25rem .95rem; }
@media (max-width: 760px) { .lav .catena { padding: .85rem 1rem; } }
.agenti li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: center; padding: .42rem 0; border-top: 1px solid rgba(79,122,142,.22); }
.agenti li:first-child { border-top: 0; }
.agenti b { font-weight: 550; color: var(--c-testo); }
.agenti .cosa { grid-column: 2; font-size: .78rem; color: var(--c-testo-3); }
.agenti .st { grid-row: 1 / span 2; grid-column: 3; }
.agenti .nodo { grid-row: 1 / span 2; }

/* un nodo: vuoto in coda, anello che pulsa al lavoro, pieno con la spunta a lavoro fatto */
.nodo { position: relative; display: block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c-verde); box-shadow: 0 0 0 1.5px var(--c-verde); transition: background-color .25s, box-shadow .25s; }
.nodo::after { content: ""; position: absolute; left: .26rem; top: .12rem; width: .16rem; height: .34rem; border: solid var(--notte); border-width: 0 .1rem .1rem 0; transform: rotate(45deg); transition: opacity .2s; }
.st { display: inline-grid; font-size: .78rem; color: var(--c-testo-2); text-align: right; white-space: nowrap; }
.st > * { grid-area: 1 / 1; opacity: 0; transition: opacity .2s; }
.st > .s-on { opacity: 1; }

.moto [data-k]:not(.on) .nodo { background: transparent; box-shadow: 0 0 0 1.5px var(--c-bordo); }
.moto [data-k]:not(.on) .nodo::after { opacity: 0; }
.moto [data-k].vivo:not(.on) .nodo { box-shadow: 0 0 0 1.5px var(--c-verde); animation: pulsa 1.2s ease-out infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 1.5px var(--c-verde), 0 0 0 0 rgba(62,207,110,.45); } 100% { box-shadow: 0 0 0 1.5px var(--c-verde), 0 0 0 .5rem rgba(62,207,110,0); } }
.moto [data-k]:not(.on) .st > .s-on { opacity: 0; }
.moto [data-k]:not(.on):not(.vivo) .st > .s-pre { opacity: 1; }
.moto [data-k].vivo:not(.on) .st > .s-vivo { opacity: 1; color: var(--c-testo); }

/* le righe dell'update set */
.righe li { display: grid; grid-template-columns: .9rem minmax(0, 11.5rem) minmax(0, 1fr); column-gap: .55rem; align-items: baseline; padding: .34rem .5rem; margin-inline: -.5rem; border-radius: 6px; }
.righe .piu { font: 500 .8125rem var(--mono); color: var(--c-verde); }
.righe code { color: var(--c-testo); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.righe span:last-child { color: var(--c-testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.moto .righe li { transition: opacity .35s var(--esce), transform .35s var(--esce); }
.moto .righe li:not(.on) { opacity: 0; transform: translateX(-.4rem); }
.moto .righe li.on { animation: arriva 1.4s ease-out; }
@keyframes arriva { 0% { background: rgba(62,207,110,.16); } 100% { background: transparent; } }
.conta [data-conta] { display: inline-block; min-width: 1ch; text-align: right; }
.moto .conta:not(.pronto) { visibility: hidden; }

/* la catena degli ambienti, in testa alla console: è anche la barra di avanzamento */
.catena { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1rem 1.25rem .95rem; border-bottom: 1px solid var(--notte-riga); background: color-mix(in srgb, var(--notte) 70%, var(--notte-2)); }
.catena li { position: relative; display: grid; grid-template-rows: auto auto auto; grid-row: span 3; row-gap: .3rem; min-width: 0; padding-right: .75rem; }
@supports (grid-template-rows: subgrid) { .catena { grid-template-rows: auto auto auto; } .catena li { grid-template-rows: subgrid; } }
.catena li:not(:last-child)::after { content: ""; position: absolute; left: 1.25rem; right: .5rem; top: calc(.375rem - 1px); height: 2px; border-radius: 1px; background: var(--c-verde); transform-origin: 0 50%; transition: transform .5s var(--esce), background-color .3s; }
.moto .catena li:not(.on)::after { background: var(--c-bordo); opacity: .45; }
.catena .nodo { margin-bottom: .2rem; }
.catena b { font-weight: 550; font-size: .9375rem; line-height: 1.2; }
.catena .chi { font-size: .75rem; color: var(--c-testo-3); font-weight: 400; margin-left: .45rem; }
.catena .st { text-align: left; white-space: normal; }
.moto .catena .prod.vivo:not(.on) .nodo { background: transparent; box-shadow: 0 0 0 1.5px var(--c-testo); animation: respira 2.2s ease-in-out infinite; }
.moto .catena .prod.vivo:not(.on) .st > .s-vivo { color: #fff; font-weight: 550; }
@media (max-width: 1100px) { .catena .chi { display: block; margin-left: 0; } }
@media (max-width: 760px) {
  .catena { padding: .85rem 1rem; }
  .catena li { padding-right: .4rem; }
  .catena b { font-size: .875rem; }
}

/* controlli */
.controlli li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: center; padding: .42rem 0; color: var(--c-testo); }
.atf { display: inline-flex; gap: .25rem; margin-right: .5rem; }
.atf i { width: .55rem; height: .55rem; border-radius: 2px; background: var(--c-verde); transition: background-color .2s, box-shadow .2s; }
.moto .atf i:not(.on) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-bordo); }
.controlli .fine { display: inline-flex; align-items: center; font-size: .78rem; color: var(--c-testo-2); font-variant-numeric: tabular-nums; }

@keyframes respira { 50% { box-shadow: 0 0 0 1.5px var(--c-testo), 0 0 0 .35rem rgba(231,239,243,.14); } }
.gate { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.1rem; padding: .7rem .8rem; border-radius: 10px; background: var(--notte-2); border: 1px solid var(--notte-riga); font-size: .8125rem; color: var(--c-testo); }
.gate svg { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; color: var(--c-testo-2); }
.gate .st { display: grid; text-align: left; white-space: normal; font-size: .8125rem; color: var(--c-testo); }
.moto .gate { transition: opacity .3s, border-color .3s; }
.moto .gate:not(.vivo):not(.on) { opacity: 0; }
.moto .gate.vivo:not(.on) { border-color: var(--c-testo-3); }
.cr { display: flex; gap: .5rem; align-items: baseline; margin-top: .75rem; font-size: .8125rem; color: var(--c-testo-2); }
.cr code { color: var(--c-testo); font-size: .78rem; }
.moto .cr { transition: opacity .35s; }
.moto .cr:not(.on) { opacity: 0; }
.moto .lav-evento { transition: opacity .3s; }
.moto .lav-evento:not(.on) { opacity: 0; }
.moto [data-scrivi]:not(.pronto) { visibility: hidden; }
.moto .msg .w { opacity: 0; }
.moto .msg .w.on { opacity: 1; }
.moto .msg .w.ultima::after { content: ""; position: absolute; right: -.5em; bottom: .12em; width: .45em; height: .12em; background: var(--c-verde); animation: lampeggia 1s steps(1) infinite; }
.lav.fermo *, .lav.fermo *::after, .anon.fermo *, .anon.fermo *::after { animation-play-state: paused !important; }

.lavoro figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .9375rem; color: var(--testo-3); }
.riproduci { display: none; flex: none; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--riga-forte); background: var(--superficie); color: var(--testo); font: 500 .875rem var(--sans); cursor: pointer; transition: background-color .15s, border-color .15s; }
.riproduci:hover { border-color: var(--testo-3); }
.riproduci svg { width: .8rem; height: .8rem; }
.moto .riproduci { display: inline-flex; }

@media (max-width: 1100px) {
  .lav-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .lav-c { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--notte-riga); display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .lav-c .blocco { min-width: 0; }
}
@media (max-width: 760px) {
  .lav-corpo { grid-template-columns: 1fr; }
  .lav-pan + .lav-pan { border-left: 0; border-top: 1px solid var(--notte-riga); }
  .lav-c { grid-template-columns: 1fr; }
  .lav-c .blocco + .blocco { margin-top: 1.25rem; }
  .lav-pan { padding: 1rem 1rem 1.1rem; }
  .lav-testa { padding: .75rem 1rem; gap: .75rem; }
  .lav-perc .cliente, .lav-perc .sep { display: none; }
  .righe li { grid-template-columns: .8rem minmax(0, 9.5rem) minmax(0, 1fr); }
  .lavoro figcaption { align-items: flex-start; font-size: .875rem; }
}
@media (max-width: 400px) {
  .righe li { grid-template-columns: .8rem minmax(0, 1fr); }
  .righe span:last-child { grid-column: 2; font-size: .75rem; }
  .lav-tit code { font-size: .72rem; }
}

/* sezioni */
.sezione { padding: clamp(4.5rem, 2.5rem + 6vw, 8.5rem) 0; }
.sezione.banda { background: var(--banda); border-block: 1px solid var(--riga); }
h2 { font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.1rem); line-height: 1.06; letter-spacing: -.038em; font-weight: 600; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.intro { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.55; color: var(--testo-2); max-width: 38rem; margin-top: 1rem; }
.capo { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.capo.affiancato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; }
.capo.affiancato .intro { margin-top: 0; }
@media (max-width: 900px) { .capo.affiancato { grid-template-columns: 1fr; } }

/* apparizione allo scorrimento: una sola, breve */
.moto .rivela { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--esce), transform .6s var(--esce); }
.moto .rivela.visto { opacity: 1; transform: none; }

/* il problema: oggi, e con SNForge */
.confronto { border-top: 1px solid var(--riga); }
.confronto .intesta, .confronto li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; }
.confronto .intesta { padding: .9rem 0; font-size: .875rem; color: var(--testo-3); border-bottom: 1px solid var(--riga); }
.confronto .intesta span:last-child { color: var(--verde-testo); font-weight: 500; }
.confronto ol { list-style: none; margin: 0; padding: 0; }
.confronto li { padding: 1.4rem 0; border-bottom: 1px solid var(--riga); align-items: baseline; }
.confronto .oggi { font-size: 1.0625rem; color: var(--testo-2); }
.confronto .ora { position: relative; font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; padding-left: 1.4rem; }
.confronto .ora::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: .17rem; border-radius: 1px; background: var(--verde); }
.confronto .etichetta-riga { display: none; }
@media (max-width: 700px) {
  .confronto .intesta { display: none; }
  .confronto li { grid-template-columns: 1fr; gap: .6rem; }
  .confronto .etichetta-riga { display: block; font-size: .8125rem; font-weight: 400; color: var(--testo-3); margin-bottom: .15rem; }
  .confronto .ora .etichetta-riga { color: var(--verde-testo); font-weight: 500; }
  .confronto .ora::before { top: 2.05em; }
}

/* come funziona: il percorso che si accende */
.percorso { position: relative; }
.percorso-passi { list-style: none; margin: 0; padding: 0; }
.percorso .binario { position: absolute; left: calc(.6875rem - 1px); top: .9rem; bottom: .9rem; width: 2px; background: var(--riga); border-radius: 1px; }
.percorso .binario i { position: absolute; inset: 0; background: var(--verde); transform-origin: 50% 0; transform: scaleY(var(--r, 1)); border-radius: 1px; }
.passo { position: relative; display: grid; grid-template-columns: 1.375rem minmax(0, 1.2fr) minmax(0, 1fr); gap: .5rem 2.25rem; padding: 0 0 2.75rem; }
.passo:last-child { padding-bottom: 0; }
.p-nodo { position: relative; z-index: 1; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px var(--verde); display: grid; place-items: center; transition: box-shadow .3s; }
.banda .p-nodo { background: var(--banda); }
.p-nodo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde); transition: transform .3s var(--esce); }
.moto .passo:not(.acceso) .p-nodo { box-shadow: inset 0 0 0 2px var(--riga-forte); }
.moto .passo:not(.acceso) .p-nodo::before { transform: scale(0); }
.passo h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.025em; margin-top: -.12rem; }
.passo p { color: var(--testo-2); margin-top: .5rem; max-width: 34rem; }
.p-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding-top: .1rem; }
.decide { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--testo); background: var(--superficie); border: 1px solid var(--riga); border-radius: 999px; padding: .3rem .75rem .3rem .55rem; }
.decide svg { width: 1rem; height: 1rem; color: var(--testo-3); }
.decide.persona svg { color: var(--verde-testo); }
.artefatto { font-size: .875rem; color: var(--testo-3); }
.artefatto code { color: var(--testo-2); }
.nota-regola { margin-top: 3rem; padding: 1.1rem 1.25rem; border-left: 2px solid var(--verde); background: var(--superficie); border-radius: 0 12px 12px 0; color: var(--testo-2); max-width: 44rem; box-shadow: var(--ombra-tessera); }
.nota-regola b { color: var(--testo); font-weight: 600; }
@media (max-width: 800px) {
  .passo { grid-template-columns: 1.375rem minmax(0, 1fr); gap: .5rem 1.25rem; }
  .p-meta { grid-column: 2; margin-top: .4rem; }
}

/* dentro: tessere di misure diverse, con contenuto vero */
.tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tessera { background: var(--superficie); border: 1px solid var(--riga); border-radius: 18px; padding: 1.5rem; box-shadow: var(--ombra-tessera); transition: border-color .2s; }
.tessera:hover { border-color: var(--riga-forte); }
.tessera.larga { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
.tessera h3 { margin-bottom: .45rem; }
.tessera p { color: var(--testo-2); font-size: 1rem; }
.tessera .icona, .garanzie .icona { width: 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center; background: var(--banda); color: var(--testo); margin-bottom: 1.1rem; border: 1px solid var(--riga); }
.tessera .icona svg, .garanzie .icona svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 1000px) { .tessere { grid-template-columns: 1fr 1fr; } .tessera.larga { grid-column: 1 / -1; } }
@media (max-width: 680px) { .tessere { grid-template-columns: 1fr; } .tessera.larga { grid-template-columns: 1fr; } }

/* mini interfacce dentro le tessere */
.mini { background: var(--notte); color: var(--c-testo); border-radius: 12px; padding: 1rem; font-size: .8125rem; line-height: 1.5; }
.tessera .mini p { color: var(--c-testo); font-size: .875rem; }
.tessera .mini .dom { color: var(--c-testo-2); margin-bottom: .6rem; }
.mini .ris sup { font: 600 .625rem var(--mono); color: var(--c-verde); padding: 0 .1em; }
.fonti { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--notte-riga); }
.fonti span { display: flex; gap: .5rem; align-items: baseline; color: var(--c-testo-2); font-size: .75rem; }
.fonti b { font: 600 .6875rem var(--mono); color: var(--c-verde); }
.fonti code { color: var(--c-testo); font-size: .72rem; }
.decisioni { list-style: none; margin: 0; padding: 0; }
.decisioni li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .55rem 0; border-top: 1px solid var(--notte-riga); }
.decisioni li:first-child { border-top: 0; padding-top: 0; }
.decisioni b { font-weight: 550; }
.decisioni .dove { grid-column: 1; color: var(--c-testo-3); font-size: .75rem; }
.decisioni .da { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--c-testo-2); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* sicurezza */
.sicura { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: start; }
@media (max-width: 1000px) { .sicura { grid-template-columns: 1fr; } }
.anon { margin: 0; background: var(--notte); color: var(--c-testo); border-radius: 20px; padding: 1.5rem; box-shadow: var(--ombra-console); }
.anon-tit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; font-size: .875rem; color: var(--c-testo-2); }
.anon-tit .riproduci { background: transparent; color: var(--c-testo); border-color: var(--c-bordo); }
.anon-tit .riproduci:hover { border-color: var(--c-testo-2); }
.anon-tit :focus-visible { outline-color: var(--c-verde); }
.fase { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .35rem 1rem; padding: 1rem 0; border-top: 1px solid var(--notte-riga); }
.fase:first-of-type { border-top: 0; padding-top: 0; }
.fase .dove { font-size: .8125rem; color: var(--c-testo-3); padding-top: .2rem; }
.fase .dove b { display: block; color: var(--c-testo); font-weight: 550; font-size: .875rem; }
.fase .frase { font-size: 1rem; line-height: 1.8; color: var(--c-testo); }
.ent { display: inline-grid; vertical-align: bottom; }
.ent > span { grid-area: 1 / 1; transition: opacity .35s var(--esce), transform .35s var(--esce); white-space: nowrap; }
.ent .vero { color: #fff; font-weight: 550; background: rgba(166,189,200,.12); border-radius: 5px; padding: 0 .2em; margin: 0 -.2em; }
.ent .segno { font: 500 .74em/1.95 var(--mono); letter-spacing: -.02em; color: var(--c-verde); background: rgba(62,207,110,.1); border: 1px solid rgba(62,207,110,.35); border-radius: 6px; padding: 0 .25em; text-align: center; align-self: center; }
/* Nel testo fermo la fase 2 mostra i segnaposto (classe m) e le altre i nomi. */
.ent .segno, .ent.m .vero { opacity: 0; transform: translateY(.25em); }
.ent.m .segno { opacity: 1; transform: none; }
.moto .anon .ent[data-k]:not(.on) .segno { opacity: 0; transform: translateY(.25em); }
.moto .anon .ent[data-k]:not(.on) .vero { opacity: 1; transform: none; }
.moto .anon .ent.inv[data-k]:not(.on) .segno { opacity: 1; transform: none; }
.moto .anon .ent.inv[data-k]:not(.on) .vero { opacity: 0; transform: translateY(.25em); }
.moto .anon .fase[data-k] { transition: opacity .4s var(--esce); }
.moto .anon .fase[data-k]:not(.on) { opacity: 0; }
.modello { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; font-size: .8125rem; color: var(--c-testo-2); }
.modello .pacco { position: relative; width: 4.5rem; height: 2px; background: var(--notte-riga); border-radius: 1px; overflow: hidden; }
.modello .pacco i { position: absolute; top: 0; left: 0; width: 1rem; height: 2px; background: var(--c-verde); transform: translateX(3.5rem); }
.moto .anon .modello .pacco i { transform: translateX(-1rem); }
.moto .anon .modello.on .pacco i { animation: viaggia 1s var(--esce) forwards; }
@keyframes viaggia { from { transform: translateX(-1rem); } to { transform: translateX(3.5rem); } }
.anon-piede { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--notte-riga); font-size: .8125rem; color: var(--c-testo-2); }
@media (max-width: 560px) {
  .anon { padding: 1.1rem; }
  .fase { grid-template-columns: 1fr; }
  .fase .dove b { display: inline; margin-right: .4rem; }
}

.garanzie { list-style: none; margin: 0; padding: 0; }
.garanzie li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.2rem 0; border-top: 1px solid var(--riga); }
.garanzie li:first-child { border-top: 0; padding-top: .25rem; }
.garanzie .icona { grid-row: 1 / span 2; margin: 0; background: var(--superficie); }
.garanzie p { color: var(--testo-2); font-size: 1rem; }
.garanzie .ruoli { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.ruoli span { font-size: .8125rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--riga); background: var(--superficie); color: var(--testo-2); white-space: nowrap; }

/* per chi */
.per-chi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--riga); }
.per-chi > div { padding: 1.75rem 2rem 0 0; }
.per-chi > div + div { padding-left: 2rem; border-left: 1px solid var(--riga); }
.per-chi p { color: var(--testo-2); margin-top: .5rem; }
@media (max-width: 800px) { .per-chi { grid-template-columns: 1fr; } .per-chi > div, .per-chi > div + div { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--riga); } }

/* chiusura */
.chiudi { padding: clamp(4rem, 2rem + 5vw, 7rem) 0 clamp(4.5rem, 2.5rem + 6vw, 8rem); }
.chiudi-box { position: relative; overflow: hidden; background: var(--notte); color: var(--c-testo); border-radius: 24px; padding: clamp(2rem, 1rem + 4vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; box-shadow: var(--ombra-console); }
.chiudi-box h2 { color: #fff; }
.chiudi-box p { color: var(--c-testo-2); margin-top: 1rem; font-size: 1.0625rem; max-width: 32rem; }
.chiudi-box .azioni { margin-top: 0; flex-direction: column; align-items: stretch; }
.chiudi-box .bottone.primario { background: #fff; color: var(--notte); }
.chiudi-box .bottone.primario::after { background: #1f9a4f; }
.chiudi-box .bottone.primario:hover { background: #e7eff3; }
.chiudi-box .bottone.secondario { color: #fff; border-color: var(--c-bordo); }
.chiudi-box .bottone.secondario:hover { background: var(--notte-2); border-color: var(--c-testo-2); }
.chiudi-box :focus-visible { outline-color: var(--c-verde); }
.chiudi-box .posta { grid-column: 1 / -1; max-width: none; margin-top: 0; font-size: .9375rem; color: var(--c-testo-2); padding-top: 1.5rem; border-top: 1px solid var(--notte-riga); }
.chiudi-box .posta a { color: var(--c-testo); }
@media (max-width: 860px) { .chiudi-box { grid-template-columns: 1fr; } .chiudi-box .azioni { flex-direction: row; align-items: center; } }

/* piede */
.piede { border-top: 1px solid var(--riga); padding: 2rem 0 2.5rem; font-size: .875rem; color: var(--testo-3); }
.piede .contenuto { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; }
.piede .marchio { font-size: 1rem; color: var(--testo); }
.piede .marchio svg { width: 1.4rem; height: 1.4rem; }
.piede a { color: var(--testo-2); }
.piede .destra { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.piede .legale-riga { flex-basis: 100%; }
@media (max-width: 600px) { .piede .destra { margin-left: 0; } }

/* pagine semplici: privacy e 404 */
.semplice { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(4rem, 2rem + 6vw, 7rem); }
.legale { max-width: 42rem; }
.legale h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); letter-spacing: -.04em; margin-bottom: 1.25rem; }
.legale h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 2.5rem 0 .6rem; }
.legale p { color: var(--testo-2); margin-top: .8rem; }
.legale .intro { margin-top: 0; }
.legale .azioni { margin-top: 2.5rem; }
.vuoto .codice { font: 500 .875rem var(--mono); color: var(--testo-3); margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .bottone:active { transform: none; }
}
@media (forced-colors: active) {
  .nodo, .atf i, .p-nodo::before, .confronto .ora::before, h1 .cursore, .bottone.primario::after, .percorso .binario i { background: CanvasText; }
  .lav, .anon, .mini, .chiudi-box, .tessera { border: 1px solid CanvasText; }
}
@media (max-width: 480px) { .apertura .azioni .bottone { flex: 1 1 12rem; } }

/* il titolo: una frase per riga, così l'a capo non lascia «Tu» in fondo */
#titolo .frase { display: block; }