/* CSS della home approvata (artefatto 6DSVi1nQumRG7MH8bo7J7G), invariato */

/* Home MAST in 6 sezioni, stile GetLayers "Ridgeline" (ridgeline-style): la pagina e UNA card #fcfcfc raggio 32px su un campo #f5f6f7,
   un pozzo bianco dentro, il blu notte #133153 solo per il pannello d'apertura, i pulsanti pieni e il piede.
   Instrument Sans per cio che parla, Geist Mono per cio che etichetta. Niente foto: nell'apertura la rete di nodi dentro il pannello.
   VERSIONE "CON PERSONALITA" v2 (5-11): rete che parla (rete-masttek.js), console di esercizio con note, risultati che si riempiono
   allo scorrimento, verde vivo come firma, mappa con sede e zone. Il verde #429e5c ha UN solo significato: "in esercizio adesso". */
:root {
  --page: #fcfcfc; --surface: #ffffff; --soft: #f5f6f7; --deep: #133153; --deep-2: #0e1c32;
  --ink: #0e2035; --muted: #5e6d7e; --on-dark: #ffffff; --on-dark-muted: #bdb9b3;
  --line: #e4e7e5; --line-soft: rgba(18,22,27,.12); --line-warm: #e2dcd2; --live: #429e5c; --track: #dee3e8;
  --shadow-card: 0 2px 12px rgba(0,0,0,.05); --shadow-pop: 0 8px 24px rgba(0,0,0,.12);
  --sans: "Instrument Sans", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth; background: var(--soft) }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--soft); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance }
p { margin: 0 }
a { color: inherit }
a:focus-visible, button:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px }
.mono { font: 500 14px/1.3 var(--mono); letter-spacing: .0625rem; text-transform: uppercase }

/* avviso prototipo (fuori dalla card) */
.avviso { text-align: center; font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); padding: 10px 16px 0 }
.avviso b { color: var(--ink); font-weight: 500 }

/* campo -> card -> pozzo (niente overflow:hidden nella catena: la testata e sticky) */
.campo { padding: 12px 16px 16px }
.card { background: var(--page); border-radius: 32px; box-shadow: var(--shadow-card) }
.pozzo { background: var(--surface); border-radius: 32px 32px 0 0; padding: 16px 16px 0 }
.max { max-width: 1312px; margin: 0 auto }

/* barra di stato */
.stato { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px 14px; color: var(--muted) }
.stato .dx { display: flex; gap: 22px }

/* testata: targa che resta in alto dentro il pozzo */
header.testata { position: sticky; top: 16px; z-index: 20; margin-bottom: 16px }
.targa { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 10px 0 24px; border-radius: 20px;
  background: rgba(255,255,255,.86); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card) }
.marchio { font: 700 22px/1 var(--sans); letter-spacing: -.04em; text-decoration: none; color: var(--ink) }
.voci { display: flex; align-items: center; gap: 26px }
.voci a { text-decoration: none; color: var(--muted); transition: color 150ms var(--ease) }
.voci a:hover { color: var(--ink) }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 28px; border: 0; cursor: pointer;
  font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease) }
