/* legali.css: le note legali (legals.html, PIANO-PAGINE §4.9). Pagina di lettura su fondo crema, niente 3D: un motion tipografico suo, non quello
   delle altre pagine. L'indice resta fermo a sinistra e ogni voce si riempie leggendo la sua sezione; il numero grande della sezione gira come un
   tabellone quando la sezione arriva; l'evidenziatore passa sulle frasi che contano (legali.js). Si carica DOPO shell.css. */
body { background: var(--paper); }
.lg { padding-top: var(--bar-h); }
.lg-in, .lg-body { width: min(100% - 2 * var(--pad), 72rem); margin-inline: auto; }
.lg-hero { padding: clamp(3rem, 9vh, 6rem) 0 clamp(2rem, 6vh, 4rem); border-bottom: 1px solid rgb(26 30 36 / .12); }
.lg-kick { font: 650 var(--t-sm)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.lg-hero h1 { margin-top: var(--s-3); font-size: var(--t-date); line-height: .98; font-weight: 780; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.lg-hero p { max-width: var(--measure); margin-top: var(--s-3); color: var(--fg-mute); }
.lg-hero .lg-lead { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.5; color: var(--fg); }
.lg-ver { font-size: var(--t-sm); }

/* ---------- l'indice e il documento ---------- */
.lg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); padding-bottom: 5rem; }
.lg-toc { position: sticky; top: var(--bar-h); z-index: 2; margin-inline: calc(-1 * var(--pad)); padding: .6rem var(--pad); background: rgb(245 243 238 / .94); backdrop-filter: blur(6px); border-bottom: 1px solid rgb(26 30 36 / .1); }
.lg-toc ol { list-style: none; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.lg-toc a { position: relative; display: flex; align-items: baseline; gap: .45rem; padding: .45rem .7rem .55rem; border-radius: .6rem; color: var(--fg-mute); text-decoration: none; font-weight: 650; white-space: nowrap; transition: color .15s, background .15s; }
.lg-toc a:hover { color: var(--fg); background: rgb(26 30 36 / .05); }
.lg-toc a[aria-current] { color: var(--fg); }
.lg-n { font: 500 1rem/1 var(--pixel); color: var(--fg-mute); }
/* il numero della voce attiva e' testo da 16 px: il blu della marca su crema fa 4,37:1, sotto il 4,5:1, quindi qui un blu piu' scuro (5,7:1 sul crema,
   5,2:1 sul fondo del passaggio del mouse). La barra di lettura, i pallini delle liste e il numero grande della sezione (testo grande: basta 3:1) restano blu marca */
.lg-toc a[aria-current] .lg-n { color: #1557d0; }
/* la barra di lettura della sezione */
.lg-bar { position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 3px; border-radius: 3px; background: rgb(26 30 36 / .1); overflow: hidden; }
.lg-bar::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--blue); border-radius: inherit; }
@media (min-width: 60rem) {
  .lg-body { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; padding-top: clamp(2rem, 6vh, 4rem); }
  .lg-toc { top: calc(var(--bar-h) + 2rem); margin: 0; padding: 0; background: none; backdrop-filter: none; border: 0; }
  .lg-toc ol { flex-direction: column; gap: .25rem; overflow: visible; }
  .lg-toc a { padding: .7rem .8rem .9rem; font-size: var(--t-base); }
  .lg-bar { bottom: .35rem; }
}

