/* ==========================================================================
   LyamFlow — /crea-sito-web-gratis
   --------------------------------------------------------------------------
   Il foglio della pagina del costruttore di siti. Non introduce identità:
   colori, raggi, ombre, curve e scala tipografica arrivano tutti da
   tokens.css, e i bottoni, i badge, le card di vetro, la barra di
   navigazione e l'accordion sono quelli di components.css.

   Quello che c'è qui dentro è solo la messa in scena: le composizioni che
   questa pagina ha e la landing no — l'anteprima di un sito dentro una
   finestra di browser, i dodici modelli, l'editor, la fascia dei telefoni.

   TRE REGOLE CHE VALGONO PER TUTTO IL FILE

   1. Nessuna classe qui dentro nasconde contenuto. Gli stati "prima
      dell'animazione" stanno in base.css sotto `.lf--js`, che la mette
      JavaScript: a script spento — cioè come leggono la pagina i motori di
      risposta — si vede tutto. È la stessa regola delle altre pagine di
      vendita, e vale anche adesso che questa ha le animazioni.

   2. Si anima solo `transform`, `opacity` e `filter`, e le coordinate vive
      passano da variabili CSS scritte da JS. Nessun effetto tocca il layout.

   3. Le anteprime dei siti sono HTML e CSS, non immagini. Pesano meno di uno
      screenshot, restano nitide su qualunque schermo, e soprattutto mostrano
      i colori veri dei modelli — quelli letti da
      src/services/websites/templates.ts, non un'approssimazione.
   ========================================================================== */

/* ==========================================================================
   0. Fondo di pagina
   --------------------------------------------------------------------------
   Come in pages.css: il fondo scuro va anche sulla radice, altrimenti un
   rimbalzo di scorrimento mostra il bianco del browser sotto un testo chiaro.
   ========================================================================== */
html {
  background: #04060c;
  color-scheme: dark;
}

/* ==========================================================================
   1. Impaginazione di sezione
   --------------------------------------------------------------------------
   UNA NOTA SUI SELETTORI SCRITTI `.lf .lf-w-…`

   Dieci regole in questo foglio portano `.lf` davanti alla propria classe, e
   non e un vezzo: e l'unico modo perche i loro margini esistano.

   base.css azzera i margini degli elementi di testo con `.lf p`, `.lf ul`,
   `.lf h1`… — selettori da una classe e un elemento, cioè specificità (0,1,1).
   Una regola come `.lf-w-note { margin-top: 1.75rem }` è (0,1,0): a parità di
   classi vince chi ha più elementi, quindi vinceva il reset e il margine non
   compariva. Non è un errore che si veda leggendo il CSS — si vede solo
   misurando, ed è per questo che qui c'è scritto.

   Le regole con due classi (`.lf-w-head .lf__lead`) non hanno il problema, e
   infatti sono lasciate come sono.
   ========================================================================== */

/* Sezione: più corta di quella della landing, perché qui le sezioni sono
   dodici — con `--lf-section` piena la pagina diventerebbe un corridoio. */
.lf-w-sec {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  z-index: var(--lf-z-content);
}

.lf-w-sec--tight {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.lf-w-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.lf-w-head--center {
  margin-inline: auto;
  text-align: center;
}

.lf-w-head--center .lf__eyebrow::before {
  display: none;
}

.lf-w-head h2 {
  margin-top: 1rem;
}

.lf-w-head .lf__lead {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.lf-w-head--center .lf__lead {
  margin-inline: auto;
}

/* La nota piccola che chiude una sezione. */
.lf .lf-w-note {
  margin-top: 1.75rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-faint);
  max-width: 60ch;
  line-height: 1.65;
}

.lf .lf-w-note--center {
  margin-inline: auto;
  text-align: center;
}

.lf-w-note a {
  color: var(--lf-azure-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lf-w-note code,
.lf-w-copy code {
  font-family: var(--lf-font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: var(--lf-surface);
  border: 1px solid var(--lf-line-soft);
  color: var(--lf-fg);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   1-bis. I pezzi del testo diviso
   --------------------------------------------------------------------------
   `initReveal()` spezza i titoli in righe, parole o lettere e le anima una a
   una. Perché un `transform` faccia effetto quei pezzi devono essere blocchi:
   su un elemento in linea non sostituito il transform viene semplicemente
   ignorato, e il titolo resterebbe fermo — o peggio, come è successo qui,
   collassato.

   Le tre classi vivono in sections.css, che però è il foglio della landing e
   porta con sé millecinquecento righe che a questa pagina non servono. Sono
   dell'impianto di rivelazione, non di quella pagina: qui si ripetono, e sono
   otto righe.
   ========================================================================== */
.lf-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.lf-char,
.lf-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* ==========================================================================
   2. Finestra di browser
   --------------------------------------------------------------------------
   La cornice che avvolge ogni anteprima di sito. È l'elemento che dice
   "questo è un sito vero, non un disegno": barra, tre pallini, l'indirizzo
   scritto per esteso.
   ========================================================================== */
.lf-w-win {
  position: relative;
  border-radius: var(--lf-r-xl);
  overflow: hidden;
  background: hsl(224 16% 11%);
  border: 1px solid hsl(210 40% 98% / 0.1);
  box-shadow: var(--lf-sh-float);
  isolation: isolate;
}

.lf-w-win__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: hsl(224 16% 13%);
  border-bottom: 1px solid hsl(0 0% 0% / 0.4);
}

.lf-w-win__dots {
  display: flex;
  gap: 0.3rem;
  flex: none;
}

.lf-w-win__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--lf-r-full);
}

/* I tre colori del semaforo, tenuti bassi di saturazione: devono leggersi
   come una cornice, non come tre pulsanti da premere. */
.lf-w-win__dots i:nth-child(1) { background: hsl(4 55% 50%); }
.lf-w-win__dots i:nth-child(2) { background: hsl(40 62% 50%); }
.lf-w-win__dots i:nth-child(3) { background: hsl(140 38% 44%); }

.lf-w-win__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.5rem;
  padding-inline: 0.65rem;
  border-radius: var(--lf-r-full);
  background: hsl(224 20% 8%);
  font-family: var(--lf-font-mono);
  font-size: 0.7rem;
  color: var(--lf-muted);
  white-space: nowrap;
  overflow: hidden;
}

.lf-w-win__url svg {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  color: var(--lf-success);
}

/* La parte dell'indirizzo che conta: il nome del locale. */
.lf-w-win__url b {
  font-weight: 500;
  color: var(--lf-fg-dim);
}

.lf-w-win__screen {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* Riflesso di vetro: lo stesso di .lf-mac__glare, più tenue perché qui sotto
   c'è quasi sempre una superficie chiara. */
.lf-w-win__glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    hsl(0 0% 100% / 0.16) 0%,
    hsl(0 0% 100% / 0.03) 24%,
    transparent 44%
  );
  mix-blend-mode: overlay;
}

/* ==========================================================================
   3. Anteprima di sito — il componente più riusato della pagina
   --------------------------------------------------------------------------
   Un sito finto in miniatura, tematizzabile da tre variabili: fondo,
   inchiostro, accento. Sono le stesse tre che ogni modello dichiara in
   `preview: { bg, ink, accent }`, quindi le dodici miniature della griglia
   mostrano i colori veri e non delle tinte inventate.

   `container-type` invece di misure fisse: la stessa anteprima compare in un
   riquadro largo 900px nell'hero e largo 150px dentro un telefono, e deve
   rimpicciolire in proporzione invece di andare a capo.
   ========================================================================== */
@supports (container-type: inline-size) {
  .lf-w-win__screen,
  .lf-w-phone__screen,
  .lf-w-tpl__frame {
    container-type: inline-size;
  }
}

.lf-w-site {
  --s-bg: #f5f3ef;
  --s-ink: #16181d;
  --s-accent: #8f3a1e;
  --s-pad: 6cqw;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--s-bg);
  color: var(--s-ink);
  font-size: 2.55cqw;
  line-height: 1.35;
  overflow: hidden;
  /* L'anteprima è decorativa: la racconta il testo attorno. */
  user-select: none;
}

