/* ============================================================
   SINTÒNIA SUITE — foglio dei componenti
   Stessa regola di `sito/sito.css`: i colori NON stanno qui, stanno in
   `tema.css`. Qui ci sono solo forme, spazi e movimento — e le tre
   schermate finte di Chat e Mail (§9), che sono riproduzioni in HTML e
   CSS come quelle di `sito/schermi.css`, non immagini: dati inventati,
   stessi token del tema, leggibili in chiaro e in scuro.

   Il sito è nuovo e la sua pagina più esposta — Voce — vive già altrove
   (`sintoniavoce.it`, cartella `sito/`): qui non si duplica, si rimanda.
   Le misure restano in px come in `sito.css`: il sito non segue la scala
   del pannello (tema.css §6), e questo è un sito.
   ============================================================ */

/* ------------------------------------------------------------
   1. Misure e fondamenta
   ------------------------------------------------------------ */
:root {
  --larghezza: 1180px;
  --gutter: 24px;

  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 20px;
  --sp-4: 32px;
  --sp-5: 52px;
  --sp-6: 84px;
  --sp-7: 120px;

  --r-xl: 20px;
  --bordo: 1px solid var(--line);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--panel); color: var(--ink);
  border: var(--bordo); border-radius: var(--r-sm);
}
.salta:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------
   2. Impaginazione
   ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--gutter); }

.fascia { padding: var(--sp-7) 0; position: relative; }
.fascia--compatta { padding: var(--sp-6) 0; }
.fascia--alt { background: var(--panel); border-top: var(--bordo); border-bottom: var(--bordo); }
.fascia--fondo { background: var(--panel-2); border-top: var(--bordo); }
@media (max-width: 760px) { .fascia { padding: var(--sp-6) 0; } .fascia--compatta { padding: var(--sp-5) 0; } }

.occhiello {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2);
}
.occhiello::before { content: ""; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.occhiello--voce::before { background: var(--prod-voce); }
.occhiello--chat::before { background: var(--prod-chat); }
.occhiello--mail::before { background: var(--prod-mail); }
.occhiello--ai { color: var(--ai); }
.occhiello--ai::before { background: var(--ai); }

.titolo-fascia { max-width: 760px; margin-bottom: var(--sp-5); }
.titolo-fascia h2 { font-size: clamp(28px, 4vw, 42px); }
.titolo-fascia p:not(.occhiello) {
  margin-top: var(--sp-3); font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2);
}

/* ------------------------------------------------------------
   3. Intestazione
   ------------------------------------------------------------ */
.testa {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.testa[data-scrolled="si"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
}
.testa .wrap { display: flex; align-items: center; gap: var(--sp-4); height: 68px; }
.testa .brand-mark { width: 30px; height: 30px; }
.testa .brand-name { font-size: 17px; }
/* Sulle pagine di prodotto la pastiglia dice il prodotto, nella sua tinta:
   il segno accanto è già quello del prodotto, e «Suite» lo smentirebbe. */
.brand-parola--chat { color: var(--prod-chat); -webkit-text-fill-color: var(--prod-chat); }
.brand-parola--mail { color: var(--prod-mail); -webkit-text-fill-color: var(--prod-mail); }
.brand-parola--voce { color: var(--prod-voce); -webkit-text-fill-color: var(--prod-voce); }
.brand-parola--drive { color: var(--prod-drive); -webkit-text-fill-color: var(--prod-drive); }

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu a { white-space: nowrap; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.menu a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.menu a[aria-current="page"] {
  color: var(--ink); font-weight: 500; background: var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.testa-azioni { display: flex; align-items: center; gap: var(--sp-2); }

.hamburger {
  display: none; width: 38px; height: 34px; padding: 0;
  border: var(--bordo); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--ink-2); cursor: pointer; place-items: center;
}
.hamburger::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}
.hamburger[aria-expanded="true"] { color: var(--ink); border-color: var(--accent-dim); }

@media (max-width: 980px) {
  .hamburger { display: grid; }
  .menu { display: none; }
  .menu[data-aperto="si"] {
    display: grid; gap: 2px;
    position: fixed; top: 68px; left: 0; right: 0;
    margin: 0; padding: var(--sp-2) var(--gutter) var(--sp-3);
    background: var(--panel); border-bottom: var(--bordo);
    box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .8);
  }
  .menu[data-aperto="si"] a { padding: 12px 8px; font-size: 16px; }
}
@media (max-width: 520px) {
  .testa .wrap { gap: var(--sp-2); }
  .testa-azioni .tasto--piatto { display: none; }
}

/* ------------------------------------------------------------
   4. Tasti
   ------------------------------------------------------------ */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s, background .16s, border-color .16s, box-shadow .16s;
}
.tasto:hover { text-decoration: none; border-color: var(--accent-dim); transform: translateY(-1px); }
.tasto:active { transform: translateY(0); }
.tasto--primario { background: var(--accent); border-color: var(--accent); color: var(--ground); font-weight: 700; }
.tasto--primario:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--ink)); border-color: transparent;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tasto--grande { padding: 15px 26px; font-size: 16.5px; }
.tasto--piatto { background: transparent; }
.tasto .freccia { transition: transform .18s; }
.tasto:hover .freccia { transform: translateX(3px); }

/* Tasti tinti del colore di prodotto, per i CTA di Chat e Mail */
.tasto--chat { border-color: var(--prod-chat); }
.tasto--chat.tasto--primario { background: var(--prod-chat); color: #06251C; }
.tasto--chat.tasto--primario:hover { background: color-mix(in srgb, var(--prod-chat) 86%, var(--ink)); }
.tasto--mail { border-color: var(--prod-mail); }
.tasto--mail.tasto--primario { background: var(--prod-mail); color: #2B1B02; }
.tasto--mail.tasto--primario:hover { background: color-mix(in srgb, var(--prod-mail) 86%, var(--ink)); }

/* ------------------------------------------------------------
   5. Apertura (hero)
   ------------------------------------------------------------ */
.apertura { position: relative; padding: clamp(56px, 8vw, 96px) 0 var(--sp-6); overflow: hidden; }
.apertura::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 560px;
  background:
    radial-gradient(560px 320px at 18% 0%, color-mix(in srgb, var(--prod-voce) 20%, transparent), transparent 60%),
    radial-gradient(520px 300px at 58% 10%, color-mix(in srgb, var(--prod-chat) 16%, transparent), transparent 60%),
    radial-gradient(480px 280px at 92% 0%, color-mix(in srgb, var(--prod-mail) 14%, transparent), transparent 60%);
  pointer-events: none; z-index: 0;
}
.apertura .wrap { position: relative; z-index: 1; }
.apertura-testo { max-width: 720px; }
.apertura h1 { font-size: clamp(34px, 5vw, 56px); }
.apertura h1 em { font-style: normal; color: var(--accent); }
.apertura .sommario { margin-top: var(--sp-3); font-size: clamp(16px, 1.7vw, 19px); color: var(--ink-2); max-width: 620px; }
.apertura .azioni { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.apertura .sotto { margin-top: var(--sp-3); font-size: 13.5px; color: var(--ink-3); }

.bandierina {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--panel-2); border: var(--bordo);
  font-size: 13.5px; color: var(--ink-2); margin-bottom: var(--sp-3);
}
.bandierina b { color: var(--ink); font-weight: 700; }
.pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--ai); flex: none; }
@media (max-width: 560px) { .bandierina { font-size: 12.5px; } }

/* ------------------------------------------------------------
   5b. L'apertura: il testo e i quattro prodotti
   Prima qui c'era un ologramma, poi quattro scatole di cartone in 3D.
   Adesso, dal fondo alla superficie:
   1. `.aurora` — tre macchie sfocate nei colori del marchio, che si
      spostano lentissime. L'intensità è un token (`--velo-aurora`,
      tema.css): sul nero è atmosfera, sul bianco sarebbe una nuvola.
   2. `.orizzonte` — un pavimento a griglia in prospettiva, basso, su cui
      appoggiano i prodotti. `perspective()` dentro la `transform` e una
      maschera che lo dissolve: nessuna immagine.
   3. `.quadri` — i quattro prodotti, ognuno con l'icona della sua app
      (qui sotto il perché).

   Niente libreria: il fondale si ferma con `prefers-reduced-motion`, e
   senza JavaScript resta tutto com'è.
   ------------------------------------------------------------ */
.apertura--futuro {
  display: flex; align-items: center;
  min-height: min(88vh, 880px);
  padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 7vw, 92px);
}
/* Il fondale è quello nuovo: le tre macchie di `.apertura::before` qui
   sarebbero una quarta sorgente di luce che nessuno ha chiesto. */
.apertura--futuro::before { content: none; }

/* L'apertura non è più due colonne: il testo sta sopra e le quattro
   scatole sotto, appoggiate sul pavimento del fondale. Quattro confezioni
   in fila vogliono tutta la larghezza — in mezza pagina diventavano
   quattro francobolli. */
@media (max-width: 940px) { .apertura--futuro { min-height: 0; } }

/* ── il fondale ─────────────────────────────────────────────── */
.sfondo-futuro { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: var(--velo-aurora);
}
.aurora--1 {
  width: min(640px, 70vw); height: 460px; left: -10%; top: -24%;
  background: var(--accent); animation: aurora-a 26s ease-in-out infinite alternate;
}
.aurora--2 {
  width: min(560px, 62vw); height: 420px; right: -8%; top: -18%;
  background: var(--ai); animation: aurora-b 31s ease-in-out infinite alternate;
}
.aurora--3 {
  width: min(420px, 46vw); height: 300px; left: 16%; bottom: -14%;
  background: var(--prod-chat); opacity: calc(var(--velo-aurora) * .34);
  animation: aurora-c 37s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate3d(70px, 46px, 0) scale(1.14); } }
@keyframes aurora-b { to { transform: translate3d(-60px, 60px, 0) scale(1.1); } }
@keyframes aurora-c { to { transform: translate3d(40px, -40px, 0) scale(1.16); } }

/* Il pavimento è basso apposta: la riga dell'orizzonte deve cadere
   dov'è la base delle scatole, altrimenti le taglia a metà e sembrano
   appese invece che appoggiate. */
.orizzonte { position: absolute; left: -25%; right: -25%; bottom: 0; height: 13%; overflow: hidden; }
.orizzonte-griglia {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200%;
  transform-origin: 50% 100%;
  transform: perspective(340px) rotateX(62deg);
  background-image:
    linear-gradient(to right, var(--griglia-riga) 1px, transparent 1px),
    linear-gradient(to bottom, var(--griglia-riga) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to top, #000 6%, rgba(0, 0, 0, .5) 40%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 6%, rgba(0, 0, 0, .5) 40%, transparent 78%);
  animation: griglia-scorre 18s linear infinite;
}
@keyframes griglia-scorre { to { background-position: 0 68px, 0 68px; } }

/* La riga dell'orizzonte sta dove il pavimento sparisce: senza, la
   griglia sfuma nel nulla e il fondo sembra sporco invece che profondo. */
.linea-orizzonte {
  position: absolute; left: 0; right: 0; bottom: 13%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ai) 65%, transparent) 50%, transparent);
  box-shadow: 0 0 26px 2px color-mix(in srgb, var(--ai) 20%, transparent);
}

/* ── il testo ───────────────────────────────────────────────── */
.apertura--futuro h1 { font-size: clamp(38px, 5.4vw, 68px); letter-spacing: -0.03em; }
/* Il trascolorare sta sulla parola che porta il senso, non sul titolo
   intero: un titolo tutto in gradiente si legge peggio e invecchia male. */
.apertura--futuro h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--accent), var(--ai) 78%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.apertura--futuro .sommario { max-width: 540px; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.kicker-led {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ai); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 60%, transparent);
  animation: led 2.6s ease-out infinite;
}
@keyframes led {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}

.stato-suite {
  margin-top: var(--sp-4); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-num); font-size: 12px; letter-spacing: .04em; color: var(--ink-3);
}
.stato-suite .badge-presto { margin-left: 0; }

/* ── i quattro prodotti: le icone delle app ─────────────────── */
/* Prima qui c'erano quattro scatole di cartone in 3D, con dentro una
   scena in rilievo (onde, puntini, un foglio che usciva dalla busta) e i
   glifi di prima del 2026-10-20. Erano belle e dicevano troppo: dorso,
   edizione, codice a barre, pastiglia, didascalia — sette cose per
   prodotto, a due dita di larghezza.

   Adesso ogni prodotto è **la sua icona d'app** (`marchio/*-quadra.svg`,
   la stessa della schermata Home), il nome e una riga. L'icona è
   un'immagine e non una maschera: è il file del marchio, non un'altra
   copia da tenere allineata. Il movimento è uno solo: le quattro
   arrivano a scaglioni, e col puntatore l'icona si alza e si accende
   della sua tinta. */
.quadri {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(34px, 5vw, 62px);
}
@media (max-width: 900px) { .quadri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quadro {
  --tinta-prodotto: var(--accent);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 22px 22px 20px;
  color: inherit; text-decoration: none;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: var(--bordo); border-radius: var(--r-xl);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
}
.quadro:hover, .quadro:focus-visible {
  text-decoration: none; transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tinta-prodotto) 50%, var(--line));
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--tinta-prodotto) 70%, transparent);
}
.quadro--voce  { --tinta-prodotto: var(--prod-voce); }
.quadro--chat  { --tinta-prodotto: var(--prod-chat); }
.quadro--mail  { --tinta-prodotto: var(--prod-mail); }
.quadro--drive { --tinta-prodotto: var(--prod-drive); border-style: dashed; }

.quadro-icona {
  width: 64px; height: 64px; border-radius: 23%; margin-bottom: 12px;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--tinta-prodotto) 80%, transparent);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.quadro:hover .quadro-icona { transform: scale(1.06); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--tinta-prodotto) 90%, transparent); }
/* Drive non c'è ancora: l'icona c'è, spenta. */
.quadro--drive .quadro-icona { filter: grayscale(.55); opacity: .7; }

.quadro-nome { font-size: 22px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; }
.quadro-riga { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.quadro-vai { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--tinta-prodotto); }
.quadro-vai .freccia { display: inline-block; transition: transform .18s; }
.quadro:hover .quadro-vai .freccia { transform: translateX(3px); }

.quadri .quadro:nth-child(2) { --ritardo: 90ms; }
.quadri .quadro:nth-child(3) { --ritardo: 180ms; }
.quadri .quadro:nth-child(4) { --ritardo: 270ms; }
.js .quadri .quadro.appare.visto { transition: opacity .6s ease var(--ritardo, 0ms), transform .6s cubic-bezier(.2, .8, .2, 1) var(--ritardo, 0ms), border-color .25s, box-shadow .25s; }

@media (max-width: 560px) {
  .quadro { padding: 16px; }
  .quadro-icona { width: 52px; height: 52px; margin-bottom: 8px; }
  .quadro-nome { font-size: 19px; }
  .quadro-riga { font-size: 13.5px; }
}

/* Un'apertura che si muove è un'apertura che si può spegnere: chi ha
   chiesto meno movimento la vede ferma e completa, non a metà. */
@media (prefers-reduced-motion: reduce) {
  .aurora, .orizzonte-griglia, .kicker-led { animation: none !important; }
  .quadro, .quadro-icona { transition: none; }
}

/* ------------------------------------------------------------
   6. Griglie e carte prodotto
   ------------------------------------------------------------ */
.griglia { display: grid; gap: var(--sp-3); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 940px) { .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .griglia--4, .griglia--3, .griglia--2 { grid-template-columns: minmax(0, 1fr); } }

.scheda {
  position: relative; display: flex; flex-direction: column;
  padding: var(--sp-4); background: var(--panel);
  border: var(--bordo); border-radius: var(--r-lg);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.scheda:hover { border-color: var(--accent-dim); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7); transform: translateY(-2px); }
.scheda h3 { font-size: 19px; margin-bottom: var(--sp-2); }
.scheda p { color: var(--ink-2); font-size: 15px; }
.scheda .dettaglio {
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
  font-family: var(--font-num); font-size: 12.5px; color: var(--ink-3);
}

/* Carta prodotto: la card grande di ogni prodotto sulla home della suite.
   `--tinta-prodotto` la sceglie il modificatore, e la usano il bordo al
   passaggio, il cerchio dell'icona e il link in fondo — un colore solo,
   preso dal tema, mai scritto due volte. */
.scheda--prodotto {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  gap: var(--sp-3);
}
.scheda--prodotto:hover { border-color: color-mix(in srgb, var(--tinta-prodotto) 55%, var(--line)); }
.scheda--voce { --tinta-prodotto: var(--prod-voce); }
.scheda--chat { --tinta-prodotto: var(--prod-chat); }
.scheda--mail { --tinta-prodotto: var(--prod-mail); }
.scheda--drive { --tinta-prodotto: var(--prod-drive); }
/* La carta di un prodotto che non c'è ancora non può sembrare identica
   alle altre tre: il bordo tratteggiato è la differenza, non un colore. */
.scheda--drive { border-style: dashed; }
.scheda--drive:hover { border-color: color-mix(in srgb, var(--tinta-prodotto) 55%, var(--line)); border-style: dashed; }

/* `.icona-prodotto` è un componente a sé, non solo un pezzo della carta:
   `chat.html`, `mail.html` e `voce.html` lo riusano fuori da `.scheda`,
   per questo la tinta si può impostare anche qui e non solo sulla carta. */
.icona-prodotto--voce { --tinta-prodotto: var(--prod-voce); --tinta-fondo: var(--prod-voce-fondo); }
.icona-prodotto--chat { --tinta-prodotto: var(--prod-chat); --tinta-fondo: var(--prod-chat-fondo); }
.icona-prodotto--mail { --tinta-prodotto: var(--prod-mail); --tinta-fondo: var(--prod-mail-fondo); }
.icona-prodotto--calendario { --tinta-prodotto: var(--prod-calendario); --tinta-fondo: var(--prod-calendario-fondo); }
.icona-prodotto--contatti { --tinta-prodotto: var(--prod-contatti); --tinta-fondo: var(--prod-contatti-fondo); }
.icona-prodotto--drive { --tinta-prodotto: var(--prod-drive); --tinta-fondo: var(--prod-drive-fondo); }
.icona-prodotto--suite { --tinta-prodotto: var(--segno-a); --tinta-fondo: var(--segno-b); }

/* Pillola «presto»: un prodotto annunciato e non ancora costruito, in
   navigazione e nelle carte. Neutra come `--prod-drive`, per lo stesso
   motivo — non è ancora sua, una tinta di marchio. */
.badge-presto {
  display: inline-flex; align-items: center; margin-left: 6px;
  padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.6;
  color: var(--ink-2); background: var(--panel-3); border: 1px solid var(--line);
  vertical-align: middle;
}

/* L'icona di un prodotto è **l'icona della sua app** (`marchio/sintonia-*-quadra.svg`,
   2026-10-20): il gradiente della sua tinta a tutto riquadro, gli angoli tondi
   della schermata Home, e il disegno bianco al centro. Il disegno è una
   maschera, scalato e assottigliato come nelle app. */
.icona-prodotto {
  width: 46px; height: 46px; border-radius: 26%;
  display: grid; place-items: center; flex: none; overflow: hidden;
  background: linear-gradient(151deg, var(--tinta-prodotto), var(--tinta-fondo, var(--tinta-prodotto)) 84%);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--tinta-fondo, var(--tinta-prodotto)) 70%, transparent);
}
.icona-prodotto i {
  width: 100%; height: 100%; background: #fff;
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.scheda--prodotto .etichetta-prodotto {
  font-family: var(--font-num); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-prodotto);
  margin-bottom: 2px;
}
.scheda--prodotto h3 { font-size: 23px; }
.scheda--prodotto p { font-size: 15.5px; }
.scheda--prodotto .righe-funzioni { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 8px; }
.scheda--prodotto .righe-funzioni li {
  display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2);
}
.scheda--prodotto .righe-funzioni li::before {
  content: "✓"; color: var(--tinta-prodotto); font-weight: 700; flex: none; line-height: 1.4;
}
.scheda--prodotto .vai {
  margin-top: auto; padding-top: var(--sp-3);
  display: flex; align-items: center; gap: 8px;
  color: var(--tinta-prodotto); font-weight: 600; font-size: 14.5px;
}
.scheda--prodotto .vai .freccia { transition: transform .18s; }
.scheda--prodotto:hover .vai .freccia { transform: translateX(3px); }

/* Icone a maschera, minime: solo quelle che servono a questo sito */
.icona-prodotto--voce i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9' transform='translate(7.4 7.4) scale(.72)' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9' transform='translate(7.4 7.4) scale(.72)' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--chat i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.54' d='M7.7 13H24.3M7.7 19H16.6'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.54' d='M7.7 13H24.3M7.7 19H16.6'/%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--mail i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.42'%3E%3Crect x='7.1' y='10.6' width='17.8' height='11.4' rx='2.5'/%3E%3Cpath d='m8.2 11.9 7.8 5.5 7.8-5.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.42'%3E%3Crect x='7.1' y='10.6' width='17.8' height='11.4' rx='2.5'/%3E%3Cpath d='m8.2 11.9 7.8 5.5 7.8-5.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--calendario i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.37'%3E%3Crect x='8' y='9.5' width='16' height='14' rx='2.6'/%3E%3Cpath d='M8 14h16M12 7.5v3.5M20 7.5v3.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.37'%3E%3Crect x='8' y='9.5' width='16' height='14' rx='2.6'/%3E%3Cpath d='M8 14h16M12 7.5v3.5M20 7.5v3.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--contatti i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.42'%3E%3Ccircle cx='16' cy='12.6' r='4'/%3E%3Cpath d='M8.6 23.6a7.4 7.4 0 0 1 14.8 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.42'%3E%3Ccircle cx='16' cy='12.6' r='4'/%3E%3Cpath d='M8.6 23.6a7.4 7.4 0 0 1 14.8 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--drive i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.37' d='M11 22.3h10.3a4 4 0 0 0 .6-7.95 5.6 5.6 0 0 0-10.8-1.2A4.6 4.6 0 0 0 11 22.3z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16) scale(1.28) translate(-16 -16)'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.37' d='M11 22.3h10.3a4 4 0 0 0 .6-7.95 5.6 5.6 0 0 0-10.8-1.2A4.6 4.6 0 0 0 11 22.3z'/%3E%3C/g%3E%3C/svg%3E"); }
.icona-prodotto--suite i { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.4'/%3E%3Ccircle cx='13' cy='12' r='2.6'/%3E%3Ccircle cx='19' cy='6' r='3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.4'/%3E%3Ccircle cx='13' cy='12' r='2.6'/%3E%3Ccircle cx='19' cy='6' r='3'/%3E%3C/svg%3E"); }
/* I tre punti della suite sono disegnati su 24 e non sul quadrato delle app:
   occupano la metà del riquadro, come prima. */
.icona-prodotto--suite i { mask-size: 52%; -webkit-mask-size: 52%; }

/* ------------------------------------------------------------
   7. Funzioni (griglia di caratteristiche, con icona)
   ------------------------------------------------------------ */
.funzioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.funzioni > div {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-3); border-radius: var(--r-md);
  border: var(--bordo); background: var(--panel);
  transition: border-color .18s, background .18s;
}
.funzioni > div:hover { border-color: var(--accent-dim); background: var(--panel-2); }
.funzioni i {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
}
.funzioni i::before {
  content: ""; width: 18px; height: 18px; background: var(--accent);
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.funzioni b { font-size: 15px; }
.funzioni span { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.funzioni > div[data-tinta="chat"] i { background: color-mix(in srgb, var(--prod-chat) 18%, var(--panel-2)); }
.funzioni > div[data-tinta="chat"] i::before { background: var(--prod-chat); }
.funzioni > div[data-tinta="mail"] i { background: color-mix(in srgb, var(--prod-mail) 18%, var(--panel-2)); }
.funzioni > div[data-tinta="mail"] i::before { background: var(--prod-mail); }
.funzioni > div[data-tinta="ai"] i { background: color-mix(in srgb, var(--ai) 18%, var(--panel-2)); }
.funzioni > div[data-tinta="ai"] i::before { background: var(--ai); }
.funzioni--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.funzioni--compatte { margin-top: var(--sp-5); }
@media (max-width: 1000px) { .funzioni, .funzioni--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .funzioni, .funzioni--4 { grid-template-columns: minmax(0, 1fr); } }

.icona--lampo::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.4 4.8 13.4h5.1l-.9 8.2 8.6-11.6h-5.3z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.4 4.8 13.4h5.1l-.9 8.2 8.6-11.6h-5.3z'/%3E%3C/svg%3E"); }
.icona--lucchetto::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.4' rx='2'/%3E%3Cpath d='M8 11V7.6a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.4' rx='2'/%3E%3Cpath d='M8 11V7.6a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); }
.icona--server::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.6'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.6'/%3E%3Ccircle cx='7' cy='7.5' r='1'/%3E%3Ccircle cx='7' cy='16.5' r='1'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.6'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.6'/%3E%3Ccircle cx='7' cy='7.5' r='1'/%3E%3Ccircle cx='7' cy='16.5' r='1'/%3E%3C/svg%3E"); }
.icona--telefonino::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.2' y='2.6' width='11.6' height='18.8' rx='2.4'/%3E%3Cpath d='M10.4 18.6h3.2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.2' y='2.6' width='11.6' height='18.8' rx='2.4'/%3E%3Cpath d='M10.4 18.6h3.2'/%3E%3C/svg%3E"); }
.icona--cerca::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m21 21-5.6-5.6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m21 21-5.6-5.6'/%3E%3C/svg%3E"); }
.icona--campanella::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 4.2 1.4 5.6 2 6.4H4c.6-.8 2-2.2 2-6.4z'/%3E%3Cpath d='M10.4 20a1.8 1.8 0 0 0 3.2 0'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 4.2 1.4 5.6 2 6.4H4c.6-.8 2-2.2 2-6.4z'/%3E%3Cpath d='M10.4 20a1.8 1.8 0 0 0 3.2 0'/%3E%3C/svg%3E"); }
.icona--persone::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.4 20a5.6 5.6 0 0 1 11.2 0'/%3E%3Ccircle cx='17.4' cy='9.4' r='2.4'/%3E%3Cpath d='M15.4 14a4.8 4.8 0 0 1 5.2 4.8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.4 20a5.6 5.6 0 0 1 11.2 0'/%3E%3Ccircle cx='17.4' cy='9.4' r='2.4'/%3E%3Cpath d='M15.4 14a4.8 4.8 0 0 1 5.2 4.8'/%3E%3C/svg%3E"); }
.icona--graffetta::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.2 15 4.2a3.4 3.4 0 0 1 4.8 4.8L11 17.8a5.4 5.4 0 0 1-7.6-7.6l8-8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.2 15 4.2a3.4 3.4 0 0 1 4.8 4.8L11 17.8a5.4 5.4 0 0 1-7.6-7.6l8-8'/%3E%3C/svg%3E"); }
.icona--orologio::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.4' r='8.6'/%3E%3Cpath d='M12 7.4v5l3.4 2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.4' r='8.6'/%3E%3Cpath d='M12 7.4v5l3.4 2'/%3E%3C/svg%3E"); }
.icona--radar::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12 20 6.4'/%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M12 6.6a5.4 5.4 0 0 1 5.4 5.4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12 20 6.4'/%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M12 6.6a5.4 5.4 0 0 1 5.4 5.4'/%3E%3C/svg%3E"); }
.icona--cartella::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.4a1.6 1.6 0 0 1 1.6-1.6h4.6l2 2.4h8.2A1.6 1.6 0 0 1 21 8.8v9A1.6 1.6 0 0 1 19.4 19H4.6A1.6 1.6 0 0 1 3 17.4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.4a1.6 1.6 0 0 1 1.6-1.6h4.6l2 2.4h8.2A1.6 1.6 0 0 1 21 8.8v9A1.6 1.6 0 0 1 19.4 19H4.6A1.6 1.6 0 0 1 3 17.4z'/%3E%3C/svg%3E"); }
.icona--collegamento::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5 14.5 9.5'/%3E%3Cpath d='M11 7.4l1.6-1.6a3.6 3.6 0 0 1 5.1 5.1L16 12.5'/%3E%3Cpath d='M13 16.6l-1.6 1.6a3.6 3.6 0 0 1-5.1-5.1L8 11.5'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5 14.5 9.5'/%3E%3Cpath d='M11 7.4l1.6-1.6a3.6 3.6 0 0 1 5.1 5.1L16 12.5'/%3E%3Cpath d='M13 16.6l-1.6 1.6a3.6 3.6 0 0 1-5.1-5.1L8 11.5'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------
   8. Nota di fascia, garanzie, doppia colonna
   ------------------------------------------------------------ */
.nota-fascia {
  margin-top: var(--sp-4); padding: var(--sp-3);
  border: var(--bordo); border-radius: var(--r-md); background: var(--panel);
  font-size: 14.5px; color: var(--ink-2);
}
.nota-fascia b { color: var(--ink); }

.mostra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
.scatto-voce { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: var(--bordo); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .7); }
.mostra--schermata { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: var(--sp-5); }
.mostra--rovescia { direction: rtl; }
.mostra--rovescia > * { direction: ltr; }
@media (max-width: 900px) { .mostra { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   9. Le schermate finte: telaio della finestra + riduttore
   Stesso meccanismo di `sito/schermi.css`: proporzioni fisse dentro
   `.scala`, che `suite.js` rimpicciolisce quanto serve. Qui dentro
   ci sono `.finta-chat` e `.finta-mail`, il disegno vero e proprio.
   ------------------------------------------------------------ */
.scala { display: block; position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; }
/* La misura della schermata la detta questa riga, e va lasciata fare: una
   `height: 100%` scritta dentro una `.finta-*` si risolverebbe contro
   `.scala` — che è già la scatola **ridotta** — e la schermata verrebbe
   disegnata più alta di quanto dichiara, con la riga in fondo (quella di
   scrittura, la barra della chiamata) tagliata via da `overflow: hidden`.
   Visto succedere davvero il 2026-09-11. */
.scala > * {
  position: absolute; top: 0; left: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-origin: top left; transform: scale(var(--k, 1));
}
.telaio {
  border: var(--bordo); border-radius: var(--r-lg); background: var(--panel-2);
  overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .75), var(--glow);
}
.telaio-barra { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--panel-2); border-bottom: var(--bordo); }
.telaio-pallini { display: flex; gap: 6px; flex: none; }
.telaio-pallini i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink-3) 34%, transparent); }
.telaio-url {
  flex: 1; min-width: 0; padding: 4px 12px; border-radius: 999px; background: var(--panel-3);
  font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.telaio-url b { color: var(--ink-2); font-weight: 500; }
.telaio-corpo { background: var(--ground); }
@media (max-width: 780px) {
  .telaio-corpo { overflow-x: auto; }
  .telaio-corpo .scala { min-width: 640px; }
}
.vetrina { margin: 0; }
.vetrina figcaption { margin-top: var(--sp-3); font-size: 14px; color: var(--ink-2); }
.vetrina figcaption b { color: var(--ink); }

/* --- Finta schermata di Chat: due colonne, elenco conversazioni + una
       aperta, con una nota AI in coda. Dati inventati (§ nomi finti). --- */
.finta-chat { display: flex; background: var(--ground); font-family: var(--font-ui); }
.fc-lato { width: 240px; flex: none; background: var(--panel); border-right: var(--bordo); display: flex; flex-direction: column; }
.fc-lato header { padding: 16px 16px 10px; font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.fc-lato header i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.fc-conv { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; overflow: hidden; }
.fc-conv > div { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--r-sm); }
.fc-conv > div[data-attiva] { background: color-mix(in srgb, var(--prod-chat) 16%, var(--panel-2)); }
.fc-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #06251C;
  background: color-mix(in srgb, var(--prod-chat) 70%, var(--ink-2));
}
/* Il testo della riga sta in un involucro suo: una regola su `span` dentro
   la riga vincerebbe per specificità anche su `.fc-avatar` e `.fc-badge`,
   e si porterebbe via il loro `display` — pallino e pastiglia tornavano
   testo allineato in alto a sinistra. */
.fc-testo { flex: 1; min-width: 0; }
.fc-testo b { display: block; font-size: 13px; color: var(--ink); }
.fc-testo span { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-conv small { margin-left: auto; font-size: 10px; color: var(--ink-3); flex: none; }
.fc-badge {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--prod-chat); color: #06251C; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; flex: none;
}
.fc-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fc-testa { padding: 12px 18px; border-bottom: var(--bordo); display: flex; align-items: center; gap: 10px; }
.fc-testa .fc-testo b { font-size: 13.5px; }
.fc-testa .fc-testo span { color: var(--ok); }
.fc-messaggi { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.fc-msg { max-width: 68%; padding: 9px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.45; color: var(--ink); background: var(--panel-2); }
.fc-msg[data-io] { align-self: flex-end; background: color-mix(in srgb, var(--prod-chat) 30%, var(--panel-2)); }
.fc-msg time { display: block; margin-top: 4px; font-size: 10px; color: var(--ink-3); }
.fc-chi { display: block; margin-bottom: 3px; font-size: 10.5px; color: var(--ink-3); }
.fc-vocale { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--prod-chat); }
.fc-onda { display: inline-flex; align-items: center; gap: 2px; }
.fc-onda i { width: 2px; border-radius: 2px; background: var(--prod-chat); }
.fc-onda i:nth-child(odd) { height: 9px; }
.fc-onda i:nth-child(even) { height: 14px; }
.fc-onda i:nth-child(3n) { height: 6px; }
.fc-ai { align-self: flex-start; max-width: 78%; padding: 9px 12px; border-radius: var(--r-md); font-size: 12px; color: var(--ink-2); background: color-mix(in srgb, var(--ai) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--ai) 34%, var(--line)); }
.fc-ai b { color: var(--ai); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.fc-riga { padding: 12px 18px; border-top: var(--bordo); display: flex; align-items: center; gap: 10px; }
.fc-campo { flex: 1; height: 34px; border-radius: 999px; background: var(--panel-2); border: var(--bordo); }
.fc-invia { width: 34px; height: 34px; border-radius: 50%; background: var(--prod-chat); flex: none; }

/* --- Finta schermata di Mail: colonna cartelle, lista messaggi, anteprima --- */
.finta-mail { display: flex; background: var(--ground); font-family: var(--font-ui); }
.fm-lato { width: 190px; flex: none; background: var(--panel); border-right: var(--bordo); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.fm-lato .fm-scrivi { margin: 0 4px 12px; height: 34px; border-radius: var(--r-sm); background: var(--prod-mail); display: flex; align-items: center; justify-content: center; color: #2B1B02; font-size: 12px; font-weight: 700; }
.fm-lato div { padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; }
.fm-lato div[data-attiva] { background: color-mix(in srgb, var(--prod-mail) 16%, var(--panel-2)); color: var(--ink); font-weight: 500; }
.fm-lato div b { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.fm-lista { width: 280px; flex: none; border-right: var(--bordo); overflow: hidden; display: flex; flex-direction: column; }
.fm-lista > div { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.fm-lista > div[data-attiva] { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--prod-mail); }
.fm-lista .riga1 { display: flex; justify-content: space-between; gap: 8px; }
.fm-lista .riga1 b { font-size: 12.5px; color: var(--ink); }
.fm-lista .riga1 time { font-size: 10.5px; color: var(--ink-3); flex: none; }
.fm-lista .oggetto { margin-top: 2px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-lista .anteprima { margin-top: 1px; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-corpo { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.fm-oggetto { font-size: 15px; font-weight: 700; color: var(--ink); }
.fm-da { display: flex; align-items: center; gap: 10px; }
.fm-avatar { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--prod-mail) 70%, var(--ink-2)); color: #2B1B02; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.fm-testo-da b { display: block; font-size: 12.5px; color: var(--ink); }
.fm-testo-da span { display: block; font-size: 11px; color: var(--ink-3); }
.fm-testo { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.fm-radar { padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ai) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--ai) 34%, var(--line)); font-size: 12px; color: var(--ink-2); }
.fm-radar b { color: var(--ai); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.fm-allegato { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: var(--bordo); font-size: 11.5px; color: var(--ink-2); width: fit-content; }

/* --- Finta schermata di Voce: cruscotto del centralino, chiamate in corso --- */
.finta-voce { display: flex; background: var(--ground); font-family: var(--font-ui); }
.fv-lato { width: 190px; flex: none; background: var(--panel); border-right: var(--bordo); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.fv-logo { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fv-logo i { width: 18px; height: 18px; flex: none; border-radius: 50% 50% 50% 5px; background: linear-gradient(150deg, var(--segno-a), var(--segno-b)); }
.fv-lato > div { padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.fv-lato > div[data-attiva] { background: color-mix(in srgb, var(--prod-voce) 16%, var(--panel-2)); color: var(--ink); font-weight: 500; }
.fv-corpo { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.fv-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fv-kpi > div { padding: 11px 13px; border: var(--bordo); border-radius: var(--r-md); background: var(--panel); }
.fv-kpi b { display: block; font-family: var(--font-num); font-size: 21px; color: var(--ink); line-height: 1.1; }
.fv-kpi span { font-size: 11px; color: var(--ink-3); }
.fv-kpi > div[data-ai] b { color: var(--ai); }
.fv-titolo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.fv-titolo em { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.fv-chiamate { border: var(--bordo); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.fv-chiamate > div { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.fv-chiamate > div:last-child { border-bottom: 0; }
.fv-num { width: 132px; flex: none; white-space: nowrap; font-family: var(--font-num); font-size: 12.5px; color: var(--ink); }
.fv-chi { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-durata { width: 44px; flex: none; text-align: right; font-family: var(--font-num); font-size: 12px; color: var(--ink-3); }

/* Gli stati della chiamata sono i token del prodotto (tema.css §stati):
   squilla, in IVR, connessa, con l'assistente — non tinte scelte qui. */
.fv-stato {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: color-mix(in srgb, var(--tinta-stato) 16%, var(--panel-2));
  color: var(--tinta-stato);
  border: 1px solid color-mix(in srgb, var(--tinta-stato) 32%, var(--line));
}
.fv-stato i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-stato); flex: none; }
[data-stato="ai"] { --tinta-stato: var(--s-ai); }
[data-stato="connessa"] { --tinta-stato: var(--s-live); }
[data-stato="squilla"] { --tinta-stato: var(--s-ring); }
[data-stato="ivr"] { --tinta-stato: var(--s-ivr); }
.fv-trascritto { padding: 10px 14px; border-top: var(--bordo); font-size: 11.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ai) 8%, var(--panel)); }
.fv-trascritto b { display: block; margin-bottom: 3px; color: var(--ai); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* --- Finta schermata di Chat: chiamata con lo schermo condiviso --- */
.finta-riunione { background: var(--ground); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
/* Il palco è la superficie, la finestra condivisa ci sta sopra: due toni
   diversi in tutti e due i temi, altrimenti in chiaro restava un
   rettangolo bianco dentro un rettangolo bianco. */
.fr-palco { flex: 1; position: relative; display: grid; place-items: center; border: var(--bordo); border-radius: var(--r-lg); background: var(--panel-2); overflow: hidden; }
.fr-finestra { width: 68%; padding: 18px; display: flex; flex-direction: column; gap: 9px; border: var(--bordo); border-radius: var(--r-md); background: var(--panel); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .55); }
.fr-finestra i { display: block; height: 9px; border-radius: 4px; background: color-mix(in srgb, var(--ink-3) 24%, transparent); }
.fr-finestra i:nth-child(1) { width: 46%; background: color-mix(in srgb, var(--prod-chat) 46%, transparent); }
.fr-finestra i:nth-child(2) { width: 100%; }
.fr-finestra i:nth-child(3) { width: 88%; }
.fr-finestra i:nth-child(4) { width: 94%; }
.fr-finestra i:nth-child(5) { width: 60%; }
.fr-etichetta {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent); border: var(--bordo);
  font-size: 11.5px; color: var(--ink-2);
}
.fr-etichetta i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; }
.fr-volti { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.fr-volti span {
  width: 56px; height: 42px; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #06251C; border: 2px solid transparent;
  background: color-mix(in srgb, var(--prod-chat) 60%, var(--ink-2));
}
.fr-volti span[data-parla] { border-color: var(--prod-chat); }
.fr-barra { display: flex; justify-content: center; gap: 10px; }
.fr-barra i {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: var(--bordo);
}
.fr-barra i::before {
  content: ""; width: 18px; height: 18px; background: var(--ink-2);
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.fr-barra i[data-acceso] { background: color-mix(in srgb, var(--prod-chat) 22%, var(--panel-2)); border-color: color-mix(in srgb, var(--prod-chat) 40%, var(--line)); }
.fr-barra i[data-acceso]::before { background: var(--prod-chat); }
.fr-barra i[data-chiudi] { background: var(--danger); border-color: var(--danger); }
.fr-barra i[data-chiudi]::before { background: var(--ground); }
.ic-mic::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.6' width='6' height='11' rx='3'/%3E%3Cpath d='M5.4 11.4a6.6 6.6 0 0 0 13.2 0M12 18v3.4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.6' width='6' height='11' rx='3'/%3E%3Cpath d='M5.4 11.4a6.6 6.6 0 0 0 13.2 0M12 18v3.4'/%3E%3C/svg%3E"); }
.ic-video::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6' width='13' height='12' rx='2.2'/%3E%3Cpath d='m15.6 11 5.8-3.4v8.8L15.6 13z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6' width='13' height='12' rx='2.2'/%3E%3Cpath d='m15.6 11 5.8-3.4v8.8L15.6 13z'/%3E%3C/svg%3E"); }
.ic-schermo::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.4' width='18.8' height='12.4' rx='2'/%3E%3Cpath d='M8.4 20.4h7.2M12 8.2v5M9.6 10.4 12 8l2.4 2.4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.4' width='18.8' height='12.4' rx='2'/%3E%3Cpath d='M8.4 20.4h7.2M12 8.2v5M9.6 10.4 12 8l2.4 2.4'/%3E%3C/svg%3E"); }
.ic-chiudi::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 14.2c5-4.6 13.8-4.6 18.8 0l-2.6 2.8-3.9-1.7-.5-2.7a11 11 0 0 0-4.8 0l-.5 2.7-3.9 1.7z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 14.2c5-4.6 13.8-4.6 18.8 0l-2.6 2.8-3.9-1.7-.5-2.7a11 11 0 0 0-4.8 0l-.5 2.7-3.9 1.7z'/%3E%3C/svg%3E"); }

/* --- Finta schermata di Mail: la ricerca su tutta la posta --- */
.finta-cerca { background: var(--ground); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-ui); }
.fs-barra { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--panel); border: var(--bordo); }
.fs-barra .fs-lente {
  width: 15px; height: 15px; flex: none; background: var(--ink-3);
  mask-position: center; -webkit-mask-position: center;
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m21 21-5.6-5.6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m21 21-5.6-5.6'/%3E%3C/svg%3E");
}
.fs-barra b { font-size: 13px; color: var(--ink); font-weight: 400; }
.fs-barra em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.fs-elenco { border: var(--bordo); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.fs-elenco > div { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.fs-elenco > div:last-child { border-bottom: 0; }
.fs-chi { width: 148px; flex: none; font-size: 12.5px; color: var(--ink); }
.fs-testo { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-testo mark { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--mark) 34%, transparent); color: var(--ink); }
.fs-dove { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--panel-3); font-size: 10.5px; color: var(--ink-3); }
.fs-quando { width: 54px; flex: none; text-align: right; font-family: var(--font-num); font-size: 11px; color: var(--ink-3); }

/* --- La cornice del telefono, per le schermate dell'app --- */
.telefono-cornice {
  width: 280px; flex: none; margin: 0 auto; padding: 9px;
  border-radius: 34px; background: var(--panel-3); border: 1px solid var(--line);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .85), var(--glow);
}
.telefono-schermo { position: relative; height: 500px; border-radius: 26px; overflow: hidden; background: var(--ground); display: flex; flex-direction: column; }
.ft-testa { padding: 12px 14px; border-bottom: var(--bordo); background: var(--panel); display: flex; align-items: center; gap: 9px; }
.ft-testa .fc-testo span { color: var(--ok); }
.ft-messaggi { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; }
.ft-riga { padding: 11px 12px; border-top: var(--bordo); display: flex; align-items: center; gap: 9px; }

/* L'avviso che arriva sul telefono: lo stesso pezzo sovrapposto alla
   schermata (`--sopra`) e da solo dentro un ritaglio. */
.avviso-push {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .75);
}
.avviso-push .ap-icona { width: 26px; height: 26px; flex: none; border-radius: 50% 50% 50% 6px; background: linear-gradient(150deg, var(--segno-a), var(--segno-b)); }
.avviso-push b { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.avviso-push span { display: block; font-size: 12px; color: var(--ink); line-height: 1.35; }
.avviso-push--sopra { position: absolute; top: 10px; left: 8px; right: 8px; z-index: 2; }

/* ------------------------------------------------------------
   9b. Le annotazioni sopra una schermata
   I numeri stanno su un involucro attorno al telaio e sono posizionati
   in percentuale: la schermata dentro è ridotta da `suite.js`, e una
   percentuale resta al suo posto qualunque sia la riduzione.

   Sotto i 780px il telaio scorre di lato (il corpo va in `overflow-x`),
   e allora un numero in percentuale indicherebbe il punto sbagliato:
   lì i pallini spariscono e resta la legenda numerata, che dice le
   stesse cose in parole.
   ------------------------------------------------------------ */
.annotata { position: relative; }
.pin {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 12px; font-weight: 700;
  background: var(--tinta-pin, var(--accent)); color: var(--ground);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tinta-pin, var(--accent)) 24%, transparent),
              0 8px 16px -8px rgba(0, 0, 0, .7);
}
.pin--voce { --tinta-pin: var(--prod-voce); }
.pin--chat { --tinta-pin: var(--prod-chat); color: #06251C; }
.pin--mail { --tinta-pin: var(--prod-mail); color: #2B1B02; }
@media (max-width: 780px) { .pin { display: none; } }

.spiegazioni {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-2) var(--sp-3);
}
.spiegazioni li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.spiegazioni b { color: var(--ink); }
.spiegazioni .n {
  flex: none; margin-top: 1px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--tinta-pin, var(--accent)) 20%, var(--panel-2));
  color: var(--tinta-pin, var(--accent));
}
.spiegazioni--voce { --tinta-pin: var(--prod-voce); }
.spiegazioni--chat { --tinta-pin: var(--prod-chat); }
.spiegazioni--mail { --tinta-pin: var(--prod-mail); }

/* ------------------------------------------------------------
   9c. I ritagli in primo piano
   Un pezzo di interfaccia a grandezza naturale, con una riga che dice
   cosa fa: quello che in una schermata intera si perde perché è alto
   trenta pixel su cinquecento.
   ------------------------------------------------------------ */
.focus-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .focus-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .focus-griglia { grid-template-columns: minmax(0, 1fr); } }
.focus { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--bordo); border-radius: var(--r-lg); background: var(--panel); }
.focus-vista {
  padding: 14px; border-radius: var(--r-md); background: var(--ground);
  border: 1px solid var(--line-soft); overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; min-height: 96px; justify-content: center;
}
.focus b { font-size: 15px; }
.focus p { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* Nel ritaglio i pezzi stanno da soli: niente larghezze legate alla
   schermata da cui vengono. */
.focus-vista .fc-msg { max-width: 100%; }
.focus-vista .fc-ai, .focus-vista .fm-radar { max-width: 100%; }
.focus-vista .fm-lato { width: 100%; padding: 0; background: transparent; border-right: 0; }

/* Selezione multipla + azione: il pezzo che spiega le automazioni */
.scelta-msg { display: flex; flex-direction: column; gap: 6px; }
.scelta-msg > div { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--panel-2); font-size: 12px; color: var(--ink-2); }
.scelta-msg > div[data-scelto] { background: color-mix(in srgb, var(--prod-chat) 18%, var(--panel-2)); color: var(--ink); }
.scelta-msg .spunta-q { width: 15px; height: 15px; flex: none; border-radius: 4px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 10px; color: transparent; }
.scelta-msg > div[data-scelto] .spunta-q { background: var(--prod-chat); border-color: var(--prod-chat); color: #06251C; }
.scelta-azione { align-self: flex-start; padding: 6px 11px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 700; background: var(--prod-chat); color: #06251C; }

/* La chip dell'invio in coda */
.chip-coda { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; width: fit-content; font-size: 11.5px; color: var(--ink-2); background: var(--panel-2); border: var(--bordo); }
.chip-coda i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }

/* ------------------------------------------------------------
   9e. Piccole utilità di pagina
   ------------------------------------------------------------ */
.testo-fascia { margin-top: var(--sp-3); font-size: 15.5px; color: var(--ink-2); max-width: 54ch; }
.lista-spunte { display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-3); }
.lista-spunte li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.lista-spunte li::before { content: "✓"; flex: none; font-weight: 700; color: var(--tinta-prodotto, var(--accent)); }
.icona-grande { width: 92px; height: 92px; border-radius: 26%; margin: 0 auto; }

.sotto-apertura { margin-top: var(--sp-5); }
.sotto-schermata { margin-top: var(--sp-5); }

/* ------------------------------------------------------------
   9f. Schermate vere (pagina Chat)
   Immagini dell'app, non riproduzioni: il telaio resta, dentro c'è un
   <img>. Le righe «non fa» hanno la stessa misura di quelle «fa»: sono
   un'informazione, non una nota a piè di pagina.
   ------------------------------------------------------------ */
.telaio > img { display: block; width: 100%; height: auto; background: var(--ground); }
.lista-no { display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.lista-no li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-3); }
.lista-no li::before { content: "✕"; flex: none; font-weight: 700; color: var(--danger); }
.funzione-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); align-items: start; }
.funzione-testa .lista-spunte { margin-top: 0; }
.funzione-figura { margin-top: var(--sp-5); }
@media (max-width: 900px) { .funzione-testa { grid-template-columns: minmax(0, 1fr); } }

.breve { border: var(--bordo); border-radius: var(--r-xl); background: var(--panel); overflow: hidden; }
.breve-riga {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-3);
  padding: 16px var(--sp-4); border-top: 1px solid var(--line-soft); color: var(--ink-2); text-decoration: none; font-size: 14.5px;
}
.breve-riga:hover { background: var(--panel-2); text-decoration: none; }
.breve-riga b { color: var(--ink); font-weight: 600; }
.breve-si::before { content: "✓ "; font-weight: 700; color: var(--tinta-breve, var(--prod-chat)); }
.breve--mail { --tinta-breve: var(--prod-mail); }
.breve-no { color: var(--ink-3); }
.breve-no::before { content: "✕ "; font-weight: 700; color: var(--danger); }
.breve-testa { border-top: 0; background: var(--panel-2); font-family: var(--font-num); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.breve-testa b { color: var(--ink-3); font-weight: 400; }
.breve-testa:hover { background: var(--panel-2); }
@media (max-width: 760px) {
  .breve-riga { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .breve-testa { display: none; }
}

.galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); align-items: start; }
.ritaglio { margin: 0; }
.galleria > .ritaglio:only-child { max-width: 640px; }
.galleria--telefoni { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.galleria--telefoni .ritaglio img { border-radius: 22px; }
@media (max-width: 560px) { .galleria--telefoni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ritaglio img { display: block; width: 100%; height: auto; border: var(--bordo); border-radius: var(--r-md); background: var(--ground); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .6); }
.ritaglio figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
.ritaglio figcaption b { color: var(--ink-2); }

.coppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); gap: var(--sp-3); align-items: end; }
@media (max-width: 640px) { .coppia { grid-template-columns: minmax(0, 1fr); } .telefono-scatto { max-width: 260px; margin: 0 auto; } }
.telefono-scatto { display: block; width: 100%; height: auto; border: var(--bordo); border-radius: 22px; background: var(--ground); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }

/* ------------------------------------------------------------
   10. Piede
   ------------------------------------------------------------ */
.piede { padding: var(--sp-5) 0 var(--sp-4); background: var(--ground); border-top: var(--bordo); font-size: 14px; color: var(--ink-3); }
.piede-che { margin-top: var(--sp-2); max-width: 320px; }
.piede .righe { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .85fr)); gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .piede .righe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .piede-chi { grid-column: 1 / -1; } }
@media (max-width: 560px) { .piede-scrivi { grid-column: 1 / -1; } }
.piede nav, .piede-scrivi { display: flex; flex-direction: column; gap: 8px; }
.piede nav b, .piede-scrivi b { font-family: var(--font-num); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 2px; }
.piede nav a, .piede-scrivi a { color: var(--ink-2); }
.piede-scrivi span { color: var(--ink-3); line-height: 1.5; }
.piede-scrivi .posta { color: var(--ink-2); }
.piede .coda b { color: var(--ink-2); font-weight: 500; }
.piede .coda { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; }

/* ------------------------------------------------------------
   11. Chiusura (CTA finale)
   ------------------------------------------------------------ */
.chiusura { padding: var(--sp-7) 0; text-align: center; }
.chiusura h2 { font-size: clamp(26px, 3.6vw, 38px); max-width: 700px; margin: 0 auto; }
.chiusura p { margin-top: var(--sp-3); color: var(--ink-2); max-width: 560px; margin-left: auto; margin-right: auto; }
.chiusura .azioni { margin-top: var(--sp-4); display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.chiusura .sotto { margin-top: var(--sp-3); font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------------------------------------
   11b. La scenetta: stessa telefonata, due mattine
   Due corsie che si recitano insieme (`suite.js` §scenetta): a sinistra
   l'ufficio senza la suite, spento e lento; a destra con, nella tinta del
   marchio. Ogni passo ha la sua ora, l'orologio in testa alla corsia la
   segue, e la barra sotto è il tempo passato su una scala di 110 minuti:
   la differenza si vede prima di leggerla.

   Lo stato «da recitare» esiste solo con `.anima`, che mette lo script:
   senza JavaScript o con meno movimento la scena è già finita, intera.
   ------------------------------------------------------------ */
/* `clip` e non `hidden`: `hidden` farebbe della fascia un contenitore di
   scorrimento, e il tabellone non resterebbe in vista sul telefono. */
.scenetta-fascia { overflow-x: clip; }
.scenetta { position: relative; margin-top: var(--sp-5); }

/* ── lo squillo ── */
.sc-squillo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  width: fit-content; max-width: 100%; margin: 0 auto var(--sp-4);
  padding: 14px 22px 14px 14px; border-radius: 999px;
  background: var(--panel); border: var(--bordo); box-shadow: var(--glow);
}
.sc-squillo-icona { position: relative; width: 48px; height: 48px; flex: none; }
.sc-squillo-icona img { position: relative; width: 48px; height: 48px; border-radius: 50%; }
.sc-squillo-icona i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--prod-voce); opacity: 0;
}
.sc-squillo-testo { display: flex; flex-direction: column; line-height: 1.25; }
.sc-squillo-testo b { font-size: 16px; }
.sc-squillo-testo span { font-family: var(--font-num); font-size: 12.5px; color: var(--ink-3); }
.sc-squillo-dice {
  font-size: 15px; font-style: italic; color: var(--ink-2);
  padding-left: 16px; border-left: 1px solid var(--line);
}
.scenetta.squilla .sc-squillo-icona i { animation: sc-onda 1.4s ease-out infinite; }
.scenetta.squilla .sc-squillo-icona i + i { animation-delay: .7s; }
.scenetta.squilla .sc-squillo-icona img { animation: sc-vibra 1.4s ease-in-out infinite; }
@keyframes sc-onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes sc-vibra {
  0%, 40%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-9deg); }
  10%, 20%, 30% { transform: rotate(9deg); }
}

/* ── le corsie ── */
.sc-corsie { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; }
@media (max-width: 820px) { .sc-corsie { grid-template-columns: 1fr; } }

.sc-corsia {
  position: relative; padding: 20px 20px 18px;
  border-radius: var(--r-xl); border: var(--bordo); background: var(--panel);
}
.sc-corsia--senza { background: color-mix(in srgb, var(--panel) 60%, var(--ground)); }
.sc-corsia--con {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--accent) 80%, transparent);
}
.sc-corsia--con::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}

.sc-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-chi {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-num); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
:is(.sc-corsia--con, .sc-scheda--con) .sc-chi { color: var(--accent); }
.sc-chi .brand-mark { width: 20px; height: 20px; }
.sc-orologio {
  font-family: var(--font-num); font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink);
}
:is(.sc-corsia--senza, .sc-scheda--senza) .sc-orologio { color: var(--ink-2); }
.sc-orologio.scatta { animation: sc-scatta .5s cubic-bezier(.2, .8, .2, 1); }
:is(.sc-corsia--senza, .sc-scheda--senza) .sc-orologio.scatta { animation-name: sc-scatta-male; }
@keyframes sc-scatta { from { transform: translateY(-6px); opacity: .3; } }
@keyframes sc-scatta-male {
  0% { transform: translateY(-6px); color: var(--danger); opacity: .3; }
  60% { color: var(--danger); }
}

/* La barra è il tempo passato: piena = 110 minuti. */
.sc-barra { height: 4px; margin: 12px 0 16px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.sc-barra i {
  display: block; height: 100%; width: var(--pieno, 100%); border-radius: inherit;
  transition: width 1.1s cubic-bezier(.3, .7, .2, 1);
}
:is(.sc-corsia--senza, .sc-scheda--senza) .sc-barra i { background: linear-gradient(90deg, var(--warn), var(--danger)); }
:is(.sc-corsia--con, .sc-scheda--con) .sc-barra i { background: linear-gradient(90deg, var(--prod-voce), var(--accent)); min-width: 6px; }
:is(.sc-corsia--senza, .sc-scheda--senza) .sc-barra { --pieno: 98%; }
:is(.sc-corsia--con, .sc-scheda--con) .sc-barra { --pieno: 2.7%; }

/* ── i passi ── */
.sc-passi { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sc-passo {
  display: grid; grid-template-columns: 44px 30px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.sc-corsia--con .sc-passo { color: var(--ink); }
.sc-ora { font-family: var(--font-num); font-size: 12.5px; color: var(--ink-3); padding-top: 5px; }
.sc-app { width: 30px; height: 30px; border-radius: 24%; }
.sc-app--ingegno {
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(151deg, #6B7C96, #3A4A63 84%);
}
.sc-segno {
  justify-self: center; margin-top: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--neutro); opacity: .7;
}
.sc-segno--male { background: var(--danger); opacity: 1; }
.sc-chip {
  display: inline-flex; align-items: center; margin-right: 4px; padding: 0 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.7; vertical-align: 1px;
  color: var(--ai); background: color-mix(in srgb, var(--ai) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ai) 35%, transparent);
}
.sc-chip--ingegno { color: var(--ink-2); background: var(--panel-3); border-color: var(--line); }

.sc-esito {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
  font-size: 14.5px; line-height: 1.45;
}
.sc-esito--male { color: var(--ink-2); background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.sc-esito--male b { color: var(--danger); }
.sc-esito--bene { color: var(--ink); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.sc-esito--bene b { color: var(--ok); }

/* ── il conto ── */
.sc-conto { margin-top: var(--sp-5); text-align: center; }
.sc-conto-numero { font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--ink-2); }
.sc-conto-numero b {
  display: inline-block; margin-right: 6px;
  font-size: clamp(64px, 9vw, 112px); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--prod-voce), var(--accent) 45%, var(--prod-chat));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sc-conto-dice { margin: 8px auto 0; max-width: 34em; font-size: 17px; color: var(--ink-2); }
.sc-conto-dice em { font-style: normal; color: var(--ink); font-weight: 600; }
.sc-rivedi {
  margin-top: var(--sp-3); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-2);
  background: transparent; border: var(--bordo);
  transition: color .18s, border-color .18s;
}
.sc-rivedi:hover { color: var(--ink); border-color: var(--accent-dim); }
.sc-rivedi[hidden] { display: none; }

/* ── sul telefono: il tabellone e le corsie a schede ── */
/* Una sotto l'altra, le corsie si recitavano insieme e se ne vedeva una
   sola: «Con la suite» finiva sotto lo schermo e il confronto, che è il
   punto, spariva. Qui i due orologi stanno sempre in vista nel tabellone,
   che fa da linguette, e si vede una corsia alla volta: prima quella con
   la suite, poi da sola passa all'altra (`suite.js` §8). Un tocco su una
   linguetta e si sceglie a mano. Senza script resta tutto in colonna. */
.sc-tabellone { display: none; }
@media (max-width: 820px) {
  .scenetta.anima .sc-tabellone {
    position: sticky; top: 72px; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 12px; padding: 6px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .sc-scheda {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 12px 9px; border-radius: var(--r-md); cursor: pointer; text-align: left;
    font: inherit; color: inherit; background: var(--panel-2); border: var(--bordo);
    transition: border-color .2s, background .2s;
  }
  .sc-scheda .sc-chi { font-size: 10.5px; letter-spacing: .08em; gap: 6px; white-space: nowrap; }
  .sc-scheda .sc-chi .brand-mark { width: 16px; height: 16px; }
  .sc-scheda .sc-orologio { font-size: 22px; line-height: 1.1; }
  .sc-scheda .sc-barra { align-self: stretch; margin: 4px 0 0; height: 3px; }
  .sc-scheda[aria-selected="true"] { background: var(--panel); }
  .sc-scheda--con[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .sc-scheda--senza[aria-selected="true"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

  .scenetta.anima .sc-corsia:not(.mostrata) { display: none; }
  .scenetta.anima .sc-corsia .sc-testa,
  .scenetta.anima .sc-corsia > .sc-barra { display: none; }
  .scenetta.anima .sc-corsia.mostrata { animation: sc-cambia .4s ease; }
  .sc-squillo-dice { padding-left: 0; border-left: 0; text-align: center; }
  .sc-squillo { border-radius: var(--r-xl); padding: 14px 18px; }
}
@keyframes sc-cambia { from { opacity: 0; transform: translateY(8px); } }

/* ── la recita: solo con `.anima`, che mette lo script ── */
.scenetta.anima .sc-corsie,
.scenetta.anima .sc-passo,
.scenetta.anima .sc-esito,
.scenetta.anima .sc-conto {
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}
.scenetta.anima .sc-corsie:not(.acceso) { opacity: 0; transform: translateY(18px); }
.scenetta.anima .sc-passo:not(.acceso) { opacity: 0; transform: translateX(-14px); }
.scenetta.anima .sc-corsia--con .sc-passo:not(.acceso) { transform: translateX(14px) scale(.98); }
.scenetta.anima .sc-esito:not(.acceso) { opacity: 0; transform: scale(.96); }
.scenetta.anima .sc-conto:not(.acceso) { opacity: 0; transform: translateY(14px); filter: blur(4px); }
.scenetta.anima .sc-barra { --pieno: var(--ora-pieno, 0%); }
/* L'icona dell'app «arriva» quando il passo si accende: è il prodotto che lavora. */
.scenetta.anima .sc-passo.acceso .sc-app { animation: sc-app-arriva .6s cubic-bezier(.3, 1.5, .5, 1) backwards .1s; }
.scenetta.anima .sc-passo.acceso .sc-chip { animation: sc-chip-luce 1.2s ease .3s backwards; }
.scenetta.anima .sc-corsia--senza .sc-passo.acceso:has(.sc-segno--male) { animation: sc-scuoti .45s ease .25s; }
@keyframes sc-app-arriva { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }
@keyframes sc-chip-luce { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes sc-scuoti { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .scenetta .sc-squillo-icona i, .scenetta .sc-squillo-icona img { animation: none !important; }
  .sc-barra i { transition: none; }
}

/* ------------------------------------------------------------
   12. Comparsa allo scorrimento
   Il `.js` non è pignoleria: senza JavaScript queste fasce non
   riceverebbero mai la classe `visto`, e la pagina resterebbe vuota da
   qui in giù — con lo script bloccato il contenuto c'è, solo non si
   anima. `.js .appare.visto` deve avere più peso di `.js .appare`,
   quindi qui l'ordine conta quanto le classi (sito.css §16).
   ------------------------------------------------------------ */
.js .appare { opacity: 0; transform: translateY(16px); }
.js .appare.visto { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .js .appare { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   13. Tema (selettore chiaro/scuro/auto)
   ------------------------------------------------------------ */
.tema { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: var(--bordo); background: var(--panel-2); }
.tema-scelta {
  width: 28px; height: 24px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-3); cursor: pointer; position: relative; display: grid; place-items: center;
}
.tema-scelta[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--glow); }
.tema-scelta::before { content: ""; width: 14px; height: 14px; background: currentColor; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.tema-scelta[data-modo="chiaro"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cpath d='M12 2.6v2.3M12 19.1v2.3M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M2.6 12h2.3M19.1 12h2.3M4.9 19.1l1.6-1.6M17.5 6.5l1.6-1.6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cpath d='M12 2.6v2.3M12 19.1v2.3M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M2.6 12h2.3M19.1 12h2.3M4.9 19.1l1.6-1.6M17.5 6.5l1.6-1.6'/%3E%3C/svg%3E"); }
.tema-scelta[data-modo="scuro"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.7A8.6 8.6 0 1 1 9.3 3.6a7 7 0 0 0 11.1 11.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.7A8.6 8.6 0 1 1 9.3 3.6a7 7 0 0 0 11.1 11.1z'/%3E%3C/svg%3E"); }
.tema-scelta[data-modo="auto"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.6' width='18.8' height='12.6' rx='2'/%3E%3Cpath d='M8.2 20.4h7.6M12 17.2v3.2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.6' width='18.8' height='12.6' rx='2'/%3E%3Cpath d='M8.2 20.4h7.6M12 17.2v3.2'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------
   14. Contatti
   Le schede dei prezzi, con il recapito al posto della cifra.
   ------------------------------------------------------------ */
.scheda-contatto .contatto-valore { margin-top: var(--sp-3); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.scheda-contatto .contatto-valore a { color: inherit; }

/* ------------------------------------------------------------
   15. FAQ
   ------------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; border: var(--bordo); }
.faq details { background: var(--panel); }
.faq summary { padding: 16px 18px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--ink-3); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 18px 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ------------------------------------------------------------
   16. Piccoli aiuti
   ------------------------------------------------------------ */
.centro { text-align: center; }
.solo-largo { display: block; }
@media (max-width: 780px) { .solo-largo { display: none; } }

/* Rimando esterno (la pagina Voce) */
.rimando {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: var(--bordo); border-radius: var(--r-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--prod-voce) 12%, var(--panel)), var(--panel));
}
.rimando .icona-prodotto { width: 56px; height: 56px; }
.rimando h2 { font-size: 22px; }
.rimando .testo-fascia { margin-top: 8px; font-size: 15px; }
.rimando .tasto { margin-left: auto; flex: none; }
@media (max-width: 640px) { .rimando { flex-direction: column; text-align: center; } }

/* ------------------------------------------------------------
   Prezzi e area rivenditori
   ------------------------------------------------------------ */
.apertura--prezzi { padding-bottom: var(--sp-5); }
.griglia-prezzi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3); align-items: stretch;
}
.scheda-prezzo {
  padding: clamp(24px, 3vw, 34px); border: var(--bordo); border-radius: var(--r-xl);
  background: var(--panel); box-shadow: 0 18px 50px -38px color-mix(in srgb, var(--ink) 34%, transparent);
}
.scheda-prezzo .occhiello { margin-bottom: var(--sp-2); }
.scheda-prezzo h2, .scheda-prezzo h3 { font-size: clamp(20px, 2.4vw, 26px); }
.scheda-prezzo .prezzo-valore { display: flex; align-items: baseline; gap: 8px; margin: var(--sp-4) 0 var(--sp-2); }
.prezzo-valore strong { font-size: clamp(38px, 5vw, 54px); line-height: 1; letter-spacing: -.055em; }
.prezzo-valore span { color: var(--ink-3); font-size: 15px; }
.prezzo-descrizione { min-height: 74px; color: var(--ink-2); }
.scheda-prezzo ul { display: grid; gap: 10px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bordo); }
.scheda-prezzo li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.scheda-prezzo li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.scheda-prezzo--ai { border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--ai) 9%, var(--panel)), var(--panel) 58%); }
.nota-prezzi { margin-top: var(--sp-4); color: var(--ink-3); font-size: 13.5px; }
.richiamo-prezzi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(24px, 4vw, 42px); border: var(--bordo); border-radius: var(--r-xl); background: var(--panel);
}
.richiamo-prezzi > div { max-width: 650px; }
.richiamo-prezzi h2 { font-size: clamp(25px, 3.6vw, 36px); }
.richiamo-prezzi p:not(.occhiello) { margin-top: var(--sp-2); color: var(--ink-2); }
.gate-rivenditori {
  min-height: calc(100svh - 68px); padding: var(--sp-5) var(--gutter);
  display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%);
}
.gate-carta {
  width: min(100%, 480px); padding: clamp(28px, 5vw, 48px); text-align: center;
  border: var(--bordo); border-radius: var(--r-xl); background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 30px 90px -48px color-mix(in srgb, var(--ink) 48%, transparent);
}
.gate-segno {
  width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto var(--sp-3);
  border-radius: 15px; background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--accent); font-size: 23px; font-weight: 800;
}
.gate-carta .occhiello { justify-content: center; }
.gate-carta h1 { font-size: clamp(28px, 5vw, 38px); }
.gate-carta > p:not(.occhiello) { margin-top: var(--sp-2); color: var(--ink-2); }
.gate-carta form { display: grid; gap: 10px; margin-top: var(--sp-4); text-align: left; }
.gate-carta label { font-size: 13px; font-weight: 700; }
.gate-carta input {
  width: 100%; min-height: 48px; padding: 10px 13px; border: var(--bordo); border-radius: var(--r-sm);
  background: var(--ground); color: var(--ink); font: inherit;
}
.gate-carta input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-carta button { width: 100%; margin-top: 5px; }
.errore-password { color: var(--danger, #C44); font-size: 13px; }
.gate-ritorno { display: inline-block; margin-top: var(--sp-3); font-size: 13px; }
#prezzi-rivenditori[hidden] { display: none; }
#prezzi-rivenditori .titolo-fascia { max-width: 780px; }
@media (max-width: 820px) {
  .griglia-prezzi { grid-template-columns: 1fr; }
  .prezzo-descrizione { min-height: 0; }
  .richiamo-prezzi { align-items: flex-start; flex-direction: column; }
}

/* ------------------------------------------------------------
   9d. Il riflettore sopra una schermata
   I numeri sulla schermata, e l'elenco sotto, sono tasti: premuto uno,
   la schermata si avvicina a quel pezzo, il resto si spegne e una riga
   dice perché conta. Le zone sono in percentuale dell'immagine
   (`data-zona="x y larghezza altezza"`), quindi valgono a ogni misura —
   anche sul telefono, dove la schermata non scorre ma si rimpicciolisce.
   Il velo è il fondo della pagina, non un nero: in chiaro schiarisce, in
   scuro scurisce.
   ------------------------------------------------------------ */
.riflettore { position: relative; }
.riflettore-scena { position: relative; overflow: hidden; background: var(--ground); }
.riflettore-tela {
  position: relative; transform-origin: 0 0;
  transform: translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--k, 1));
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.riflettore-tela > img { display: block; width: 100%; height: auto; }
.riflettore-luce {
  position: absolute; pointer-events: none; opacity: 0;
  left: var(--zx, 0%); top: var(--zy, 0%); width: var(--zw, 0%); height: var(--zh, 0%);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--prod-chat), 0 0 0 200vmax color-mix(in srgb, var(--ground) 64%, transparent);
  transition: opacity .35s;
}
.riflettore[data-attivo] .riflettore-luce { opacity: 1; }
.riflettore .riflettore-pin {
  display: grid; cursor: pointer; border: 0; padding: 0;
  animation: pin-respiro 2.6s ease-in-out infinite;
  transition: opacity .25s, transform .2s;
}
.riflettore .riflettore-pin:hover,
.riflettore .riflettore-pin:focus-visible { transform: translate(-50%, -50%) scale(1.15); }
.riflettore-pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.riflettore[data-attivo] .riflettore-pin { opacity: 0; pointer-events: none; animation: none; }
@keyframes pin-respiro {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--prod-chat) 24%, transparent), 0 8px 16px -8px rgba(0, 0, 0, .7); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--prod-chat) 10%, transparent), 0 8px 16px -8px rgba(0, 0, 0, .7); }
}

/* La riga che spiega, sopra la schermata in basso: si chiude con il suo
   tasto, con Esc, o toccando la schermata. */
.riflettore-nota {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; margin: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--prod-chat) 45%, var(--line));
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
  font-size: 0.875rem; line-height: 1.4; color: var(--ink-2);
}
.riflettore-nota[hidden] { display: none; }
/* Sul telefono la schermata è piccola, e una riga sopra ne coprirebbe
   metà: lì la riga va sotto. */
@media (max-width: 620px) {
  .riflettore-nota { position: static; margin: 8px 0 0; box-shadow: none; }
}
.riflettore-nota b { color: var(--ink); }
.riflettore-nota .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-num); font-size: 0.75rem; font-weight: 700;
  background: var(--prod-chat); color: var(--ground);
}
.riflettore-nota span:nth-child(2) { flex: 1; min-width: 0; }
.riflettore-chiudi {
  flex: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.riflettore-chiudi:hover { color: var(--ink); }

/* L'elenco sotto: ogni riga è il tasto dello stesso numero. */
.riflettore-voci button {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: var(--r-sm);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.riflettore-voci button:hover { background: var(--panel-2); }
.riflettore-voci button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--prod-chat) 12%, var(--panel-2));
}
.riflettore-voci button[aria-pressed="true"] .n { background: var(--prod-chat); color: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  .riflettore-tela, .riflettore-luce { transition: none; }
  .riflettore .riflettore-pin { animation: none; }
}

/* ------------------------------------------------------------
   9e. Il cruscotto di Sintònia Voce, con il flusso delle chiamate
   Copiato da `sito/schermi.css` (§3) insieme al suo HTML, che sta in
   `voce.html`: è la stessa schermata della home di sintoniavoce.it, e i
   due siti non condividono fogli. Le variabili che usa ci sono in tutti
   e due i temi; se là cambia, qui si ricopia.
   ------------------------------------------------------------ */
/* ============================================================
   3. IL CRUSCOTTO LIVE — 1180 × 660
   La schermata che si guarda per prima quando si entra: le
   chiamate che stanno succedendo adesso, da dove entrano e dove
   vanno a finire.
   ============================================================ */
.cru {
  display: flex;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.4;
}

/* ---- menu di sinistra ---- */
.cru-nav {
  flex: none; width: 168px;
  background: var(--panel); border-right: var(--bordo);
  display: flex; flex-direction: column;
}
.cru-marchio {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; border-bottom: var(--bordo);
}
.cru-marchio .brand-mark { width: 22px; height: 22px; }
.cru-marchio .brand-name { font-size: 13.5px; }
.cru-voci { display: grid; gap: 1px; padding: 8px; flex: 1; align-content: start; }
.cru-voce {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: var(--r-sm);
  font-size: 12px; color: var(--ink-2);
}
.cru-voce i {
  flex: none; width: 15px; height: 15px; background: currentColor; opacity: .85;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.cru-voce[data-qui] {
  color: var(--ink); background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--accent);
}
.cru-nav-piede {
  padding: 10px 14px; border-top: var(--bordo);
  font-size: 10.5px; color: var(--ink-3);
}
.cru-nav-piede span { display: block; font-family: var(--font-num); margin-top: 1px; }

/* ---- barra in alto ---- */
.cru-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cru-top {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: var(--bordo);
  background: var(--panel);
}
.cru-briciola { font-size: 10.5px; color: var(--ink-3); }
.cru-briciola b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.2; }
.cru-top-dx { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pillola {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ink-2); font-size: 11px; white-space: nowrap;
}
.pillola i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--ok);
}
.pillola--attesa {
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.pillola--attesa i { background: var(--warn); }

.cru-ora {
  font-family: var(--font-num); font-size: 15px; color: var(--ink);
  letter-spacing: .04em; text-align: right; line-height: 1.1;
}
.cru-ora small { display: block; font-size: 8.5px; letter-spacing: .12em; color: var(--ink-3); }

/* ---- impaginazione del contenuto ---- */
.cru-griglia {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 270px;
  gap: 12px; padding: 14px 16px;
}
/* Le due colonne hanno due pezzi ciascuna, e il secondo **riempie**: senza,
   in fondo alla schermata restava una striscia vuota che nel pannello vero
   non c'è, e la miniatura sembrava tagliata male. */
.cru-col {
  display: grid; gap: 14px; min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.cru-col > .cru-carta:last-child { display: flex; flex-direction: column; min-height: 0; }
.cru-col > .cru-carta:last-child > .cru-curva,
.cru-col > .cru-carta:last-child > .cru-elenco { flex: 1; min-height: 0; overflow: hidden; }

.cru-carta {
  background: var(--panel); border: var(--bordo); border-radius: var(--r-md);
  overflow: hidden;
}
.cru-carta-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: var(--bordo);
}
.cru-carta-testa b {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.cru-carta-testa .nota { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }

/* ---- il flusso: tre colonne di nodi, e le chiamate che ci corrono ----
   Le misure qui sotto NON si toccano una per volta: i percorsi dei
   pallini (`.cru-scia`) sono coordinate assolute calcolate su queste.
   Colonne 176, distanza 52 → 176·3 + 52·2 = 632. Nodi alti 70,
   distanza 20, prima riga a 32 dal bordo. */
.cru-flusso { position: relative; padding: 16px; }
.cru-flusso-griglia {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 176px); gap: 52px;
  width: 632px;
}
.cru-col-nome {
  height: 22px; margin-bottom: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.cru-nodo {
  display: flex; align-items: center; gap: 9px;
  height: 70px; margin-bottom: 20px; padding: 0 11px;
  background: var(--panel-2);
  border: 1px solid var(--line); border-left: 3px solid var(--tinta, var(--line));
  border-radius: var(--r-sm);
}
.cru-nodo:last-child { margin-bottom: 0; }
.cru-nodo--vivo {
  border-color: color-mix(in srgb, var(--tinta) 55%, var(--line));
  border-left-color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 8%, var(--panel-2));
}
.cru-nodo-segno {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
  color: var(--tinta);
  font-family: var(--font-num); font-size: 11px; font-weight: 500;
}
.cru-nodo-testo { flex: 1; min-width: 0; }
.cru-nodo-testo b { display: block; font-size: 12px; font-weight: 500; color: var(--ink); }
.cru-nodo-testo span { display: block; font-size: 10.5px; color: var(--ink-3); }
.cru-nodo-conta {
  flex: none; min-width: 20px; text-align: right;
  font-family: var(--font-num); font-size: 15px; color: var(--ink);
}
.cru-nodo-conta[data-zero] { color: var(--ink-3); opacity: .5; }

/* La tela dei collegamenti: sta esattamente sopra la griglia, con
   l'origine nell'angolo del primo nodo. Le linee sono un SVG, i
   pallini sono div che corrono sugli stessi percorsi (`offset-path`).
   Un solo elenco di coordinate, non due. */
.cru-tela {
  position: absolute; top: 48px; left: 16px;
  width: 632px; height: 250px; z-index: 1;
  pointer-events: none;
}
.cru-tela svg { position: absolute; inset: 0; overflow: visible; }
.cru-tela path { fill: none; stroke: var(--line); stroke-width: 1.5; }

.cru-scia {
  position: absolute; top: 0; left: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 22%, transparent);
  offset-path: path(var(--via));
  offset-rotate: 0deg;
  animation: cru-corri var(--durata, 4s) linear infinite var(--ritardo, 0s);
}
@keyframes cru-corri {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.cru-legenda {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px 16px 12px; border-top: var(--bordo);
  font-size: 10.5px; color: var(--ink-3);
}
.cru-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cru-legenda i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta); }
.cru-legenda .quadro { border-radius: 2px; }

/* ---- riquadri di destra ---- */
.cru-quadri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cru-quadro {
  padding: 10px 12px 11px;
  background: var(--panel); border: var(--bordo); border-radius: var(--r-md);
}
.cru-quadro em {
  display: block; font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.cru-quadro b {
  display: block; margin-top: 3px;
  font-family: var(--font-num); font-size: 26px; font-weight: 400;
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.cru-quadro b small { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.cru-quadro span { display: block; margin-top: 5px; font-size: 10.5px; color: var(--ink-3); }
.cru-quadro .giu { color: var(--ok); }

/* La curva della giornata */
.cru-curva { padding: 10px 12px 8px; }
.cru-curva svg { width: 100%; height: 100%; display: block; }
.cru-curva .linea { fill: none; stroke: var(--accent); stroke-width: 2; }
.cru-curva .ombra { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.cru-curva .media { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .7; }
.cru-curva .adesso { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.cru-curva .punto { fill: var(--accent); }

/* L'elenco delle chiamate in corso */
.cru-elenco { display: grid; }
.cru-riga {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line-soft);
  border-left: 2px solid var(--tinta);
}
.cru-riga:first-child { border-top: 0; }
.cru-riga-testo { flex: 1; min-width: 0; }
.cru-riga-testo b { display: block; font-size: 11.5px; font-weight: 500; }
.cru-riga-testo span {
  display: block; font-family: var(--font-num); font-size: 9.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cru-riga-dx { flex: none; text-align: right; }
.cru-riga-dx b { display: block; font-family: var(--font-num); font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.cru-riga-dx span {
  display: block; font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta);
}


/* Il logotipo dentro la schermata non si nasconde sul telefono come
   quello della testata: è parte della schermata. */
.cru .brand-name { display: inline; }