/* ============ TOKENS ============ */
:root {
  /* I nomi con prefisso --h- appartengono alla sola homepage.
     Cinque colori (teal, plum, gold, ink, line) esistono anche in style.css
     con lo stesso nome ma valore diverso: la vetrina e' su fondo scuro, il
     resto del sito su fondo chiaro, quindi il prugna qui e' chiaro e li' e'
     scuro. Finche' si chiamavano uguale, scrivere var(--teal) dava un verde
     diverso a seconda della pagina. Il prefisso toglie l'ambiguita': stesso
     nome, stesso colore, ovunque. */
  /* fondo scuro: neutri con deriva verso il teal del brand */
  --void: #071A17;
  --deep: #0B2A25;
  --deep-2: #10352E;
  --edge: #1C463D;

  --h-teal: #0F5C52;
  --signal: #37D6B0;        /* unica scintilla, derivata dal teal */
  --h-plum: #C39BCE;          /* schiarito: deve reggere sul fondo scuro */
  --plum-deep: #5B3A63;
  --h-gold: #E0A63A;
  --gold-deep: #A8791F;

  --paper: #EDF2F0;
  --paper-dim: #93A9A2;

  /* componenti RGB per i canali trasparenti e il canvas */
  --veil-rgb: 7, 26, 23;
  --sig-rgb: 55, 214, 176;
  --gold-rgb: 224, 166, 58;
  --dot-rgb: 147, 169, 162;
  --bgl-rgb: 238, 242, 240;

  /* sezioni chiare */
  --bg-l: #EEF2F0;
  --surf-l: #FFFFFF;
  --h-ink: #12211E;
  --ink-dim: #5B6D68;
  --h-line: #D7DED9;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.hp {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono { font-family: var(--mono); font-weight: 500; }

.hp h1, .hp h2, .hp h3, .hp h4 { margin: 0; font-weight: 600; }
.hp p { margin: 0; }

.wordmark { font-family: 'Michroma', sans-serif; letter-spacing: .5px; }

/* ---- tipografia display: la voce del sito ---- */
.display {
  font-size: clamp(34px, 6.2vw, 80px);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: balance;
}
.display.sm { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.05; }
.display em {
  font-style: normal;
  font-weight: 400;
  color: var(--signal);
}

.h2 {
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 18px;
}
.eyebrow.warm-e { color: var(--h-gold); }

.lede {
  font-size: clamp(15px, 1.35vw, 18px);
  color: var(--ink-dim);
  max-width: 54ch;
}
.lede.on-dark { color: var(--paper-dim); }

/* ============ NAV ============ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px var(--pad);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(var(--veil-rgb), .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--edge);
}
.nav.on-light {
  background: rgba(var(--bgl-rgb), .78);
  border-bottom-color: var(--h-line);
}
.nav .wordmark { font-size: 15px; color: var(--paper); transition: color .4s var(--ease); }
.nav.on-light .wordmark { color: var(--h-ink); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 13.5px;
  color: var(--paper-dim);
  text-decoration: none;
  position: relative;
  transition: color .25s;
}
.nav.on-light .nav-links a { color: var(--ink-dim); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav.on-light .nav-links a:hover { color: var(--h-ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-login {
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 7px 16px;
}
.nav-login::after { display: none; }
.nav.on-light .nav-login { border-color: var(--h-line); }

/* Il pieno accanto ad «Accedi»: stessa pillola, riempita con l'accento.
   L'accento e' OTTONE, non verde: css/home_ottone.css viene caricato dopo
   questo foglio e ridefinisce --signal da #37D6B0 a #E3B457. Vale per tutti i
   var(--signal) del sito, non solo per questo bottone.

   ⚠️ LA SPECIFICITA' QUI E' IL PUNTO. Le voci della barra sono servite da
   «.nav-links a», che pesa 0,1,1: una regola di sola classe come «.nav-start»
   pesa 0,1,0 e PERDE, quindi il colore del testo restava quello grigio delle
   altre voci e il bottone usciva illeggibile. Per questo tutte le regole di
   colore qui sotto passano da «.nav-links a.nav-start» e «.nav-drop a.nav-start»,
   che pesano 0,2,1 e vincono. Non abbassare quei selettori.

   Il testo e' il nero caldo #14100A, lo stesso che il sito usa gia' per i
   bottoni su fondo oro (.warm-btn): su un fondo ottone il bianco non regge il
   contrasto, e un nero freddo stonerebbe con la tinta calda. */
.nav-start {
  background: var(--signal);
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 17px;
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.nav-start::after { display: none; }
.nav-links a.nav-start,
.nav-drop a.nav-start,
.nav.on-light .nav-links a.nav-start { color: #14100A; }
.nav-links a.nav-start:hover,
.nav-links a.nav-start:focus-visible,
.nav-drop a.nav-start:hover,
.nav.on-light .nav-links a.nav-start:hover {
  color: #14100A;
  background: var(--signal);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* Nel menu a tendina la pillola sta su una riga sua, allineata a sinistra
   come le altre voci, altrimenti si allargherebbe a tutta la colonna. */
.nav-drop a.nav-start { align-self: flex-start; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .nav-start { transition: none; }
  .nav-links a.nav-start:hover { transform: none; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}
.nav.on-light .nav-toggle { border-color: var(--h-line); color: var(--h-ink); }

.nav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: var(--pad);
  min-width: 210px;
  flex-direction: column;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.nav-drop.is-open { display: flex; }
.nav-drop a {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  border-radius: 8px;
}
.nav-drop a:hover { background: var(--deep-2); color: var(--signal); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 900px;
}
.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 60%, rgba(var(--sig-rgb), .10), transparent 62%),
    linear-gradient(90deg, var(--void) 6%, rgba(var(--veil-rgb), .72) 42%, rgba(var(--veil-rgb), .15) 72%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px var(--pad) 80px;
  transform-style: preserve-3d;
}
/* Il blocco del brand (logo + titolo) resta nell'alto-centro ma senza essere
   "tirato su" fin sotto il claim (prima -5cm): un lieve scostamento verso
   l'alto lascia respirare sia il claim sopra sia la curva/poesia sotto. */
.hero-copy { max-width: min(62vw, 880px); margin-top: clamp(-44px, -4vh, -18px); }
.hero .logo-mark {
  display: block;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: .5px;
  white-space: nowrap;
  color: var(--paper-dim);
  margin-bottom: 26px;
}
.logo-mark .lg-b, .logo-mark .lg-d, .logo-mark .lg-mid {
  display: inline-block;
  vertical-align: bottom;
}
.hero h1 { margin-bottom: 26px; }

/* claim di posizionamento: centrato in cima all'hero, sopra il picco della
   curva gaussiana e sopra il titolo principale.
   Effetto MACCHINA DA SCRIVERE: la frase si batte un carattere alla volta
   (JS in index.php), con cursore lampeggiante. Font monospace del sito
   (--mono), per la resa da dattilografia. */
.hero-os {
  position: absolute;
  /* Alzata fin sotto il menu, cioe' tutto lo spazio che c'era. Il valore si
     misura dall'inizio dell'hero, che comincia dove finisce la barra di
     navigazione: i 18px minimi sono lo stacco che tiene la prima riga separata
     dalla barra su schermo basso, e piu' lo schermo e' alto piu' respira.
     Era clamp(74px, 11vh, 148px), cioe' circa due centimetri piu' in basso.
     Sotto i 18px la scritta arriverebbe a toccare il menu. */
  top: clamp(18px, 3vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(94vw, 920px);
  /* Riserva lo spazio di TRE righe, cosi' il layout non salta mentre si scrive.
     Ogni riga vale 1.25em piu' .3em di distacco; la prima e' piu' piccola, ma
     abbondare di qualche decimo non costa nulla e un'altezza corta si vedrebbe
     eccome, la scritta spingerebbe in basso il resto della schermata a ogni
     riga nuova. Era 4,6em quando le righe erano tre; la quarta, piu' piccola e
     con il suo stacco in piu', ne aggiunge circa una e mezza. */
  min-height: 6.2em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .3em;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--paper);
  pointer-events: none;
}
.hero-os span {
  display: block;
  min-height: 1.25em;            /* tiene l'altezza di riga anche quando è ancora vuota */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}
.hero-os-l1 {
  font-size: clamp(13px, 2vw, 22px);
  color: var(--paper-dim);
}
.hero-os-l2 {
  /* La riga è lunga (33 caratteri) e il monospace occupa circa 0,6em per
     carattere: la dimensione è calibrata perché stia su una riga sola anche a
     375px di larghezza, altrimenti andrebbe a capo durante la battitura
     facendo scorrere il resto della pagina. */
  font-size: clamp(14px, 2.6vw, 30px);
}
/* Terza riga: stessa misura della seconda, perché le due dicono cose dello
   stesso peso, che cosa fa la piattaforma. La prima resta più piccola e
   spenta: è l'attacco della frase, non un'affermazione a sé.
   È più corta di dieci caratteri, quindi la dimensione della seconda le sta
   larga e non serve calibrarla di nuovo. */
.hero-os-l3 { font-size: clamp(14px, 2.6vw, 30px); }
/* Quarta riga: la chiusa. Piu' piccola e spenta come la prima, cosi' le due
   righe centrali restano l'affermazione e queste due le fanno da cornice.
   Lo stacco in piu' sopra la separa dalla definizione: sono due cose diverse,
   che cosa fa la piattaforma e come lo fa. */
.hero-os-l4 {
  font-size: clamp(13px, 2vw, 22px);
  color: var(--paper-dim);
  letter-spacing: .06em;
  margin-top: .35em;
}
/* cursore da macchina da scrivere: appare sulla riga che si sta scrivendo */
.hero-os .caret::after {
  content: "";
  display: inline-block;
  width: .5ch;
  height: 1.05em;
  margin-left: .12em;
  background: var(--signal);
  vertical-align: -.16em;
  animation: osCaret 1.05s steps(1) infinite;
}
@keyframes osCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-os .caret::after { animation: none; opacity: 0; }
}

/* rail di misura sul bordo sinistro */
.rail {
  position: absolute;
  left: var(--pad);
  bottom: 44px;              /* allineato all'indicatore di scroll */
  display: flex;
  align-items: center;
  gap: 12px;
}
.rail-line { width: 54px; height: 1px; background: var(--edge); }
.rail-txt { font-size: 10.5px; letter-spacing: .12em; color: var(--paper-dim); text-transform: uppercase; }

/* --- l'invito, seconda meta' del titolo ---
   Stessa famiglia e stesso peso del titolo grande, corpo ridotto: cosi' si
   legge come la continuazione della frase e non come un sottotitolo. Margine
   sopra quasi nullo perche' resti attaccato, e colore d'accento perche' e' la
   parte che chiede di fare qualcosa. */
.hero-invito {
  margin: 6px 0 0;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--signal);
}
/* «te» in bianco: e' l'inverso del titolo sopra, dove la parola in ottone e'
   «conta» e il resto e' chiaro. Cosi' le due righe si rispondono invece di
   ripetersi, e la parola che resta in mente e' quella che nomina la persona. */
.hero-invito em { font-style: normal; color: var(--paper); }

/* --- frase delicata accanto alla curva --- */
.hero-poem {
  position: absolute;
  right: var(--pad);
  bottom: 210px;
  z-index: 2;
  text-align: right;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.75;
  color: var(--paper-dim);
  pointer-events: none;
}
.hero-poem em { font-style: italic; color: var(--signal); }

/* --- cannocchiale nascosto --- */
.scope {
  position: absolute;
  right: calc(var(--pad) + 70px);
  bottom: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .42;                          /* discreto ma notabile (era .16, quasi invisibile) */
  transform: scale(.94);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  will-change: opacity, transform;
}
.scope:focus-visible { opacity: 1; }
.scope svg { filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); position: relative; z-index: 1; }
/* Piccolo alone pulsante dietro l'icona: attira lo sguardo sul cannocchiale
   senza essere invasivo. Si ferma con prefers-reduced-motion. */
.scope::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 104px; height: 104px;
  transform: translateX(-50%) scale(.85);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sig-rgb), .55) 0%, rgba(var(--sig-rgb), .16) 45%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: scopeHalo 2.8s ease-in-out infinite;
}
@keyframes scopeHalo {
  0%, 100% { opacity: .3;  transform: translateX(-50%) scale(.82); }
  50%      { opacity: .85; transform: translateX(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .scope::before { animation: none; opacity: .5; }
}
.scope-hint {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.scope.is-near .scope-hint { opacity: 1; transform: none; }

/* --- avvicinamento 3D al cannocchiale --- */
.approach {
  position: fixed;
  inset: 0;
  z-index: 95;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(var(--sig-rgb), .05), transparent 60%),
    linear-gradient(var(--void), #020505 80%);
  overflow: hidden;
}
.app-stage {
  position: absolute;
  inset: 0;
  perspective: 900px;
}
.app-scope {
  position: absolute;
  left: calc(50% - 72px);   /* l'occhiello (36,150 nel viewBox) coincide col centro schermo */
  top: calc(50% - 300px);
  transform-origin: 72px 300px;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.app-eye-rim { fill: none; stroke: var(--signal); stroke-width: 1.6; opacity: .9; }
.app-eye { fill: #020505; }
.app-hint {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--signal);
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}
.app-hint-mouse { color: var(--signal); filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.app-hint-wheel { animation: hintwheel 1.5s ease-in-out infinite; }
@keyframes hintwheel {
  0%   { transform: translateY(0);   opacity: 1; }
  60%  { transform: translateY(9px); opacity: .15; }
  100% { transform: translateY(0);   opacity: 1; }
}
@keyframes hintpulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-hint-wheel { animation: none; } }

/* --- dentro la lente --- */
.lens {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #020505;
  cursor: crosshair;
}
.lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Niente più oculare circolare: il cielo riempie tutta la vista e si esplora
   liberamente. Resta solo una carezza di buio ai bordi, per atmosfera. */
.lens-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%,
    transparent 60%,
    rgba(0,0,0,.28) 85%,
    rgba(0,0,0,.55) 100%);
}
.lens-guide {
  position: absolute;
  left: 50%; bottom: 7vh;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--sig-rgb), .75);
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.lens-close {
  position: absolute;
  top: 22px; right: 26px;
  z-index: 2;
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.lens-close:hover { border-color: rgba(var(--sig-rgb), .6); color: #fff; }
.lens-msg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(84vw, 380px);
  text-align: center;
  padding: 20px 24px 18px;
  background: rgba(2, 8, 7, .74);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--sig-rgb), .22);
  border-radius: 6px;
  animation: lensmsg .7s var(--ease);
}
@keyframes lensmsg {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.hp .lens-msg-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 8px;
  text-wrap: balance;
}
.hp .lens-msg-body {
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
}

