/* Flora Clue — floraclue.com
 *
 * Quattro pagine brevi invece di una lunga: ognuna sta in uno schermo.
 * I colori vengono dal logo: il verde notte del quadrato, il verde foglia del
 * germoglio, il bianco del mirino. Il mirino e' il segno ricorrente: inquadra
 * quello che conta.
 */

/* Il font sta sul nostro server: nessuna richiesta a terzi, quindi nessun
   indirizzo IP di chi visita finisce a Google. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope.woff2?v=0302586e08") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+0218-021B, U+02C6-02DD, U+1E9E, U+2000-206F,
    U+20A0-20CF, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2219;
}
/* Le lettere cirilliche stanno in un file a parte: il browser lo scarica solo
   quando una pagina ne ha da disegnare (il sito in russo). La voce «Русский»
   del menu delle lingue e' nascosta finche' il menu e' chiuso, quindi non basta
   a farlo scaricare sulle altre pagine. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-cirillico.woff2?v=413775b31c") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0400-052F;
}

:root {
  --notte: #0A1210;
  --foglia: #8BCB55;
  --foglia-2: #6DB23F;
  --foglia-chiara: #C6EB9E;
  --clorofilla: #1F5F3B;
  --clorofilla-2: #277447;
  --carta: #F5F7F3;
  --bianco: #FFFFFF;
  --inchiostro: #121A16;
  --grigio: #4D5850;
  --grigio-2: #5C685F;
  --linea: #E2E7E0;
  --tenue: #E6F1E4;
  --su-notte: #EEF3EF;
  --su-notte-2: rgba(230, 240, 232, .74);
  --su-notte-3: rgba(230, 240, 232, .56);

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largo: 1200px;
  --barra: 72px;
  --curva: cubic-bezier(.22, 1, .36, 1);
  --molla: cubic-bezier(.34, 1.56, .64, 1);
  --ombra: 0 1px 2px rgba(10, 30, 20, .05), 0 18px 40px -16px rgba(10, 30, 20, .18);
}

/* ------------------------------------------------------------ passaggio tra le pagine */
/* Dove il browser lo sa fare, cambiare pagina e' una dissolvenza: la barra
   resta ferma e il telefono scivola al suo nuovo posto. Altrove si cambia
   pagina e basta. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s var(--curva) both pagina-esce; }
::view-transition-new(root) { animation: .5s var(--curva) both pagina-entra; }
::view-transition-group(telefono) { animation-duration: .7s; animation-timing-function: var(--curva); }
@keyframes pagina-esce { to { opacity: 0; scale: .985; } }
@keyframes pagina-entra { from { opacity: 0; scale: 1.015; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 12px); }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.notte { background: var(--notte); color: var(--su-notte); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foglia); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--foglia); color: var(--notte); }
.contenitore { width: min(var(--largo), 100% - 48px); margin-inline: auto; }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: .7rem 1rem; border-radius: 12px; background: var(--foglia); color: var(--notte);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.salta:focus { top: 16px; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; }
/* Sugli schermi stretti una parola composta tedesca — «Nutzungsbedingungen» —
   è più larga dello schermo: li' i titoli si possono sillabare. L'attributo
   `lang` della pagina dice al browser con quali regole farlo. */
@media (max-width: 560px) { h1, h2, h3 { hyphens: auto; } }
h1 { font-size: clamp(2.6rem, min(5.6vw, 8.6vh), 5rem); letter-spacing: -.05em; line-height: .98; }
h2 { font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.3rem); }
h3 { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.25; }
/* Il titolo principale delle pagine interne: e' un h1, ma ha la misura di un h2. */
h1.h2 { font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.3rem); letter-spacing: -.035em; line-height: 1.05; }
p { margin: 0; text-wrap: pretty; }

.occhiello {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .14em;
  color: var(--clorofilla-2);
}
/* Il piccolo mirino davanti all'occhiello: il segno del logo, in miniatura. */
.occhiello::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 2px,
    linear-gradient(currentColor, currentColor) 0 0 / 2px 5px,
    linear-gradient(currentColor, currentColor) 100% 100% / 5px 2px,
    linear-gradient(currentColor, currentColor) 100% 100% / 2px 5px;
  background-repeat: no-repeat;
}
.notte .occhiello { color: var(--foglia); }
.intestazione h1, .intestazione h2 { margin-top: .9rem; }
.intestazione > p { margin-top: 1rem; font-size: 1.08rem; color: var(--grigio); max-width: 34rem; }
.notte .intestazione > p { color: var(--su-notte-2); }
.dato { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ vetro */
/* Il vetro delle schede e' dipinto, non sfocato: sul fondo scuro e uniforme una
   lastra semitrasparente con il filo di luce in alto fa lo stesso effetto, e il
   telefono non deve ricalcolare una sfocatura per ogni scheda mentre si scorre.
   La sfocatura vera resta solo su cio' che galleggia sopra la pagina che scorre:
   la barra in alto, le schede in basso e il menu delle lingue. */
.vetro {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 48px -20px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------ fondo scuro */
.fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Gli aloni erano cerchi sfocati con filter: blur(80px), il filtro piu' caro che
   ci sia: adesso sono sfumature radiali, che il browser dipinge una volta. */
.bagliore { position: absolute; border-radius: 50%; pointer-events: none; }
.bagliore.b1 { width: 900px; height: 900px; right: -260px; top: -220px; background: radial-gradient(closest-side, rgba(109, 178, 63, .26), rgba(109, 178, 63, 0)); }
.bagliore.b2 { width: 820px; height: 820px; left: -370px; bottom: -350px; background: radial-gradient(closest-side, rgba(31, 95, 59, .55), rgba(31, 95, 59, 0)); }
/* Una trama leggerissima: toglie al nero l'aspetto di un fondo piatto. */
.fondo::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 65% 40%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 65% 40%, #000, transparent);
}
/* Le foglie arrivano gia' sfocate nell'immagine: niente filtro da ricalcolare. */
.foglia-sfondo { position: absolute; width: 420px; opacity: .42; pointer-events: none; }
.foglia-sfondo.f1 { left: -150px; top: 110px; rotate: -32deg; }
.foglia-sfondo.f2 { right: 34%; bottom: -200px; width: 300px; rotate: 150deg; opacity: .25; }

/* ------------------------------------------------------------ bottoni */
.bottone {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: 52px; padding: 0 1.5rem; border-radius: 999px; border: 0;
  background: var(--foglia); color: var(--notte);
  font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(139, 203, 85, .6);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
/* Un riflesso che attraversa il bottone al passaggio del mouse. */
.bottone::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  translate: -120% 0; transition: translate .7s var(--curva);
}
.bottone:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(139, 203, 85, .7); }
.bottone:hover::after { translate: 120% 0; }
.bottone:active { transform: translateY(0) scale(.98); }

.collegamento { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; color: var(--foglia); }
.collegamento svg { transition: translate .3s var(--curva); }
.collegamento:hover svg { translate: 4px 0; }
.chiaro .collegamento { color: var(--clorofilla-2); }

