/*
 * Hybrx — la vetrina pubblica.
 *
 * Solo l'impaginazione della pagina larga: i colori, i caratteri, il marchio e lo sfondo disegnato
 * arrivano da app.css, che questa pagina carica per primo. Qui non c'e' nemmeno un colore scritto a
 * mano - se domani cambia l'accento del prodotto, cambia anche la vetrina. Le due eccezioni sono il
 * telefono, che e' un oggetto e non una superficie dell'app, e il fondo delle catture: tutte e due
 * hanno i loro token qui sotto, e il perche'.
 *
 * Ogni classe comincia per "lp-". L'applicazione e' un guscio stretto da telefono e questa e' una
 * pagina larga da desktop: le due impaginazioni non hanno niente in comune, e un prefisso e' cio'
 * che garantisce che nessuna regola scritta qui possa arrivare su una schermata dell'app.
 */

/* ---------- l'impianto ---------- */

/*
  Le superfici che l'applicazione non ha, e che questa pagina si ricava.

  La fascia che sprofonda sotto il fondo della pagina e' una mescola del fondo vero, cosi' resta
  giusta anche il giorno in cui il fondo cambia.

  La scocca del telefono (tre toni: la luce in alto, il corpo, l'ombra in basso) e' grigio scuro come
  un telefono vero, con un filo dell'inchiostro dentro al nero: un oggetto non cambia colore con la
  tavolozza, ma non per questo ha bisogno di un codice esadecimale.

  Il fondo delle catture invece e' scritto, ed e' l'unico: le schermate dentro al telefono sono
  fotografie dell'app, e il fondo attorno a loro deve restare quello delle foto anche il giorno in
  cui il fondo dell'app cambia. Un token che si muove attorno a una foto che sta ferma disegna una
  cornice attorno a ogni schermata.

  --lp-arrivo e' la strada che fanno le carte entrando da destra: la leggono le comparse del foglio
  qui sotto e lo script, che le muove quando c'e'. Un numero solo, in un posto solo.
*/
.lp {
  --lp-fondo: color-mix(in srgb, black 40%, var(--bg));
  --lp-scocca: color-mix(in srgb, var(--ink) 9%, black);
  --lp-scocca-luce: color-mix(in srgb, var(--ink) 28%, black);
  --lp-scocca-ombra: color-mix(in srgb, var(--ink) 3%, black);
  --lp-schermo: rgb(3 16 34);
  --lp-schermo-barra: rgb(6 17 36);
  --lp-arrivo: 110px;
}
.lp-wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Il salto delle ancore deve tenere conto della barra fissa, altrimenti il titolo della sezione
   finisce sotto di essa. */
section[id] { scroll-margin-top: 88px; }

/*
  La pagina non scorre di lato, mai.

  I blocchi arrivano da oltre il bordo destro, e un elemento fuori dal bordo destro allarga il
  documento: misurato prima, 474 pixel di larghezza su una finestra da 412, cioe' la pagina si
  poteva trascinare di lato e tutto sembrava spostato a sinistra con una striscia vuota a destra.
  "E' anche decentrata, non deve esserci quello spazio in piu' a destra."

  Il taglio sta su <main> e non su <body>: sul body l'overflow si propaga alla finestra, e un asse
  ritagliato con l'altro visibile la trasformerebbe in un contenitore che scorre - lo stesso guaio
  dell'eroe qui sotto, ma su tutta la pagina. E clip invece di hidden per la stessa ragione.
*/
.lp main { overflow-x: clip; }

/*
  Ogni sezione su uno schermo suo, con il suo contenuto al centro e aria sopra e sotto.

  Luca, 08/11, guardando la landing nel codice: «ora e' troppo un susseguirsi di testo. Ogni sezione
  differente e' attaccata alle altre [...] l'ideale e' che ogni sezione che racconta delle informazioni
  sia su una schermata a parte». Quelle brevi (le analisi, l'invito finale) non riempiono uno schermo
  intero - «le piu' piccole non devono per forza» - ma due terzi, e restano staccate dalle vicine.
  Una sezione piu' lunga di uno schermo e' lunga quanto il suo contenuto, con la stessa aria.
*/
.lp-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(80px, 10vw, 128px) 0;
}
.lp-section > .lp-wrap { width: 100%; }
.lp-section--breve { min-height: 64vh; min-height: 64svh; }
/* Due fondi oltre a quello del corpo: uno appena sollevato, uno piu' profondo del nero della
   pagina. E' il ritmo del riferimento - chiaro, grigio, scuro - riletto su un tema scuro. */
.lp-section--soft { background: var(--surface-2); }
.lp-section--dark {
  background: var(--lp-fondo);
  border-block: 1px solid var(--line-soft);
}

.lp-head { max-width: 760px; margin-bottom: 48px; }
.lp-head--center { margin-inline: auto; text-align: center; }

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* Il trattino davanti all'occhiello: e' il segno che apre ogni sezione del prodotto. */
.lp-eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.lp h1,
.lp h2 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.lp h2 { font-size: clamp(28px, 4.2vw, 44px); }
.lp h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.lp p { color: var(--mut); }

.lp-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 17px;
  color: var(--mut);
}
.lp-head--center .lp-lead { margin-inline: auto; }