/* ============ LA SCHEDA DEL REGALO ============
   Tre campi allineati a sinistra con la loro etichetta sopra, non centrati:
   un modulo centrato in monospaziato costringe a cercare dove scrivere, e la
   persona che arriva qui ha appena giocato, non ha voglia di studiare.
   ============================================ */
.lens-form {
  margin: 22px auto 0;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.lens-form-campo { margin: 0; }
.lens-form-lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.68);
  margin-bottom: 6px;
}
.lens-form-opz { color: rgba(255,255,255,.34); font-size: 10.5px; }
.lens-form input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .25s, background .25s;
}
.lens-form input::placeholder { color: rgba(255,255,255,.28); }
.lens-form input:focus {
  border-color: rgba(var(--sig-rgb), .75);
  background: rgba(255,255,255,.08);
}

/* L'anteprima del messaggio. Ha un'etichetta sua perche' senza, quel riquadro
   di testo sembrava un altro campo da compilare: era la cosa che confondeva
   di piu'. E ha aria sopra, che prima non aveva, stava appiccicato al campo
   precedente e i due si leggevano come un blocco unico. */
.lens-anteprima { max-width: 340px; margin: 22px auto 0; text-align: left; }
.lens-anteprima-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin: 0 0 6px;
}
.lens-gift-msg {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid rgba(var(--sig-rgb), .55);
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-size: 12.5px;
  line-height: 1.65;
  text-align: left;
  white-space: pre-line;   /* il testo contiene a capo veri: vanno mostrati */
}
.lens-gift-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
/* La riga secondaria sta piu' vicina e pesa meno: sono alternative, non altre
   due strade da valutare. */