.pillola {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .85rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; white-space: nowrap;
}
.punto { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--foglia); }
/* Il battito e' un anello che si allarga e sparisce: scala e trasparenza, che il
   browser anima senza ridipingere (un'ombra animata si ridipinge a ogni passo). */
.punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--foglia);
  animation: battito 2.4s var(--curva) infinite;
}
@keyframes battito { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

/* I due negozi. Non sono i marchi ufficiali di Google e Apple: quelli si possono
   usare solo come collegamento a un'app gia' pubblicata. */
.negozi { display: flex; flex-wrap: wrap; gap: .8rem; }
.negozio {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .8rem;
  min-width: 200px; padding: .65rem 1.2rem .65rem .9rem; border-radius: 16px;
  color: var(--su-notte);
}
.negozio::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%);
  translate: -120% 0;
}
/* Il riflesso passa due volte all'arrivo, poi resta fermo: un'animazione che non
   finisce mai tiene il telefono sveglio per niente. */
@media (prefers-reduced-motion: no-preference) {
  .js .negozio::after { animation: riflesso 2.6s var(--curva) 1.2s 2 both; }
  .js .negozio:nth-child(2)::after { animation-delay: 1.5s; }
}
@keyframes riflesso { 0% { translate: -120% 0; } 100% { translate: 120% 0; } }
.negozio svg { width: 26px; height: 26px; flex: none; color: var(--foglia); }
.negozio small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--foglia); line-height: 1.2; }
.negozio strong { display: block; font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2; }

/* ------------------------------------------------------------ telefono */
/* Un telefono vero: bordo in metallo, tasti laterali, isola con la fotocamera
   frontale e un riflesso sul vetro. Tutto in proporzione alla larghezza --l. */
.iphone {
  --l: 300px;
  position: relative; width: var(--l); flex: none;
  padding: calc(var(--l) * .034);
  border-radius: calc(var(--l) * .178);
  background: #050606;
  box-shadow:
    0 0 0 calc(var(--l) * .007) #3d4340,
    0 0 0 calc(var(--l) * .011) #151816,
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 calc(var(--l) * .1) calc(var(--l) * .22) calc(var(--l) * -.05) rgba(0, 0, 0, .55);
}
.iphone::before {
  content: ""; position: absolute; right: calc(var(--l) * -.021); top: 27%;
  width: calc(var(--l) * .012); height: 11%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #202422, #454b48);
}
.iphone::after {
  content: ""; position: absolute; left: calc(var(--l) * -.021); top: 17%;
  width: calc(var(--l) * .012); height: 4.5%; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #454b48, #202422);
  box-shadow: 0 calc(var(--l) * .15) 0 #353a37, 0 calc(var(--l) * .3) 0 #353a37;
}
.telefono-principale { view-transition-name: telefono; }
.schermo {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 393 / 852; border-radius: calc(var(--l) * .145);
  background: var(--carta);
}
.schermo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La Dynamic Island e la barra di stato sono dentro le schermate stesse: sono
   quelle dell'app su iPhone, fotografate dai test. Qui c'e' solo il bordo. */
/* Il riflesso sul vetro. */
.schermo::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 40%);
}
.schermo img.dissolvi { opacity: 0; scale: 1.04; transition: opacity .6s var(--curva), scale .8s var(--curva); }
.schermo img.dissolvi.attiva { opacity: 1; scale: 1; }

/* ------------------------------------------------------------ mirino */
.mirino { position: absolute; pointer-events: none; }
.mirino i { position: absolute; width: 16%; aspect-ratio: 1; border: 0 solid var(--angolo, #fff); opacity: .95; }
.mirino i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-top-left-radius: 26px; }
.mirino i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-top-right-radius: 26px; }
.mirino i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 26px; }
.mirino i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 26px; }
.mirino .scansione {
  position: absolute; left: 7%; right: 7%; top: 8%; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--foglia), transparent);
  box-shadow: 0 0 18px 2px rgba(139, 203, 85, .55);
}
/* Mette a fuoco: gli angoli si stringono sul soggetto. Si riavvia a ogni cambio. */
.fuoco { animation: fuoco .9s var(--molla) both; }
@keyframes fuoco { from { opacity: 0; scale: 1.15; } }

