/* ===========================================================================
   ManutIA — sito pubblico
   ---------------------------------------------------------------------------
   Un foglio solo, senza passo di build. È la stessa scelta del prodotto —
   `frontend/css/app.css` — e per la stessa ragione: aggiungere Node a un
   progetto che dipende da Flask e basta va fatto il giorno in cui quel passo
   serve anche ad altro.

   I colori sono quelli del prodotto, non una seconda tavolozza. I nomi delle
   variabili ricalcano `--md-*` dell'applicazione: due elenchi che devono
   restare uguali sono un elenco di troppo, e quando divergono lo si vede
   passando dal sito all'accesso.

   Prefisso `s-` su tutto. Il sito e l'applicazione non condividono una pagina,
   ma condividono un'immagine del marchio e prima o poi un pezzo di CSS
   viaggerà da una parte all'altra: un prefisso costa due caratteri e toglie
   una collisione.

   Mobile-first: le regole base valgono da 360px, i punti di rottura
   aggiungono.
   =========================================================================== */

:root {
  /* --- marca: gli stessi valori di frontend/css/app.css --- */
  --s-indigo: #5A4FCF;
  --s-indigo-scuro: #463CA8;
  --s-indigo-chiaro: #8B80F0;
  --s-indigo-tenue: #EEECFB;
  --s-acqua: #00A896;
  --s-acqua-chiara: #5FE3D0;
  --s-acqua-tenue: #E0F5F2;
  /* Il verde acqua del marchio su fondo chiaro arriva a 2,98 contro il
     bianco: sotto la soglia per il testo, e anche per un segno che vuol dire
     qualcosa. Questo e' lo stesso colore portato dove si legge — 4,92 contro
     bianco, 4,63 contro il grigio delle sezioni — e si usa **solo** per il
     testo e per i segni. Le superfici piene restano `--s-acqua`: li' il
     contrasto lo fa il fondo, non il colore. */
  --s-acqua-testo: #007F70;
  --s-navy: #061B38;
  --s-navy-2: #0C2B54;

  /* --- neutri --- */
  --s-bg: #FFFFFF;
  --s-bg-alt: #F7F8FA;
  --s-bordo: #E4E5EA;
  --s-bordo-forte: #D2D4DB;
  --s-testo: #12141C;
  --s-testo-morbido: #4E5261;
  /* 4,94 contro bianco e 4,64 contro il grigio delle sezioni. Il valore
     precedente (#7B8090) si fermava a 3,71, e tutto il testo minuto del
     sito — aiuti dei campi, briciole, didascalie — ci passa da qui. */
  --s-testo-tenue: #6B7080;

  /* --- stati, per le schede attività ---

     I fondi tenui sono quelli del prodotto. I colori del testo no: sopra un
     fondo tenue, i valori dell'applicazione arrivano a 4,44 (aperta), 4,42
     (completata) e 3,19 (in corso), cioè sotto la soglia per un testo di
     dodici pixel. Qui sono gli stessi colori portati un gradino più in
     basso, dove si leggono: 5,75 · 5,81 · 5,08.

     È una differenza dichiarata, non una divergenza: la pastiglia del sito e
     quella dell'applicazione dicono la stessa cosa e si somigliano, ma questa
     la legge chi arriva da una ricerca su un telefono al sole. */
  --s-aperta: #1D4ED8;
  --s-aperta-tenue: #E6EEFE;
  --s-corso: #985705;
  --s-corso-tenue: #FDF1DC;
  --s-fatta: #146B34;
  --s-fatta-tenue: #E3F5E9;
  --s-urgente: #C81E1E;
  --s-urgente-tenue: #FDECEC;

  /* --- forma --- */
  --s-r-sm: 8px;
  --s-r: 14px;
  --s-r-lg: 20px;
  --s-ombra: 0 1px 2px rgba(6, 27, 56, .05), 0 2px 6px rgba(6, 27, 56, .04);
  --s-ombra-alta: 0 12px 32px rgba(6, 27, 56, .10),
                  0 2px 8px rgba(6, 27, 56, .06);

  /* --- misure --- */
  --s-larghezza: 1160px;
  --s-stretto: 760px;
  --s-barra: 64px;
  --s-tocco: 44px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barra è fissa: senza questo, un'ancora finisce sotto la barra. */
  scroll-padding-top: calc(var(--s-barra) + 16px);
}

body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-testo);
  font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.021em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Il contorno del fuoco non si toglie: è l'unico modo che ha chi naviga da
   tastiera per sapere dove si trova. Si rende visibile ovunque, anche sui
   fondi scuri. */