/* ---------- i bottoni ---------- */
/*
  In grassetto e con un alone neon (Luca, 08/11: «Cta grassettate con alone neon»): sono le due eccezioni della vetrina
  alle regole dell'app - il grassetto solo ai titoli (31/10) e niente aloni (28/10) - e le due prove le nominano
  (NothingIsBoldButTitlesTest, NoGlowTest). Il peso e' 500, il piu' pieno che Jost ha. L'alone e' dei bottoni pieni e di
  quelli con il bordo nell'accento; «Scopri come funziona», il bordo grigio, resta senza: e' l'invito secondario, e con
  la stessa luce gareggerebbe con «Crea un account».

  Angoli smussati e non piu' pillole (Luca, 08/11: «tutti i bottoni cta e titoli nello schermo [...] abbiano angoli smussati
  con stesso raggio delle card dell'app e non più pienamente tondi»): il raggio delle carte, --r. I bottoni piccoli della
  barra e le pastiglie dei titoli nel telefono, alti poco piu' di 30 punti, prendono --r-sm: con 18 tornerebbero tondi, e
  13 e' il raggio a cui si vedono le carte dentro lo schermo del telefono.
*/
/*
  Non riusano .btn dell'applicazione di proposito: quello e' largo quanto la sua colonna, perche'
  in un guscio da 520px i bottoni si impilano. Qui stanno in fila, quindi la larghezza e' quella
  del testo. Tutto il resto - la pillola, il carattere condensato, il maiuscoletto spaziato - e' lo
  stesso, cosi' i due bottoni sono riconoscibilmente gli stessi bottoni.
*/
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--cond);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.lp-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 44px color-mix(in srgb, var(--accent) 30%, transparent);
}
.lp-btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}
.lp-btn--sm { min-height: 38px; padding: 8px 16px; border-radius: var(--r-sm); font-size: 14px; }
.lp-btn--lg { padding: 16px 32px; font-size: 16.5px; }
/* Mai sottolineati: «a:hover» di app.css (un elemento piu' una pseudo-classe) batte la sola classe, e sul telefono il
   passaggio resta attaccato dopo il tocco - «Scopri come funziona» restava sottolineato (Luca, 08/11, dalla cattura). */
.lp-btn:hover { text-decoration: none; }
.lp-btn--primary:hover { transform: translateY(-2px); }
.lp-btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-text); }
/* Il bordo nell'accento, senza alone: il bagliore e' solo dei bottoni pieni (Luca, 09/11). */
.lp-btn--outline {
  border: 1.5px solid var(--accent);
  color: var(--accent-text);
}
.lp-btn--outline:hover { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
  .lp-btn:hover { transform: none; }
}

/* ---------- la barra in alto ---------- */

/* Piena, senza il vetro sfocato: sotto la barra passa il telefono che si raddrizza, e una sfocatura
   da ricalcolare a ogni passo dello scorrimento faceva scattare la pagina sull'iPhone (video del 07/11). */
.lp-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding: 16px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Il marchio nella barra e nel piede: quello dell'app (fragments/brand :: mark, la parola ritagliata al suo inchiostro). Alto
   come la parola era nel file intero della landing dell'08/11 (22 punti con il margine del file, 17 di inchiostro). */
.lp-logo .logo-mark { height: 17px; }
.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.lp-nav__links { display: flex; align-items: center; gap: 24px; }
.lp-nav__menu { display: flex; align-items: center; gap: 24px; }
.lp-nav__links a {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--mut);
  text-decoration: none;
  white-space: nowrap;
}
.lp-nav__links a:hover { color: var(--ink); }
.lp-nav__cta { display: flex; align-items: center; gap: 8px; }
/* Le due porte dentro al pannello esistono solo su telefono: nella barra larga ci sono gia'. */
.lp-nav__doors { display: none; }

/*
  Il menu su telefono, con la casella nascosta all'inizio del corpo.

  La casella e' fuori campo invece che hidden: un input nascosto esce dall'ordine di tabulazione e
  il menu diventa irraggiungibile da tastiera. Stesso motivo, stessa soluzione del drawer dell'app.
*/
/* La casella che comanda il menu senza JavaScript sta fuori schermo e non nascosta: hidden la
   toglierebbe dall'ordine di tabulazione, e il menu deve restare raggiungibile da tastiera. */
.lp-menu-toggle { position: absolute; left: -9999px; }
.lp-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 16px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.lp-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.lp-burger span + span { margin-top: 4px; }

@media (max-width: 900px) {
  .lp-burger { display: block; }
  /* I link scendono sotto la barra come un pannello, e il collegamento e' il combinatore di
     fratelli: la casella sta prima di tutto, quindi puo' raggiungere qualunque cosa la segua. */
  .lp-nav__links {
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-panel);
    display: none;
  }
  .lp-menu-toggle:checked ~ .lp-nav .lp-nav__links { display: flex; }
  .lp-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .lp-nav__links a {
    display: flex;
    align-items: center;
    min-height: 46px;
    border-top: 1px solid var(--line-soft);
    font-size: 16px;
  }
  /*
    Nella barra restano il marchio e l'hamburger. I due bottoni scendono nel pannello, larghi quanto
    lui: su un telefono e' dove uno li cerca dopo aver aperto il menu.
  */
  .lp-nav__cta .lp-btn { display: none; }
  .lp-nav__doors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
}

/* ---------- l'apertura ---------- */