.pill.piena { background: var(--deep); color: #fff }
.pill.piena:hover { background: var(--deep-2) }
.pill.chiara { background: #fff; color: var(--deep) }
.pill.chiara:hover { background: #e9eef4 }
.pill.vuota { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft) }
.pill.vuota:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.pill .fr { transition: transform 250ms var(--ease) } .pill:hover .fr { transform: translateX(3px) }
.voci .pill, .voci .pill:hover { color: #fff }
.apri { display: none; height: 44px; padding: 0 18px; border-radius: 28px; border: 1px solid var(--line-soft); background: #fff; color: var(--ink); cursor: pointer; font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; align-items: center; gap: 10px }
.apri i { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; display: block }
.menu-mob { margin-top: 10px; border-radius: 20px; background: var(--deep); padding: 10px 22px 22px; display: grid }
.menu-mob a { color: #fff; text-decoration: none; font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14) }
.menu-mob .pill { margin-top: 20px; border-bottom: 0; font: 500 14px/1 var(--mono); padding: 0 22px }

/* 1 apertura: pannello blu notte con la rete di nodi */
.apertura { position: relative; border-radius: 24px; overflow: hidden; background: var(--deep); color: #fff; min-height: min(760px, calc(100svh - 150px)); display: grid; align-content: end }
#ordine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease }
#ordine.pronto { opacity: 1 }
.velo { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(19,49,83,.97) 0%, rgba(19,49,83,.9) 38%, rgba(19,49,83,.25) 60%, rgba(19,49,83,0) 75%),
  linear-gradient(0deg, rgba(14,28,50,.6) 0%, rgba(14,28,50,0) 35%) }
.apertura .dentro { position: relative; padding: clamp(28px, 4vw, 56px); display: grid; gap: 26px; max-width: 780px }
.apertura .ciglio { color: rgba(255,255,255,.65) }
.apertura h1 { color: #fff; font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1.05; letter-spacing: -0.035em }
.apertura h1 .spenta { color: rgba(255,255,255,.6); display: block }
.apertura .frase { font-size: clamp(18px, 1.5vw, 20px); color: rgba(255,255,255,.82); max-width: 48ch }
.azioni { display: flex; flex-wrap: wrap; gap: 12px }
.azioni .pill.vuota { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) }
.azioni .pill.vuota:hover { box-shadow: inset 0 0 0 1px #fff }
.vetri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start }
.vetro { border-radius: 18px; padding: 9px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff }
.registro { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: grid; gap: 10px; width: 270px }
.registro div { border-radius: 16px; padding: 14px 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.registro b { display: block; font: 700 28px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.registro span { display: block; color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.4; margin-top: 2px }

/* arrivi: per riga, scorrendo di lato o dal basso, mai una dissolvenza del blocco */
.sale { animation: sale .7s var(--ease) both }
.lato-in { animation: lato .8s var(--ease) both }
@keyframes sale { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@keyframes lato { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
.d1 { animation-delay: .1s } .d2 { animation-delay: .25s } .d3 { animation-delay: .38s } .d4 { animation-delay: .5s } .d5 { animation-delay: .62s }
.rivela { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.rivela.vista { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .sale, .lato-in { animation: none } .rivela { opacity: 1; transform: none; transition: none } #ordine { transition: none } }

/* sezioni */
.sez { padding: clamp(56px, 6.5vw, 92px) clamp(8px, 2vw, 32px); scroll-margin-top: 100px }
.testa { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 820px }
.testa .ciglio { color: var(--deep) }
.testa h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }
.testa h2 .spenta { color: var(--muted) }
.testa p { font-size: 19px; color: var(--muted); max-width: 60ch }

/* 2 problema -> disciplina: pannello grigio con sei card */
.pannello-grigio { background: var(--soft); border-radius: 32px; padding: clamp(20px, 3vw, 40px) }
.servizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1240px) { .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.binario { display: none; align-items: center; gap: 12px; padding: 16px 16px 2px 0; color: var(--muted) }
.binario i { flex: 1; height: 2px; background: var(--track); border-radius: 2px; position: relative }
.binario b { position: absolute; left: 0; top: 0; bottom: 0; width: 12.5%; background: var(--deep); border-radius: 2px; transition: left 250ms var(--ease) }
.servizio { background: #fff; border-radius: 20px; padding: 26px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow-card); min-width: 0 }
.servizio .prob { color: var(--muted); display: flex; gap: 10px }
.servizio .prob em { font-style: normal; color: var(--deep) }
.servizio h3 { font-size: 26px; line-height: 1.18; letter-spacing: -0.025em; font-weight: 600; color: var(--ink) }
.servizio .disc { justify-self: start; background: #e9eef4; color: var(--deep); border-radius: 16px; padding: 7px 12px; font-size: 12.5px; letter-spacing: .03em; transition: background .25s var(--ease), color .25s var(--ease) }
.servizio:hover .disc, .servizio:focus-visible .disc { background: var(--deep); color: #fff }
.servizio p { color: var(--muted); font-size: 16.5px }
.servizio ul { margin: 4px 0 0; padding: 14px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line) }
.servizio li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 15.5px; line-height: 1.45 }
.servizio li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--deep); margin-top: 7px }

/* 3 prove: dichiarazione + quattro numeri + certificazioni */
.dichiara { font-size: clamp(1.6rem, 3.1vw, 2.5rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--muted); max-width: 30ch; font-weight: 500 }
.dichiara b { color: var(--ink); font-weight: 600 }
.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line) }
.numeri div { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0 }
.numeri div + div { padding-left: 24px; border-left: 1px solid var(--line) }
.numeri b { font: 700 clamp(44px, 5vw, 72px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink) }
.numeri .cifra { display: flex; align-items: baseline; gap: 10px }
.numeri small { font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; color: var(--muted) }
.numeri span { color: var(--muted); font-size: 15.5px; line-height: 1.5 }
.cert { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px }
.chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 18px; padding: 10px 16px; background: var(--soft); border: 1px solid var(--line); color: var(--ink) }
.chip .spunta { width: 18px; height: 18px; border-radius: 50%; background: var(--deep); display: grid; place-items: center }
.chip .spunta::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) }
.chip span.desc { font: 400 15px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted) }

/* 4 metodo: fisarmonica a cinque passi, la prima aperta */
.fisa { display: grid; gap: 12px }
.passo { border-radius: 20px; background: var(--soft); border: 1px solid var(--line); transition: background 250ms var(--ease) }
.passo[data-aperto="true"] { background: #fff; box-shadow: var(--shadow-card) }
.passo > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 40px; gap: 16px; align-items: center; padding: 22px 26px }
.passo > button:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; border-radius: 20px }
.passo .n { color: var(--deep) }
.passo h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em }
.passo .meta { color: var(--muted) }
.passo .giro { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: transform 300ms var(--ease), background 250ms var(--ease), color 250ms var(--ease) }
.passo[data-aperto="true"] .giro { transform: rotate(90deg); background: var(--deep); color: #fff; border-color: var(--deep) }
.passo .corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease) }
.passo[data-aperto="true"] .corpo { grid-template-rows: 1fr }
.passo .corpo > div { overflow: hidden }
.passo .corpo .in { padding: 0 26px 26px 106px; display: grid; gap: 18px; max-width: 900px }
.passo .corpo p { font-size: 18px; color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .passo .corpo, .passo .giro { transition: none } }
.nota-met { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; color: var(--muted) }