/* ------------------------------------------------------------ barra */
/* La barra NON ha `view-transition-name`: quella proprieta' fa della barra il
   limite di quello che i suoi figli possono sfocare, e la sfocatura della barra
   e del menu delle lingue non vedeva la pagina sotto. Il titolo bianco passava
   attraverso il vetro e le lingue non si leggevano. Senza, la barra si dissolve
   fra una pagina e l'altra insieme al resto: essendo identica, non si nota. */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--barra);
  color: var(--su-notte);
}
/* La sfocatura sta su uno strato suo, e il velo e' abbastanza pieno da tenere
   leggibile la barra anche dove la sfocatura non c'e'. */
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  background: rgba(10, 18, 16, .78); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra::before { background: rgba(10, 18, 16, .96); }
}
.chiaro .barra { color: var(--inchiostro); }
.chiaro .barra::before { background: rgba(245, 247, 243, .8); border-bottom-color: var(--linea); }
.barra .contenitore { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
.marchio { white-space: nowrap; display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; }
.marchio img { width: 36px; height: 36px; }
.menu { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.menu a {
  white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .5rem .9rem; border-radius: 999px; opacity: .75; transition: opacity .2s, background .3s;
}
.menu a:hover { opacity: 1; background: rgba(255, 255, 255, .06); }
.chiaro .menu a:hover { background: rgba(18, 26, 22, .05); }
.menu a[aria-current] { opacity: 1; background: rgba(139, 203, 85, .14); color: var(--foglia); }
.chiaro .menu a[aria-current] { background: var(--tenue); color: var(--clorofilla); }
.barra .pillola { margin-left: .8rem; background: rgba(139, 203, 85, .14); color: var(--foglia); }
.chiaro .barra .pillola { background: var(--notte); color: var(--foglia); }

/* Sul telefono il menu sta in basso, come le schede di un'app. */
.schede-app {
  display: none; position: fixed; z-index: 50; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  view-transition-name: schede-app;
  padding: 6px; border-radius: 24px; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.schede-app.vetro {
  background: rgba(12, 22, 18, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}
.schede-app a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 18px;
  text-decoration: none; font-size: .68rem; font-weight: 700; color: var(--su-notte-3);
  transition: background .3s, color .3s;
}
.schede-app svg { width: 22px; height: 22px; }
.schede-app a[aria-current] { background: rgba(139, 203, 85, .16); color: var(--foglia); }

/* ------------------------------------------------------------ impianto delle pagine */
/* Ogni pagina occupa uno schermo: niente scorrimento infinito. */
.pagina {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: var(--barra);
}
.pagina > .contenitore:not(.piede) { flex: 1; display: grid; align-items: center; padding-block: clamp(1rem, 3vh, 2.5rem); }
.piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; justify-content: space-between;
  padding: 1rem 0 1.3rem; font-size: .82rem; color: var(--su-notte-3);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.chiaro .piede { color: var(--grigio-2); border-top-color: var(--linea); }
.piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .4rem; }
.piede-link a {
  color: inherit; text-decoration: none; padding: .2rem .45rem; border-radius: 9px;
  transition: color .2s, background .25s;
}
.piede-link a:hover { color: var(--foglia); background: rgba(139, 203, 85, .12); }
.chiaro .piede-link a:hover { color: var(--clorofilla); background: var(--tenue); }
.piede-link a[aria-current="page"] { color: var(--foglia); font-weight: 700; }
.chiaro .piede-link a[aria-current="page"] { color: var(--clorofilla); }

/* ------------------------------------------------------------ pagine da leggere */
/* Privacy, termini, assistenza, note legali: testo, quindi colonna stretta,
   indice a lato e nessuna centratura verticale. */
.documento > .contenitore:not(.piede) {
  align-items: start; padding-block: clamp(1.5rem, 4vh, 2.8rem);
  /* `minmax(0, 1fr)` e non `1fr`: una colonna di griglia non scende sotto la
     parola piu' lunga che contiene, e in tedesco quella parola e' piu' larga di
     uno schermo da 320 punti. Senza questo, la pagina si allargava. */
  grid-template-columns: minmax(0, 1fr);
}
.documento .intestazione h1 { margin-top: .8rem; }
.aggiornato { margin: .7rem 0 0; font-size: .86rem; color: var(--grigio-2); }
.riquadro {
  border: 1px solid var(--linea); border-left: 3px solid var(--clorofilla);
  background: var(--bianco); border-radius: 16px; padding: 1rem 1.2rem;
}
.riquadro p { margin: 0; color: var(--grigio); line-height: 1.7; }
.riquadro p + p { margin-top: .7rem; }
.sommario { margin: 1.5rem 0 2.2rem; box-shadow: var(--ombra); }
.sommario p { font-size: 1.02rem; color: var(--inchiostro); }
.doc-corpo { min-width: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.indice { position: sticky; top: calc(var(--barra) + 1rem); font-size: .9rem; }
.indice details { border: 1px solid var(--linea); border-radius: 18px; background: var(--bianco); padding: .8rem .9rem; }
.indice summary { font-weight: 800; cursor: pointer; letter-spacing: -.01em; list-style: none; }
.indice summary::-webkit-details-marker { display: none; }
.indice summary::after { content: "›"; float: right; rotate: 90deg; transition: rotate .25s; }
.indice details[open] summary::after { rotate: 270deg; }
.voci-indice { display: flex; flex-direction: column; gap: .05rem; margin-top: .7rem; }
.voci-indice a {
  text-decoration: none; color: var(--grigio); padding: .34rem .5rem; border-radius: 10px;
  transition: background .25s, color .2s;
}
.voci-indice a:hover { background: var(--tenue); color: var(--clorofilla); }
.testo { max-width: 68ch; min-width: 0; }
/* Le lingue non sono tutte lunghe uguali: in tedesco una parola sola —
   «Standardvertragsklauseln» — è più larga di uno schermo da 320 punti. Qui le
   parole troppo lunghe vanno a capo invece di sfondare la pagina, e dove il
   browser sa sillabare lo fa (l'attributo `lang` della pagina glielo dice). */
.testo, .testo td, .testo th, .riquadro { overflow-wrap: break-word; hyphens: auto; }
.testo section + section { margin-top: 2.4rem; }
/* Le sezioni fuori schermo non vengono disegnate finche' non servono: su una
   pagina lunga come la privacy e' mezzo secondo di apertura in meno sui
   telefoni lenti. `contain-intrinsic-size` tiene la barra di scorrimento
   ferma, altrimenti salterebbe mentre si scorre. */
.testo section { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.testo h2 {
  margin: 0; font-size: clamp(1.22rem, 2.3vw, 1.55rem); letter-spacing: -.025em;
  scroll-margin-top: calc(var(--barra) + 1rem);
}
.testo h3 { margin: 1.5rem 0 0; font-size: 1.02rem; letter-spacing: -.01em; }
.testo p, .testo ul { margin: .8rem 0 0; color: var(--grigio); line-height: 1.75; }
.testo ul { padding-left: 1.15rem; }
.testo li + li { margin-top: .4rem; }
.testo a { color: var(--clorofilla); text-underline-offset: 3px; }
.testo strong { color: var(--inchiostro); }
.testo .riquadro { margin-top: 1.1rem; }
.tabella-scorre { overflow-x: auto; margin-top: 1rem; }
.testo table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.testo th, .testo td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: top; color: var(--grigio); }
.testo thead th { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--grigio-2); }
.testo table.dati th { width: 34%; white-space: nowrap; color: var(--inchiostro); }
/* Un dato che manca si deve vedere da lontano, non scoprire dopo aver pubblicato. */
.da-completare {
  background: #FFE9A8; color: #5A4300; border-radius: 6px; padding: 0 .35rem;
  font-weight: 700; white-space: nowrap;
}

/* ------------------------------------------------------------ home */
.home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.home h1 { margin: 1.3rem 0 1.1rem; }
.evidenza {
  background: linear-gradient(100deg, var(--foglia) 10%, var(--foglia-chiara) 55%, var(--foglia) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Muovere lo sfondo di un testo lo fa ridipingere a ogni fotogramma: sul
   telefono resta fermo, sul computer con il mouse luccica. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .evidenza { animation: luccica 6s ease-in-out infinite; }
}
@keyframes luccica { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--su-notte-2); max-width: 32rem; }
.home .negozi { margin-top: clamp(1.3rem, 3.5vh, 2.1rem); }
.home .collegamento { margin-top: 1.2rem; }
.garanzie { list-style: none; margin: clamp(.9rem, 2.6vh, 1.6rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .9rem; font-weight: 600; color: var(--su-notte-3); }
.garanzie li { display: inline-flex; align-items: center; gap: .45rem; }
.garanzie svg { color: var(--foglia); }

.scena {
  --lt: clamp(200px, calc((100svh - 310px) * .43), 300px);
  position: relative; height: calc(var(--lt) * 2.35); display: grid; place-items: center;
}
.scena .iphone { --l: var(--lt); z-index: 2; }
.scena .mirino { z-index: 3; width: calc(var(--lt) * 1.46); height: calc(var(--lt) * 2.5); left: calc(50% - var(--lt) * .73); top: calc(50% - var(--lt) * 1.25); }
/* Sopra lo schermo chiaro del telefono il vetro deve essere scuro, o il testo
   bianco sparisce nel bianco che c'e' dietro. */
.scheda-vetro { position: absolute; z-index: 4; border-radius: 20px; color: var(--su-notte); }
/* Sopra lo schermo chiaro, senza sfocatura, il vetro deve essere quasi pieno. */
.scheda-vetro.vetro { background: rgba(12, 22, 18, .9); border-color: rgba(255, 255, 255, .12); }
/* Le schede sono agganciate al telefono (al centro della scena, in multipli
   della sua larghezza --lt) e non ai bordi della colonna: prima, quando la
   colonna si stringeva, finivano sopra lo schermo del telefono e lo coprivano. */
.conf { right: calc(50% + var(--lt) * .2); bottom: 16%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; width: max-content; max-width: 290px; }
.conf svg { width: 56px; height: 56px; flex: none; }
.anello-binario { stroke: rgba(255, 255, 255, .12); }
.anello-arco { stroke: var(--foglia); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 9; }
.conf .numero { font-size: 19px; font-weight: 800; fill: var(--su-notte); }
.conf strong { display: block; font-size: .95rem; letter-spacing: -.01em; }
.conf small { display: block; font-size: .76rem; color: var(--su-notte-3); font-weight: 600; }
.notifica { left: calc(50% + var(--lt) * .14); top: 10%; width: 262px; display: flex; gap: 12px; padding: 13px 15px; }
.notifica img { width: 36px; height: 36px; flex: none; }
.testa { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.notifica strong { display: block; font-size: .9rem; margin-top: 2px; }
.notifica p { font-size: .8rem; line-height: 1.4; color: var(--su-notte-2); }
.causa { left: calc(50% + var(--lt) * .26); bottom: 5%; padding: 9px 15px 9px 11px; white-space: nowrap; display: flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 700; }
.causa i { width: 24px; height: 24px; border-radius: 50%; background: #E0694A; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; }
.causa span { color: var(--su-notte-3); font-weight: 600; }
/* Le schede galleggiano dopo essere entrate: le due animazioni toccano
   proprieta' diverse (opacita' e scala l'una, trasformazione l'altra), quindi
   stanno nella stessa lista senza pestarsi. */
@media (min-width: 781px) and (prefers-reduced-motion: no-preference) {
  .js .scheda-vetro.galleggia { animation: scheda-entra .8s var(--molla) var(--r, 0ms) both, galleggia 7s ease-in-out infinite; }
  .js .scheda-vetro.galleggia.lento { animation: scheda-entra .8s var(--molla) var(--r, 0ms) both, galleggia 9s ease-in-out -3s infinite; }
}
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Il nastro con i nomi delle piante, in fondo alla home. */
.nastro {
  overflow: hidden; padding: .8rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nastro .fila { display: flex; gap: .6rem; width: max-content; animation: scorri 70s linear infinite; }
.nastro:hover .fila, .nastro.ferma .fila { animation-play-state: paused; }
.nastro span {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .42rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--su-notte-2);
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07);
}
.nastro span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--foglia); opacity: .8; }
@keyframes scorri { to { translate: -50% 0; } }

/* ------------------------------------------------------------ voci che scorrono da sole */
/* Un elenco: la voce scelta si apre, una barra la consuma e poi tocca alla
   successiva. Chi tocca una voce ferma lo scorrimento. */
.voci { display: grid; gap: .5rem; margin-top: clamp(1.2rem, 3.5vh, 2rem); }
.voce {
  position: relative; overflow: hidden; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(42px, auto) auto; column-gap: 1rem; align-items: center;
  padding: .8rem 1.1rem; border-radius: 20px; border: 1px solid transparent; background: transparent;
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.voce:hover { background: rgba(18, 26, 22, .04); }
.notte .voce:hover { background: rgba(255, 255, 255, .04); }
.voce .segno {
  grid-row: span 2; align-self: start;
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bianco); color: var(--clorofilla); box-shadow: inset 0 0 0 1px var(--linea);
  font-weight: 800; transition: background .4s, color .4s, box-shadow .4s;
}
.notte .voce .segno { background: rgba(255, 255, 255, .06); color: var(--su-notte-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.voce .segno svg { width: 20px; height: 20px; }
.voce strong { align-self: center; font-size: 1.04rem; letter-spacing: -.015em; line-height: 1.3; }
.voce .spiega {
  grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s var(--curva), opacity .4s;
}
.voce .spiega > span { overflow: hidden; font-size: .93rem; color: var(--grigio); line-height: 1.5; }
.notte .voce .spiega > span { color: var(--su-notte-2); }
.voce.scelta { background: var(--bianco); box-shadow: var(--ombra); }
.notte .voce.scelta { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.voce.scelta .segno { background: var(--notte); color: var(--foglia); box-shadow: none; }
.notte .voce.scelta .segno { background: var(--foglia); color: var(--notte); }
.voce.scelta .spiega { grid-template-rows: 1fr; opacity: 1; margin-top: .2rem; }
.voce .progresso {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--clorofilla-2); transform-origin: left; scale: 0 1; opacity: 0;
}
.notte .voce .progresso { background: var(--foglia); }
.gira .voce.scelta .progresso { opacity: 1; animation: consuma var(--durata, 6s) linear forwards; }
.gira:hover .progresso, .gira:focus-within .progresso { animation-play-state: paused; }
@keyframes consuma { to { scale: 1 1; } }

/* ------------------------------------------------------------ home: le sezioni sotto */
/* La prima schermata resta una schermata; sotto, tre sezioni da scorrere. */
@media (min-width: 781px) {
  .pagina > .contenitore.home { min-height: calc(100svh - var(--barra) - 64px); }
}
/* Niente content-visibility qui: il menu porta a queste sezioni con un
   ancoraggio (/#funzioni), e con le sezioni non ancora disegnate il browser
   stimava le altezze e si fermava nel punto sbagliato. */
.sezione { padding-block: clamp(4rem, 12vh, 7.5rem); }
.sezione .intestazione { max-width: 40rem; }
.sezione h2 { margin-top: .9rem; }

/* I tre passi: il testo scorre, il telefono resta e cambia schermata. */
.racconto-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); }
.passi-racconto { list-style: none; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 0; display: grid; gap: clamp(1rem, 4vh, 2rem); }
.passo-racconto {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding: 1.4rem 1.4rem 1.5rem; border-radius: 26px; min-height: 34vh;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
  transition: background .5s var(--curva), border-color .5s var(--curva);
}
.passo-racconto.corrente { background: rgba(255, 255, 255, .07); border-color: rgba(139, 203, 85, .35); }
.numero-passo {
  width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center;
  background: var(--foglia); color: var(--notte); font-weight: 800; font-size: 1.15rem;
}
.testo-passo h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; }
.testo-passo p { margin-top: .5rem; color: var(--su-notte-2); font-size: 1.05rem; }
.telefono-passo { display: none; grid-column: 1 / -1; justify-self: center; margin-top: 1rem; }
.telefono-passo .iphone { --l: 210px; }
/* Sul telefono si vede la parte alta della schermata, quella che conta, e il
   resto sfuma: tre telefoni interi uno sotto l'altro erano tre schermate. */
.telefono-passo {
  max-height: 290px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.racconto-telefono { position: sticky; top: calc(var(--barra) + 4vh); align-self: start; justify-self: center; }
.racconto-telefono .iphone { --l: clamp(220px, calc((100svh - var(--barra) - 80px) * .44), 300px); }
/* Sui portatili bassi il telefono intero non sta nello schermo: li' resta dov'e'
   invece di seguire lo scorrimento con la parte bassa tagliata. */
@media (min-width: 781px) and (max-height: 700px) {
  .racconto-telefono { position: relative; top: 0; }
}

/* Le funzioni in una griglia di carte. */
.griglia-funzioni { list-style: none; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.carta-funzione {
  padding: 1.5rem; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .09);
}
.carta-funzione .segno {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(139, 203, 85, .14); color: var(--foglia);
}
.carta-funzione .segno svg { width: 24px; height: 24px; }
.carta-funzione h3 { margin-top: 1rem; font-size: 1.2rem; }
.carta-funzione p { margin-top: .45rem; color: var(--su-notte-2); font-size: 1rem; line-height: 1.55; }
.sezione .collegamento { margin-top: 1.6rem; }

/* La chiusura: il logo, la frase, i negozi. */
.riquadro-chiusura {
  position: relative; overflow: hidden; text-align: center; max-width: 46rem; margin-inline: auto;
  padding: clamp(2.2rem, 6vw, 3.6rem) clamp(1.4rem, 5vw, 3.2rem); border-radius: 36px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(139, 203, 85, .2), rgba(139, 203, 85, 0)),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .1);
}
.riquadro-chiusura img { width: 72px; height: 72px; margin: 0 auto; }
.riquadro-chiusura h2 { margin-top: 1.2rem; }
.riquadro-chiusura p { margin: .8rem auto 0; max-width: 30rem; color: var(--su-notte-2); font-size: 1.08rem; }
.riquadro-chiusura .negozi { justify-content: center; margin-top: 1.6rem; }
.riquadro-chiusura .garanzie { justify-content: center; }