:focus-visible {
  outline: 3px solid var(--s-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}
.s-scuro :focus-visible { outline-color: var(--s-acqua-chiara); }

/* Il lettore video nativo mette i propri comandi in uno shadow DOM e il
   contorno di `:focus-visible` non arriva fin la': chi lo raggiunge con Tab
   vedrebbe il fuoco sparire per un elemento. Il contorno si disegna
   sull'elemento, che e' quello che riceve il fuoco. */
video:focus-visible { outline: 3px solid var(--s-indigo); outline-offset: 3px; }
.s-scuro video:focus-visible { outline-color: var(--s-acqua-chiara); }

/* Il salto al contenuto: invisibile finché non lo si raggiunge da tastiera. */
.s-salta {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--s-navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--s-r-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.s-salta:focus { top: 12px; }

/* ------------------------------------------------------------ tipografia */
.s-h1 {
  font-size: clamp(2.1rem, 6.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.032em;
}
.s-h2 {
  font-size: clamp(1.55rem, 3.9vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.028em;
}
.s-h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.015em; }
.s-h4 { font-size: 1rem; line-height: 1.4; font-weight: 650; }

.s-occhiello {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-indigo);
}
.s-scuro .s-occhiello { color: var(--s-acqua-chiara); }

.s-guida {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.55;
  color: var(--s-testo-morbido);
}
.s-scuro .s-guida { color: rgba(255, 255, 255, .78); }

.s-p { color: var(--s-testo-morbido); }
.s-piccolo { font-size: .875rem; color: var(--s-testo-tenue); }

.s-acqua { color: var(--s-acqua-testo); }
.s-scuro .s-acqua { color: var(--s-acqua-chiara); }

/* -------------------------------------------------------------- struttura */
.s-contenitore {
  width: 100%;
  max-width: var(--s-larghezza);
  margin: 0 auto;
  padding: 0 20px;
}

.s-sezione { padding: 54px 0; }
.s-sezione--alt { background: var(--s-bg-alt); }
.s-sezione--stretta { padding: 48px 0; }

.s-scuro {
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(90, 79, 207, .55), transparent 62%),
    radial-gradient(700px 380px at 8% 108%, rgba(0, 168, 150, .30), transparent 60%),
    var(--s-navy);
  color: #fff;
}
.s-scuro .s-p { color: rgba(255, 255, 255, .74); }
.s-scuro .s-piccolo { color: rgba(255, 255, 255, .58); }

.s-testa { max-width: 760px; margin-bottom: 30px; }
.s-testa--centro { margin-left: auto; margin-right: auto; text-align: center; }
.s-testa .s-h2 { margin-top: 10px; }
.s-testa .s-guida { margin-top: 14px; }

@media (min-width: 900px) {
  .s-sezione { padding: 84px 0; }
  .s-sezione--stretta { padding: 64px 0; }
  .s-testa { margin-bottom: 44px; }
}

/* ---------------------------------------------------------------- griglie */
.s-griglia { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .s-griglia--2, .s-griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .s-griglia { gap: 20px; }
  .s-griglia--3 { grid-template-columns: repeat(3, 1fr); }
  .s-griglia--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------- pulsanti */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--s-tocco);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .975rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.s-btn:hover { transform: translateY(-1px); }
.s-btn:active { transform: translateY(0); }

.s-btn--primario {
  background: var(--s-indigo);
  color: #fff;
  box-shadow: 0 6px 18px rgba(90, 79, 207, .28);
}
.s-btn--primario:hover { background: var(--s-indigo-scuro); }

.s-btn--fantasma {
  background: transparent;
  color: var(--s-testo);
  border-color: var(--s-bordo-forte);
}
.s-btn--fantasma:hover { border-color: var(--s-indigo); color: var(--s-indigo); }

.s-scuro .s-btn--fantasma {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.s-scuro .s-btn--fantasma:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.s-btn--pieno { width: 100%; }

.s-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Il collegamento che si legge come un collegamento e non come un pulsante. */
/* `s-link` non è un collegamento dentro una frase: è un'azione scritta come
   un collegamento, e chi la usa da telefono la colpisce con il dito. Il
   riempimento verticale la porta all'altezza di un bersaglio vero senza
   trasformarla in un pulsante. */
.s-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-tocco);
  gap: 6px;
  color: var(--s-indigo);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.s-link:hover { border-bottom-color: currentColor; }
.s-link::after { content: "→"; transition: transform .15s ease; }
.s-link:hover::after { transform: translateX(3px); }
.s-scuro .s-link { color: var(--s-acqua-chiara); }

/* ------------------------------------------------------------------ barra */
.s-barra {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.s-barra.is-staccata {
  border-bottom-color: var(--s-bordo);
  box-shadow: 0 2px 14px rgba(6, 27, 56, .05);
}

.s-barra-riga {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--s-barra);
}

.s-marchio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--s-testo);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.03em;
  flex: 0 0 auto;
}
.s-marchio svg { width: 30px; height: 30px; color: var(--s-indigo); }
/* Il marchio è un collegamento, e su un telefono un collegamento è una cosa
   che si colpisce con un dito. Il segno resta di 30 px: cresce l'area, non il
   disegno. */
.s-marchio { min-height: var(--s-tocco); }

.s-nav { display: none; }

.s-barra-fine {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-barra-fine .s-btn { padding: 9px 18px; min-height: 40px; font-size: .925rem; }
.s-accedi { display: none; }

.s-burger {
  margin-left: auto;
  width: var(--s-tocco);
  height: var(--s-tocco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-sm);
  cursor: pointer;
}
.s-burger span {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--s-testo);
  border-radius: 2px;
  transition: background-color .12s ease;
}
.s-burger span::before,
.s-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--s-testo);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease;
}
.s-burger span::before { top: -6px; }
.s-burger span::after { top: 6px; }
.s-burger[aria-expanded="true"] span { background: transparent; }
.s-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.s-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Il pannello del telefono. Non è una finestra modale sopra la pagina: è un
   pannello sotto la barra, che scorre. Una modale a tutto schermo su un menu
   di cinque voci è una cerimonia. */
.s-pannello {
  display: none;
  border-top: 1px solid var(--s-bordo);
  background: #fff;
  max-height: calc(100dvh - var(--s-barra));
  overflow-y: auto;
  padding: 12px 0 22px;
}
.s-pannello.is-aperto { display: block; }
.s-pannello a {
  display: block;
  padding: 13px 4px;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--s-bordo);
}
.s-pannello a small {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--s-testo-tenue);
}
.s-pannello-figlie a { padding-left: 16px; }
/* I due pulsanti in fondo al pannello sono `<a>`, e poco sopra `.s-pannello a`
   li ha resi `display: block` per farne righe di menu. Quella regola vince su
   `.s-btn` — stessa origine, un elemento in piu' nel selettore — e con il
   blocco se ne va anche il `justify-content` che teneva il testo in mezzo: il
   testo tornava a sinistra dentro una pillola larga tutta la riga, e si vedeva
   solo sul telefono, che e' l'unico posto dove questo pannello esiste. */