/* Senza `container-type` (browser vecchi) la miniatura resta leggibile a una
   misura fissa: perde la proporzione, non il senso. */
@supports not (container-type: inline-size) {
  .lf-w-site {
    font-size: 0.62rem;
    --s-pad: 1.3rem;
  }
}

/* --- Barra del sito ---------------------------------------------------- */
.lf-w-site__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--s-pad) * 0.55) var(--s-pad);
  border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 12%, transparent);
  flex: none;
}

.lf-w-site__logo {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 1.15em;
  white-space: nowrap;
}

.lf-w-site__links {
  display: flex;
  gap: 0.9em;
  align-items: center;
  font-size: 0.86em;
  opacity: 0.55;
  white-space: nowrap;
}

/* --- Prima schermata --------------------------------------------------- */
.lf-w-site__hero {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5em;
  padding: calc(var(--s-pad) * 1.1) var(--s-pad);
  overflow: hidden;
}

.lf-w-site__eyebrow {
  font-size: 0.76em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--s-accent);
}

.lf-w-site__title {
  font-size: 2.8em;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lf-w-site__sub {
  font-size: 1em;
  max-width: 22em;
  opacity: 0.68;
  text-wrap: pretty;
}

.lf-w-site__btn {
  margin-top: 0.55em;
  padding: 0.6em 1.3em;
  border-radius: 999px;
  background: var(--s-accent);
  color: var(--s-bg);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

/*
 * Fotografia: un gradiente e non un file. Le anteprime in pagina sono più di
 * venti — venti immagini vere sarebbero megabyte per una decorazione.
 *
 * La base è `--s-photo`, un fondo scuro suo, e non l'inchiostro del modello.
 * Costruirla sull'inchiostro sembrava furbo e non lo era: sui modelli scuri
 * l'inchiostro è quasi bianco, quindi Notturno — nero, oro e silenzio — usciva
 * come una macchia verde oliva chiara, cioè l'esatto contrario di sé stesso.
 * Una fotografia di sala o di cibo è scura di suo: è su quella scurita che sta
 * il testo bianco di questa impaginazione.
 */
.lf-w-site {
  --s-photo: #2b2119;
}

.lf-w-site__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(80% 90% at 78% 16%, color-mix(in srgb, var(--s-accent) 62%, transparent), transparent 70%),
    radial-gradient(70% 80% at 18% 94%, color-mix(in srgb, var(--s-photo) 78%, transparent), transparent 74%),
    linear-gradient(145deg, var(--s-photo), color-mix(in srgb, var(--s-accent) 52%, var(--s-photo)));
}

/* Tutto ciò che segue la fotografia le sta sopra. */
.lf-w-site__photo ~ * {
  position: relative;
  z-index: 1;
}

/* --- Fascia in fondo: la prova che il sito ha altre sezioni ------------- */
.lf-w-site__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s-pad) * 0.42);
  padding: 0 var(--s-pad) var(--s-pad);
  flex: none;
}

.lf-w-site__cell {
  border-radius: 0.55em;
  padding: 0.7em 0.75em;
  background: color-mix(in srgb, var(--s-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--s-ink) 11%, transparent);
  font-size: 0.78em;
  line-height: 1.3;
  min-width: 0;
}

.lf-w-site__cell b {
  display: block;
  font-weight: 650;
  margin-bottom: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-w-site__cell span {
  opacity: 0.6;
}

/* --- Varianti di impaginazione ----------------------------------------- */

/* Cinematografico: la fotografia occupa tutto, il testo ci sta sopra.
   È l'impianto di Sipario, Brace, Terrazza e Notturno. */
.lf-w-site--photo .lf-w-site__hero {
  color: #fff;
  /*
   * `safe` non è un vezzo. Con il solo `flex-end`, un contenuto più alto del
   * riquadro non trabocca in fondo — trabocca in CIMA, cioè dalla parte che
   * `overflow: hidden` taglia via: l'occhiello e la prima riga del titolo
   * sparivano, e restava "sul porto" senza il "Cucina italiana" sopra.
   *
   * `safe flex-end` dice al browser di allineare in fondo finché ci sta, e di
   * ripiegare sull'inizio quando non ci sta più: si perde l'allineamento, non
   * il testo. Le due righe restano perché i browser che non conoscono `safe`
   * scartano la seconda e tengono la prima.
   */
  justify-content: flex-end;
  justify-content: safe flex-end;
}

.lf-w-site--photo .lf-w-site__eyebrow {
  color: color-mix(in srgb, var(--s-accent) 60%, #fff);
}

.lf-w-site--photo .lf-w-site__sub {
  opacity: 0.85;
}

/* Editoriale: titolo in grazie. Sipario e Gazzetta. */
.lf-w-site--serif .lf-w-site__title,
.lf-w-site--serif .lf-w-site__logo {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Diviso: mezza fotografia e mezzo testo, affiancati. Riviera, Terrazza. */
.lf-w-site--split .lf-w-site__hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--s-pad);
}

.lf-w-site--split .lf-w-site__photo {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 6em;
  border-radius: 0.7em;
}

.lf-w-site--split .lf-w-site__copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: flex-start;
}

/* Tipografico: niente foto, solo il nome grandissimo. Atelier, Insegna. */
.lf-w-site--type .lf-w-site__title {
  font-size: 4.2em;
}

.lf-w-site--type .lf-w-site__photo {
  display: none;
}

/* Monospazio a vista: Officina. */
.lf-w-site--mono,
.lf-w-site--mono .lf-w-site__logo {
  font-family: var(--lf-font-mono);
}

/* Squadrato: niente raggi. Sipario, Insegna, Attivo, Officina. */
.lf-w-site--square .lf-w-site__btn,
.lf-w-site--square .lf-w-site__cell,
.lf-w-site--square .lf-w-site__photo {
  border-radius: 0;
}

/* ==========================================================================
   4. Hero
   --------------------------------------------------------------------------
   Due colonne: a sinistra la promessa, a destra il prodotto. Su telefono
   diventano due righe — prima si legge, poi si vede — perché una schermata
   larga 375px non regge due colonne senza rimpicciolire entrambe.
   ========================================================================== */
.lf-w-hero {
  position: relative;
  padding-block: clamp(5rem, 11vh, 8.5rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}

.lf-w-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

/* Alone che segue il puntatore: le coordinate le scrive JS in --lf-mx/--lf-my. */
.lf-w-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    30rem 30rem at var(--lf-mx) var(--lf-my),
    hsl(205 100% 66% / 0.09),
    transparent 62%
  );
}

.lf .lf-w-hero__badge {
  margin-bottom: 1.5rem;
}

/*
 * La colonna del testo è un contenitore, e il titolo si misura su di lei
 * (`cqw`) invece che sulla finestra (`vw`).
 *
 * Con i `vw` il titolo continuava a crescere oltre i 1280px mentre la colonna
 * — dentro un contenitore che a 1280 si ferma — restava della stessa
 * larghezza: da qualche parte oltre quella soglia "Online in 5 minuti."
 * andava a capo, e le due righe pensate diventavano tre. Misurato sulla
 * colonna, il rapporto fra il testo e lo spazio che ha resta quello ovunque.
 */
.lf-w-hero__copy {
  container-type: inline-size;
}

.lf-w-hero__title {
  font-size: clamp(2.5rem, 9.6cqw, 3.9rem);
  letter-spacing: var(--lf-track-mega);
  line-height: 0.97;
  margin: 0;
}

@supports not (container-type: inline-size) {
  .lf-w-hero__title {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  }
}

/*
 * La seconda riga nel colore d'accento, e non con `.lf__grad`.
 *
 * Il gradiente su un testo diviso in lettere si dipinge una lettera per volta
 * (`paintGradientChars` in reveal.js): a ogni glifo tocca la sua fetta di
 * sfumatura, calcolata dalla posizione che aveva al momento della misura. Se
 * il testo va a capo dopo — e va a capo dopo, perché il carattere Inter
 * arriva dopo il primo disegno — le fette restano quelle vecchie e le lettere
 * finiscono a pescare fuori dal gradiente: trasparenti, cioè invisibili.
 *
 * Un colore pieno non ha fette da tenere allineate. Ed è anche quello che
 * serviva: l'accento del marchio, non un arcobaleno.
 */