/* 5 settori */
.settori { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; align-items: start; padding: 48px clamp(8px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.settori h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin-top: 12px }
.settori .chips { display: flex; flex-wrap: wrap; gap: 10px }
.settori .chip, .settori-chips .chip { font: 400 16px/1.3 var(--sans); background: #fff }
.settori-chips { display: flex; flex-wrap: wrap; gap: 10px }
.link { color: var(--deep); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px }
.settori .link { display: inline-block; margin-top: 18px }

/* 6 chiusura */
.chiusura { padding: clamp(56px, 6.5vw, 92px) clamp(8px, 2vw, 32px) }
.chiusura .riquadro { border-radius: 24px; background: var(--soft); border: 1px solid var(--line); padding: clamp(28px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end }
.chiusura h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }
.chiusura h2 .spenta { color: var(--muted) }
.chiusura .lato { display: grid; gap: 20px; justify-items: start }
.chiusura .lato p { color: var(--muted); font-size: 18px }
.garanzie { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px }
.garanzie div { background: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 6px; border: 1px solid var(--line) }
.garanzie b { font-weight: 600; font-size: 17px }
.garanzie span { color: var(--muted); font-size: 15px }

/* piede blu notte, a filo della card */
footer { background: var(--deep); color: rgba(255,255,255,.82); border-radius: 32px 32px 32px 32px; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px) 28px; margin-top: 0; container-type: inline-size }
footer .alto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px }
footer .slogan { font: 700 clamp(1.8rem, 3.4vw, 2.75rem)/1.1 var(--sans); letter-spacing: -0.035em; color: #fff }
footer .slogan span { color: rgba(255,255,255,.55); display: block }
footer .griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-block: 1px solid rgba(255,255,255,.14); padding-block: 24px }
footer .griglia .mono { color: rgba(255,255,255,.75); display: block; margin-bottom: 10px; font-size: 12.5px }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px }
footer a { text-decoration: none } footer a:hover { color: #fff }
footer .parola { font: 700 30cqw/0.86 var(--sans); letter-spacing: -0.06em; color: #fff; margin: 32px 0 12px; white-space: nowrap }
footer .legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--on-dark-muted); font-size: 12.5px }

/* ===== personalita ===== */
/* verde vivo: un solo significato, "in esercizio adesso" */
.vivo-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; vertical-align: 1px; animation: vivo 2.6s ease-out infinite }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(66,158,92,.5) } 70%, 100% { box-shadow: 0 0 0 7px rgba(66,158,92,0) } }
@media (prefers-reduced-motion: reduce) { .vivo-punto { animation: none; box-shadow: 0 0 0 4px rgba(66,158,92,.18) } }
.stato .dx .vivo-voce { display: inline-flex; align-items: center; gap: 10px; color: var(--ink) }