.s-pannello .s-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 18px;
}
.s-pannello .s-btn + .s-btn { margin-top: 10px; }

@media (min-width: 1000px) {
  .s-burger { display: none; }
  .s-pannello { display: none !important; }
  .s-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
  .s-accedi { display: inline-flex; }
}

.s-nav-voce { position: relative; }
.s-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border-radius: var(--s-r-sm);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 550;
  color: var(--s-testo-morbido);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.s-nav-link:hover { color: var(--s-testo); background: var(--s-bg-alt); }
.s-nav-link[aria-current="page"] { color: var(--s-indigo); }
.s-nav-link .s-freccia {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}
.s-nav-voce.is-aperto .s-freccia { transform: rotate(-135deg) translate(-2px, -2px); }

.s-sottomenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  box-shadow: var(--s-ombra-alta);
  display: none;
}
.s-nav-voce.is-aperto .s-sottomenu { display: block; }

/* Gli otto pixel fra il pulsante e il pannello sono un respiro voluto, ma
   erano anche un buco: il pannello e' in posizione assoluta, quindi quella
   fascia non appartiene ne' al pulsante ne' al menu, e il puntatore che
   scendeva verso le voci ci passava in mezzo. Da li' scattava `mouseleave`
   sul gruppo, e il menu si chiudeva un istante prima di poter essere usato.
   E' il difetto piu' comune delle tendine, e si vede solo provando a
   raggiungerle.
   Questo ponte invisibile copre il vuoto: il respiro resta, il buco no. */
.s-sottomenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.s-sottomenu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--s-r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.s-sottomenu a:hover { background: var(--s-bg-alt); }
.s-sottomenu small {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--s-testo-tenue);
}

/* ------------------------------------------------------------------- hero */
.s-hero { padding: 56px 0 64px; }
.s-hero .s-h1 { margin-top: 16px; }
.s-hero .s-guida { margin-top: 20px; max-width: 620px; }
.s-hero-nota { margin-top: 18px; font-size: .875rem; }

.s-hero-griglia { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) {
  .s-hero { padding: 84px 0 96px; }
  .s-hero-griglia { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; }
}

/* La riga sotto il titolo: due frasi separate da un tratto verticale, che sul
   telefono diventano due righe. Serve a far leggere «WhatsApp entra» e
   «ManutIA organizza» come due cose, non come una frase sola. */
.s-hero-titolo span { display: block; }
.s-hero-titolo .s-hero-secondo { color: var(--s-acqua-chiara); }

/* -------------------------------------------------------- dimostrazione */
/* Il pezzo centrale del sito: il messaggio che diventa una scheda.
   È disegnato, non fotografato — una schermata di WhatsApp vera sarebbe una
   schermata di qualcun altro, con dentro dei numeri di telefono. */
.s-demo {
  display: grid;
  gap: 14px;
  align-items: start;
}
@media (min-width: 560px) {
  .s-demo { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 10px; }
}

.s-chat {
  background: #EDE5DD;
  border-radius: var(--s-r);
  padding: 14px 12px;
  border: 1px solid rgba(6, 27, 56, .10);
  box-shadow: var(--s-ombra);
}
.s-chat-testa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -14px -12px 12px;
  padding: 11px 14px;
  background: #075E54;
  color: #fff;
  border-radius: var(--s-r) var(--s-r) 0 0;
  font-size: .85rem;
  font-weight: 650;
}
.s-chat-punto {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem;
}
.s-msg {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 8px 11px 6px;
  margin-bottom: 8px;
  max-width: 92%;
  font-size: .875rem;
  line-height: 1.45;
  color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.s-msg:last-child { margin-bottom: 0; }
.s-msg-chi {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--s-acqua-testo);
  margin-bottom: 2px;
}
.s-msg-ora {
  display: block;
  text-align: right;
  font-size: .625rem;
  color: var(--s-testo-tenue);
  margin-top: 2px;
}
.s-msg.is-scelto {
  outline: 2px solid var(--s-indigo);
  outline-offset: 2px;
}

.s-freccia-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--s-indigo);
  font-size: 1.5rem;
  transform: rotate(90deg);
}
@media (min-width: 560px) {
  .s-freccia-demo { transform: none; align-self: center; }
}

/* La scheda che ne esce. Ricalca la scheda dell'applicazione: bordo sottile,
   angoli da 14, la fascia di stato a sinistra. */