.lf-w-hero__row--accent {
  color: hsl(205 100% 76%);
}

/* Una riga per frase, dichiarata: alla misura grande il testo da solo
   andrebbe a capo dove capita, e un titolo spezzato a metà di una frase si
   legge peggio di uno più piccolo. */
.lf-w-hero__row {
  display: block;
}

.lf .lf-w-hero__lead {
  margin-top: 1.5rem;
  max-width: 34rem;
}

.lf-w-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Le tre rassicurazioni sotto ai pulsanti. Sono la risposta alle tre
   obiezioni che fermano chi arriva: quanto costa, cosa mi chiedete, devo
   saper programmare. */
.lf .lf-w-hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1.75rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
}

.lf-w-hero__checks li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lf-w-hero__checks svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--lf-success);
}

/* --- Il palco a destra ------------------------------------------------- */
.lf-w-hero__stage {
  position: relative;
  /* Aria attorno per le card che galleggiano fuori dalla finestra. */
  padding: 2.25rem 0;
}

.lf-w-hero__win {
  position: relative;
  z-index: 2;
  /* La finestra entra leggermente ruotata e si raddrizza: le variabili le
     anima JS (o restano a riposo se il movimento è ridotto). */
  transform: perspective(1800px) rotateX(var(--w-rx, 0deg)) rotateY(var(--w-ry, 0deg))
    scale(var(--w-scale, 1));
  transform-style: preserve-3d;
}

.lf-w-hero__win .lf-w-win__screen {
  aspect-ratio: 16 / 10;
}

/* Alone di scena dietro alla finestra: la stessa luce dei device della landing. */
.lf-w-hero__halo {
  position: absolute;
  inset: -14% -10% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 45% at 28% 28%, hsl(205 100% 58% / 0.36), transparent 70%),
    radial-gradient(50% 50% at 76% 62%, hsl(265 88% 62% / 0.32), transparent 72%);
  filter: blur(60px);
}

/* --- Card che galleggiano ---------------------------------------------- */
.lf-w-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--lf-r-lg);
  background: var(--lf-glass-strong);
  border: 1px solid var(--lf-line-bright);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--lf-sh-elevated);
  font-size: var(--lf-t-xs);
  white-space: nowrap;
  /* Il galleggio infinito è una sola animazione su transform: resta sul
     compositor e non ridisegna nulla. */
  animation: lf-w-float 7s var(--lf-ease-in-out) infinite;
  animation-delay: var(--f-delay, 0s);
}

.lf-w-float b {
  display: block;
  color: var(--lf-fg);
  font-weight: 600;
}

.lf-w-float span {
  display: block;
  color: var(--lf-muted);
  font-size: var(--lf-t-2xs);
  margin-top: 0.05rem;
}

.lf-w-float__icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  border-radius: var(--lf-r-sm);
  background: hsl(205 100% 58% / 0.14);
  color: hsl(205 100% 78%);
}

.lf-w-float__icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

/*
 * Gli scostamenti stanno sotto il 5%: più in là, a una finestra larga 1280px,
 * le card uscirebbero dal contenitore e verrebbero tagliate da
 * `overflow-x: clip`. Le posizioni verticali evitano la barra dell'indirizzo
 * in alto e la fascia delle sezioni in basso, che sono le due parti
 * dell'anteprima che devono restare leggibili.
 */
.lf-w-float--ai {
  top: -3%;
  left: -4%;
}

.lf-w-float--time {
  top: 16%;
  right: -4%;
  --f-delay: -2.3s;
}

.lf-w-float--mobile {
  bottom: 18%;
  left: -5%;
  --f-delay: -4.6s;
}

.lf-w-float--seo {
  bottom: -3%;
  right: -2%;
  --f-delay: -1.2s;
}

@keyframes lf-w-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -9px, 0);
  }
}

/* La barra di avanzamento della generazione dentro la card "AI".
   È decorativa: nessun testo dipende da lei. */
.lf-w-float__bar {
  width: 3.25rem;
  height: 0.25rem;
  border-radius: var(--lf-r-full);
  background: hsl(210 40% 98% / 0.12);
  overflow: hidden;
  margin-top: 0.3rem;
}

.lf-w-float__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--lf-grad-brand);
  animation: lf-w-fill 2.8s var(--lf-ease-in-out) infinite;
}

@keyframes lf-w-fill {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(160%);
  }
}

/* ==========================================================================
   5. Da una frase a un sito — la trasformazione
   --------------------------------------------------------------------------
   Tre riquadri in fila: quello che scrivi, quello che succede, quello che
   esce. Fra l'uno e l'altro una freccia che su telefono ruota di 90°, perché
   la lettura passa da orizzontale a verticale.
   ========================================================================== */
.lf-w-morph {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

.lf-w-morph__pane {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--lf-r-xl);
  background: var(--lf-glass);
  border: 1px solid var(--lf-line-soft);
  backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  -webkit-backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
}

.lf-w-morph__label {
  font-size: var(--lf-t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-muted);
}

/* Quello che scrive il cliente: monospazio, come in un campo di testo. */
.lf-w-morph__quote {
  font-family: var(--lf-font-mono);
  font-size: var(--lf-t-sm);
  line-height: 1.6;
  color: var(--lf-fg);
}

/* Il cursore che lampeggia in coda alla frase scritta a macchina. */
.lf-w-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.1em;
  vertical-align: -0.15em;
  background: var(--lf-azure);
  animation: lf-w-blink 1.1s steps(1) infinite;
}

@keyframes lf-w-blink {
  50% {
    opacity: 0;
  }
}

/* La freccia fra i riquadri. */
.lf-w-morph__arrow {
  display: grid;
  place-items: center;
  color: var(--lf-faint);
}

.lf-w-morph__arrow svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Le spunte del riquadro centrale: entrano una alla volta quando la sezione
   arriva a schermo (classe `is-on` messa da JS). */
.lf-w-morph__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-fg-dim);
}

.lf-w-morph__steps li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: opacity 0.5s var(--lf-ease);
}

/* Spente solo se c'è JavaScript ad accenderle: senza, si leggono tutte. */
.lf--js .lf-w-morph__steps li {
  opacity: 0.28;
}

.lf-w-morph__steps li.is-on {
  opacity: 1;
}

.lf-w-morph__steps svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--lf-success);
}

/* Le pagine prodotte: pillole che compaiono a scaglioni. */
.lf-w-morph__out {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lf-w-morph__out li {
  padding: 0.35rem 0.7rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-xs);
  font-weight: 550;
  color: hsl(205 100% 84%);
  background: hsl(205 100% 58% / 0.1);
  box-shadow: inset 0 0 0 1px hsl(205 100% 58% / 0.22);
  transition:
    opacity 0.45s var(--lf-ease),
    transform 0.45s var(--lf-ease);
  transition-delay: var(--lf-delay, 0s);
}

.lf--js .lf-w-morph__out li {
  transform: scale(0.9);
  opacity: 0.25;
}

.lf-w-morph__out li.is-on {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   6. I cinque passaggi
   --------------------------------------------------------------------------
   A sinistra l'elenco, a destra una schermata che cambia con il passaggio
   attivo. La colonna di destra è appiccicata: si scorre l'elenco e la
   schermata resta ferma a cambiare.

   Su telefono l'impianto appiccicato non si usa (sotto, in fondo al file):
   diventano cinque blocchi in colonna, ciascuno con la sua schermata.
   ========================================================================== */
.lf-w-steps {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.lf-w-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lf-w-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--lf-r-lg);
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--lf-ease),
    border-color 0.5s var(--lf-ease);
}

.lf-w-step.is-active {
  background: var(--lf-glass);
  border-color: var(--lf-line-soft);
}

.lf-w-step__n {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--lf-r-full);
  font-family: var(--lf-font-mono);
  font-size: var(--lf-t-xs);
  font-weight: 600;
  color: var(--lf-muted);
  background: hsl(210 40% 98% / 0.05);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
  transition:
    color 0.5s var(--lf-ease),
    background-color 0.5s var(--lf-ease),
    box-shadow 0.5s var(--lf-ease);
}