.lens-gift-minori { margin-top: 10px; gap: 8px; }
.lens-gift-act {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 7px 15px;
  color: rgba(255,255,255,.72);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease);
}
.lens-gift-act:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateY(-1px); }

/* Le due strade per mandare la mail hanno lo stesso peso: quale funzioni
   dipende da come la persona legge la posta, non da quale sia migliore.
   La variante .lens-gift-alt e' leggermente piu' sobria perche' Gmail copre
   la maggioranza dei casi, ma resta una vera alternativa, non un ripiego. */
.lens-gift-primario {
  background: rgba(var(--sig-rgb), .16);
  border: 1px solid rgba(var(--sig-rgb), .85);
  border-radius: 999px;
  padding: 10px 20px;
  color: rgba(var(--sig-rgb), 1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 8px 22px -12px rgba(var(--sig-rgb), .7);
}
.lens-gift-primario:hover {
  background: rgba(var(--sig-rgb), .28);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(var(--sig-rgb), .9);
}
/* Senza indirizzo il pulsante funziona lo stesso, si apre la posta e lo si
   scrive lì, ma smette di promettere che è tutto pronto. */
.lens-gift-primario.senza-destinatario { opacity: .55; box-shadow: none; }
/* La seconda strada e' sobria: stesso disegno, meno riempimento. */
.lens-gift-alt { background: none; border-color: rgba(var(--sig-rgb), .45); box-shadow: none; }
.lens-gift-alt:hover { background: rgba(var(--sig-rgb), .12); box-shadow: none; }

/* Conferma dopo "copia il messaggio". Aveva la classe di un elemento che
   non esiste piu' (il battesimo della stella): ora ha la sua. */
.lens-gift-esito {
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(var(--sig-rgb), .9);
}


.hero-cue {
  position: absolute;
  right: var(--pad);
  bottom: 44px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-cue .mono { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.hero-cue-line {
  width: 1px; height: 54px;
  background: linear-gradient(var(--signal), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ============ SCALA ============ */
.scale-act {
  position: relative;
  padding: clamp(80px, 12vh, 150px) var(--pad);
  background: linear-gradient(var(--void), var(--deep) 60%, var(--void));
}
.scale-wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.hp .scale-q {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 84px;
  text-wrap: balance;
}
.scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 22px;
}
.scale-track, .scale-fill {
  position: absolute;
  top: 0; left: 12.5%;
  width: 75%; height: 2px;
  border-radius: 2px;
}
.scale-track { background: var(--edge); }
.scale-fill {
  background: linear-gradient(90deg, var(--signal), var(--h-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.tick {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  color: var(--paper-dim);
  transition: color .3s;
}
.tick::before {
  content: "";
  position: absolute;
  top: -22px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--void);
  border: 2px solid var(--edge);
  transition: border-color .3s, background .3s, transform .35s var(--ease);
}
.tick .num { font-size: 26px; margin-top: 8px; transition: transform .35s var(--ease); }
.tick .lbl { font-size: 12px; letter-spacing: .02em; }
.tick:hover { color: var(--paper); }
.tick:hover::before { border-color: var(--signal); transform: scale(1.25); }
.tick.on { color: var(--paper); }
.tick.on::before { border-color: var(--signal); background: var(--signal); transform: scale(1.35); }
.tick.on .num { color: var(--signal); transform: translateY(-2px); }

.reaction {
  margin-top: 44px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.reaction.show { opacity: 1; transform: none; }
/* La faccia resta in alto accanto al testo anche quando sotto compare l'invito:
   allineare al centro in verticale farebbe ballare l'emoticon a ogni risposta,
   perche' il blocco cambia altezza a seconda di quante righe ha il messaggio.
   In orizzontale invece il riquadro sta SEMPRE al centro: fino all'11/08/2026
   la sua posizione la calcolava js/home2.js allineandolo alla tacca scelta, ma
   il vincolo di restare dentro i bordi della scala impediva di centrarlo sulle
   risposte agli estremi, e il risultato era un blocco che si spostava senza mai
   allinearsi a niente. */
.reaction { align-items: flex-start; justify-content: center; }
.reaction-in {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.reaction svg { flex: none; }
.reaction-testo { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.reaction-text { font-size: 15.5px; color: var(--paper); max-width: 34ch; text-align: left; }

/* L'invito che segue la risposta. Il testo lo scrive js/home2.js sul tono di
   quello che la persona ha appena dichiarato. */
.reaction-azioni { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reaction-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--h-gold);
  color: var(--void);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 10px 26px -14px rgba(var(--gold-rgb), .8);
}
.reaction-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(var(--gold-rgb), .95); }
.reaction-cta span { transition: transform .18s var(--ease); }
.reaction-cta:hover span { transform: translateX(3px); }
/* La seconda via e' volutamente sottovoce: e' un'alternativa, non un ripiego
   da nascondere ne' una seconda offerta che compete con la prima. */
.reaction-mite {
  font-size: 13.5px;
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(147,169,162,.4);
  padding-bottom: 1px;
}
.reaction-mite:hover { color: var(--paper); border-bottom-color: var(--paper); }

@media (max-width: 700px) {
  /* Sotto i 700px il blocco si dispone in colonna, con la faccia sopra il testo:
     affiancati non ci starebbero. Il centraggio orizzontale ora vale gia' a
     tutte le larghezze, quindi qui resta solo la disposizione verticale.
     Il "margin-left: 0 !important" si tiene: annulla un eventuale valore inline
     rimasto dalla versione precedente in una scheda aperta da prima del
     caricamento, che altrimenti batterebbe il foglio di stile. */
  .reaction-in { margin-left: 0 !important; flex-direction: column; align-items: center; text-align: center; }
  .reaction-testo { align-items: center; }
  .reaction-text { text-align: center; }
  .reaction-azioni { justify-content: center; }
}

/* ============ MAPPA: viaggio nella costellazione ============ */
/* ============ MAPPA ============ */
/* Rifatta il 17/08/2026. Prima c'era la scenografia del volo fra i pianeti:
   canvas a tutta larghezza, etichette posizionate sulla proiezione, barra dei
   passi con i pallini, pulsante «rivedi il viaggio». Circa centottanta righe.
   Adesso sono due colonne di testo, e non serve altro. */
.mappa-act {
  padding: clamp(56px, 8vh, 104px) var(--pad) clamp(56px, 8vh, 96px);
}
/* ALLINEATA ALL'HERO, come Percorsi, Metodo, Monitoraggio e Aree.
   La formula e' la stessa e la ragione e' spiegata per esteso nel blocco
   PERCORSI: l'apertura del sito e' una colonna centrata da --maxw che si porta
   dentro il proprio --pad, quindi il titolo dell'hero parte da centratura piu'
   pad, mentre una sezione normale parte dalla sola centratura. Senza questo
   rientro la mappa cominciava una settantina di pixel piu' a sinistra di tutto
   il resto, e su schermi larghi si vedeva. Vale sia per la testata sia per le
   due colonne, altrimenti il titolo si staccherebbe dal proprio contenuto. */
.mappa-head,
.mappa-grid {
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
}
.mappa-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(28px, 4vh, 46px);
}
.mappa-head .h2 { margin-bottom: 10px; }
.mappa-head .h2 em { font-style: normal; color: var(--h-gold); }
/* La sottofrase e' stata tolta il 17/08/2026: il titolo si spiega da solo e le
   due colonne dicono il resto. Se un domani dovesse tornare, la regola era
   color paper-dim, font clamp(14px, 1.5vw, 16px), e su una riga sola. */

.mappa-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* --- il filo delle quattro fasi --- */
.mappa-filo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}
/* La linea sfuma dal segnale al bordo: il percorso e' piu' definito all'inizio
   e si apre verso il seguito, che e' proprio cio' che la sezione dice. */
.mappa-filo::before {
  content: '';
  position: absolute;
  left: 7px; top: 9px; bottom: 9px;
  width: 1px;
  background: linear-gradient(180deg, var(--signal), var(--h-teal) 55%, var(--edge));
}
.mappa-tappa {
  position: relative;
  padding-bottom: clamp(20px, 3vh, 30px);
}
.mappa-tappa:last-child { padding-bottom: 0; }
.mappa-tappa::before {
  content: '';
  position: absolute;
  left: -27px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--void);
  border: 1.5px solid var(--signal);
  transition: background-color .26s var(--ease), box-shadow .26s var(--ease);
}
.mappa-tappa:hover::before,
.mappa-tappa:focus-within::before {
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(var(--sig-rgb), .16);
}
.mappa-fase {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.mappa-tt {
  display: block;
  margin: 3px 0 5px;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper);
  text-decoration: none;
  transition: color .22s var(--ease);
}
.mappa-tt:hover, .mappa-tt:focus-visible { color: var(--signal); outline: none; }
.mappa-tt:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mappa-tappa p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 52ch;
}

/* --- l'indice --- */
/* Niente filetto in cima: prima ce n'era uno, e insieme al bordo della prima
   voce disegnava due righe a un pixel di distanza. La colonna comincia con
   l'etichetta, come quella di sinistra comincia con «Fase 01». */
.mappa-indice { padding-top: 2px; }
/* L'etichetta si allinea a «Fase 01» della colonna accanto: stessa dimensione,
   stessa spaziatura, stesso grigio. Sono i due appigli in cima alle colonne e
   devono stare sulla stessa riga ottica. */
.mappa-lab {
  display: block;
  padding: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
/* STESSA MISURA DEI TITOLI DELLE TAPPE, non una misura minore.
   Le voci dell'indice usano lo stesso clamp di .mappa-tt: le due colonne sono
   affiancate e devono avere lo stesso peso, altrimenti quella piu' piccola
   sembra un ripensamento invece che l'altra meta' della sezione.
   Storia breve, per non rifare il giro: erano 15px, le ho portate a 14
   credendo che il titolare le volesse piu' contenute, e il risultato e' stato
   il difetto opposto, cioe' un indice che spariva accanto al percorso.
   Il respiro fra le righe sale di conseguenza: con un testo piu' grande, righe
   strette lo soffocano. */
.mappa-indice a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 15px 2px;
  border-top: 1px solid var(--edge);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper);
  text-decoration: none;
  transition: color .22s var(--ease), padding-left .22s var(--ease);
}
.mappa-indice a:hover,
.mappa-indice a:focus-visible { color: var(--signal); padding-left: 8px; outline: none; }
/* La freccia non cresce con il testo: resta piccola perche' e' un segnale, non
   una parola. Se seguisse il clamp diventerebbe la cosa piu' vistosa della
   riga. */
.mappa-go {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--edge);
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.mappa-indice a:hover .mappa-go,
.mappa-indice a:focus-visible .mappa-go { color: var(--signal); transform: translateX(3px); }

@media (max-width: 760px) {
  .mappa-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mappa-tappa::before,
  .mappa-tt,
  .mappa-indice a,
  .mappa-go { transition: none; }
  .mappa-indice a:hover { padding-left: 2px; }
}

/* ============ PERCORSI ============ */
/* ALLINEAMENTO CON L'HERO.
   L'apertura del sito e' costruita diversamente dalle altre sezioni: .hero-inner
   e' una colonna centrata da --maxw che si porta dentro il proprio --pad, quindi
   "beassessed" e "Valuta cio' che conta davvero" partono da (centratura + pad).
   Qui invece il pad sta sulla sezione e la colonna si centra dentro: si parte da
   (centratura) e basta. Le due cose non coincidono, e lo scarto non e' fisso —
   vale (larghezza finestra - --maxw) / 2 finche' resta sotto il pad, poi il pad:
   20px a 1280 di finestra, 77px a 1536, zero sotto i 1240 dove gia' coincidono.

   Si recupera con un padding sinistro, non con un margine: il margine
   toglierebbe la centratura automatica e sposterebbe la colonna invece del suo
   contenuto, mancando il bersaglio di una settantina di pixel. Il padding
   lascia la scatola dov'e' e rientra solo cio' che sta dentro, bordo destro
   compreso, che resta allineato al resto della pagina.

   La misura e' in percentuale e non in 100vw di proposito: 100vw comprende la
   barra di scorrimento, mentre la colonna dell'hero si centra sullo spazio
   utile. Con 100vw il rientro sbagliava di sette pixel su una finestra con la
   barra visibile. Il 50% qui si risolve sulla larghezza interna della sezione,
   quindi la barra non entra nel conto.

   Il bersaglio e' la posizione A RIPOSO del titolo dell'hero: quel titolo ha
   una lieve inclinazione 3D animata che lo fa oscillare di una decina di pixel,
   e inseguirla non avrebbe senso. */
.paths-act { padding: clamp(60px, 9vh, 110px) var(--pad) clamp(80px, 12vh, 140px); }
.hp .paths-lead,
.paths {
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
}
.hp .paths-lead {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -.025em;
  display: flex;
  flex-direction: column;
}
.paths {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 28px;
  border-radius: 4px;                 /* squadrato: niente pill arrotondate */
  background: linear-gradient(var(--deep), var(--void));
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent, var(--h-teal));
  transform-style: preserve-3d;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
}
.card.teal { --accent: var(--signal); }
.card.plum { --accent: var(--h-plum); }
.card.warm { --accent: var(--h-gold); }

.card-idx {
  position: absolute;
  top: 22px; right: 24px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--edge);
  transition: color .4s;
}
.card:hover .card-idx { color: var(--accent); }

