/* =============================================================================
   SpaceQuant — sistema di stile del sito di marketing
   Dark-first: il marchio vive su fondo nero (la curva a particelle del logo).
   Nessuna dipendenza esterna — nessun font remoto, nessun CDN.
   ============================================================================= */

/* --- 1. Token ------------------------------------------------------------
   Il sito vive su bianco; l'unica zona scura è l'applicazione ricostruita
   nella sequenza d'apertura, che è scura perché lo è davvero.
   ------------------------------------------------------------------------- */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f5f5f7;
  --surface:   #ffffff;
  --surface-2: #f5f5f7;
  --border:    rgba(0, 0, 0, .09);
  --border-2:  rgba(0, 0, 0, .16);

  --text: #1d1d1f;
  --t2:   #6e6e73;
  --t3:   #86868b;

  --blue:    #3b6ef5;
  --violet:  #7b3fe4;
  --magenta: #e0489f;

  --green: #34c759;
  --amber: #c77700;
  --red:   #e03131;

  /* Le candele del grafico: gli stessi valori del tema scuro dell'app */
  --candle-up:   #4ade80;
  --candle-down: #f87171;

  --grad: linear-gradient(90deg, #3b6ef5 0%, #7b3fe4 52%, #e0489f 100%);

  --r:   12px;
  --r-l: 18px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --wrap-narrow: 760px;

  /* Altezza dell'intestazione. È una variabile perché la sequenza d'apertura
     deve risalire esattamente di tanto per partire dal bordo dello schermo. */
  --header-h: 62px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.022em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.032em; }
h3 { font-size: 1.2rem; letter-spacing: -.018em; }
p  { margin: 0 0 1.1em; color: var(--t2); }
a  { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--text); font-weight: 620; }
code, kbd, samp { font-family: var(--mono); font-size: .9em; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }

/* L'attributo `hidden` deve avere sempre l'ultima parola. Senza questa riga,
   qualunque regola d'autore con un `display` esplicito (.plan-price, .cap, i
   pannelli…) lo sovrascrive, perché una regola del foglio di stile batte quella
   del browser: l'elemento resta a schermo pur essendo marcato nascosto. */
[hidden] { display: none !important; }

::selection { background: rgba(123, 63, 228, .18); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 3. Impaginazione ---------------------------------------------------- */
.wrap        { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 24px; }

section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
section.tight { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.bg-soft { background: var(--bg-soft); border-block: 1px solid var(--border); }

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: .9rem;
}

.lead { font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--t2); line-height: 1.45; }

.grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- 4. Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 22px;
  height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 640; letter-spacing: -.02em;
  text-decoration: none; font-size: 1.02rem;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }

.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav a { color: var(--t2); font-size: .93rem; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); }

/* Selettore di lingua */
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: 2px; gap: 2px;
}
.lang button {
  font: inherit; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em;
  background: none; border: 0; color: var(--t3);
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s;
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

@media (max-width: 700px) {
  .nav { gap: 14px; }
  .nav a.hide-sm { display: none; }
}

/* --- 5. Bottoni ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  font: inherit; font-size: .97rem; font-weight: 600;
  padding: 11px 22px;
  border-radius: 980px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px -6px rgba(123, 63, 228, .5);
}
.btn-primary:hover { box-shadow: 0 8px 24px -8px rgba(123, 63, 228, .65); }

.btn-solid { background: var(--text); color: var(--bg); }
.btn-solid:hover { background: #fff; }

.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-lg { font-size: 1.03rem; padding: 15px 28px; }
.btn-sm { font-size: .87rem; padding: 8px 15px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- 6. Card ------------------------------------------------------------- */
.card {
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--r-l);
  padding: 30px;
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }

.card-accent { position: relative; overflow: hidden; }
.card-accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad);
}

/* --- 7. Riquadri di nota ------------------------------------------------- */
.note {
  border: 0;
  border-left: 3px solid var(--border-2);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-soft);
  padding: 18px 20px;
  margin: 1.6rem 0;
  font-size: .96rem;
}
.note p:last-child { margin-bottom: 0; }
.note-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 640; color: var(--text); margin-bottom: .5em;
}
.note-warn  { border-left-color: var(--amber); }
.note-warn  .note-title { color: var(--amber); }
.note-info  { border-left-color: var(--blue); }
.note-info  .note-title { color: var(--blue); }
.note-ok    { border-left-color: var(--green); }
.note-ok    .note-title { color: var(--green); }

/* --- 8. Tipografia di supporto ------------------------------------------- */
.quote {
  font-size: clamp(1.35rem, 3.2vw, 1.95rem);
  line-height: 1.35;
  font-weight: 620;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 1.2em;
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.mono-label {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--t3);
}

/* Blocco a larghezza fissa per output tecnico */
.pre {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.7;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  overflow-x: auto;
  color: var(--t2);
  white-space: pre;
}
.pre .hl { color: var(--text); font-weight: 600; }
.pre .ok { color: var(--green); }
.pre .no { color: var(--red); }
.pre .am { color: var(--amber); }