.lf-w-step.is-active .lf-w-step__n {
  color: hsl(222 47% 11%);
  background: hsl(210 20% 97%);
  box-shadow: 0 0 30px -6px hsl(205 100% 70% / 0.55);
}

.lf-w-step__t {
  font-size: var(--lf-t-h4);
  font-weight: 600;
  letter-spacing: var(--lf-track-normal);
  color: var(--lf-fg-dim);
  transition: color 0.5s var(--lf-ease);
}

.lf-w-step.is-active .lf-w-step__t {
  color: var(--lf-fg);
}

.lf .lf-w-step__d {
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
  line-height: 1.55;
  margin-top: 0.3rem;
  max-width: 34ch;
}

/* --- La colonna appiccicata ------------------------------------------- */
.lf-w-steps__stage {
  position: sticky;
  top: clamp(5.5rem, 12vh, 7.5rem);
}

.lf-w-steps__stage .lf-w-win__screen {
  aspect-ratio: 16 / 10;
}

/* Le schermate sono impilate nello stesso posto: una sola visibile per
   volta. `visibility` oltre a `opacity` perché una schermata trasparente
   resterebbe cliccabile e leggibile dagli screen reader. */
/*
 * Il contenitore riempie lo schermo del mockup, e non si limita a essere
 * "relativo".
 *
 * Con `position: relative` e basta si creava un giro vizioso: le schermate
 * dentro sono `position: absolute`, quindi non davano altezza al contenitore;
 * il contenitore restava alto zero; e siccome era lui il blocco di
 * contenimento, `inset: 0` delle schermate risolveva a zero. Risultato: si
 * vedeva la riga del titolo e sotto il bianco della finestra.
 *
 * `absolute; inset: 0` gli fa prendere la misura dello schermo — che ce l'ha,
 * gliela dà `aspect-ratio` — e da lì in giù tutto torna a misurarsi.
 */
.lf-w-shots {
  position: absolute;
  inset: 0;
  display: grid;
}

/*
 * Impilate nello stesso posto, una sola visibile per volta — ma solo con JS,
 * che è chi le fa cambiare. Senza, la regola non si applica affatto: si
 * vedono tutte e cinque una sotto l'altra, che è brutto ma è leggibile, ed è
 * esattamente ciò che deve trovare un motore di risposta.
 */
.lf--js .lf-w-shot {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  /* Uscita svelta: la schermata che se ne va deve sparire prima che arrivi
     la prossima, altrimenti per mezzo secondo si leggono due testi
     sovrapposti — e due elenchi di parole uno sopra l'altro non sono una
     dissolvenza incrociata, sono un errore di stampa. */
  transition:
    opacity 0.22s var(--lf-ease),
    transform 0.22s var(--lf-ease),
    visibility 0s linear 0.22s;
}

/* Entrata dopo l'uscita: il ritardo copre la dissolvenza di quella prima. */
.lf--js .lf-w-shot.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.42s var(--lf-ease) 0.18s,
    transform 0.42s var(--lf-ease) 0.18s,
    visibility 0s;
}


/* ==========================================================================
   7. Vetrina dei siti
   --------------------------------------------------------------------------
   Una fila che scorre di lato. La si trascina col dito, con la rotella, con
   le frecce della tastiera; i due pulsanti servono a chi usa il mouse e non
   sa che si può trascinare.

   È `overflow-x: auto` con `scroll-snap`, non un carosello in JavaScript:
   funziona a script spento, si scorre col dito senza che nessuno scriva un
   gestore di `touchmove`, e il sistema operativo ci mette la sua inerzia.
   Quello che aggiunge JS è solo la messa a fuoco della card centrale.
   ========================================================================== */
.lf-w-rail {
  position: relative;
  /* Esce dal contenitore fino ai bordi dello schermo: una vetrina che si
     ferma a metà pagina non sembra una vetrina. */
  margin-inline: calc(var(--lf-gutter) * -1);
  padding-inline: var(--lf-gutter);
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lf-gutter);
  /* La barra di scorrimento qui è rumore: il movimento lo suggeriscono le
     card tagliate al bordo e i due pulsanti. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 1.5rem;
}

.lf-w-rail::-webkit-scrollbar {
  display: none;
}

.lf-w-rail__item {
  flex: 0 0 min(78vw, 34rem);
  scroll-snap-align: center;
  /* La card fuori fuoco è appena più piccola e appena più spenta: è la
     gerarchia che dice dove guardare, e costa un transform. */
  transform: scale(var(--r-scale, 0.94));
  opacity: var(--r-op, 0.55);
  transition:
    transform 0.6s var(--lf-ease),
    opacity 0.6s var(--lf-ease);
}

.lf-w-rail__item.is-focus {
  --r-scale: 1;
  --r-op: 1;
}

/* Senza JS nessuna card è "a fuoco": si mostrano tutte piene, in fila. */
.lf:not(.lf--js) .lf-w-rail__item {
  --r-scale: 1;
  --r-op: 1;
}

.lf-w-rail__item .lf-w-win__screen {
  aspect-ratio: 16 / 11;
}

.lf-w-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-inline: 0.25rem;
}

.lf-w-card__name {
  font-size: var(--lf-t-h4);
  font-weight: 600;
  letter-spacing: var(--lf-track-normal);
  color: var(--lf-fg);
}

.lf-w-card__kind {
  display: block;
  font-size: var(--lf-t-xs);
  font-weight: 500;
  letter-spacing: var(--lf-track-wide);
  text-transform: uppercase;
  color: var(--lf-faint);
  margin-top: 0.2rem;
}

/* Comandi della vetrina */
.lf-w-rail__ctrl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.lf-w-rail__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--lf-r-full);
  color: var(--lf-fg-dim);
  background: hsl(210 40% 98% / 0.05);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
  transition:
    background-color 0.3s var(--lf-ease),
    color 0.3s var(--lf-ease),
    transform 0.3s var(--lf-ease);
}

.lf-w-rail__btn:hover {
  background: hsl(210 40% 98% / 0.1);
  color: var(--lf-fg);
}

.lf-w-rail__btn:active {
  transform: scale(0.94);
}

.lf-w-rail__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Il badge "Fatto con LyamFlow" appoggiato sull'anteprima. */
.lf-w-stamp {
  position: absolute;
  z-index: 7;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-2xs);
  font-weight: 600;
  color: hsl(210 20% 96%);
  background: hsl(224 24% 5% / 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.14);
}

.lf-w-stamp svg {
  width: 0.7rem;
  height: 0.7rem;
}

/* ==========================================================================
   8. I dodici modelli
   --------------------------------------------------------------------------
   Quattro colonne, poi tre, poi due. Mai una: a una colonna la griglia
   diventa alta come mezza pagina e nessuno arriva in fondo.
   ========================================================================== */
.lf-w-tpls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.lf-w-tpl {
  position: relative;
  display: block;
  border-radius: var(--lf-r-lg);
  overflow: hidden;
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  transition:
    transform 0.45s var(--lf-ease),
    border-color 0.45s var(--lf-ease),
    box-shadow 0.45s var(--lf-ease);
}

@media (hover: hover) {
  .lf-w-tpl:hover {
    transform: translateY(-4px);
    border-color: hsl(210 40% 98% / 0.2);
    box-shadow: var(--lf-sh-float);
  }
}

.lf-w-tpl:focus-visible {
  transform: translateY(-4px);
}

/*
 * `display: block` non è pleonastico: il riquadro è uno <span> dentro un <a>,
 * quindi di suo resta in linea — e su una scatola in linea `aspect-ratio`,
 * `overflow` e `container-type` non si applicano affatto. Senza questa riga
 * ogni miniatura prendeva l'altezza del proprio contenuto invece dei suoi
 * quattro terzi, e la griglia dei dodici modelli era alta tre schermi.
 *
 * Lo <span> resta al posto di un <div> perché il contenitore è un <a>, e
 * dentro un collegamento il contenuto deve essere di tipo "phrasing": un
 * <div> lì dentro non è HTML valido.
 */