/* etichette della rete, posizionate dallo script con la proiezione dello shader */
.etichette { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.et { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: .05rem; color: rgba(255,255,255,.86); padding: 5px 9px; border-radius: 8px;
  background: rgba(14,28,50,.62); white-space: nowrap; opacity: 0; transition: opacity .35s var(--ease), background .25s var(--ease), color .25s var(--ease); display: inline-flex; align-items: center; gap: 7px }
.et.acceso { background: #fff; color: var(--deep) }
.et.esercizio { color: #fff }
.registro .vivo-riga { display: flex; align-items: center; gap: 8px }
.vetri button.vetro { font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease) }
.vetri button.vetro:hover, .vetri button.vetro[aria-pressed="true"] { background: #fff; color: var(--deep) }

/* mini rete accanto alle card */
.testa-due { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px) }
.testa-due .testa { margin-bottom: 0 }
.mini-rete { position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: var(--deep) }
.mini-rete canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.mini-rete .didascalia { position: absolute; left: 16px; bottom: 14px; right: 16px; color: rgba(255,255,255,.75); font-size: 12px }
.servizio { transition: box-shadow .25s var(--ease), transform .25s var(--ease) }
.servizio:hover, .servizio:focus-visible { box-shadow: var(--shadow-pop); transform: translateY(-2px); outline: none }
.servizio:focus-visible { box-shadow: 0 0 0 2px var(--deep), var(--shadow-pop) }

/* risultati: la dichiarazione si riempie lettera per lettera, da grigio a inchiostro, con lo scorrimento */
#manifesto .l { color: #b9c2cc; transition: color .25s linear }
#manifesto .l.piena { color: var(--ink) }
#manifesto .w { white-space: nowrap }

/* il lavoro, da vicino: console di esercizio (cliente e-commerce anonimo) con note */
.console { position: relative; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04), var(--shadow-pop); overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--ink) }
.console .mono, .console .m { font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: none }
.cn-barra { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; height: 38px; padding: 0 14px; background: var(--soft); border-bottom: 1px solid var(--line) }
.cn-barra .pallini { display: flex; gap: 7px } .cn-barra .pallini i { width: 10px; height: 10px; border-radius: 50%; background: #d3d9df }
.cn-barra .titolo { text-align: center; color: var(--muted) }
.cn-app { display: grid; grid-template-columns: 196px minmax(0, 1fr) }
.cn-lato { background: var(--deep-2); color: rgba(255,255,255,.78); padding: 16px 12px; display: grid; align-content: start; gap: 4px }
.cn-lato .logo { color: #fff; font: 700 17px/1 var(--sans); letter-spacing: -.03em; padding: 4px 10px 14px; display: flex; align-items: baseline; gap: 8px }
.cn-lato .logo span { font: 500 11px/1 var(--mono); color: rgba(255,255,255,.55); letter-spacing: .05em }
.cn-lato a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; font-size: 13.5px }
.cn-lato a i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .7 }
.cn-lato a.att { background: rgba(255,255,255,.1); color: #fff }
.cn-lato .amb { margin-top: 18px; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; color: rgba(255,255,255,.6) }
.cn-lato .amb b { color: #fff; font: 600 13px/1.3 var(--sans) }
.cn-main { padding: 18px 20px 20px; background: #fbfcfc; display: grid; gap: 14px; min-width: 0 }
.cn-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px }
.cn-testa .briciole { color: var(--muted) }
.cn-testa h4 { margin: 4px 0 0; font: 600 19px/1.2 var(--sans); letter-spacing: -.02em }
.cn-stato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.pill-stato { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 20px; background: rgba(66,158,92,.1); color: #23633a; font-weight: 600; font-size: 12.5px }
.cn-stato .agg { color: var(--muted) }
.cn-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0 }
.cn-panel h5 { margin: 0 0 10px; font: 600 13px/1.2 var(--sans); display: flex; justify-content: space-between; align-items: center; gap: 8px }
.cn-panel h5 .m { color: var(--muted); font-weight: 500 }
.cn-sorgenti { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px }
.sorg { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: grid; gap: 4px; background: #fff; min-width: 0 }
.sorg b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sorg .m { color: var(--muted) }
.sorg .ok { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--deep); margin-right: 6px; vertical-align: 1px }
.sorg .corso { display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--deep); margin-right: 6px; vertical-align: 0 }
.sorg svg { width: 100%; height: 18px; display: block }
.cn-riga { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px }
.cn-schede { display: flex; gap: 6px; flex-wrap: wrap }
.cn-schede span { font: 500 11.5px/1 var(--mono); padding: 5px 9px; border-radius: 14px; border: 1px solid var(--line); color: var(--muted) }
.cn-schede span.att { background: var(--deep); border-color: var(--deep); color: #fff }
.cn-grafico svg { width: 100%; height: auto; display: block; margin-top: 6px }
.cn-grafico h5 { flex-wrap: wrap; row-gap: 6px }
.cn-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); margin-top: 6px }
.cn-legenda i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--deep); vertical-align: 3px; margin-right: 6px }
.cn-legenda i.prev { border-top-style: dashed } .cn-legenda i.banda { height: 8px; border: 0; background: rgba(19,49,83,.12); vertical-align: 0 } .cn-legenda i.sog { border-top: 1.5px dashed var(--muted) }
.fase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line) }
.fase:first-of-type { border-top: 0 }
.fase b { font-weight: 500; font-size: 12.5px }
.fase .m { color: var(--muted); text-align: right }
.fase .bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: var(--track); overflow: hidden }
.fase .bar i { display: block; height: 100%; background: var(--deep); border-radius: 3px }
.cn-tab { width: 100%; border-collapse: collapse; font-size: 12.5px }
.cn-tab th { text-align: left; font: 500 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line) }
.cn-tab td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle }
.cn-tab tr:last-child td { border-bottom: 0 }
.cn-tab .m { color: var(--muted) }
.tag { display: inline-block; font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); margin: 1px 4px 1px 0; color: var(--ink) }
.sku { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line) }
.sku:first-of-type { border-top: 0 }
.sku .m { color: var(--muted) }
.sku .st { font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; align-self: center }
.sku .st.sotto { background: var(--deep); color: #fff; border: 1px solid var(--deep) }
.sku .st.in { background: var(--soft); color: var(--muted); border: 1px solid var(--line) }
.nota-verde { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 15px }
.davicino { position: relative; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); padding: clamp(14px, 2vw, 24px) }
.punto-nota { position: absolute; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; display: grid; place-items: center }
/* (richiesta della persona) i punti da toccare sono rossi, con la scritta "(clicca qui)" accanto: anche quello di "In esercizio", perché qui il rosso vuol dire "puoi cliccare" */
.punto-nota::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #d42d2d; box-shadow: 0 0 0 5px rgba(212,45,45,.2) }
.punto-nota::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(212,45,45,.6); animation: battito 2.4s ease-out infinite }
.punto-nota.vivo::before { background: var(--live); box-shadow: 0 0 0 5px rgba(66,158,92,.2) }
.punto-nota.vivo::after { border-color: rgba(66,158,92,.6) }
.punto-rosso { display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: 0.05em; border-radius: 50%; background: #d42d2d; box-shadow: 0 0 0 4px rgba(212,45,45,.2) }
.punto-nota .tocca { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11.5px/1 var(--mono); color: #b42323; background: #fff; border: 1px solid rgba(212,45,45,.35); border-radius: 999px; padding: 4px 8px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.punto-nota.vivo .tocca { color: #2f7a45; border-color: rgba(66,158,92,.45) }
.punto-nota.dx .tocca { right: auto; left: 30px }
.punto-nota[aria-expanded="true"] .tocca { opacity: 0 }
.punto-nota .clicca { display: none;  position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11.5px/1 var(--mono); color: #b42323; background: #fff; border: 1px solid rgba(212,45,45,.35); border-radius: 999px; padding: 4px 8px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.punto-nota.sx .clicca { left: auto; right: 30px }
.punto-nota[aria-expanded="true"] .clicca { opacity: 0 }
@keyframes battito { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .punto-nota::after { animation: none; opacity: 0 } }
.punto-nota:focus-visible { outline: 2px solid #b42323; outline-offset: 2px }
.nota { position: absolute; z-index: 5; max-width: 250px; background: var(--deep); color: #fff; border-radius: 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease) }
.nota.aperta { opacity: 1; transform: none }
.nota .cursore { display: inline-block; width: 7px; height: 13px; background: #fff; vertical-align: -2px; margin-left: 2px; animation: lampo 1s steps(1) infinite }
@keyframes lampo { 50% { opacity: 0 } }

/* mappa: sede e zone in cui lavoriamo */
.segno { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center }
.segno::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(19,49,83,.25); transition: transform .2s var(--ease) }
.segno:hover::before, .segno[aria-expanded="true"]::before { transform: scale(1.35) }
.segno.sede { width: 40px; height: 40px; margin: -20px 0 0 -20px }
.segno.sede::before { width: 16px; height: 16px; box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(19,49,83,.22) }
.segno.sede::after { content: "Sede"; position: absolute; left: 34px; top: 9px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--deep); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; pointer-events: none }
.segno:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; border-radius: 50% }
.luogo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: center; padding: 48px clamp(8px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.luogo h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin: 12px 0 18px }
.mappa { position: relative; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); aspect-ratio: 1 / 1.02; max-width: 520px; width: 100%; justify-self: end }
.mappa svg { position: absolute; inset: 6%; width: 88%; height: 88%; display: block }
.pop { position: absolute; z-index: 4; width: 250px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-pop); padding: 14px 16px; display: grid; gap: 6px; font-size: 15px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease) }
.pop.aperta { opacity: 1; transform: none }
.pop b { font-size: 17px }
.pop .mono { font-size: 12px; color: var(--muted) }