/* Le comparse mentre si scorre: poca strada e poco tempo. La classe `osserva`
   la mette `sito.js` solo quando l'osservatore e' partito davvero: se lo
   script manca, niente resta nascosto. */
.osserva .rivela { opacity: 0; translate: 0 24px; transition: opacity .8s var(--curva), translate .9s var(--curva); transition-delay: var(--r, 0ms); }
.osserva .rivela.vista { opacity: 1; translate: none; }

/* ------------------------------------------------------------ come funziona */
.come { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.palco {
  --lt: clamp(210px, calc((100svh - 240px) * .43), 290px);
  position: relative; height: calc(var(--lt) * 2.3); border-radius: 40px; display: grid; place-items: center;
  background: radial-gradient(60% 55% at 50% 45%, rgba(139, 203, 85, .3), transparent 70%), var(--tenue);
}
.palco .iphone { --l: var(--lt); }
.palco .mirino { --angolo: var(--clorofilla-2); width: calc(var(--lt) * 1.4); height: calc(var(--lt) * 2.42); left: calc(50% - var(--lt) * .7); top: calc(50% - var(--lt) * 1.21); }
.principi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1rem, 3vh, 1.6rem); }
.principi span {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
  background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); font-size: .86rem; font-weight: 700;
}
.principi svg { width: 16px; height: 16px; color: var(--clorofilla-2); }