.lp-hero {
  position: relative;
  /*
    clip e non hidden, ed e' un difetto vero.

    "overflow: hidden" fa dell'eroe un contenitore che scorre - non scorre davvero, ma per il
    browser lo e' - e "animation-timeline: view()" si lega al PIU' VICINO contenitore che scorre.
    Le parole della striscia qui sotto si legavano quindi a questa scatola, che sta ferma: la loro
    comparsa restava congelata a un valore qualunque per sempre. Misurato: 0,22 / 0,05 / 0 di
    opacita' a scorrimento 0, 400, 800, 1200 e 2000 - gli stessi tre numeri, cioe' non si muoveva
    niente. "Non si vede nemmeno se scrollo verso il basso": non era un colore troppo scuro, era questo.

    "overflow: clip" ritaglia esattamente allo stesso modo e non e' un contenitore che scorre, quindi
    dentro l'eroe la finestra torna a essere la finestra. Taglia anche il telefono di sbieco, che
    con la prospettiva sporge oltre la sua colonna.
  */
  overflow: clip;
  padding-bottom: 56px;
}

/*
  La conferma dell'uscita, sopra il testo dell'apertura.

  Verde come le conferme dell'applicazione e non nell'accento: e' un esito, non un invito, e sul
  colore del marchio si confonderebbe con i bottoni che ha sotto.
*/
/* p.lp-signout e non .lp-signout: ".lp p" qui sopra e' una classe piu' un elemento e vincerebbe
   sulla sola classe, ridipingendo la riga del grigio del testo comune. Misurato in pagina - era
   grigia. */
p.lp-signout {
  margin-bottom: 24px;
  padding: 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  font-size: 15px;
  font-weight: 400;
  color: var(--ok);
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px 16px 4px 4px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}
.lp-badge b {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Il marchio dell'hero: un'immagine, quindi si da' l'altezza e la larghezza segue da se'. */
.lp-hero__brand { margin: 0; }
/* Le misure sono quelle dell'08/11 sul file intero, ridotte al solo inchiostro (151 su 191): il marchio resta grande uguale. */
.lp-hero__brand .logo-mark { height: clamp(36px, 6.5vw, 62px); }
/* La riga sotto: le stesse maiuscole spaziate dell'artwork, ma testo, quindi traducibile. Attaccata al marchio, come la sua
   firma (Luca, 09/11: «Troppa distanza qua»; erano 24 punti sul telefono e 16 sul computer). I 16 di adesso sono gli 8 di
   allora piu' il margine che il file del logo aveva sotto la parola, e che il marchio dell'app non ha. */
.lp-hero__tagline {
  margin-top: 16px;
  font-family: var(--cond);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mut);
}
/* Il titolo vero della pagina, sotto il marchio: cosa fa l'app. La misura e' quella dei titoli di
   sezione (.lp h2), cosi' l'apertura non grida piu' forte del resto. */
.lp-hero__title { margin-top: 16px; color: var(--ink); }
.lp-hero__sub { margin-top: 16px; font-size: 18px; line-height: 1.4; color: var(--mut); }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.lp-hero__note { margin-top: 16px; font-size: 13.5px; color: var(--mut2); }

/* La striscia sotto l'apertura: i sette sport e le due cose che vengono con loro, nove parole. */
.lp-pillars {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.lp-pillar {
  padding: 4px;
  border-right: 1px solid var(--line-soft);
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--mut);
}
.lp-pillar:last-child { border-right: 0; }

/* ---------- il telefono dell'apertura ----------

   A sinistra il testo, a destra il telefono di sbieco con la home. Lo script lo raddrizza quando e'
   tutto in vista e lascia passare dentro le dodici schermate; senza lo script (o con il movimento
   ridotto) la pagina e' questa e basta: il telefono di sbieco, fermo, sulla home. Tutto quello che
   segue con html.lp-js davanti esiste solo quando lo script c'e'. */
.lp-film__pin {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
  padding-top: 128px;
  padding-bottom: 32px;
}
.lp-film__stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* L'invito a scorrere: grigio come il testo, con la parte che conta nella corsa dei due colori del
   marchio e il trattino degli occhielli nella stessa corsa. */