.card-glow {
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover .card-glow { opacity: 1; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); }

.tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px;
}
.card h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.card p { font-size: 14px; color: var(--paper-dim); flex: 1; }

.btn {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 3px;
  /* ⚠️ IL BOTTONE NON SEGUE L'ACCENTO DELLA SCHEDA, dal 07/09/2026.
     Prima era var(--accent), e ogni scheda ne definisce uno suo: sulla
     stessa schermata si vedevano tre bottoni di tre colori, oro, lilla e
     verde, che sembravano tre azioni di natura diversa mentre sono tutte
     lo stesso invito. L'accento resta a decorare la scheda, cioe' il filo
     superiore, il numero, il bordo e l'alone: quello distingue le sezioni
     senza far credere che i bottoni facciano cose diverse. */
  background: var(--h-gold, #E3B457);
  color: var(--void);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .3s var(--ease), filter .3s;
}
.btn::after { content: "→"; transition: transform .3s var(--ease); }
.btn:hover { gap: 14px; filter: brightness(1.12); }
.btn:hover::after { transform: translateX(2px); }
.card.plum .btn, .card.warm .btn { color: #0A0A0A; }
.warm-btn { background: var(--h-gold); color: #14100A; }

/* ============ RIFLESSIONE ============ */
.reflect {
  position: relative;
  padding: clamp(70px, 13vh, 150px) var(--pad);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--sig-rgb), .05), transparent 60%),
    var(--void);
}
.reflect-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.reflect-mark {
  display: block;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(60px, 9vw, 120px);
  line-height: .6;
  color: var(--signal);
  opacity: .28;
  margin-bottom: 18px;
  height: .5em;
}
.reflect-inner p {
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.75;
  color: var(--paper);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.reflect-inner p em {
  font-style: normal;
  color: var(--signal);
  font-weight: 500;
}
.reflect-close {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--edge);
  font-size: clamp(18px, 2vw, 25px) !important;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4 !important;
  color: var(--signal) !important;
  text-wrap: balance;
}