.lg-doc { max-width: 46rem; }
.lg-sec { padding-top: clamp(2.5rem, 7vh, 4.5rem); scroll-margin-top: calc(var(--bar-h) + 4rem); }
.lg-sec + .lg-sec { margin-top: clamp(1.5rem, 4vh, 3rem); border-top: 1px solid rgb(26 30 36 / .12); }
/* il numero grande della sezione, nelle cifre a pixel */
.lg-num { font: 500 clamp(3.5rem, 2.5rem + 4vw, 6rem)/.9 var(--pixel); color: var(--blue); letter-spacing: .02em; }
.lg-sec h2 { margin-top: var(--s-2); font-size: var(--t-h2); line-height: 1.08; font-weight: 760; letter-spacing: -.02em; }
.lg-sec h3 { margin-top: var(--s-5); font-size: var(--t-step); line-height: 1.25; font-weight: 720; letter-spacing: -.01em; }
/* text-wrap: pretty come nel testo corrente delle altre pagine (PIANO §8.7), anche nelle schede (.lg-card dd): senza, l'ultima riga restava a volte con una parola sola */
.lg-sec p, .lg-list { margin-top: var(--s-2); max-width: var(--measure); line-height: 1.65; text-wrap: pretty; }
.lg-sec a { color: var(--fg); font-weight: 650; text-underline-offset: .22em; text-decoration-color: var(--blue); }
.lg-sec code { font: 600 .9em/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; padding: .1em .35em; border-radius: .3em; background: rgb(26 30 36 / .07); }
.lg-facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: var(--s-4); }
.lg-facts li { padding: .7rem .85rem; border-radius: .8rem; background: #fbfaf6; border: 1px solid rgb(26 30 36 / .1); font-weight: 700; line-height: 1.3; }
.lg-facts span { display: block; margin-bottom: .15rem; font-size: .8125rem; font-weight: 600; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 48rem) { .lg-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* tre riquadri (la privacy: la versione sta solo nella testa) riempiono la riga invece di lasciare un buco: tre colonne sul desktop, e sul telefono il
   terzo prende tutta la riga invece di restare a meta', da solo */
@media (max-width: 47.99rem) { .lg-facts > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 48rem) { .lg-facts:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lg-dl { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-3); border-top: 1px solid rgb(26 30 36 / .12); }
.lg-dl div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-bottom: 1px solid rgb(26 30 36 / .12); }
.lg-dl dt { color: var(--fg-mute); }
.lg-dl dd { font-weight: 650; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .lg-dl div { grid-template-columns: 1fr; gap: .1rem; } }
.lg-list { padding-left: 1.2rem; }
.lg-list li + li { margin-top: .45rem; }
.lg-list li::marker { color: var(--blue); }
.lg-quote { padding: .9rem 1.1rem; border-left: 4px solid var(--blue); background: #fbfaf6; border-radius: 0 .8rem .8rem 0; }
/* i sub-processor e i cookie: una scheda per voce, le voci una sotto l'altra (prima erano tabelle di sei colonne: in 46rem le righe diventavano
   altissime e l'ultima colonna finiva tagliata contro il bordo, da scorrere di lato senza accorgersene) */
.lg-cards { list-style: none; display: grid; gap: .75rem; margin-top: var(--s-3); }
.lg-card { padding: 1rem 1.15rem 1.1rem; border-radius: .9rem; background: #fbfaf6; border: 1px solid rgb(26 30 36 / .12); }
.lg-card h4 { font-size: var(--t-base); font-weight: 750; line-height: 1.3; padding-bottom: .6rem; border-bottom: 1px solid rgb(26 30 36 / .1); }
.lg-card h4 code { font-size: .95em; }
.lg-card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem 1.5rem; margin-top: .75rem; }
.lg-card dt { font-size: .8125rem; font-weight: 600; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .05em; }
.lg-card dd { margin-top: .15rem; font-size: .9688rem; line-height: 1.45; text-wrap: pretty; }
@media (min-width: 40rem) { .lg-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* l'evidenziatore: passa sulla frase quando arriva (senza script e con il movimento ridotto la frase e' gia' evidenziata) */
.lg-mark { color: inherit; background: linear-gradient(transparent 58%, rgb(0 255 229 / .45) 0) no-repeat 0 0 / 100% 100%; padding: 0 .1em; border-radius: .15em; }
.js .lg-mark { background-size: 0% 100%; transition: background-size 1.1s cubic-bezier(.65, 0, .35, 1); }
.js .lg-mark.on { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .js .lg-mark { background-size: 100% 100%; transition: none; } }