.lp-film__hint {
  display: none;
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lp-film__hint::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
/* «Scorri il telefono» si dice solo dove il telefono scorre: senza lo script, o con il movimento ridotto, lo schermo sta
   sulla home e l'invito direbbe il falso (revisione del 09/11), come l'avviso sopra al telefono. */
html.lp-js .lp-film__hint { display: block; }
/* Il fermo toglie lo scorrimento alla pagina per mezzo secondo (landing.js): con le barre di scorrimento sempre visibili,
   sul computer, la barra spariva e la pagina saltava di lato due volte. Il posto della barra resta. */
html.lp-js { scrollbar-gutter: stable; }
.lp-film__hint span {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 861px) {
  .lp-film__pin { grid-template-areas: "copy stage" "hint stage"; align-content: center; row-gap: 0; }
  .lp-film__copy { grid-area: copy; align-self: end; }
  .lp-film__hint { grid-area: hint; align-self: start; margin-top: 40px; max-width: 26ch; }
  .lp-film__stage { grid-area: stage; }
}
.lp-film__tilt { perspective: 1800px; }

/* Il telefono. --sw e' la larghezza dello schermo, e tutto il resto ne discende: l'altezza con le
   proporzioni dell'iPhone, la fascia di stato, la barra dell'app in basso. */
.lp-device,
.lp-iphone {
  padding: 12px;
  background: linear-gradient(150deg, var(--lp-scocca-luce) 0%, var(--lp-scocca) 42%, var(--lp-scocca-ombra) 100%);
}
.lp-device {
  --sw: 280px;
  --stat: calc(var(--sw) * .1205);
  --barh: calc(var(--sw) * .19);
  border-radius: 56px;
  /* Un'ombra ferma: ricalcolata a ogni passo dello scorrimento faceva scattare la pagina sull'iPhone (video del 07/11). */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, white 22%, transparent), inset 0 0 0 5px var(--lp-scocca-ombra),
              0 40px 80px rgba(0, 0, 0, .55);
  transform: rotateY(-24deg) rotateX(14deg) rotateZ(6deg);
  transform-origin: 50% 55%;
  will-change: transform;
}
.lp-device__screen {
  position: relative;
  width: var(--sw);
  height: calc(var(--sw) * 2.1641);
  border-radius: 44px;
  overflow: clip;
  background: var(--lp-schermo-barra);
  isolation: isolate;
}
/* Il riflesso del vetro, sopra a tutto. */
.lp-device__screen::after,
.lp-iphone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(118deg, color-mix(in srgb, white 11%, transparent) 0%, transparent 32%);
}
.lp-device__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7;
  height: var(--stat);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8% 0 11%;
  box-sizing: border-box;
  background: var(--lp-schermo-barra);
}
.lp-device__status,
.lp-iphone__status {
  color: white;
  font: 400 13px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.lp-device__island,
.lp-iphone__island {
  position: absolute;
  top: 1.6%;
  left: 50%;
  z-index: 8;
  width: 32%;
  height: 3.5%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: black;
}
.lp-device__view { position: absolute; top: var(--stat); left: 0; right: 0; bottom: 0; overflow: clip; }
/* Le schermate: ognuna alta quanto lo schermo del telefono, una per scorrimento, a pagine (scroll-snap). */
.lp-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: var(--barh);
  background: var(--lp-schermo);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Le ripetute dal vivo sono a schermo intero su nero, come nell'app: la loro schermata ha il fondo nero anche ai lati. */
.lp-slide--nero { background: black; }
.lp-slide__shot { flex: 1; min-height: 0; display: flex; justify-content: center; }
.lp-slide__shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
/* Il nome della funzione sopra la schermata: una pastiglia nel colore di dettaglio con il contorno
   nell'accento (Luca, 08/11), cioe' i due colori del marchio insieme. */
.lp-slide__head {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0 8px;
}
.lp-slide__tag {
  padding: 8px 16px;
  border: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-2);
  color: var(--on-accent-2);
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}
.lp-slide__note {
  margin: 0 24px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.4;
  text-wrap: balance;
}
/* La barra in basso dell'app, sopra a tutte le schermate. */
.lp-device__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* Con lo script lo schermo scorre. Niente overscroll-behavior: contain - dall'ultima schermata (o
   dalla prima) uno scorrimento in piu' passa alla pagina. */