.s-scheda {
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  box-shadow: var(--s-ombra);
  overflow: hidden;
}
.s-scheda-testa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--s-bordo);
  background: var(--s-bg-alt);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-testo-tenue);
}
.s-scheda-corpo { padding: 14px; }
.s-scheda-titolo {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--s-testo);
  margin-bottom: 12px;
}
.s-campi { display: grid; gap: 9px; }
.s-campo {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: .875rem;
}
.s-campo dt {
  color: var(--s-testo-tenue);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.s-campo dd { margin: 0; font-weight: 600; color: var(--s-testo); }

.s-pillola {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.s-pillola--aperta { background: var(--s-aperta-tenue); color: var(--s-aperta); }
/* «Da confermare»: non è uno stato del prodotto, è una proposta che aspetta
   una persona. Ha un colore suo apposta — confonderlo con «da fare» direbbe
   che il lavoro è già entrato, e non è vero. */
.s-pillola--rivedere { background: var(--s-corso-tenue); color: var(--s-corso); }
.s-pillola--corso { background: var(--s-corso-tenue); color: var(--s-corso); }
.s-pillola--fatta { background: var(--s-fatta-tenue); color: var(--s-fatta); }
.s-pillola--urgente { background: var(--s-urgente-tenue); color: var(--s-urgente); }
.s-pillola--alta { background: var(--s-corso-tenue); color: var(--s-corso); }
.s-pillola--normale { background: var(--s-indigo-tenue); color: var(--s-indigo-scuro); }
.s-pillola--bassa { background: #EEEFF2; color: #5A5F6E; }

/* La comparsa dei campi, uno dopo l'altro. Non è decorazione: è il modo in cui
   si vede che la scheda viene *costruita* dal messaggio. */
.s-anima .s-campo,
.s-anima .s-scheda-titolo { opacity: 0; transform: translateY(6px); }
.s-anima.is-visto .s-scheda-titolo,
.s-anima.is-visto .s-campo {
  animation: s-entra .42s ease forwards;
}
.s-anima.is-visto .s-scheda-titolo { animation-delay: .10s; }
.s-anima.is-visto .s-campo:nth-child(1) { animation-delay: .34s; }
.s-anima.is-visto .s-campo:nth-child(2) { animation-delay: .50s; }
.s-anima.is-visto .s-campo:nth-child(3) { animation-delay: .66s; }
.s-anima.is-visto .s-campo:nth-child(4) { animation-delay: .82s; }
.s-anima.is-visto .s-campo:nth-child(5) { animation-delay: .98s; }

@keyframes s-entra {
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- schede */
.s-card {
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  padding: 22px;
  box-shadow: var(--s-ombra);
}
.s-card .s-h3 { margin-bottom: 8px; }
.s-card p { color: var(--s-testo-morbido); font-size: .95rem; }

.s-card--link { text-decoration: none; display: block; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.s-card--link:hover {
  border-color: var(--s-indigo-chiaro);
  box-shadow: var(--s-ombra-alta);
  transform: translateY(-2px);
}

.s-scuro .s-card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: none;
}
.s-scuro .s-card p { color: rgba(255, 255, 255, .74); }

.s-card-ruolo {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--s-acqua-testo);
  margin-bottom: 10px;
}
.s-scuro .s-card-ruolo { color: var(--s-acqua-chiara); }

/* Icona quadrata, disegnata: nessuna immagine, nessun carattere iconografico
   da scaricare. */
.s-icona {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--s-indigo-tenue);
  color: var(--s-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.s-icona svg { width: 21px; height: 21px; }
.s-scuro .s-icona { background: rgba(139, 128, 240, .18); color: var(--s-indigo-chiaro); }

/* ------------------------------------------------------------- il flusso */
/* `list-style: none` non e' una rifinitura: senza, accanto al numero disegnato
   compare anche quello dell'elenco, e i passi si leggono «1. 1 Il messaggio
   arriva». La numerazione la fa il contatore, perche' deve stare dentro un
   cerchio.

   Resta un `<ol>` e non un `<ul>`: l'ordine e' l'informazione principale, e chi
   legge con la voce lo sente solo se il markup lo dice. */
.s-flusso { counter-reset: passo; display: grid; gap: 0; list-style: none; }
.s-passo {
  position: relative;
  counter-increment: passo;
  padding: 0 0 30px 52px;
}
.s-passo::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--s-indigo);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  font-weight: 700;
}
/* Il filo che unisce i passi. Sull'ultimo non c'è: un filo che finisce nel
   vuoto dice che manca qualcosa. */
.s-passo::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--s-indigo-chiaro), rgba(139, 128, 240, .18));
}
.s-passo:last-child { padding-bottom: 0; }
.s-passo:last-child::after { display: none; }
.s-passo .s-h3 { margin-bottom: 6px; }
.s-passo p { color: var(--s-testo-morbido); font-size: .95rem; }

.s-scuro .s-passo::before { background: var(--s-acqua); color: var(--s-navy); }
.s-scuro .s-passo::after {
  background: linear-gradient(var(--s-acqua-chiara), rgba(95, 227, 208, .16));
}
.s-scuro .s-passo p { color: rgba(255, 255, 255, .74); }

@media (min-width: 900px) {
  .s-flusso--due { grid-template-columns: repeat(2, 1fr); column-gap: 44px; }
  /* Su due colonne i passi si leggono per riga — 1 2 / 3 4 / 5 6 — e un filo
     verticale direbbe il contrario, cioe' che dopo l'1 viene il 3. A quel
     punto e' meglio nessun filo: a tenere l'ordine ci sono i numeri. */
  .s-flusso--due .s-passo::after { display: none; }
  .s-flusso--due .s-passo { padding-bottom: 26px; }
}

/* --------------------------------------------------------------- elenchi */
.s-elenco { list-style: none; display: grid; gap: 11px; }
.s-elenco li {
  position: relative;
  padding-left: 28px;
  color: var(--s-testo-morbido);
  font-size: .95rem;
}
.s-elenco li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .52em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--s-acqua-testo);
  border-bottom: 2px solid var(--s-acqua-testo);
  transform: rotate(-45deg);
}
.s-scuro .s-elenco li { color: rgba(255, 255, 255, .76); }
.s-scuro .s-elenco li::before { border-color: var(--s-acqua-chiara); }

/* Un elenco che non è un elenco di pregi: i trattini invece delle spunte. */
.s-elenco--neutro li::before {
  width: 12px; height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--s-testo-tenue);
  transform: none;
  top: .72em;
}

.s-tag {
  display: inline-block;
  padding: 5px 11px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  background: var(--s-bg-alt);
  border: 1px solid var(--s-bordo);
  font-size: .8125rem;
  color: var(--s-testo-morbido);
}

/* ------------------------------------------------------------- schermate */
.s-schermate { display: grid; gap: 18px; }
@media (min-width: 940px) {
  .s-schermate { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
}

.s-schede-elenco {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
@media (min-width: 940px) {
  .s-schede-elenco { flex-direction: column; overflow: visible; }
}
.s-scheda-btn {
  flex: 0 0 auto;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-sm);
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--s-testo-morbido);
  white-space: nowrap;
}
@media (min-width: 940px) {
  .s-scheda-btn { white-space: normal; }
}
.s-scheda-btn[aria-selected="true"] {
  border-color: var(--s-indigo);
  background: var(--s-indigo-tenue);
  color: var(--s-indigo-scuro);
}
.s-scheda-btn small {
  display: none;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--s-testo-tenue);
  margin-top: 3px;
}
@media (min-width: 940px) {
  .s-scheda-btn[aria-selected="true"] small { display: block; }
}
/* Il grigio del testo minuto sta a 4,24 sopra l'indaco tenue della scheda
   scelta: sotto la soglia. Sulla scheda scelta il testo scende di un tono e
   arriva a 6,7, e resta comunque piu' chiaro del titolo che gli sta sopra. */
.s-scheda-btn[aria-selected="true"] small { color: var(--s-testo-morbido); }

/* La cornice della schermata. Una barra di finestra disegnata, non un mockup
   di un portatile: l'immagine dentro è già il prodotto, e una scrivania di
   legno intorno non aggiunge niente. */
.s-cornice {
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--s-ombra-alta);
}
.s-cornice-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  background: var(--s-bg-alt);
  border-bottom: 1px solid var(--s-bordo);
}
.s-cornice-barra i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--s-bordo-forte);
  display: inline-block;
}
.s-cornice-indirizzo {
  margin-left: 8px;
  font-size: .75rem;
  color: var(--s-testo-tenue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.s-cornice img { width: 100%; display: block; background: var(--s-bg-alt); }
.s-cornice--telefono {
  max-width: 300px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 8px;
  background: var(--s-navy);
  border-color: var(--s-navy);
}
.s-cornice--telefono img { border-radius: 18px; }

.s-pannello-schermata[hidden] { display: none; }
.s-pannello-schermata .s-h3 { margin-bottom: 6px; }
.s-pannello-schermata p { color: var(--s-testo-morbido); font-size: .95rem; margin-bottom: 16px; }

/* ------------------------------------------------------------------ video */
.s-video {
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  overflow: hidden;
  box-shadow: var(--s-ombra-alta);
  background: var(--s-navy);
}
.s-video video { width: 100%; display: block; }
.s-video-didascalia {
  padding: 12px 16px;
  font-size: .8125rem;
  color: var(--s-testo-tenue);
  background: #fff;
  border-top: 1px solid var(--s-bordo);
}

/* --------------------------------------------------------------- prezzi */
/* Un prodotto, un prezzo, una scheda sola e centrata. Niente muro di colonne
   identiche e niente riepilogo contabile di fianco: la prima versione ne aveva
   uno, era corretto, e faceva sembrare la pagina un preventivo invece di
   un'offerta.

   L'hero e' corto e scuro, la scheda comincia dentro il buio e ne esce. E'
   l'unico effetto di composizione della pagina, e serve a una cosa sola: far
   cadere l'occhio sul numero invece che sul titolo. */
.s-hero--prezzo { padding-bottom: 112px; }
@media (min-width: 1000px) { .s-hero--prezzo { padding-bottom: 188px; } }

.s-prezzo-titolo { max-width: 18ch; }
.s-prezzo-guida { max-width: 56ch; }

.s-sezione--scheda { padding-top: 0; margin-top: -86px; }
@media (min-width: 1000px) { .s-sezione--scheda { margin-top: -158px; } }

.s-offerta-scheda {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: 28px 24px 26px;
  box-shadow: 0 0 0 4px rgba(90, 79, 207, .10), var(--s-ombra-alta);
}
@media (min-width: 700px) { .s-offerta-scheda { padding: 40px 44px 36px; } }

/* L'occhiello dentro la scheda sta su fondo chiaro: quello globale, che vive
   nell'hero scuro, qui non si leggerebbe. */
.s-occhiello--scheda { color: var(--s-indigo); }

.s-offerta-nome {
  margin: 10px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Il numero. E' il punto visivo dominante della pagina, e la sua misura non
   dipende da un livello di titolo: `h2` resta `h2` per chi legge con uno
   schermo, e a farlo grande ci pensa il CSS. */
.s-offerta-cifra {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 0;
}
.s-offerta-numero {
  font-size: clamp(4.25rem, 19vw, 6.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--s-testo);
}
.s-offerta-periodo {
  padding-top: .6em;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--s-testo-morbido);
  line-height: 1.35;
}
.s-offerta-periodo small {
  font-size: .875rem;
  font-weight: 600;
  color: var(--s-testo-tenue);
}

/* La cadenza di fatturazione, attaccata al numero e in corpo pieno. Un «al
   mese» che si paga una volta l'anno, con la cadenza scritta piccola da
   qualche altra parte, e' il modo educato di far credere che si possa disdire
   ogni trenta giorni. */
.s-offerta-fatturazione {
  display: inline-block;
  margin: 18px 0 0;
  padding: 10px 18px;
  background: var(--s-indigo-tenue);
  border-radius: 999px;
  color: var(--s-indigo-scuro);
  font-size: 1rem;
  font-weight: 700;
}
.s-offerta-garanzia {
  margin: 14px 0 0;
  font-size: .9375rem;
  font-weight: 650;
  color: var(--s-acqua-testo);
}

.s-offerta-avvio {
  display: grid;
  gap: 3px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--s-bordo);
}
.s-offerta-avvio strong {
  color: var(--s-testo-morbido);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.s-offerta-avvio-cifra {
  font-size: 1.3125rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--s-testo);
}

.s-offerta-incluso {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  margin: 22px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--s-testo);
}
.s-offerta-incluso::before {
  content: "";
  flex: none;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--s-acqua-testo);
  border-bottom: 2.5px solid var(--s-acqua-testo);
  transform: rotate(-45deg) translate(1px, -2px);
}

.s-offerta-azione { margin-top: 22px; }

/* ------------------------------------------------------ tutto compreso */
/* La sezione che nella prima versione c'era e non si vedeva. Adesso ha un
   titolo piu' grande di un titolo di sezione normale, aria intorno, e i sette
   gruppi in riquadri con un segno ciascuno: si distinguono di sguardo, prima
   ancora di leggerli.

   Tutto e' aperto. Nessun accordion, nessun «scopri di più», niente
   `display:none`: chi scorre deve poter dire «e' compreso tutto questo» senza
   toccare niente. */
.s-sezione--incluso { padding-top: 60px; }
@media (min-width: 1000px) { .s-sezione--incluso { padding-top: 92px; } }

.s-incluso-h2 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); }

/* Colonne e non una griglia. I sette gruppi hanno altezze molto diverse — due
   voci la pianificazione, sette il lavoro — e una griglia allunga ogni riquadro
   fino all'altezza del suo vicino piu' alto: «Pianificazione» diventava un
   riquadro mezzo vuoto, che in una sezione il cui titolo dice «e' incluso
   tutto» comunica esattamente il contrario. Le colonne impacchettano senza
   lasciare vuoti e si bilanciano da sole; `break-inside: avoid` impedisce che
   un gruppo si spezzi a meta' fra due colonne. */
.s-incluso > .s-incluso-gruppo { margin-bottom: 16px; break-inside: avoid; }
@media (min-width: 860px) {
  .s-incluso { columns: 2; column-gap: 20px; }
  .s-incluso > .s-incluso-gruppo { margin-bottom: 20px; }
}

.s-incluso-gruppo {
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: 22px 20px;
  box-shadow: var(--s-ombra);
}
@media (min-width: 700px) { .s-incluso-gruppo { padding: 28px 26px; } }

.s-incluso-titolo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--s-indigo-tenue);
  font-size: .875rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--s-indigo-scuro);
}
.s-segno { flex: none; color: var(--s-indigo); }

.s-incluso-voci { list-style: none; display: grid; gap: 14px; }
.s-incluso-voci li { position: relative; padding-left: 27px; }
.s-incluso-voci li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .4em;
  width: 13px; height: 7px;
  border-left: 2.2px solid var(--s-acqua-testo);
  border-bottom: 2.2px solid var(--s-acqua-testo);
  transform: rotate(-45deg);
}
.s-incluso-voci strong { display: block; font-weight: 650; font-size: .9375rem; }
.s-incluso-voci span {
  display: block;
  margin-top: 3px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--s-testo-morbido);
}

/* ------------------------------------------------------------- avvio */
.s-avvio { display: grid; gap: 26px; align-items: start; }
@media (min-width: 900px) {
  .s-avvio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
.s-avvio-testo .s-guida { margin-top: 14px; }
.s-avvio-nota { margin-top: 16px; }
.s-avvio-voci {
  background: #fff;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: 24px 22px;
  box-shadow: var(--s-ombra);
}
@media (min-width: 700px) { .s-avvio-voci { padding: 30px 28px; } }

/* ------------------------------------------------- un piano, e la garanzia */
.s-testa--sola { margin-bottom: 0; }

.s-garanzia { max-width: var(--s-stretto); margin: 0 auto; text-align: center; }
.s-garanzia-titolo { margin-top: 10px; }
.s-garanzia .s-guida { margin: 14px auto 0; }

/* --------------------------------------------------------- più strutture */
.s-gruppo {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 26px 24px;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  background: var(--s-bg-alt);
}
@media (min-width: 820px) {
  .s-gruppo { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; padding: 32px 34px; }
}
.s-gruppo .s-h2 { margin-top: 8px; font-size: 1.5rem; }
.s-gruppo .s-guida { margin-top: 12px; }
.s-gruppo .s-btn { justify-self: start; }

/* ------------------------------------------------------------------- faq */
.s-faq { max-width: var(--s-stretto); }
.s-faq details {
  border-bottom: 1px solid var(--s-bordo);
  padding: 4px 0;
}
.s-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font-weight: 650;
  font-size: 1.0625rem;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--s-testo-tenue);
  border-bottom: 2px solid var(--s-testo-tenue);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.s-faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.s-faq details p { padding: 0 8px 20px 0; color: var(--s-testo-morbido); }

/* ------------------------------------------------------------------ form */
.s-form { display: grid; gap: 18px; }
@media (min-width: 700px) {
  .s-form { grid-template-columns: repeat(2, 1fr); }
  .s-campo-largo { grid-column: 1 / -1; }
}

.s-etichetta {
  display: block;
  font-size: .875rem;
  font-weight: 650;
  margin-bottom: 6px;
}
.s-obbligo { color: var(--s-urgente); }

.s-input, .s-select, .s-area {
  width: 100%;
  min-height: var(--s-tocco);
  padding: 11px 13px;
  border: 1px solid var(--s-bordo-forte);
  border-radius: var(--s-r-sm);
  background: #fff;
  color: var(--s-testo);
  font-size: 1rem;
  font-family: inherit;
}
.s-area { min-height: 130px; resize: vertical; }
.s-input:focus, .s-select:focus, .s-area:focus {
  border-color: var(--s-indigo);
  outline: 2px solid var(--s-indigo-tenue);
  outline-offset: 0;
}
.s-input[aria-invalid="true"],
.s-select[aria-invalid="true"],
.s-area[aria-invalid="true"] { border-color: var(--s-urgente); }

.s-aiuto { margin-top: 6px; font-size: .8125rem; color: var(--s-testo-tenue); }
.s-errore { margin-top: 6px; font-size: .8125rem; color: var(--s-urgente); font-weight: 600; }
.s-errore:empty { display: none; }

.s-consenso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--s-testo-morbido);
}
.s-consenso input { margin-top: 2px; width: 22px; height: 22px; flex: 0 0 auto; }
/* La casella è piccola per costruzione, ma il bersaglio non è la casella: è
   l'etichetta, che la contiene ed è alta quanto due righe di testo. Perché
   valga davvero, l'etichetta ha un'area minima dichiarata. */
.s-consenso { min-height: var(--s-tocco); padding: 4px 0; }

/* Il campo trappola. Non `display:none`: alcuni robot lo notano. Fuori dalla
   pagina, senza tabulazione e invisibile a chi legge con la voce. */
.s-trappola {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.s-esito {
  padding: 18px 20px;
  border-radius: var(--s-r);
  border: 1px solid;
  margin-bottom: 20px;
}
.s-esito--ok {
  background: var(--s-fatta-tenue);
  border-color: rgba(21, 128, 61, .3);
  color: #0F5B2C;
}
.s-esito--ko {
  background: var(--s-urgente-tenue);
  border-color: rgba(200, 30, 30, .3);
  color: #8C1616;
}
.s-esito .s-h3 { margin-bottom: 4px; }

/* ------------------------------------------------------------- richiamo */
.s-richiamo {
  border-radius: var(--s-r-lg);
  padding: 44px 26px;
  text-align: center;
}
@media (min-width: 900px) { .s-richiamo { padding: 64px 48px; } }
.s-richiamo .s-guida { margin: 14px auto 0; max-width: 560px; }
.s-richiamo .s-azioni { justify-content: center; }

/* ---------------------------------------------------------------- briciole */
.s-briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .8125rem;
  color: var(--s-testo-tenue);
  margin-bottom: 4px;
  list-style: none;
}
.s-briciole li::after { content: "/"; margin-left: 6px; opacity: .5; }
.s-briciole li:last-child::after { content: ""; }
.s-briciole a { color: inherit; text-decoration: none; }
.s-briciole a:hover { text-decoration: underline; }
.s-scuro .s-briciole { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------------ piede */
.s-piede {
  background: var(--s-navy);
  color: rgba(255, 255, 255, .74);
  padding: 56px 0 28px;
  font-size: .925rem;
}
.s-piede-griglia { display: grid; gap: 32px; }
@media (min-width: 760px) {
  .s-piede-griglia { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 28px; }
}
.s-piede h3 {
  color: #fff;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.s-piede ul { list-style: none; display: grid; gap: 10px; }
.s-piede a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.s-piede a:hover { color: #fff; text-decoration: underline; }
.s-piede-marchio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.03em;
  text-decoration: none;
  margin-bottom: 14px;
}
.s-piede-marchio svg { width: 30px; height: 30px; color: var(--s-indigo-chiaro); }
/* Come quello in alto: e' un collegamento, e un collegamento su un
   telefono si colpisce con un dito. */
.s-piede-marchio { min-height: var(--s-tocco); }
.s-piede-chiusura { max-width: 340px; font-size: .875rem; }
/* I recapiti in fondo al piede: si leggono come il resto della riga, ma si
   toccano come un pulsante. `--s-tocco` e' la stessa misura che usa tutto il
   sito per i bersagli. */
.s-piede-contatto {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-tocco);
}

.s-piede-fondo {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------------ prosa */
/* Le pagine legali. Una colonna stretta, e nient'altro: sono fatte per essere
   lette, non per convincere. */
.s-prosa { max-width: var(--s-stretto); }
.s-prosa h2 {
  font-size: 1.3rem;
  margin: 40px 0 12px;
  letter-spacing: -.02em;
}
.s-prosa h3 { font-size: 1.0625rem; margin: 26px 0 8px; }
.s-prosa p { margin-bottom: 14px; color: var(--s-testo-morbido); }
.s-prosa ul { margin: 0 0 16px 20px; list-style: disc; }
.s-prosa li { margin-bottom: 8px; color: var(--s-testo-morbido); }
.s-prosa a { color: var(--s-indigo); }
.s-prosa dl { margin: 0 0 18px; }
.s-prosa dt { font-weight: 650; margin-top: 12px; }
.s-prosa dd { margin: 2px 0 0; color: var(--s-testo-morbido); }
/* Una tabella di tre colonne non entra in 375 px, e non c'è modo di farcela
   entrare senza renderla illeggibile. Scorre dentro il suo riquadro: è
   l'unica soluzione che non sacrifica né il contenuto né la pagina, ed è la
   stessa che usa l'applicazione per gli elenchi larghi.

   `display: block` sulla tabella e non un `div` intorno: così vale anche per
   le tabelle che verranno scritte domani, senza doversi ricordare di
   avvolgerle. */
.s-prosa table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: .925rem;
}

@media (min-width: 700px) {
  .s-prosa table { display: table; }
}
.s-prosa th, .s-prosa td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--s-bordo);
  vertical-align: top;
}
.s-prosa th { font-weight: 650; }

.s-scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------ apparizione */
/* La comparsa al primo passaggio. Un blocco che entra è più facile da leggere
   di sei blocchi già lì; oltre il primo passaggio non succede più niente,
   perché un sito che si muove ogni volta che si scorre è un sito stancante. */
.s-appari { opacity: 0; transform: translateY(14px); }
.s-appari.is-visto {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ------------------------------------------------------------- movimento */
/* Chi ha chiesto meno movimento lo ottiene per intero: niente comparse,
   niente scorrimento morbido, niente riproduzione automatica. Non è una
   riduzione, è un interruttore. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .s-appari, .s-anima .s-campo, .s-anima .s-scheda-titolo {
    opacity: 1 !important;
    transform: none !important;
  }
  .s-btn:hover, .s-card--link:hover { transform: none; }
}

/* Sul telefono le azioni di un blocco vanno larghe uguali. Due pulsanti che
   dicono cose ugualmente importanti ma sono larghi diversi si leggono come una
   scelta gia' fatta da qualcun altro, e l'incolonnamento irregolare del bordo
   destro e' la prima cosa che si nota scorrendo. */
@media (max-width: 560px) {
  .s-azioni { width: 100%; }
  .s-azioni .s-btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------- i tre passaggi */
/* Numerati, larghi, uno accanto all'altro da tablet in su. Tre passaggi in
   fila si leggono come un percorso; gli stessi tre incolonnati si leggono come
   un elenco di cose da fare.

   Si chiamano `tappa` e non `passo` perche' `.s-passo` esiste gia': e' il
   pezzo del flusso lungo, e porta un contatore in un `::before`. Riusare
   quel nome qui faceva comparire il numero due volte — una dal contatore e
   una dalla `span` — e si vedeva solo sul telefono, dove i due cerchi
   finivano affiancati. */
.s-tappe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
@media (min-width: 860px) {
  .s-tappe { grid-template-columns: repeat(3, 1fr); gap: 34px; }
}
.s-tappa { display: flex; gap: 16px; align-items: flex-start; }
.s-tappa-numero {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--s-indigo);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-tappa h3 { margin-bottom: 6px; }

/* ------------------------------------------------------- il video, largo */
/* Il video e' il pezzo che convince: prende la larghezza che merita e sta su
   fondo scuro, dove il riquadro chiaro del prodotto stacca. */
.s-sezione--video { padding-bottom: 72px; }
.s-video-largo {
  margin: 40px auto 0;
  max-width: 1000px;
}
.s-video-largo video {
  width: 100%;
  height: auto;
  border-radius: var(--s-r);
  box-shadow: var(--s-ombra-alta);
  background: #000;
}
/* La didascalia base ha un fondo bianco, perche' di norma sta sotto il video
   dentro una pagina chiara. Qui la sezione e' scura: se si cambia solo il
   colore del testo si ottiene bianco su bianco. Si toglie anche il fondo. */
.s-sezione--video .s-video-didascalia {
  background: transparent;
  border-top: 0;
  color: rgba(255, 255, 255, .78);
  text-align: center;
  margin-top: 10px;
  padding: 6px 8px 0;
}

/* ------------------------------------------------------------ i verticali */
/* Uno grande e due piccoli: la Home non punta a tre mercati con la stessa
   forza, punta a quello dove il prodotto aderisce meglio. */
.s-verticali { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .s-verticali { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}
.s-verticali-altri { display: grid; gap: 20px; }
.s-card--principale {
  background: linear-gradient(150deg, var(--s-indigo-tenue), var(--s-bg) 62%);
  border-color: var(--s-indigo-chiaro);
  justify-content: flex-start;
}
.s-card--principale .s-card-ruolo { color: var(--s-indigo); }

/* ------------------------------------------------- il consenso alla misura */
/* Compare solo quando una misurazione e' configurata: senza, il markup non
   viene nemmeno scritto. Non oscura la pagina e non blocca la lettura — un
   banner che copre il contenuto e' una tassa su chi legge, non una tutela —
   e i due pulsanti stanno tutti e due li', perche' un rifiuto nascosto sotto
   «preferenze» e' un rifiuto reso scomodo apposta. */
.s-consenso-banner {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--s-bg);
  border: 1px solid var(--s-bordo-forte);
  border-radius: var(--s-r);
  box-shadow: var(--s-ombra-alta);
  padding: 18px 20px;
}
.s-consenso-banner[hidden] { display: none; }

.s-consenso-banner-corpo {
  max-width: var(--s-larghezza);
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.s-consenso-titolo {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--s-testo);
}

.s-consenso-testo {
  margin: 0;
  max-width: 68ch;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--s-testo-morbido);
}

.s-consenso-azioni {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

/* «Gestisci le preferenze» non e' una terza risposta: e' un approfondimento,
   e si vede che lo e'. Resta pero' un bersaglio pieno da toccare, non una
   scritta di sei pixel in un angolo. */
.s-consenso-altro {
  border: 0;
  background: none;
  padding: 0 4px;
  min-height: var(--s-tocco);
  font: inherit;
  font-size: .9rem;
  color: var(--s-testo-morbido);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.s-consenso-altro:hover { color: var(--s-testo); }

.s-consenso-pannello {
  max-width: var(--s-larghezza);
  margin: 16px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--s-bordo);
}
.s-consenso-pannello[hidden] { display: none; }

.s-consenso-elenco {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.s-consenso-voce {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .94rem;
  line-height: 1.5;
}
.s-consenso-voce input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
/* Una casella che non si puo' togliere deve **sembrare** una casella che non
   si puo' togliere. Spenta e basta sarebbe un pulsante rotto. */
.s-consenso-voce input:disabled { cursor: not-allowed; opacity: .65; }

.s-consenso-nota {
  display: block;
  color: var(--s-testo-morbido);
  font-size: .88rem;
}

/* Sul telefono i due pulsanti vanno larghi uguali: due bersagli di larghezza
   diversa suggeriscono che uno dei due conta di piu', e qui non e' cosi'. */
@media (max-width: 640px) {
  .s-consenso-banner { padding: 16px; max-height: 80vh; overflow-y: auto; }
  .s-consenso-azioni { width: 100%; flex-wrap: wrap; }
  .s-consenso-azioni .s-btn { flex: 1 1 0; justify-content: center; }
  .s-consenso-altro { flex: 1 0 100%; text-align: center; }
}

/* La revoca, sulla pagina dei cookie. */
.s-revoca {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--s-bg-alt);
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
}
.s-revoca h2 { margin-top: 0; }
.s-revoca-esito { font-weight: 600; color: var(--s-testo); }
.s-revoca .s-btn { margin: 6px 0 10px; }

/* ---------------------------------------------------------------- stampa */
@media print {
  /* Un blocco che compare quando lo si scorre non lo si scorre mai su un
     foglio: senza questa riga, meta' della pagina stampata sarebbe bianca. */
  .s-appari, .s-anima .s-campo, .s-anima .s-scheda-titolo {
    opacity: 1 !important;
    transform: none !important;
  }
  .s-barra, .s-pannello, .s-richiamo, .s-video { display: none !important; }
  .s-scuro { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; }
}