/* --- 9. Tabelle ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-l); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); }
th { color: var(--t3); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
td { color: var(--t2); }
td strong { color: var(--text); }

/* --- 10. Elenchi --------------------------------------------------------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: .7em;
  color: var(--t2);
}
.list li::before {
  content: ""; position: absolute; left: 8px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet);
}
.list-check li::before {
  content: "✓";
  left: 4px; top: 0; width: auto; height: auto;
  background: none; color: var(--green); font-weight: 700;
}
.list-no li::before {
  content: "✕";
  left: 4px; top: 0; width: auto; height: auto;
  background: none; color: var(--t3); font-weight: 700;
}

/* --- 11. Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 48px 0 40px;
  font-size: .9rem;
}
.footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 34px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--t3); font-weight: 600; margin-bottom: 1em;
}
.footer-grid a { display: block; color: var(--t2); margin-bottom: .6em; }
.footer-grid a:hover { color: var(--text); text-decoration: none; }
.disclaimer {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  color: var(--t3);
  font-size: .82rem;
  line-height: 1.7;
}
.disclaimer p { color: var(--t3); }
.disclaimer p:last-child { margin-bottom: 0; }

/* --- 12. Utility --------------------------------------------------------- */
.center     { text-align: center; }
.mb-0       { margin-bottom: 0; }
.mt-3       { margin-top: 3rem; }
.hidden     { display: none !important; }
.text-small { font-size: .88rem; }
.t3         { color: var(--t3); }

.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;
}

/* Avviso di configurazione mancante — visibile solo finché config.js
   contiene un segnaposto. Non deve mai finire in produzione. */
.todo-flag {
  display: inline-block;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  background: rgba(251, 191, 36, .13);
  border: 1px dashed var(--amber);
  color: var(--amber);
  padding: 2px 8px; border-radius: 5px;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================================
   13. HOME — hero e statistiche
   ============================================================================= */

.hero-lead { max-width: 640px; }
.hero-cta  { margin-top: 2rem; }

/* --- Statistiche della misura -------------------------------------------- */
.stat-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 2.2rem 0;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 22px;
  text-align: center;
}
.stat-n {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-l {
  margin: .5em 0 0;
  font-size: .84rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* =============================================================================
   14. APERTURA CINEMATICA
   -----------------------------------------------------------------------------
   La pista (.cine-track) è alta più schermate: è lo spazio di scorrimento che
   la sequenza consuma. La scena (.cine-stage) resta ferma in vista e cambia
   soltanto il proprio contenuto.

   Le proprietà animate passano tutte da variabili impostate da cinema.js:
     --veil   quanto l'applicazione è velata dietro al titolo d'apertura
     --frame  quanto è comparso il portatile (0 = si guarda dentro lo schermo)
     --light  quanto il fondo è passato dal nero dell'app al bianco della pagina
     --logo   quanto è comparso il marchio dietro al portatile
     --w      larghezza di riferimento della scena: ogni misura del portatile è
              una frazione di questa, così il disegno resta proporzionato a
              qualunque dimensione
   ============================================================================= */

.cine {
  position: relative;
  --veil: 1;
  --frame: 0;
  --light: 0;
  --logo: 0;
  --w: 1180px;

  /* La striscia bianca sopra la scena era la somma di due cose, e servivano
     entrambe le correzioni:
       · l'intestazione è `sticky`, quindi resta nel flusso e occupa la sua
         altezza (più il filo del bordo) anche mentre è fuori campo → si risale
         esattamente di tanto;
       · questa è una `section`, e le sezioni hanno un respiro verticale che qui
         non ha senso: la scena è a tutto schermo, non un blocco di contenuto.
     Il primo fotogramma è quello che si vede appena aperta la pagina: deve
     partire dal bordo dello schermo. */
  margin-top: calc((var(--header-h) + 1px) * -1);
  padding: 0;
}
.cine-track { height: 700vh; position: relative; }

.cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Il fondo: nero mentre si è dentro l'applicazione, bianco quando la si vede
   da fuori. Il passaggio avviene con il comparire del portatile. */
.cine-bg {
  position: absolute; inset: 0;
  background: #000;
  z-index: 0;
}
.cine-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  opacity: var(--light);
}

/* Il marchio, dietro al portatile.
   La curva a particelle occupa tutto lo schermo; il nome invece va in alto,
   dove il portatile non lo copre — al centro sarebbe dietro allo schermo e
   non si vedrebbe affatto.

   Il PNG è RITAGLIATO sulla curva (lo produce tools/make-watermark.py), quindi
   qui non c'è niente da compensare: l'immagine è il disegno, e si colloca come
   qualunque altra. Prima era quadrata con due terzi di vuoto attorno, e per
   metterla al posto giusto servivano due numeri misurati a mano, ripetuti qui e
   in cinema.js — che è esattamente il genere di cosa che si scolla in silenzio.

   La larghezza è **tre quarti della pagina**, e non è una misura scelta a
   occhio fra tante: debordando dai lati il marchio diventava una texture di
   fondo, e una texture non si guarda. Contenuto entro la colonna della pagina
   torna a essere un oggetto — è la differenza fra riempire e presentare. */
.cine-logo {
  position: absolute;
  inset: 0;
  opacity: var(--logo);
  z-index: 1;
  pointer-events: none;
}
.cine-logo img {
  position: absolute;
  left: 50%; top: 58%;
  width: 75vw;
  max-width: none;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) scale(calc(.92 + var(--logo) * .08));
}
/* Il nome sta sopra al marchio, non a filo di pagina: appoggiato in alto era
   una didascalia dell'intestazione, e fra lui e la macchina restava un vuoto
   che non apparteneva a nessuno dei due. Sceso, i tre pezzi — nome, curva,
   prodotto — tornano a essere un blocco solo. */
.cine-logo-word {
  position: absolute;
  left: 0; right: 0;
  top: 11.5vh;
  text-align: center;
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -.05em;
  color: var(--text);
  transform: translateY(calc((1 - var(--logo)) * 24px));
}

/* --- titolo d'apertura ---------------------------------------------------- */
.cine-title {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  will-change: opacity, transform;
  color: #fff;
}
.cine-title .wrap { width: 100%; max-width: 1000px; text-align: center; }
.cine-title h1 {
  color: #fff;
  font-size: clamp(2.7rem, 7.6vw, 6rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.03;
  margin-bottom: .6em;
}
.cine-title .btn-row { justify-content: center; }

.cine-hint {
  margin: 3rem 0 0;
  font-size: .8rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cine-hint-arrow {
  width: 1px; height: 26px;
  background: linear-gradient(rgba(255, 255, 255, .5), transparent);
  animation: hintDrop 2s ease-in-out infinite;
}
@keyframes hintDrop {
  0%, 100% { transform: translateY(0);   opacity: .35; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* --- la camera ------------------------------------------------------------ */
.cine-zoom {
  position: relative;
  z-index: 2;
  width: var(--w);
  transform-origin: center center;
  will-change: transform;
}

/* =============================================================================
   IL PORTATILE
   Alluminio: tre gradienti sovrapposti — corpo, riflesso del bordo superiore e
   ombra propria. Ogni misura è una frazione di --w, così resta proporzionato.
   ============================================================================= */

.mac { position: relative; }

/* L'ombra d'ambiente: una macchia larga e appena accennata sotto la macchina.
   Non serve a farla sembrare più scura, serve a farla stare in un posto —
   senza, il portatile è ritagliato e incollato sul bianco. Sta a z-index 0 e
   tutto il resto della macchina sopra, così non vela lo schermo. */
.mac::after {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(var(--w) * -.022);
  width: 132%;
  height: calc(var(--w) * .08);
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(0, 0, 0, .19) 0%, rgba(0, 0, 0, .09) 42%, rgba(0, 0, 0, 0) 72%);
  opacity: var(--frame);
  pointer-events: none;
  z-index: 0;
}

.mac-lid {
  position: relative;
  z-index: 1;
  /* Il bordo della scocca cresce insieme a lei: a scena piena non deve esserci
     alcuna cornice attorno all'applicazione. Sottile: su un portatile vero la
     cornice è un filo, e una spessa fa subito finto. */
  padding: calc(var(--w) * .0055 * var(--frame));
  border-radius: calc(var(--w) * .012 * var(--frame));
}
/* ⚠️ L'alluminio è uno strato SOTTO lo schermo, non il contenitore dello
   schermo: mettere `opacity` sul genitore farebbe sparire anche l'applicazione
   che gli sta dentro — e la scena resterebbe nera senza un solo errore. */
.mac-lid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(158deg, #fafafb 0%, #dcdce0 26%, #c3c3c8 52%, #d8d8dc 74%, #aeaeb3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 calc(var(--w) * -.0015) 0 rgba(0, 0, 0, .18),
    0 calc(var(--w) * .018) calc(var(--w) * .055) rgba(0, 0, 0, .22);
  opacity: var(--frame);
  z-index: 0;
}
.mac-screen {
  position: relative;
  z-index: 1;
  aspect-ratio: var(--ar, 16 / 10);
  background: #000;
  border-radius: calc(var(--w) * .006 * var(--frame));
  overflow: hidden;
}
.mac-camera {
  position: absolute;
  top: calc(var(--w) * .0035);
  left: 50%;
  width: calc(var(--w) * .0035);
  height: calc(var(--w) * .0035);
  border-radius: 50%;
  background: #1b1b1e;
  transform: translateX(-50%);
  opacity: var(--frame);
  z-index: 6;
}

/* Il corpo, visto di fronte: è uno spessore, non una riga. Sottile com'era,
   con la cornice dello schermo ridotta spariva quasi del tutto e la macchina
   sembrava un pannello appoggiato per aria. */
.mac-base {
  position: relative;
  z-index: 1;
  /* ⚠️ L'altezza cresce con `--frame`, non è fissa. Il corpo sta nel flusso:
     tenendolo alto anche a scena piena — dove è invisibile, perché l'opacità è
     zero — ruberebbe quello spazio all'applicazione, che così non riempirebbe
     più lo schermo. Non si vede come una striscia: si vede come un pannello
     appena più piccolo della vista, ed è più difficile da attribuire. */
  height: calc(var(--w) * .024 * var(--frame));
  width: 108%;
  margin-left: -4%;
  background:
    linear-gradient(#e4e4e8 0%, #cdcdd3 26%, #b0b0b7 62%, #909097 88%, #7e7e85 100%);
  border-radius: 0 0 calc(var(--w) * .006) calc(var(--w) * .006);
  opacity: var(--frame);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 calc(var(--w) * .012) calc(var(--w) * .03) rgba(0, 0, 0, .18);
  clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}
/* cerniera: la striscia scura appena sotto lo schermo */
.mac-hinge {
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: calc(var(--w) * .004);
  background: linear-gradient(#8b8b91, #6f6f75);
}
/* incavo per aprire il coperchio */
.mac-notch {
  position: absolute;
  top: 0; left: 50%;
  width: calc(var(--w) * .075);
  height: calc(var(--w) * .009);
  transform: translateX(-50%);
  background: #a9a9af;
  border-radius: 0 0 calc(var(--w) * .007) calc(var(--w) * .007);
}

/* I piedini di gomma. Sono la sola cosa nera della macchina, e bastano loro a
   dire che poggia su un piano invece di galleggiare. */
.mac-foot {
  position: absolute;
  bottom: calc(var(--w) * -.0055 * var(--frame));
  width: calc(var(--w) * .055);
  height: calc(var(--w) * .006 * var(--frame));
  background: linear-gradient(#3d3d44 0%, #1c1c20 55%, #101013 100%);
  border-radius: 0 0 calc(var(--w) * .0022) calc(var(--w) * .0022);
  opacity: var(--frame);
  z-index: 1;
}
.mac-foot-l { left: 7%; }
.mac-foot-r { right: 7%; }

/* --- l'applicazione ------------------------------------------------------- */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0a0a0d;
  overflow: hidden;
}
/* velo che tiene indietro l'app finché il titolo è in campo */
.app::after {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: calc(var(--veil) * .78);
  pointer-events: none;
  z-index: 8;
}

.app-bar {
  display: flex; align-items: center; gap: calc(var(--w) * .006);
  padding: 0 calc(var(--w) * .008);
  height: calc(var(--w) * .028);
  flex: 0 0 auto;
  background: #131319;
  border-bottom: 1px solid #23232b;
  font-size: calc(var(--w) * .0088);
  color: #a6a8b6;
  white-space: nowrap;
  overflow: hidden;
}
.app-sel, .app-btn {
  border: 1px solid #2e2e38;
  border-radius: calc(var(--w) * .0035);
  padding: calc(var(--w) * .0026) calc(var(--w) * .0062);
  background: #191920;
}
.app-sel { color: #eceef4; }
.app-btn-on { border-color: #3b6fc4; color: #a8cfff; background: #16233a; }

.app-body { flex: 1; display: flex; min-height: 0; }

/* Barra degli strumenti di disegno: le icone sono iniettate da cinema.js */
.app-side {
  flex: 0 0 calc(var(--w) * .026);
  background: #0e0e13;
  border-right: 1px solid #23232b;
  padding: calc(var(--w) * .004) 0;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--w) * .0035);
}
.app-side svg {
  width: calc(var(--w) * .0125);
  height: calc(var(--w) * .0125);
  padding: calc(var(--w) * .0022);
  box-sizing: content-box;
  border-radius: calc(var(--w) * .003);
  stroke: #8b8d99;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-side svg.on { background: #2f5fa8; stroke: #fff; }

.app-chart { position: relative; flex: 1; min-width: 0; }
.app-chart canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
#chart-back  { z-index: 1; }
#chart-front { z-index: 3; pointer-events: none; }

/* --- didascalie: a tutto schermo, fra i due strati del grafico ------------ */
.cine-captions {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8%;
  will-change: opacity, transform;
}
.cap h2 {
  color: #fff;
  font-size: calc(var(--w) * .052);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0 0 calc(var(--w) * .012);
  text-shadow: 0 calc(var(--w) * .004) calc(var(--w) * .03) rgba(0, 0, 0, .55);
}
.cap p {
  color: rgba(255, 255, 255, .72);
  font-size: calc(var(--w) * .0165);
  line-height: 1.4;
  max-width: calc(var(--w) * .52);
  margin: 0;
  text-shadow: 0 calc(var(--w) * .002) calc(var(--w) * .02) rgba(0, 0, 0, .5);
}

/* --- pannelli delle capacità ---------------------------------------------- */
.panel {
  position: absolute;
  top: calc(var(--w) * .012); right: calc(var(--w) * .012);
  width: calc(var(--w) * .2);
  background: rgba(14, 14, 19, .92);
  border: 1px solid #2b2b35;
  border-radius: calc(var(--w) * .006);
  padding: calc(var(--w) * .009);
  font-size: calc(var(--w) * .0085);
  color: #a6a8b6;
  backdrop-filter: blur(8px);
  z-index: 4;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  color: #eceef4;
  font-weight: 600;
  margin-bottom: calc(var(--w) * .007);
}
.panel-num { font-family: var(--mono); color: #4ade80; font-variant-numeric: tabular-nums; }

.opt-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: calc(var(--w) * .002); }
.opt-grid i {
  display: block; aspect-ratio: 1;
  border-radius: calc(var(--w) * .0015);
  background: #22222a;
  opacity: .09;
}

.pf-svg { width: 100%; height: calc(var(--w) * .05); display: block; }
.pf-line { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pf-1 { stroke: #4d8dff; } .pf-2 { stroke: #e0489f; } .pf-3 { stroke: #4ade80; }

.panel-mql { width: calc(var(--w) * .23); }
.mql-file { font-family: var(--mono); font-size: calc(var(--w) * .0082); color: #eceef4; }
.mql-code {
  margin: 0;
  font-family: var(--mono);
  font-size: calc(var(--w) * .0072);
  line-height: 1.8;
  color: #8fb8e8;
  white-space: pre;
  overflow: hidden;
  min-height: calc(var(--w) * .1);
}

/* --- avanzamento ---------------------------------------------------------- */
.cine-rail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(128, 128, 128, .18);
  z-index: 9;
  opacity: calc(1 - var(--logo));
}
.cine-rail-fill {
  display: block; height: 100%;
  background: var(--grad);
  transform-origin: left center;
  transform: scaleX(0);
}

/* --- L'intestazione resta fuori finché la sequenza non è finita -----------
   Il menu comparirebbe sopra la scena a tutto schermo: torna quando il
   portatile è a misura e comincia lo scorrimento normale. */
.header-hidden .site-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.site-header {
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}

/* --- quando il movimento non è gradito ------------------------------------ */
/* Qui la scena non è più a tutto schermo: è una sezione come le altre, quindi
   l'intestazione torna a valere il suo spazio e riprende anche il respiro
   verticale delle sezioni. */
.cine-static { margin-top: 0; padding: clamp(3rem, 8vw, 6rem) 0 0; }
.cine-static .cine-track { height: auto; }
.cine-static .cine-stage {
  position: static;
  height: auto;
  display: block;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.cine-static .cine-bg { background: #fff; }
.cine-static .cine-title { position: static; display: block; color: var(--text); margin-bottom: 3rem; }
.cine-static .cine-title h1 { color: var(--text); }
.cine-static .cine-hint { display: none; }
.cine-static .cine-logo { display: none; }
.cine-static .cine-zoom { margin: 0 auto; max-width: 94vw; }
.cine-static .app::after { display: none; }
.cine-static .cine-captions {
  position: static;
  display: grid;
  gap: 16px;
  margin-top: 2.5rem;
  padding: 0 clamp(20px, 5vw, 60px);
}
.cine-static .cap {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  display: block;
  text-align: left;
  padding: 0;
}
.cine-static .cap h2 { color: var(--text); font-size: 1.4rem; text-shadow: none; }
.cine-static .cap p  { color: var(--t2); font-size: 1rem; max-width: none; text-shadow: none; }
.cine-static .cine-rail { display: none; }
.cine-static .panel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cine { margin-top: 0; padding: clamp(3rem, 8vw, 6rem) 0 0; }
  .cine-track { height: auto; }
  .cine-stage { position: static; height: auto; display: block; }
  .cine-hint-arrow { animation: none; }
  .header-hidden .site-header { opacity: 1; transform: none; }
}

/* --- schermi piccoli ------------------------------------------------------
   ⚠️ Tutto ciò che sta dentro `.cine-zoom` viene poi RIMPICCIOLITO dalla scala
   della camera: su un telefono è circa 0,7×. Una misura scritta qui va quindi
   letta moltiplicata per quel fattore — è il motivo per cui i corpi di testo
   sembrano esagerati e a schermo non lo sono. Le misure fuori dallo zoom (il
   titolo d'apertura, il marchio) non subiscono nulla. */
@media (max-width: 820px) {
  .cine { --w: 560px; }
  .cine-track { height: 560vh; }

  .cap h2 { font-size: calc(var(--w) * .098); }
  .cap p  { font-size: calc(var(--w) * .036); max-width: 88%; line-height: 1.35; }
  .cap    { padding: 0 6%; }

  .panel { display: none; }

  /* La barra dell'applicazione: alta e leggibile, con le voci che non ci
     stanno tolte invece che tagliate a metà dal bordo. */
  .app-bar { height: calc(var(--w) * .042); font-size: calc(var(--w) * .019); }
  .app-sel:first-child { display: none; }
  .app-bar .hide-sm { display: none; }

  .app-side { flex-basis: calc(var(--w) * .042); }
  .app-side svg { width: calc(var(--w) * .021); height: calc(var(--w) * .021); }

  /* Stessi tre quarti di larghezza del desktop: la proporzione fra marchio e
     pagina è quella a dare il tono, e non cambia con lo schermo.
     Cambia dove si appoggia. La curva sta DIETRO al portatile, non sopra: il
     colmo spunta appena oltre il coperchio e le due code escono ai lati. Più in
     alto era un secondo oggetto sospeso sopra la macchina, e i due si
     guardavano invece di stare insieme. */
  .cine-logo img { top: 46%; }
  .cine-logo-word { top: 27vh; }
}

/* =============================================================================
   14b. SEZIONI DELLA HOME
   ============================================================================= */

.sec-head { max-width: 780px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.sec-head h2 { margin-bottom: .4em; }
.sec-head .lead { margin: 0; }

/* --- ottimizzazione in 3D ------------------------------------------------- */
/* I quattro riquadri restano a due a due a ogni larghezza, telefono compreso:
   incolonnarli spezza il confronto, che è l'unico motivo per cui sono quattro
   e non uno. Su schermo stretto si stringe la cornice, non la griglia. */
.opt3d-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 2vw, 26px);
}
.opt3d-cell {
  margin: 0;
  background: var(--bg-soft);
  border-radius: var(--r-l);
  padding: 20px 16px 8px;
  overflow: hidden;
}
.opt3d-cell figcaption {
  font-size: .82rem;
  font-weight: 590;
  letter-spacing: -.01em;
  color: var(--t2);
  text-align: center;
  margin-bottom: 6px;
}
.opt3d-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.opt3d-note { text-align: center; margin-top: 1.6rem; }

/* ⚠️ Questo blocco va DOPO le regole qui sopra, e non è un dettaglio di stile:
   `@media` non aggiunge specificità. Stando prima — com'era — ogni riga qui
   dentro perdeva contro la stessa regola scritta più in basso, e il telefono si
   ritrovava la cornice del desktop attorno a un riquadro largo un terzo: 145 px
   di disegno dentro 177 di cella, in 4:3 invece che quadrato. Non lo segnalava
   niente: le regole erano scritte, sensate, e semplicemente non valevano. */
@media (max-width: 720px) {
  .opt3d .wrap { padding: 0 14px; }
  .opt3d-cell { padding: 12px 4px 2px; border-radius: 14px; }
  .opt3d-cell figcaption { font-size: .67rem; line-height: 1.25; margin-bottom: 2px; }
  .opt3d-canvas { aspect-ratio: 1 / 1; }
}

/* --- la misura ------------------------------------------------------------ */
.measure-big {
  font-size: clamp(4.5rem, 15vw, 10rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0 0 .1em;
}
.measure-cap {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 1.6em;
}

/* --- il percorso in cinque passi ------------------------------------------ */
.flow {
  --flow-gap: clamp(14px, 2vw, 30px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--flow-gap);
}
@media (max-width: 980px) { .flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .flow { grid-template-columns: repeat(2, 1fr); } }

/* I passaggi si accendono uno dopo l'altro mentre si scorre: `--on` va da 0 a 1
   ed è scritto da assets/flow.js. Il valore di ripiego è 1, così senza
   JavaScript — o con animazioni ridotte — il gruppo è semplicemente lì. */
.flow-step {
  position: relative;
  opacity: calc(.12 + var(--on, 1) * .88);
  transform: translateY(calc((1 - var(--on, 1)) * 14px));
}
/* Il filo che unisce i numeri appartiene al passaggio da cui parte e si allunga
   con lui. Si vede solo quando i cinque stanno su una riga sola: altrimenti
   l'ultimo di ogni riga resterebbe con un tratto nel vuoto. */
.flow-step::after {
  content: "";
  position: absolute;
  left: 38px; right: calc(var(--flow-gap) * -1); top: 15px;
  height: 1px;
  background: var(--border-2);
  transform: scaleX(var(--on, 1));
  transform-origin: left center;
}
.flow-step:last-child::after { display: none; }
@media (max-width: 980px) { .flow-step::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .flow-step { opacity: 1; transform: none; }
  .flow-step::after { transform: none; }
}

.flow-step h3 { margin: .5em 0 .3em; }
.flow-step p { font-size: .96rem; margin: 0; }
.flow-n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* il numero arriva per ultimo, con un mezzo scatto */
  transform: scale(calc(.72 + var(--on, 1) * .28));
}
@media (prefers-reduced-motion: reduce) { .flow-n { transform: none; } }

/* =============================================================================
   14c. LE DUE COSE CHE IL PERCORSO NON DICE
   -----------------------------------------------------------------------------
   Che l'elenco degli indicatori è aperto, e che per scriverne uno non si è
   lasciati soli. Sono mostrate prima di essere raccontate: un pannello scuro,
   con la stessa grana dell'applicazione ricostruita nella scena d'apertura —
   così si legge come una schermata del prodotto, non come un'illustrazione.
   ============================================================================= */

.feat-pair {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 860px) { .feat-pair { grid-template-columns: 1fr 1fr; } }

.feat {
  background: var(--bg-soft);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}
.feat h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin: 0 0 .4em; }
.feat p  { font-size: .96rem; margin: 0; }

/* Il disegno viene prima del testo e si prende lo spazio: è lui a spiegare.
   Cresce fino a riempire il riquadro perché i due pannelli non sono alti
   uguale: senza, i due titoli finirebbero su due righe diverse e la coppia
   perderebbe la riga d'appoggio che la tiene insieme. */
.feat-art {
  flex: 1 1 auto;
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- il pannello scuro, comune ai due ------------------------------------- */
.mock {
  background: #0e0e13;
  border: 1px solid #23232b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .55);
}
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: #131319;
  border-bottom: 1px solid #23232b;
}
.mock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2e2e38; flex: 0 0 auto;
}
.mock-name {
  font-family: var(--mono); font-size: .74rem; color: #8b8d99;
  margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-name-lead { margin-left: 0; color: #eceef4; font-weight: 600; }
.mock-btn {
  margin-left: auto; flex: 0 0 auto;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: #a8cfff;
  border: 1px solid #3b6fc4; border-radius: 6px;
  padding: 3px 10px;
  background: #16233a;
}

/* --- 1. il contratto di un indicatore ------------------------------------- */
.mock-code {
  margin: 0;
  padding: 14px 14px 16px;
  font-family: var(--mono);
  font-size: clamp(.66rem, .82vw, .78rem);
  line-height: 1.75;
  color: #8b8d99;
  white-space: pre;
  overflow-x: auto;
}
.c-k { color: #eceef4; }         /* le voci del contratto */
.c-s { color: #7fd4a3; }         /* stringhe */
.c-n { color: #d7a45f; }         /* numeri */
.c-d { color: #c084fc; }         /* def */
.c-f { color: #8fb8e8; }         /* il nome della funzione */
.c-c { color: #4a4a56; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--mono); font-size: .72rem;
  color: var(--t2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
}
/* L'ultimo non è uno di quelli in dotazione: è il posto che ti aspetta. */
.chip-new {
  font-family: var(--sans); font-weight: 600;
  color: #fff; border-color: transparent;
  background: var(--grad);
}

/* --- 2. il prompt che l'applicazione compone ------------------------------ */
.mock-body { padding: 14px; display: grid; gap: 12px; }
.pblock {
  border-left: 2px solid #23232b;
  padding-left: 11px;
  display: grid; gap: 6px;
}
.ptag {
  font-size: .72rem; letter-spacing: .01em;
  color: #8b8d99;
}
.pline {
  display: block; height: 6px; border-radius: 3px;
  background: #22222a;
}
.w55 { width: 55%; } .w70 { width: 70%; } .w80 { width: 80%; }
.w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; }

/* La tua richiesta è l'unica riga che scrivi tu, e si vede. */
.pblock-you { border-left-color: #7b3fe4; }
.ptag-you   { color: #cbb4ff; }
.pline-you  { background: linear-gradient(90deg, #4d8dff, #b06ae8); }

.feat-note {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  color: var(--t3);
}

/* =============================================================================
   15. PAGINA ABBONAMENTO
   ============================================================================= */

/* La prima schermata: intestazione e piani insieme, dimensionati per starci
   dentro per intero. I valori sono legati all'altezza della finestra, non alla
   larghezza: è l'altezza a decidere se i riquadri entrano. */
.pr-top { padding: clamp(1.8rem, 3.4vh, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.pr-intro { padding: 0; margin-bottom: clamp(1.6rem, 3.4vh, 2.8rem); }
.pr-top h1 {
  font-size: clamp(2rem, 4.4vh + 1rem, 3.1rem);
  letter-spacing: -.03em;
  margin-bottom: .3em;
}
.pr-top .lead { font-size: clamp(1rem, .5vw + .85rem, 1.2rem); margin-bottom: .6em; }
.pr-req-note { margin: 0; }

.plans {
  display: grid; gap: 20px;
  max-width: 860px; margin: 0 auto;
}
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; align-items: start; } }

.plan {
  position: relative;
  background: var(--bg-soft);
  border: 0;
  border-radius: 20px;
  padding: clamp(24px, 3.2vh, 34px) 30px clamp(22px, 2.6vh, 28px);
}
.plan-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 20px 50px -34px rgba(123, 63, 228, .6);
}
.plan-badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--grad); color: #fff;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px;
}
.plan-name { font-size: 1.25rem; margin-bottom: .25em; }
/* L'altezza minima allinea le due descrizioni, di lunghezza diversa, così i
   due prezzi restano sulla stessa riga. */
.plan-desc { font-size: .93rem; margin-bottom: 1.2em; min-height: 2.6em; }

.plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 1.3rem; flex-wrap: wrap; }
.plan-cur    { font-size: 1.5rem; font-weight: 600; color: var(--t2); }
.plan-amount { font-size: clamp(2.4rem, 6vw, 3.1rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.plan-per    { font-size: .95rem; color: var(--t3); margin-left: 5px; }

.plan-price-req { margin-bottom: clamp(1rem, 2vh, 1.6rem); }
.plan-req {
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.plan-save {
  font-size: .9rem; color: var(--green);
  margin: -.6rem 0 1.2rem;
}
.plan-foot { margin: 1rem 0 0; text-align: center; }
.plan-foot-shared { display: none; }

/* Schermo stretto: i due riquadri si incolonnano e devono comunque entrare
   interi nella prima schermata. Si stringe tutto ciò che non è informazione —
   e la riga in fondo, identica nei due, si dice una volta sola. */
@media (max-width: 620px) {
  .pr-top h1 { font-size: 2rem; }
  .pr-top .lead { font-size: .97rem; }
  .pr-intro { margin-bottom: 1.3rem; }
  .plan { padding: 20px 22px 18px; }
  .plan-desc { margin-bottom: 1em; min-height: 0; }
  .plan-price-req { margin-bottom: 1rem; }
  .plans { gap: 14px; }
  .plan .plan-foot { display: none; }
  .plan-foot-shared { display: block; margin: 1.1rem 0 0; }
}

/* --- Domande frequenti ---------------------------------------------------- */
.faq { margin-top: 2rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 600; color: var(--text);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--t3);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--blue); }
.faq details p {
  margin: -4px 0 20px;
  font-size: .96rem;
  padding-right: 34px;
}

/* =============================================================================
   16. PAGINA DOWNLOAD
   ============================================================================= */

/* --- Riquadro di scelta (esito del rilevamento) -------------------------- */
.pick {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--r-l);
  padding: 24px 26px;
}
.pick-primary {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 44px -30px rgba(123, 63, 228, .55);
}
.pick-body { flex: 1 1 260px; min-width: 0; }
.pick-eyebrow {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3); margin: 0 0 .45em;
}
.pick-title { font-size: 1.3rem; margin: 0 0 .35em; }
.pick-file { margin: 0; font-size: .88rem; color: var(--t3); }
.pick-file code { color: var(--t2); word-break: break-all; }
.pick-btn { flex: 0 0 auto; }

.pick-pair { display: grid; gap: 16px; }
@media (min-width: 760px) { .pick-pair { grid-template-columns: 1fr 1fr; } }
.pick-pair .pick { flex-direction: column; align-items: flex-start; }
.pick-pair .pick-btn { width: 100%; }

.pick-alt  { margin: 16px 2px 0; font-size: .93rem; color: var(--t3); }
.pick-warn { margin: 14px 2px 0; font-size: .9rem; color: var(--t2); line-height: 1.6; }

/* --- Elenco completo dei file -------------------------------------------- */
.dl-list { display: grid; gap: 14px; margin-top: 2rem; }
.dl-item {
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--r-l);
  padding: 20px 22px;
}
.dl-item-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.dl-name {
  font-family: var(--mono); font-size: .98rem; font-weight: 600;
  margin: 0 0 .3em; word-break: break-all; letter-spacing: -.01em;
}
.dl-meta { margin: 0; font-size: .86rem; color: var(--t3); }

/* --- Riga dell'impronta SHA256 ------------------------------------------- */
.hash-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 9px 12px;
  overflow: hidden;
}
.hash-label {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; color: var(--t3); flex: 0 0 auto;
}
.hash {
  font-family: var(--mono); font-size: .74rem; color: var(--t2);
  overflow-x: auto; white-space: nowrap; flex: 1 1 auto;
  scrollbar-width: thin;
}
.hash-copy {
  flex: 0 0 auto;
  font: inherit; font-size: .76rem; font-weight: 600;
  background: var(--surface); color: var(--t2);
  border: 1px solid var(--border-2); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.hash-copy:hover { color: var(--text); border-color: var(--t3); }
.hash-copy.copied { color: var(--green); border-color: var(--green); }

/* --- Riproduzione dell'avviso SmartScreen --------------------------------
   Illustrazione dei due passaggi: non è una finestra di Windows, è un disegno
   che serve a riconoscerla quando comparirà davvero. */
.steps-win { display: grid; gap: 20px; margin: 2rem 0; }
@media (min-width: 760px) { .steps-win { grid-template-columns: 1fr 1fr; } }

.ss-card { position: relative; }
.ss-step {
  position: absolute; top: -10px; left: -10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
}
.ss-window {
  background: #1f1f22;
  border: 1px solid #3a3a40;
  border-radius: 8px;
  padding: 20px 22px 18px;
  font-family: "Segoe UI", var(--sans);
  box-shadow: 0 14px 40px -22px #000;
}
.ss-title { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: .5em; }
.ss-text  { font-size: .84rem; color: #c9c9d1; line-height: 1.55; margin-bottom: 1em; }
.ss-link  {
  font-size: .84rem; color: #6cb0ff; margin-bottom: 1.1em;
  text-decoration: underline; display: inline-block;
}
.ss-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.ss-btn {
  font-size: .8rem; padding: 6px 16px;
  background: #2d2d33; color: #e4e4ea;
  border: 1px solid #4a4a52; border-radius: 4px;
}
.ss-btn-go { background: #0f6cbd; border-color: #0f6cbd; color: #fff; font-weight: 600; }
.ss-caption { margin: 12px 2px 0; font-size: .9rem; color: var(--t2); }

/* --- Elenco numerato dei passaggi ---------------------------------------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 52px;
  padding-bottom: 26px;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-soft);
  border: 0;
  color: var(--text);
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
/* filo verticale che unisce i passaggi */
.steps li::after {
  content: "";
  position: absolute; left: 16px; top: 38px; bottom: 4px;
  width: 1px; background: var(--border);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: .3em; }
.steps p  { margin-bottom: 0; font-size: .96rem; }

/* =============================================================================
   17. RICHIESTA DI ACCESSO — il questionario
   ============================================================================= */

.rq-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.rq-head .lead { max-width: 34em; margin: 0 auto; }

/* ⚠️ L'intestazione è `sticky`: portando qui lo scorrimento con
   `scrollIntoView`, l'elemento va a filo di viewport e finisce SOTTO di lei —
   il titolo del risultato spariva dietro al menu. `scroll-margin-top` è la
   riga che dice al browser di fermarsi un'intestazione più in basso. */
.rq-form, .rq-esito, .rq-q { scroll-margin-top: calc(var(--header-h) + 24px); }

.rq-form { display: grid; gap: clamp(1.4rem, 3vw, 2rem); }

/* Ogni domanda è un gruppo, non un blocco di testo con dei cerchietti: il
   `fieldset` con la sua `legend` è ciò che permette a un lettore di schermo di
   annunciare «domanda 2 di 3» insieme all'opzione su cui si trova. */
.rq-q {
  border: 0;
  margin: 0;
  padding: 0;
}
.rq-q legend {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.15rem; font-weight: 620; letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .9rem;
  padding: 0;
}
.rq-n {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
}

.rq-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rq-opt:hover { border-color: var(--border-2); background: var(--bg-soft); }
.rq-opt input { margin: 2px 0 0; accent-color: var(--violet); flex: 0 0 auto; }
.rq-opt:has(input:checked) {
  border-color: var(--violet);
  background: rgba(123, 63, 228, .04);
}
/* Il contorno di messa a fuoco va sull'etichetta, non sul solo cerchietto:
   navigando da tastiera si deve vedere QUALE riga è selezionata. */
.rq-opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.rq-manca { color: var(--amber); font-weight: 600; margin: 0; }
.rq-nota { text-align: center; margin: .8rem 0 0; }

/* --- il risultato --------------------------------------------------------- */
.rq-esito { text-align: center; }
.rq-esito h2 { margin-bottom: 1.6rem; }

.rq-qr-wrap { margin: 2.4rem 0 1.6rem; }
.rq-qr-lead { max-width: 30em; margin: 0 auto 1rem; }
.rq-qr {
  width: clamp(180px, 46vw, 240px);
  margin: 0 auto;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.rq-qr svg { display: block; width: 100%; height: auto; }

/* Su telefono il codice QR non serve — WhatsApp è sulla stessa macchina, e
   inquadrare lo schermo che si sta usando non si può fare. */
@media (max-width: 620px) { .rq-qr-wrap { display: none; } }

.rq-copia { margin: 2rem 0 1.4rem; text-align: left; }
.rq-copia-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: .5rem;
}
.rq-copia .pre { white-space: pre-wrap; word-break: break-word; }

.rq-alt { margin: 0 0 1.6rem; }
.rq-indietro { margin: 0; }
.rq-indietro a { color: var(--t3); font-size: .9rem; }