/* La home di Sara dopo il film (9/10, Giorgio: «un sito precisamente come themochi.app», chiaro e professionale).
   Il film in cima resta com'è (sara.css). Da qui in giù: un foglio bianco che sale sopra il film, titoli grandi in
   Mona Sans, telefoni che sembrano veri (WhatsApp, Instagram, Telegram) e Sara, il robottino del film.
   Le classi nuove iniziano con «s-», i telefoni con «tel-»: non si scontrano con quelle vecchie di sara.css. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(/assets/font/mona-sans-latin-standard-normal.woff2) format("woff2"); }

:root {
  --s-carta: #ffffff;
  --s-nebbia: #f3f3f6;
  --s-nebbia-2: #ebebf0;
  --s-inchiostro: #14121f;
  --s-ardesia: #5f5d70;
  --s-filo: #e4e3ea;
  --s-viola: #6c4dff;
  --s-viola-chiaro: #efeaff;
  --s-grad: linear-gradient(100deg, #4f7bff 0%, #7b5cff 50%, #a45cff 100%);
  --s-casco: #ffb21e;
  --s-titoli: "Mona Sans", "Geist", system-ui, sans-serif;
  --s-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s-ombra: 0 1px 2px rgb(20 18 31 / 0.06), 0 12px 32px -12px rgb(20 18 31 / 0.18);
  --sfondo-wa: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cg fill=%22none%22 stroke=%22%235b4a32%22 stroke-opacity=%220.16%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 22c4-6 12-6 14 0s-6 10-7 14c-1-4-11-8-7-14z%22/%3E%3Ccircle cx=%2264%22 cy=%2220%22 r=%226%22/%3E%3Cpath d=%22M64 8v-4M64 36v-4M52 20h-4M80 20h-4M56 12l-3-3M75 31l-3-3M72 12l3-3M53 31l3-3%22/%3E%3Cpath d=%22M108 14h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-12l-8 6v-6h-2a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z%22/%3E%3Cpath d=%22M150 18l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z%22/%3E%3Cpath d=%22M14 70h18v8a9 9 0 0 1-18 0zM32 72h3a4 4 0 0 1 0 8h-3M12 92h24%22/%3E%3Cpath d=%22M60 64c6 0 10 4 10 10s-10 18-10 18-10-12-10-18 4-10 10-10z%22/%3E%3Ccircle cx=%2260%22 cy=%2274%22 r=%223%22/%3E%3Cpath d=%22M100 64h28M100 64v22h28V64M106 60v8M122 60v8M100 72h28%22/%3E%3Cpath d=%22M150 66v18M144 72c6-4 12-4 12 2%22/%3E%3Ccircle cx=%22146%22 cy=%2286%22 r=%224%22/%3E%3Cpath d=%22M20 120l10 18M30 120l-10 18%22/%3E%3Ccircle cx=%2218%22 cy=%22142%22 r=%224%22/%3E%3Ccircle cx=%2232%22 cy=%22142%22 r=%224%22/%3E%3Cpath d=%22M56 126c0-6 4-10 10-10s10 4 10 10-4 14-10 14-10-8-10-14zM66 140v12M60 148h12%22/%3E%3Cpath d=%22M104 122h24M104 130h24M104 138h16%22 /%3E%3Cpath d=%22M146 122a10 10 0 1 0 14 14 8 8 0 0 1-14-14z%22/%3E%3Cpath d=%22M30 168c6-6 14-6 20 0%22/%3E%3Cpath d=%22M84 166l6-6 6 6 6-6%22/%3E%3Ccircle cx=%22140%22 cy=%22166%22 r=%225%22/%3E%3C/g%3E%3C/svg%3E");
  --sfondo-wa-scuro: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cg fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%220.06%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 22c4-6 12-6 14 0s-6 10-7 14c-1-4-11-8-7-14z%22/%3E%3Ccircle cx=%2264%22 cy=%2220%22 r=%226%22/%3E%3Cpath d=%22M64 8v-4M64 36v-4M52 20h-4M80 20h-4M56 12l-3-3M75 31l-3-3M72 12l3-3M53 31l3-3%22/%3E%3Cpath d=%22M108 14h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-12l-8 6v-6h-2a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z%22/%3E%3Cpath d=%22M150 18l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z%22/%3E%3Cpath d=%22M14 70h18v8a9 9 0 0 1-18 0zM32 72h3a4 4 0 0 1 0 8h-3M12 92h24%22/%3E%3Cpath d=%22M60 64c6 0 10 4 10 10s-10 18-10 18-10-12-10-18 4-10 10-10z%22/%3E%3Ccircle cx=%2260%22 cy=%2274%22 r=%223%22/%3E%3Cpath d=%22M100 64h28M100 64v22h28V64M106 60v8M122 60v8M100 72h28%22/%3E%3Cpath d=%22M150 66v18M144 72c6-4 12-4 12 2%22/%3E%3Ccircle cx=%22146%22 cy=%2286%22 r=%224%22/%3E%3Cpath d=%22M20 120l10 18M30 120l-10 18%22/%3E%3Ccircle cx=%2218%22 cy=%22142%22 r=%224%22/%3E%3Ccircle cx=%2232%22 cy=%22142%22 r=%224%22/%3E%3Cpath d=%22M56 126c0-6 4-10 10-10s10 4 10 10-4 14-10 14-10-8-10-14zM66 140v12M60 148h12%22/%3E%3Cpath d=%22M104 122h24M104 130h24M104 138h16%22 /%3E%3Cpath d=%22M146 122a10 10 0 1 0 14 14 8 8 0 0 1-14-14z%22/%3E%3Cpath d=%22M30 168c6-6 14-6 20 0%22/%3E%3Cpath d=%22M84 166l6-6 6 6 6-6%22/%3E%3Ccircle cx=%22140%22 cy=%22166%22 r=%225%22/%3E%3C/g%3E%3C/svg%3E");   /* lo stesso disegno, per la chat in modalità scura (il film, di notte) */
  --sfondo-tg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cg fill=%22none%22 stroke=%22%232f5a3a%22 stroke-opacity=%220.16%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 30l24-10-6 26-6-8-8 6z%22/%3E%3Cpath d=%22M80 26a8 8 0 0 1 15-4 7 7 0 1 1 3 14H78a6 6 0 0 1 2-10z%22/%3E%3Cpath d=%22M140 18l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z%22/%3E%3Cpath d=%22M24 84c3-5 10-5 12 0s-5 9-6 12c-1-3-9-7-6-12z%22/%3E%3Ccircle cx=%2290%22 cy=%2288%22 r=%2210%22/%3E%3Cpath d=%22M90 82v6l4 3%22/%3E%3Cpath d=%22M136 80h20v14h-20zM140 80v-4h12v4%22/%3E%3Cpath d=%22M24 140h20M34 130v20%22/%3E%3Cpath d=%22M76 146a10 10 0 1 0 14 14 8 8 0 0 1-14-14z%22/%3E%3Cpath d=%22M130 136l8 8 14-16%22/%3E%3C/g%3E%3C/svg%3E");
}

/* ============ i telefoni d'esempio ============
   Tutte le misure in em: 1em = un ventesimo della larghezza del telefono (--tel-w), così si rimpicciolisce tutto insieme. */
.tel { --tel-w: 300px; position: relative; flex: none; width: var(--tel-w); height: calc(var(--tel-w) * 2.05); margin: 0; font-size: calc(var(--tel-w) / 20); border-radius: 2.95em; padding: 0.5em;
  background: linear-gradient(150deg, #3a3a44 0%, #16161c 22%, #0c0c10 60%, #26262e 100%);
  box-shadow: inset 0 0 0 0.06em #5b5b66, inset 0 0 0 0.16em #101015, 0 2.2em 4.4em -1.6em rgb(20 18 31 / 0.5), 0 0.5em 1.2em -0.6em rgb(20 18 31 / 0.35); }
.tel::after { content: ""; position: absolute; right: -0.12em; top: 7.4em; width: 0.16em; height: 3.6em; border-radius: 0 0.2em 0.2em 0; background: #23232b; }
.tel-schermo { position: relative; height: 100%; border-radius: 2.5em; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-family: var(--s-app); color: #111; -webkit-font-smoothing: antialiased; isolation: isolate; }
.tel-schermo::before { content: ""; position: absolute; z-index: 9; top: 0.62em; left: 50%; width: 5.4em; height: 1.6em; transform: translateX(-50%); border-radius: 1em; background: #000; }
/* la riga in alto: l'ora (si muove con la chat), segnale, wifi, batteria */
.tel-stato { position: relative; z-index: 8; flex: none; height: 2.85em; padding: 0.15em 1.55em 0 1.9em; display: flex; align-items: center; justify-content: space-between; font: 600 0.92em/1 var(--s-app); letter-spacing: -0.01em; }
.tel-stato .ce-ora { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.tel-icone { display: inline-flex; align-items: center; gap: 0.32em; }
.tel-icone svg { fill: currentColor; color: inherit; }
.tel-icone .ic-segnale { width: 1.05em; height: 0.66em; } .tel-icone .ic-wifi { width: 0.98em; height: 0.72em; } .tel-icone .ic-batteria { width: 1.55em; height: 0.72em; }
.tel-casa { position: absolute; z-index: 8; left: 50%; bottom: 0.42em; width: 7.2em; height: 0.28em; transform: translateX(-50%); border-radius: 1em; background: #111; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
/* l'etichetta «esempio» (giallo come il casco di Sara): ogni chat d'esempio la porta, sempre in vista */
.esempio-tag { position: absolute; z-index: 12; top: -0.75em; right: 1.2em; padding: 0.32em 0.75em; border-radius: 1em; background: var(--s-casco); color: #241a00; font: 650 0.72em/1 var(--testo); letter-spacing: 0.01em; box-shadow: 0 0.3em 0.8em -0.3em rgb(120 80 0 / 0.5); }

/* l'intestazione della chat (comune) */
.tel .ce-testa { position: relative; z-index: 7; flex: none; display: flex; align-items: center; gap: 0.55em; padding: 0.3em 0.9em 0.55em 0.55em; }
.tel .ce-chi { display: grid; min-width: 0; flex: 1; line-height: 1.15; }
.tel .ce-chi b { font: 600 0.98em/1.2 var(--s-app); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.tel .ce-chi span { font: 400 0.74em/1.25 var(--s-app); color: #6b6b73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel .tel-azioni { display: inline-flex; gap: 1.05em; color: #1b1b1f; }
.tel .tel-azioni .ic { width: 1.35em; height: 1.35em; }
.tel .tel-indietro { color: inherit; width: 1.3em; height: 1.3em; margin-right: -0.1em; }
.tel-avatar { position: relative; flex: none; width: 2.25em; height: 2.25em; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9dde1; color: #fff; font: 600 0.95em/1 var(--s-app); }
.tel-avatar .ic { width: 70%; height: 70%; margin-top: 30%; color: #fff; }
.tel-avatar.sara { background: #15122b url(/assets/img/sara/sara-saluto.webp) 54% 8% / 210% auto no-repeat; }

/* la parte che scorre: i messaggi stanno in basso, i nuovi spingono su i vecchi */
.tel .ce-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.36em; padding: 0.6em 0.72em 0.7em; overflow: hidden; }
.tel .ce-corpo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.32em; height: auto; justify-content: flex-end; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.tel .ce-data { align-self: center; margin: 0 0 0.35em; padding: 0.32em 0.72em; border-radius: 0.6em; font: 500 0.7em/1.2 var(--s-app); }
.tel .ce-msg { position: relative; max-width: 80%; margin: 0; padding: 0.42em 0.62em 0.34em; border-radius: 1.05em; font: 400 0.88em/1.32 var(--s-app); letter-spacing: -0.005em; white-space: normal; word-wrap: break-word; }
.tel .ce-msg small { float: right; display: inline-flex; align-items: center; gap: 0.18em; margin: 0.45em -0.1em -0.25em 0.6em; font: 400 0.72em/1 var(--s-app); color: #667781; white-space: nowrap; }
.tel .ce-msg small .ic-spunte { width: 1.25em; height: 0.75em; fill: none; color: #53bdeb; }
.tel .ce-msg.cliente { align-self: flex-start; }
.tel .ce-msg.sara, .tel .ce-msg.tu { align-self: flex-end; }
.tel .ce-msg.sara.a-sinistra { align-self: flex-start; }
/* «Scritto da Sara»: sotto l'ultima risposta di Sara che si vede (come «Sent by Mochi») */
.tel .ce-msg.firmato { margin-bottom: 1.15em; }
.tel .ce-msg.firmato::after { content: "Scritto da Sara"; position: absolute; right: 0.2em; top: calc(100% + 0.32em); padding-left: 1em; white-space: nowrap; font: 600 0.66em/1 var(--testo); color: var(--s-viola); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%236c4dff%22 d=%22M12 2.5c.5 4.8 2.8 7.5 9.5 9.5-6.7 2-9 4.7-9.5 9.5-.5-4.8-2.8-7.5-9.5-9.5 6.7-2 9-4.7 9.5-9.5z%22/%3E%3C/svg%3E") no-repeat 0 50% / 0.85em; }
.tel .ce-msg.sara.a-sinistra.firmato::after { right: auto; left: 0.2em; }
/* i tre puntini mentre Sara scrive: una bolla dalla sua parte */
.tel .ce-scrive { display: none; align-self: flex-end; align-items: center; gap: 0.22em; margin: 0; padding: 0.62em 0.72em; border-radius: 1.05em; font-size: 1em; color: transparent; opacity: 1; transition: none; }
.tel .ce-scrive.su { display: inline-flex; }
.tel .ce-scrive i { width: 0.42em; height: 0.42em; margin: 0; border-radius: 50%; background: #8b8b93; animation: tel-puntini 1.2s ease-in-out infinite; }
.tel .ce-scrive i:nth-child(2) { animation-delay: 0.15s; } .tel .ce-scrive i:nth-child(3) { animation-delay: 0.3s; margin: 0; }
@keyframes tel-puntini { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-0.22em); opacity: 1; } }
.tel.scrive-sinistra .ce-scrive { align-self: flex-start; }
/* il vocale: tasto, onda, durata; sotto, scritto, cosa dice (la trascrizione) */
.tel .ce-vocale { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.55em; row-gap: 0.25em; min-width: 11.5em; }
.tel .ce-play { width: 1.15em; height: 1.15em; color: #8696a0; fill: currentColor; }
.tel .ce-onda { height: 1.5em; background: #8696a0; -webkit-mask: var(--onda) 0 50% / 100% 100% no-repeat; mask: var(--onda) 0 50% / 100% 100% no-repeat; }
.tel { --onda: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 20%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0.0 6.5h1.6v7.0h-1.6zM2.9 4.5h1.6v11.0h-1.6zM5.9 2.0h1.6v16.0h-1.6zM8.8 5.5h1.6v9.0h-1.6zM11.8 0.5h1.6v19.0h-1.6zM14.7 4.0h1.6v12.0h-1.6zM17.6 7.0h1.6v6.0h-1.6zM20.6 3.0h1.6v14.0h-1.6zM23.5 0.0h1.6v20.0h-1.6zM26.5 5.0h1.6v10.0h-1.6zM29.4 1.5h1.6v17.0h-1.6zM32.3 6.0h1.6v8.0h-1.6zM35.3 3.5h1.6v13.0h-1.6zM38.2 1.0h1.6v18.0h-1.6zM41.2 4.5h1.6v11.0h-1.6zM44.1 7.0h1.6v6.0h-1.6zM47.0 2.5h1.6v15.0h-1.6zM50.0 0.5h1.6v19.0h-1.6zM52.9 5.0h1.6v10.0h-1.6zM55.9 6.5h1.6v7.0h-1.6zM58.8 4.0h1.6v12.0h-1.6zM61.7 1.5h1.6v17.0h-1.6zM64.7 5.5h1.6v9.0h-1.6zM67.6 3.0h1.6v14.0h-1.6zM70.6 0.0h1.6v20.0h-1.6zM73.5 4.0h1.6v12.0h-1.6zM76.4 6.0h1.6v8.0h-1.6zM79.4 2.0h1.6v16.0h-1.6zM82.3 5.0h1.6v10.0h-1.6zM85.3 7.0h1.6v6.0h-1.6zM88.2 4.5h1.6v11.0h-1.6zM91.1 3.0h1.6v14.0h-1.6zM94.1 6.0h1.6v8.0h-1.6zM97.0 7.0h1.6v6.0h-1.6z%22/%3E%3C/svg%3E"); }
.tel .ce-durata { grid-column: 2; font: 400 0.7em/1 var(--s-app); color: #667781; }
.tel .ce-nota { grid-column: 1 / -1; padding-top: 0.3em; border-top: 0.06em solid rgb(0 0 0 / 0.08); font: 400 0.92em/1.3 var(--s-app); font-style: normal; color: #3b4a54; }
.tel .ce-link { display: flex; align-items: center; gap: 0.5em; margin: 0.45em 0 0.1em; padding: 0.55em 0.65em; border-radius: 0.7em; background: rgb(255 255 255 / 0.55); font: 600 0.92em/1.2 var(--s-app); color: inherit; }
.tel .ce-link .ic { width: 1.1em; height: 1.1em; fill: none; color: inherit; }
/* la barra per scrivere (finta, non si tocca) */
.tel .tel-barra { position: relative; z-index: 7; flex: none; display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.8em 1.55em; }
.tel .tel-barra .ic { width: 1.35em; height: 1.35em; }
.tel .tel-campo { flex: 1; height: 2.05em; border-radius: 1.1em; display: flex; align-items: center; justify-content: space-between; padding: 0 0.6em 0 0.85em; font: 400 0.82em/1 var(--s-app); color: #8a8a93; }
.tel .tel-campo .ic { width: 1.25em; height: 1.25em; color: #6b6b73; }

/* --- WhatsApp (iPhone, tema chiaro) --- */
.tel-wa .tel-stato, .tel-wa .ce-testa, .tel-wa .tel-barra { background: #f6f6f6; }
.tel-wa .ce-testa { box-shadow: 0 0.05em 0 #d6d6d6; color: #111; }
.tel-wa .tel-indietro { color: #111; }
.tel-wa .ce-area { background: #efe7de var(--sfondo-wa) 0 0 / 11.25em; }
.tel-wa .ce-data { background: rgb(255 255 255 / 0.92); color: #54656f; box-shadow: 0 0.06em 0.12em rgb(0 0 0 / 0.12); }
.tel-wa .ce-msg { box-shadow: 0 0.06em 0.08em rgb(11 20 26 / 0.13); color: #111b21; }
.tel-wa .ce-msg.cliente, .tel-wa .ce-msg.sara.a-sinistra { background: #fff; border-bottom-left-radius: 0.28em; }
.tel-wa .ce-msg.sara, .tel-wa .ce-msg.tu { background: #d9fdd3; border-bottom-right-radius: 0.28em; }
.tel-wa .ce-msg.sara.a-sinistra { border-bottom-right-radius: 1.05em; }
.tel-wa .ce-scrive { background: #d9fdd3; box-shadow: 0 0.06em 0.08em rgb(11 20 26 / 0.13); }
.tel-wa.scrive-sinistra .ce-scrive { background: #fff; }
.tel-wa .tel-barra { box-shadow: 0 -0.05em 0 #d6d6d6; color: #1b1b1f; }
.tel-wa .tel-campo { background: #fff; box-shadow: inset 0 0 0 0.06em #dadade; }
.tel-wa .ce-link { background: rgb(0 0 0 / 0.05); color: #027eb5; }

/* --- Instagram (iPhone, tema chiaro) --- */
.tel-ig .tel-schermo { background: #fff; }
.tel-ig .ce-testa { padding-bottom: 0.6em; box-shadow: 0 0.05em 0 #ececec; }
.tel-ig .ce-testa .tel-avatar { width: 2.05em; height: 2.05em; }
.tel-ig .ce-area { background: #fff; padding-left: 2.6em; }
.tel-ig .ce-msg { border-radius: 1.3em; padding: 0.5em 0.85em; font-size: 0.88em; }
.tel-ig .ce-msg small { display: none; }
.tel-ig .ce-msg.cliente { background: #efefef; color: #000; }
/* la fotina di chi scrive, accanto all'ultimo suo messaggio */
.tel-ig .ce-msg.cliente:not(:has(+ .ce-msg.cliente:not(.via)))::before { content: ""; position: absolute; left: -2.15em; bottom: 0; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--ig-foto, linear-gradient(135deg, #f0b38c, #c86f8f)); }
.tel-ig .ce-msg.sara, .tel-ig .ce-msg.tu { background: linear-gradient(160deg, #9b3cf6 0%, #6d4cf6 52%, #3f66f6 100%); color: #fff; }
.tel-ig .ce-msg.firmato::after { color: var(--s-viola); }
.tel-ig .ce-scrive { background: linear-gradient(160deg, #9b3cf6, #4f60f6); }
.tel-ig .ce-scrive i { background: rgb(255 255 255 / 0.9); }
.tel-ig.scrive-sinistra .ce-scrive { background: #efefef; }
.tel-ig.scrive-sinistra .ce-scrive i { background: #8b8b93; }
.tel-ig .ce-data { color: #8e8e8e; font-weight: 600; }
.tel-ig .ce-link { background: rgb(255 255 255 / 0.18); color: #fff; }
/* la risposta a una storia: la storia piccola, e sotto il messaggio */
.tel-ig .ce-msg.ig-storia { background: none; padding: 0; max-width: 68%; display: grid; justify-items: start; gap: 0.3em; }
.tel-ig .ce-msg.ig-storia::before { display: none; }
.tel-ig .ig-storia-nota { font: 400 0.82em/1.2 var(--s-app); color: #8e8e8e; }
.tel-ig .ig-storia-img { position: relative; width: 6.6em; height: 11.4em; border-radius: 0.9em; overflow: hidden; padding: 0.7em; display: flex; flex-direction: column; justify-content: center; gap: 0.35em; color: #fff; background: radial-gradient(circle at 30% 20%, #ff9a62 0%, transparent 55%), radial-gradient(circle at 80% 85%, #6a4dff 0%, transparent 60%), linear-gradient(170deg, #f05a7e, #7a3cf0); box-shadow: -0.32em 0 0 -0.12em #dbdbdb; }
.tel-ig .ig-storia-img b { font: 800 0.9em/1.08 var(--s-titoli); font-stretch: 110%; letter-spacing: -0.01em; }
.tel-ig .ig-storia-img span { font: 500 0.6em/1.3 var(--s-app); opacity: 0.92; }
.tel-ig .ig-storia-img i { position: absolute; top: 0.5em; left: 0.5em; right: 0.5em; height: 0.12em; border-radius: 1em; background: rgb(255 255 255 / 0.55); }
.tel-ig .ig-storia-testo { padding: 0.5em 0.85em; border-radius: 1.3em; background: #efefef; font: 400 1em/1.3 var(--s-app); color: #000; }
.tel-ig .tel-barra { padding-top: 0.55em; }
.tel-ig .tel-campo { height: 2.4em; border-radius: 1.4em; background: #efefef; padding-left: 0.3em; gap: 0.5em; justify-content: flex-start; }
.tel-ig .tel-campo .ig-cam { width: 1.85em; height: 1.85em; border-radius: 50%; display: grid; place-items: center; background: #3797f0; }
.tel-ig .tel-campo .ig-cam .ic { width: 1.1em; height: 1.1em; color: #fff; fill: none; }
.tel-ig .tel-campo .ig-resto { margin-left: auto; display: inline-flex; gap: 0.7em; }
.tel-ig .tel-campo .ig-resto .ic { color: #262626; }

/* --- Telegram (iPhone, tema chiaro) --- */
.tel-tg .tel-stato, .tel-tg .ce-testa, .tel-tg .tel-barra { background: rgb(247 247 247 / 0.96); }
.tel-tg .ce-testa { box-shadow: 0 0.05em 0 #d8d8d8; justify-content: space-between; }
.tel-tg .tg-indietro { display: inline-flex; align-items: center; gap: 0.1em; color: #2481cc; font: 400 0.94em/1 var(--s-app); }
.tel-tg .tg-indietro .ic { width: 1.25em; height: 1.25em; }
.tel-tg .ce-chi { text-align: center; flex: 1; }
.tel-tg .ce-chi span { color: #8d8e93; }
.tel-tg .ce-area { background: var(--sfondo-tg) 0 0 / 11.25em, radial-gradient(circle at 15% 15%, #e7efc4 0%, transparent 45%), radial-gradient(circle at 85% 40%, #a9d3c0 0%, transparent 50%), radial-gradient(circle at 30% 90%, #b6d8e2 0%, transparent 55%), #c4dcb0; }
.tel-tg .ce-data { background: rgb(0 0 0 / 0.18); color: #fff; }
.tel-tg .ce-msg { box-shadow: 0 0.05em 0.06em rgb(0 0 0 / 0.12); border-radius: 1.1em; }
.tel-tg .ce-msg.sara.a-sinistra, .tel-tg .ce-msg.cliente { background: #fff; color: #000; border-bottom-left-radius: 0.3em; }
.tel-tg .ce-msg.tu { background: #e1fec6; color: #000; border-bottom-right-radius: 0.3em; }
.tel-tg .ce-msg small { color: #8d8e93; }
.tel-tg .ce-msg.tu small { color: #4fae4e; }
.tel-tg .ce-msg.tu small .ic-spunte { color: #4fae4e; }
.tel-tg .ce-scrive { background: #fff; }
.tel-tg .tel-barra { box-shadow: 0 -0.05em 0 #d8d8d8; color: #8d8e93; }
.tel-tg .tel-campo { background: #fff; box-shadow: inset 0 0 0 0.06em #d6d6d6; }

/* le chat che scorrono da sole: i messaggi non ancora arrivati non si vedono */
.tel.chat-es { cursor: default; max-width: none; background: linear-gradient(150deg, #3a3a44 0%, #16161c 22%, #0c0c10 60%, #26262e 100%); overflow: visible; }
.tel.chat-es.anima { cursor: pointer; }
.tel.chat-es.anima .ce-corpo > .via { display: none; }
.tel.chat-es.notte .ce-corpo { opacity: 0.35; }

/* --- le carte che stanno accanto ai telefoni (agenda, scheda del cliente o del lead) --- */
.s-carta { position: relative; font-family: var(--testo); color: var(--s-inchiostro); background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px rgb(20 18 31 / 0.06), 0 24px 60px -24px rgb(20 18 31 / 0.35); }
.s-carta .esempio-tag { font-size: 11px; top: -10px; right: 18px; }
.s-carta-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; font: 600 13px/1.2 var(--testo); color: var(--s-ardesia); }
.s-carta-testa .ic { width: 16px; height: 16px; }
.tel-avatar.foto-luca { background: linear-gradient(135deg, #f0b38c, #c86f8f); }
.s-icone-fonte { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ il foglio bianco che sale sopra il film ============ */
.dopo { background: var(--s-carta); color: var(--s-inchiostro); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgb(0 0 0 / 0.55); font-family: var(--testo); }
.dopo ::selection { background: #e4dcff; color: var(--s-inchiostro); }
.dopo :focus-visible { outline: 2px solid var(--s-viola); outline-offset: 3px; border-radius: 10px; }
.s-contenuto { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.s-fascia { position: relative; padding: 96px 0 0; }
.s-centro { text-align: center; }
.s-sopra { margin: 0 0 14px; font: 500 15px/1.35 var(--testo); color: var(--s-ardesia); letter-spacing: 0; text-transform: none; }
.s-titolo { margin: 0; font: 800 clamp(34px, 9.2vw, 64px)/1.02 var(--s-titoli); font-stretch: 112%; letter-spacing: -0.03em; color: var(--s-inchiostro); text-wrap: balance; }
.s-titolo-xl { font-size: clamp(38px, 10.6vw, 84px); }
.s-sottotitolo { margin: 64px 0 20px; font: 750 22px/1.2 var(--s-titoli); font-stretch: 110%; letter-spacing: -0.02em; color: var(--s-inchiostro); }
.s-testo { margin: 18px 0 0; max-width: 36rem; font: 400 17px/1.6 var(--testo); color: var(--s-ardesia); text-wrap: pretty; }
.s-testo-grande { font-size: 19px; line-height: 1.55; color: #2f2c3d; }
.s-centro .s-testo { margin-left: auto; margin-right: auto; }
.s-due { display: grid; gap: 8px; }

/* il bottone nero (come «Start Free Trial») */
.s-bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--s-inchiostro); color: #fff; font: 600 16.5px/1 var(--testo); letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 10px 24px -12px rgb(20 18 31 / 0.6); transition: background 0.2s, transform 0.2s; }
.s-bottone:hover { background: #2c2843; }
.s-bottone:active { transform: scale(0.98); }
.s-bottone-grande { min-height: 62px; padding: 0 36px; font-size: 18px; }
.dopo .azione { display: flex; gap: 12px; margin: 34px 0 0; }
.dopo .s-centro .azione { justify-content: center; }
.dopo .nota-canali { max-width: 34rem; margin: 14px 0 0; font: 400 14px/1.5 var(--testo); color: var(--s-ardesia); }
.dopo .s-centro .nota-canali { margin-left: auto; margin-right: auto; }
.dopo .nota-canali a { color: var(--s-inchiostro); text-underline-offset: 3px; }
.dopo .esempio-tag { font-size: 12px; }

/* ============ chi la sta valutando: segretaria o setter ============ */
/* in cima al foglio la testata (la pillola bianca) non deve coprire la scelta: si lascia il suo spazio */
.s-versione { padding: 74px 20px 0; }
@media (min-width: 1000px) { .s-versione { padding-top: 96px; } }
.s-versione-cuore { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.s-versione-cuore > p:first-child { margin: 0; font: 500 15px/1.3 var(--testo); color: var(--s-ardesia); }
.s-versione-scelte { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--s-nebbia); box-shadow: inset 0 0 0 1px var(--s-filo); }
.s-versione-scelte button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--s-ardesia); font: 600 15px/1 var(--testo); cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.s-versione-scelte button[aria-pressed="true"] { background: #fff; color: var(--s-inchiostro); box-shadow: 0 1px 2px rgb(20 18 31 / 0.08), 0 4px 12px -4px rgb(20 18 31 / 0.2); }

/* ============ la fiducia ============ */
.s-fiducia { padding: 34px 20px 0; text-align: center; }
.s-fiducia-fatti { display: flex; flex-direction: column; align-items: flex-start; gap: 10px 26px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; list-style: none; }
.s-fiducia-fatti li { display: inline-flex; align-items: center; gap: 9px; font: 400 15px/1.35 var(--testo); color: var(--s-ardesia); text-align: left; }
.s-fiducia-fatti b { color: var(--s-inchiostro); font-weight: 600; }
.s-fiducia-fatti .ic { width: 18px; height: 18px; color: var(--s-viola); }

/* ============ partiamo da te ============ */
.s-due-testo .s-testo:first-child { margin-top: 0; }
.s-modi { display: grid; gap: 0; border-top: 1px solid var(--s-filo); }
.s-modo { padding: 22px 0; border-bottom: 1px solid var(--s-filo); }
.s-modo b { display: block; font: 700 19px/1.3 var(--s-titoli); font-stretch: 105%; letter-spacing: -0.01em; color: var(--s-inchiostro); }
.s-modo p { margin: 8px 0 0; font: 400 16.5px/1.6 var(--testo); color: var(--s-ardesia); text-wrap: pretty; }

/* ============ come lavoro: la frase grande e le cinque funzioni ============ */
.s-largo { max-width: 1240px; }
/* sul telefono: testo, poi il suo telefono, poi il testo dopo… (le due colonne si mescolano con «order») */
.s-funzioni { display: grid; }
.s-funzioni-testi, .s-funzioni-palco, .s-funzioni-viste { display: contents; }
.s-funzione { padding: 64px 0 22px; }
.s-funzione[data-n="1"] { order: 1; } .s-vista[data-n="1"] { order: 2; } .s-funzione[data-n="2"] { order: 3; } .s-vista[data-n="2"] { order: 4; }
.s-funzione[data-n="3"] { order: 5; } .s-vista[data-n="3"] { order: 6; } .s-funzione[data-n="4"] { order: 7; } .s-vista[data-n="4"] { order: 8; }
.s-funzione[data-n="5"] { order: 9; } .s-vista[data-n="5"] { order: 10; }
.s-titolo-f { margin: 0; font: 800 clamp(30px, 8.2vw, 52px)/1.04 var(--s-titoli); font-stretch: 112%; letter-spacing: -0.03em; color: var(--s-inchiostro); text-wrap: balance; }
.s-funzione .s-testo { font-size: 18px; color: #3c3a4b; }
.s-vista { display: grid; justify-items: center; padding: 34px 0 10px; }
.s-vista .tel { --tel-w: min(300px, 80vw); }
/* 11/10: sul telefono, nella sera di «Come lavoro», telefoni più bassi: i messaggi stanno in basso e sopra c'era
   mezzo schermo di carta da parati vuota; sei telefoni così allungavano la sezione di quasi uno schermo */
@media (max-width: 999px) { .s-turno .s-vista .tel { height: calc(var(--tel-w) * 1.78); } }
/* 11/10 sera (dalla revisione esterna): la prima chat del setter (la risposta alla storia di Instagram) ha più messaggi
   delle altre, e nel telefono più basso la storia finiva sotto la testata della chat: lei resta alta come prima, e la
   storia è un po' più piccola (anche sul computer ne spariva un pezzetto) */
@media (max-width: 999px) { .s-turno .s-vista .tel:has(.ig-storia) { height: calc(var(--tel-w) * 2.05); } }
.tel-ig .ce-msg.ig-storia .ig-storia-img { width: 5.4em; height: 9.4em; }
.s-punti { display: none; }
/* il telefono e accanto la carta (agenda, call): sul telefono la carta sale un po' sopra il fondo del telefono */
.s-vista-coppia { position: relative; }
.s-vista-coppia .s-carta { width: min(300px, 82vw); margin-top: -64px; justify-self: end; z-index: 2; }
.s-vista-carta .s-carta { width: min(400px, 100%); }

/* l'agenda */
.s-agenda-ore { list-style: none; margin: 0; padding: 12px 14px 16px; display: grid; gap: 8px; }
.s-agenda-ore li { display: grid; grid-template-columns: 46px 1fr; align-items: stretch; gap: 10px; }
.s-agenda-ore time { padding-top: 9px; font: 500 13px/1 var(--testo); color: #8b8a99; font-variant-numeric: tabular-nums; }
.s-ev-ag { display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px; font: 600 14px/1.25 var(--testo); color: var(--s-inchiostro); border-left: 3px solid transparent; transition: background 0.4s, opacity 0.4s; }
.s-ev-ag small { font: 400 12.5px/1.2 var(--testo); color: var(--s-ardesia); }
.s-ev-a { background: #eef3ff; border-color: #6b8cff; } .s-ev-b { background: #fff3e6; border-color: #f5a524; }
.s-libero { background: repeating-linear-gradient(135deg, #f6f6f8 0 6px, #fff 6px 12px); color: #9a99a8; font-weight: 500; border-color: #e1e1e8; }
.s-ev-sara { background: #f1ecff; border-color: var(--s-viola); }
.s-ev-sara.vuoto { opacity: 0.25; background: #f6f6f8; border-color: #e1e1e8; }
.s-ev-sara.vuoto * { visibility: hidden; }
/* la call prenotata */
.s-call-corpo { display: grid; gap: 4px; padding: 10px 18px 18px; transition: opacity 0.4s; }
.s-call-corpo b { font: 750 24px/1.15 var(--s-titoli); font-stretch: 108%; letter-spacing: -0.02em; }
.s-call-corpo > span:not(.s-chip) { font: 400 15px/1.3 var(--testo); color: var(--s-ardesia); }
.s-call-corpo .s-chip { margin-top: 10px; justify-self: start; }
.s-call-corpo.vuoto { opacity: 0.2; }
/* le schede (cliente, lead): come il CRM di Mochi */
.s-crm { padding: 20px; display: grid; gap: 12px; }
.s-crm-testa { display: flex; align-items: center; gap: 12px; }
.s-crm-testa > div { display: grid; flex: 1; min-width: 0; }
.s-crm-testa b { font: 750 22px/1.15 var(--s-titoli); font-stretch: 108%; letter-spacing: -0.02em; }
.s-crm-testa span:not(.s-chip):not(.s-crm-foto) { font: 400 14px/1.3 var(--testo); color: var(--s-ardesia); }
.s-crm-foto { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd1b3, #f39cb8); color: #fff; font: 700 19px/1 var(--s-titoli); }
.s-crm-foto-ig { background: linear-gradient(135deg, #f0b38c, #c86f8f); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e1306c; }
.s-crm-box { padding: 14px 16px; border-radius: 16px; background: var(--s-nebbia); }
.s-crm-titolo { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font: 500 13px/1.2 var(--testo); color: var(--s-ardesia); }
.s-crm-titolo .ic { width: 15px; height: 15px; color: var(--s-viola); }
.s-crm-dato { margin: 0; font: 650 16.5px/1.25 var(--testo); color: var(--s-inchiostro); }
.s-crm-dato small { margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--s-viola-chiaro); color: var(--s-viola); font-size: 11px; font-weight: 600; vertical-align: 2px; }
.s-crm-nota { margin: 3px 0 0; font: 400 13.5px/1.3 var(--testo); color: var(--s-ardesia); }
.s-crm-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-crm-lista { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; font: 400 14.5px/1.45 var(--testo); color: #3c3a4b; }
.s-crm-scheda { margin: 0; display: grid; gap: 10px; }
.s-crm-scheda dt { font: 500 12.5px/1.2 var(--testo); color: var(--s-ardesia); }
.s-crm-scheda dd { margin: 2px 0 0; font: 500 15px/1.4 var(--testo); color: var(--s-inchiostro); }
.s-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.s-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--s-filo); font: 500 13.5px/1 var(--testo); color: var(--s-inchiostro); white-space: nowrap; }
.s-chip .ic { width: 14px; height: 14px; color: var(--s-ardesia); }
.s-chip-viola { background: var(--s-viola-chiaro); box-shadow: none; color: var(--s-viola); } .s-chip-viola .ic { color: var(--s-viola); }
.s-chip-caldo { background: #fff1e8; box-shadow: none; color: #c2410c; } .s-chip-caldo .ic { color: #f97316; }

/* ============ le notifiche (il muro dei messaggi) ============ */
.s-nf-app { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.s-nf-app .ic { width: 17px; height: 17px; }
.s-nf-testo { display: grid; min-width: 0; font: 400 13.5px/1.3 var(--s-app); color: #3c3a4b; }
.s-nf-testo b { font-weight: 600; color: var(--s-inchiostro); }
.s-nf-testo, .s-nf-testo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ la candidatura ============ */
.s-candidatura-cuore { display: grid; gap: 30px; }
.s-firma-sara { display: inline-block; padding: 0 0.12em 0.08em 0; font: italic 400 64px/1 var(--titoli); background: var(--s-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ le regole ============ */
.s-regole-lista { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--s-filo); }
.s-regole-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--s-filo); }
.s-regole-lista .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--s-viola-chiaro); color: var(--s-viola); }
.s-regole-lista b { display: block; font: 750 20px/1.25 var(--s-titoli); font-stretch: 106%; letter-spacing: -0.015em; color: var(--s-inchiostro); }
.s-regole-lista p { margin: 6px 0 0; font: 400 16.5px/1.6 var(--testo); color: var(--s-ardesia); text-wrap: pretty; }

/* ============ Giorgio ============ */
.s-storia-cuore { display: grid; gap: 30px; }
.s-storia-foto { margin: 0; max-width: 360px; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(20 18 31 / 0.45); }
.s-storia-foto img { display: block; width: 100%; height: auto; }
.s-storia-lettera { margin: 22px 0 0; padding: 0; font: 400 17.5px/1.7 var(--testo); color: #2f2c3d; }
.s-storia-lettera p { margin: 0 0 14px; text-wrap: pretty; }
.s-storia-lettera p:first-child { font: 650 19px/1.5 var(--testo); color: var(--s-inchiostro); }
.s-storia-firma { display: grid; gap: 2px; margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--s-viola); }
.s-storia-firma b { font: 750 18px/1.2 var(--s-titoli); font-stretch: 106%; }
.s-storia-firma span { font: 400 14.5px/1.3 var(--testo); color: var(--s-ardesia); }
.s-storia-promessa { margin: 22px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--s-nebbia); font: 400 16px/1.55 var(--testo); color: #3c3a4b; }

/* ============ mettimi alla prova: i messaggi intorno ============ */
.s-prova { overflow: hidden; }
.s-esempio-linea.esempio-tag { position: static; display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 11.5px; box-shadow: none; }
.s-muro { list-style: none; margin: 0 0 34px; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-muro-nf { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 14px; background: rgb(255 255 255 / 0.92); box-shadow: 0 0 0 1px rgb(20 18 31 / 0.06), 0 12px 26px -14px rgb(20 18 31 / 0.4); }
.s-muro-nf .s-nf-app { width: 26px; height: 26px; border-radius: 7px; }
.s-muro-nf .s-nf-app .ic { width: 15px; height: 15px; }
.s-muro-nf time { display: none; }
.s-muro-nf .s-nf-testo { font-size: 12.5px; }
.s-muro-nf .s-nf-testo, .s-muro-nf .s-nf-testo b { white-space: normal; }
.s-muro-nf:nth-child(odd) { transform: rotate(-2.5deg); } .s-muro-nf:nth-child(even) { transform: rotate(2deg) translateY(6px); }
.s-muro-nf:nth-child(n+5) { display: none; }
.s-prova-cuore { position: relative; z-index: 2; }

/* ============ la prova gratuita ============ */
.s-bivio { display: grid; gap: 14px; margin-top: 34px; }
.s-bivio-lato { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 26px 24px 26px 128px; min-height: 150px; align-content: center; border-radius: 26px; background: var(--s-nebbia); }
.s-bivio-si { background: #f1ecff; }
.s-bivio-lato b { font: 800 24px/1.1 var(--s-titoli); font-stretch: 112%; letter-spacing: -0.02em; color: var(--s-inchiostro); }
.s-bivio-lato p { margin: 0; font: 400 16.5px/1.55 var(--testo); color: #3c3a4b; }
.s-passi { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.s-passi li { counter-increment: passo; position: relative; padding: 22px 22px 22px 70px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--s-filo); }
.s-passi li::before { content: counter(passo); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--s-inchiostro); color: #fff; font: 700 16px/1 var(--s-titoli); }
.s-passi b { display: block; font: 750 19px/1.25 var(--s-titoli); font-stretch: 106%; letter-spacing: -0.015em; }
.s-passi p { margin: 6px 0 0; font: 400 16px/1.55 var(--testo); color: var(--s-ardesia); }

/* ============ le domande ============ */
.dopo .s-altre { margin-top: 18px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--s-nebbia); color: var(--s-inchiostro); font: 600 15px/1 var(--testo); cursor: pointer; }

/* ============ decidi tu ============ */
.s-finale { padding-bottom: 110px; }
.s-finale .s-titolo-xl { max-width: 16ch; margin: 0 auto; }

/* ============ il piede (scuro, come la notte del film) ============ */
.dopo .s-piede { margin: 0; padding: 44px 0 calc(110px + env(safe-area-inset-bottom, 0px)); background: #0c0a18; color: #c9c8d6; border: 0; }
.s-piede-cuore { display: grid; gap: 12px; }
.s-piede-marchio { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 24px/1 var(--s-titoli); font-stretch: 112%; color: #fff; }
.s-piede-sigla { margin: 0; font: 400 14px/1.5 var(--testo); color: #9a99ad; }
.s-piede-sigla b { color: #fff; font-weight: 600; }

/* ============ la testata sopra le sezioni: una pillola bianca, come Mochi ============ */
.testata::before { transition: opacity 0.35s ease, background 0.35s ease; }
/* 11/10: piena (prima al 97%: sul telefono sotto la pillola si leggeva il testo che passava); sulle sezioni scure (la sera,
   il finale, il piede) diventa scura, così non abbaglia (sara.js mette .scuro) */
.testata.sopra::before { inset: 8px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgb(20 18 31 / 0.07), 0 10px 30px -14px rgb(20 18 31 / 0.35); }
.testata.sopra .marchio { color: var(--s-inchiostro); transition: color 0.35s ease; }
.testata.sopra .testata-ai { color: var(--s-ardesia); }
.testata.sopra .pulsante { background: var(--s-inchiostro); color: #fff; box-shadow: none; }
.testata.sopra.scuro::before { background: #15132e; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 30px -14px rgb(0 0 0 / 0.7); }
.testata.sopra.scuro .marchio { color: #fff; }
.testata.sopra.scuro .testata-ai { color: rgb(255 255 255 / 0.68); }
.testata-menu { display: none; }

/* ============ dal tablet in su ============ */
@media (min-width: 760px) {
  .s-contenuto { padding: 0 40px; }
  .s-fascia { padding-top: 140px; }
  .s-sopra { font-size: 17px; }
  .s-testo { font-size: 18px; }
  .s-testo-grande { font-size: 21px; }
  .s-due { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .s-due-alto { align-items: start; }
  .s-modi { grid-template-columns: repeat(3, 1fr); border: 0; gap: 0 36px; }
  .s-modo { padding: 22px 0 0; border-top: 1px solid var(--s-filo); border-bottom: 0; }
  .s-muro { position: absolute; inset: 0; padding: 0; margin: 0; display: block; pointer-events: none; }
  .s-muro-nf { position: absolute; width: 300px; }
  .s-muro-nf:nth-child(n+5) { display: grid; }
  .s-muro-nf .s-nf-testo, .s-muro-nf .s-nf-testo b { white-space: nowrap; }
  .s-muro-nf time { display: block; margin-left: auto; font: 400 12px/1 var(--s-app); color: #8b8a99; }
  .s-muro-nf { grid-template-columns: 30px 1fr auto; padding: 11px 13px; border-radius: 16px; }
  .s-muro-nf .s-nf-app { width: 30px; height: 30px; }
  .s-muro-nf .s-nf-testo { font-size: 13.5px; }
  .s-muro-1 { left: 3%; top: 120px; transform: rotate(-5deg) !important; } .s-muro-2 { right: 4%; top: 150px; transform: rotate(4deg) !important; }
  .s-muro-3 { left: 1%; top: 330px; transform: rotate(3deg) !important; } .s-muro-4 { right: 1%; top: 370px; transform: rotate(-3deg) !important; }
  .s-muro-5 { left: 5%; bottom: 120px; transform: rotate(-2deg) !important; } .s-muro-6 { right: 6%; bottom: 150px; transform: rotate(5deg) !important; }
  .s-muro-7 { left: 27%; top: 210px; transform: rotate(2deg) !important; } .s-muro-8 { right: 24%; bottom: 46px; transform: rotate(-4deg) !important; }
  .s-prova { padding-bottom: 150px; }
  .s-prova-cuore { max-width: 640px; }
  .s-bivio { grid-template-columns: 1fr 1fr; }
  .s-passi { grid-template-columns: repeat(2, 1fr); }
  .s-storia-cuore { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; }
  .s-storia-foto { position: sticky; top: 110px; }
}
@media (min-width: 1000px) {
  .s-fascia { padding-top: 168px; }
  .s-titolo { font-stretch: 125%; }
  .s-titolo-f { font-stretch: 122%; }
  .s-candidatura-cuore { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 72px; align-items: start; }
  .s-candidatura-testa { position: sticky; top: 130px; }
  .s-passi { grid-template-columns: repeat(4, 1fr); }
  /* le funzioni: il testo scorre a sinistra, il telefono resta fisso a destra e cambia schermata */
  .s-funzioni { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .s-funzioni-testi { display: block; }
  .s-funzione { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
  .s-funzioni-palco { display: block; position: sticky; top: 0; height: 100vh; }
  .s-funzioni-viste { display: block; position: relative; height: 100%; }
  .s-vista { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px 0 40px; opacity: 0; visibility: hidden; transform: translateY(26px) scale(0.98); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s; }
  .s-vista.attiva { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .s-vista .tel { --tel-w: min(310px, calc((100vh - 150px) * 0.475)); }
  .s-vista-coppia { display: block; }
  .s-vista-coppia > .tel { position: absolute; left: 50%; top: 50%; transform: translate(-72%, -46%); }
  .s-vista-coppia .s-carta { position: absolute; left: 50%; top: 50%; width: 272px; margin: 0; transform: translate(-6%, -98%); }
  .s-vista-coppia .s-call { transform: translate(-6%, -150%); }
  .s-vista-carta .s-carta { width: min(420px, 92%); }
  .s-punti { display: flex; gap: 8px; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); }
  .s-punti i { width: 8px; height: 8px; border-radius: 50%; background: #d5d4de; transition: background 0.3s, transform 0.3s; }
  .s-punti i.attivo { background: var(--s-viola); transform: scale(1.2); }
  .testata.sopra { padding-left: calc(max(16px, 50% - 560px) + 22px); padding-right: calc(max(16px, 50% - 560px) + 14px); }
  .testata.sopra::before { inset: 12px max(16px, calc(50% - 560px)); }
  .testata.sopra .testata-menu { display: flex; gap: 26px; margin: 0 auto 0 44px; }
  .testata-menu a { font: 500 15px/1 var(--testo); color: var(--s-inchiostro); text-decoration: none; transition: color 0.35s ease; }
  .testata-menu a:hover { color: var(--s-viola); }
  .testata.scuro .testata-menu a { color: #fff; }
  .testata.scuro .testata-menu a:hover { color: #c9c3ff; }
}

/* il film coperto dal foglio delle sezioni: la grana e le animazioni del film si fermano (sara.js mette .coperto) */
.palco.coperto .grana { display: none; }
.palco.nascosto { visibility: hidden; }
.palco.coperto *, .palco.coperto *::before, .palco.coperto *::after { animation-play-state: paused !important; }
@media (min-width: 900px) { .testata.sopra::before { background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  .testata.sopra.scuro::before { background: rgb(21 19 46 / 0.86); } }

/* con meno movimento: niente nastro che scorre, niente carte che si spostano */
@media (prefers-reduced-motion: reduce) {
  .tel .ce-scrive i { animation: none; }
}

/* ============ il film: i titoli nello stesso carattere del resto (Mona Sans), stretto e pieno come i titoli di un film ============ */
.scena h1, .scena h2 { font-family: var(--s-titoli); font-weight: 760; font-stretch: 80%; letter-spacing: -0.025em; line-height: 0.98; }
.scena h1 em, .scena h2 em { font-style: normal; }
.fs-titolo { font-family: var(--s-titoli); font-weight: 760; font-stretch: 90%; letter-spacing: -0.025em; }
.fs-titolo em { font-style: normal; }
@media (min-width: 900px) { .apertura h1 { font-stretch: 75%; letter-spacing: -0.02em; } }
/* con Mona Sans il titolo del primo schermo è più largo del vecchio: sui computer grandi si ferma a 90px (sempre su quattro righe) */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) { .apertura h1 { font-size: clamp(64px, 6.2vw, 90px); } }
@media (min-width: 900px) and (max-height: 860px) { .apertura h1 { font-size: clamp(46px, min(6.2vw, calc((var(--alto, 100svh) - 422px) / 3.84)), 90px); } }
@media (min-width: 900px) and (max-height: 700px) { .apertura h1 { font-size: clamp(46px, min(6.2vw, calc((var(--alto, 100svh) - 387px) / 3.84)), 90px); } }
@media (min-width: 900px) and (max-width: 959px) and (max-height: 700px) { .apertura h1 { font-size: 46px; } }
/* 11/10 sera: telefono girato o finestra molto bassa (il resto in sara.css, «Il primo schermo deve starci sempre»): il titolo
   su tre righe, alto quanto lascia lo schermo */
@media (orientation: landscape) and (max-height: 500px) { .apertura h1 { font-size: clamp(27px, calc((var(--alto, 100svh) - 150px) / 6.4), 44px); } }
/* sul telefono Mona Sans è un filo più alta del vecchio carattere: righe un po' più strette, così sotto resta lo stesso spazio */
@media (max-width: 899px) { .apertura h1 { line-height: 0.93; } }

/* ===================================================================================================================
   9/10 sera · la seconda passata (Giorgio: «copy fortissimo», «curriculum», «robottini in micromovimenti», «lavori in corso»)
   =================================================================================================================== */

/* ---- l'evidenziatore: un tratto giallo sotto la frase che conta, che si «disegna» quando arriva sullo schermo ---- */
mark.s-ev { color: inherit; background-color: transparent; padding: 0 0.14em; margin: 0 -0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(100deg, rgb(255 213 64 / 0) 0.6%, rgb(255 213 64 / 0.9) 2.2%, rgb(255 206 48 / 0.72) 6%, rgb(255 206 48 / 0.62) 92%, rgb(255 213 64 / 0.9) 97.4%, rgb(255 213 64 / 0) 99%);
  background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 62%; }
.js-ev mark.s-ev { background-size: 0% 62%; transition: background-size 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.15s; }
.js-ev mark.s-ev.su { background-size: 100% 62%; }
.s-testo mark.s-ev, .s-testo-grande mark.s-ev { color: var(--s-inchiostro); }

/* ---- la sottolineatura a mano (viola), per due o tre parole in tutta la pagina ---- */
.s-sott { position: relative; display: inline-block; white-space: nowrap; }
.s-sott-segno { position: absolute; left: -1%; bottom: -0.1em; width: 102%; height: 0.3em; overflow: visible; pointer-events: none; }
.s-sott-segno path { fill: none; stroke: var(--s-viola); stroke-width: 0.12em; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 5px; }
.js-ev .s-sott-segno path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.35s; }
.js-ev .s-sott.su .s-sott-segno path { stroke-dashoffset: 0; }
@media (min-width: 1000px) { .s-sott-segno path { stroke-width: 7px; } }
.s-titolo-viola { color: var(--s-viola); }

/* ---- la storia di Instagram: una foto vera (un espresso), con la scritta come le storie vere ---- */
.tel-ig .ig-storia-img { background: #2b1d14; padding: 0; justify-content: flex-end; }
.tel-ig .ig-storia-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tel-ig .ig-storia-img i { z-index: 2; }
.tel-ig .ig-storia-img b, .tel-ig .ig-storia-img span { position: relative; z-index: 2; margin: 0 0.45em; text-align: center; }
.tel-ig .ig-storia-img b { align-self: center; margin-bottom: 0.3em; padding: 0.28em 0.4em 0.32em; border-radius: 0.35em; background: rgb(255 255 255 / 0.94); color: #111; font: 800 0.74em/1.1 var(--s-titoli); font-stretch: 100%; letter-spacing: -0.01em; }
.tel-ig .ig-storia-img span { align-self: center; margin-bottom: 1.2em; padding: 0.2em 0.55em; border-radius: 1em; background: #e1306c; color: #fff; font: 700 0.6em/1.3 var(--s-app); opacity: 1; }

/* ---- l'avviso di Sara su Telegram (com'è davvero: un messaggio con le righe) ---- */
.tg-avviso { display: grid; gap: 0.3em; }
.tg-avviso b { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 700; }
.tg-avviso b .ic { width: 1em; height: 1em; color: #e5a100; fill: none; }
.tg-avviso-righe { padding-left: 0.55em; border-left: 0.16em solid #4fae4e; color: #333; }

/* ---- il curriculum ---- */
.s-candidatura-testa .s-testo { max-width: 28rem; }
.s-cv { position: relative; overflow: hidden; padding: 26px 20px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #e7e6ee, 0 40px 80px -40px rgb(20 18 31 / 0.4);
  background-image: linear-gradient(#fff, #fff), repeating-linear-gradient(transparent 0 31px, rgb(20 18 31 / 0.035) 31px 32px); }
.s-cv::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--s-grad); }
.s-cv-testa { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding-bottom: 20px; border-bottom: 2px solid var(--s-inchiostro); }
.s-cv-foto { width: 112px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #02093a; box-shadow: 0 10px 24px -12px rgb(20 18 31 / 0.55); }   /* la «fototessera»: Sara nel suo studio blu, presa dal film */
.s-cv-doc { margin: 0 0 4px; font: 600 12px/1.2 var(--testo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-ardesia); }
.s-cv-nome { margin: 0; font: 800 44px/0.95 var(--s-titoli); font-stretch: 118%; letter-spacing: -0.035em; color: var(--s-inchiostro); }
.s-cv-sigla { margin: 6px 0 0; font: 400 12.5px/1.3 var(--testo); color: var(--s-ardesia); }
.s-cv-sigla b { color: var(--s-viola); font-weight: 700; }
.s-cv-ruolo { margin: 8px 0 0; font: 500 14.5px/1.35 var(--testo); color: var(--s-inchiostro); }
.s-timbro { position: absolute; right: -6px; top: -14px; padding: 7px 12px 6px; border: 3px solid #d93a54; border-radius: 8px; color: #d93a54; font: 800 15px/1 var(--s-titoli); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-9deg); opacity: 0.88;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.7), inset 0 0 0 4px #d93a54; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0 52%, rgb(0 0 0 / 0.78) 62%, #000 74%); mask-image: radial-gradient(circle at 30% 40%, #000 0 52%, rgb(0 0 0 / 0.78) 62%, #000 74%); }
@media (max-width: 759px) {
  .s-timbro { right: -2px; top: auto; bottom: -17px; padding: 5px 9px 4px; border-width: 2px; font-size: 12.5px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.7), inset 0 0 0 3px #d93a54; }   /* sul telefono: a cavallo della riga, a destra */
}
.js-ev .s-timbro { opacity: 0; transform: rotate(-9deg) scale(1.6); transition: opacity 0.25s ease 0.5s, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s; }
.js-ev .s-cv.su .s-timbro { opacity: 0.88; transform: rotate(-9deg) scale(1); }
.s-cv-righe { margin: 4px 0 0; display: grid; }
.s-cv-righe > div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 13px 0; border-bottom: 1px solid #ecebf1; }
.s-cv-righe > div[hidden] { display: none; }
.s-cv-righe dt { font: 600 12px/1.3 var(--testo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-viola); }
.s-cv-righe dd { margin: 0; font: 400 16px/1.55 var(--testo); color: #2f2c3d; text-wrap: pretty; }
.s-cv-righe s { color: #a3a1b2; text-decoration-color: #d93a54; text-decoration-thickness: 2px; margin-right: 0.35em; }
.s-cv-righe .s-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.s-cv-righe .s-chip { font-size: 13px; padding: 6px 10px; background: var(--s-nebbia); box-shadow: none; }
.s-cv-piede { display: grid; gap: 4px; justify-items: end; margin-top: 16px; }
.s-cv-firma { margin: 0; line-height: 1; }
.s-cv .s-firma-sara { font-size: 58px; }
.s-cv-privacy { margin: 0; justify-self: stretch; font: 400 12.5px/1.45 var(--testo); color: var(--s-ardesia); text-align: right; }
.s-cv-privacy a { color: var(--s-inchiostro); text-underline-offset: 3px; }

/* ---- le regole (senza icone: numeri grandi) ---- */
.s-regole-lista { counter-reset: regola; }
.s-regole-lista li { counter-increment: regola; grid-template-columns: 44px 1fr; }
.s-regole-lista li::before { content: counter(regola); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s-viola-chiaro); color: var(--s-viola); font: 800 18px/1 var(--s-titoli); }

/* ---- il bivio della prova gratuita: icone al posto dei robottini ---- */
.s-bivio-lato { padding-left: 24px; }
.s-bivio-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--s-viola); margin-bottom: 4px; }
.s-bivio-ic .ic { width: 22px; height: 22px; }

/* ---- dal tablet in su ---- */
@media (min-width: 760px) {
  .s-fiducia-fatti { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: auto; }
  .s-cv { padding: 40px 44px 34px; }
  .s-cv::before { left: 44px; right: 44px; }
  .s-cv-testa { grid-template-columns: 150px 1fr; gap: 26px; }
  .s-cv-foto { width: 150px; }
  .s-cv-nome { font-size: 64px; }
  .s-timbro { right: 0; top: 4px; font-size: 18px; padding: 9px 15px 8px; }
  .s-cv-righe > div { grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; }
}

/* con meno movimento: evidenziatore e timbro già al loro posto */
@media (prefers-reduced-motion: reduce) {
  .js-ev mark.s-ev { background-size: 100% 62%; transition: none; }
  .js-ev .s-sott-segno path { stroke-dashoffset: 0; transition: none; }
  .js-ev .s-timbro { opacity: 0.88; transform: rotate(-9deg); transition: none; }
}

/* ===================================================================================================================
   Il film: il telefono diventa un iPhone vero (Dynamic Island, barra di stato, schermata di blocco col lucchetto,
   notifiche con l'icona dell'app, sblocco, schermata Home, l'app che si apre e Sara che scrive). Misure in cqw del quadro.
   =================================================================================================================== */
.schermo { --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Mona Sans", var(--testo); overflow: hidden; }
.ios-cornice { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }   /* sopra a tutto: anche sopra l'app aperta */
.schermo.acceso .ios-cornice { opacity: 1; }
.ios-isola { position: absolute; left: 50%; top: 1.15cqw; width: 11.6cqw; height: 3.3cqw; transform: translateX(-50%); border-radius: 2cqw; background: #000; box-shadow: 0 0 0 0.12cqw rgb(255 255 255 / 0.04); }
.ios-stato { position: absolute; left: 3.6cqw; right: 3cqw; top: 1.55cqw; height: 2.5cqw; display: flex; align-items: center; justify-content: space-between; color: #fff; font: 600 1.85cqw/1 var(--ios-font); letter-spacing: -0.01em; }
.ios-ora { opacity: 0; transition: opacity 0.35s; }
.schermo.con-ora .ios-ora { opacity: 1; }
.ios-icone { display: inline-flex; align-items: center; gap: 0.6cqw; }
.ios-icone svg { fill: currentColor; color: #fff; }
.ios-icone .ic-segnale { width: 2cqw; height: 1.25cqw; } .ios-icone .ic-wifi { width: 1.9cqw; height: 1.4cqw; } .ios-icone .ic-batteria { width: 3cqw; height: 1.4cqw; }
.ios-esempio { position: absolute; left: 3.4cqw; top: 5.2cqw; padding: 0.35cqw 0.9cqw; border-radius: 1cqw; background: #ffcf1a; color: #241a00; font: 700 max(8px, 1.35cqw)/1 var(--testo); letter-spacing: 0.02em; }

/* la schermata di blocco del racconto (scene 2 e 3): data sopra, ora grande, lucchetto, notifiche con l'icona */
.blocco { display: flex; flex-direction: column-reverse; align-items: center; top: 7.6cqw; }
.blocco::before { content: ""; order: 3; width: 2.1cqw; height: 2.7cqw; margin-bottom: 1.2cqw; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 30%22%3E%3Cpath d=%22M6.5 13V8.6a5.5 5.5 0 0 1 11 0V13%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Crect x=%223%22 y=%2212.5%22 width=%2218%22 height=%2215%22 rx=%223.6%22 fill=%22%23fff%22/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.92; }
.blocco .ora { font: 600 12.2cqw/0.92 var(--ios-font); letter-spacing: -0.035em; color: rgb(255 255 255 / 0.96); text-shadow: 0 0 4cqw rgb(150 130 255 / 0.45); }
.blocco .data { margin: 0 0 0.6cqw; font: 600 2.35cqw/1.2 var(--ios-font); color: rgb(255 255 255 / 0.88); }
.blocco.piccolo .ora { font-size: 9cqw; }
.notifiche { left: 3.2%; right: 3.2%; top: 31%; gap: 0.75cqw; }
.schermo.pieno .notifiche { top: 23%; }
.schermo .notifiche.risposti { top: 6.5%; }   /* scena 10: la lista sale sotto la barra di stato e lascia spazio al robottino */
.notifica { position: relative; grid-template-columns: 4.2cqw 1fr auto; column-gap: 1.3cqw; row-gap: 0.15cqw; align-items: center; padding: 1.25cqw 1.5cqw 1.35cqw 1.4cqw; border-radius: 2.3cqw; background: rgb(46 44 66 / 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: none; font: 400 max(9px, 2.05cqw)/1.22 var(--ios-font); }
.notifica .ios-app-ic { grid-row: 1 / 3; width: 4.2cqw; height: 4.2cqw; }
.notifica b { grid-column: 2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifica time { grid-column: 3; font-size: 0.86em; color: rgb(255 255 255 / 0.6); }
.notifica span { grid-column: 2 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / 0.92); }
.notifica .risposto { grid-column: 2 / -1; }
.notifiche.risposti .notifica .ios-app-ic { grid-row: 1 / 3; }
.notifiche.risposti .notifica span { grid-row: auto; }
.notifiche.risposti b { display: none; }   /* scena 10: due righe per messaggio (cosa chiedeva, risposto da Sara), così la lista non copre il robottino */
.etichetta-esempio { align-self: flex-start; padding: 0.35cqw 0.9cqw; border-radius: 1cqw; background: #ffcf1a; color: #241a00; font: 700 max(8px, 1.35cqw)/1 var(--testo); letter-spacing: 0.02em; text-transform: none; }

/* le icone delle app (disegnate da noi, nessun marchio) */
.ios-app-ic { display: block; }

/* scena 4: un iPhone vero, come una registrazione dello schermo (Giorgio, 9/10 sera). La schermata di blocco sale col dito
   (--sb, da 0 a 1, lo scrive sara.js: col dito di chi guarda, con la rotella, con un tocco o da sola dopo qualche secondo),
   sotto c'è la Home con le app, il widget del calendario, «Cerca» e il dock. Poi il tocco sull'app e l'app che si apre. */
.ios { position: absolute; inset: 0; opacity: 0; pointer-events: none; font-family: var(--ios-font); color: #fff; --sb: 0; }
.ios-blocco { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 6.2cqw; transform: translateY(calc(var(--sb) * -100%)); opacity: calc(1 - var(--sb) * 0.85); }
.ios-lucchetto { width: 2.1cqw; height: 2.7cqw; color: #fff; }
.ios-arco { transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); transform-origin: 17.5px 13px; }
.ios-blocco.aperto .ios-arco { transform: translateY(-3px) rotate(-26deg); }
.ios-data { margin-top: 1.2cqw; font: 600 2.35cqw/1.2 var(--ios-font); color: rgb(255 255 255 / 0.88); }
.ios-grande { font: 600 12.2cqw/0.92 var(--ios-font); letter-spacing: -0.035em; color: rgb(255 255 255 / 0.96); text-shadow: 0 0 4cqw rgb(150 130 255 / 0.45); }
.ios-notifica { display: grid; grid-template-columns: 4.2cqw 1fr auto; column-gap: 1.3cqw; row-gap: 0.15cqw; align-items: center; width: 93.6%; margin-top: 6cqw; padding: 1.25cqw 1.5cqw 1.35cqw 1.4cqw; border-radius: 2.3cqw; background: rgb(46 44 66 / 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); font: 400 max(9px, 2.05cqw)/1.22 var(--ios-font); }
.ios-not-ic { grid-row: 1 / 3; width: 4.2cqw; height: 4.2cqw; }
.ios-notifica b { font-weight: 600; } .ios-notifica time { font-size: 0.86em; color: rgb(255 255 255 / 0.6); }
.ios-notifica span { grid-column: 2 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-tasto-tondo { position: absolute; bottom: 7.4cqw; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; display: grid; place-items: center; background: rgb(20 18 40 / 0.42); box-shadow: inset 0 0 0 0.08cqw rgb(255 255 255 / 0.12); }
.ios-tasto-tondo .ic { width: 3cqw; height: 3cqw; color: #fff; fill: none; }
.ios-torcia { left: 6cqw; } .ios-cam { right: 6cqw; }
.ios-scorri { position: absolute; left: 0; right: 0; bottom: 3.6cqw; text-align: center; font: 500 max(6px, 1.6cqw)/1 var(--ios-font); color: rgb(255 255 255 / 0.82); opacity: 0; transition: opacity 0.4s; }
.ios.aspetta .ios-scorri { opacity: 1; animation: ios-scorri 1.8s ease-in-out infinite; }
@keyframes ios-scorri { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8cqw); } }
.ios-barra-home { position: absolute; z-index: 4; left: 50%; bottom: 1.1cqw; width: 13cqw; height: 0.6cqw; margin-left: -6.5cqw; border-radius: 1cqw; background: rgb(255 255 255 / 0.92); }
/* la Home, sotto la schermata di blocco: arriva da un poco più grande, mentre il blocco sale */
.ios-home { position: absolute; inset: 0; opacity: calc(var(--sb) * 1.6 - 0.35); transform: scale(calc(1.14 - var(--sb) * 0.14)); transform-origin: 50% 44%; }
.ios.app .ios-home { opacity: 0; transform: scale(1.12); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ios-griglia { position: absolute; left: 3cqw; right: 3cqw; top: 7.6cqw; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.6cqw; row-gap: 2.3cqw; justify-items: center; }
.ios-app { display: grid; justify-items: center; align-content: start; gap: 0.6cqw; }
.ios-ic, .ios-ic-box { display: block; width: 7.3cqw; height: 7.3cqw; }
.ios-ic { filter: drop-shadow(0 0.15cqw 0.4cqw rgb(0 0 0 / 0.25)); }
.ios-ic-box { position: relative; }
.ios-nome { font: 500 max(5.5px, 1.24cqw)/1.1 var(--ios-font); color: rgb(255 255 255 / 0.96); white-space: nowrap; text-shadow: 0 0.1cqw 0.5cqw rgb(0 0 0 / 0.6); letter-spacing: -0.01em; }
.ios-widget { grid-column: span 2; grid-row: span 2; display: grid; justify-items: center; gap: 0.6cqw; width: 100%; }
.ios-w-cal { width: 100%; aspect-ratio: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: 1.8cqw 2cqw; border-radius: 3.4cqw; background: #fff; color: #1c1c1e; box-shadow: 0 0.4cqw 1.6cqw rgb(0 0 0 / 0.3); }
.ios-w-cal b { font: 700 max(5.5px, 1.45cqw)/1 var(--ios-font); color: #7c3aed; text-transform: uppercase; letter-spacing: 0.02em; }
.ios-w-cal strong { margin-top: 0.3cqw; font: 300 7cqw/1 var(--ios-font); letter-spacing: -0.04em; }
.ios-w-cal small { margin-top: auto; font: 500 max(5.5px, 1.3cqw)/1.2 var(--ios-font); color: #8e8e93; }
.ios-badge { position: absolute; right: -1cqw; top: -1cqw; min-width: 2.7cqw; height: 2.7cqw; box-sizing: border-box; display: grid; place-items: center; padding: 0 0.6cqw; border-radius: 2cqw; background: #ff3b30; color: #fff; font: 600 1.55cqw/1 var(--ios-font); }
.ios-cerca { position: absolute; left: 50%; bottom: 16.9cqw; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.6cqw; height: 3.3cqw; padding: 0 1.8cqw; border-radius: 2cqw; background: rgb(255 255 255 / 0.2); font: 600 max(5.5px, 1.35cqw)/1 var(--ios-font); color: rgb(255 255 255 / 0.92); }
.ios-cerca .ic { width: 1.5cqw; height: 1.5cqw; color: #fff; }
.ios-dock { position: absolute; left: 1.7cqw; right: 1.7cqw; bottom: 2.4cqw; height: 11.2cqw; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; padding: 0 1.3cqw; border-radius: 4.6cqw; background: rgb(196 190 240 / 0.2); box-shadow: inset 0 0 0 0.08cqw rgb(255 255 255 / 0.14); }
.ios-dock .ios-nome { display: none; }
/* il dito, come nelle registrazioni dello schermo coi tocchi visibili */
.ios-dito { position: absolute; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: rgb(255 255 255 / 0.32); box-shadow: 0 0 0 0.3cqw rgb(255 255 255 / 0.55), 0 0.4cqw 1.6cqw rgb(0 0 0 / 0.35); opacity: 0; pointer-events: none; }
.ios-dito-su { left: 50%; bottom: 3.4cqw; margin-left: -2.8cqw; }
.ios.aspetta .ios-dito-su { animation: ios-dito-su 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite; }
@keyframes ios-dito-su { 0% { opacity: 0; transform: translateY(0) scale(0.85); } 12% { opacity: 1; transform: translateY(0) scale(1); } 62% { opacity: 1; transform: translateY(-24cqw) scale(1); } 80%, 100% { opacity: 0; transform: translateY(-28cqw) scale(0.9); } }
.ios.auto .ios-dito-su { opacity: 1; animation: none; transform: none; }
.ios-dito-tap { left: 50%; top: 50%; margin: -2.8cqw 0 0 -2.8cqw; }
.ios.tocco .ios-dito-tap { animation: ios-dito-tap 0.42s ease-out forwards; }
@keyframes ios-dito-tap { 0% { opacity: 0; transform: scale(1.6); } 45% { opacity: 1; transform: scale(0.82); } 100% { opacity: 1; transform: scale(0.95); } }
.ios-ic-box > svg { transition: transform 0.15s ease, filter 0.15s ease; }
.ios.tocco .ios-tocca .ios-ic-box > svg { transform: scale(0.9); filter: brightness(0.7); }
/* «Prova tu: scorri in alto»: come l'invito della scena 9, con la barra che dice quanto manca allo sblocco da solo */
.invito-su { top: 54%; gap: 1.2cqw; }
.invito-su::before { display: none; }
.invito-su .ic { width: 2.6cqw; height: 2.6cqw; min-width: 12px; min-height: 12px; color: var(--s-viola, #6c4dff); animation: ios-scorri 1.4s ease-in-out infinite; }
/* mentre aspetta lo sblocco, sul film col dito si trascina (niente scorrimento della pagina) */
.palco.sblocca { touch-action: none; }
/* l'app aperta: si allarga dall'icona, come su iPhone. Alle 22:47 l'iPhone è in modalità scura (il tema automatico):
   la chat di WhatsApp e quella di Instagram hanno i colori veri del tema scuro, e stanno bene nella notte del film */
.ios-chat { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: scale(0.18); transform-origin: 16% 52%; border-radius: inherit; overflow: hidden; background: #0b141a var(--sfondo-wa-scuro) 0 0 / 15cqw; color: #e9edef; transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.15, 1), opacity 0.3s ease; }
.ios.app .ios-chat { opacity: 1; transform: none; }
.ios-chat-testa { display: flex; align-items: center; gap: 1.1cqw; padding: 5.2cqw 2.4cqw 1.3cqw 1.6cqw; background: #1f2c34; }
.ios-chat-testa > .ic { width: 2.6cqw; height: 2.6cqw; color: #e9edef; fill: none; }
.ios-chat-foto { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: linear-gradient(135deg, #ffd1b3, #f39cb8); }
.ios-chat-chi { display: grid; line-height: 1.15; } .ios-chat-chi b { font: 600 2.15cqw/1.2 var(--ios-font); } .ios-chat-chi small { font: 400 1.6cqw/1.2 var(--ios-font); color: #8696a0; }
.ios-chat-corpo { display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw 2cqw; }
.ios-chat-data { align-self: center; padding: 0.5cqw 1.2cqw; border-radius: 1cqw; background: #182229; color: #8696a0; font: 500 1.5cqw/1 var(--ios-font); }
.ios-bolla { position: relative; max-width: 78%; padding: 1cqw 1.4cqw 0.9cqw; border-radius: 2cqw; font: 400 max(9px, 2.05cqw)/1.3 var(--ios-font); }
.ios-bolla small { float: right; margin: 0.9cqw -0.2cqw -0.4cqw 1.2cqw; font-size: 0.72em; color: #8696a0; }
.ios-lui { align-self: flex-start; background: #202c33; border-bottom-left-radius: 0.5cqw; }
.ios-sara { align-self: flex-end; background: #005c4b; border-bottom-right-radius: 0.5cqw; }
.ios-scrive { display: inline-flex; gap: 0.5cqw; padding: 1.3cqw 1.6cqw; opacity: 0; transform: translateY(1cqw) scale(0.9); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ios.scrive .ios-scrive { opacity: 1; transform: none; }
.ios-scrive i { width: 0.95cqw; height: 0.95cqw; border-radius: 50%; background: rgb(233 237 239 / 0.8); animation: tel-puntini 1.2s ease-in-out infinite; }
.ios-scrive i:nth-child(2) { animation-delay: 0.15s; } .ios-scrive i:nth-child(3) { animation-delay: 0.3s; }
.ios-chat .ios-esempio { top: 15cqw; left: auto; right: 2.4cqw; }
.ios-storia { display: none; }
/* chi vende in call: la chat è un messaggio diretto di Instagram, risposta a una storia */
html[data-chi="vendita"] .ios-chat { background: #000; }
html[data-chi="vendita"] .ios-chat-testa { background: #000; box-shadow: 0 0.08cqw 0 #262626; }
html[data-chi="vendita"] .ios-chat-foto { background: linear-gradient(135deg, #f0b38c, #c86f8f); }
html[data-chi="vendita"] .ios-chat-data { background: none; color: #a8a8a8; font-weight: 600; }
html[data-chi="vendita"] .ios-storia { display: grid; gap: 0.6cqw; justify-items: start; padding-left: 0.4cqw; }
html[data-chi="vendita"] .ios-storia small { font: 400 1.55cqw/1 var(--ios-font); color: #a8a8a8; }
html[data-chi="vendita"] .ios-storia img { width: 9.5cqw; height: 16.9cqw; object-fit: cover; border-radius: 1.4cqw; box-shadow: -0.45cqw 0 0 -0.15cqw #3a3a3a; }
html[data-chi="vendita"] .ios-lui { background: #262626; border-radius: 2.6cqw; color: #fff; }
html[data-chi="vendita"] .ios-lui small { display: none; }
html[data-chi="vendita"] .ios-sara { background: linear-gradient(160deg, #9b3cf6, #4f60f6); border-radius: 2.6cqw; }
html[data-chi="vendita"] .ios-scrive i { background: rgb(255 255 255 / 0.9); }

/* 11/10 · il robottino davanti al telefono (scene 2, 3 e 4): sopra lo schermo c'è la tela che lo ridisegna, presa dallo
   stesso fotogramma del video e ritagliata con la sua sagoma (sara.js, «davanti»). È grande come il quadro, come la tela
   del film sotto, così i pixel cadono negli stessi punti. Sta davanti alle notifiche, alla schermata di blocco e
   all'iPhone; il cartellino «Prova tu» resta davanti al robottino. Col film in pausa si scurisce come il video. */
.davanti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; opacity: 0; transition: filter 0.35s ease; }
.davanti.su { opacity: 1; }
.palco.in-pausa .davanti { filter: brightness(0.62) saturate(0.9); }
.invito { z-index: 10; }

/* scena 9: l'avviso di Sara come una notifica di iPhone aperta, con i tasti sotto */
.avviso { top: 5.8%; border-radius: 2.6cqw; background: rgb(44 42 64 / 0.7); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 3cqw 8cqw rgb(0 0 0 / 0.35); font-family: var(--ios-font); }
.avviso-testa { justify-content: flex-start; gap: 1.2cqw; }
.avviso-testa::before { content: ""; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 0.9cqw; background: #15122b url(/assets/img/sara/sara-saluto.webp) 54% 10% / 220% auto no-repeat; }
.avviso-testa .esempio-piccolo { margin-left: auto; padding: 0.35cqw 0.9cqw; border-radius: 1cqw; background: #ffcf1a; color: #241a00; font: 700 max(8px, 1.35cqw)/1 var(--testo); letter-spacing: 0.02em; text-transform: none; }
.parola { border-radius: 1.6cqw; }
@media (prefers-reduced-motion: reduce) {
  .ios-blocco, .ios-home, .ios-chat, .ios-scrive, .ios-arco { transition: none; }
  .ios.aspetta .ios-scorri, .ios.aspetta .ios-dito-su, .invito-su .ic, .ios.tocco .ios-dito-tap { animation: none; }
  .ios-scrive i { animation: none; }
}

/* ===================================================================================================================
   9/10 notte · la terza passata (Giorgio, 20:20: «più figo, più atipico, mosche bianche», «loghi veri», «footer vuoto»,
   «le domande non mi piacciono», «il robottino finale: qualcosa di interattivo»).
   =================================================================================================================== */

/* ---- i marchi veri delle app (simboli #a-whatsapp, #a-instagram, #a-telegram: hanno già il loro fondo e gli angoli) ---- */
.s-app { display: block; flex: none; width: 24px; height: 24px; }
svg.s-nf-app { background: none; border-radius: 0; filter: drop-shadow(0 1px 1.5px rgb(20 18 31 / 0.18)); }
.s-fiducia-fatti .s-fiducia-ic { width: 22px; height: 22px; flex: none; }
.s-fiducia-loghi { display: inline-flex; gap: 3px; flex: none; }

/* ---- il curriculum: la riga del periodo di prova, in evidenza sopra la firma ---- */
.s-cv-prova { justify-self: stretch; margin: 2px 0 8px; padding: 12px 14px; border-radius: 14px; background: var(--s-viola-chiaro); font: 500 15px/1.45 var(--testo); color: var(--s-inchiostro); text-align: left; }
.s-cv-prova b { color: var(--s-viola); }

/* ---- il turno: la sezione «come lavoro» è una notte. L'ora grande, il segno dell'app, e un filo che si accende ---- */
.s-turno { position: relative; isolation: isolate; overflow: clip; margin-top: 96px; padding: 104px 0 140px; background: #07061a; color: #f4f3ff; }
.s-turno-cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.55), transparent 60%), radial-gradient(1px 1px at 72% 9%, rgb(255 255 255 / 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 31%, rgb(255 255 255 / 0.4), transparent 60%), radial-gradient(1px 1px at 88% 42%, rgb(255 255 255 / 0.45), transparent 60%),
    radial-gradient(1px 1px at 22% 63%, rgb(255 255 255 / 0.35), transparent 60%), radial-gradient(1.5px 1.5px at 61% 74%, rgb(255 255 255 / 0.3), transparent 60%),
    radial-gradient(60% 34% at 85% 6%, rgb(108 77 255 / 0.32), transparent 70%), radial-gradient(48% 30% at 4% 48%, rgb(79 123 255 / 0.16), transparent 70%),
    linear-gradient(180deg, #07061a 0%, #0b0930 60%, #0d0b2b 100%);
  background-size: 340px 520px, 340px 520px, 340px 520px, 340px 520px, 340px 520px, 340px 520px, 100% 100%, 100% 100%, 100% 100%; }
/* verso la fine del turno arriva l'alba (sara.js scrive --k, da 0 a 1, mentre si scorre) */
/* 10/10 sera: l'alba senza il color fango (il pesca sopra il blu scuro diventava marrone): viola, rosa, poi il chiaro solo
   dove arriva già il bianco */
.s-turno-alba { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; will-change: opacity; background: linear-gradient(180deg, transparent 44%, rgb(84 60 214 / 0.42) 68%, rgb(186 104 220 / 0.48) 84%, rgb(255 168 200 / 0.62) 94%, rgb(255 226 214 / 0.9) 100%); }
.s-turno-bianco { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: -1; pointer-events: none; opacity: 0; will-change: opacity; background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.85) 65%, #fff); }
.s-turno .s-sopra { color: #a9a7c6; display: flex; align-items: center; gap: 12px; }
.s-turno .s-sopra .esempio-tag { position: static; font-size: 12px; }
.s-turno .s-titolo { color: #fff; }
.s-turno .s-titolo-viola { color: #a48bff; }
.s-turno .s-testo, .s-turno .s-testo-grande { color: #c9c7e0; }
.s-turno .s-testo b { color: #fff; }
.s-turno-testa .s-titolo-xl { max-width: 15ch; }
.s-turno-corpo { position: relative; margin-top: 30px; }
.s-turno-filo { position: absolute; left: 27px; top: 64px; bottom: 40px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.1); }
.s-turno-filo i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #4f7bff, #a48bff); box-shadow: 0 0 14px 1px rgb(124 92 255 / 0.7); }
.s-turno-filo i::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(164 139 255 / 0.35), 0 0 18px 4px rgb(164 139 255 / 0.8); }
.s-turno .s-funzione { position: relative; padding: 60px 0 18px 38px; }
.s-turno .s-funzione::before { content: ""; position: absolute; left: 1px; top: 86px; width: 14px; height: 14px; border-radius: 50%; background: #07061a; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.28); transition: background 0.4s, box-shadow 0.4s; }
.s-turno .s-funzione.attivo::before { background: #a48bff; box-shadow: 0 0 0 2px #a48bff, 0 0 16px 3px rgb(164 139 255 / 0.7); }
.s-passo-ora { margin: 0 0 10px; line-height: 0; }
/* 11/10: niente cifre tabellari: in Mona Sans hanno lo zero barrato (08:30 sembrava «Ø8:3Ø») */
.s-ora-grande { display: inline-block; font: 800 clamp(66px, 19vw, 136px)/0.86 var(--s-titoli); font-stretch: 108%; letter-spacing: -0.045em;
  background: linear-gradient(180deg, #fff 35%, #b9a6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-ora-giorno { font-size: clamp(48px, 13vw, 96px); letter-spacing: -0.035em; }
.s-passo-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 5px 13px 5px 5px; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.13); font: 600 14px/1 var(--testo); color: #ebe9ff; }
.s-passo-tag .s-app { width: 26px; height: 26px; }
.s-passo-tag .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: linear-gradient(135deg, #6c4dff, #4f7bff); color: #fff; fill: none; stroke: currentColor; }
.s-turno .s-titolo-f { color: #fff; font-size: clamp(28px, 7.6vw, 46px); }
.s-turno .s-funzione .s-testo { color: #c9c7e0; max-width: 31rem; }
/* 11/10: verso l'alba il fondo diventa viola e rosa e il lilla chiaro dei testi non si leggeva più: negli ultimi due passi
   il testo è quasi bianco, e tutti i testi del turno hanno un'ombra morbida (sul buio non si vede, sul rosa stacca) */
.s-turno .s-funzione .s-testo { text-shadow: 0 1px 18px rgb(14 8 44 / 0.5); }
.s-turno .s-funzione[data-n="5"] .s-testo, .s-turno .s-funzione[data-n="6"] .s-testo { color: #f3f1ff; }
.s-turno .s-vista { padding-left: 38px; }
.s-turno .s-vista .tel { box-shadow: inset 0 0 0 0.06em #5b5b66, inset 0 0 0 0.16em #101015, 0 0 0 1px rgb(255 255 255 / 0.06), 0 2.4em 5em -1.4em rgb(0 0 0 / 0.8), 0 0 4em -0.5em rgb(108 77 255 / 0.45); }
.s-turno .s-carta { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 70px -26px rgb(0 0 0 / 0.75); }
.s-turno .s-punti i { background: rgb(255 255 255 / 0.22); }
.s-turno .s-punti i.attivo { background: #a48bff; }
@media (min-width: 760px) {
  .s-turno { margin-top: 140px; padding: 150px 0 170px; }
  .s-turno-filo { left: 47px; }
  .s-turno .s-funzione { padding-left: 46px; }
}
@media (min-width: 1000px) {
  .s-turno { margin-top: 168px; }
  .s-turno-corpo { margin-top: 10px; }
  .s-turno-filo { top: 0; bottom: 0; }
  .s-turno .s-funzione { min-height: 78vh; padding: 40px 0 40px 56px; opacity: 0.3; transition: opacity 0.5s ease; }
  .s-turno .s-funzione::before { top: 50%; left: 1px; margin-top: -7px; }
  .s-turno .s-funzione.attivo { opacity: 1; }
  .s-turno .s-vista { padding-left: 0; }
  .s-turno .s-funzioni-palco::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgb(108 77 255 / 0.35), transparent); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-turno .s-funzione { opacity: 1; }
  .s-turno-alba, .s-turno-bianco { opacity: 0; }
}

/* ---- il colloquio: tu chiedi (a destra, scuro), Sara risponde (a sinistra), come in chat. Niente fisarmonica ---- */
.s-colloquio-lista { display: grid; gap: 18px; margin-top: 8px; }
.s-qa { display: grid; gap: 8px; }
.s-qa.in-piu { display: none; }
.s-qa-tu, .s-qa-sara { margin: 0; text-wrap: pretty; }
.s-qa-tu { justify-self: end; max-width: 88%; padding: 12px 16px 13px; border-radius: 22px 22px 6px 22px; background: var(--s-inchiostro); color: #fff; font: 650 17.5px/1.35 var(--testo); }
.s-qa-sara { justify-self: start; max-width: 94%; padding: 12px 16px 14px; border-radius: 22px 22px 22px 6px; background: var(--s-nebbia); color: #2f2c3d; font: 400 16.5px/1.55 var(--testo); box-shadow: inset 0 0 0 1px var(--s-filo); }
.s-qa-chi { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font: 650 11.5px/1 var(--testo); letter-spacing: 0.1em; text-transform: uppercase; }
.s-qa-tu .s-qa-chi { justify-content: flex-end; color: rgb(255 255 255 / 0.55); }
.s-qa-sara .s-qa-chi { color: var(--s-viola); }
.s-qa-chi .tel-avatar { width: 20px; height: 20px; font-size: 10px; }
.js-qa .s-qa .s-qa-tu { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js-qa .s-qa .s-qa-sara { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.45s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s; }
.js-qa .s-qa.su .s-qa-tu, .js-qa .s-qa.su .s-qa-sara { opacity: 1; transform: none; }
.s-colloquio .s-altre { justify-self: start; }
@media (min-width: 1000px) {
  .s-colloquio-testa { position: sticky; top: 130px; }
  .s-qa-tu { font-size: 19px; }
  .s-qa-sara { font-size: 17.5px; }
}

/* ---- «Mettimi alla prova»: sul computer i messaggi stanno ai lati, in due colonne vere: non toccano mai il titolo ---- */
@media (min-width: 760px) and (max-width: 999px) {
  .s-prova .s-muro { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 40px; padding: 0 40px; }
  .s-prova .s-muro-nf { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto; }
  .s-prova .s-muro-nf:nth-child(n+7) { display: none; }
  /* 10/10: sul tablet le notifiche si sovrapponevano (troppo inclinate) e il testo restava tagliato: meno inclinate, e il
     testo va a capo */
  .s-prova .s-muro { row-gap: 16px; }
  .s-prova .s-muro-nf .s-nf-testo, .s-prova .s-muro-nf .s-nf-testo b { white-space: normal; }
  .s-prova .s-muro-nf:nth-child(odd) { transform: rotate(-1.6deg) !important; }
  .s-prova .s-muro-nf:nth-child(even) { transform: rotate(1.4deg) translateY(6px) !important; }
}
@media (min-width: 1000px) {
  .s-prova { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr); grid-template-rows: repeat(4, auto); column-gap: 44px; row-gap: 26px; align-items: center; padding-left: 28px; padding-right: 28px; }
  .s-prova .s-muro { position: static; display: contents; }
  .s-prova .s-muro-nf { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: min(300px, 100%); }
  .s-prova .s-muro-nf:nth-child(-n+4) { grid-column: 1; justify-self: end; }
  .s-prova .s-muro-nf:nth-child(n+5) { grid-column: 3; justify-self: start; }
  .s-prova .s-muro-1, .s-prova .s-muro-5 { grid-row: 1; } .s-prova .s-muro-2, .s-prova .s-muro-6 { grid-row: 2; }
  .s-prova .s-muro-3, .s-prova .s-muro-7 { grid-row: 3; } .s-prova .s-muro-4, .s-prova .s-muro-8 { grid-row: 4; }
  .s-prova .s-muro-1 { transform: translateX(-18px) rotate(-4deg) !important; } .s-prova .s-muro-2 { transform: translateX(22px) rotate(2.5deg) !important; }
  .s-prova .s-muro-3 { transform: translateX(-6px) rotate(-2deg) !important; } .s-prova .s-muro-4 { transform: translateX(16px) rotate(3.5deg) !important; }
  .s-prova .s-muro-5 { transform: translateX(16px) rotate(4deg) !important; } .s-prova .s-muro-6 { transform: translateX(-20px) rotate(-3deg) !important; }
  .s-prova .s-muro-7 { transform: translateX(8px) rotate(2deg) !important; } .s-prova .s-muro-8 { transform: translateX(-14px) rotate(-4deg) !important; }
  .s-prova .s-prova-cuore { grid-column: 2; grid-row: 1 / span 4; max-width: none; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .s-prova { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); column-gap: 28px; }
  .s-prova .s-muro-nf .s-nf-testo, .s-prova .s-muro-nf .s-nf-testo b { white-space: normal; }
}

/* ---- il finale ---- */
.s-finale-cuore { display: grid; gap: 10px; justify-items: center; text-align: center; }
.s-finale-testo { display: grid; justify-items: center; }
.s-finale .s-titolo-xl { max-width: 16ch; margin: 0 auto; }
.s-finale .azione { justify-content: center; }
/* la versione notte, quando c'è Sara col viso che segue lo sguardo */
.s-finale-notte { margin-top: 110px; padding: 90px 0 120px; background: #07061a; color: #f4f3ff; overflow: clip; }
.s-finale-notte .s-titolo { color: #fff; }
.s-finale-notte .s-sopra { color: #a9a7c6; }
.s-finale-notte .s-testo, .s-finale-notte .s-testo-grande { color: #c9c7e0; }
.s-finale-notte .nota-canali { color: #a9a7c6; } .s-finale-notte .nota-canali a { color: #fff; }
.s-finale-notte .s-bottone { background: #fff; color: var(--s-inchiostro); }
@media (min-width: 1000px) {
  .s-finale-notte .s-finale-cuore { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 40px; align-items: center; justify-items: start; text-align: left; }
  .s-finale-notte .s-finale-testo { justify-items: start; }
  .s-finale-notte .s-titolo-xl { margin: 0; }
  .s-finale-notte .azione { justify-content: flex-start; }
}

/* ---- il piede: la notte continua. Chi è Sara, i link, l'ora vera e il marchio grande ---- */
.dopo .s-piede { position: relative; overflow: hidden; padding: 64px 0 calc(110px + env(safe-area-inset-bottom, 0px)); background: #07061a; color: #c9c7e0; }
.s-finale-notte + .s-piede { padding-top: 24px; }
.s-piede-alto { display: grid; gap: 34px; }
.s-piede-sigla { margin: 0; font: 400 15px/1.55 var(--testo); color: #a9a7c6; }
.s-piede-sigla b { color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.s-piede-ai { margin: 10px 0 0; font: 500 16px/1.5 var(--testo); color: #fff; }
.s-piede-adesso { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 0; font: 400 14.5px/1.5 var(--testo); color: #a9a7c6; }
.s-piede-adesso .led { width: 8px; height: 8px; flex: none; align-self: center; }
.s-piede-ora { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-piede-col { display: grid; align-content: start; justify-items: start; gap: 10px; }
.s-piede-titolo { margin: 0 0 4px; font: 600 12px/1 var(--testo); letter-spacing: 0.14em; text-transform: uppercase; color: #7f7d9c; }
.s-piede-col a, .s-piede-col button { padding: 2px 0; border: 0; background: none; font: 500 16px/1.3 var(--testo); color: #fff; text-decoration: none; cursor: pointer; text-align: left; }
.s-piede-col a:hover, .s-piede-col button:hover { color: #c9bcff; }
.s-piede-su::after { content: " ↑"; }
.s-piede-marchio { position: relative; display: block; margin: 54px 0 -0.24em; font: 800 clamp(120px, 34vw, 360px)/0.8 var(--s-titoli); font-stretch: 125%; letter-spacing: -0.06em; color: transparent;
  background: linear-gradient(180deg, #2a2563 0%, #120f33 85%); -webkit-background-clip: text; background-clip: text; user-select: none; }
.s-piede-marchio .led { position: absolute; width: 0.085em; height: 0.085em; right: -0.1em; top: 0.18em; }
@media (min-width: 760px) {
  .s-piede-alto { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .s-piede-chi { max-width: 26rem; }
}
@media (max-width: 759px) {
  .s-piede-alto { grid-template-columns: 1fr 1fr; }
  .s-piede-chi { grid-column: 1 / -1; }
}
/* il sesto passo del turno (sul telefono il testo e il suo esempio vanno in fila: 1, 1, 2, 2, …) */
.s-funzione[data-n="6"] { order: 11; } .s-vista[data-n="6"] { order: 12; }
/* l'evidenziatore sul buio: viola acceso, testo bianco */
.s-turno mark.s-ev, .s-finale-notte mark.s-ev { color: #fff;
  background-image: linear-gradient(100deg, rgb(124 92 255 / 0) 0.6%, rgb(124 92 255 / 0.85) 2.2%, rgb(108 77 255 / 0.7) 6%, rgb(108 77 255 / 0.62) 92%, rgb(124 92 255 / 0.85) 97.4%, rgb(124 92 255 / 0) 99%); }
.s-turno .s-testo mark.s-ev, .s-finale-notte .s-testo mark.s-ev { color: #fff; }
.s-piede-marchio { display: inline-block; background: linear-gradient(180deg, #3b3592 0%, #17143f 80%); -webkit-background-clip: text; background-clip: text; }
.s-piede-marchio .led { right: -0.11em; top: 0.2em; box-shadow: 0 0 0.12em 0.03em rgb(164 139 255 / 0.9); }
.s-piede-marchio { justify-self: start; }
@media (min-width: 1000px) { .s-prova .s-muro-nf .s-nf-testo, .s-prova .s-muro-nf .s-nf-testo b { white-space: normal; } }
@media (min-width: 1000px) { .s-turno .s-funzione { align-items: flex-start; } }
/* il marchio di Telegram accanto a Sara Coach (lavora nei gruppi Telegram degli studenti) */
.altre-sara .altra-ic, .s-piede-col .altra-ic { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 5px; vertical-align: -0.22em; }
/* la sottolineatura a mano si disegna da sinistra a destra con un ritaglio (prima col tratteggio: con lo spessore fisso
   del tratto il tratteggio si spezzava e a fine animazione restavano due pezzi, come si vedeva nello screenshot di Giorgio) */
.js-ev .s-sott-segno path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.js-ev .s-sott-segno { clip-path: inset(-60% 100% -60% -6%); transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.35s; }
.js-ev .s-sott.su .s-sott-segno { clip-path: inset(-60% -6% -60% -6%); }
@media (prefers-reduced-motion: reduce) { .js-ev .s-sott-segno { clip-path: none; transition: none; } }
/* lo scorrimento sul telefono, più leggero: il filo cresce con una trasformazione (niente layout a ogni fotogramma),
   il punto luminoso scende con translate, il cielo cambia solo opacità (su un suo strato), niente sfocatura dietro le notifiche */
.s-turno-filo i { height: 100%; transform: scaleY(0); transform-origin: 50% 0; will-change: transform; }
.s-turno-filo i::after { display: none; }
.s-turno-filo b { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(164 139 255 / 0.35); will-change: transform; }
/* il bagliore dentro il punto stesso (un'ombra sfocata grande su uno strato che si muove usciva quadrata sul telefono) */
.s-turno-filo b::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgb(164 139 255 / 0.75) 0, rgb(164 139 255 / 0.32) 34%, rgb(164 139 255 / 0) 70%); }
/* sul telefono: ombra dei telefoni del turno più semplice (meno da ridisegnare mentre le chat scrivono) */
@media (max-width: 999px) {
  .s-turno .s-vista .tel { box-shadow: inset 0 0 0 0.06em #5b5b66, inset 0 0 0 0.16em #101015, 0 0 0 1px rgb(255 255 255 / 0.08), 0 1.6em 3em -1.4em rgb(0 0 0 / 0.8); }
  .s-turno .s-funzione::before { transition: none; }
}
/* il cielo del turno su un suo strato (non si ridisegna quando cambia il testo sopra), stelle in un solo disegno */
.s-turno-cielo {
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22340%22 height=%22520%22%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%2241%22 cy=%2294%22 r=%22.9%22 opacity=%22.55%22/%3E%3Ccircle cx=%22245%22 cy=%2247%22 r=%22.8%22 opacity=%22.5%22/%3E%3Ccircle cx=%22129%22 cy=%22161%22 r=%221.1%22 opacity=%22.4%22/%3E%3Ccircle cx=%22299%22 cy=%22218%22 r=%22.8%22 opacity=%22.45%22/%3E%3Ccircle cx=%2275%22 cy=%22328%22 r=%22.8%22 opacity=%22.35%22/%3E%3Ccircle cx=%22207%22 cy=%22385%22 r=%221.1%22 opacity=%22.3%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 340px 520px,
    radial-gradient(60% 34% at 85% 6%, rgb(108 77 255 / 0.32), transparent 70%), radial-gradient(48% 30% at 4% 48%, rgb(79 123 255 / 0.16), transparent 70%),
    linear-gradient(180deg, #07061a 0%, #0b0930 60%, #0d0b2b 100%); }
@media (min-width: 1000px) {
  .s-turno .s-funzione { will-change: opacity; }
  .s-turno .s-vista { will-change: opacity, transform; }
}
/* sul computer i telefoni del turno cambiano solo in dissolvenza (senza spostarsi): meno lavoro mentre si scorre */
@media (min-width: 1000px) {
  .s-turno .s-vista { transform: none; transition: opacity 0.4s ease, visibility 0s linear 0.4s; will-change: opacity; }
  .s-turno .s-vista.attiva { transition: opacity 0.4s ease, visibility 0s; }
}
/* ============ 10/10 ============ */
/* nel colloquio, «mettimi alla prova» porta alla sezione della prova */
.s-qa-link { color: var(--s-viola); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.s-qa-link:hover { text-decoration-thickness: 2.5px; }
/* il marchio del piede che risponde alla freccetta e al dito (sara.js, «il marchio del piede»). Ogni lettera ha tre strati
   dentro la sua forma: l'onda del tocco, la luce che segue il puntatore (--lx/--ly, scritti da sara.js solo sulle
   lettere che la luce tocca) e il colore di sempre. Le lettere si muovono solo con transform. Attorno a ogni lettera c'è spazio in
   più (padding, annullato dal margine): le lettere si sovrappongono un poco (spaziatura negativa) e il colore si dipinge
   solo dentro la scatola della lettera; senza quello spazio il bordo di una lettera restava tagliato da una riga dritta. */
.s-piede-marchio { background: none; -webkit-background-clip: border-box; background-clip: border-box; touch-action: pan-y; cursor: default; }
.s-pm-l { display: inline-block; padding: 0.14em 0.14em; margin: -0.14em -0.14em; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text; transform-origin: 50% 80%; will-change: transform;
  --lx: -9999px; --ly: -9999px; --lr: 0px; --la: 0; --lb: 0; --wx: -9999px; --wy: -9999px; --wr: -1px; --wa: 0;
  background-image:
    radial-gradient(circle at var(--wx) var(--wy), rgb(236 230 255 / 0) calc(var(--wr) - 0.07em), rgb(236 230 255 / var(--wa)) var(--wr), rgb(236 230 255 / 0) calc(var(--wr) + 0.07em)),
    radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgb(255 255 255 / var(--la)) 0%, rgb(208 197 255 / var(--la)) 20%, rgb(130 100 255 / var(--lb)) 52%, rgb(130 100 255 / 0) 100%),
    linear-gradient(180deg, #3b3592 0%, #17143f 80%); }
.s-piede-marchio.sveglio .led { animation-duration: 0.7s; }
/* sul computer il titolo del finale sta in tre righe accanto alla finestra */
@media (min-width: 1000px) {
  .s-finale-notte .s-titolo-xl { font-size: clamp(44px, 4.6vw, 68px); max-width: 13ch; }
  .s-finale-notte .s-finale-cuore { column-gap: 64px; }
}
/* dal bianco alla notte: il finale comincia con un tramonto viola (prima c'era uno stacco netto dal colloquio) */
.s-finale-notte { position: relative; margin-top: 40px; padding-top: 110px; padding-bottom: 80px; }
/* 10/10 sera: via la fascia viola sfumata (sembrava un errore di stampa). La notte sale come un foglio con gli angoli
   tondi, come le sezioni sopra il film, e in alto resta solo una luce viola leggera */
.s-finale-notte { border-radius: 32px 32px 0 0; box-shadow: 0 -24px 60px -30px rgb(20 18 31 / 0.5); }
.s-finale-notte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 100% at 50% 0%, rgb(108 77 255 / 0.2), rgb(108 77 255 / 0) 70%); }
.s-finale-notte > .s-contenuto { position: relative; }
@media (min-width: 1000px) {
  .s-finale-notte { margin-top: 60px; padding-top: 150px; padding-bottom: 90px; border-radius: 44px 44px 0 0; }
  .s-finale-notte::before { height: 260px; }
}

/* 10/10: sul computer il telefono del turno e la sua carta (agenda, call) stanno insieme al centro del palco, e la carta
   parte dall'alto del telefono: su uno schermo basso o stretto non va più sotto la testata e non tocca il bordo destro.
   Il palco è la colonna destra: (min(1160px, 100vw − 80px) − 56px) / 2; telefono e carta ne prendono al massimo il 56% */
@media (min-width: 1000px) {
  .s-vista .tel { --tel-w: min(310px, calc((100vh - 150px) * 0.475), calc((min(1160px, 100vw - 80px) - 56px) * 0.281)); }
  .s-vista-coppia { --tw: min(310px, calc((100vh - 150px) * 0.475), calc((min(1160px, 100vw - 80px) - 56px) * 0.281));
    --cw: min(272px, calc((min(1160px, 100vw - 80px) - 56px) * 0.28)); }
  .s-vista-coppia > .tel { --tel-w: var(--tw); left: calc(50% - (0.67 * var(--tw) + var(--cw)) / 2); transform: translateY(-46%); }
  .s-vista-coppia .s-carta { width: var(--cw); left: calc(50% + (0.67 * var(--tw) - var(--cw)) / 2); top: calc(50% - 0.863 * var(--tw)); transform: none; }
  .s-vista-coppia .s-call { top: calc(50% - 0.753 * var(--tw)); transform: none; }
}
/* la scheda (cliente, lead) su uno schermo basso: più piccola (zoom: si rimpicciolisce anche il suo posto, così resta
   al centro tra la testata e il fondo) */
@media (min-width: 1000px) and (max-height: 700px) { .s-vista-carta .s-carta { zoom: 0.86; } }
@media (min-width: 1000px) and (max-height: 610px) { .s-vista-carta .s-carta { zoom: 0.75; } }
@media (min-width: 1000px) and (max-height: 540px) { .s-vista-carta .s-carta { zoom: 0.66; } }
/* ---- 10/10 · il tabellone «Già assunta da» (i numeri sono di Giorgio): le palette come quelle delle stazioni ----
   Ogni cifra è una paletta divisa a metà; quando gira, sara.js aggiunge per un attimo le due «foglie» che ruotano. */
.s-assunta { position: relative; max-width: 780px; margin: 30px auto 0; padding: 20px 20px 24px; border-radius: 28px; text-align: left; color: #f4f3ff; overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 90% at 88% -10%, rgb(108 77 255 / 0.42), transparent 62%), radial-gradient(80% 70% at 0% 110%, rgb(79 123 255 / 0.18), transparent 70%), linear-gradient(180deg, #120e3d, #07061a);
  box-shadow: 0 34px 70px -34px rgb(52 30 160 / 0.6), 0 14px 26px -20px rgb(20 18 31 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.s-assunta-testa { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 650 12.5px/1 var(--testo); letter-spacing: 0.14em; text-transform: uppercase; color: #bdb8e2; }
.s-assunta-testa .led { width: 8px; height: 8px; flex: none; }
.s-assunta-numeri { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.s-assunta-num { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 5px; align-items: end; }
.s-assunta-num .s-flap { grid-row: 1 / span 2; align-self: center; }
.s-assunta-cosa { font: 750 18px/1.15 var(--s-titoli); font-stretch: 108%; letter-spacing: -0.01em; color: #fff; }
.s-assunta-chi { align-self: start; font: 400 14px/1.35 var(--testo); color: #a9a5cc; }
html[data-chi="vendita"] .s-assunta-online { order: -1; }
.s-flap { display: inline-flex; align-items: flex-start; gap: 5px; }
.s-flap-c { --fh: 64px; position: relative; display: block; width: 46px; height: var(--fh); border-radius: 9px;
  font: 800 50px/var(--fh) var(--s-titoli); font-stretch: 105%; color: #fff; text-align: center;
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06); }
.s-flap-c > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.s-flap-c b { position: absolute; left: 0; right: 0; height: var(--fh); font: inherit; transform: translateY(-5%); }   /* le cifre stanno un po' basse nella riga: su del 5% */
.fl-su, .fl-foglia-su { top: 0; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, #2b2657, #221e4a); }
.fl-giu, .fl-foglia-giu { bottom: 0; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #1c1940, #17143a); }
.fl-su b, .fl-foglia-su b { top: 0; }
.fl-giu b, .fl-foglia-giu b { bottom: 0; }
.fl-foglia-su { z-index: 2; transform-origin: 50% 100%; }
.fl-foglia-giu { z-index: 2; transform-origin: 50% 0; transform: scaleY(0); }
/* la riga in mezzo e i due perni ai lati */
.s-flap-c::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #07061a; box-shadow: 0 1px 0 rgb(255 255 255 / 0.05); }
.s-flap-c::before { content: ""; position: absolute; z-index: 4; left: -2px; right: -2px; top: 50%; height: 8px; margin-top: -4px;
  background: linear-gradient(90deg, #3a3566 0 4px, transparent 4px calc(100% - 4px), #3a3566 calc(100% - 4px)); border-radius: 2px; }
.s-flap-piu { margin: 2px 0 0 3px; font: 800 34px/1 var(--s-titoli); color: #a48bff; text-shadow: 0 0 18px rgb(140 110 255 / 0.65); }
@media (min-width: 760px) {
  .s-assunta { margin-top: 34px; padding: 24px 30px 28px; border-radius: 32px; }
  .s-assunta-numeri { grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .s-flap-c { --fh: 82px; width: 58px; font-size: 64px; border-radius: 11px; }
  .fl-su, .fl-foglia-su { border-radius: 11px 11px 0 0; } .fl-giu, .fl-foglia-giu { border-radius: 0 0 11px 11px; }
  .s-flap-piu { font-size: 42px; }
  .s-assunta-cosa { font-size: 20px; }
}
/* ---- 10/10, pomeriggio · il biglietto da visita di Sara (al posto della lettera d'incarico) ----
   Un cartoncino scuro col riflesso olografico. Si inclina verso la freccetta (sul telefono, mentre si scorre): sara.js
   muove solo trasformazioni (il cartoncino, il riflesso, la luce, l'ombra), così non si ridisegna niente.
   È un tasto: toccandolo si parla con Sara. */
.s-finale-notte .s-finale-scena { position: relative; display: grid; justify-items: center; width: 100%; }
.s-finale-notte .s-finale-scena::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(150%, 760px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(108 77 255 / 0.34), rgb(108 77 255 / 0.12) 55%, rgb(108 77 255 / 0)); pointer-events: none; }
.s-biglietto-palco { position: relative; width: min(340px, 86vw); margin: 10px auto 46px; perspective: 1100px; }
.s-biglietto { position: relative; display: block; width: 100%; aspect-ratio: 85 / 55; perspective: 1100px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transform: rotate(-5deg); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.6s ease; }
.js-ev .s-biglietto:not(.visto) { transform: translateY(-46px) rotate(-16deg); opacity: 0; }
.s-biglietto:focus-visible { outline: none; }
.s-biglietto:focus-visible .bg-carta { box-shadow: 0 0 0 3px #a48bff, 0 30px 60px -24px rgb(0 0 0 / 0.9); }
.bg-carta { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 16px; transform-style: flat; will-change: transform;
  background: radial-gradient(120% 90% at 85% 0%, #2a1f86 0%, rgb(42 31 134 / 0) 55%), radial-gradient(90% 80% at 0% 100%, #15325e 0%, rgb(21 50 94 / 0) 60%), linear-gradient(160deg, #141036 0%, #08061c 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.13), inset 0 1px 0 rgb(255 255 255 / 0.22), 0 30px 60px -24px rgb(0 0 0 / 0.9); color: #f4f2ff; }
.bg-ombra { position: absolute; left: 8%; right: 8%; bottom: -10%; height: 30%; border-radius: 50%; background: rgb(0 0 0 / 0.55); filter: blur(18px); will-change: transform; }
/* la trama fine del cartoncino e il riflesso olografico (una fascia di colori che scorre quando lo inclini) */
.bg-trama { position: absolute; inset: 0; opacity: 0.55;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.035) 0 1px, rgb(255 255 255 / 0) 1px 7px), repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.025) 0 1px, rgb(255 255 255 / 0) 1px 7px); }
.bg-foil { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%; mix-blend-mode: color-dodge; opacity: 0.55; will-change: transform; pointer-events: none;
  background: linear-gradient(115deg, rgb(0 0 0 / 0) 36%, rgb(110 90 255 / 0.55) 42%, rgb(90 170 255 / 0.5) 46%, rgb(255 130 220 / 0.45) 50%, rgb(120 255 220 / 0.38) 54%, rgb(170 120 255 / 0.5) 58%, rgb(0 0 0 / 0) 64%); }
.bg-luce { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.9; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.12) 22%, rgb(255 255 255 / 0) 42%); }
/* le scritte: in alto la sigla e il posto, al centro il marchio col LED, sotto il motto, in fondo chi è */
.bg-testa, .bg-marchio, .bg-motto, .bg-piede { position: absolute; left: 7.5%; right: 7.5%; }
.bg-testa { top: 9%; display: flex; align-items: center; justify-content: space-between; font: 700 11px/1 var(--s-titoli); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #cfc8ff; }
.bg-sigla { display: inline-flex; align-items: center; gap: 7px; }
.bg-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b9a6ff; box-shadow: 0 0 10px 2px rgb(150 120 255 / 0.85); }
.bg-ruolo { letter-spacing: 0.2em; color: #a9a2d9; }
.bg-marchio { top: 27%; display: flex; align-items: flex-start; font: 800 66px/0.9 var(--s-titoli); font-stretch: 112%; letter-spacing: -0.045em; text-transform: lowercase;
  background: linear-gradient(180deg, #ffffff 30%, #c4b6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-led-grande { width: 11px; height: 11px; margin: 11px 0 0 6px; flex: none; animation: bg-led 2.6s ease-in-out infinite; }
@keyframes bg-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.bg-motto { top: 58%; font: italic 400 21px/1.08 var(--titoli); color: #e9e4ff; }
.bg-piede { bottom: 8.5%; display: flex; align-items: center; justify-content: space-between; font: 600 10.5px/1 var(--testo); letter-spacing: 0.14em; text-transform: uppercase; color: #8f89bd; }
.bg-scrivimi { display: inline-flex; align-items: center; gap: 6px; color: #e9e4ff; }
.bg-scrivimi::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg); }
.s-biglietto:hover .bg-scrivimi { color: #fff; }
@media (min-width: 1000px) {
  .s-biglietto-palco { width: min(470px, 100%); margin: 0; }
  .bg-carta { border-radius: 20px; }
  .bg-testa { font-size: 12.5px; }
  .bg-marchio { font-size: 92px; }
  .bg-led-grande { width: 14px; height: 14px; margin-top: 15px; }
  .bg-motto { font-size: 28px; }
  .bg-piede { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-biglietto, .js-ev .s-biglietto:not(.visto) { transition: none; transform: rotate(-5deg); opacity: 1; }
  .bg-led-grande { animation: none; }
}
/* sul telefono prima il titolo e le parole del finale, poi il biglietto da visita, poi «Parla con Sara» */
@media (max-width: 999px) {
  .s-finale-notte .s-finale-testo { display: contents; }
  .s-finale-notte .s-finale-testo > * { order: 1; }
  .s-finale-notte .s-finale-scena { order: 2; margin-top: 30px; }
  .s-finale-notte .s-finale-testo > .azione, .s-finale-notte .s-finale-testo > .nota-canali { order: 3; }
  /* le righe sotto il titolo al centro come il titolo (sul tablet stavano spostate a sinistra) */
  .s-finale-notte .s-finale-testo .s-testo { margin-left: auto; margin-right: auto; }
}

/* ---- 10/10 · «Per chi lavoro»: la via delle insegne (Segretaria) e le offerte (Setter) ----
   Tre file che scorrono in versi alterni, solo con transform (niente ridisegni). Ogni fila ha tre copie uguali e scorre di
   una copia, poi ricomincia: non si vede mai la cucitura, nemmeno sui monitor larghi. Fuori dallo schermo le file si
   fermano (sara.js mette .fuori). Col mouse sopra, la fila si ferma per leggere. Con «meno movimento» stanno ferme e
   vanno a capo. Le insegne sono targhe: ognuna col suo colore e il suo carattere, come in una via vera. */
.s-perchi { padding-top: 80px; }
.s-perchi-testa .s-titolo { max-width: 16em; margin-left: auto; margin-right: auto; }
.s-perchi-testa .s-titolo-viola { display: block; }
.s-insegne { display: grid; gap: 4px; margin-top: 36px; }
.s-ins-fila { position: relative; overflow: hidden; padding: 6px 0 18px; contain: paint; }
.s-ins-fila::before, .s-ins-fila::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 36px; pointer-events: none; }
.s-ins-fila::before { left: 0; background: linear-gradient(90deg, var(--s-carta), rgb(255 255 255 / 0)); }
.s-ins-fila::after { right: 0; background: linear-gradient(270deg, var(--s-carta), rgb(255 255 255 / 0)); }
.s-ins-pista { display: flex; width: max-content; animation: s-ins-via 72s linear infinite; will-change: transform; }
.s-ins-fila-2 .s-ins-pista { animation-duration: 86s; animation-direction: reverse; }
.s-ins-fila-3 .s-ins-pista { animation-duration: 64s; }
.s-perchi.fuori .s-ins-pista { animation-play-state: paused; }
@keyframes s-ins-via { to { transform: translate3d(-33.3333%, 0, 0); } }
.s-ins-giro { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
@media (hover: hover) and (pointer: fine) { .s-ins-fila:hover .s-ins-pista { animation-play-state: paused; } }

/* la targa: il fondo, le due viti, l'ombra sul muro */
.ins, .off { position: relative; display: inline-flex; align-items: center; gap: 0.5em; flex: none; height: 2.75em; padding: 0 1.2em;
  border-radius: 0.6em; font: 650 15px/1 var(--testo); white-space: nowrap; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 12px 22px -14px rgb(20 18 31 / 0.55); }
.ins b, .off b { font: inherit; }
.ins-ic { flex: none; width: 1.2em; height: 1.2em; fill: currentColor; }
.ins::before, .ins::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; opacity: 0.32; }
.ins::before { left: 7px; } .ins::after { right: 7px; }
.ins-palo { flex: none; width: 0.62em; height: 1.65em; border-radius: 0.31em; background: repeating-linear-gradient(-55deg, #e23b3b 0 4px, #fff 4px 8px, #2a5bd7 8px 12px, #fff 12px 16px); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.2); }
/* i caratteri delle insegne */
.ins-1 b, .ins-5 b, .ins-7 b, .ins-9 b, .ins-14 b, .ins-17 b { font: italic 400 1.34em/1 "Instrument Serif", Georgia, serif; letter-spacing: 0.005em; }
.ins-5 b, .ins-15 b { font-style: normal; }
.ins-15 b { font: 400 1.28em/1 "Instrument Serif", Georgia, serif; }
.ins-10 b { font: 400 1.08em/1 "Instrument Serif", Georgia, serif; letter-spacing: 0.18em; text-transform: uppercase; }
.ins-2 b, .ins-16 b { font: 800 0.9em/1 var(--s-titoli); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; }
.ins-4 b { font: 850 0.98em/1 var(--s-titoli); font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; }
.ins-6 b { font: 900 0.98em/1 var(--s-titoli); font-stretch: 112%; font-style: oblique 10deg; letter-spacing: 0.03em; text-transform: uppercase; }
.ins-8 b { font: 500 0.94em/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.1em; }
.ins-11 b { font: 800 0.98em/1 var(--s-titoli); font-stretch: 125%; letter-spacing: 0.06em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px #fff; }
.ins-18 b { font: 400 0.8em/1 var(--testo); letter-spacing: 0.34em; text-transform: uppercase; margin-right: -0.34em; }
/* i colori: ogni bottega il suo */
.ins-1 { background: #c42b2b; color: #fff3df; }
.ins-2 { background: #17151f; }
.ins-3 { background: #fff; color: #0e8a78; box-shadow: inset 0 0 0 2px #19b39a, 0 12px 22px -14px rgb(20 18 31 / 0.4); }
.ins-4 { background: #2b2e35; color: #ff8a1f; }
.ins-5 { background: #ffe2ea; color: #3a1f2b; } .ins-5 .ins-ic { color: #d0457a; }
.ins-6 { background: #111; color: #ffd400; }
.ins-7 { background: #f5ece2; color: #9a6b45; }
.ins-8 { background: #10285a; }
.ins-9 { background: #c8f1e2; color: #e0437c; }
.ins-10 { background: #123a2d; color: #f3e6c8; }
.ins-11 { background: #050505; }
.ins-12 { background: #e5f0ff; color: #1b4fd6; }
.ins-13 { background: #2f9e5b; }
.ins-14 { background: #1b0f2e; color: #ff6ad5; text-shadow: 0 0 6px rgb(255 106 213 / 0.75), 0 0 16px rgb(255 106 213 / 0.45); }
.ins-15 { background: #f3e1c2; color: #6c3f1c; }
.ins-16 { background: #1f5fd6; }
.ins-17 { background: #fbe5ec; color: #2e6b3a; }
.ins-18 { background: #fff; color: #14121f; box-shadow: inset 0 0 0 1.5px #14121f, 0 12px 22px -14px rgb(20 18 31 / 0.4); }
.ins-19 { background: #ffd6e0; color: #7a3b22; } .ins-19 b { font: italic 400 1.34em/1 "Instrument Serif", Georgia, serif; }
.ins-20 { background: #ffb703; color: #3d2a00; } .ins-20 b { font: 800 0.96em/1 var(--s-titoli); font-stretch: 110%; letter-spacing: 0.01em; }
.ins-21 { background: #e6f4ec; color: #2f6b4f; } .ins-21 b { font: 400 1.28em/1 "Instrument Serif", Georgia, serif; }
.ins-22 { background: #2b2140; color: #f0d9a7; } .ins-22 b { font: italic 400 1.32em/1 "Instrument Serif", Georgia, serif; }
.ins-23 { background: #fff; color: #0f3d8a; box-shadow: inset 0 0 0 2px #0f3d8a, 0 12px 22px -14px rgb(20 18 31 / 0.4); } .ins-23 b { font-weight: 700; }
.ins-24 { background: #d9f2ff; color: #075985; }

/* le offerte del setter: schede da vetrina online, con l'icona nel quadratino */
.off { gap: 0.6em; padding: 0 1.15em 0 0.5em; border-radius: 0.95em; font-size: 14.5px; }
/* l'insegna vuota in mezzo alla via: «La tua attività» («La tua offerta»), tratteggiata, nel viola di Sara */
.ins-tua, .off-tua { background: #fff; color: var(--s-viola); border: 2px dashed #a48bff; box-shadow: 0 12px 22px -16px rgb(52 30 160 / 0.45); }
.ins-tua::before, .ins-tua::after { display: none; }
.off-tua .ins-ic { background: var(--s-viola-chiaro); }
.off .ins-ic { width: 1.95em; height: 1.95em; padding: 0.44em; border-radius: 0.62em; background: rgb(255 255 255 / 0.2); }
.off-1 { background: linear-gradient(135deg, #6c4dff, #3b82f6); }
.off-2 { background: linear-gradient(135deg, #ff8a3d, #ff4f8b); }
.off-3 { background: #fff; color: #14121f; box-shadow: inset 0 0 0 1px #e4e3ea, 0 12px 22px -14px rgb(20 18 31 / 0.4); } .off-3 .ins-ic { background: #efeaff; color: #6c4dff; }
.off-4 { background: #14121f; color: #d7ff5a; } .off-4 .ins-ic { background: rgb(215 255 90 / 0.14); }
.off-5 { background: #ffd400; color: #111; } .off-5 .ins-ic { background: rgb(0 0 0 / 0.08); }
.off-6 { background: #10285a; }
.off-7 { background: #e8263c; }
.off-8 { background: #f3f3f6; color: #14121f; box-shadow: inset 0 0 0 1px #e4e3ea, 0 12px 22px -14px rgb(20 18 31 / 0.35); } .off-8 .ins-ic { background: #fff; }
.off-9 { background: #0e9f8f; }
.off-10 { background: #ffe2ea; color: #3a1f2b; } .off-10 .ins-ic { background: #fff; color: #d0457a; }
.off-11 { background: #f1e4d0; color: #5b3a1d; } .off-11 .ins-ic { background: rgb(255 255 255 / 0.65); }
.off-12 { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.off-13 { background: #123a2d; color: #f3e6c8; } .off-13 .ins-ic { background: rgb(243 230 200 / 0.14); }
.off-14 { background: #0b0b0f; }
.off-15 { background: #fff; color: #6c4dff; box-shadow: inset 0 0 0 1.5px #e4dcff, 0 12px 22px -14px rgb(52 30 160 / 0.4); } .off-15 .ins-ic { background: #efeaff; }
.off-16 { background: #1e293b; color: #67e8f9; } .off-16 .ins-ic { background: rgb(103 232 249 / 0.12); }
.off-17 { background: #fff4e0; color: #c42b2b; } .off-17 .ins-ic { background: #fff; }
.off-18 { background: #fbe5ec; color: #3a1f2b; } .off-18 b { font: italic 400 1.3em/1 "Instrument Serif", Georgia, serif; } .off-18 .ins-ic { background: #fff; color: #c2577e; }
.off-19 { background: linear-gradient(135deg, #f9a8d4, #ec4899); }
.off-20 { background: #f5f0e8; color: #3a3a3a; } .off-20 .ins-ic { background: #fff; }
.off-21 { background: #fef3c7; color: #92400e; } .off-21 .ins-ic { background: #fff; color: #f59e0b; }
.off-22 { background: #111827; color: #f9fafb; }
.off-23 { background: #fff; color: #1f2937; box-shadow: inset 0 0 0 1px #e4e3ea, 0 12px 22px -14px rgb(20 18 31 / 0.4); } .off-23 .ins-ic { background: #f3f3f6; }
.off-24 { background: linear-gradient(135deg, #bef264, #22c55e); color: #052e16; } .off-24 .ins-ic { background: rgb(255 255 255 / 0.45); }
@media (min-width: 1000px) {
  .s-perchi { padding-top: 120px; }
  .s-insegne { gap: 8px; margin-top: 52px; }
  .s-ins-giro { gap: 16px; padding-right: 16px; }
  .s-ins-fila::before, .s-ins-fila::after { width: 160px; }
  .ins { font-size: 20px; }
  .off { font-size: 19px; }
}
/* con meno movimento: niente che scorre; le insegne (una copia sola) vanno a capo tutte insieme, al centro */
@media (prefers-reduced-motion: reduce) {
  .s-insegne { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; padding: 0 16px 18px; }
  .s-ins-fila, .s-ins-pista, .s-ins-giro { display: contents; animation: none; }
  .s-ins-giro + .s-ins-giro, .s-ins-fila::before, .s-ins-fila::after { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 999px) { .ins, .off { font-size: 13px; } .s-insegne { gap: 10px 8px; } }

/* ---- 10/10 sera · «Come si parte»: tre passi; la decisione è la riga accanto al tasto (il quarto riquadro era vuoto) ---- */
@media (min-width: 1000px) { .s-passi { grid-template-columns: repeat(3, 1fr); } }
.s-passi-fine { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.s-passi-fine p { margin: 0; font: 500 18px/1.35 var(--testo); color: var(--s-inchiostro); }
.s-passi-fine b { font-weight: 700; }

/* ---- 10/10 sera · un solo tasto «Parla con Sara», uguale dappertutto: giallo come il casco di Sara ----
   Prima erano quattro: sfumato in cima, nero nelle sezioni, bianco nel finale, sfumato nella barra in basso. */
:root { --casco: #ffc43d; --casco-su: #ffd166; --casco-inchiostro: #1a1405; }
.pulsante.apri-sara, .s-bottone.apri-sara, .testata.sopra .pulsante.apri-sara, .s-finale-notte .s-bottone.apri-sara {
  background: var(--casco); color: var(--casco-inchiostro); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 10px 26px -12px rgb(255 170 30 / 0.55); }
.pulsante.apri-sara:hover, .s-bottone.apri-sara:hover, .testata.sopra .pulsante.apri-sara:hover, .s-finale-notte .s-bottone.apri-sara:hover { background: var(--casco-su); }
.pulsante.apri-sara:focus-visible, .s-bottone.apri-sara:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--s-inchiostro); }

/* ---- 10/10 notte · «Tu chiudi alle 19. Io rispondo alle 23.»: la sera vera, al posto della saracinesca disegnata ----
   Un video quadrato (Higgsfield) dentro una finestra con gli angoli arrotondati; sotto c'è la foto del primo fotogramma,
   così prima che il video arrivi non si vede un buco. Sopra: l'ora che corre (sara.js) e, sulla fascia vuota della bottega,
   i mestieri che cambiano. Il pallino dell'ora è giallo finché la bottega è aperta, viola quando tocca a Sara. */
.s-cantiere { position: relative; overflow: hidden; padding: 96px 0 30px; }
/* 11/10: tagliato solo ai lati: in basso l'ombra della scena della sera finiva tagliata da una riga dritta */
@supports (overflow-x: clip) { .s-cantiere { overflow: visible; overflow-x: clip; } }
.s-cantiere-cuore { display: grid; gap: 30px; align-items: center; }
.s-cantiere .s-titolo-xl { max-width: 13ch; }
.s-cantiere-scena { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.s-sera { position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate; border-radius: 26px; background: #1b1830; cursor: pointer;
  box-shadow: 0 50px 90px -50px rgb(20 18 31 / 0.6), 0 0 0 1px rgb(20 18 31 / 0.06); -webkit-tap-highlight-color: transparent; }
.s-sera-foto, .s-sera-foto img, .s-sera-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.s-sera-notte { display: none; }
/* la fascia vuota sopra la vetrina (misurata sul video: dentro la cornice scura) */
.s-sera-insegna { position: absolute; z-index: 2; left: 17.1%; top: 22.8%; width: 65.6%; height: 8.5%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.s-sera-insegna b { font: 400 min(31px, calc((100vw - 32px) * 0.056))/1 "Instrument Serif", Georgia, serif; letter-spacing: 0.16em; margin-right: -0.16em;
  text-transform: uppercase; white-space: nowrap; color: rgb(52 36 22 / 0.88); transition: opacity 0.9s ease; }
.s-sera.notte .s-sera-insegna b { opacity: 0.55; }
.s-sera-ora { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px;
  border-radius: 999px; background: rgb(12 10 24 / 0.5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  color: #fff; font: 600 15px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.s-sera-ora .led { width: 8px; height: 8px; flex: none; background: var(--casco); box-shadow: 0 0 10px 2px rgb(255 196 61 / 0.75); transition: background 0.4s, box-shadow 0.4s; }
.s-sera.chiusa .s-sera-ora .led { background: #9d8bff; box-shadow: 0 0 12px 2px rgb(140 120 255 / 0.9); }
@media (min-width: 1000px) {
  .s-cantiere { padding: 140px 0 40px; }
  .s-cantiere-cuore { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 64px; }
  .s-sera { border-radius: 32px; }
  .s-sera-ora { left: 20px; top: 20px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-sera-video, .s-sera-giorno, .s-sera-insegna { display: none; }
  .s-sera-notte { display: block; }
  .s-sera { cursor: default; }
}

/* ---- 10/10 notte · la fototessera vera del curriculum (Higgsfield): Sara nella cabina delle fototessere, quattro scatti.
   La foto è stampata (il bordo bianco è nella foto), un po' storta e tenuta da una graffetta, come su un curriculum vero.
   Il lampo è uno strato bianco che si accende e si spegne (sara.js); si vede una foto alla volta. ---- */
.s-cv-foto { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.s-cabina { position: relative; width: 100%; height: 100%; transform: rotate(-2.4deg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.s-cabina .s-scatto, .s-cabina img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.s-cabina img { object-fit: cover; border-radius: 3px; box-shadow: 0 14px 24px -14px rgb(20 18 31 / 0.6), 0 0 0 1px rgb(20 18 31 / 0.07); }
.s-scatto { opacity: 0; }
.s-scatto.su { opacity: 1; }
.s-lampo { position: absolute; inset: -5px; z-index: 1; border-radius: 6px; background: #fff; opacity: 0; pointer-events: none; }
.s-graffetta { position: absolute; z-index: 2; left: 18%; top: -15px; width: 15px; height: 44px; transform: rotate(-7deg); pointer-events: none; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .s-cabina { cursor: default; } }

/* 11/10 · sul telefono i paragrafi lunghi al centro si leggevano male (ogni riga comincia in un punto diverso): «Scrivimi
   tu» e il finale vanno a sinistra, come il resto della pagina. Il biglietto da visita resta al centro. */
@media (max-width: 759px) {
  .s-prova-cuore.s-centro { text-align: left; }
  .s-prova-cuore .s-testo { margin-left: 0; margin-right: 0; }
  .dopo .s-prova-cuore .azione { justify-content: flex-start; }
  .dopo .s-prova-cuore .nota-canali { margin-left: 0; margin-right: 0; }
  .s-finale-notte .s-finale-cuore { justify-items: start; text-align: left; }
  .s-finale-notte .s-finale-testo .s-testo { margin-left: 0; margin-right: 0; }
  .s-finale-notte .azione { justify-content: flex-start; }
  .s-finale-notte .s-finale-scena { justify-self: stretch; }
}

/* 11/10 · le tre righe sopra il tabellone: le icone stanno in una colonna larga uguale per tutte (prima il logo di WhatsApp
   era più largo del calendario e i testi cominciavano in punti diversi) */
.s-fiducia-fatti li > :first-child { flex: none; width: 22px; display: inline-flex; justify-content: center; }
html[data-chi="vendita"] .s-fiducia-fatti li > :first-child { width: 47px; }

/* 11/10 · il tabellone: il «+» del 12 spostava a destra il testo della prima riga, e i due testi non partivano dallo
   stesso punto. Nella riga del 10 c'è lo stesso «+», invisibile, che tiene lo stesso spazio. */
.s-assunta-online .s-flap::after { content: "+"; visibility: hidden; margin: 2px 0 0 3px; font: 800 34px/1 var(--s-titoli); }
@media (min-width: 760px) { .s-assunta-online .s-flap::after { font-size: 42px; } }

/* 11/10 · l'etichetta «esempio»: una sola, neutra, uguale dappertutto. Prima era gialla come il casco, e tante pillole
   gialle facevano concorrenza al «Parla con Sara», giallo anche lui. Si legge bene, ma non chiama l'occhio. */
.esempio-tag { background: #fff; color: #4b4960; font-weight: 600; box-shadow: 0 0 0 1px rgb(20 18 31 / 0.12), 0 4px 12px -6px rgb(20 18 31 / 0.35); }
.s-esempio-linea.esempio-tag { box-shadow: 0 0 0 1px rgb(20 18 31 / 0.14); }
.s-turno .s-sopra .esempio-tag { background: rgb(255 255 255 / 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24); }
.ios-esempio, .avviso-testa .esempio-piccolo, .etichetta-esempio { background: rgb(255 255 255 / 0.92); color: #2a2840; }