html.lp-js .lp-device__view {
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
html.lp-js .lp-device__view::-webkit-scrollbar { display: none; }

/* L'avviso sotto il telefono: il dito sullo schermo scorre le schermate, fuori scorre la pagina. Solo
   con lo script - senza, lo schermo non scorre e l'avviso direbbe il falso - e solo quando il telefono
   e' dritto, cioe' quando lo schermo si puo' toccare (Luca, 08/11). */
.lp-film__note {
  display: none;
  margin: 0;
  max-width: 340px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
}
.lp-film__note i { font-style: normal; color: var(--accent-text); }
html.lp-js .lp-film__note {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
html.lp-js .lp-film__note.is-on { opacity: 1; transform: none; }
.lp-film__note--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lp-film__note--touch { display: none; }
  .lp-film__note--mouse { display: inline; }
}
/* Il dito sullo schermo: la mano e i due archi, tre maschere dipinte nel colore d'accento. Sparisce
   al primo tocco. */
.lp-touch {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: 76px;
  height: 74px;
  margin: -37px 0 0 -30px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}
.lp-touch.is-on { opacity: 1; transform: none; }
.lp-touch__part {
  position: absolute;
  inset: 0;
  background: var(--accent);
  -webkit-mask: var(--lp-maschera) center / contain no-repeat;
  mask: var(--lp-maschera) center / contain no-repeat;
}
.lp-touch__hand { --lp-maschera: url("/img/landing/tocco-mano.png"); }
.lp-touch__arc--1 { --lp-maschera: url("/img/landing/tocco-arco-1.png"); }
.lp-touch__arc--2 { --lp-maschera: url("/img/landing/tocco-arco-2.png"); }
@media (prefers-reduced-motion: no-preference) {
  .lp-touch.is-on .lp-touch__hand { animation: lp-tocco-mano 1.8s ease-in-out infinite; }
  .lp-touch.is-on .lp-touch__arc--1 { animation: lp-tocco-arco-1 1.8s ease-out infinite; }
  .lp-touch.is-on .lp-touch__arc--2 { animation: lp-tocco-arco-2 1.8s ease-out infinite; }
}
@keyframes lp-tocco-mano { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-2px, -2px); } 24% { transform: translate(0, 0); } }
@keyframes lp-tocco-arco-1 { 0%, 8% { opacity: 0; } 18% { opacity: 1; } 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes lp-tocco-arco-2 { 0%, 18% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* Con lo script il telefono e' grande quanto lo lascia lo schermo: deve starci intero, dritto, con
   l'avviso sopra, nel punto in cui la pagina si ferma. */
html.lp-js .lp-device { --sw: min(300px, calc((100svh - 150px) / 2.24)); }

@media (max-width: 860px) {
  .lp-film__pin { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 112px; }
  .lp-film__stage { padding-top: 8px; padding-bottom: 24px; }
  .lp-device { --sw: min(260px, calc(100vw - 96px)); }
  html.lp-js .lp-device { --sw: min(300px, calc(100vw - 80px), calc((100svh - 190px) / 2.22)); }
  /* All'apertura il testo riempie da solo il primo schermo, con piu' aria; il telefono arriva scorrendo, senza
     spuntare in fondo (Luca, 07/11: «quando la apri c'e' un pezzo di telefono che spunta dentro»). */
  .lp-film__copy {
    min-height: calc(100vh - 112px);
    min-height: calc(100svh - 112px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
  }
  .lp-film__copy .lp-badge { align-self: flex-start; margin-bottom: 32px; }
  .lp-film__copy .lp-hero__title { margin-top: 32px; }
  .lp-film__copy .lp-hero__actions { margin-top: 40px; }
  .lp-film__copy .lp-hero__note { margin-top: 24px; }
  /* L'invito sopra al telefono, vicino (Luca, 07/11: «meno spazio qua»). */
  .lp-film__hint { position: relative; z-index: 1; padding: 24px 8px 0; text-align: center; }
  .lp-film__hint::before { margin-inline: auto; }
}
/* Gli schermi bassi (Safari sull'iPhone con la barra aperta, l'iPhone SE): l'aria dell'apertura si
   stringe perche' i tre bottoni stiano nel primo schermo, senza il telefono che spunta sotto. */
@media (max-width: 860px) and (max-height: 720px) {
  .lp-film__pin { padding-top: 88px; }
  .lp-film__copy { min-height: calc(100vh - 88px); min-height: calc(100svh - 88px); padding-bottom: 16px; }
  .lp-film__copy .lp-badge { margin-bottom: 16px; }
  .lp-hero__brand .logo-mark { height: 32px; }
  .lp-film__copy .lp-hero__title { margin-top: 16px; font-size: 28px; }
  .lp-film__copy .lp-hero__sub { margin-top: 8px; font-size: 16px; }
  .lp-film__copy .lp-hero__actions { margin-top: 24px; gap: 8px; }
  .lp-film__copy .lp-hero__actions .lp-btn { min-height: 46px; padding-block: 8px; }
  .lp-film__copy .lp-hero__note { margin-top: 16px; }
}

/* ==========================================================================
   Il resto della vetrina si muove: il marchio, l'apertura, le carte, il piano
   ==========================================================================

   Ogni cosa parte dallo stato in cui deve restare: chi ha chiesto meno movimento, o un browser che
   non sa fare una cosa, vede la pagina ferma e intera. Le animazioni tolgono e poi rimettono, non
   nascondono qualcosa che poi qualcuno deve mostrare.
   ========================================================================== */

/* ---------- il marchio entra ----------

   Quello grande dell'apertura, una volta sola, e poi sta fermo: entrare una volta e' l'atto di
   presentarsi. Quello della barra no (Luca, 09/11: «Questo non animarlo»): sta li' dal primo istante,
   e due marchi che arrivano insieme da destra erano un movimento di troppo. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero__brand .logo-mark {
    animation: lp-entra .7s cubic-bezier(.3, .8, .35, 1) .15s both;
  }
}

/* ---------- l'apertura entra ----------

   Le comparse legate allo scorrimento non servono a niente per quello che sta gia' sullo schermo
   quando la pagina si apre: sono gia' arrivate. Qui il tempo va bene, ed e' l'unico posto della
   vetrina in cui e' cosi'. Sale una riga per volta, dal basso, nell'ordine in cui si legge.

   "both" perche' senza, durante il ritardo, ogni pezzo si vedrebbe al suo posto per un istante e
   poi sparirebbe per rientrare. */
@media (prefers-reduced-motion: no-preference) {
  .lp-badge, .lp-hero__brand, .lp-hero__title, .lp-hero__sub, .lp-hero__actions, .lp-hero__note {
    animation: lp-eroe .85s cubic-bezier(.2, .8, .3, 1) both;
  }
  .lp-hero__brand { animation-delay: .08s; }
  .lp-hero__title { animation-delay: .16s; }
  .lp-hero__sub { animation-delay: .26s; }
  .lp-hero__actions { animation-delay: .36s; }
  .lp-hero__note { animation-delay: .46s; }
}
@keyframes lp-eroe {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- le carte arrivano mentre si scorre ----------

   Da destra, una fila per volta (Luca, 08/11: le pastiglie che entrano da destra), di --lp-arrivo:
   abbastanza perche' si legga come un arrivo e non come un assestamento, poco abbastanza da finire
   prima che l'occhio ci si attacchi. I titoli delle sezioni restano fermi: dicono dove sei, e un
   titolo che arriva insieme a cio' che introduce fa partire due movimenti nello stesso istante.

   Con lo script le muove lui, con la stessa strada letta dalla stessa variabile: il suo conto e'
   legato allo scorrimento della finestra anche su Safari, che "animation-timeline: view()" non lo
   sa ancora fare. Senza lo script le muove il foglio, dove il browser lo sa fare; dove non lo sa,
   la regola non si applica e le carte stanno al loro posto, ferme e intere.

   Il ritaglio su <main> resta e va lasciato: un elemento spostato a destra allarga comunque il
   documento, e senza il taglio la pagina si trascina di lato per tutta la durata dell'entrata. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.lp-js) .lp-cards,
    html:not(.lp-js) .lp-steps,
    html:not(.lp-js) .lp-facts {
      animation: lp-entra linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 25%;
    }
  }
}
@keyframes lp-entra {
  from { opacity: 0; transform: translateX(var(--lp-arrivo)); }
  to { opacity: 1; transform: none; }
}

/* Le schede rispondono al dito. Due pixel e un bordo: quanto basta a dire "questa e' una cosa",
   niente di piu' - non sono premibili e non devono sembrarlo. */
.lp-card { transition: transform .2s ease, border-color .2s ease; }
.lp-card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
@media (prefers-reduced-motion: reduce) {
  .lp-card { transition: none; }
  .lp-card:hover { transform: none; }
}

/* ---------- il piano Pro, messo in risalto ----------

   Piu' grande degli altri, con un filo che respira. Il velo dell'accento sul fondo e' la luce della
   carta; l'alone che respirava e' andato via il 28/10.

   Il rialzo e' scale e non un'altezza diversa: la fila resta una griglia di celle uguali, quindi
   nessuno degli altri si sposta, e su telefono - dove le schede si impilano - lo tolgo, perche' li'
   una scheda piu' larga delle altre esce dalla colonna invece di emergere. */
.lp-plan--featured {
  background:
    radial-gradient(120% 80% at 50% 0%,
                    color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}
@media (min-width: 720px) {
  .lp-plan--featured { transform: scale(1.045); z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-plan--featured { animation: lp-piano 3.6s ease-in-out infinite; }
  .lp-plan__tag { animation: lp-etichetta 3.6s ease-in-out infinite; }
}
/* Il bordo respira, non il contenuto: e' la scheda a farsi notare, e il prezzo dentro deve restare
   leggibile mentre lo fa. Un filo netto e niente alone (28/10, «elimina tutti gli effetti glow»). */
@keyframes lp-piano {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); }
  50% { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); }
}
@keyframes lp-etichetta {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ---------- le carte ---------- */

.lp-cards { display: grid; gap: 16px; }
.lp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.lp-cards--3 { grid-template-columns: repeat(3, 1fr); }

.lp-card {
  padding: 24px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-card);
}
.lp-card p { margin-top: 8px; font-size: 15px; }
/* Il giorno che rompe il piano, sopra a cosa fa l'app quel giorno: le tre carte del problema. */
.lp-card__if {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lp-card__if + h3 { margin-bottom: 4px; }
/* Le carte dei limiti non sono carte da sfogliare: sono affermazioni. Niente rilievo, un filo
   d'accento a sinistra e basta. */
.lp-card--line {
  background: none;
  box-shadow: none;
  border-left: 3px solid var(--accent);
}

/* ---------- il telefono collegato ---------- */

/* Le due piattaforme, ognuna con il suo marchio: chi legge «Salute» riconosce la mela prima della parola. */
.lp-platforms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 16px 0 8px;
}
.lp-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.lp-platform svg { flex: none; width: 24px; height: 24px; fill: var(--ink); }
.lp-platform > span { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.lp-platform b { font-size: 15px; font-weight: 400; color: var(--ink); }
.lp-platform small { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut); }

/* ---------- i quattro passi ---------- */

.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-step {
  padding: 24px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
}
.lp-step__n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 400;
}
.lp-step p { margin-top: 8px; font-size: 14.5px; }