/* ------------------------------------------------------------ funzioni */
.funzioni { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
.funzioni .voci { gap: .3rem; }
.funzioni .voce { padding: .6rem 1rem; }
.vetrina {
  --lt: clamp(200px, calc((100svh - 250px) * .42), 280px);
  position: relative; overflow: hidden; isolation: isolate;
  height: calc(var(--lt) * 2.25); border-radius: 36px;
}
.vetrina .bagliore.b1 { right: -120px; top: -140px; width: 420px; height: 420px; background: rgba(109, 178, 63, .28); z-index: -1; }
.vetrina .foglia-sfondo { z-index: -1; width: 340px; opacity: .35; left: -110px; top: auto; bottom: -110px; rotate: 18deg; }
.pannello-funzione { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; }
.pannello-funzione:not([hidden]) { animation: pannello .7s var(--curva) both; }
@keyframes pannello { from { opacity: 0; translate: 0 18px; scale: .98; } }
.vetrina .iphone { --l: var(--lt); }
/* Il telefono della vetrina e' tagliato in basso: si vede la parte che conta. */
.taglio {
  align-self: start; margin-top: 1.6rem;
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
  mask-image: linear-gradient(#000 80%, transparent);
}

.scheda-chiara {
  width: min(100%, 380px); padding: 1.5rem; border-radius: 26px; color: var(--inchiostro);
  background: rgba(255, 255, 255, .95); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.tappe { list-style: none; margin: 0; padding: 0; position: relative; }
.tappe::before, .tappe::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--linea); }
.tappe::after { background: var(--clorofilla-2); scale: 1 .5; transform-origin: top; }
.pannello-funzione:not([hidden]) .tappe::after { animation: riempi 1.4s var(--curva) .3s both; }
@keyframes riempi { from { scale: 1 0; } to { scale: 1 .5; } }
.tappe li { position: relative; z-index: 1; display: flex; gap: 1rem; align-items: center; padding: .45rem 0; }
.giorno {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bianco); box-shadow: inset 0 0 0 2px var(--linea);
  font-size: .9rem; font-weight: 800; color: var(--clorofilla); font-variant-numeric: tabular-nums;
}
.tappe li.fatta .giorno { background: var(--clorofilla-2); color: var(--bianco); box-shadow: none; }
.tappe li.oggi .giorno { background: var(--notte); color: var(--foglia); box-shadow: 0 0 0 5px rgba(139, 203, 85, .25); }
.tappe strong { display: block; font-size: .98rem; }
.tappe span { font-size: .86rem; color: var(--grigio); }
.esiti { display: flex; gap: .45rem; margin-top: 1rem; }
.esiti span { flex: 1; text-align: center; padding: .5rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: .86rem; font-weight: 700; }
.esiti span:first-child { background: var(--clorofilla-2); color: var(--bianco); box-shadow: none; }

.misuratore { width: min(100%, 400px); padding: 1.8rem; border-radius: 28px; }
.misuratore .intesta { display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--su-notte-3); }
.misuratore .intesta svg { width: 18px; height: 18px; color: var(--foglia); }
.lettura { display: flex; align-items: baseline; gap: .6rem; margin-top: 1.1rem; }
.lettura .dato { font-size: clamp(3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.lettura .unita { font-weight: 700; color: var(--foglia); }
.verdetto { margin-top: .5rem; font-weight: 700; color: var(--foglia); min-height: 1.6em; }
.scala { position: relative; margin-top: 1.2rem; }
.fasce { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; height: 10px; }
.fasce i { border-radius: 999px; background: rgba(255, 255, 255, .1); transition: background .6s; }
.fasce i.accesa { background: var(--foglia); }
.cursore {
  position: absolute; top: -7px; left: 0; width: 24px; height: 24px; translate: -50% 0; border-radius: 50%;
  background: var(--su-notte); border: 6px solid var(--foglia); box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition: left 1.6s var(--curva);
}
.soglie { display: flex; justify-content: space-between; margin-top: .8rem; font-size: .74rem; font-weight: 600; color: var(--su-notte-3); }

.pila { position: relative; width: min(100%, 380px); height: 150px; }
.avviso {
  position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 12px; padding: 14px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .95); color: var(--inchiostro);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
  transition: translate .8s var(--curva), scale .8s var(--curva), opacity .6s var(--curva);
}
.avviso[data-pos="0"] { translate: 0 0; scale: 1; opacity: 1; z-index: 3; }
.avviso[data-pos="1"] { translate: 0 16px; scale: .94; opacity: .8; z-index: 2; }
.avviso[data-pos="2"] { translate: 0 30px; scale: .88; opacity: 0; z-index: 1; }
.avviso[data-pos="sopra"] { translate: 0 -40px; scale: 1.02; opacity: 0; z-index: 4; transition: none; }
.avviso img { width: 36px; height: 36px; flex: none; }
.avviso .testa { color: var(--grigio-2); opacity: 1; }
.avviso strong { display: block; font-size: .9rem; }
.avviso p { font-size: .82rem; line-height: 1.4; color: var(--grigio); }

.interruttore {
  position: absolute; z-index: 7; top: 1.2rem; left: 50%; translate: -50% 0;
  display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
}
.interruttore.vetro { background: rgba(12, 22, 18, .9); }
.interruttore::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--foglia); transition: translate .5s var(--molla);
}
.notte-demo .interruttore::before { translate: 100% 0; }
.interruttore button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: .45rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--su-notte-2);
  transition: color .4s;
}
.interruttore button[aria-pressed="true"] { color: var(--notte); }
.schermo img.scura { clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--curva); }
.notte-demo .schermo img.scura { clip-path: inset(0 0 0 0); }
.pannello-tema .taglio { margin-top: 4.4rem; }