.reflect-attr {
  margin-top: 20px;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-dim) !important;
  line-height: 1.5 !important;
}

/* ============ TRANSIZIONI ============ */
.dawn { height: clamp(90px, 14vh, 170px); background: linear-gradient(var(--void), var(--bg-l)); }
.dusk { height: clamp(90px, 14vh, 170px); background: linear-gradient(var(--bg-l), var(--void)); }

/* ============ SEZIONI CHIARE ============ */
.light {
  background: var(--bg-l);
  color: var(--h-ink);
  padding: clamp(50px, 8vh, 90px) var(--pad) clamp(70px, 11vh, 130px);
}
.light .eyebrow { color: var(--h-teal); }
.light h2, .light h3, .light h4 { color: var(--h-ink); }

/* --- metodo: sticky stack --- */
/* Allineata all'hero come la sezione Percorsi: stessa formula, stessa ragione.
   La spiegazione per esteso e' nel blocco PERCORSI. Vale sia per la testata sia
   per i quattro passi, altrimenti il titolo si staccherebbe dal proprio elenco. */
.metodo-head,
.steps {
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
}
.metodo-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(30px, 5vh, 60px);
}
.metodo-head .lede { margin-top: 18px; }
.steps {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.step {
  position: sticky;
  top: 96px;
  display: grid;
  grid-template-columns: 68px 1fr 210px;
  align-items: center;
  gap: 26px;
  padding: 32px;
  background: var(--surf-l);
  border: 1px solid var(--h-line);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(18,33,30,.03);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step[data-step="1"] { top: 96px; }
.step[data-step="2"] { top: 112px; }
.step[data-step="3"] { top: 128px; }
.step[data-step="4"] { top: 144px; }
.step.pinned { box-shadow: 0 -18px 44px rgba(18,33,30,.10); }
.step-n {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--h-teal);
  align-self: start;
  padding-top: 4px;
}
.step-body h3 { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.02em; margin-bottom: 8px; }
.step-body p { font-size: 14.5px; color: var(--ink-dim); max-width: none; }

.step-viz { width: 100%; height: auto; }
.sv-grid line { stroke: var(--h-line); stroke-width: 1.5; }
.sv-dots circle { fill: var(--h-teal); opacity: .85; }
.sv-branch { fill: none; stroke: var(--h-line); stroke-width: 2; }
.sv-node { fill: var(--h-line); }
.sv-node.hot { fill: var(--h-teal); }
.sv-curve { fill: none; stroke: var(--h-teal); stroke-width: 2.5; }
.sv-mark { stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 4 4; }

/* --- monitoraggio --- */
.monit-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.monit-say h2 { margin: 14px 0 18px; }
.monit-say .lede { margin-bottom: 16px; }
.monit-say p { font-size: 15.5px; color: var(--ink-dim); margin-bottom: 14px; max-width: 58ch; }
.monit-note {
  border-left: 2px solid var(--h-line);
  padding-left: 16px;
  font-size: 14px !important;
}
.monit-card {
  background: var(--surf-l);
  border: 1px solid var(--h-line);
  /* Raggio generoso come il resto della pagina: i 4px di prima facevano
     leggere la scheda come un riquadro di sistema invece che come un oggetto
     del sito. E l'ombra ora e' di contatto piu' ambientale: la scheda si
     appoggia, non e' incollata. */
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(18,33,30,.04), 0 18px 40px -28px rgba(18,33,30,.30);
}
.monit-k { display: block; font-size: 11px; letter-spacing: .16em; color: var(--h-teal); margin-bottom: 16px; }
/* color sul contenitore: dentro l'SVG tutto usa currentColor, cosi' il tema
   (verde o ottone) si propaga da un punto solo, gradiente compreso. */
.monit-chart { width: 100%; height: auto; display: block; color: var(--h-teal); }

/* LE TRE FASCE. Una tinta sola a opacita' calante, dalla piu' carica in alto
   alla piu' tenue in basso: il verso si legge senza spiegazioni, e in scala di
   grigi resta ordinato. Le quattro righe equidistanti di prima erano rumore. */
.mc-fasce rect { fill: currentColor; }
.mc-fasce rect:nth-child(1) { fill-opacity: .085; }
.mc-fasce rect:nth-child(2) { fill-opacity: .05; }
.mc-fasce rect:nth-child(3) { fill-opacity: .022; }
.mc-base { stroke: var(--h-line); stroke-width: 1; }

/* L'area sfuma verso il basso invece di essere una campitura piatta: da'
   profondita' e smette di competere con la linea. */
.mc-area { fill: url(#mcArea); }
.mc-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: mcDraw 1.7s var(--ease) .25s forwards;
}

/* Le misurazioni passate sono cerchi vuoti, quella di adesso e' piena e con un
   alone: l'occhio va dove la persona sta ORA, non dove stava. */
.mc-dot circle {
  fill: var(--surf-l);
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mcPop .5s var(--ease) forwards;
}
.mc-dot circle:nth-child(1) { animation-delay: .55s; }
.mc-dot circle:nth-child(2) { animation-delay: .70s; }
.mc-dot circle:nth-child(3) { animation-delay: .85s; }
.mc-dot circle:nth-child(4) { animation-delay: 1.00s; }
.mc-dot circle:nth-child(5) { animation-delay: 1.15s; }
.mc-alone {
  fill: var(--h-gold);
  opacity: 0;
  animation: mcAlone .9s var(--ease) 1.3s forwards;
}
.mc-last {
  fill: var(--h-gold);
  stroke: var(--surf-l);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mcPop .5s var(--ease) 1.3s forwards;
}
.mc-verso {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--ink-dim);
  opacity: .7;
}
/* L'asse del tempo: i numeri sotto ai punti e la parola che dice cosa sono.
   text-anchor sta qui e non come attributo perche' vale per tutti e sei. */
.mc-x text {
  font-size: 9px;
  fill: var(--ink-dim);
  opacity: .75;
  text-anchor: middle;
}
.mc-xtit {
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ink-dim);
  opacity: .55;
  text-anchor: middle;
}
@keyframes mcDraw { to { stroke-dashoffset: 0; } }
@keyframes mcPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes mcAlone { to { opacity: .16; } }
.monit-legend {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.monit-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gold-deep);
  background: rgba(var(--gold-rgb), .13);
  border: 1px solid rgba(var(--gold-rgb), .35);
}
@media (prefers-reduced-motion: reduce) {
  /* Chi ha chiesto meno movimento vede il disegno gia' fatto, non un pezzo
     di grafico invisibile: ogni elemento animato torna al suo stato finale. */
  .mc-line { animation: none; stroke-dashoffset: 0; }
  .mc-dot circle, .mc-last { animation: none; opacity: 1; transform: none; }
  .mc-alone { animation: none; opacity: .16; }
}
@media (max-width: 860px) {
  .monit-grid { grid-template-columns: 1fr; gap: 30px; }
  .monit-say p { max-width: none; }
}

