/* ============================================================
   PAGINE LEGALI (privacy policy, termini di servizio)
   Non previste dal Figma: sono pagine di solo testo, costruite
   con i token esistenti. Prefisso "lg-" perche' il foglio serve
   a piu' di una pagina legale, non a una sola.
   ============================================================ */

/* ---------- Intestazione ---------- */
.lg-hero {
  position: relative;
  background: var(--c-bunker);
  padding: 96px var(--sp-s) 64px;
  overflow: hidden;
}
/* Stesso bagliore delle altre pagine su fondo scuro */
.lg-hero__glow {
  position: absolute;
  left: -140px;
  top: -180px;
  width: 560px;
  height: 560px;
  border-radius: 280px;
  filter: blur(40px);
  background: radial-gradient(circle at 50% 50%,
              rgba(53, 209, 223, 0.28) 0%, rgba(53, 209, 223, 0) 64%);
  pointer-events: none;
}
.lg-hero__inner {
  position: relative;
  max-width: var(--w-container);
  margin: 0 auto;
}
.lg-hero__title {
  margin: var(--sp-s) 0 0;
  font-family: var(--f-1);
  font-size: var(--fs-52);
  font-weight: var(--fw-800);
  line-height: var(--lh-64-68);
  letter-spacing: var(--ls--1-65);
  color: var(--c-white);
}

/* ---------- Corpo del testo ---------- */
.lg-body {
  padding: 64px var(--sp-s) 96px;
}
.lg-body__inner {
  /* Misura di lettura piu' stretta del contenitore del sito: un testo
     legale su 1240px sarebbe faticoso da seguire. */
  max-width: 820px;
  margin: 0 auto;
}
.lg-body p {
  margin: 0 0 var(--sp-s-plus);
  font-family: var(--f-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-400);
  line-height: var(--lh-27-2);
  color: var(--c-bunker);
}
/* I sottotitoli nell'originale sono paragrafi in grassetto: qui diventano
   veri <h2>, cosi' la pagina ha una struttura navigabile da tastiera e
   da lettore di schermo. Il testo non cambia. */
.lg-body h2 {
  margin: var(--sp-48) 0 var(--sp-s);
  font-family: var(--f-1);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  line-height: var(--lh-32);
  letter-spacing: var(--ls--0-28);
  color: var(--c-bunker);
}
.lg-body h2:first-child { margin-top: 0; }

.lg-body ul {
  margin: 0 0 var(--sp-s-plus);
  padding: 0;
  list-style: none;
}
.lg-body li {
  position: relative;
  padding-left: var(--sp-s-plus);
  margin-bottom: var(--sp-12);
  font-family: var(--f-2);
  font-size: var(--fs-16);
  line-height: var(--lh-27-2);
  color: var(--c-bunker);
}
.lg-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-scooter);
}

.lg-body a {
  color: var(--c-deep-sea-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lg-body a:hover { color: var(--c-java); }

/* ---------- Responsive (aggiunta, non prevista dal Figma) ---------- */
@media (max-width: 1024px) {
  .lg-hero { padding: 72px var(--sp-s) 48px; }
  .lg-hero__title { font-size: var(--fs-42); line-height: var(--lh-47-84); }
}
@media (max-width: 720px) {
  .lg-hero { padding: 56px var(--sp-s) 40px; }
  .lg-hero__title { font-size: var(--fs-30); line-height: var(--lh-38-4); letter-spacing: var(--ls--0-84); }
  .lg-body { padding: 40px var(--sp-s) 64px; }
  .lg-body h2 { font-size: var(--fs-19); margin-top: var(--sp-xl); }
}