/* Boosted v4 · bozza E — pagine legali (privacy.html, cookie.html, termini.html) + pagine/legali.js.
   Usa e.css (colori, cromo, piede), tasti/tasti.css (il metallo) e parti/menu.css (testata e menu).
   Testo lungo: una colonna di massimo ~70 caratteri, sopra un velo scuro (le stelle dietro al testo stancano).
   In cima l'indice: sul telefono una lista da toccare, sul computer resta accanto al testo e segue la lettura.
   Si muove solo l'ingresso della testata (opacity/transform). Movimento ridotto e html.fermo = stato finale. */

main { display: block; }
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) { scroll-behavior: smooth; } }

.lg-cornice { max-width: 1180px; margin: 0 auto; }

/* ── Testata della pagina ───────────────────────────────── */
.lg-eroe {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 44px) var(--g) 40px;
}
.lg-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 30%; top: 30%;
  width: 130vw; max-width: 1200px; aspect-ratio: 1.4; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.24), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.10), rgba(201, 169, 233, 0) 70%);
}
.lg-etichetta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.lg-etichetta::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cromo); background-size: 240% 100%; }
.lg-titolo { font-size: clamp(40px, 11vw, 92px); line-height: 1; font-weight: 760; letter-spacing: -0.032em; text-wrap: balance; max-width: 10em; }
.lg-sotto { margin-top: 20px; max-width: 30em; color: var(--sec); font-size: clamp(17.5px, 4.6vw, 21px); line-height: 1.5; text-wrap: pretty; }
.lg-data { margin-top: 16px; font-size: 14px; color: var(--sec); }
.lg-data time { color: var(--testo); font-weight: 600; }

/* the three legal pages, one tap apart (phone: a segmented pill; computer: a rail on the left) */
.lg-schede { margin-top: 28px; }
.lg-schede__titolo { display: none; }
.lg-schede__voci {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px;
  border-radius: 999px; background: rgba(15, 16, 17, 0.72); box-shadow: inset 0 0 0 1px var(--riga-2);
}
.lg-schede a {
  position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--sec); text-decoration: none; white-space: nowrap;
  transition: color 200ms ease-out, background-color 200ms ease-out;
}
.lg-schede a[aria-current='page'] { color: var(--testo); background: rgba(201, 169, 233, 0.14); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.32); }
.lg-schede a:active { color: var(--lilla); }
@media (hover: hover) { .lg-schede a:not([aria-current]):hover { color: var(--testo); } }
@media (max-width: 380px) { .lg-schede__voci { display: grid; } .lg-schede a { padding: 0 12px; } }

/* ── Corpo: indice + testo, sopra il velo ───────────────── */
.lg-corpo {
  position: relative; padding: 8px var(--g) 96px;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 0, rgba(8, 9, 10, 0.86) 140px, rgba(8, 9, 10, 0.9) 100%);
}
.lg-griglia { display: grid; gap: 40px; }

/* index */
.lg-indice { max-width: 34em; border-top: 1px solid var(--riga); }
.lg-indice__titolo { padding: 18px 0 8px; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sec); }
.lg-indice ol { list-style: none; margin: 0; padding: 0; }
.lg-indice li { border-bottom: 1px solid var(--riga); }
.lg-indice a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--testo); text-decoration: none; transition: color 200ms ease-out;
}
.lg-indice svg { width: 18px; height: 18px; fill: none; stroke: var(--lilla); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform 300ms var(--curva); }
.lg-indice a:active { color: var(--lilla); }
@media (hover: hover) {
  .lg-indice a:hover { color: var(--lilla-chiaro); }
  .lg-indice a:hover svg { transform: rotate(90deg) translateX(3px); }
}