@media (max-width: 1024px) {
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .registro { display: none }
}
@media (max-width: 860px) {
  .voci, .stato .dx { display: none } .apri { display: inline-flex }
  .apertura { min-height: 0; align-content: start }
  .apertura .dentro { padding: 260px 22px 26px }
  .velo { background: linear-gradient(180deg, rgba(19,49,83,0) 0, rgba(19,49,83,0) 200px, rgba(19,49,83,.92) 290px, rgba(19,49,83,.96) 100%) }
  /* telefono: le sei card diventano un binario che scorre di lato, come il binario dei lavori di Ridgeline */
  .pannello-grigio { padding: 16px 0 16px 16px }
  .servizi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-right: 16px; scrollbar-width: none }
  .servizi::-webkit-scrollbar { display: none }
  .servizio { flex: 0 0 84%; scroll-snap-align: start }
  .binario { display: flex !important }
  .cert { display: grid }
  .cert .chip { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px }
  .cert .chip .desc { grid-column: 2 }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .numeri div:nth-child(3) { padding-left: 0; border-left: 0 }
  .numeri div { padding-bottom: 24px }
  .passo > button { grid-template-columns: 44px minmax(0, 1fr) 40px; padding: 18px }
  .passo .meta { display: none }
  .passo .corpo .in { padding: 0 18px 22px 18px }
  .settori, .chiusura .riquadro, footer .alto, .testa-due, .luogo { grid-template-columns: 1fr }
  .mini-rete { height: 240px }
  .mappa { justify-self: stretch; max-width: none }
  .cn-app { grid-template-columns: 1fr } .cn-lato { display: none }
  .cn-barra { grid-template-columns: 50px 1fr 10px } .cn-main { padding: 14px 12px }
  .cn-sorgenti { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cn-riga { grid-template-columns: 1fr }
  .cn-schede span:not(.att) { display: none }
  .cn-riordino, .cn-tab .col-mod, .sorg svg, .cn-tab tbody tr:nth-child(n+3) { display: none }
  .sez, .chiusura { padding-top: 48px; padding-bottom: 48px }
  .luogo { padding-top: 36px; padding-bottom: 36px }
  .garanzie { grid-template-columns: 1fr }
  footer .griglia { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .campo { padding: 8px }
  .pozzo { padding: 10px 10px 0 }
  .targa { padding: 0 8px 0 18px; height: 60px }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px }
  .numeri div, .numeri div + div { padding: 18px 0; border-left: 0 }
  .numeri b { font-size: 40px }
  .numeri span { font-size: 14.5px }
  .dichiara { font-size: 1.45rem }
  .mini-rete { height: 200px }
  footer .griglia { grid-template-columns: 1fr }
  .sez, .settori, .chiusura { padding-left: 6px; padding-right: 6px }
}
/* (00) il fulcro: AI Deployment Management */
.fulcro { background: var(--deep); color: #fff; border-radius: 32px; padding: clamp(24px, 4vw, 56px); display: grid; gap: clamp(24px, 3.4vw, 40px) }
.fl-ingressi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }
.fl-ingressi span { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); border-radius: 18px; padding: 7px 12px; font-size: 12.5px; color: rgba(255,255,255,.86) }
.fl-giu { width: 2px; height: 34px; margin: -8px auto; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.12)) }
.fl-catena { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative }
.fl-catena::before { content: ""; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: rgba(255,255,255,.22) }
.fl-catena li { display: grid; justify-items: center; gap: 10px; text-align: center; position: relative; font-size: 13px; color: rgba(255,255,255,.74) }
.fl-catena li b { width: 40px; height: 40px; border-radius: 50%; background: var(--deep-2); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-weight: 500; font-size: 13px; color: #fff }
.fl-catena li.vivo b { background: #fff; color: var(--deep); border-color: #fff; box-shadow: 0 0 0 6px rgba(66,158,92,.28) }
.fl-catena li.vivo span { color: #fff; display: inline-flex; align-items: center; gap: 8px }
.fl-catena .pacchetto { position: absolute; top: 16px; left: 10%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); animation: corre 5s linear infinite }
@keyframes corre { 0% { left: 10%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { left: 90%; opacity: 0 } }
.fl-ritorno { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: -10px }
.fl-voci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.fl-voci > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start }
.fl-voci h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: #fff }
.fl-voci p { color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.5 }
.vetri button.vetro.perno { border-color: #fff; background: rgba(255,255,255,.24); font-weight: 600 }
@media (max-width: 1024px) { .fl-voci { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
  .fl-voci { grid-template-columns: 1fr }
  .fl-ingressi { justify-content: flex-start }
  .fl-giu { margin: -8px 0 -8px 19px }
  .fl-catena { grid-template-columns: 1fr; gap: 14px }
  .fl-catena::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto }
  .fl-catena li { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 14px }
  .fl-catena .pacchetto { display: none }
  .fl-ritorno { text-align: left; margin-top: -6px }
}
@media (prefers-reduced-motion: reduce) { .fl-catena .pacchetto { display: none } }
.servizio.invito { background: var(--deep); color: #fff; align-content: start }
.servizio.invito .prob, .servizio.invito .prob em { color: rgba(255,255,255,.7) }
.servizio.invito h3 { color: #fff }
.servizio.invito p { color: rgba(255,255,255,.76) }
.servizio.invito .pill { justify-self: start; margin-top: 6px }

/* ===================== PAGINE INTERNE (prototipo v2, 7-11) =====================
   Stessi token, componenti e movimenti della home approvata (artefatto 6DSVi1nQumRG7MH8bo7J7G): qui solo cio che la home non ha. */
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: rgba(255,255,255,.66); font-size: 12.5px }
.briciole a { text-decoration: none; color: inherit } .briciole a:hover { color: #fff }
.briciole i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6 }
.briciole b { font-weight: 500; color: #fff }
.briciole.chiare { color: var(--muted) } .briciole.chiare a:hover, .briciole.chiare b { color: var(--ink) }

/* apertura delle interne: stesso pannello della home, piu bassa */
.apertura.interna { min-height: min(600px, calc(100svh - 150px)) }
.apertura.interna .dentro { gap: 22px; max-width: 780px }
.apertura.interna h1 { font-size: clamp(2.2rem, 4.2vw, 3.7rem) }
.vetri-t { color: rgba(255,255,255,.6); align-self: center; margin-right: 4px }
a.vetro { text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease) }
a.vetro:hover { background: #fff; color: var(--deep) }
.registro .grande { font: 600 18px/1.25 var(--sans); letter-spacing: -.01em }

/* prosa in colonne numerate, leggibile */
.colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(32px, 4vw, 48px) }
.colonne > div { border-top: 2px solid var(--deep); padding-top: 18px; display: grid; gap: 10px; align-content: start }
.colonne .n { color: var(--deep) }
.colonne p { font-size: 17px; line-height: 1.65; color: var(--ink) }

/* fasce con etichette (stack) */
.pila { display: flex; flex-wrap: wrap; gap: 10px }
.pila .chip { font: 500 13.5px/1.2 var(--mono); letter-spacing: .02em; background: #fff; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease) }
.pila .chip:hover { background: var(--deep); color: #fff; border-color: var(--deep) }
a.chip { text-decoration: none }

/* card a tre colonne (casi, segnali, leve) */
.servizi.tre { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.servizi.due { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.servizio dl { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px }
.servizio dt { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--deep); margin-top: 10px }
.servizio dt:first-child { margin-top: 0 }
.servizio dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink) }
.servizio a.vai { justify-self: start; margin-top: 4px }

/* elenco a righe (indice competenze, "da dove partire", altre competenze) */
.elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.riga { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 5fr) auto 44px; gap: 20px; align-items: center; padding: 24px 8px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); border-radius: 16px; transition: background .25s var(--ease), padding .25s var(--ease) }
.riga:hover, .riga:focus-visible { background: var(--soft); padding-left: 18px; outline: none }
.riga:focus-visible { box-shadow: inset 0 0 0 2px var(--deep) }
.riga .n { color: var(--deep) }
.riga h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em }
.riga p { color: var(--muted); font-size: 16px; line-height: 1.5 }
.riga .disc { background: #e9eef4; color: var(--deep); border-radius: 16px; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease) }
.riga:hover .disc, .riga:focus-visible .disc { background: var(--deep); color: #fff }
.riga .freccia { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease) }
.riga:hover .freccia { background: var(--deep); color: #fff; border-color: var(--deep); transform: translateX(3px) }
.riga.se { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr) 44px }
.riga.se h3 { font-size: clamp(19px, 1.8vw, 23px) }
.riga.se p b { color: var(--ink); font-weight: 600 }
.lato-rete { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start }
.lato-rete .mini-rete { position: sticky; top: 110px }

/* valori (perché ci scelgono): come i numeri della home, valori anche a parole */
.valori { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line) }
.valori > div { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0 }
.valori > div + div { padding-left: 24px; border-left: 1px solid var(--line) }
.valori small { font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.valori b { font: 700 clamp(26px, 2.7vw, 38px)/1.08 var(--sans); letter-spacing: -.035em; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.valori span { color: var(--muted); font-size: 15.5px; line-height: 1.5 }

/* contatti: modulo e recapiti */
.contatto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: start }
.modulo { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; box-shadow: var(--shadow-card) }
.modulo .voce-f { display: grid; gap: 8px; min-width: 0 }
.modulo label.et-f { font: 500 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo select, .modulo textarea {
  width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--page); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; transition: border-color .2s var(--ease), background .2s var(--ease) }
.modulo textarea { min-height: 150px; resize: vertical }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: 2px solid var(--deep); outline-offset: 1px; background: #fff; border-color: var(--deep) }
.modulo ::placeholder { color: #8a97a5 }
.modulo .pieno { grid-column: 1 / -1 }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--muted) }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--deep); flex: none }
.consenso a { color: var(--deep) }
.invio { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center }
.invio .nota-r { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px }
.recapiti { background: var(--soft); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 0 }
.recapiti > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line) }
.recapiti > div:first-of-type { border-top: 0 }
.recapiti dt { font: 500 12.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.recapiti dd { margin: 0; font-size: 16.5px; line-height: 1.5 }
.recapiti a { color: var(--deep); font-weight: 600; text-underline-offset: 4px }
.rivela .cert { margin-top: 24px; display: grid; gap: 8px }
.rivela .cert .chip { background: #fff; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px }

/* blog: filtri e righe degli articoli */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.filtro { font: 500 13px/1 var(--mono); letter-spacing: .04em; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--line-soft); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease) }
.filtro:hover { border-color: var(--ink) }
.filtro[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep) }
.art { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 24px; align-items: start; padding: 28px 8px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 16px;
  transition: background .25s var(--ease), padding .25s var(--ease) }