.lp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.lp-fact {
  padding: 24px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--field);
}
.lp-fact b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent-text);
}
.lp-fact span { font-size: 14.5px; color: var(--mut); }

/* ---------- i piani ---------- */

/* Il titolo a sinistra e la home vera in un telefono di sbieco a destra. */
.lp-plans-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  margin-bottom: 40px;
}
.lp-plans-top .lp-head { margin-bottom: 0; }
.lp-iphone-stage { display: flex; justify-content: center; padding: 16px 48px 40px 0; perspective: 1800px; }
/* Lo stesso telefono dell'apertura, piu' piccolo e fermo, con lo spessore del fianco disegnato da due
   ombre nette: qui non si raddrizza mai, quindi il fianco si vede sempre. */
.lp-iphone {
  width: 280px;
  border-radius: 52px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, white 22%, transparent), inset 0 0 0 5px var(--lp-scocca-ombra),
              8px 8px 0 -1px color-mix(in srgb, var(--ink) 15%, black), 9px 9px 0 -1px color-mix(in srgb, var(--ink) 23%, black),
              40px 60px 70px rgba(0, 0, 0, .55);
  transform: rotateY(-24deg) rotateX(14deg) rotateZ(6deg);
}
.lp-iphone__screen { position: relative; border-radius: 42px; overflow: clip; background: var(--lp-schermo-barra); }
.lp-iphone__screen img { display: block; width: 100%; height: auto; }
.lp-iphone__status {
  position: absolute;
  top: 2.15%;
  left: 10%;
  right: 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.lp-plan--featured {
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-card);
}
.lp-plan__tag {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.lp-plan h3 { font-size: 20px; }
.lp-plan__price {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.lp-plan__price small {
  margin-left: 4px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mut2);
}
.lp-plan__note { margin-top: 8px; font-size: 14px; color: var(--mut2); }
/* Il prezzo all'anno e' quello che si paga davvero: si legge per primo, nell'inchiostro pieno - senza
   grassetto, che dal 31/10 e' solo dei titoli. */
.lp-plan__note b { font-weight: 400; color: var(--ink); }
.lp-plan__note--minor { margin-top: 4px; font-size: 12px; opacity: .75; }
.lp-plan__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0 24px;
  padding: 0;
  list-style: none;
}
.lp-plan__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ink-2);
}
/* La spunta e' disegnata dal foglio: un carattere in piu' nel markup di ogni riga sarebbe letto
   ad alta voce da uno screen reader senza voler dire niente. */
.lp-plan__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* ---------- il nastro: gratis durante la beta ----------

   Un nastro rosso di sbieco sopra le tre carte (Luca, 08/11: «una riga rossa 45 gradi sopra e scrivi
   GRATIS DURANTE LA BETA»): i prezzi restano leggibili sotto, e dicono la proposta; il nastro dice che
   oggi non si paga. Rosso e non nell'accento: e' un avviso sopra a tutto, e sul magenta dei bottoni
   si confonderebbe con loro. L'inchiostro scuro dei bottoni pieni ci si legge sopra.

   Un pezzo di nastro intero, con le sue estremita' di sbieco, lungo quanto basta ad attraversare le
   carte in diagonale: tagliato dalla loro scatola finiva in due tagli dritti, e sembrava un pezzo
   rimasto a meta'. Sul telefono le carte sono una colonna, e il nastro la attraversa al centro, sul
   Pro, uscendo dai lati dello schermo (li' lo taglia <main>, che non lascia allargare la pagina). Non
   prende il dito: i bottoni sotto restano premibili. */
.lp-plans { position: relative; }
.lp-plans .lp-plans__beta {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(520px, 150%);
  margin: 0;
  padding: 16px 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--danger);
  color: var(--on-accent);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .65);
  font-family: var(--cond);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: 4px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
/* Il bottone del piano va in fondo alla carta, cosi' i tre bottoni sono allineati anche quando gli
   elenchi hanno lunghezze diverse; e va a capo, perche' «Comincia con 14 giorni di Premium gratis»
   in una riga sola e' piu' largo della carta. */
.lp-plan .lp-btn {
  margin-top: auto;
  padding-block: 16px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.lp-fineprint {
  max-width: 68ch;
  margin: 32px auto 0;
  font-size: 13.5px;
  color: var(--mut2);
  text-align: center;
}

/* Gli inviti in fondo alle sezioni corte: centrati, staccati dal blocco sopra. Su telefono larghi quanto la colonna, come
   quelli dell'apertura (.lp-hero__actions, sotto i 460). */
.lp-section__cta { justify-content: center; margin-top: 48px; }

/* ---------- l'invito finale ---------- */

.lp-cta { max-width: 720px; text-align: center; }
.lp-cta .lp-hero__actions { justify-content: center; margin-top: 24px; }
.lp-cta .lp-eyebrow { justify-content: center; }

/* ---------- l'app da installare ---------- */

/*
  L'icona vera accanto al testo, e non un disegno che le somiglia: quella ufficiale di myono, la «o»
  sulla sua tessera scura (docs/lavoro/logo-myono/ufficiale/icona-rosa.svg), che il manifest
  consegnera' al telefono dopo il rebranding, con cui questa pagina va online. Su una pagina che
  promette un'applicazione, far vedere l'icona costa una <img> e vale quanto un paragrafo.

  La tessera, gli angoli tondi e i bordi chiari sono nel file: la pagina non aggiunge cornici (quella
  sfumata serviva all'anello di prima, scuro sul fondo scuro). drop-shadow e non box-shadow: il file
  ha gli angoli arrotondati e il resto trasparente, e una box-shadow disegnerebbe l'ombra del
  riquadro.
*/
.lp-install {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 4vw, 40px);
}
.lp-install__icon {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
}
.lp-install .lp-head { margin-bottom: 24px; }

/*
  Il bottone e' la <summary>, perche' e' lei che apre: dare l'aspetto del bottone a qualcos'altro
  vorrebbe dire uno script che apra il pannello. Restano da togliere il triangolino - due regole,
  che i due motori lo disegnano in due modi - e da rimettere il cursore, che una summary non ha.
*/
.lp-install__how > summary {
  list-style: none;
  cursor: pointer;
}
.lp-install__how > summary::-webkit-details-marker { display: none; }

.lp-install__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 62ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.lp-install__steps li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ink-2);
}
/* Un pallino e non la spunta dei piani: quelle sono cose che l'abbonamento comprende tutte insieme,
   queste sono tre strade di cui se ne prende una. */
.lp-install__steps li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.lp-install__note {
  max-width: 62ch;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--mut2);
}

/* L'app per il telefono che arriva: un riquadro nel velo dell'accento, come l'etichetta della beta in cima, perche' dice
   a che punto e' la beta. p.lp-install__soon e non la sola classe: «.lp p» qui sopra la ridipingerebbe di grigio. */