/* --- aree --- */
.aree-head { max-width: var(--maxw); margin: 0 auto clamp(28px, 4vh, 48px); }
.aree-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--h-line);
  border: 1px solid var(--h-line);
}
.area {
  background: var(--surf-l);
  padding: 30px 26px 34px;
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background .35s var(--ease);
}
.area:hover { background: #F7FAF9; }
.area .a-i { display: block; font-size: 10.5px; letter-spacing: .16em; color: var(--ink-dim); margin-bottom: 12px; }
.area h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 8px; }
.area p { font-size: 13.5px; color: var(--ink-dim); }
.area.is-az { background: #FBF6EA; }
.area.is-az:hover { background: #F8F1DF; }
.area.is-az .a-i, .area.is-az h3 { color: var(--gold-deep); }
.a-go {
  position: absolute;
  right: 26px; bottom: 28px;
  color: var(--gold-deep);
  transition: transform .3s var(--ease);
}
.area:hover .a-go { transform: translateX(4px); }

/* ============ FAQ ============ */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--h-line);
}
.faq-item {
  border-bottom: 1px solid var(--h-line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--h-ink);
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--h-teal); }
.faq-ic {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq-ic::before, .faq-ic::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--h-teal);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-ic::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-ic::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq-item[open] summary { color: var(--h-teal); }
.faq-body {
  overflow: hidden;
  padding: 0 4px 22px;
}
.faq-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: 64ch;
}
.faq-item[open] .faq-body { animation: faqOpen .4s var(--ease); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ============ AZIENDE ============ */
.az-act {
  position: relative;
  padding: clamp(70px, 11vh, 130px) var(--pad);
  overflow: hidden;
}
/* Portata sulla colonna comune e allineata all'hero come le altre sezioni: era
   una colonna centrata da 760px, quindi partiva 168px piu' a destra di tutto il
   resto. Cambia solo DOVE comincia il blocco, non la lunghezza delle righe: i
   paragrafi restano larghi al massimo 54 caratteri per conto loro (.lede), e il
   testo continua a occupare la stessa misura di prima. */
.az-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
  position: relative;
  z-index: 2;
}
.az-inner .lede { margin: 22px 0 30px; }
.az-bars {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  display: flex;
  align-items: flex-end;
  gap: 2.4vw;
  padding: 0 var(--pad);
  opacity: .16;
  pointer-events: none;
}
.az-bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(var(--h-gold), transparent);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1s var(--ease);
}
.az-act.in .az-bars span { transform: scaleY(1); }
.az-bars span:nth-child(2) { transition-delay: .08s; }
.az-bars span:nth-child(3) { transition-delay: .16s; }
.az-bars span:nth-child(4) { transition-delay: .24s; }
.az-bars span:nth-child(5) { transition-delay: .32s; }
.az-bars span:nth-child(6) { transition-delay: .40s; }

/* ============ TRUST ============ */
.trust-act { padding: clamp(50px, 8vh, 90px) var(--pad); background: var(--deep); }
.trust {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.tr { background: var(--void); padding: 28px 24px; }
.tr-i { display: block; font-size: 10.5px; letter-spacing: .16em; color: var(--signal); margin-bottom: 14px; }
.tr h4 { font-size: 15.5px; letter-spacing: -.01em; margin-bottom: 8px; }
.tr p { font-size: 13.5px; color: var(--paper-dim); }

/* ============ PRO ============ */
/* Sezione compattata il 05/08/2026: era il blocco piu' arioso della home —
   cornice fino a 130px, 30px fra i paragrafi, interlinea da corpo piccolo su
   testo grande. Su schermo alto quasi 150px se ne andavano in aria. Il ritmo
   ora e' uno solo: 18px sopra ogni paragrafo (il margine sta tutto sopra, cosi'
   il distacco da titolo e fra paragrafi e' identico e non dipende dal collasso
   dei margini), interlinea 1.55, al corpo di questo testo serve meno aria di
   quella del corpo di default. */
.pro-act { padding: clamp(52px, 8vh, 92px) var(--pad); }
/* Allineata all'hero come le altre sezioni: era una colonna centrata da 820px,
   quindi cominciava 138px piu' a destra. Cambia il punto di partenza, non la
   misura del testo: i paragrafi hanno gia' il loro limite di 54 caratteri. */
.pro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
}
.pro .lede { margin: 18px 0 0; line-height: 1.55; }
.pro .btn { background: var(--signal); }

/* --- sui dati: quattro fatti, in corpo minore ---
   Deliberatamente sottotono. La home e' gia' densa e questo non e' un argomento
   di vendita: e' la risposta che serve a chi sta gia' valutando di iscriversi.
   Chi non la sta cercando deve poterla scorrere senza inciamparci. */
.pro-dati-intro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
}
/* Lo stacco va scritto con un selettore piu' forte, e questa e' la ragione per
   cui prima non c'era: .pro-dati-intro e' un <p>, e in cima al foglio c'e'
   .hp p { margin: 0 } che, avendo una classe piu' un elemento, vince su una
   classe sola. La riga gialla risultava quindi incollata al paragrafo sopra e
   alla riga di separazione sotto, comunque si cambiasse il valore qui, cosa
   che dal codice non si vedeva e che e' saltata fuori solo misurando la pagina.
   Con .pro davanti il conto cambia e il margine arriva a destinazione.
   44px sopra perche' li' comincia un blocco di natura diversa: non piu' il
   discorso, ma quattro fatti sui dati. 14px sotto per staccare il titolino
   dalla linea che apre l'elenco. */
.pro .pro-dati-intro { margin: 44px 0 14px; }
.pro-dati {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  /* Il tetto di 820px e' la larghezza che questa sezione aveva prima di essere
     allineata all'hero, e va tenuto: le colonne si formano da sole in base allo
     spazio disponibile, quindi su tutta la colonna comune le quattro voci si
     schiererebbero in un'unica riga di colonnine strette. Due file da due e'
     come sono state scritte e come si leggono. */
  max-width: 820px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 28px;
  border-top: 1px solid var(--edge);
  padding-top: 14px;
}
.pro-dati li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-dim);
  padding-left: 14px;
  position: relative;
}
.pro-dati li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(var(--sig-rgb), .55);
}
.pro-dati strong { color: var(--paper); font-weight: 600; }
.pro-dati a { color: var(--signal); text-underline-offset: 3px; }

/* ============================================================
   ALLINEAMENTO ALL'HERO, le sezioni rimanenti.

   Stessa formula e stessa ragione spiegate nel blocco PERCORSI: qui stanno i
   contenitori larghi --maxw che partivano 72px piu' a sinistra del titolo
   d'apertura. Portarli sulla stessa riga e' cio' che rende la pagina una sola
   colonna dall'inizio alla fine.

   CHI NON E' IN ELENCO, E PERCHE'. Mappa, "In dieci secondi" e il piede erano
   gia' allineati: sono costruiti come l'hero, con il proprio margine dentro la
   colonna. Le schede delle soluzioni (1000px), l'elenco delle domande (860px),
   Aziende (760px) e la sezione professionista (820px) hanno invece colonne piu'
   strette e centrate, quindi partono GIA' piu' a destra dell'hero: allinearle
   vorrebbe dire allargarle, che e' un'altra decisione e cambia la forma delle
   sezioni, non solo il loro margine.
   ============================================================ */
.monit-grid,
.aree-head,
.aree-grid,
.trust {
  padding-left: min(var(--pad), max(0px, calc(50% + var(--pad) - var(--maxw) / 2)));
}