/* the text column */
.lg-testo {
  max-width: 32em; font-size: 17px; line-height: 1.72;
  color: #CDD1D7; color: color-mix(in srgb, var(--testo) 76%, var(--sec));
  text-wrap: pretty; hyphens: manual; overflow-wrap: break-word;
}
.lg-testo h2 {
  margin: 56px 0 14px; padding-top: 28px; border-top: 1px solid var(--riga);
  font-size: clamp(22px, 5.6vw, 27px); line-height: 1.2; font-weight: 720; letter-spacing: -0.018em; color: var(--testo);
  text-wrap: balance; scroll-margin-top: calc(var(--testa) + 20px);
}
.lg-testo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-testo p { margin: 0 0 16px; }
.lg-testo strong { color: var(--testo); font-weight: 650; }
.lg-testo ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.lg-testo li { position: relative; padding-left: 26px; }
.lg-testo li::before { content: ''; position: absolute; left: 2px; top: 0.82em; width: 12px; height: 2px; border-radius: 2px; background: var(--lilla); }
.lg-testo a {
  color: var(--testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(201, 169, 233, 0.6); transition: color 200ms ease-out, text-decoration-color 200ms ease-out;
}
.lg-testo a:active { color: var(--lilla); }
@media (hover: hover) { .lg-testo a:hover { color: var(--lilla-chiaro); text-decoration-color: var(--lilla); } }
.lg-testo .ins { white-space: nowrap; }

/* signature with the legal data, and the way out */
.lg-firma { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--riga); font-size: 14.5px; line-height: 1.6; color: var(--sec); }
.lg-firma strong { color: var(--testo); font-weight: 650; }
.lg-altre { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 15px; }
.lg-altre a { display: inline-flex; align-items: center; min-height: 44px; color: var(--testo); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; }
.lg-altre a:active { color: var(--lilla); }
@media (hover: hover) { .lg-altre a:hover { color: var(--lilla); } }

/* the footer link of the page you are on */
.piede a[aria-current='page'] { color: var(--testo); }

/* tablet: the single column sits in the middle */
@media (min-width: 768px) and (max-width: 1023px) { .lg-cornice { max-width: 620px; } }

/* ── Computer: indice fermo a sinistra che segue la lettura ── */
@media (min-width: 1024px) {
  /* one centred frame: a rail on the left (legal pages, then the index), the text column on the right */
  .lg-cornice { max-width: 880px; }
  .lg-eroe { padding-top: calc(var(--testa) + 88px); padding-bottom: 64px; }
  .lg-eroe .lg-cornice { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 88px; align-items: end; }
  .lg-eroe__testo { grid-column: 2; grid-row: 1; }
  .lg-schede { grid-column: 1; grid-row: 1; margin: 0; padding-bottom: 6px; }
  .lg-schede__titolo, .lg-indice__titolo { display: block; padding: 0 0 12px; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sec); }
  .lg-schede__voci, .lg-indice ol { display: grid; grid-auto-flow: row; padding: 0; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--riga-2); }
  .lg-schede a, .lg-indice a {
    display: grid; grid-template-columns: minmax(0, 1fr); place-items: center start; min-height: 44px; padding: 6px 0 6px 18px; border-radius: 0;
    font-size: 14.5px; font-weight: 550; line-height: 1.3; color: var(--sec); white-space: normal;
  }
  .lg-schede a[aria-current='page'] { background: none; box-shadow: none; }
  .lg-schede a::before, .lg-indice a::before {
    content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: var(--cromo); background-size: 100% 240%; transform: scaleY(0); transition: transform 300ms var(--curva);
  }
  .lg-schede a[aria-current='page'], .lg-indice a[aria-current='true'] { color: var(--testo); }
  .lg-schede a[aria-current='page']::before, .lg-indice a[aria-current='true']::before { transform: none; }
  @media (hover: hover) { .lg-schede a:hover, .lg-indice a:hover { color: var(--testo); } }
  .lg-titolo { font-size: clamp(64px, 6.4vw, 88px); }
  .lg-corpo { padding-top: 24px; padding-bottom: 128px; }
  .lg-griglia { grid-template-columns: 240px minmax(0, 1fr); gap: 88px; align-items: start; }
  .lg-indice { position: sticky; top: calc(var(--testa) + 32px); border-top: 0; }
  .lg-indice li { border-bottom: 0; }
  .lg-indice svg { display: none; }
  .lg-testo { max-width: 31em; font-size: 17.5px; }
  .lg-testo h2 { margin-top: 64px; padding-top: 32px; }
}

/* ── Ingresso della testata, e tutto fermo quando serve ─── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .lg-eroe__luce { animation: lg-respira 9s ease-in-out infinite alternate; }
  .lg-eroe.fuori .lg-eroe__luce, .lg-eroe.fuori .cromo, .piede.fuori .cromo { animation-play-state: paused; }
}
@keyframes lg-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }