/* =========================================================================
   La parte agentica: come sarà domani, Circe, Lypso
   -------------------------------------------------------------------------
   Il fondo: come sul sito di Superia (js/bg-mode.js là) cambia il fondo di
   TUTTA la pagina, con una sfumatura di 400 ms, quando la parte degli agenti
   occupa lo schermo; la barra alta cambia insieme. Le sezioni non hanno un
   fondo loro: così non c'è mai un bordo netto fra chiaro e scuro.
   La classe html.is-notte la mette js/agenti.js. Valori dai token
   (css/sito-tokens.css, "la notte").
   Movimento: solo dentro i due video, e solo mentre si guardano.
   ========================================================================= */
body { transition: background-color 400ms ease; }
html.is-notte body { background-color: var(--sito-notte); }

/* --n-fondo: il fondo della pagina in quel momento (per scriverci sopra al contrario).
   Anche Smistant Base (.oggi) segue il fondo: sugli schermi grandi la fine della sezione è
   ancora in vista quando la pagina diventa scura, e il testo scuro sparirebbe (Mario, 12
   ottobre).
   Le domande vengono subito dopo la notte e stanno ancora sullo scuro finché il
   fondo non torna chiaro: seguono anche loro (Mario, 11 ottobre: prima bianche
   sul nero, poi si invertono col fondo). */
.notte, .domande, .oggi, .segue-notte {
  --n-titolo: var(--color-ink); --n-testo: var(--color-ink-soft); --n-spento: var(--color-muted); --n-bordo: var(--color-border-strong); --n-fondo: var(--color-surface);
  --n-velato: var(--sito-spento);
  color: var(--n-testo);
}
html.is-notte .notte, html.is-notte .domande, html.is-notte .oggi, html.is-notte .segue-notte {
  --n-titolo: var(--sito-notte-titolo); --n-testo: var(--sito-notte-testo); --n-spento: var(--sito-notte-spento); --n-bordo: var(--sito-notte-bordo); --n-fondo: var(--sito-notte);
  --n-velato: color-mix(in srgb, var(--sito-notte-spento) 55%, var(--sito-notte));
}
/* Il nome dell'agente, sul fondo scuro, nella sua tinta (--tinta sta su .agente--*) */
html.is-notte .agente .nome-prodotto b { color: var(--tinta); }
.notte, .notte h1, .notte h2, .notte .sez__lead, .notte .sez__lead b { transition: color 400ms ease; }
.notte h1, .notte h2, .notte .sez__lead b { color: var(--n-titolo); }
.notte .sez__lead { color: var(--n-testo); }

/* La barra alta, scura insieme alla pagina (i due fondi sono in home.css) */
.barra__voci a, .barra__accedi { transition: color 400ms ease; }
html.is-notte .barra .barra__in::before, html.is-notte .barra .barra__in::after { background-color: color-mix(in srgb, var(--sito-notte-scheda) 94%, transparent); border-color: var(--sito-notte-bordo); }
html.is-notte .barra__voci a, html.is-notte .barra__accedi { color: var(--sito-notte-testo); }
html.is-notte .barra .marchio { color: var(--sito-notte-titolo); }
html.is-notte .barra .marchio__simbolo img { opacity: 0; }
html.is-notte .barra .marchio__simbolo .marchio__bianco { opacity: 1; }
html.is-notte .barra__voci a:hover, html.is-notte .barra__accedi:hover { color: var(--sito-notte-titolo); }

/* =========================================================================
   7. Come sarà domani — la scala: quattro gradini che salgono, da sinistra a
   destra. I primi due sono Smistant Base, oggi: pieni, bianchi. Gli altri due
   sono Circe e Lypso, in costruzione: solo il contorno, tratteggiato. Niente
   colore: il verde e il viola sono degli agenti (Mario, 11 ottobre: il verde
   di «oggi» sopra il verde di Lypso era contraddittorio).
   Sotto, un filo per gruppo dice chi fa cosa (Mario, 11 ottobre: «la roadmap
   di quello che fa oggi e quello che farà domani, fatta meglio»).
   ========================================================================= */
.scala { max-width: 1280px; margin: var(--space-9) auto 0; }
.scala__gradini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gradino { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--sito-r-scheda);
  border: 2px dashed var(--n-bordo); color: var(--n-testo); transition: border-color 400ms ease, color 400ms ease; }
.gradino b { font: 600 var(--text-xl)/1.1 var(--sito-font-titoli); letter-spacing: -0.02em; color: var(--n-titolo); transition: color 400ms ease; }
.gradino p { font-size: var(--text-md); line-height: 1.45; }
.gradino--oggi { border: 2px solid var(--n-titolo); background: var(--color-surface); color: var(--color-ink-soft); }
.gradino--oggi b { color: var(--color-ink); }
/* Sul telefono i gradini sono una colonna: a sinistra la linea della roadmap
   (Mario, 11 ottobre), un nodo per gradino all'altezza dello stato. Pieno e
   filo continuo per oggi, tratteggiato per quello in costruzione. Le misure
   tengono conto dei 2 px di bordo dei gradini: il filo va da un nodo al
   centro del successivo. */
@media (max-width: 899px) {
  .scala__gradini { gap: var(--space-4); }
  .gradino { position: relative; margin-left: 36px; }
  .gradino::before { content: ""; position: absolute; z-index: 1; left: -36px; top: calc(var(--space-5) + 4px); width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
    border: 2px dashed var(--n-bordo); background: var(--n-fondo); transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease; }
  .gradino--oggi::before { border: 2px solid var(--n-titolo); background: var(--n-titolo); box-shadow: inset 0 0 0 4px var(--n-fondo); }
  .gradino::after { content: ""; position: absolute; left: -27px; top: calc(var(--space-5) + 14px); bottom: calc(-1 * (var(--space-4) + var(--space-5) + 18px));
    border-left: 2px dashed var(--n-bordo); transition: border-color 400ms ease; }
  .gradino--oggi:has(+ .gradino--oggi)::after { border-left: 2px solid var(--n-titolo); }
  .gradino:last-child::after { display: none; }
}
/* Chi fa cosa: un filo sotto ogni coppia di gradini (pieno per oggi, tratteggiato per domani) */
.scala__chi { display: none; }
@media (min-width: 900px) {
  /* I gradini salgono: ognuno è più alto del precedente, allineati in basso */
  .scala__gradini { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .gradino:nth-child(1) { min-height: 220px; }
  .gradino:nth-child(2) { min-height: 290px; }
  .gradino:nth-child(3) { min-height: 360px; }
  .gradino:nth-child(4) { min-height: 430px; }
  .scala__chi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .scala__chi span { position: relative; padding-top: var(--space-3); border-top: 2px solid var(--n-titolo); font: 600 var(--text-lg)/1.2 var(--sito-font-titoli); color: var(--n-titolo); transition: color 400ms ease; }
  .scala__chi .scala__chi--domani { border-top: 2px dashed var(--n-bordo); }
  /* La linea piena di Smistant Base finisce con una freccia, poi viene il tratteggiato di
     Circe e Lypso, senza (Mario, 12 ottobre) */
  .scala__chi span:first-child::after { content: ""; position: absolute; right: -6px; top: -14px; width: 26px; height: 26px; background: var(--n-titolo);
    -webkit-mask: var(--sito-freccia) center / contain no-repeat; mask: var(--sito-freccia) center / contain no-repeat; transition: background-color 400ms ease; }
}

/* Le due schede degli agenti, nella home: ognuna porta alla sua pagina, dove
   c'è il video. Stesso campo dei settori: Circe viola come le agenzie, Lypso
   verde come gli hotel. Il campo (--campo) sta sulla scheda. */
.agenti-schede { max-width: 1280px; margin: var(--space-9) auto 0; display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .agenti-schede { grid-template-columns: 1fr 1fr; } }
.agente-scheda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-7) var(--space-5);
  border-radius: var(--sito-r-campo); background: var(--campo); color: var(--color-ink); }
.agente-scheda .nome-prodotto { margin-bottom: var(--space-2); }
.agente-scheda h3 { font-size: var(--sito-titolo-3); line-height: 1.05; }
.agente-scheda p { flex: 1; font-size: var(--text-md); line-height: 1.5; max-width: 46ch; }
.agente-scheda p b { font-weight: 600; }
.agente-scheda .btn { margin-top: var(--space-3); }
@media (min-width: 768px) { .agente-scheda { padding: var(--space-8); } }

/* Le tre regole degli agenti: un elenco, con la spunta */
.regole { list-style: none; max-width: 1280px; margin: var(--space-9) auto 0; padding: var(--space-6) 0 0; display: grid; gap: var(--space-3) var(--space-7);
  border-top: 1px solid var(--n-bordo); transition: border-color 400ms ease; }
.regole li { position: relative; padding-left: 34px; font-size: var(--text-lg); color: var(--n-titolo); transition: color 400ms ease; }
.regole li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--n-titolo); color: var(--n-fondo); transition: background 400ms ease, color 400ms ease; }
/* Da tavolo: una a sinistra, una al centro, una a destra, equidistanti */
@media (min-width: 760px) {
  .regole { grid-template-columns: repeat(3, 1fr); }
  .regole li:nth-child(2) { justify-self: center; }
  .regole li:nth-child(3) { justify-self: end; }
}

/* =========================================================================
   8–9. Circe e Lypso — il nome col suo stato, il titolo a sinistra e il
   video del prodotto, come la copertina (riferimento Superhuman Docs). Il
   nome è nella tinta dell'agente: Circe blu, Lypso verde.
   ========================================================================= */
.agente--circe { --tinta: var(--tinta-circe); }
.agente--lypso { --tinta: var(--tinta-lypso); }
/* La copertina è centrata, come quella della home (Mario, 11 ottobre): mascotte e
   nome, titolo, testo. Centrati anche i titoli del tempo e del processo, che aprono
   una cosa larga quanto la pagina; lo zig-zag resta com'è. */
.agente .sez__testa, .tempo .sez__testa, .processo .sez__testa, .flusso .sez__testa { justify-items: center; text-align: center; }
.agente .nome-prodotto { justify-content: center; }
/* Il testo d'apertura largo quanto basta a non fare «il fungo» sotto un titolo grande
   (Mario, 11 ottobre), largo di più nelle sezioni. Nella copertina non supera la riga più
   corta del titolo: la misura js/finale.js (Mario, 12 ottobre) */
.agente .sez__lead { max-width: min(720px, 100%); text-wrap: pretty; }
.tempo .sez__lead, .processo .sez__lead, .flusso .sez__lead { max-width: 960px; text-wrap: pretty; }

/* Chi legge e chi decide (Lypso; riferimento Lobby, «dalla posta al gestionale»): tre
   riquadri in fila con la freccia in mezzo. Lypso sta nella sua tinta, col gestionale
   dentro: una freccia sola, in lettura. «Resta a voi» è bianco, come i gradini di oggi. */
.flusso__schema { list-style: none; max-width: 1280px; margin: var(--space-8) auto 0; padding: 0; display: grid; gap: var(--space-9); }
@media (min-width: 960px) { .flusso__schema { grid-template-columns: 1fr 1.2fr 1fr; margin-top: 80px; } }
.flusso__passo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--sito-r-scheda);
  border: 1px solid var(--n-bordo); color: var(--n-testo); font-size: var(--text-md); line-height: 1.45; transition: border-color 400ms ease, color 400ms ease; }
.flusso__passo > small { font-size: var(--text-sm); font-weight: 600; color: var(--n-spento); }
.flusso__passo > b { display: flex; align-items: center; gap: var(--space-3); font: 600 var(--text-xl)/1.1 var(--sito-font-titoli); letter-spacing: -0.02em; color: var(--n-titolo); }
.flusso__passo--lypso, .flusso__passo--voi { border-color: transparent; color: var(--color-ink); }
.flusso__passo--lypso { background: var(--tinta); }
.flusso__passo--voi { background: var(--color-surface); }
.flusso__passo--lypso > small, .flusso__passo--voi > small, .flusso__passo--lypso > b, .flusso__passo--voi > b { color: var(--color-ink); }
.flusso__passo--lypso .mascotte { width: 40px; height: 40px; }
.flusso__passo--voi ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.flusso__passo--voi li { position: relative; padding-left: 32px; }
.flusso__passo--voi li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-ink); color: var(--color-surface); font-size: 12px; font-weight: 700; }
/* Voi: i due modi di lavorare (riferimento Lobby, «automazione alle vostre condizioni») */
.flusso__modi { align-self: stretch; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.flusso__modi p { padding: var(--space-3) var(--space-4); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink-soft); font-size: var(--text-base); line-height: 1.4; }
.flusso__modi b { display: block; margin-bottom: 2px; color: var(--color-ink); font-weight: 600; }
.flusso__nota { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
/* Il gestionale, dentro Lypso: le due frecce dicono che Lypso lo legge e ci scrive */
.flusso__lettura::after { content: ""; order: -1; width: 16px; height: 16px; margin-right: -12px; background: currentColor; transform: rotate(90deg);
  -webkit-mask: var(--sito-freccia) center / contain no-repeat; mask: var(--sito-freccia) center / contain no-repeat; }
.flusso__gestionale { align-self: stretch; margin-top: var(--space-5); display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-ink-soft); }
.flusso__gestionale b { color: var(--color-ink); font-weight: 600; }
.flusso__lettura { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--text-sm); font-style: normal; font-weight: 600; color: var(--color-ink); }
.flusso__lettura::before { content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(-90deg);
  -webkit-mask: var(--sito-freccia) center / contain no-repeat; mask: var(--sito-freccia) center / contain no-repeat; }
/* Le frecce fra i riquadri: in giù sul telefono, a destra da tavolo, a metà dello spazio */
.flusso__passo + .flusso__passo::before { content: ""; position: absolute; left: 50%; top: calc(var(--space-9) / -2 - 16px); width: 48px; height: 32px; margin-left: -24px;
  background: var(--n-titolo); transform: rotate(90deg); transition: background-color 400ms ease;
  -webkit-mask: var(--sito-freccia-curva) center / contain no-repeat; mask: var(--sito-freccia-curva) center / contain no-repeat; }
@media (min-width: 960px) { .flusso__passo + .flusso__passo::before { left: calc(var(--space-9) / -2 - 24px); top: 50%; margin: -16px 0 0; transform: none; } }

/* Il tempo, oggi e con l'agente: la tabella dei volantini (Mario, 11 ottobre).
   Due colonne: oggi è grigio (il colore del problema), con l'agente è nel suo
   colore. Ogni riga col suo tempo, sotto il totale grande. */
.tempo__confronto { max-width: 1280px; margin: var(--space-8) auto 0; display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .tempo__confronto { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.tempo__col { display: flex; flex-direction: column; padding: var(--space-6) var(--space-5); border-radius: var(--sito-r-campo); color: var(--color-ink); }
@media (min-width: 768px) { .tempo__col { padding: var(--space-8); } }
.tempo__col--oggi { background: var(--sito-fondo-grigio); }
.tempo__col--dopo { background: var(--tinta); }
/* Il tempo con l'agente, sottolineato nella sua tinta (Mario, 11 ottobre) */
.agente-info__leva .sottolinea { white-space: nowrap; font-weight: 600; text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; text-decoration-skip-ink: none; }
.tempo h2 .sottolinea { text-decoration: underline; text-decoration-color: var(--tinta); text-decoration-thickness: .1em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.tempo__col h3 { padding-bottom: var(--space-4); font-size: var(--sito-titolo-3); line-height: 1; color: var(--color-ink); }
.tempo__col dl { margin: 0; flex: 1; }
.tempo__col dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.tempo__col dt { font-size: var(--text-lg); line-height: 1.35; }
.tempo__col dd { margin: 0; flex: none; font: 600 var(--text-lg)/1.2 var(--sito-font-titoli); white-space: nowrap; }
.tempo__totale { margin-top: var(--space-4); padding-top: var(--space-5); border-top: 2px solid var(--color-ink);
  font: 600 var(--sito-titolo-2)/1 var(--sito-font-titoli); letter-spacing: var(--sito-crenatura); color: var(--color-ink); }
.tempo__totale small { display: block; margin-bottom: var(--space-3); font: 600 var(--text-sm)/1 var(--sito-font); letter-spacing: 0; color: var(--color-ink-soft); }

/* Il processo, passo per passo, a zig-zag (Mario, 11 ottobre: «la scheda a
   sinistra è piatta, poco diversificata»). Ogni passo ha la sua immagine
   accanto, una volta a sinistra e una a destra; il numero grande nella tinta
   dell'agente sta sopra il titolo; «Prima di cominciare» non ha numero. Sul
   telefono: titolo, immagine, testo. «Voi», in una pastiglia bianca, dice dove
   decide la persona. L'immagine è una scheda nel colore dell'agente, alta
   quanto quello che contiene. */
.passi { list-style: none; max-width: 1280px; margin: var(--space-9) auto 0; padding: 0; display: grid; gap: var(--space-9); counter-reset: passo; }
.passo { counter-increment: passo; }
.passo--prima { counter-increment: none; }
.passo__testa::before { content: counter(passo, decimal-leading-zero); display: block; margin-bottom: var(--space-3);
  font: 600 clamp(3rem, 2.2rem + 2.6vw, 5.25rem)/.9 var(--sito-font-titoli); letter-spacing: -0.05em; color: var(--tinta); }
.passo--prima .passo__testa::before { content: none; }
.passo__testa small { display: block; margin-bottom: var(--space-3); padding: 4px 12px; width: max-content; border: 1px dashed var(--tinta); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--tinta); }
.passo h3 { font-size: var(--sito-titolo-3); line-height: 1.05; color: var(--n-titolo); transition: color 400ms ease; }
.passo__corpo p { margin-top: var(--space-3); max-width: 44ch; font-size: var(--text-lg); line-height: 1.5; }
.passo .passo__voi { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--text-md); color: var(--n-titolo); transition: color 400ms ease; }
.passo__voi b { flex: none; padding: 3px 11px; border-radius: var(--radius-pill); background: var(--n-titolo); color: var(--n-fondo); font-size: var(--text-sm); font-weight: 600; line-height: 1.4;
  transition: background 400ms ease, color 400ms ease; }
.passo__img { margin-top: var(--space-5); aspect-ratio: auto; display: grid; }
.passo__img .quadro { position: relative; padding: var(--space-7) var(--space-5); }
/* Sulle pagine di Circe e Lypso la scheda ha l'ombra fuori, per staccarsi dal fondo scuro; in home
   no (Mario, 12 ottobre). Niente luce dentro: è un campo pieno (home.css). */
.passo__img.oggi__scheda { box-shadow: 0 30px 60px -28px color-mix(in srgb, black 55%, transparent); }
@media (min-width: 900px) {
  .passi { gap: 140px; margin-top: 120px; }
  .passo { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "img testa" "img corpo"; column-gap: 96px; }
  .passo:nth-child(even) { grid-template-areas: "testa img" "corpo img"; }
  .passo__testa { grid-area: testa; align-self: end; }
  .passo__corpo { grid-area: corpo; align-self: start; }
  .passo__img { grid-area: img; margin-top: 0; min-height: 380px; }
  .passo__img .quadro { padding: var(--space-8); }
}
/* La frase che chiude il processo: al centro, tra virgolette grandi nella tinta
   dell'agente (Mario, 11 ottobre: a sinistra no) */
.processo__chiusa { max-width: 900px; margin: 140px auto 0; text-align: center; font: 600 var(--sito-titolo-3)/1.15 var(--sito-font-titoli); letter-spacing: var(--sito-crenatura);
  color: var(--n-titolo); text-wrap: balance; transition: color 400ms ease; }
.processo__chiusa::before { content: "\201C"; display: block; height: .62em; margin-bottom: var(--space-4); font-size: 3.4em; line-height: 1; color: var(--tinta); }

/* Dentro le immagini del processo: i mattoni dell'app, in piccolo */
.q-voce { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 9px 0; border-top: 1px solid var(--color-border); }
.foglio h5 + .q-voce { padding-top: 0; border-top: 0; }
.q-voce b { display: block; color: var(--color-ink); font-weight: 600; }
.q-voce small { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); }
.q-tag { flex: none; padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--tinta) 35%, var(--color-surface)); color: var(--color-ink);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.q-testo { margin: 0; line-height: 1.55; color: var(--color-ink); }
.q-prezzo { flex: none; color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.q-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-btn); background: var(--color-surface); box-shadow: var(--shadow-lg); font: 13px/1.4 var(--font-sans); color: var(--color-muted); }
.q-tavola { padding-bottom: var(--space-2); }
/* Il preventivo di Circe sulla carta intestata dell'agenzia (Mario, 12 ottobre): un foglio
   vero, col marchio e il nome in testa, le voci, la quota in grande. La nota di Circe (il
   ricarico) sta fuori dal foglio, perché il cliente non la vede. */
.intestata { position: relative; padding: var(--space-5) var(--space-5) var(--space-4); border-radius: 6px; background: var(--color-surface);
  box-shadow: var(--shadow-lg), 0 1px 0 var(--color-border); font: 13px/1.45 var(--font-sans); color: var(--color-ink-soft); }
.intestata::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 6px 6px 0 0; background: var(--color-ink); }
.intestata__testa { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.intestata__marchio { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-ink); color: var(--color-surface);
  font: 700 12px/1 var(--sito-font-titoli); letter-spacing: .04em; }
.intestata__testa b { display: block; font: 600 16px/1.1 var(--sito-font-titoli); letter-spacing: -0.01em; color: var(--color-ink); }
.intestata__testa small { font-size: 11.5px; color: var(--color-muted); }
.intestata__per { padding: var(--space-3) 0 var(--space-2); }
.intestata__per small { display: block; font: 600 10.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.intestata__per b { display: block; margin-top: 6px; color: var(--color-ink); font-weight: 600; }
.intestata__voce, .intestata__totale { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 7px 0; border-top: 1px dashed var(--color-border); }
.intestata__voce b { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.intestata__totale { margin-top: 2px; border-top: 1.5px solid var(--color-ink); color: var(--color-ink); font-weight: 600; }
.intestata__totale b { font: 700 20px/1 var(--sito-font-titoli); letter-spacing: -0.02em; }
.intestata__piede { margin-top: var(--space-2); font-size: 11px; color: var(--color-muted); }
.intestata__nota { display: flex; align-items: center; gap: var(--space-2); width: fit-content; margin-top: var(--space-3); padding: 6px 12px 6px 6px; border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--color-surface) 85%, transparent); font: 600 12px/1.3 var(--font-sans); color: var(--color-ink); }
/* Colonne fisse, uguali in ogni riga: lo stato non va più a zig-zag (Mario, 12 ottobre) */
.q-riga { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 7.5em; align-items: center; gap: var(--space-3); padding: 9px 0; border-top: 1px solid var(--color-border); }
.q-stato { display: inline-flex; align-items: center; gap: 6px; }
.q-stato::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.q-stato.q-spento::before { background: var(--color-muted-soft); }
.q-riga--testa { padding-top: 0; border-top: 0; font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.q-riga--testa span:last-child { text-align: right; }
.q-riga b { color: var(--color-ink); font-weight: 600; }
.q-riga .q-prezzo { text-align: right; }
.q-riga--meglio { margin: 0 calc(var(--space-4) * -1); padding-left: var(--space-4); padding-right: var(--space-4); background: var(--color-success-soft); }
.q-riga--meglio .q-prezzo { color: var(--color-success-ink); }
.q-spento { color: var(--color-muted); }
.foglio.q-avviso { display: flex; align-items: center; gap: var(--space-2); background: var(--color-warn-soft); color: var(--color-warn-ink); font-weight: 600; }
.q-avviso .ico { width: 15px; height: 15px; }
.q-collegato { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--color-success-soft); color: var(--color-success-ink); font: 600 12px/1 var(--font-sans); }
.q-collegato .ico { width: 14px; height: 14px; }
.q-versioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.q-versioni .foglio + .foglio { margin-top: 0; }
.q-versioni b { display: block; margin: 6px 0 4px; font: 700 22px/1.1 var(--font-sans); color: var(--color-ink); }
.q-versioni small { display: block; font-size: 12px; color: var(--color-muted); }
.q-etichetta { font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
/* Per la pagina della sicurezza: il marchio europeo, l'assistente, il lucchetto */
.foglio.q-norma { display: flex; align-items: center; gap: var(--space-3); }
.q-norma .logo { width: 40px; height: 40px; }
.q-norma b { display: block; color: var(--color-ink); font-weight: 600; }
.q-norma small { display: block; font-size: 12px; color: var(--color-muted); }
.foglio.q-ai { padding: 0; overflow: hidden; }
.q-ai .q-testo { padding: var(--space-3) var(--space-4) var(--space-4); }
.ag-ok.q-chiuso { background: var(--color-bg-muted); color: var(--color-ink-soft); }
.q-chiuso .ico { stroke-width: 2.25; }

/* La pagina della sicurezza: lo stesso zig-zag di Circe e Lypso, senza numeri (i punti
   non sono una sequenza): al loro posto l'icona. Fuori dalla notte: inchiostro e
   palco scuro, che è il colore di Smistant. */
.sicurezza-testa .sez__testa { justify-items: center; text-align: center; }
.sicurezza-testa .sez__lead { max-width: 720px; text-wrap: balance; }
.sicurezza-testa .bollini { max-width: 1280px; margin: var(--space-7) auto 0; justify-content: center; }
.bollini--chiari .bollino { border: 1px solid var(--color-border-strong); }
.passi--dati { --tinta: var(--color-ink); --n-titolo: var(--color-ink); --n-fondo: var(--color-surface); margin-top: 0; }
.passi--dati .passo { counter-increment: none; }
.passi--dati .passo__testa::before { content: none; }
.passi--dati .dato__segno { margin-bottom: var(--space-4); background: var(--palco); color: var(--color-surface); }
.passi--dati .dato__segno .logo { width: 28px; height: 28px; }
/* Per chi è e a che punto è: due colonne, un filo nella tinta dell'agente sopra.
   Meno testo (Mario, 11 ottobre): chi è in pastiglie, le tappe con lo stato
   (pieno oggi, tratteggiato in costruzione), e la leva dei 30 giorni nel colore
   dell'agente. */
/* Per chi è e a che punto è: due riquadri come «I vostri dati, trattati come vostri» (Mario, 12
   ottobre): la scheda della notte col suo bordo, sul fondo della notte */
.agente-info { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .agente-info { grid-template-columns: 1fr 1fr; } }
.agente-info > div { padding: var(--space-7) var(--space-5); border-radius: var(--sito-r-campo); background: var(--sito-notte-scheda); border: 1px solid var(--sito-notte-bordo);
  /* Il fondo del riquadro è scuro sempre: i testi restano chiari anche quando la pagina torna
     bianca (Mario, 12 ottobre). Le variabili della notte, fissate qui. */
  --n-titolo: var(--sito-notte-titolo); --n-testo: var(--sito-notte-testo); --n-spento: var(--sito-notte-spento); --n-bordo: var(--sito-notte-bordo);
  --n-fondo: var(--sito-notte-scheda); color: var(--n-testo); }
@media (min-width: 768px) { .agente-info > div { padding: var(--space-8) var(--space-7); } }
/* Icona sopra e testo sotto, senza filo (Mario, 12 ottobre): la tessera nella tinta
   dell'agente */
.agente-info__segno.voce__segno { --c: var(--tinta); }
.agente-info h3 { font-size: var(--sito-titolo-3); line-height: 1.05; color: var(--n-titolo); transition: color 400ms ease; }
.agente-info p { margin-top: var(--space-4); max-width: 52ch; font-size: var(--text-lg); line-height: 1.5; }
.per-chi { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.per-chi li { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--tinta); font-size: var(--text-md); color: var(--n-titolo); transition: color 400ms ease; }
.tappe { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.tappe li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-md); color: var(--n-titolo); transition: color 400ms ease; }
.tappe .chip-stato:not(.chip-stato--lavori) { background: var(--n-titolo); color: var(--n-fondo); }
.agente-info .agente-info__leva { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--sito-r-scheda); background: var(--tinta); color: var(--color-ink);
  font-weight: 600; }

/* Il video dell'agente: stessa finestra della copertina, con un bagliore nella sua tinta */
.video--agente { max-width: 1120px; margin-top: var(--space-8); }
@media (min-width: 768px) { .video--agente { margin-top: 80px; } }
/* Sfumatura radiale, non sfocatura: costa quasi niente da disegnare */
.bagliore { position: absolute; z-index: -1; left: -4%; right: -4%; top: -6%; bottom: -14%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tinta) 45%, transparent) 0%, color-mix(in srgb, var(--tinta) 20%, transparent) 55%, transparent 100%);
  opacity: .35; transition: opacity 400ms ease; }
html.is-notte .bagliore { opacity: .55; }
/* Finché il video è largo quasi quanto lo schermo il 4% uscirebbe di lato (a 1024 di 6 px) */
@media (max-width: 1279px) { .video--agente .bagliore { left: -6px; right: -6px; } }
.video--agente .video__finestra { border-color: var(--n-bordo); }
.video__pausa[hidden], .video__tempo[hidden] { display: none; }
/* Accanto alla barra del tempo: dice che è un'anteprima, non il prodotto di oggi */
.video__anteprima { flex: none; font-size: var(--text-sm); color: var(--n-spento); white-space: nowrap; transition: color 400ms ease; }
html.is-notte .video--agente .video__pausa { background: transparent; border-color: var(--n-bordo); color: var(--n-testo); }
html.is-notte .video--agente .tratto__linea { background: color-mix(in srgb, var(--sito-notte-testo) 18%, transparent); }
html.is-notte .video--agente .tratto__linea i { background: var(--sito-notte-testo); }
html.is-notte .video--agente .tratto__nome { color: var(--n-spento); }
html.is-notte .video--agente .tratto[aria-current] .tratto__nome { color: var(--n-testo); }
/* Con cinque capitoli e l'anteprima accanto, sotto i 1100 px i nomi verrebbero tagliati */
@media (max-width: 1099px) { .video--agente .tratto__nome { display: none; } }

/* =========================================================================
   Dentro i video degli agenti: l'app con a sinistra la richiesta, a destra
   il lavoro dell'agente. Carattere di sistema, come l'app; un po' più grande
   di quello della copertina, perché la finestra si rimpicciolisce.
   ========================================================================= */
.ag-app { font-size: 15px; }
.ag-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font-weight: 600; }
.ag-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.ag-corpo { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 420px 1fr; }
.ag-sx { background: var(--color-bg); border-right: 1px solid var(--color-border); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.ag-dx { position: relative; padding: 26px 32px; overflow: hidden; }
.ag-etichetta { font: 600 12px/1 var(--font-sans); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 10px; }
.ag-etichetta:first-child { margin-top: 0; }
.ag-carta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.ag-carta .riga { margin: -14px -16px; border: 0; border-radius: var(--radius-btn); }
.ag-msg { color: var(--color-ink-soft); line-height: 1.55; min-height: 120px; }
.ag-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px;
  background: color-mix(in oklch, var(--tinta) 30%, var(--color-surface)); color: var(--color-ink); }
.ag-dati { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.ag-dati dt { color: var(--color-muted); } .ag-dati dd { margin: 0; color: var(--color-ink); display: flex; align-items: center; gap: 6px; }

/* Testa del lavoro: titolo e i quattro passi dell'agente */
.ag-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ag-testa h4 { margin: 0; font: 700 21px/1.2 var(--font-sans); color: var(--color-ink); letter-spacing: -0.01em; }
.ag-passi { display: flex; gap: 6px; }
.ag-passi span { height: 30px; padding: 0 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; font-size: 13px; color: var(--color-muted); background: var(--color-bg);
  transition: background 300ms, color 300ms; }
.ag-passi span.on { background: color-mix(in oklch, var(--tinta) 32%, var(--color-surface)); color: var(--color-ink); font-weight: 600; }

/* La tavola dei fornitori (Circe) */
.ag-tavola { display: grid; grid-template-columns: 1.15fr 1fr 150px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden; }
.ag-tavola > span { display: flex; align-items: center; min-height: 64px; padding: 0 18px; border-top: 1px solid var(--color-border); background: var(--color-surface); transition: background 400ms; }
.ag-tavola .th { min-height: 40px; border-top: 0; background: var(--color-bg); font: 600 12px/1 var(--font-sans); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.ag-tavola .nome { color: var(--color-ink); font-weight: 600; }
.ag-tavola .prezzo { justify-content: flex-end; color: var(--color-ink); font-weight: 600; }
.ag-tavola .motivo { color: var(--color-muted); font-size: 14px; }
.ag-tavola .meglio { background: var(--color-success-soft); }
.ag-tavola .meglio.prezzo { color: var(--color-success-ink); }
.ag-tavola .azione { height: 24px; padding: 0 10px; font-size: 12.5px; }
.ag-barra { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; color: var(--color-muted); }
.ag-barra .invia { height: 40px; } .ag-barra .invia i { padding: 0 16px; font-size: 15px; }

/* I fogli che entrano dal basso (preventivo, gestionale, incarichi) */
.ag-foglio { position: absolute; left: 32px; right: 32px; bottom: 26px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  padding: 20px 22px; box-shadow: var(--shadow-lg); transition: transform 700ms var(--sito-molla), opacity 400ms; }
.ag-foglio h5 { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--font-sans); color: var(--color-ink); }
.ag-foglio h5 .ico { width: 18px; height: 18px; }
.ag-voce { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--color-border); color: var(--color-ink-soft); }
.ag-voce b { color: var(--color-ink); font-weight: 600; }
.ag-voce small { display: block; color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.ag-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success); flex: none; }
.ag-ok .ico { width: 13px; height: 13px; stroke-width: 3; }

/* Il riepilogo di un passaggio fatto: una riga in alto, il lavoro si accumula */
.ag-riass { position: absolute; left: 32px; right: 32px; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: var(--radius-btn);
  background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink-soft); }
.ag-riass b { color: var(--color-ink); font-weight: 600; }
.ag-riass small { color: var(--color-muted); font-size: 13px; }

/* Entrate: chi ha .fuori aspetta il suo momento nel copione */
.ag-app .fuori { opacity: 0; transform: translateY(10px); }
.ag-app .entra-su { transition: opacity 400ms var(--ease-out-quart), transform 600ms var(--sito-molla); }
.ag-foglio.fuori { transform: translateY(40px); }

@media (prefers-reduced-motion: reduce) {
  body, .notte, .notte *, .domande, .domande *, .oggi, .oggi *, .barra__in::before, .barra__in::after, .barra .marchio, .barra__voci, .barra__dx, .barra__voci a, .barra__accedi { transition: none !important; }
}