p.lp-install__soon {
  max-width: 62ch;
  margin-top: 24px;
  padding: 16px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Sotto i 620 l'icona sale sopra al testo: 112 pixel tolti a una colonna da 300 lascerebbero al
   titolo una parola per riga. */
@media (max-width: 620px) {
  .lp-install { grid-template-columns: minmax(0, 1fr); }
}

/*
  A chi la sta gia' usando installata, questa sezione non ha niente da dire.

  "display-mode: standalone" e' vero soltanto dentro l'applicazione installata, cioe' esattamente
  nel caso in cui invitare a installarla e' un invito a rifare una cosa fatta. Una media query e
  non uno script - la sezione deve sparire anche dove lo script non arriva - e sparisce con lei la voce che la indica, perche'
  un'ancora verso una sezione nascosta e' un collegamento che non porta da nessuna parte.
*/
@media (display-mode: standalone) {
  #app,
  .lp a[href="#app"] { display: none; }
}

/* ---------- il piede ---------- */

.lp-footer { padding: 48px 0 24px; border-top: 1px solid var(--line-soft); background: var(--lp-fondo); }
.lp-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.lp-footer p { margin-top: 16px; max-width: 40ch; font-size: 14px; }
.lp-footer h4 {
  margin-bottom: 16px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.lp-footer__links { display: flex; flex-direction: column; gap: 8px; }
.lp-footer__links a { font-size: 14.5px; color: var(--mut); text-decoration: none; }
.lp-footer__links a:hover { color: var(--accent-text); }
.lp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 24px;
  font-size: 13px;
  color: var(--mut2);
}

/* ---------- gli schermi stretti ---------- */

@media (max-width: 980px) {
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-cards--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Il titolo dei piani sopra, centrato, e il telefono sotto, piu' piccolo. */
  .lp-plans-top { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 24px; }
  .lp-plans-top .lp-head { margin-inline: auto; text-align: center; }
  .lp-plans-top .lp-eyebrow { justify-content: center; }
  .lp-iphone-stage { padding: 8px 0 24px; }
  .lp-iphone { width: 220px; }
}

@media (max-width: 680px) {
  .lp-section { padding-block: 80px; }
  .lp-head { margin-bottom: 32px; }
  .lp-cards--2,
  .lp-cards--3 { grid-template-columns: 1fr; }
  /* Le carte di una riga sola, due per fila: impilate una per riga facevano scorrere quattro
     schermi per quattro frasi. */
  .lp-cards--fitte { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lp-cards--fitte .lp-card { padding: 16px 16px; }
  .lp-cards--fitte .lp-card h3 { font-size: 15.5px; line-height: 1.25; }
  .lp-cards--fitte .lp-card p { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .lp-steps { gap: 8px; }
  .lp-step { padding: 16px 16px; }
  .lp-step h3 { font-size: 15.5px; }
  .lp-step p { font-size: 13px; }
  .lp-facts { gap: 8px; }
  .lp-fact { padding: 16px 8px; }
  .lp-fact span { font-size: 12px; }
  .lp-footer__grid { grid-template-columns: 1fr; }
  /* Nove colonne su un telefono sono nove parole tagliate a meta': tre righe da tre. */
  .lp-pillars { grid-template-columns: repeat(3, 1fr); gap: 16px 4px; margin-top: 8px; }
  .lp-pillar:nth-child(3n) { border-right: 0; }
}

@media (max-width: 460px) {
  .lp-hero__actions .lp-btn { flex: 1 1 100%; }
}

/* ---------- l'informativa ---------- */
/*
  Un documento, non una pagina di vendita: una colonna sola, stretta abbastanza da leggersi, con i
  titoli che si distinguono dal testo e niente altro. Riusa la barra e il piede della vetrina perche'
  chi ci arriva dalla vetrina non deve sentirsi altrove, e i colori sono quelli del prodotto.

  La misura e' 68 caratteri circa: piu' larga di cosi' l'occhio perde la riga, e questo e' un testo
  che qualcuno deve leggere per intero almeno una volta.
*/
/* La barra e' fissa, quindi la prima riga del documento le finiva sotto: qui sopra c'e' la sua
   altezza piu' l'aria che avrebbe avuto comunque. Visto in pagina - la parola "informativa" era
   tagliata a meta'. */
.lp-legal { padding: calc(72px + clamp(24px, 4vw, 48px)) 0 clamp(56px, 7vw, 92px); }
/* Su telefono la vetrina nasconde i bottoni della barra e li manda nel menu, che qui non c'e': senza
   questo, da un telefono si esce da questa pagina solo dal piede. */
.lp-legal-nav .lp-btn { display: inline-flex; }
.lp-legal .lp-wrap { max-width: 760px; }
.lp-legal h1 { margin: 4px 0 16px; }
.lp-legal h2 {
  margin: 40px 0 16px;
  font-size: clamp(20px, 3vw, 25px);
  line-height: 1.25;
}
.lp-legal h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  color: var(--accent-text);
}
.lp-legal p { margin: 0 0 16px; line-height: 1.65; color: var(--ink-2); }
.lp-legal strong { color: var(--ink); }
.lp-legal__lead { font-size: 17.5px; color: var(--ink); }
.lp-legal__updated {
  margin-bottom: 8px;
  font-family: var(--cond);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mut);
}
.lp-legal__list { margin: 0 0 16px; padding-left: 24px; }
.lp-legal__list li { margin-bottom: 8px; line-height: 1.6; color: var(--ink-2); }
.lp-legal__nowrap { white-space: nowrap; }

/* La tabella delle basi giuridiche. Scorre per conto suo invece di allargare la pagina: su un
   telefono due colonne di testo non ci stanno, e una pagina che scorre in orizzontale e' rotta. */
.lp-legal__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.lp-legal__table th,
.lp-legal__table td {
  padding: 8px 16px;
  border: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink-2);
}
.lp-legal__table th {
  font-family: var(--cond);
  font-size: 12.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

/*
  I buchi da riempire, evidenziati apposta.

  Titolare, sede e indirizzo di contatto non li puo' inventare chi scrive il codice. Un indirizzo
  sbagliato dentro a un documento legale e' un danno molto piu' grande di una casella gialla che si
  vede: questa si nota subito e chiede di essere chiusa, quello passa inosservato per anni.
*/
.lp-legal__todo {
  padding: 1px 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: .95em;
  color: var(--ink);
}