.lf-w-tpl__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Lo zoom dell'anteprima al passaggio del mouse. */
.lf-w-tpl__frame .lf-w-site {
  transition: transform 0.6s var(--lf-ease);
}

@media (hover: hover) {
  .lf-w-tpl:hover .lf-w-site {
    transform: scale(1.04);
  }
}

.lf-w-tpl__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--lf-line-soft);
}

.lf-w-tpl__name {
  font-size: var(--lf-t-sm);
  font-weight: 600;
  color: var(--lf-fg);
}

.lf-w-tpl__fam {
  font-size: var(--lf-t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lf-faint);
}

/*
 * Il richiamo che compare sopra all'anteprima. È `aria-hidden`: il testo del
 * collegamento lo dice già per intero, e farlo annunciare due volte a chi usa
 * uno screen reader sarebbe solo rumore.
 */
.lf-w-tpl__cta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem;
  font-size: var(--lf-t-xs);
  font-weight: 600;
  color: hsl(222 47% 11%);
  background: hsl(210 20% 97% / 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(101%);
  transition: transform 0.4s var(--lf-ease);
}

.lf-w-tpl__cta svg {
  width: 0.85rem;
  height: 0.85rem;
}

@media (hover: hover) {
  .lf-w-tpl:hover .lf-w-tpl__cta {
    transform: none;
  }
}

.lf-w-tpl:focus-visible .lf-w-tpl__cta {
  transform: none;
}

/* ==========================================================================
   9. L'AI al lavoro
   --------------------------------------------------------------------------
   Un riquadro che somiglia a una console: sopra quello che scrivi, sotto
   quello che il sistema fa. Non è un terminale vero e non finge di esserlo —
   serve a far vedere che fra la frase e il sito c'è un lavoro, e quale.
   ========================================================================== */
.lf-w-ai {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.lf-w-term {
  border-radius: var(--lf-r-xl);
  overflow: hidden;
  background: hsl(224 24% 6%);
  border: 1px solid var(--lf-line);
  box-shadow: var(--lf-sh-float);
}

.lf-w-term__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--lf-line-soft);
  background: hsl(224 20% 8%);
  font-size: var(--lf-t-2xs);
  font-weight: 600;
  letter-spacing: var(--lf-track-wide);
  text-transform: uppercase;
  color: var(--lf-faint);
}

.lf-w-term__body {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--lf-font-mono);
  font-size: var(--lf-t-sm);
  line-height: 1.7;
}

.lf-w-term__you {
  color: var(--lf-fg);
}

.lf-w-term__you::before {
  content: "> ";
  color: var(--lf-azure);
}

.lf-w-term__rule {
  height: 1px;
  margin: 1.1rem 0;
  border: 0;
  background: var(--lf-line);
}

.lf-w-term__lines {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lf-w-term__lines li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lf-fg-dim);
}

.lf--js .lf-w-term__lines li {
  opacity: 0.25;
  transform: translateX(-6px);
  transition:
    opacity 0.5s var(--lf-ease),
    transform 0.5s var(--lf-ease);
}

.lf--js .lf-w-term__lines li.is-on {
  opacity: 1;
  transform: none;
}

.lf-w-term__lines svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--lf-success);
}

/* L'anello che gira mentre sta lavorando. Si spegne quando la riga si accende. */
.lf-w-spin {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: var(--lf-r-full);
  border: 2px solid hsl(205 100% 58% / 0.25);
  border-top-color: var(--lf-azure);
  animation: lf-w-spin 0.9s linear infinite;
}

@keyframes lf-w-spin {
  to {
    transform: rotate(360deg);
  }
}

.lf .lf-w-term__done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lf-line);
  font-family: var(--lf-font);
  font-size: var(--lf-t-sm);
  color: var(--lf-fg);
}

.lf-w-term__time {
  font-family: var(--lf-font-mono);
  color: var(--lf-muted);
  font-variant-numeric: tabular-nums;
}

/* La colonna a fianco: cosa scrive l'AI e cosa non scrive. È la parte che
   costruisce fiducia, e per questo sta accanto alla console e non in fondo. */
.lf-w-does {
  display: grid;
  gap: 0.75rem;
}

.lf-w-does__box {
  padding: 1.15rem 1.25rem;
  border-radius: var(--lf-r-lg);
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
}

.lf-w-does__box h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--lf-t-sm);
  font-weight: 600;
  color: var(--lf-fg);
  margin-bottom: 0.6rem;
}

.lf-w-does__box svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.lf-w-does__box--yes svg {
  color: var(--lf-success);
}

.lf-w-does__box--no svg {
  color: var(--lf-warning);
}

.lf-w-does__box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lf-w-does__box li {
  padding: 0.28rem 0.6rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-xs);
  color: var(--lf-fg-dim);
  background: hsl(210 40% 98% / 0.045);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
}

/* ==========================================================================
   10. L'editor
   --------------------------------------------------------------------------
   Un mockup grande, e dentro il pannello dell'editor com'è davvero: elenco
   delle sezioni a sinistra, tela a destra, punteggio del sito appoggiato in
   un angolo.
   ========================================================================== */
.lf-w-editor {
  position: relative;
}

.lf-w-editor__win .lf-w-win__screen {
  aspect-ratio: 16 / 10;
  background: hsl(224 24% 5%);
}

/*
 * Il telefono appoggiato all'angolo del mockup grande.
 *
 * Il selettore è discendente, e non la sola classe, per una ragione precisa:
 * questo elemento porta anche `.lf-w-phone`, che più sotto dichiara
 * `position: relative`. A parità di specificità vince chi è scritto dopo — e
 * `.lf-w-phone` è scritto dopo. Con la sola classe qui, il telefono smetteva
 * di essere assoluto e cadeva sotto al mockup, allineato a sinistra.
 */
.lf-w-editor .lf-w-editor__phone {
  position: absolute;
  z-index: 4;
  right: -1rem;
  bottom: -2.5rem;
  width: clamp(7.5rem, 15%, 10.5rem);
}

.lf-w-ed {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 33% 1fr;
  font-size: clamp(0.5rem, 1.15cqw, 0.78rem);
  color: var(--lf-fg);
  background: hsl(224 24% 5%);
  user-select: none;
}

.lf-w-ed__side {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1.1em;
  border-right: 1px solid var(--lf-line);
  background: hsl(224 20% 7%);
  overflow: hidden;
}

.lf-w-ed__label {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lf-faint);
}

.lf-w-ed__list {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.lf-w-ed__row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.7em;
  border-radius: 0.6em;
  background: hsl(210 40% 98% / 0.04);
  border: 1px solid transparent;
  color: var(--lf-fg-dim);
  white-space: nowrap;
}

.lf-w-ed__row.is-sel {
  background: hsl(205 100% 58% / 0.12);
  border-color: hsl(205 100% 58% / 0.3);
  color: var(--lf-fg);
}

/* La maniglia per trascinare: sei punti, come nell'editor vero. */
.lf-w-ed__grip {
  width: 0.55em;
  height: 0.85em;
  flex: none;
  opacity: 0.45;
  background-image: radial-gradient(currentColor 42%, transparent 44%);
  background-size: 0.28em 0.28em;
}

.lf-w-ed__main {
  position: relative;
  overflow: hidden;
  background: hsl(224 24% 4%);
  display: flex;
  flex-direction: column;
}

.lf-w-ed__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.8em 1.1em;
  border-bottom: 1px solid var(--lf-line);
}

.lf-w-ed__tabs {
  display: flex;
  gap: 0.3em;
}

.lf-w-ed__tab {
  padding: 0.35em 0.75em;
  border-radius: 0.5em;
  color: var(--lf-muted);
  background: hsl(210 40% 98% / 0.04);
  white-space: nowrap;
}

.lf-w-ed__tab.is-on {
  color: hsl(222 47% 11%);
  background: hsl(210 20% 96%);
  font-weight: 600;
}