/* ============ FOOTER ============ */
.foot {
  border-top: 1px solid var(--edge);
  padding: 34px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.foot .wordmark { font-size: 14px; color: var(--paper); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { font-size: 13px; color: var(--paper-dim); text-decoration: none; }
.foot-links a:hover { color: var(--signal); }
/* La riga legale occupa una fascia tutta sua invece di dividersi lo spazio con
   marchio e link: e' l'unico modo perche' ci stia intera. Con flex-wrap attivo
   basta una base del 100%. */
/* Centrata sulla propria fascia. Allineata a sinistra finiva dove finiva il
   testo, e con gli altri blocchi del pie' di pagina che arrivano a filo del
   bordo destro sembrava tagliata a meta'. Centrandola i due margini sono
   uguali per costruzione, e la riga si legge come una chiusura invece che come
   qualcosa rimasto in sospeso. */
.foot-copy {
  flex: 1 0 100%;
  text-align: center;
  font-size: 11.5px;
  color: var(--paper-dim);
}
/* Il recapito: l'email in evidenza, la riga sotto piu' spenta. E' la voce
   "Contatti" del menu, quindi si arriva qui saltando, deve essere la prima
   cosa che si legge, non un'altra riga di pie' di pagina fra le tante. */
.foot-contatti a {
  font-size: 15px;
  /* Bianco scritto per esteso, non come variabile: e' l'unico colore di questa
     pagina che deve reggere anche se il resto del foglio non fosse applicato.
     Un recapito illeggibile e' peggio di un recapito assente, chi non lo vede
     pensa che non ci sia. */
  color: #EDF2F0;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--sig-rgb), .45);
  padding-bottom: 1px;
}
.foot-contatti a:hover { color: var(--signal); border-color: var(--signal); }
/* Su schermo stretto il testo va a capo e il bordo si spezza a meta' parola:
   meglio tenerlo intero, un indirizzo email non si legge spezzato. */
.foot-contatti a { white-space: nowrap; }
/* La conferma della copia: compare accanto all'indirizzo e sparisce da sola.
   Non occupa spazio quando e' vuota, cosi' il pie' di pagina non si muove. */
.foot-mail-eco { font-size: 11px; color: var(--signal); margin-left: 10px; }
/* ...e quando e' vuota sparisce del tutto. PERCHE'. Il riquadro dei contatti
   eredita da .foot-links la distribuzione dello spazio fra i propri elementi, e
   gli elementi sono due: l'indirizzo e questa casella. Vuota non si vede ma
   occupa il suo posto nella distribuzione, e su schermo stretto, dove il
   riquadro e' largo quanto lo schermo, spingeva l'email visibilmente fuori
   centro. Da computer non si notava perche' li' il piede e' una riga sola.
   Con display:none la casella esce dal conto finche' non ha qualcosa da dire. */
.foot-mail-eco:empty { display: none; }
/* E l'indirizzo si centra per conto suo, senza dipendere dalla distribuzione. */
.foot-contatti { justify-content: center; }
/* Lo stacco dall'intestazione fissa: senza, saltando qui la prima riga finisce
   sotto la barra del menu. */
#contatti { scroll-margin-top: 90px; }

/* ============ SELETTORE VERSIONI (solo anteprima) ============ */
.vswitch {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(var(--veil-rgb), .78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--edge);
  font-size: 11px;
}
.vswitch .vs-lbl { color: var(--paper-dim); letter-spacing: .14em; text-transform: uppercase; }
.vswitch a {
  color: var(--paper-dim);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}
.vswitch a:hover { color: var(--paper); }
.vswitch a.on { color: var(--void); background: var(--signal); }

/* ============ REVEAL ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .paths { grid-template-columns: 1fr; }
  .aree-grid { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: 1fr; }
  .step { grid-template-columns: 54px 1fr; }
  .step-viz { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .hero-copy { max-width: none; }
  .hero-veil { background: linear-gradient(180deg, rgba(var(--veil-rgb), .45), rgba(var(--veil-rgb), .9)); }
  .rail { display: none; }
  .hero-poem {
    left: var(--pad); right: var(--pad);
    bottom: 170px;
    text-align: left;
    font-size: 12.5px;
  }
  /* Cannocchiale su mobile: rimpicciolito e ancorato all'angolo in basso a destra
     (transform-origin) e alzato, così resta interamente visibile anche quando la
     barra dell'indirizzo riduce l'altezza utile (prima veniva mozzato in basso). */
  .scope { right: 14px; bottom: 210px; opacity: .55; transform: scale(.6); transform-origin: bottom right; }
  /* Scena "avvicinamento": su mobile il telescopio da 480px veniva tagliato a destra.
     Rimpicciolito e ricentrato come intero, così si vede tutto; lo zoom resta
     ancorato all'occhiello (transform-origin), che il JS scala per coprire lo schermo. */
  .app-scope {
    width: 337px; height: 281px;
    left: calc(50% - 168px); top: calc(50% - 140px);
    transform-origin: 50px 210px;
  }
  .aree-grid { grid-template-columns: 1fr; }
  .scale .tick .lbl { font-size: 10.5px; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ============ ACCESSIBILITÀ ============ */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .step { position: static; }
  .az-bars span { transform: scaleY(1); }
}


/* ============ SEZIONE PROFESSIONISTI: LA GRIGLIA ============

   PERCHE' NON CI SONO PIU' I RIQUADRI.
   La prima versione aveva bordi e fondo: sembravano caselle di un modulo, e in
   una griglia di sette diventavano una tabella. Le griglie di questo tipo fatte
   bene non hanno contenitori, hanno un'icona grande, un titolo, tre righe di
   testo e molta aria intorno. E' il vuoto a separare, non una linea.

   L'icona sta dentro un cerchio appena acceso: le da' peso senza disegnare un
   bordo, e le tiene tutte della stessa misura anche quando il disegno dentro e'
   piu' largo che alto.
   ============================================================ */
.pro-schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 46px 40px;
  margin: 48px 0 44px;
  text-align: center;
}
.pro-scheda {
  max-width: 32ch;
  margin: 0 auto;
}
.pro-ico {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--sig-rgb), .20), rgba(var(--sig-rgb), .05) 62%, transparent 72%);
}
.pro-scheda svg,
.pro-scheda-larga svg {
  width: 32px; height: 32px;
  display: block;
  fill: none;
  stroke: var(--h-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pro-scheda h3 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 9px;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pro-scheda p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--paper-dim);
  margin: 0;
}

/* La scheda larga resta l'unica con un contenitore, ed e' voluto: e' un
   argomento, non una funzione, e deve staccarsi dalla griglia. */
.pro-scheda-larga {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 44px 0 40px;
  padding: 26px 28px;
  border-left: 3px solid var(--h-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(255,255,255,.04);
  text-align: left;
}
.pro-scheda-larga .pro-ico { margin-bottom: 0; flex: none; }
.pro-scheda-larga h3 {
  font-size: 17px; font-weight: 600; color: var(--paper);
  margin: 8px 0 10px; letter-spacing: -.01em;
}
.pro-scheda-larga p {
  font-size: 14px; line-height: 1.7; color: var(--paper-dim);
  margin: 0 0 12px; max-width: 66ch;
}
.pro-scheda-larga p:last-child { margin-bottom: 0; }

.pro-chiusa {
  font-size: 15.5px;
  color: var(--paper);
  margin: 0;
  text-align: center;
}

/* I quattro fatti sui dati: stessa griglia, misure appena piu' contenute. */
.pro-schede-dati {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 38px 32px;
  margin: 24px 0 40px;
}
.pro-schede-dati .pro-ico { width: 56px; height: 56px; margin-bottom: 14px; }
.pro-schede-dati .pro-scheda svg { width: 27px; height: 27px; }
.pro-schede-dati .pro-scheda h3 { font-size: 14px; }
.pro-schede-dati .pro-scheda p { font-size: 12.5px; }
.pro-schede-dati .pro-scheda a { color: var(--h-gold); }

@media (max-width: 560px) {
  .pro-schede { gap: 36px 24px; margin: 34px 0 30px; }
  .pro-scheda { max-width: none; }
  .pro-scheda-larga { flex-direction: column; gap: 14px; padding: 22px; margin: 32px 0 28px; }
}

/* ---------- la scelta della lingua dentro la barra della home ----------
   Le regole generali di .lingua stanno in style.css e sono pensate per fondo
   chiaro: usano --ink-muted, che qui e' un verde scuro su un verde scuro e
   sparisce. La barra della home ha due stati, scura in cima alla pagina e
   .on-light quando scorre sopra una sezione chiara, e il selettore deve
   seguirli entrambi come fanno le altre voci. Trovato il 28/08/2026: si vedeva
   solo la sagoma. */
.nav .lingua,
.nav-drop .lingua { border-color: var(--edge); }

.nav .lingua a,
.nav-drop .lingua a { color: var(--paper-dim); }

.nav .lingua a:hover,
.nav-drop .lingua a:hover { color: var(--paper); background: rgba(255,255,255,.10); }

/* La lingua attiva non e' un collegamento: e' una pastiglia piena, ed e' il
   solo elemento della barra che porta il colore di accento. */
.nav .lingua .lingua-on,
.nav-drop .lingua .lingua-on { background: var(--signal); color: #14100A; }

.nav.on-light .lingua { border-color: var(--h-line); }
.nav.on-light .lingua a { color: var(--ink-dim); }
.nav.on-light .lingua a:hover { color: var(--h-ink); background: rgba(0,0,0,.05); }