.articoli { border-top: 1px solid var(--line) }
.art:hover, .art:focus-visible { background: var(--soft); padding-left: 18px; outline: none }
.art:focus-visible { box-shadow: inset 0 0 0 2px var(--deep) }
.art .data { color: var(--deep); padding-top: 6px }
.art h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.22; font-weight: 600; letter-spacing: -.02em }
.art p { color: var(--muted); font-size: 16.5px; line-height: 1.55; margin-top: 8px; max-width: 70ch }
.art .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.art .tags span, .tags-v span { font: 500 11.5px/1 var(--mono); letter-spacing: .04em; padding: 6px 9px; border-radius: 12px; background: #e9eef4; color: var(--deep) }
.art .freccia { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease) }
.art:hover .freccia { background: var(--deep); color: #fff; border-color: var(--deep) }
.art[hidden] { display: none }

/* lettura: articolo e pagine legali, con indice e avanzamento */
.lettura { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: clamp(40px, 5vw, 72px) clamp(8px, 2vw, 32px) }
.indice { position: sticky; top: 110px; align-self: start; display: grid; gap: 2px }
.indice .mono { color: var(--deep); font-size: 12.5px; margin-bottom: 10px }
.avanza { height: 3px; border-radius: 2px; background: var(--track); position: relative; margin-bottom: 16px; overflow: visible }
.avanza i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--deep); border-radius: 2px }
.avanza i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--deep) }
.indice a { font-size: 14.5px; line-height: 1.35; color: var(--muted); padding: 7px 0 7px 14px; border-left: 2px solid var(--track); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease) }
.indice a:hover { color: var(--ink) }
.indice a.att { color: var(--ink); border-color: var(--deep); font-weight: 600 }
.testo { max-width: 70ch; font-size: 18.5px; line-height: 1.75; color: var(--ink); min-width: 0; width: 100% }
.testo > *:first-child { margin-top: 0 }
.testo p { margin: 0 0 1.15em }
.testo h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -.025em; margin: 2em 0 .7em; scroll-margin-top: 110px }
.testo h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; margin: 1.7em 0 .5em; scroll-margin-top: 110px }
.testo ul, .testo ol { margin: 0 0 1.2em; padding-left: 1.3em }
.testo li { margin: .45em 0 } .testo li::marker { color: var(--deep) }
.testo strong { font-weight: 600 }
.testo a { color: var(--deep); text-underline-offset: 4px }
.testo blockquote { margin: 1.8em 0; padding: 22px 26px; border-radius: 20px; background: var(--soft); border-left: 4px solid var(--deep); font-size: 1.12em; line-height: 1.55; font-weight: 500 }
.testo blockquote p:last-child { margin: 0 }
.testo code { font: 500 .85em var(--mono); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px }
.testo pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch }
.testo .meta { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase }
.tab-scorre { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 16px }
.testo table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 560px }
.testo th { text-align: left; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--soft); padding: 12px 14px; border-bottom: 1px solid var(--line) }
.testo td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
.testo tr:last-child td { border-bottom: 0 }
.testa-chiara { padding: clamp(36px, 5vw, 72px) clamp(8px, 2vw, 32px) clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); display: grid; gap: 18px }
.testa-chiara h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; max-width: 22ch }
.testa-chiara h1 .spenta { color: var(--muted) }
.testa-chiara .ciglio { color: var(--deep) }
.tags-v { display: flex; flex-wrap: wrap; gap: 8px }
.apertura .tags-v span { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28) }