.lf-w-ed__save {
  padding: 0.4em 0.9em;
  border-radius: 0.5em;
  font-weight: 600;
  white-space: nowrap;
  color: hsl(222 47% 11%);
  background: hsl(210 20% 97%);
}

/* La tela: dentro ci sta l'anteprima del sito, quella del componente vero. */
.lf-w-ed__canvas {
  flex: 1;
  min-height: 0;
  padding: 1em;
  display: flex;
}

.lf-w-ed__paper {
  flex: 1;
  min-width: 0;
  border-radius: 0.7em;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.8);
  container-type: inline-size;
}

/* Il riquadro del punteggio, appoggiato in basso a destra sulla tela. */
.lf-w-ed__score {
  position: absolute;
  right: 1em;
  bottom: 1em;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.85em;
  border-radius: 0.7em;
  background: hsl(224 24% 6% / 0.9);
  border: 1px solid var(--lf-line-bright);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lf-w-ed__ring {
  --v: 86;
  width: 2.2em;
  height: 2.2em;
  flex: none;
  border-radius: var(--lf-r-full);
  display: grid;
  place-items: center;
  font-size: 0.78em;
  font-weight: 700;
  background: conic-gradient(var(--lf-success) calc(var(--v) * 1%), hsl(210 40% 98% / 0.1) 0);
}

.lf-w-ed__ring span {
  display: grid;
  place-items: center;
  width: 76%;
  height: 76%;
  border-radius: inherit;
  background: hsl(224 24% 6%);
}

.lf-w-ed__score b {
  display: block;
  font-size: 0.9em;
  white-space: nowrap;
}

.lf-w-ed__score em {
  display: block;
  font-style: normal;
  font-size: 0.8em;
  color: var(--lf-muted);
  white-space: nowrap;
}

/* Le cose che si modificano, elencate sotto al mockup. */
.lf .lf-w-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.25rem;
}

.lf-w-chips li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-sm);
  color: var(--lf-fg-dim);
  background: hsl(210 40% 98% / 0.045);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
}

.lf-w-chips svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--lf-muted);
}

/* ==========================================================================
   11. Telefoni
   --------------------------------------------------------------------------
   Tre schermi affiancati, quello centrale un gradino più avanti. La cornice
   è la stessa di components.css (.lf-phone), ridisegnata qui solo nella
   misura: dentro ci va l'anteprima del sito, non l'interfaccia del gestionale.
   ========================================================================== */
.lf-w-phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
}

.lf-w-phone {
  position: relative;
  flex: 0 1 15rem;
  border-radius: 2.2rem;
  padding: 0.4rem;
  background: linear-gradient(155deg, hsl(220 10% 40%), hsl(220 14% 10%) 46%, hsl(220 10% 26%));
  box-shadow: var(--lf-sh-device);
}

/* Quello centrale si alza e cresce: dà profondità alla fila senza bisogno
   di prospettiva vera. */
.lf-w-phone--lead {
  flex-basis: 17rem;
  z-index: 2;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.lf-w-phone__screen {
  position: relative;
  border-radius: 1.9rem;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #fff;
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.9);
}

.lf-w-phone__island {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1.1rem;
  border-radius: var(--lf-r-full);
  background: #000;
  z-index: 6;
}

/*
 * Dentro al telefono il testo si misura più grande.
 *
 * `cqw` è una frazione della larghezza del contenitore, e il contenitore qui è
 * largo 227px contro i 570 della finestra dell'hero: con lo stesso 2.55cqw il
 * corpo del testo scendeva a 5,8px e il titolo a 14px, cioè una macchia. Ma la
 * proporzione giusta non è nemmeno "la stessa dell'hero": uno schermo di
 * telefono vero è largo 390px e il suo titolo di apertura sta sui 34px, che a
 * questa scala fanno una ventina. Il numero qui sotto è quello.
 */
.lf-w-phone .lf-w-site {
  font-size: 4.6cqw;
  --s-pad: 7cqw;
}

/* Sotto l'isola, come su un telefono vero: senza questo spazio il nome del
   locale ci passava dietro, e "Pasta & Mare" si leggeva "Pasta & Ma". */
.lf-w-phone .lf-w-site__bar {
  padding-top: 11cqw;
}

/* La fascia a tre colonne su 9/19.5 non ci sta, e a schiacciarla si
   otterrebbe una riga di francobolli: ne resta una sola. */
.lf-w-phone .lf-w-site__strip {
  grid-template-columns: 1fr;
}

.lf-w-phone .lf-w-site__cell:nth-child(n + 2) {
  display: none;
}

.lf-w-phone .lf-w-site__title {
  font-size: 2.4em;
}

.lf-w-phone .lf-w-site__links {
  display: none;
}

/* ==========================================================================
   12. Ecosistema
   --------------------------------------------------------------------------
   Il sito al centro, e attorno i moduli che può accendere. La linea che li
   unisce è un solo SVG dietro alla griglia: si disegna da sé quando la
   sezione arriva a schermo.
   ========================================================================== */
.lf-w-eco {
  position: relative;
}

.lf-w-eco__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.lf-w-eco__node {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--lf-r-lg);
  background: var(--lf-glass);
  border: 1px solid var(--lf-line-soft);
  backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  -webkit-backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
}

/* Il nodo di partenza: è il sito, ed è l'unico che si ha di sicuro. */
.lf-w-eco__node--start {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  border-color: hsl(205 100% 58% / 0.28);
  background: hsl(205 100% 58% / 0.07);
}

.lf-w-eco__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--lf-r-md);
  background: hsl(210 40% 98% / 0.06);
  color: hsl(205 100% 78%);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
}

.lf-w-eco__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.lf-w-eco__node b {
  font-size: var(--lf-t-sm);
  font-weight: 600;
  color: var(--lf-fg);
}

.lf-w-eco__node span {
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
  line-height: 1.5;
}

.lf-w-eco__node--start b {
  font-size: var(--lf-t-h4);
}

/* ==========================================================================
   13. Gratis
   --------------------------------------------------------------------------
   Tre numeri enormi e tre parole. È la sezione che deve reggersi da sola:
   chi scorre veloce si ferma qui o non si ferma affatto.
   ========================================================================== */
.lf-w-free {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}

.lf-w-free__cell {
  padding: clamp(2rem, 4vw, 3.25rem) 1rem;
  border-radius: var(--lf-r-2xl);
  background: var(--lf-glass);
  border: 1px solid var(--lf-line-soft);
  backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  -webkit-backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
}

.lf-w-free__n {
  display: block;
  font-family: var(--lf-font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--lf-track-mega);
  font-variant-numeric: tabular-nums;
}

.lf-w-free__l {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
}

/* ==========================================================================
   14. Indirizzo del sito
   --------------------------------------------------------------------------
   Due indirizzi affiancati: quello gratuito e quello tuo. Non è un listino a
   due colonne — il secondo è un di più, e si vede da com'è scritto.
   ========================================================================== */
.lf-w-dom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.lf-w-dom__card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--lf-r-2xl);
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
}

.lf-w-dom__card--free {
  border-color: hsl(205 100% 58% / 0.26);
  background: linear-gradient(180deg, hsl(205 100% 58% / 0.08), transparent 60%), var(--lf-surface);
}

.lf-w-dom__tag {
  align-self: flex-start;
}

/* L'indirizzo scritto grande: è il contenuto, non una decorazione. */
.lf-w-dom__url {
  font-family: var(--lf-font-mono);
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--lf-fg);
  overflow-wrap: anywhere;
}

.lf-w-dom__url b {
  font-weight: 500;
  color: hsl(205 100% 80%);
}

.lf-w-dom__p {
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
  line-height: 1.6;
}

.lf .lf-w-dom__price {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-fg-dim);
}

.lf-w-dom__price b {
  color: var(--lf-fg);
  font-weight: 650;
}

/* ==========================================================================
   15. Domande
   --------------------------------------------------------------------------
   L'accordion è quello di components.css. Qui si aggiunge solo la cornice e
   l'impaginazione a due colonne, con il titolo che resta accanto mentre si
   scorrono le risposte.
   ========================================================================== */
.lf-w-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.lf-w-faq__aside {
  position: sticky;
  top: clamp(5.5rem, 12vh, 7.5rem);
}

.lf-w-faq__aside .lf__lead {
  margin-top: 1.25rem;
  font-size: var(--lf-t-body);
}

.lf-w-faq__list {
  border-top: 1px solid var(--lf-line);
}

/*
 * Senza JavaScript le risposte restano aperte.
 *
 * L'accordion di components.css tiene i pannelli a `grid-template-rows: 0fr` e
 * i paragrafi a `opacity: 0` finché non è JavaScript ad aprirli. Sulla landing
 * è una scelta accettabile; qui no. Questa pagina sostituisce un documento che
 * usava <details> proprio perché le risposte dovevano essere leggibili a script
 * spento — e a leggerla così non sono solo i browser vecchi: sono i motori di
 * risposta, che il JavaScript spesso non lo eseguono affatto.
 *
 * Il testo nel DOM ci sarebbe comunque, quindi per un crawler non cambia
 * niente. Cambia per una persona: senza queste due righe vedrebbe undici
 * domande e nessuna risposta.
 */
.lf:not(.lf--js) .lf-acc__panel {
  grid-template-rows: 1fr;
}

.lf:not(.lf--js) .lf-acc__panel p {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   16. Chiusura
   ========================================================================== */
.lf-w-final {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
}

.lf-w-final__glow {
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(70rem, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, hsl(205 100% 58% / 0.18), transparent 72%);
  filter: blur(30px);
}

.lf-w-final__inner {
  position: relative;
  z-index: 2;
}

.lf-w-final h2 {
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  letter-spacing: var(--lf-track-mega);
  line-height: 0.98;
}

.lf-w-final .lf__lead {
  margin: 1.5rem auto 0;
  max-width: 34rem;
}

.lf-w-final__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.lf .lf-w-final__re {
  margin-top: 1.5rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-faint);
}

/* ==========================================================================
   17. Piede
   ========================================================================== */
.lf-w-foot {
  position: relative;
  z-index: var(--lf-z-content);
  border-top: 1px solid var(--lf-line-soft);
  padding: 2.5rem 0;
  color: var(--lf-faint);
  font-size: var(--lf-t-xs);
}

.lf-w-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}

.lf-w-foot a {
  color: var(--lf-fg-dim);
}

.lf-w-foot a:hover {
  color: var(--lf-fg);
  text-decoration: underline;
}

/* ==========================================================================
   18. Briciole
   ========================================================================== */
.lf-w-crumbs {
  position: relative;
  z-index: var(--lf-z-content);
  font-size: var(--lf-t-xs);
  color: var(--lf-faint);
  padding-top: clamp(5.5rem, 11vh, 7rem);
}

.lf-w-crumbs a {
  color: var(--lf-fg-dim);
}

.lf-w-crumbs a:hover {
  color: var(--lf-fg);
  text-decoration: underline;
}

/* ==========================================================================
   19. Schermi stretti
   --------------------------------------------------------------------------
   Non è il desktop rimpicciolito: tre impianti cambiano forma, non misura.

   · L'hero passa da due colonne a due righe — prima si legge, poi si vede.
   · I cinque passaggi perdono la colonna appiccicata e diventano cinque
     blocchi, ciascuno con la sua schermata sotto: su un telefono una colonna
     ferma accanto a una che scorre non ha dove stare.
   · L'editor perde il telefono appoggiato all'angolo, che a quella misura
     coprirebbe metà della tela che deve mostrare.
   ========================================================================== */