/* ------------------------------------------------------------ domande */
.domande { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); }
.arrivo {
  position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(1.4rem, 4vh, 2.4rem);
  padding: 1.5rem; border-radius: 30px; background: var(--notte); color: var(--su-notte);
}
.arrivo .bagliore.b1 { width: 320px; height: 320px; right: -100px; top: -160px; z-index: -1; }
.arrivo .riga { display: flex; align-items: center; gap: 1rem; }
.arrivo .riga img { width: 56px; height: 56px; }
.arrivo strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.arrivo .riga span { font-size: .9rem; color: var(--su-notte-2); }
.arrivo .negozi { margin-top: 1.2rem; }
.arrivo .negozio { flex: 1; min-width: 150px; }
.elenco-domande { display: grid; gap: .5rem; }
.elenco-domande details { border-radius: 20px; background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .4s; }
.elenco-domande details[open] { box-shadow: inset 0 0 0 1px var(--linea), var(--ombra); }
.elenco-domande summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 1.25rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; border-radius: 20px;
}
.elenco-domande summary::-webkit-details-marker { display: none; }
.elenco-domande summary i { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--tenue); transition: background .4s, rotate .5s var(--curva); }
.elenco-domande summary i::before, .elenco-domande summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: var(--clorofilla); translate: -50% -50%;
}
.elenco-domande summary i::after { rotate: 90deg; transition: scale .4s var(--curva); }
.elenco-domande details[open] summary i { background: var(--notte); rotate: 180deg; }
.elenco-domande details[open] summary i::before { background: var(--foglia); }
.elenco-domande details[open] summary i::after { scale: 0 1; }
.risposta { padding: 0 1.25rem 1.1rem; color: var(--grigio); font-size: .96rem; }
.elenco-domande details[open] .risposta { animation: apri .5s var(--curva); }
@keyframes apri { from { opacity: 0; translate: 0 -8px; } }