/* 404: la rete si scollega */
.p404 { position: relative; border-radius: 24px; background: var(--deep); color: #fff; overflow: hidden; min-height: min(560px, calc(100svh - 170px)); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center }
.p404 canvas { width: 100%; height: 100%; min-height: 420px; display: block }
.p404 .testo404 { padding: clamp(24px, 4vw, 56px); display: grid; gap: 18px; justify-items: start }
.p404 .codice { font: 700 clamp(4rem, 9vw, 7rem)/1 var(--sans); letter-spacing: -0.05em }
.p404 h1 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em }
.p404 p { color: rgba(255,255,255,.82); font-size: 18px; max-width: 38ch }

/* indice dei prototipi */
.tipi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }

@media (max-width: 390px) {
  .lettura { grid-template-columns: minmax(0, 1fr) }
  .indice { display: none }
}
@media (max-width: 1100px) {
  .servizi.tre { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .valori { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .valori > div:nth-child(3) { padding-left: 0; border-left: 0 }
  .valori > div { padding-bottom: 24px }
  .riga { grid-template-columns: 56px minmax(0, 1fr) auto 44px } .riga p { grid-column: 2 / 4; grid-row: 2 }
  .riga.se { grid-template-columns: 56px minmax(0, 1fr) 44px } .riga.se p { grid-column: 2 / 3 }
  .tipi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 860px) {
  .apertura.interna { min-height: 0 }
  .apertura.interna .dentro { padding: 300px 22px 26px }
  .servizi.tre, .servizi.due { display: grid; grid-template-columns: 1fr; overflow: visible; padding-right: 0 }
  .servizi.tre .servizio, .servizi.due .servizio { flex: none }
  .pannello-grigio.fermo { padding: 14px }
  .colonne { grid-template-columns: 1fr; gap: 22px }
  .lato-rete, .contatto, .lettura, .p404 { grid-template-columns: minmax(0, 1fr) }
  .testo table { display: block; overflow-x: auto; min-width: 0 }
  .lato-rete .mini-rete { position: relative; top: 0; order: -1 }
  .riga, .riga.se { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px 14px; padding: 20px 4px }
  .riga p, .riga.se p { grid-column: 2 / 3; grid-row: 2 }
  .riga .disc { grid-column: 2 / 3; grid-row: 3; justify-self: start }
  .riga .freccia { grid-column: 3; grid-row: 1 }
  .riga:hover, .riga:focus-visible { padding-left: 8px }
  .modulo { grid-template-columns: 1fr }
  .recapiti > div { grid-template-columns: 1fr; gap: 4px }
  .art { grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 14px }
  .art .data { grid-column: 1 / -1; padding-top: 0 }
  .indice { position: relative; top: 0 }
  .indice a { display: none }
  .p404 canvas { min-height: 230px; height: 230px }
  .testo { font-size: 17.5px }
  .tipi { grid-template-columns: 1fr }
}
@media (max-width: 520px) {
  .valori { grid-template-columns: 1fr } .valori > div, .valori > div + div { padding: 18px 0; border-left: 0 }
  .apertura.interna .dentro { padding: 290px 18px 22px }
}

/* pulsante vuoto su fondo chiaro (in home .azioni .pill.vuota e bianco, per l'apertura blu) */
.chiusura .azioni .pill.vuota, .sez .azioni .pill.vuota, .luogo .azioni .pill.vuota { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft) }
.chiusura .azioni .pill.vuota:hover, .sez .azioni .pill.vuota:hover, .luogo .azioni .pill.vuota:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.rivela .cert { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 24px }
.rivela .cert .chip { font: 500 13px/1.35 var(--mono); letter-spacing: .02em; text-transform: none; align-items: center }
#indice-voci { display: grid; gap: 2px }

/* righe «problema → disciplina → Risolvi», come le card della home */
.riga.pr { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) auto }
.riga.pr h3 { font-size: clamp(20px, 2vw, 25px) }
.disc-b { display: grid; gap: 4px; min-width: 0 }
.disc-b b { font-weight: 600; font-size: 17px; color: var(--deep) }
.disc-b p { color: var(--muted); font-size: 15.5px; line-height: 1.5 }
.risolvi { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line-soft); color: var(--ink); font-size: 13px; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease) }
.riga:hover .risolvi, .riga:focus-visible .risolvi { background: var(--deep); color: #fff; border-color: var(--deep) }
@media (max-width: 1100px) { .riga.pr { grid-template-columns: 56px minmax(0, 1fr) auto } .riga.pr .disc-b { grid-column: 2 / 3; grid-row: 2 } }
@media (max-width: 860px) {
  .riga.pr { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px }
  .riga.pr .disc-b { grid-column: 2; grid-row: 2 } .riga.pr .risolvi { grid-column: 2; grid-row: 3; justify-self: start }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }