/* ==========================================================================
   LyamFlow — /partner
   --------------------------------------------------------------------------
   Il foglio della pagina che vende LyamFlow Partner alle agenzie.

   COSA NON C'È QUI DENTRO
   Nessun colore, nessun raggio, nessuna ombra, nessuna curva: arrivano tutti
   da tokens.css. Nessun bottone, badge, accordion o barra di navigazione:
   sono quelli di components.css. E nessuna delle messe in scena che questa
   pagina condivide con /crea-sito-web-gratis — la finestra del browser
   (`lf-w-win`), l'anteprima di un sito (`lf-w-site`), le fasce (`lf-w-sec`),
   il finale, il piede — che stanno in websites.css e da qui si riusano.

   Caricare due fogli invece di uno e' deliberato: duplicare quelle
   composizioni vorrebbe dire due copie da tenere allineate per sempre, e la
   prima volta che una delle due cambia le pagine diventano due prodotti
   diversi. Quello che c'e' qui e' solo cio' che questa pagina ha e l'altra no.

   L'ACCENTO E' IL VIOLA CHE IL PRODOTTO HA GIA'
   `--lf-violet` sta nei token dal primo giorno, ed e' — a un grado di tinta —
   lo stesso `--partner-accent` della dashboard. Non e' una coincidenza da
   correggere: chi arriva da questa pagina e apre l'area riservata deve
   riconoscere lo stesso prodotto, e il colore e' la prima cosa che lo dice.

   LE DUE REGOLE DI SEMPRE
   1. Nessuna classe qui dentro nasconde contenuto. Gli stati "prima
      dell'animazione" stanno in base.css sotto `.lf--js`, che mette
      JavaScript: a script spento si vede tutto.
   2. Si anima solo `transform`, `opacity` e `filter`. Niente tocca il layout.
   ========================================================================== */

html {
  background: var(--lf-bg);
  color-scheme: dark;
}

/* ==========================================================================
   1. L'accento di pagina
   ========================================================================== */

.lf-p {
  --p: var(--lf-violet);
  --p-soft: hsl(265 88% 62% / 0.12);
  --p-line: hsl(265 88% 62% / 0.32);
}

/* ==========================================================================
   2. Il cruscotto finto dell'hero
   --------------------------------------------------------------------------
   Non uno screenshot: HTML e CSS. Pesa meno, resta nitido su qualunque
   schermo e — soprattutto — mostra i numeri veri del prodotto (7 su 10 posti,
   CHF 9 al mese di dominio) invece di una fotografia che invecchia da sola.
   E' decorativo: il testo accanto dice tutto, quindi e' `aria-hidden`.
   ========================================================================== */

.lf-p-app {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  min-height: 20rem;
  background: hsl(224 22% 7%);
  font-size: 0.72rem;
}

.lf-p-app__side {
  border-right: 1px solid var(--lf-line);
  padding: 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: hsl(224 20% 8% / 0.6);
}

.lf-p-app__brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  letter-spacing: var(--lf-track-tight);
  margin-bottom: 0.35rem;
}

.lf-p-app__mark {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.42rem;
  background: var(--p);
  flex: none;
}

.lf-p-app__cta {
  border-radius: var(--lf-r-md);
  background: var(--p);
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 0.55rem;
  text-align: center;
  box-shadow: 0 6px 18px -8px hsl(265 88% 62% / 0.9);
}

.lf-p-app__nav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  color: var(--lf-muted);
}

.lf-p-app__nav span {
  padding: 0.3rem 0.45rem;
  border-radius: var(--lf-r-sm);
}

.lf-p-app__nav span[data-on] {
  background: hsl(210 40% 98% / 0.07);
  color: var(--lf-fg);
}

/* Il contatore dei posti: la cosa che un'agenzia guarda per prima. */
.lf-p-app__meter {
  margin-top: auto;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
  padding: 0.5rem;
  background: hsl(224 22% 6% / 0.7);
}

.lf-p-app__meter b {
  display: block;
  font-size: 0.9rem;
  letter-spacing: var(--lf-track-tight);
}

.lf-p-app__meter i {
  display: block;
  font-style: normal;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-muted);
  margin-bottom: 0.25rem;
}

.lf-p-app__bar {
  margin-top: 0.4rem;
  height: 0.28rem;
  border-radius: var(--lf-r-full);
  background: hsl(210 40% 98% / 0.1);
  overflow: hidden;
}

/*
 * La barra si riempie quando la finestra entra in scena. `--fill` la scrive
 * JavaScript; senza JavaScript resta al valore finale, che e' la cosa giusta
 * da mostrare a chi non vede l'animazione.
 */
.lf-p-app__bar i {
  display: block;
  height: 100%;
  width: var(--fill, 70%);
  border-radius: inherit;
  background: var(--p);
  transition: width 1.1s var(--lf-ease);
}

.lf--js .lf-p-app__bar i {
  width: 0;
}

.lf-p-app__main {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lf-p-app__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.lf-p-app__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: var(--lf-track-tight);
}

.lf-p-app__pill {
  border-radius: var(--lf-r-full);
  padding: 0.12rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  background: hsl(152 50% 44% / 0.14);
  color: hsl(152 60% 62%);
}

.lf-p-app__rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lf-p-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
  padding: 0.45rem 0.55rem;
  background: hsl(224 20% 9% / 0.8);
}

.lf-p-row__thumb {
  width: 2.1rem;
  height: 1.5rem;
  border-radius: 0.3rem;
  flex: none;
  background: var(--t, hsl(224 15% 20%));
  position: relative;
  overflow: hidden;
}

.lf-p-row__thumb::after {
  content: '';
  position: absolute;
  left: 0.22rem;
  right: 0.9rem;
  bottom: 0.28rem;
  height: 0.16rem;
  border-radius: var(--lf-r-full);
  background: var(--ta, hsl(0 0% 100% / 0.55));
}

.lf-p-row__txt {
  min-width: 0;
  flex: 1;
}

.lf-p-row__txt b {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-p-row__txt span {
  color: var(--lf-muted);
  font-size: 0.62rem;
}

.lf-p-row__stat {
  font-size: 0.6rem;
  color: hsl(152 60% 62%);
  flex: none;
}

.lf-p-row__stat[data-draft] {
  color: var(--lf-muted);
}

/* ==========================================================================
   3. Le quattro schede del prezzo
   --------------------------------------------------------------------------
   Erano due fino al 07/09/2026, e la differenza non e' solo una colonna in
   piu': con quattro schede il numero non puo' piu' essere gigante, o «CHF 300
   all'anno» esce dalla sua colonna. Il prezzo resta la cosa piu' grande della
   scheda — e' quello che si viene a leggere — ma smette di gridare.

   `auto-fit` fa il resto da solo: quattro colonne sul desktop, due sul tablet,
   una sul telefono, senza una sola media query.
   ========================================================================== */

.lf-p-prices {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  margin-top: 2.2rem;
}

.lf-p-price {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-2xl);
  padding: 1.5rem 1.3rem;
  background: var(--lf-glass);
  backdrop-filter: blur(var(--lf-glass-blur));
  overflow: hidden;
  transition:
    transform var(--lf-dur) var(--lf-ease),
    border-color var(--lf-dur) var(--lf-ease);
}

.lf-p-price:hover {
  transform: translateY(-3px);
  border-color: var(--lf-line-bright);
}

.lf-p-price--best {
  border-color: var(--p-line);
  background: linear-gradient(160deg, hsl(265 88% 62% / 0.08), transparent 60%), var(--lf-glass);
}

/* L'alone del pacchetto consigliato: una sola scheda ce l'ha, o non e' piu'
   un'evidenza. */
.lf-p-price--best::before {
  content: '';
  position: absolute;
  inset: -40% 40% 60% -40%;
  background: radial-gradient(circle, hsl(265 88% 62% / 0.22), transparent 70%);
  pointer-events: none;
}

.lf-p-price__tag {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: var(--lf-t-2xs);
  font-weight: 600;
  color: var(--p);
  background: var(--p-soft);
  border-radius: var(--lf-r-full);
  padding: 0.2rem 0.6rem;
}

.lf-p-price__kind {
  position: relative;
  font-size: var(--lf-t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-muted);
}

.lf-p-price__n {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  margin-top: 0.7rem;
  font-family: var(--lf-font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: var(--lf-track-mega);
  line-height: 1;
}

/* «all'anno» va a capo da solo quando la colonna si stringe, invece di
   spingere il prezzo fuori dalla scheda. */
.lf-p-price__n small {
  font-size: var(--lf-t-sm);
  font-weight: 500;
  color: var(--lf-muted);
  letter-spacing: var(--lf-track-normal);
}

.lf-p-price__eur {
  position: relative;
  margin-top: 0.45rem;
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
}

.lf-p-price__list {
  position: relative;
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Le schede di una riga hanno testi di lunghezza diversa: l'elenco si prende
   lo spazio che avanza, cosi' i bordi bassi restano allineati. */
.lf-p-price__list:last-child {
  margin-bottom: auto;
}

.lf-p-price__list li {
  display: flex;
  gap: 0.55rem;
  font-size: var(--lf-t-xs);
  color: var(--lf-fg-dim);
  line-height: 1.5;
}

.lf-p-price__list svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--p);
}

/* ==========================================================================
   4. Il conto, con le due manopole
   --------------------------------------------------------------------------
   Nessun numero di questa sezione e' una promessa: quello che paghi a noi lo
   decide il listino (CHF 9, o CHF 50 ogni dieci), quello che incassi lo scrivi
   tu con il secondo cursore. Il margine e' una sottrazione fra i due — non una
   stima, non una media di mercato, non un caso di successo.
   ========================================================================== */

.lf-p-calc {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-2xl);
  padding: 1.6rem;
  background: var(--lf-glass);
  backdrop-filter: blur(var(--lf-glass-blur));
}

.lf-p-calc__knobs {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.lf-p-knob__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.lf-p-knob__label {
  font-size: var(--lf-t-sm);
  font-weight: 600;
}

.lf-p-knob__hint {
  font-size: var(--lf-t-xs);
  color: var(--lf-muted);
}

.lf-p-knob__val {
  font-family: var(--lf-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--lf-track-tight);
  font-variant-numeric: tabular-nums;
}

/*
 * Il cursore. Si veste a mano perche' quello di sistema, su fondo scuro, e'
 * un rettangolo grigio: non e' un vezzo, e' leggibilita'. Resta un
 * `<input type="range">` vero, quindi tastiera e lettori di schermo
 * funzionano senza una riga di JavaScript.
 */
.lf-p-knob input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.35rem;
  border-radius: var(--lf-r-full);
  background: linear-gradient(
    to right,
    var(--p) 0%,
    var(--p) var(--pos, 50%),
    hsl(210 40% 98% / 0.12) var(--pos, 50%),
    hsl(210 40% 98% / 0.12) 100%
  );
  outline: none;
}

.lf-p-knob input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--lf-r-full);
  background: #fff;
  border: 3px solid var(--p);
  cursor: grab;
  box-shadow: 0 4px 14px -4px hsl(265 88% 62% / 0.9);
  transition: transform var(--lf-dur-fast) var(--lf-ease);
}

.lf-p-knob input[type='range']::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--lf-r-full);
  background: #fff;
  border: 3px solid var(--p);
  cursor: grab;
}

.lf-p-knob input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.lf-p-knob input[type='range']:focus-visible {
  box-shadow: var(--lf-ring);
}

.lf-p-calc__out {
  border: 1px solid var(--p-line);
  border-radius: var(--lf-r-xl);
  padding: 1.2rem;
  background: linear-gradient(160deg, hsl(265 88% 62% / 0.1), transparent 70%);
}

.lf-p-calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
  border-bottom: 1px solid var(--lf-line);
}

.lf-p-calc__row b {
  color: var(--lf-fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.lf-p-calc__row--tot {
  border-bottom: 0;
  padding-top: 0.9rem;
  align-items: center;
}

.lf-p-calc__row--tot b {
  font-family: var(--lf-font-display);
  font-size: 1.75rem;
  letter-spacing: var(--lf-track-tight);
  font-weight: 700;
  color: var(--p);
}

.lf-p-calc__note {
  margin-top: 0.9rem;
  font-size: var(--lf-t-xs);
  line-height: 1.55;
  color: var(--lf-muted);
}

/* ==========================================================================
   5. I cinque passi
   --------------------------------------------------------------------------
   Non la colonna appiccicata di /crea-sito-web-gratis: li' i passaggi hanno
   una schermata per uno e vanno guardati, qui sono cinque frasi e la
   schermata e' sempre la stessa. Una griglia numerata, e la linea che le
   unisce da desktop.
   ========================================================================== */

.lf-p-flow {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2.2rem;
  counter-reset: p;
}

.lf-p-flow li {
  position: relative;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-xl);
  padding: 1.2rem;
  background: hsl(224 20% 8% / 0.55);
  transition:
    border-color var(--lf-dur) var(--lf-ease),
    transform var(--lf-dur) var(--lf-ease);
}

.lf-p-flow li:hover {
  border-color: var(--p-line);
  transform: translateY(-3px);
}

.lf-p-flow li::before {
  counter-increment: p;
  content: '0' counter(p);
  display: block;
  font-family: var(--lf-font-mono);
  font-size: var(--lf-t-xs);
  color: var(--p);
  margin-bottom: 0.7rem;
}

.lf-p-flow b {
  display: block;
  font-size: var(--lf-t-body);
  margin-bottom: 0.35rem;
}

.lf-p-flow span {
  font-size: var(--lf-t-sm);
  color: var(--lf-muted);
  line-height: 1.55;
}

/* ==========================================================================
   6. La griglia di cio' che c'e' dentro
   ========================================================================== */

.lf-p-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.2rem;
}

.lf-p-card {
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-xl);
  padding: 1.4rem;
  background: hsl(224 20% 8% / 0.55);
  transition:
    border-color var(--lf-dur) var(--lf-ease),
    background var(--lf-dur) var(--lf-ease);
}

.lf-p-card:hover {
  border-color: var(--p-line);
  background: hsl(224 20% 10% / 0.7);
}

.lf-p-card__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--lf-r-md);
  background: var(--p-soft);
  color: var(--p);
  margin-bottom: 0.9rem;
}

.lf-p-card__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.lf-p-card b {
  display: block;
  font-size: var(--lf-t-body);
  margin-bottom: 0.35rem;
}

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

/* ==========================================================================
   7. (via) La striscia dei modelli
   --------------------------------------------------------------------------
   Qui c'erano `.lf-p-models` e `.lf-p-model`, e non servivano: la scheda di un
   modello esiste gia' in websites.css (`lf-w-tpl`), con la cornice quadrata,
   l'invito che compare al passaggio del puntatore e il piede col nome e la
   famiglia. Riscriverla voleva dire due componenti da tenere allineati, e la
   prima differenza si e' vista subito — la mia cornice tagliava i titoli di due
   righe, la sua no perche' i titoli li tiene corti.

   Vale la regola del cappello: qui dentro solo cio' che questa pagina ha e
   /crea-sito-web-gratis no.
   ========================================================================== */

/* ==========================================================================
   8. Il dominio, e dove sta il margine
   ========================================================================== */

.lf-p-dom {
  margin-top: 2.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.lf-p-dom__box {
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-xl);
  padding: 1.3rem;
  background: hsl(224 20% 8% / 0.55);
}

.lf-p-dom__box--you {
  border-color: var(--p-line);
  background: linear-gradient(160deg, hsl(265 88% 62% / 0.09), transparent 65%);
}

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

.lf-p-dom__v {
  font-family: var(--lf-font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: var(--lf-track-tight);
  margin: 0.5rem 0 0.4rem;
}

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

/* ==========================================================================
   9. Il modulo che apre l'account
   --------------------------------------------------------------------------
   Chiude la pagina, ed e' la stessa schermata che stava dentro l'applicazione
   su /partner. Due campi e un pulsante: piu' di cosi' sarebbe chiedere un
   impegno prima di aver dato qualcosa, e meno non basterebbe a portarsi dietro
   il nome dell'agenzia.
   ========================================================================== */

.lf-p-join {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem auto 0;
  max-width: 44rem;
  text-align: left;
}

.lf-p-join__field {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lf-p-join__field span {
  font-size: var(--lf-t-xs);
  font-weight: 600;
  color: var(--lf-muted);
}

.lf-p-join__field input {
  width: 100%;
  height: 3.25rem;
  border-radius: var(--lf-r-lg);
  border: 1px solid var(--lf-line-soft);
  background: hsl(224 22% 6% / 0.75);
  color: var(--lf-fg);
  font: inherit;
  font-size: var(--lf-t-body);
  padding: 0 1rem;
  transition:
    border-color var(--lf-dur-fast) var(--lf-ease),
    background var(--lf-dur-fast) var(--lf-ease);
}

.lf-p-join__field input::placeholder {
  color: hsl(218 11% 62% / 0.6);
}

.lf-p-join__field input:hover {
  border-color: var(--lf-line-bright);
}

.lf-p-join__field input:focus-visible {
  outline: none;
  border-color: var(--p);
  background: hsl(224 22% 7%);
  box-shadow: 0 0 0 4px hsl(265 88% 62% / 0.18);
}

/*
 * La valuta: due radio veri, vestiti da interruttore. Radio e non un `select`
 * perche' le opzioni sono due e si scelgono con un dito solo; veri e non finti
 * perche' cosi' la tastiera e i lettori di schermo funzionano gratis.
 */
.lf-p-join__cur {
  border: 0;
  padding: 0;
  margin: 0;
}

.lf-p-join__cur legend {
  font-size: var(--lf-t-xs);
  font-weight: 600;
  color: var(--lf-muted);
  padding: 0;
  margin-bottom: 0.45rem;
}

/*
 * Le due opzioni stanno in un contenitore loro, e non direttamente nel
 * `fieldset`: un `legend` dentro un fieldset reso `display: flex` si posiziona
 * in modo diverso da un browser all'altro, e il risultato — visto qui il
 * 07/09/2026 — era CHF sopra ed EUR sotto invece che affiancati.
 */
.lf-p-join__pair {
  display: flex;
}

.lf-p-join__pair label {
  display: inline-flex;
}

.lf-p-join__cur input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.lf-p-join__cur span {
  display: grid;
  place-items: center;
  height: 3.25rem;
  min-width: 4.4rem;
  border-radius: var(--lf-r-lg);
  border: 1px solid var(--lf-line-soft);
  background: hsl(224 22% 6% / 0.75);
  font-size: var(--lf-t-sm);
  font-weight: 600;
  color: var(--lf-muted);
  cursor: pointer;
  transition:
    border-color var(--lf-dur-fast) var(--lf-ease),
    color var(--lf-dur-fast) var(--lf-ease),
    background var(--lf-dur-fast) var(--lf-ease);
}

.lf-p-join__pair label:first-of-type span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.lf-p-join__pair label:last-of-type span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.lf-p-join__cur input:checked + span {
  border-color: var(--p-line);
  background: var(--p-soft);
  color: var(--lf-fg);
}

.lf-p-join__cur input:focus-visible + span {
  box-shadow: var(--lf-ring);
}

.lf-p-join button[type='submit'] {
  flex: 0 0 auto;
  height: 3.25rem;
}

/* ==========================================================================
   10. Schermi stretti
   ========================================================================== */

@media (max-width: 900px) {
  .lf-p-calc {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  /*
   * Il cruscotto perde la colonna: a 320 pixel una sidebar da 8.5rem lascia
   * al contenuto meno spazio di quanto ne serva a leggere una riga. Il
   * contatore dei posti — la cosa che conta — passa sopra, in orizzontale.
   */
  .lf-p-app {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lf-p-app__side {
    border-right: 0;
    border-bottom: 1px solid var(--lf-line);
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
  }

  .lf-p-app__nav,
  .lf-p-app__cta {
    display: none;
  }

  .lf-p-app__meter {
    margin: 0 0 0 auto;
    min-width: 8.5rem;
  }
}

/* ==========================================================================
   11. Chi ha chiesto meno movimento
   --------------------------------------------------------------------------
   Le transizioni globali le spegne base.css. Qui resta da annullare l'unica
   cosa che parte da sola: la barra dei posti, che senza questa riga
   resterebbe a zero — cioe' direbbe una cosa falsa.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lf--js .lf-p-app__bar i {
    width: var(--fill, 70%);
    transition: none;
  }
}