/* ------------------------------------------------------------ home: domande */
.domande-griglia { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.domande-griglia .intestazione .collegamento { margin-top: 1.4rem; }
.racconto-testo > .collegamento { margin-top: 1.6rem; }

/* ------------------------------------------------------------ social */
.social { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
.canali { display: grid; gap: .8rem; }
.canale {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 1.2rem 1.3rem; border-radius: 26px; color: var(--su-notte); text-decoration: none;
}
a.canale { transition: background .3s, border-color .3s, transform .3s var(--curva); }
a.canale:hover { background: rgba(255, 255, 255, .1); border-color: rgba(139, 203, 85, .4); }
@media (hover: hover) { a.canale:hover { transform: translateY(-2px); } }
.canale .segno {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: var(--foglia); color: var(--notte);
}
.canale .segno svg { width: 28px; height: 28px; }
.canale-testo { display: grid; gap: .1rem; min-width: 0; }
.canale-testo strong { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; }
.canale-testo span { font-weight: 700; color: var(--foglia); overflow-wrap: anywhere; }
.canale-testo small { font-size: .92rem; color: var(--su-notte-2); line-height: 1.45; }
.canale-azione { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--foglia); white-space: nowrap; }
.canale-presto .segno { background: rgba(255, 255, 255, .08); color: var(--su-notte-2); }
.canale-presto .pillola { background: rgba(139, 203, 85, .14); color: var(--foglia); }
/* Sul telefono l'azione va sotto il testo, la scheda resta tutta toccabile. */
@media (max-width: 560px) {
  .canale { grid-template-columns: auto minmax(0, 1fr); }
  .canale-azione, .canale-presto .pillola { grid-column: 2; justify-self: start; }
  .canale .segno { width: 48px; height: 48px; border-radius: 16px; }
}

/* ------------------------------------------------------------ 404 */
.pannello {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; max-width: 40rem; margin-inline: auto;
  border-radius: 40px; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.logo-inquadrato { position: relative; width: 140px; height: 140px; margin: 0 auto 2rem; display: grid; place-items: center; }
.logo-inquadrato img { width: 100px; height: 100px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.logo-inquadrato .mirino { inset: 0; animation: respira 3.2s var(--curva) infinite; }
.logo-inquadrato .mirino i { width: 24%; }
.logo-inquadrato .mirino i:nth-child(1) { border-width: 3px 0 0 3px; border-top-left-radius: 14px; }
.logo-inquadrato .mirino i:nth-child(2) { border-width: 3px 3px 0 0; border-top-right-radius: 14px; }
.logo-inquadrato .mirino i:nth-child(3) { border-width: 0 0 3px 3px; border-bottom-left-radius: 14px; }
.logo-inquadrato .mirino i:nth-child(4) { border-width: 0 3px 3px 0; border-bottom-right-radius: 14px; }
@keyframes respira { 0%, 100% { scale: 1; opacity: .9; } 45% { scale: 1.12; opacity: .5; } 60% { scale: .98; opacity: 1; } }
.pannello p { margin: 1rem auto 0; max-width: 30rem; color: var(--su-notte-2); }
.pannello .bottone { margin-top: 2rem; }

/* ------------------------------------------------------------ ingressi */
/* Animazioni CSS, non transizioni accese da uno script: partono da sole e
   finiscono sempre con tutto visibile. Prima il contenuto restava a opacita'
   zero finche' `sito.js` non cambiava una classe: se lo script arrivava vecchio
   dalla cache, o non arrivava, la Home restava vuota. La classe `js` la mette
   `avvio.js` nel <head>: senza JavaScript non c'e' nessuna animazione, e la
   pagina e' subito composta. */
@media (prefers-reduced-motion: no-preference) {
  .js .entra { animation: entra 1s var(--curva) var(--r, 0ms) both; }
  .js .scena .iphone { animation: telefono-entra 1.2s var(--curva) .15s both; }
  .js .scena .mirino { animation: mirino-entra 1s var(--molla) .55s both; }
  .js .scena .mirino .scansione { animation: scansiona 1.6s var(--curva) 1.4s 1 both; }
  .js .scheda-vetro { animation: scheda-entra .8s var(--molla) var(--r, 0ms) both; }
  .js .anello-arco { animation: anello-entra 1.8s var(--curva) 1.6s both; }
}
@keyframes entra { from { opacity: 0; translate: 0 22px; } }
@keyframes telefono-entra { from { opacity: 0; scale: .92; translate: 0 40px; } }
@keyframes mirino-entra { from { opacity: 0; scale: 1.25; } }
@keyframes scheda-entra { from { opacity: 0; scale: .85; } }
@keyframes anello-entra { from { stroke-dashoffset: 100; } }
@keyframes scansiona { 0% { top: 8%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 92%; opacity: 0; } }

/* ------------------------------------------------------------ tutto sul fondo scuro */
/* Il sito ha un fondo solo — le foglie e i due aloni — quindi ogni componente
   nato per la carta chiara ha qui la sua versione su vetro scuro. Le regole
   `.chiaro` restano valide: servono se un giorno tornasse una pagina chiara. */
.notte .principi span { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--su-notte); }
.notte .principi svg { color: var(--foglia); }

.notte .elenco-domande details { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.notte .elenco-domande details[open] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); }
.notte .elenco-domande summary { color: var(--su-notte); }
.notte .elenco-domande summary i { background: rgba(255, 255, 255, .1); }
.notte .elenco-domande summary i::before, .notte .elenco-domande summary i::after { background: var(--foglia); }
.notte .elenco-domande details[open] summary i { background: var(--foglia); }
.notte .elenco-domande details[open] summary i::before { background: var(--notte); }
.notte .risposta { color: var(--su-notte-2); }

.notte .aggiornato { color: var(--su-notte-3); }
.notte .riquadro { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); border-left-color: var(--foglia); }
.notte .riquadro p { color: var(--su-notte-2); }
.notte .sommario { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7); }
.notte .sommario p { color: var(--su-notte); }
.notte .indice details { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.notte .voci-indice a { color: var(--su-notte-2); }
.notte .voci-indice a:hover { background: rgba(139, 203, 85, .14); color: var(--foglia); }
.notte .testo p, .notte .testo ul, .notte .testo th, .notte .testo td { color: var(--su-notte-2); }
.notte .testo strong, .notte .testo table.dati th { color: var(--su-notte); }
.notte .testo thead th { color: var(--su-notte-3); }
.notte .testo th, .notte .testo td { border-bottom-color: rgba(255, 255, 255, .1); }
.notte .testo a { color: var(--foglia); }

/* ------------------------------------------------------------ lingua */
/* Il sito parla piu' lingue: chi arriva viene portato alla sua, e da qui la
   cambia a mano quando vuole. La scelta a mano vince sempre su quella
   automatica. */
.lingue { position: relative; margin-left: .4rem; }
.bottone-lingua {
  display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .75rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: inherit;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.chiaro .bottone-lingua { border-color: var(--linea); background: rgba(18, 26, 22, .04); }
.bottone-lingua:hover { background: rgba(255, 255, 255, .12); }
.bottone-lingua svg { width: 18px; height: 18px; opacity: .85; }
.menu-lingue {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 200px; padding: .4rem; border-radius: 18px; display: grid; gap: 2px;
  /* Mai piu' alto dello spazio sotto la barra: con sette lingue, sul telefono
     in orizzontale (390 punti) il menu usciva dal fondo dello schermo. */
  max-height: calc(100vh - var(--barra) - 20px); max-height: calc(100svh - var(--barra) - 20px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Schermi bassi: le lingue su due colonne, cosi' stanno senza scorrere. */
@media (max-height: 520px) {
  .menu-lingue { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
/* Il menu e' pieno, non di vetro: una lista da leggere sopra un titolo bianco
   non puo' dipendere da una sfocatura che non tutti i browser fanno. */
.menu-lingue.vetro {
  background: linear-gradient(180deg, #17261F, #0F1A15);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 48px -12px rgba(0, 0, 0, .8);
}
.menu-lingue a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 46px; padding: .55rem .85rem; border-radius: 12px; text-decoration: none;
  font-size: 1rem; font-weight: 600; color: var(--su-notte);
  transition: background .25s, color .2s;
}
.menu-lingue a::after {
  content: attr(hreflang); font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--su-notte-3);
}
.menu-lingue a:hover, .menu-lingue a:focus-visible { background: rgba(255, 255, 255, .09); color: var(--su-notte); }
.menu-lingue a[aria-current="true"] { color: var(--foglia); background: rgba(139, 203, 85, .14); }
.menu-lingue a[aria-current="true"]::after { color: var(--foglia); }
@media (prefers-reduced-motion: no-preference) {
  .menu-lingue:not([hidden]) { animation: menu-lingue .28s var(--curva) both; }
}
@keyframes menu-lingue { from { opacity: 0; translate: 0 -6px; scale: .98; } }

/* ------------------------------------------------------------ misure */
/* Le fasce, dalla piu' larga alla piu' stretta:
   - schermi grandi (da 1600 punti): tutto un po' piu' grande, il sito non
     resta un francobollo in mezzo al monitor;
   - computer (da 1280): due colonne, schede complete intorno al telefono;
   - finestre medie e tablet in orizzontale (781-1279): due colonne, schede
     compatte;
   - tablet in verticale (781-1100, piu' alto che largo): una colonna, telefono
     grande, schede complete;
   - telefono in orizzontale e finestre molto basse: una colonna, barra in alto;
   - telefono (fino a 780): una colonna, menu in basso come in un'app. */
/* Dove c'e' spazio a destra, la notifica esce di piu' dal telefono e ne copre
   meno lo schermo (a 1280 punti il margine e' di 40: li' resta piu' vicina).
   La scheda della fiducia no: a sinistra c'e' il testo, e spostata di piu' lo
   toccava. */
@media (min-width: 1440px) {
  .notifica { left: calc(50% + var(--lt) * .3); }
}
@media (min-width: 1600px) and (min-height: 820px) {
  :root { --largo: 1320px; }
  html { font-size: 106.25%; }
  body { font-size: 18px; }
  .scena { --lt: clamp(200px, calc((100svh - 330px) * .43), 340px); }
  .palco { --lt: clamp(210px, calc((100svh - 260px) * .43), 320px); }
  .vetrina { --lt: clamp(200px, calc((100svh - 270px) * .42), 310px); }
}
/* Sotto i 1280 punti la notifica non ha posto accanto al telefono, e della
   scheda della fiducia resta l'anello, che si legge da solo. */
@media (max-width: 1279px) {
  .notifica { display: none; }
  .conf { padding: 10px; }
  .conf > div { display: none; }
}
/* Finestre strette ma non telefoni: mezzo schermo, un portatile piccolo, il
   pannello di un'anteprima. Restano due colonne e si stringe quello che c'e'
   dentro. */
/* Sotto i 1140 punti la barra non ha posto per cinque voci, la lingua e
   l'etichetta «Presto in arrivo» (in francese «Bientôt disponible» usciva dallo
   schermo a 1001): l'etichetta c'e' gia' in cima alla pagina. */
@media (max-width: 1139px) {
  .barra .pillola { display: none; }
}
/* Fino a 1039 punti la scheda della causa non ha posto accanto al telefono:
   in italiano «Eccesso d'acqua 83%» usciva dallo schermo a 1001. */
@media (max-width: 1039px) {
  .causa { display: none; }
}
@media (min-width: 781px) and (max-width: 1000px) {
  .griglia-funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra .contenitore { gap: .8rem; }
  .menu a { padding: .45rem .6rem; font-size: .88rem; }
  .home, .come, .funzioni, .domande, .social, .domande-griglia { gap: 1.6rem; }
  .scena, .palco, .vetrina { --lt: clamp(180px, calc((100svh - 330px) * .4), 230px); }
  .doc-corpo { grid-template-columns: 190px minmax(0, 1fr); }
  .negozio { padding-right: .9rem; }
}
/* Portatili con lo schermo basso: il nastro si toglie, cosi' la home sta
   ancora in uno schermo. */
@media (min-width: 781px) and (max-height: 720px) {
  .nastro { display: none; }
}
/* Sui portatili bassi l'elenco delle funzioni si stringe per stare nello schermo. */
@media (min-width: 781px) and (max-height: 800px) {
  .voci { margin-top: 1rem; }
  .funzioni .voci { gap: .15rem; }
  .funzioni .voce { padding: .35rem 1rem; grid-template-rows: minmax(36px, auto) auto; }
  .funzioni .voce .segno { width: 36px; height: 36px; border-radius: 12px; }
  .funzioni .voce .segno svg { width: 18px; height: 18px; }
  .funzioni .voce strong { font-size: .98rem; }
  .funzioni .voce .spiega > span { font-size: .86rem; }
  .piede { padding: .5rem 0 .7rem; font-size: .78rem; }
  .pannello { padding: clamp(1.4rem, 3vh, 2rem); }
  .logo-inquadrato img { width: 78px; height: 78px; }
}
/* Tablet in verticale: lo spazio e' in altezza, non in larghezza. Due colonne
   strette lasciavano un telefono piccolo fra due vuoti; con una colonna sola il
   telefono e' grande e le schede tornano complete. */
@media (min-width: 781px) and (max-width: 1100px) and (orientation: portrait) {
  .home, .come, .funzioni, .domande, .social, .domande-griglia { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pagina > .contenitore.home { min-height: 0; }
  .pagina > .contenitore:not(.piede):not(.doc) { padding-block: 2.5rem 3.5rem; }
  .home > div:first-child, .come > div:first-child, .funzioni > div:first-child, .domande > div:first-child { max-width: 40rem; }
  .scena { --lt: 290px; }
  .palco, .vetrina { --lt: 280px; width: min(100%, 640px); justify-self: center; }
  .notifica { display: flex; left: calc(50% + var(--lt) * .32); }
  .conf { padding: 12px 18px 12px 12px; }
  .conf > div { display: block; }
  .causa { display: flex; }
}
/* Telefono in orizzontale e finestre molto basse: una colonna, ma con la barra
   in alto, perche' il menu in basso ruberebbe mezzo schermo. */
@media (min-width: 781px) and (max-height: 520px) {
  .home, .come, .funzioni, .domande, .social, .domande-griglia { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pagina > .contenitore.home { min-height: 0; }
  .scena, .palco, .vetrina { --lt: 220px; }
  .palco, .vetrina { width: min(100%, 560px); justify-self: center; }
  .racconto-griglia { grid-template-columns: 1fr; }
  .racconto-telefono { display: none; }
  .telefono-passo { display: block; }
  .passo-racconto { min-height: 0; }
  .indice { position: static; }
}
@media (max-width: 780px) {
  :root { --barra: 64px; }
  /* Sul telefono niente passaggio animato fra le pagine: il browser dovrebbe
     fotografare le due pagine per farlo, e cambiare pagina sembrava lento. */
  @view-transition { navigation: none; }
  .barra .pillola { display: none; }
  .barra::before { -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); }
  .racconto-griglia { grid-template-columns: 1fr; }
  .racconto-telefono { display: none; }
  .telefono-passo { display: block; }
  .passo-racconto { min-height: 0; }
  .griglia-funzioni { grid-template-columns: 1fr; gap: .7rem; }
  .carta-funzione { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.2rem; }
  .carta-funzione .segno { grid-row: span 2; }
  .carta-funzione h3 { margin-top: 0; align-self: center; }
  .carta-funzione p { grid-column: 2; margin-top: .25rem; }
  .sezione { padding-block: 3.2rem; }
  /* La sigla della lingua resta anche sul telefono: un globo da solo non dice
     in che lingua si sta leggendo. */
  .bottone-lingua { padding: 0 .7rem; height: 42px; }
  .lingue { margin-left: auto; }
  .menu, .barra .pillola.largo { display: none; }
  .barra .contenitore { justify-content: space-between; }
  .schede-app { display: grid; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .home, .come, .funzioni, .domande, .social, .domande-griglia { grid-template-columns: 1fr; }
  .scena, .palco, .vetrina { --lt: 250px; }
  .notifica, .causa { display: none; }
  .piede { justify-content: center; text-align: center; }
  .doc-corpo { grid-template-columns: 1fr; gap: 1.4rem; }
  .indice { position: static; }
  .sommario { margin: 1.2rem 0 1.6rem; }
}
@media (min-width: 781px) { .barra .pillola.stretto { display: none; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .contenitore { width: calc(100% - 32px); }
  .scena, .palco, .vetrina { --lt: 226px; }
  .negozio { flex: 1; min-width: 0; padding-right: .8rem; }
  .negozio strong { font-size: 1rem; }
  .negozio small { font-size: .6rem; letter-spacing: .06em; white-space: nowrap; }
  .negozio { gap: .6rem; padding-left: .75rem; }
  .vetrina, .palco { border-radius: 28px; }
}
/* I telefoni piu' stretti (320-359 punti): i due negozi uno sotto l'altro,
   altrimenti «PRESTO IN ARRIVO» non ci sta. */
@media (max-width: 359px) {
  .negozio { flex-basis: 100%; }
  .scena, .palco, .vetrina { --lt: 210px; }
}
/* Le tabelle dei testi legali: sui telefoni stretti celle e carattere si
   stringono, cosi' stanno nello schermo senza doverle scorrere di lato. */
@media (max-width: 420px) {
  .testo table { font-size: .84rem; }
  .testo th, .testo td { padding: .5rem .4rem; }
  .testo table.dati th { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rivela { opacity: 1 !important; translate: none !important; }
  html { scroll-behavior: auto; }
}
/* «?statico»: la pagina gia' composta, senza movimento. Serve a fotografarla. */
html.statico { scroll-behavior: auto; }
.statico *, .statico *::before, .statico *::after { animation: none !important; transition: none !important; }
.statico .rivela { opacity: 1 !important; translate: none !important; }