@media (max-width: 64em) {
  .lf-w-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  /* Le card che galleggiano rientrano dentro i bordi: fuori, a questa
     larghezza, uscirebbero dallo schermo. */
  .lf-w-float--ai { left: 0; }
  .lf-w-float--mobile { left: 0; }
  .lf-w-float--time { right: 0; }
  .lf-w-float--seo { right: 0; }

  .lf-w-ai {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-w-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-w-faq__aside {
    position: static;
  }

  .lf-w-tpls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lf-w-editor__phone {
    display: none;
  }
}

@media (max-width: 48em) {
  .lf-w-sec {
    padding-block: clamp(3.5rem, 11vw, 5rem);
  }

  .lf-w-head {
    margin-bottom: 2.25rem;
  }

  /* --- I cinque passaggi, in colonna ----------------------------------
   *
   * La schermata passa sopra all'elenco e ci resta attaccata mentre i cinque
   * passi le scorrono sotto: è lo stesso racconto del desktop, girato di
   * novanta gradi. L'alternativa — cinque schermate impilate una sotto
   * l'altra — sarebbe alta quanto tre schermi di telefono e nessuno
   * arriverebbe al quinto passaggio.
   *
   * `order: -1` e non un secondo blocco nell'HTML: il documento resta uno
   * solo, e chi lo legge senza fogli di stile trova i passaggi prima delle
   * loro illustrazioni, che è l'ordine giusto.
   */
  .lf-w-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .lf-w-steps__stage {
    order: -1;
    top: 4.75rem;
    /* Sotto il quinto passaggio la colonna finisce: senza questo margine la
       schermata resterebbe appiccicata dentro il vuoto sotto all'elenco. */
    margin-bottom: 0.5rem;
  }

  .lf-w-step {
    padding: 0.9rem 1rem;
  }

  .lf-w-morph {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La freccia gira: fra due riquadri impilati il verso della lettura è
     dall'alto in basso. */
  .lf-w-morph__arrow svg {
    transform: rotate(90deg);
  }

  .lf-w-free {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .lf-w-free__cell {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: left;
  }

  .lf-w-free__l {
    margin-top: 0;
  }

  .lf-w-dom {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-w-eco__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-w-eco__node--start {
    grid-column: span 1;
  }

  .lf-w-tpls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Sul telefono l'hover non esiste, e il richiamo del modello va risolto
   * diversamente.
   *
   * Renderlo statico non funziona: vive dentro `.lf-w-tpl__frame`, che ha una
   * proporzione fissa e `overflow: hidden` — tolto dal posizionamento assoluto
   * finisce fuori dal riquadro e sparisce. Mostrarlo sempre, invece, gli
   * farebbe coprire un quarto di un'anteprima che a due colonne è già piccola.
   *
   * Al dito basta una freccia in fondo alla card: la scheda intera è un
   * collegamento, e quel segno dice che porta da qualche parte senza rubare
   * spazio all'unica cosa che il modello deve far vedere, cioè sé stesso.
   */
  .lf-w-tpl__foot::after {
    content: '›';
    color: var(--lf-muted);
    font-size: 1.1rem;
    line-height: 1;
  }

  .lf-w-rail__item {
    flex-basis: 82vw;
  }

  /* La fila dei telefoni scorre di lato invece di schiacciare tre schermi
     dentro 375px. */
  .lf-w-phones {
    margin-inline: calc(var(--lf-gutter) * -1);
    padding-inline: var(--lf-gutter);
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .lf-w-phones::-webkit-scrollbar {
    display: none;
  }

  .lf-w-phone {
    flex: 0 0 12rem;
    scroll-snap-align: center;
  }

  .lf-w-phone--lead {
    flex-basis: 13rem;
    margin-bottom: 0;
  }
}

@media (max-width: 30em) {
  .lf-w-tpls {
    gap: 0.6rem;
  }

  .lf-w-hero__checks {
    gap: 0.35rem 1rem;
  }

  /* Le card che galleggiano sono quattro: a questa misura due bastano, e le
     altre due si toglierebbero comunque il posto a vicenda. */
  .lf-w-float--mobile,
  .lf-w-float--seo {
    display: none;
  }

  .lf-w-foot nav {
    gap: 0.25rem 1.25rem;
  }

  /* Al dito servono 44px di riga: stessa regola del piede della landing. */
  .lf-w-foot nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* ==========================================================================
   20. Movimento ridotto
   --------------------------------------------------------------------------
   base.css già azzera transizioni e animazioni. Qui si spengono le due cose
   che continuerebbero a muoversi da sole — il galleggio delle card e
   l'anello che gira — e si riportano a riposo le trasformazioni scritte da
   JS, che altrimenti resterebbero congelate a metà strada.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lf-w-float,
  .lf-w-float__bar i,
  .lf-w-spin,
  .lf-w-caret {
    animation: none !important;
  }

  .lf-w-hero__win {
    transform: none !important;
  }

  .lf-w-rail__item {
    --r-scale: 1;
    --r-op: 1;
  }

  .lf-w-rail {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   21. Schermate dei cinque passaggi
   --------------------------------------------------------------------------
   Cinque riquadri che mostrano il prodotto in cinque momenti. Sono
   volutamente poveri di dettagli: devono far riconoscere il passaggio in un
   secondo, non riprodurre l'interfaccia riga per riga — quella si vede
   grande nella sezione dell'editor.

   La misura segue la larghezza del contenitore (`cqw`), non quella della
   finestra: la stessa schermata compare larga 600px sul portatile e 340px
   sul telefono, e deve rimpicciolire in proporzione.
   ========================================================================== */
.lf-w-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.6em;
  font-size: clamp(0.55rem, 2.1cqw, 0.9rem);
  background: hsl(224 24% 5%);
  color: var(--lf-fg);
  user-select: none;
  overflow: hidden;
}

.lf-w-ui__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex: none;
}

.lf-w-ui__title {
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lf-w-ui__step {
  font-family: var(--lf-font-mono);
  font-size: 0.85em;
  color: var(--lf-faint);
}

/* Il riquadro di testo in cui si racconta l'attività. */
.lf-w-ui__field {
  flex: 1;
  min-height: 0;
  padding: 1em 1.1em;
  border-radius: 0.7em;
  background: hsl(224 20% 8%);
  border: 1px solid hsl(205 100% 58% / 0.35);
  box-shadow: 0 0 0 3px hsl(205 100% 58% / 0.1);
  color: var(--lf-fg-dim);
  line-height: 1.6;
}

.lf-w-ui__field--plain {
  border-color: var(--lf-line);
  box-shadow: none;
}

.lf-w-ui__btn {
  align-self: flex-start;
  flex: none;
  padding: 0.6em 1.2em;
  border-radius: 0.6em;
  font-weight: 600;
  color: hsl(222 47% 11%);
  background: hsl(210 20% 97%);
}

/* Elenco di righe con la spunta: la generazione, e il controllo finale. */
.lf-w-ui__rows {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  flex: 1;
  min-height: 0;
}

.lf-w-ui__row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 0.9em;
  border-radius: 0.6em;
  background: hsl(210 40% 98% / 0.04);
  border: 1px solid var(--lf-line-soft);
  color: var(--lf-fg-dim);
}

.lf-w-ui__row svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  color: var(--lf-success);
}

.lf-w-ui__row em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--lf-font-mono);
  font-size: 0.85em;
  color: var(--lf-faint);
}

.lf-w-ui__row--warn {
  border-color: hsl(38 88% 56% / 0.3);
  background: hsl(38 88% 56% / 0.07);
}

.lf-w-ui__row--warn svg {
  color: var(--lf-warning);
}

/* La barra di avanzamento della generazione. */
.lf-w-ui__prog {
  height: 0.4em;
  border-radius: var(--lf-r-full);
  background: hsl(210 40% 98% / 0.1);
  overflow: hidden;
  flex: none;
}

.lf-w-ui__prog i {
  display: block;
  height: 100%;
  width: 72%;
  border-radius: inherit;
  background: var(--lf-grad-brand);
}

/* Il punteggio grande del quarto passaggio. */
.lf-w-ui__score {
  display: flex;
  align-items: center;
  gap: 1em;
  flex: none;
}

.lf-w-ui__ring {
  --v: 86;
  width: 3.6em;
  height: 3.6em;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--lf-r-full);
  font-weight: 700;
  background: conic-gradient(var(--lf-success) calc(var(--v) * 1%), hsl(210 40% 98% / 0.1) 0);
}

.lf-w-ui__ring span {
  display: grid;
  place-items: center;
  width: 76%;
  height: 76%;
  border-radius: inherit;
  background: hsl(224 24% 5%);
}

/* Il quinto passaggio: l'indirizzo che risponde. */
.lf-w-ui__live {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.1em;
  border-radius: 0.7em;
  flex: none;
  background: hsl(152 50% 44% / 0.1);
  border: 1px solid hsl(152 50% 44% / 0.3);
  font-family: var(--lf-font-mono);
  font-size: 0.95em;
  color: var(--lf-fg);
  overflow-wrap: anywhere;
}

.lf-w-ui__paper {
  flex: 1;
  min-height: 0;
  border-radius: 0.7em;
  overflow: hidden;
  container-type: inline-size;
}

/* --- Anteprima ridotta -------------------------------------------------
 * Dentro un riquadro 4/3 largo un quarto di griglia, la fascia a tre colonne
 * diventa una riga di francobolli illeggibili. Nelle miniature dei modelli
 * resta quello che distingue un modello dall'altro: colore, carattere,
 * impaginazione del titolo.
 */
.lf-w-site--mini .lf-w-site__strip,
.lf-w-site--mini .lf-w-site__links {
  display: none;
}

.lf-w-site--mini .lf-w-site__sub {
  display: none;
}

.lf-w-site--mini .lf-w-site__title {
  font-size: 2.6em;
}

.lf-w-site--mini.lf-w-site--type .lf-w-site__title {
  font-size: 3.2em;
}

.lf-w-site--mini .lf-w-site__hero {
  gap: 0.45em;
}

/* ==========================================================================
   22. Le eccezioni di questa pagina a responsive.css
   --------------------------------------------------------------------------
   Il foglio condiviso è caricato prima, e quello che segue lo corregge in tre
   punti in cui la landing e questa pagina vogliono cose diverse.
   ========================================================================== */

@media (max-width: 48em) {
  /*
   * Nella barra resta "Crea gratis", non "Accedi".
   *
   * Sulla landing la scelta opposta ha una ragione buona: chi apre il sito da
   * telefono è più spesso un cliente che deve rientrare nel proprio gestionale
   * che non un curioso. Qui la ragione si rovescia — chi arriva su
   * /crea-sito-web-gratis da telefono non ha un account da cui rientrare, e
   * l'unica cosa che deve poter fare con un dito è cominciare. "Accedi" resta
   * nel menu, a un tocco di distanza.
   */
  .lf__nav-actions .lf-btn--primary {
    display: inline-flex;
    /*
     * È alto da dito, non da mouse.
     *
     * responsive.css questa altezza la dà al pulsante che lascia in barra
     * sulla landing ("Accedi"). Qui il pulsante è un altro, e i 36px di
     * `.lf-btn--sm` restavano: il bersaglio più importante della pagina era
     * anche il più difficile da centrare.
     */
    height: 2.75rem;
    padding-inline: 1.1rem;
  }

  .lf__nav-actions .lf-btn--ghost {
    display: none;
  }

  /* Le briciole sono alte 16px: sotto il minimo di 24 che WCAG chiede a un
     bersaglio. Il testo resta piccolo, la riga no. */
  .lf-w-crumbs a,
  .lf-w-crumbs span {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
  }
}

@media (max-width: 26.25em) {
  /* I pulsanti a tutta larghezza, impilati: la stessa regola che
     responsive.css dà a `.lf-hero__cta`, per le classi di questa pagina. */
  .lf-w-hero__cta,
  .lf-w-final__cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lf-w-hero__cta .lf-btn,
  .lf-w-final__cta .lf-btn {
    width: 100%;
  }
}

/*
 * Dove `backdrop-filter` non esiste, il vetro sarebbe un pannello trasparente
 * con del testo sopra del testo. Stessa cura di responsive.css, estesa alle
 * superfici di questa pagina.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lf-w-morph__pane,
  .lf-w-eco__node,
  .lf-w-free__cell,
  .lf-w-float,
  .lf-w-step.is-active {
    background: hsl(224 20% 9%);
  }

  .lf-w-stamp {
    background: hsl(224 24% 5%);
  }

  .lf-w-tpl__cta {
    background: hsl(210 20% 97%);
  }

  .lf-w-ed__score {
    background: hsl(224 24% 6%);
  }
}