/* Boosted v4 · bozza E — pagina «Strumenti»: le tre campagne delle sponsorizzate e gli strumenti per farli tornare.
   Usa e.css (colori, cromo, titoli che salgono), tasti/tasti.css (il metallo) e parti/menu.css (testata e menu).
   Le schermate d'esempio sono HTML/CSS: dentro ai telefoni 1em = larghezza del telefono / 25, così tutto scala insieme.
   Si muove solo con transform, opacity e clip-path. Movimento ridotto e html.fermo = stato finale. Mobile first. */

.st-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }
main h4 { margin: 0; }
:root { --molla: cubic-bezier(0.34, 1.5, 0.64, 1); }

/* small «Esempio» pill: the screens are examples, with invented names */
.etichetta-esempio {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--lilla-chiaro);
  background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35);
}

/* reveal once (strumenti.js adds .rv only when it can also add .visto) */
html.js .rv { transition: opacity 700ms ease-out, transform 900ms var(--curva); }
html.js .rv:not(.visto) { opacity: 0; transform: translateY(26px); }

/* ── Apertura ───────────────────────────────────────────── */
.st-eroe {
  position: relative; display: grid;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 40px) var(--g) 40px;
  isolation: isolate; overflow-x: clip;
}
.st-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 38%;
  width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.13), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .st-eroe__luce { animation: st-respira 9s ease-in-out infinite alternate; } }
@keyframes st-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.st-eroe__testo { align-self: center; }
.st-eroe__sopra { font-size: 14.5px; color: var(--sec); margin-bottom: 18px; }
.st-eroe__titolo { font-size: clamp(44px, 12.6vw, 132px); line-height: 0.98; font-weight: 760; letter-spacing: -0.034em; text-wrap: balance; max-width: 9.6em; }
.st-eroe__sotto { margin-top: 26px; max-width: 26em; color: var(--sec); font-size: clamp(18px, 4.8vw, 23px); line-height: 1.45; }
.st-eroe__sotto span { display: block; }
.st-eroe__sotto span + span { margin-top: 4px; color: var(--testo); }
@media (min-width: 1024px) {
  .st-eroe { min-height: 68svh; align-content: end; padding-bottom: 24px; }
  .st-eroe__testo { align-self: end; }
  .st-eroe__titolo { font-size: clamp(72px, 7.6vw, 132px); }
}

/* ── Sezioni ────────────────────────────────────────────── */
.st-campagne, .st-strumenti, .st-strategia { position: relative; padding: 104px var(--g) 0; }
.st-testa { max-width: 1296px; margin: 0 auto; }
.st-etichetta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.st-etichetta::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cromo); background-size: 240% 100%; }
.st-titolo { font-size: clamp(40px, 10.6vw, 92px); line-height: 1; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; max-width: 10.5em; }
.st-testa__lato { margin-top: 24px; display: grid; gap: 14px; max-width: 34em; }
.st-cose { font-size: clamp(19px, 5vw, 24px); line-height: 1.38; font-weight: 620; letter-spacing: -0.015em; }
.st-frase { color: var(--sec); font-size: 17px; line-height: 1.55; }
@media (min-width: 1024px) {
  .st-campagne, .st-strumenti, .st-strategia { padding-top: 160px; }
  .st-testa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .st-testa__lato { margin-top: 0; padding-bottom: 8px; }
}

/* ══ Il telefono delle schermate d'esempio ═══════════════════ */
.tel {
  --tel-w: 240px;
  position: relative; flex: none; width: var(--tel-w); height: calc(var(--tel-w) * 2.06);
  padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.165);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: -0.01em; text-align: left;
}
.tel__schermo {
  --u: calc(var(--tel-w) / 25);
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--tel-w) * 0.137);
  font-size: var(--u); line-height: 1.3; color: #F5F5F7; background: #000;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.tel__schermo::before {
  content: ''; position: absolute; z-index: 30; top: calc(var(--u) * 1.05); left: 50%;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.15); margin-left: calc(var(--u) * -3.7); border-radius: 999px; background: #000;
}
.tel__stato {
  position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: calc(var(--u) * 4.3);
  display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 2) 0 calc(var(--u) * 2.5);
  pointer-events: none;
}
.tel__stato b { font-size: 1.22em; font-weight: 600; letter-spacing: -0.01em; }
.tel__icone { width: calc(var(--u) * 5.4); height: calc(var(--u) * 0.95); fill: currentColor; }
.tel__barra { position: absolute; z-index: 25; bottom: calc(var(--u) * 0.55); left: 50%; width: calc(var(--u) * 8.6); height: calc(var(--u) * 0.36); margin-left: calc(var(--u) * -4.3); border-radius: 999px; background: rgba(255, 255, 255, 0.82); }
.tel svg { fill: currentColor; }

/* a real photo cropped to the plate */
.ritaglio { position: relative; overflow: hidden; }
.ritaglio img { width: 100%; height: 100%; object-fit: cover; object-position: var(--o, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }

/* the replay: classes f1…f5 are the steps of each example; .azzera puts it back to the start without animating */
.azzera, .azzera *, .azzera *::before, .azzera *::after { transition: none !important; animation: none !important; }

/* ══ Le schermate d'esempio delle tre campagne: Instagram, il modulo, lo schermo bloccato (base) ══ */
.ig__storie { display: flex; gap: 0.95em; padding: 0.3em 1em 0.8em; border-bottom: 1px solid #1c1c1e; }
.ig__storia { flex: none; display: grid; justify-items: center; gap: 0.45em; }
.ig__storia i { display: block; width: 3.9em; height: 3.9em; border-radius: 50%; padding: 0.2em; background: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 55%, #962fbf 80%, #4f5bd5); }
.ig__storia i::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 0.22em solid #000; background: linear-gradient(160deg, #3a3d45, #24262b); }
.ig__storia:nth-child(3) i::after { background: linear-gradient(160deg, #4b3e66, #2a2338); }
.ig__storia:nth-child(4) i::after { background: linear-gradient(160deg, #3f4652, #262a31); }
.ig__storia--tua i { background: #2a2a2d; }
.ig__storia b { display: block; width: 3.4em; height: 0.42em; border-radius: 1em; background: #2c2c2e; }
.ig__testa { display: grid; grid-template-columns: 2.7em 1fr auto; gap: 0.7em; align-items: center; padding: 0.7em 1em; }
.ig__avatar { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #C9A9E9, #8B6FB8 55%, #4A3B78); }
.ig__avatar svg { width: 62%; height: 62%; }
.ig__chi b { display: block; font-size: 1.08em; font-weight: 600; line-height: 1.2; }
.ig__chi small { display: block; font-size: 0.9em; color: #a8a8a8; }
.ig__altro { display: flex; gap: 0.22em; }
.ig__altro i { width: 0.32em; height: 0.32em; border-radius: 50%; background: #f5f5f5; }
.ig__offerta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.4em 1.2em 1.1em; display: grid; gap: 0.15em;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.ig__offerta small { font-size: 1.02em; font-weight: 600; color: #F2EAD6; letter-spacing: 0.01em; }
.ig__offerta b { font-size: 1.95em; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.ig__cta { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 3.3em; padding: 0 1em; background: #262626; font-size: 1.05em; font-weight: 600; overflow: hidden; }
.ig__cta::before { content: ''; position: absolute; inset: 0; background: #0095f6; clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--curva); }
.ig__cta > * { position: relative; }
.ig__cta svg { width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig__azioni { display: flex; align-items: center; gap: 1.1em; padding: 0.85em 1em 0.4em; }
.ig__azioni svg { width: 1.75em; height: 1.75em; fill: none; stroke: #f5f5f5; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ig__salva { margin-left: auto; }
.ig__testo { padding: 0 1em; font-size: 1.02em; line-height: 1.35; color: #f5f5f5; }
.ig__testo b { font-weight: 600; }
.ig__tab { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4.2em; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 0.9em; background: #000; border-top: 1px solid #1c1c1e; }
.ig__tab i { width: 1.6em; height: 1.6em; border-radius: 0.45em; box-shadow: inset 0 0 0 0.16em #f5f5f5; }
.ig__tab .ig__io { border-radius: 50%; background: linear-gradient(160deg, #3a3d45, #24262b); box-shadow: inset 0 0 0 0.14em #f5f5f5; }
.mo__avatar { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #C9A9E9, #8B6FB8 55%, #4A3B78); }
.mo__avatar svg { width: 60%; height: 60%; }
.mo__locale { margin-top: 0.45em; font-size: 1.02em; font-weight: 600; color: #d6d6d6; }
.mo__titolo { margin-top: 0.55em; font-size: 1.52em; font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; }
.mo__sotto { margin-top: 0.4em; color: #a8a8a8; font-size: 1em; }
.mo__campo { justify-self: stretch; text-align: left; margin-top: 1.05em; }
.mo__campo small { font-size: 0.92em; color: #a8a8a8; }
.mo__valore { display: flex; align-items: center; height: 2.8em; margin-top: 0.3em; padding: 0 0.9em; border-radius: 0.7em; background: #121212; box-shadow: inset 0 0 0 1px #363636; font-size: 1.1em; }
.mo__scritto { white-space: nowrap; clip-path: inset(0 -2px 0 0); }
/* the consent box stands apart, empty, under its own line */
.mo__consenso { position: relative; justify-self: stretch; display: grid; grid-template-columns: 2em 1fr; gap: 0.75em; align-items: start; margin-top: 1.4em; padding-top: 1.2em; text-align: left; font-size: 1em; line-height: 1.35; border-top: 1px solid #262626; }
.mo__facoltativo { display: inline-block; margin-top: 0.3em; padding: 0.1em 0.5em; border-radius: 1em; font-size: 0.8em; color: #a8a8a8; box-shadow: inset 0 0 0 1px #3a3a3a; }
.mo__casella { position: relative; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 0.5em; box-shadow: inset 0 0 0 0.14em #8e8e93; }
.mo__casella::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #0095f6; transition: transform 320ms var(--molla), opacity 200ms ease-out; }
.mo__casella svg { position: relative; width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 0 0 0); transition: clip-path 320ms ease-out 140ms; }
.mo__invia { position: relative; justify-self: stretch; display: grid; place-items: center; height: 3em; margin-top: 1.4em; border-radius: 0.75em; background: #0095f6; font-weight: 600; font-size: 1.08em; transition: opacity 300ms ease-out, transform 160ms ease-out; }
@keyframes premi { 40% { transform: scale(0.95); opacity: 0.8; } 100% { transform: none; opacity: 1; } }

/* ── Il pannello marketing (Boosted): la lista dei contatti ── */
.co, .ge { font-family: 'Montserrat', 'Inter', system-ui, sans-serif; letter-spacing: -0.005em; background: linear-gradient(180deg, #121316 0%, #0a0b0d 100%); }
.co { padding-top: calc(var(--u) * 4.4); }
.co__testa { padding: 0.5em 1.3em 0; }
.co__sopra { color: var(--sec); font-size: 0.95em; }
.co__titolo { font-size: 2.4em; font-weight: 780; letter-spacing: -0.035em; line-height: 1.05; }
.co__cerca { display: flex; align-items: center; gap: 0.5em; margin-top: 0.8em; height: 2.7em; padding: 0 0.9em; border-radius: 0.9em; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--riga-2); color: #6f7580; font-size: 1em; }
.co__cerca svg { width: 1.25em; height: 1.25em; fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.co__filtri { display: flex; gap: 0.4em; margin-top: 0.75em; }
.co__filtro { font-style: normal; padding: 0.45em 0.75em; border-radius: 999px; font-size: 0.86em; font-weight: 600; white-space: nowrap; color: var(--sec); box-shadow: inset 0 0 0 1px var(--riga-2); transition: color 300ms ease-out, background-color 300ms ease-out, box-shadow 300ms ease-out; }
.co__intesta { display: flex; justify-content: space-between; margin-top: 0.95em; padding: 0 0.55em 0.45em; font-size: 0.74em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6f7580; border-bottom: 1px solid var(--riga); }
.co__finestra { margin-top: 0.3em; padding: 0 0.9em; overflow: hidden; height: calc(var(--u) * 29); }
.co__lista { list-style: none; margin: 0; padding: 0.2em 0 0; transition: transform 800ms var(--curva); }
.co__riga { display: grid; grid-template-columns: 2.7em minmax(0, 1fr) auto; gap: 0.7em; align-items: center; height: 4.3em; padding: 0 0.55em; border-bottom: 1px solid var(--riga); }
.co__ini { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: #1d1f24; font-size: 0.88em; font-weight: 700; color: var(--sec); }
.co__chi { min-width: 0; }
.co__chi b { display: block; font-size: 1.06em; font-weight: 650; color: var(--testo); }
.co__chi small { display: block; margin-top: 0.1em; font-size: 0.84em; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co__si { padding: 0.3em 0.75em; border-radius: 999px; font-size: 0.82em; font-weight: 700; color: #1b1330; background: var(--lilla); }
.co__si--no { color: #8a909a; background: transparent; box-shadow: inset 0 0 0 1px var(--riga-2); }

.lo { background: #120d1d; }
.lo__sfondo { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(0.18em 0.18em at 22% 18%, rgba(255, 255, 255, 0.7), transparent),
  radial-gradient(0.14em 0.14em at 74% 12%, rgba(255, 255, 255, 0.6), transparent),
  radial-gradient(0.16em 0.16em at 62% 46%, rgba(255, 255, 255, 0.5), transparent),
  radial-gradient(0.12em 0.12em at 14% 62%, rgba(255, 255, 255, 0.5), transparent),
  radial-gradient(120% 70% at 18% 8%, #5b3f8f 0%, rgba(91, 63, 143, 0) 62%),
  radial-gradient(90% 60% at 92% 86%, #8b6fb8 0%, rgba(139, 111, 184, 0) 62%),
  linear-gradient(180deg, #1d1533, #0b0912); }
.lo::after { content: ''; position: absolute; inset: 0; z-index: 24; background: #000; opacity: 0; pointer-events: none; transition: opacity 600ms ease-out; }
.tel__stato--blocco b { visibility: hidden; }
.lo__lucchetto { position: absolute; top: calc(var(--u) * 4.7); left: 50%; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin-left: calc(var(--u) * -0.75); color: rgba(255, 255, 255, 0.85); }
.lo__lucchetto svg { width: 100%; height: 100%; }
.lo__data { position: absolute; top: calc(var(--u) * 7.1); left: 0; right: 0; text-align: center; font-size: 1.2em; font-weight: 600; color: rgba(255, 255, 255, 0.86); }
.lo__ora { position: absolute; top: calc(var(--u) * 8.7); left: 0; right: 0; text-align: center; font-size: calc(var(--u) * 6.6); line-height: 1; font-weight: 650; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.94); }
.lo__notifica {
  position: absolute; left: 0.75em; right: 0.75em; top: calc(var(--u) * 28); display: grid; grid-template-columns: 2.9em 1fr; gap: 0.8em; align-items: start;
  padding: 0.95em 1em; border-radius: 1.5em; background: rgba(52, 46, 66, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0.8em 2em rgba(0, 0, 0, 0.35);
  transition: opacity 400ms ease-out, transform 800ms var(--molla);
}
.lo__app { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 0.72em; background: linear-gradient(180deg, #5ef27a, #25d366); color: #fff; }
.lo__app svg { width: 70%; height: 70%; }
.lo__testo { display: grid; gap: 0.1em; min-width: 0; }
.lo__riga { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.lo__riga b { font-size: 1.08em; font-weight: 650; }
.lo__riga small { font-size: 0.9em; color: rgba(255, 255, 255, 0.6); }
.lo__msg { font-size: 1.08em; line-height: 1.3; }
.lo__tasto { position: absolute; bottom: calc(var(--u) * 2.9); display: grid; place-items: center; width: 3.7em; height: 3.7em; border-radius: 50%; background: rgba(40, 34, 54, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.lo__tasto svg { width: 42%; height: 42%; }
.lo__tasto--sx { left: 2.6em; }
.lo__tasto--dx { right: 2.6em; }

/* ══ Le tre campagne: la dimostrazione a schede ═══════════════════
   Tre schede, un telefono per campagna. Le classi dei passi (scorre, blu, foglio…) le mette strumenti.js (avviaDemo):
   senza JavaScript, con movimento ridotto o html.fermo si vede lo stato finale di ogni schermata. */
.dm { max-width: 1296px; margin: 48px auto 0; }
.dm__schede { display: none; }
html.js .dm__schede {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 20px;
  background: rgba(8, 9, 10, 0.62); box-shadow: inset 0 0 0 1px var(--riga-2);
}
.dm__scheda {
  position: relative; display: grid; place-items: center; min-height: 60px; padding: 8px 6px 13px; border: 0; border-radius: 16px;
  background: transparent; color: var(--sec); font: 650 14px/1.2 'Montserrat', 'Inter', sans-serif; letter-spacing: -0.01em; text-align: center; text-wrap: balance;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out, transform 120ms ease-out;
}
.dm__scheda[aria-selected="true"] { color: var(--testo); background: rgba(201, 169, 233, 0.11); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.34); }
.dm__scheda:active { transform: scale(0.97); }
.dm__scheda:focus-visible { outline: 2px solid var(--lilla); outline-offset: 2px; }
@media (hover: hover) { .dm__scheda:hover { color: var(--testo); } }
/* the line under the tab fills while its example plays */
.dm__barra { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(247, 248, 248, 0.1); }
.dm__barra::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #8B6FB8, #C9A9E9 55%, #F4EAFF); transform-origin: 0 50%; transform: scaleX(0); }
.dm__scheda.corre .dm__barra::after { transform: scaleX(1); transition: transform var(--durata, 9000ms) linear; }
.dm__scheda.piena .dm__barra::after { transform: scaleX(1); }

/* no JS: the three panels one under the other. JS: one cell, only the chosen one shows */
.dm__pannello { display: grid; gap: 22px; }
.dm__pannello + .dm__pannello { margin-top: 72px; }
.dm__pannello:focus-visible { outline: 2px solid var(--lilla); outline-offset: 6px; border-radius: 16px; }
html.js .dm__pannelli { display: grid; margin-top: 6px; }
html.js .dm__pannello { grid-area: 1 / 1; margin: 0; transition: opacity 320ms ease-out, transform 420ms var(--curva), visibility 0s linear 0s; }
html.js .dm__pannello:not(.attivo) { opacity: 0; transform: translate3d(0, 10px, 0); visibility: hidden; pointer-events: none; transition: opacity 160ms ease-in, transform 160ms ease-in, visibility 0s linear 160ms; }
html.js .dm__vista { order: -1; }

.dm__vista { position: relative; display: grid; justify-items: center; padding: 58px 0 6px; isolation: isolate; }
.dm__vista::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 54%; width: min(130%, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(139, 111, 184, 0.26), rgba(139, 111, 184, 0.06) 60%, rgba(139, 111, 184, 0)); }
.dm__esempio { position: absolute; z-index: 5; top: 9px; left: 0; pointer-events: none; }
html:not(.js) .dm__ancora { display: none; }
.dm__tel { --tel-w: min(60vw, 250px); cursor: pointer; touch-action: manipulation; }

.dm__gergo { font-size: 14px; line-height: 1.45; color: var(--sec); }
.dm__gergo b { font-weight: 650; color: var(--lilla-chiaro); }
.dm__nome { margin-top: 6px; font-size: clamp(30px, 8.6vw, 46px); line-height: 1.04; font-weight: 760; letter-spacing: -0.03em; }
.dm__righe { margin: 18px 0 0; }
.dm__riga { display: grid; gap: 2px; padding: 12px 0 13px; border-top: 1px solid var(--riga); }
.dm__riga:last-child { border-bottom: 1px solid var(--riga); }
.dm__riga dt { font-size: 13px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.dm__riga dd { margin: 0; font-size: 17.5px; line-height: 1.42; font-weight: 560; color: var(--testo); }
.dm__nota { margin-top: 36px; max-width: 40em; font-size: 17px; line-height: 1.55; color: var(--sec); }

@media (min-width: 1024px) {
  .dm { margin-top: 80px; }
  .dm__scheda { min-height: 68px; font-size: 18px; }
  .dm__pannello { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 72px; align-items: center; }
  html.js .dm__vista { order: 0; }
  .dm__vista { justify-self: center; width: min(100%, 440px); padding-top: 64px; }
  .dm__tel { --tel-w: 286px; }
  .dm__nome { font-size: clamp(48px, 4.4vw, 68px); }
  .dm__righe { margin-top: 32px; }
  .dm__riga { grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 18px 0 19px; }
  .dm__riga dd { font-size: 21px; }
  .dm__nota { margin-top: 48px; }
}

/* ── Inside the phones (1em = phone width / 25) ── */
.dm-s { background: #000; }
.dm__finestra { position: absolute; left: 0; right: 0; top: 4.4em; bottom: 4.2em; overflow: hidden; }
.dm__feed { transform: translate3d(0, -34em, 0); transition: transform 1100ms cubic-bezier(0.45, 0.05, 0.25, 1); }
html.js .dm__tel:not(.scorre) .dm__feed { transform: none; }
.dm__storie { height: 6.6em; }
.dm__storie .ig__storia b { width: 5em; height: auto; font-size: 0.78em; font-weight: 400; line-height: 1.2; text-align: center; color: #f5f5f5; background: none; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm__storie .ig__storia--tua b { color: #a8a8a8; }
.dm__storie .ig__storia:nth-child(2) i::after { background: radial-gradient(circle at 40% 35%, #f1cfa8, #b0715a 60%, #4a2f2c); }
.dm__storie .ig__storia:nth-child(3) i::after { background: radial-gradient(circle at 60% 40%, #9fb8d6, #4c6585 60%, #22303f); }
.dm__storie .ig__storia:nth-child(4) i::after { background: radial-gradient(circle at 45% 40%, #e2c08a, #8c6a3c 60%, #3a2c1c); }
.dm__storie .ig__storia:nth-child(5) i::after { background: radial-gradient(circle at 50% 35%, #d9a7a0, #8a5254 60%, #3b2326); }
.dm__post .ig__testa { height: 4.1em; padding-top: 0; padding-bottom: 0; }
.dm__post .ig__azioni { height: 3em; }
.dm__amico { height: 27.7em; overflow: hidden; }
.ig__avatar.dm__faccia { background: radial-gradient(circle at 40% 32%, #f0c9a0, #a8664a 55%, #3d2a2a); }
.ig__avatar.dm__faccia--2 { background: radial-gradient(circle at 55% 35%, #e9c3b4, #96606a 55%, #352330); }
.dm__foto { position: relative; display: block; height: 18em; overflow: hidden; background: #161616; }
.dm__annuncio .dm__foto { height: 20.5em; }
/* two «photos» of friends, before the ad */
.dm__tramonto { background:
  radial-gradient(ellipse 70% 36% at 16% 104%, #15131b 0 60%, rgba(21, 19, 27, 0) 61%),
  radial-gradient(ellipse 82% 28% at 84% 104%, #1d1a24 0 62%, rgba(29, 26, 36, 0) 63%),
  radial-gradient(circle at 60% 63%, #fff4dc 0 0.9em, rgba(255, 214, 150, 0.75) 1.4em, rgba(255, 170, 100, 0) 7em),
  linear-gradient(180deg, #24304f 0%, #4f5079 30%, #b07c78 54%, #eaa974 64%, #f2bd84 68%, #6b4a4c 84%, #2a2230 100%); }
.dm__citta { background:
  radial-gradient(circle at 18% 30%, rgba(255, 210, 140, 0.9) 0 0.25em, rgba(255, 210, 140, 0) 1.3em),
  radial-gradient(circle at 74% 22%, rgba(255, 190, 120, 0.8) 0 0.3em, rgba(255, 190, 120, 0) 1.6em),
  radial-gradient(circle at 46% 48%, rgba(255, 230, 190, 0.7) 0 0.2em, rgba(255, 230, 190, 0) 1.1em),
  radial-gradient(circle at 86% 58%, rgba(255, 170, 110, 0.7) 0 0.35em, rgba(255, 170, 110, 0) 1.8em),
  radial-gradient(circle at 30% 70%, rgba(255, 220, 160, 0.6) 0 0.3em, rgba(255, 220, 160, 0) 1.5em),
  radial-gradient(circle at 60% 80%, rgba(255, 200, 150, 0.5) 0 0.4em, rgba(255, 200, 150, 0) 2em),
  linear-gradient(180deg, #0d1424 0%, #1a2238 45%, #3a2f36 75%, #20191d 100%); }
html.js .dm__tel:not(.blu) .dm__cta::before { clip-path: inset(0 100% 0 0); }

/* the sheet that comes up from the bottom, with a dark veil behind */
.dm__velo { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0.6; pointer-events: none; transition: opacity 400ms ease-out; }
.dm__foglio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; padding: 0.7em 1.4em 2.2em; border-radius: 1.6em 1.6em 0 0; background: #1c1c1e; transition: transform 620ms var(--curva); }
html.js .dm__tel:not(.foglio) .dm__velo { opacity: 0; }
html.js .dm__tel:not(.foglio) .dm__foglio { transform: translate3d(0, 104%, 0); }
.dm__maniglia { display: block; width: 3em; height: 0.32em; margin: 0 auto 0.9em; border-radius: 1em; background: #48484a; }
.dm__modulo { display: grid; justify-items: center; text-align: center; }
.dm__modulo .mo__campo { margin-top: 0.85em; }
.dm__modulo .mo__valore { background: #121212; }
.dm__modulo .mo__consenso { margin-top: 1.1em; padding-top: 1em; border-top-color: #333; }
.dm__modulo .mo__invia { margin-top: 1.2em; transition: opacity 300ms ease-out; }
html.js .dm__tel:not(.nome) .dm__nome-campo, html.js .dm__tel:not(.numero) .dm__numero-campo { clip-path: inset(0 100% 0 0); }
.dm__tel.nome .dm__nome-campo { transition: clip-path 500ms steps(6, end); }
.dm__tel.numero .dm__numero-campo { transition: clip-path 800ms steps(15, end); }
html.js .dm__tel:not(.numero) .dm__modulo .mo__invia { opacity: 0.45; }
html.js .dm__tel:not(.spunta) .dm__modulo .mo__casella::before { opacity: 0; transform: scale(0.4); }
html.js .dm__tel:not(.spunta) .dm__modulo .mo__casella svg { clip-path: inset(0 100% 0 0); }
.dm__tel.invia .dm__modulo .mo__invia { animation: premi 420ms ease-out both; }
.dm__fatto { position: absolute; inset: 1.6em 0 0; display: grid; align-content: center; justify-items: center; gap: 0.7em; padding: 0 1.6em 2em; text-align: center; background: #1c1c1e; transition: opacity 360ms ease-out; }
.dm__fatto > b { font-size: 1.6em; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.dm__fatto > small { font-size: 1em; color: #a8a8a8; }
.dm__spunta { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: #0095f6; transition: transform 520ms var(--molla) 80ms; }
.dm__spunta svg { width: 2.5em; height: 2.5em; fill: none !important; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: clip-path 360ms ease-out 260ms; }
html.js .dm__tel:not(.fatto) .dm__fatto { opacity: 0; }
html.js .dm__tel:not(.fatto) .dm__spunta { transform: scale(0.4); }
html.js .dm__tel:not(.fatto) .dm__spunta svg { clip-path: inset(0 100% 0 0); }
/* the booking sheet: shorter, the confirmation is its whole content */
.dm__foglio--corto { padding-bottom: 3.2em; }
.dm__fatto--fisso { position: relative; inset: auto; padding: 0.2em 0 0; gap: 0.8em; background: none; }
.dm__chi { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.4em; }
.dm__chi .ig__avatar { width: 2.3em; height: 2.3em; }
.dm__chi b { font-size: 1.02em; font-weight: 600; }
.dm__quando { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 0.95em; border-radius: 0.8em; background: #2c2c2e; font-size: 1.04em; font-weight: 600; white-space: nowrap; }
.dm__quando svg { width: 1.2em; height: 1.2em; fill: none !important; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }

/* schermata 2: the reel watched to the end, then a few days later */
.dm__reel { position: absolute; inset: 0; z-index: 1; background: #000; }
.dm__video { position: absolute; inset: 0; }
.dm__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.75) 88%); }
.dm__video img { transform: scale(1.12); transition: transform 3400ms linear; }
html.js .dm__tel:not(.video) .dm__video img { transform: scale(1.02); }
.dm__reel-sopra { position: absolute; z-index: 3; top: 4.7em; left: 1.1em; right: 1.1em; display: flex; align-items: center; justify-content: space-between; }
.dm__reel-sopra b { font-size: 1.55em; font-weight: 700; letter-spacing: -0.02em; }
.dm__reel-sopra svg { width: 1.9em; height: 1.9em; }
.dm__reel-lato { position: absolute; z-index: 3; right: 0.95em; bottom: 9.2em; display: grid; justify-items: center; gap: 1.45em; }
.dm__reel-lato svg { width: 2em; height: 2em; fill: none !important; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.dm__reel-sotto { position: absolute; z-index: 3; left: 1em; right: 4.6em; bottom: 5.6em; display: grid; gap: 0.6em; }
.dm__reel-chi { display: flex; align-items: center; gap: 0.6em; }
.dm__reel-chi .ig__avatar { width: 2.5em; height: 2.5em; }
.dm__reel-chi b { font-size: 1.05em; font-weight: 600; }
.dm__segui { padding: 0.3em 0.75em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); font-size: 0.92em; font-weight: 600; }
.dm__reel-testo { font-size: 1.02em; line-height: 1.32; }
.dm__reel-audio { font-size: 0.88em; color: rgba(255, 255, 255, 0.82); }
.dm__reel-audio::before { content: '♫ '; }
.dm__avanza { position: absolute; z-index: 4; left: 0; right: 0; bottom: 4.2em; height: 0.2em; background: rgba(255, 255, 255, 0.28); }
.dm__avanza i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; }
html.js .dm__tel:not(.video) .dm__avanza i { transform: scaleX(0.03); }
.dm__tel.video .dm__avanza i { transition: transform 2800ms linear; }
.dm__salto { position: absolute; inset: 0; z-index: 29; display: grid; place-content: center; justify-items: center; gap: 0.8em; background: #050506; opacity: 0; pointer-events: none; transition: opacity 380ms ease-out; }
.dm__salto svg { width: 2.6em; height: 2.6em; fill: none !important; stroke: #C9A9E9; stroke-width: 1.6; stroke-linecap: round; }
.dm__salto b { font-size: 1.45em; font-weight: 650; letter-spacing: -0.015em; }
html.js .dm__tel.salto:not(.feed) .dm__salto { opacity: 1; }
.dm__strato { position: absolute; inset: 0; z-index: 10; background: #000; transition: opacity 300ms ease-out; }
html.js .dm__tel:not(.feed) .dm__strato { opacity: 0; }

/* schermata 3: the lock screen, then the chat */
.dm__blocco { position: absolute; inset: 0; z-index: 1; }
html.js .dm__tel:not(.notifica) .dm__notifica { opacity: 0; transform: translate3d(0, 3em, 0) scale(0.9); }
.dm__chat { position: absolute; inset: 0; z-index: 10; transform-origin: 50% 62%; transition: opacity 320ms ease-out, transform 520ms var(--curva); }
html.js .dm__tel:not(.apri) .dm__chat { opacity: 0; transform: scale(0.88); }
html.js .dm__tel:not(.mandato) .dm__m2, html.js .dm__tel:not(.segnato) .dm__m3 { opacity: 0; transform: translateY(0.6em) scale(0.86); }
html.js .dm__tel:not(.risponde) .dm__m2 .wa__spunte { stroke: #8696a0; }
.dm__stato-chat { display: grid; }
.dm__stato-chat span { grid-area: 1 / 1; transition: opacity 200ms ease-out; }
.dm__stato-chat span + span { opacity: 0; color: #00a884; }
html.js .dm__tel.risponde:not(.segnato) .dm__stato-chat span:first-child { opacity: 0; }
html.js .dm__tel.risponde:not(.segnato) .dm__stato-chat span + span { opacity: 1; }
.dm__scrivi { position: absolute; left: 0.6em; right: 0.6em; bottom: 2.1em; display: grid; grid-template-columns: minmax(0, 1fr) 3.1em; gap: 0.45em; align-items: center; }
.dm__campo { position: relative; display: flex; align-items: center; height: 3.1em; padding: 0 1.1em; border-radius: 1.55em; background: #1f2c34; overflow: hidden; }
.dm__vuoto, .dm__digita { font-size: 1.08em; white-space: nowrap; transition: opacity 150ms ease-out; }
.dm__vuoto { color: #8696a0; }
.dm__digita { position: absolute; left: 1.02em; top: 50%; margin-top: -0.66em; line-height: 1.32; color: #e9edef; opacity: 0; }
html.js .dm__tel.scrive:not(.mandato) .dm__digita { opacity: 1; }
html.js .dm__tel.scrive:not(.mandato) .dm__vuoto { opacity: 0; }
html.js .dm__tel:not(.scrive) .dm__digita { clip-path: inset(0 100% 0 0); }
.dm__tel.scrive .dm__digita { transition: clip-path 800ms steps(11, end), opacity 150ms ease-out; }
.dm__manda { display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 50%; background: #00a884; }
.dm__manda svg { grid-area: 1 / 1; width: 1.45em; height: 1.45em; transition: opacity 150ms ease-out, transform 200ms var(--curva); }
.dm__ico-mic { fill: none !important; stroke: #0b141a; stroke-width: 2; stroke-linecap: round; }
.dm__ico-invia { fill: #0b141a !important; opacity: 0; transform: scale(0.6); }
html.js .dm__tel.scrive:not(.mandato) .dm__ico-invia { opacity: 1; transform: none; }
html.js .dm__tel.scrive:not(.mandato) .dm__ico-mic { opacity: 0; transform: scale(0.6); }

/* the finger: a soft round touch, like in a screen recording. It travels on a layer as big as the screen,
   so a translate of 40% 70% is a point of the screen */
.dm__pista { position: absolute; inset: 0; z-index: 50; pointer-events: none; transform: translate3d(calc(var(--dx, 0.5) * 100%), calc(var(--dy, 0.5) * 100%), 0); transition: transform var(--dt, 650ms) var(--dc, cubic-bezier(0.16, 1, 0.3, 1)); }
.dm__pista.salta { transition: none; }
.dm__dito {
  position: absolute; left: 0; top: 0; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.3) 70%);
  box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.8), 0 0.4em 1.4em rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(1.4); transition: opacity 220ms ease-out, transform 280ms var(--curva);
}
.dm__dito::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0.16em rgba(255, 255, 255, 0.7); opacity: 0; }
.dm__pista.su .dm__dito { opacity: 1; transform: none; }
.dm__pista.su.preme .dm__dito { animation: dm-preme 380ms ease-out; }
.dm__pista.su.preme .dm__dito::after { animation: dm-onda 560ms ease-out; }
@keyframes dm-preme { 40% { transform: scale(0.8); } 100% { transform: none; } }
@keyframes dm-onda { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(2.1); } }

/* ══ Il consenso e il database ═══════════════════════════════ */
.cs { max-width: 1296px; margin: 72px auto 0; display: grid; gap: 30px; }
.cs__titolo, .mi__titolo { font-size: clamp(30px, 8vw, 52px); font-weight: 750; letter-spacing: -0.028em; line-height: 1.05; text-wrap: balance; }
.cs__testo p { margin-top: 14px; max-width: 34em; font-size: 17px; line-height: 1.58; color: rgba(247, 248, 248, 0.88); }
.cs__testo p:first-of-type { margin-top: 18px; }
.cs__testo p.cs__gergo { margin-top: 8px; font-size: 14.5px; color: var(--sec); }
.cs__testo p.cs__gergo + p { margin-top: 18px; }
.cs__prova { position: relative; display: grid; gap: 16px; align-content: start; justify-items: start; padding: 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--riga-2); }
.cs__casella { position: relative; justify-self: stretch; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 60px; padding: 12px 16px; border-radius: 16px; background: rgba(8, 9, 10, 0.7); box-shadow: inset 0 0 0 1px var(--riga-2); font-size: 16px; line-height: 1.35; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cs__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs__box { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 2px #8e8e93; }
.cs__box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lilla); opacity: 0; transform: scale(0.4); transition: transform 320ms var(--molla), opacity 200ms ease-out; }
.cs__box svg { position: relative; width: 18px; height: 18px; fill: none; stroke: var(--nero); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 100% 0 0); transition: clip-path 320ms ease-out 120ms; }
.cs__input:checked + .cs__box::before { opacity: 1; transform: none; }
.cs__input:checked + .cs__box svg { clip-path: inset(0 0 0 0); }
.cs__input:focus-visible + .cs__box { box-shadow: inset 0 0 0 2px #8e8e93, 0 0 0 3px var(--lilla); }
.cs__esito { justify-self: stretch; list-style: none; margin: 0; padding: 0; }
.cs__esito li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--riga); font-size: 15.5px; color: var(--sec); }
.cs__esito li:last-child { border-bottom: 0; }
.cs__stato { min-width: 44px; padding: 5px 12px; border-radius: 999px; text-align: center; font-size: 13.5px; font-weight: 700; transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; }
.cs__stato[data-stato="si"] { color: #1b1330; background: var(--lilla); }
.cs__stato[data-stato="no"] { color: #8a909a; box-shadow: inset 0 0 0 1px var(--riga-2); }
@media (min-width: 1024px) {
  .cs { margin-top: 120px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
  .cs__prova { padding: 26px; }
}

/* ══ La chiusa delle campagne ══════════════════ */
.fu-chiusa { max-width: 1296px; margin: 72px auto 0; font-size: clamp(32px, 8.6vw, 76px); line-height: 1.04; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 1024px) { .fu-chiusa { margin-top: 120px; } }
/* ══ Gli strumenti ══════════════════════════════════════════ */
.gr { max-width: 1296px; margin: 88px auto 0; }
.gr__titolo { position: relative; padding-bottom: 18px; font-size: clamp(22px, 6vw, 34px); font-weight: 720; letter-spacing: -0.02em; line-height: 1.15; }
.gr__titolo::before, .gr__titolo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.gr__titolo::before { background: var(--riga); }
.gr__titolo::after { background: linear-gradient(90deg, #F4EAFF, #C9A9E9 30%, #8B6FB8 60%, rgba(139, 111, 184, 0)); transform-origin: 0 50%; transition: transform 1200ms var(--curva) 200ms; }
html.js .gr__titolo.rv:not(.visto)::after { transform: scaleX(0); }

.sr { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "nome" "cosa" "vista" "esempio"; row-gap: 14px; padding-top: 48px; scroll-margin-top: calc(var(--testa) + 16px); }
.sr + .sr { padding-top: 72px; }
.sr__nome { grid-area: nome; }
.sr__nome, .sr__nome h4 { font-size: clamp(30px, 8.4vw, 54px); font-weight: 750; letter-spacing: -0.028em; line-height: 1.04; text-wrap: balance; }
.sr__cosa { grid-area: cosa; }
.sr__cosa > p { font-size: 17px; line-height: 1.58; color: rgba(247, 248, 248, 0.88); max-width: 34em; }
.sr__vista { grid-area: vista; margin: 14px 0 10px; }
@media (min-width: 1024px) {
  .gr { margin-top: 128px; }
  .sr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; row-gap: 20px; padding-top: 72px;
    grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". vista" "nome vista" "cosa vista" "esempio vista" ". vista"; }
  .sr + .sr { padding-top: 104px; }
  .sr--rov { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "vista ." "vista nome" "vista cosa" "vista esempio" "vista ."; }
  .sr__vista { margin: 0; }
  .sr__nome, .sr__nome h4 { font-size: clamp(36px, 3.6vw, 54px); }
}

/* ── La scena di ogni strumento: il visual, «Esempio», e il tasto per rifarlo ── */
.sc { position: relative; }
.sc__palco { position: relative; display: grid; place-items: center; min-height: 480px; padding: 58px 0 36px; isolation: isolate; cursor: pointer; }
.sc__palco::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(130%, 640px); aspect-ratio: 1.1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(139, 111, 184, 0.26), rgba(139, 111, 184, 0.06) 60%, rgba(139, 111, 184, 0)); }
.sc--google .sc__palco { cursor: default; }
.sc__esempio { position: absolute; z-index: 5; top: 9px; left: 0; pointer-events: none; }
.sc__ancora { position: absolute; z-index: 5; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: var(--sec); background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px var(--riga-2); transition: transform 160ms ease-out, color 200ms ease-out; touch-action: manipulation; }
.sc__ancora svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--curva); }
.sc__ancora:active { transform: scale(0.94); color: var(--lilla); }
.sc__ancora:active svg { transform: rotate(-200deg); }
.sc__ancora:focus-visible { outline: 2px solid var(--lilla); outline-offset: 2px; }
@media (hover: hover) { .sc__ancora:hover { color: var(--testo); } }
@media (min-width: 1024px) { .sc__palco { min-height: 640px; padding: 64px 0 40px; } }

/* ── La carta fedeltà nel Wallet: una carta vera, coi timbri nella striscia ── */
.wl__tel { --tel-w: min(72vw, 282px); }
@media (min-width: 1024px) { .wl__tel { --tel-w: 300px; } }
.wl { background: #000; }
.wl__barra { position: absolute; z-index: 2; top: calc(var(--u) * 4.4); left: 1.1em; right: 1em; display: flex; align-items: center; justify-content: space-between; height: 2.6em; }
.wl__fine { font-size: 1.22em; font-weight: 600; color: #0A84FF; }
.wl__altro { display: flex; align-items: center; justify-content: center; gap: 0.22em; width: 2.4em; height: 2.4em; border-radius: 50%; background: #1c1c1e; }
.wl__altro i { width: 0.3em; height: 0.3em; border-radius: 50%; background: #0A84FF; }
.wl__pass {
  position: absolute; z-index: 1; left: 0.8em; right: 0.8em; top: calc(var(--u) * 10.4); overflow: hidden; border-radius: 1.05em;
  background: radial-gradient(130% 70% at 0% 0%, #5b4390 0%, rgba(91, 67, 144, 0) 55%), linear-gradient(172deg, #3c2a63 0%, #261a40 48%, #170f27 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1.4em 2.6em rgba(0, 0, 0, 0.65);
  color: #fff; transition: transform 900ms var(--curva);
}
.wl__lucido { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.13) 47%, rgba(255, 255, 255, 0) 58%); transform: translateX(-110%); }
.wl__testa { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 0.65em; align-items: center; padding: 0.85em 1em 0.8em; }
.wl__logo { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: #3b2a55; background: radial-gradient(circle at 35% 30%, #fff, #F2EAD6 55%, #E2D2B6); box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.12); }
.wl__logo svg { width: 60%; height: 60%; }
.wl__nome { font-size: 1.16em; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl__campo { display: grid; gap: 0.1em; min-width: 0; }
.wl__campo small { font-size: 0.66em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(223, 201, 240, 0.78); }
.wl__campo b { font-size: 1.1em; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.wl__campo--dx { text-align: right; }
.wl__n { display: inline-block; min-width: 1.1ch; font-variant-numeric: tabular-nums; }
.wl__striscia { position: relative; height: 9.8em; }
.wl__foto { position: absolute; inset: 0; }
.wl__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 15, 39, 0.5), rgba(23, 15, 39, 0.72)), linear-gradient(90deg, rgba(60, 42, 99, 0.35), rgba(60, 42, 99, 0)); }
.wl__timbri { position: relative; z-index: 1; list-style: none; margin: 0; padding: 1em 1.5em; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: center; gap: 0.75em 1.05em; }
.wl__timbri li { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: rgba(12, 8, 22, 0.42); box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.5); }
.wl__disco { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #3b2a55; background: radial-gradient(circle at 35% 30%, #fff 0%, #F2EAD6 45%, #DCC9AA 100%); box-shadow: 0 0 0.9em rgba(242, 234, 214, 0.5); transition: transform 420ms var(--molla), opacity 200ms ease-out; transition-delay: calc(var(--k, 0) * 170ms); }
.wl__disco svg { width: 56%; height: 56%; }
.wl__ultimo { box-shadow: inset 0 0 0 0.12em rgba(201, 169, 233, 0.9) !important; }
.wl__vuoto { width: 52%; height: 52%; color: rgba(223, 201, 240, 0.7); }
.wl__ultimo .wl__disco { color: #2a1d42; background: radial-gradient(circle at 35% 30%, #fff 0%, #F4EAFF 30%, #C9A9E9 100%); box-shadow: 0 0 1.2em rgba(201, 169, 233, 0.85); }
.wl__campi { display: flex; justify-content: space-between; gap: 1em; padding: 0.75em 1em 0.2em; }
.wl__pronto { justify-self: start; display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.45em; padding: 0.3em 0.65em; border-radius: 1em; font-size: 0.8em; font-weight: 700; color: #2a1d42; background: linear-gradient(100deg, #F4EAFF, #C9A9E9); box-shadow: 0 0.3em 1em rgba(201, 169, 233, 0.5); transition: opacity 300ms ease-out, transform 600ms var(--molla); }
.wl__pronto svg { width: 0.95em; height: 0.95em; }
.wl__codice { display: grid; justify-items: center; gap: 0.45em; padding: 0.85em 0 1.05em; }
.wl__qr { display: block; width: 7.6em; aspect-ratio: 1; padding: 0.5em; border-radius: 0.55em; background: #fff; color: #000; }
.wl__qr svg { width: 100%; height: 100%; }
.wl__codice small { font-size: 0.78em; color: rgba(255, 255, 255, 0.66); }
.wl__pila { position: absolute; left: 0.8em; right: 0.8em; top: calc(var(--u) * 43.6); height: 14em; }
.wl__pila i { position: absolute; left: 0; right: 0; height: 12em; border-radius: 1em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.wl__pila i::before { content: ''; position: absolute; left: 1em; top: 0.9em; width: 5em; height: 0.5em; border-radius: 1em; background: rgba(255, 255, 255, 0.4); }
.wl__pila i::after { content: ''; position: absolute; right: 1em; top: 0.75em; width: 2em; height: 0.8em; border-radius: 1em; background: rgba(255, 255, 255, 0.22); }
.wl__pila i:nth-child(1) { top: 0; background: linear-gradient(180deg, #1f3a5c, #172a43); transform: scaleX(0.95); }
.wl__pila i:nth-child(2) { top: 2.2em; background: linear-gradient(180deg, #34343a, #232327); transform: scaleX(0.975); }
.wl__avviso { position: absolute; z-index: 26; top: calc(var(--u) * 4.6); left: 0.5em; right: 0.5em; display: grid; grid-template-columns: 2.6em 1fr; gap: 0.75em; align-items: center; padding: 0.85em 0.95em; border-radius: 1.5em; background: rgba(44, 40, 54, 0.88); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0.8em 2em rgba(0, 0, 0, 0.55); transition: transform 800ms var(--molla), opacity 300ms ease-out; }
.wl__icona { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.62em; color: #3b2a55; background: radial-gradient(circle at 35% 30%, #fff, #F2EAD6 55%, #E2D2B6); }
.wl__icona svg { width: 62%; height: 62%; }
.wl__atesto { display: grid; gap: 0.1em; font-size: 1em; line-height: 1.3; }
.wl__ariga { display: flex; justify-content: space-between; align-items: baseline; }
.wl__ariga b { font-weight: 650; }
.wl__ariga small { font-size: 0.86em; color: rgba(255, 255, 255, 0.6); }
.wl__msg { display: grid; }
.wl__msg > span { grid-area: 1 / 1; transition: opacity 350ms ease-out; }
.sc--carta:not(.f3) .wl__msg2, .sc--carta.f3 .wl__msg1 { opacity: 0; }
.sc--carta.f3 .wl__avviso { animation: avviso 700ms var(--molla) both; }
@keyframes avviso { 30% { transform: translate3d(0, 0.5em, 0) scale(0.98); } }
.sc--carta:not(.f1) .wl__pass { transform: translate3d(0, 0.8em, 0); }
.sc--carta.f1 .wl__lucido { transform: translateX(110%); transition: transform 1500ms ease-in-out 200ms; }
.sc--carta:not(.f1) .wl__timbri li:not(.wl__ultimo) .wl__disco { opacity: 0; transform: scale(0.3); }
.sc--carta:not(.f3) .wl__ultimo .wl__disco { opacity: 0; transform: scale(0.3); }
.sc--carta .wl__ultimo .wl__disco { transition-delay: 0ms; }
.sc--carta:not(.f2) .wl__avviso { opacity: 0; transform: translate3d(0, -7em, 0); }
.sc--carta:not(.f3) .wl__pronto { opacity: 0; transform: scale(0.7); }
.sc--carta.f3 .wl__ultimo { animation: premio 1400ms ease-out both; }
@keyframes premio { 30% { box-shadow: inset 0 0 0 0.12em #F4EAFF, 0 0 1.6em rgba(244, 234, 255, 0.9); } }

/* ── Il pannello marketing ────────────────────────────── */
.pm__tel { --tel-w: min(66vw, 264px); }
@media (min-width: 1024px) { .pm__tel { --tel-w: 290px; } }
.co.pm { padding-top: 0; }
.pm__pagine { position: absolute; left: 0; right: 0; top: calc(var(--u) * 4.4); bottom: 0; overflow: hidden; }
.pm__pagina { position: absolute; inset: 0; padding: 0.5em 1.3em 0; transition: transform 800ms var(--curva), opacity 500ms ease-out; }
.pm__lista { margin-top: 0.2em; padding: 0; }
.pm__lista .co__riga { height: 4.15em; transition: opacity 450ms ease-out; }
.pm__solo-si, .pm__tutti { transition: color 300ms ease-out, background-color 300ms ease-out, box-shadow 300ms ease-out; }
.pm__tutti { color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.16); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.4); }
.sc--pannello.f1 .pm__tutti { color: var(--sec); background: transparent; box-shadow: inset 0 0 0 1px var(--riga-2); }
.sc--pannello.f1 .pm__solo-si { color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.16); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.4); }
.sc--pannello.f1 .pm__no { opacity: 0.22; }
.pm__prepara, .pm__manda { position: absolute; left: 1.3em; right: 1.3em; bottom: 2.4em; display: grid; place-items: center; height: 3.2em; border-radius: 1em; font-size: 1.02em; font-weight: 700; }
.pm__prepara { color: var(--nero); background: var(--lilla); }
.sc--pannello.f2 .pm__prepara { animation: premi 420ms ease-out both; }
.sc--pannello.f3 .pm__pagina--contatti { opacity: 0; transform: translate3d(-30%, 0, 0); }
.sc--pannello:not(.f3) .pm__pagina--promo { transform: translate3d(102%, 0, 0); }
.pm__messaggio { margin-top: 0.85em; padding: 0.75em 0.9em 0.85em; border-radius: 1em; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--riga-2); }
.pm__messaggio small { font-size: 0.8em; color: var(--sec); }
.pm__messaggio p { margin-top: 0.3em; font-size: 1.08em; line-height: 1.38; color: var(--testo); }
.pm__canali { list-style: none; margin: 0.8em 0 0; padding: 0; display: grid; gap: 0.35em; }
.pm__canali li { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; height: 3.2em; padding: 0 0.75em; border-radius: 0.85em; background: rgba(255, 255, 255, 0.03); font-size: 0.94em; font-weight: 600; }
.pm__canali span { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.pm__canali svg { width: 1.2em; height: 1.2em; color: var(--lilla); }
.pm__leva { position: relative; flex: none; width: 2.6em; height: 1.55em; border-radius: 999px; background: #2a2d33; }
.pm__leva::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lilla); opacity: 0; transition: opacity 300ms ease-out; transition-delay: calc(var(--k) * 260ms); }
.pm__leva::after { content: ''; position: absolute; left: 0.18em; top: 0.18em; width: 1.19em; height: 1.19em; border-radius: 50%; background: #8a909a; transition: transform 380ms var(--molla), background-color 300ms ease-out; transition-delay: calc(var(--k) * 260ms); }
.sc--pannello.f4 .pm__leva::before { opacity: 1; }
.sc--pannello.f4 .pm__leva::after { transform: translateX(1.05em); background: #fff; }
.pm__dati { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6em; margin-top: 0.9em; }
.pm__chi { display: grid; gap: 0.1em; padding: 0.7em 0.8em; border-radius: 0.85em; background: rgba(255, 255, 255, 0.03); }
.pm__chi small { font-size: 0.8em; color: var(--sec); }
.pm__chi b { font-size: 1em; font-weight: 650; }
.pm__manda { color: var(--sec); background: #22252b; transition: color 400ms ease-out, background-color 400ms ease-out, box-shadow 600ms ease-out; }
.sc--pannello.f5 .pm__manda { color: var(--nero); background: var(--lilla); box-shadow: 0 0 1.6em rgba(201, 169, 233, 0.5); }

/* ── WhatsApp ─────────────────────────────────────────── */
.wa { display: flex; flex-direction: column; background-color: #0b141a; background-image: radial-gradient(rgba(255, 255, 255, 0.035) 0.09em, rgba(255, 255, 255, 0) 0.11em); background-size: 1.6em 1.6em; }
.wa__testa { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4em 2.7em minmax(0, 1fr) 1.6em 1.5em; gap: 0.65em; align-items: center; padding: calc(var(--u) * 4.5) 1em 0.75em 0.6em; background: #1f2c34; }
.wa__ic { width: 1.5em; height: 1.5em; fill: none !important; stroke: #aebac1; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wa__testa .wa__ic:last-child { fill: #aebac1 !important; stroke: none; }
.wa__avatar { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #C9A9E9, #8B6FB8 55%, #4A3B78); }
.wa__avatar svg { width: 60%; height: 60%; }
.wa__chi b { display: block; font-size: 1.1em; font-weight: 600; white-space: nowrap; }
.wa__chi small { display: block; font-size: 0.84em; color: #8696a0; }
.wa__chat { display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em 0.85em; }
.wa__giorno { align-self: center; margin-bottom: 0.3em; padding: 0.35em 0.8em; border-radius: 0.6em; background: #182229; color: #8696a0; font-size: 0.9em; }
.wa__bolla { position: relative; max-width: 82%; padding: 0.5em 0.7em 1.35em; border-radius: 0.75em; font-size: 1.08em; line-height: 1.32; color: #e9edef; transition: opacity 300ms ease-out, transform 500ms var(--molla); }
.wa__bolla small { position: absolute; right: 0.6em; bottom: 0.32em; display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.7em; color: rgba(233, 237, 239, 0.6); }
.wa__bolla--loro { align-self: flex-start; background: #1f2c34; border-top-left-radius: 0.2em; transform-origin: 0 0; }
.wa__bolla--mia { align-self: flex-end; background: #005c4b; border-top-right-radius: 0.2em; transform-origin: 100% 100%; }
.wa__spunte { width: 1.35em; height: 0.85em; fill: none !important; stroke: #53bdeb; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 300ms ease-out; }
.pr__bot { display: flex; align-items: center; gap: 0.3em; margin-bottom: 0.2em; font-size: 0.78em; font-weight: 650; color: #C9A9E9; }
.pr__bot svg { width: 0.95em; height: 0.95em; }

/* ── Le prenotazioni a 360 gradi ─────────────────────── */
.pr__tel { --tel-w: min(64vw, 258px); }
.sc--pren .sc__palco { display: grid; place-items: start center; align-content: start; padding-bottom: 30px; }
.pr .wa__chat { gap: 0.45em; }
.pr .wa__bolla { font-size: 1.02em; }
.pr__lista {
  position: relative; z-index: 2; width: min(92%, 330px); margin-top: -120px; padding: 16px 14px 12px; border-radius: 22px;
  background: rgba(16, 17, 20, 0.9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--riga-2), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 70px -24px rgba(139, 111, 184, 0.5);
  text-align: left;
}
.pr__titolo { padding: 0 4px; }
.pr__titolo small { display: block; font-size: 12px; color: var(--sec); }
.pr__titolo b { font-size: 20px; font-weight: 760; letter-spacing: -0.02em; }
.pr__righe { position: relative; list-style: none; margin: 10px 0 0; padding: 0; height: 156px; }
.pr__riga { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 48px; padding: 0 10px; border-radius: 13px; transition: transform 700ms var(--curva), opacity 400ms ease-out; }
.pr__riga:nth-child(1) { top: 0; }
.pr__riga:nth-child(2) { top: 52px; }
.pr__riga:nth-child(3) { top: 104px; }
.pr__riga + .pr__riga::before { content: ''; position: absolute; left: 10px; right: 10px; top: -2px; height: 1px; background: var(--riga); }
.pr__riga b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr__riga span { font-size: 13.5px; color: var(--sec); }
.pr__da { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 650; white-space: nowrap; }
.pr__da svg { width: 13px; height: 13px; fill: currentColor; }
.pr__da--sito svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.pr__da--wa { color: #7ee2a8; background: rgba(37, 211, 102, 0.14); }
.pr__da--tel { color: var(--sec); background: rgba(255, 255, 255, 0.06); }
.pr__da--sito { color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.12); }
.pr__riga--nuova { background: rgba(201, 169, 233, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.38); }
.pr__riga--nuova::before, .pr__riga--dopo::before { display: none; }
.sc--pren:not(.f1) .pr__m1, .sc--pren:not(.f2) .pr__m2, .sc--pren:not(.f3) .pr__m3, .sc--pren:not(.f4) .pr__m4 { opacity: 0; transform: translateY(0.6em) scale(0.86); }
.sc--pren:not(.f5) .pr__riga--nuova { opacity: 0; transform: scale(0.94); }
.sc--pren:not(.f5) .pr__riga--dopo { transform: translateY(-52px); }
.sc--pren.f5 .pr__riga--nuova { transition-delay: 200ms; }
@media (min-width: 1024px) {
  .pr__tel { --tel-w: 272px; }
  .sc--pren .sc__palco { grid-template-columns: auto auto; place-items: center; align-content: center; justify-content: center; }
  .pr__lista { width: 300px; margin: 120px 0 0 -70px; }
  .sr--rov .sc--pren .pr__lista { order: -1; margin: 120px -70px 0 0; }
}

/* ══ La strategia: le barre del marchio, portate a sei ═══════ */
/* on the phone the bars get a column of their own and stay put while the steps scroll beside them:
   no band across the sky, no title ever passing under them */
.ta { position: relative; max-width: 1296px; margin: 40px auto 0; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: start; }
.ta__marchio { position: sticky; z-index: 2; top: calc(var(--testa) + env(safe-area-inset-top) + 32px); padding-top: 4px; }
.ta__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 16px rgba(139, 111, 184, 0.3)); }
.ta__fondo { fill: rgba(201, 169, 233, 0.05); stroke: rgba(201, 169, 233, 0.3); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ta__luce { fill: url(#ta-luce); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 900ms var(--curva); }
.ta__barra.acceso .ta__luce { transform: scaleY(1); }
.ta__tappe { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ta__tappa { position: relative; padding-left: 22px; opacity: 0.42; transition: opacity 500ms ease-out; }
.ta__tappa::before, .ta__tappa::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 4px; width: 2px; border-radius: 2px; }
.ta__tappa::before { background: var(--riga-2); }
.ta__tappa::after { background: linear-gradient(180deg, #F4EAFF, #C9A9E9 40%, #8B6FB8); transform-origin: 50% 0; transform: scaleY(0); transition: transform 800ms var(--curva); }
.ta__tappa.acceso { opacity: 1; }
.ta__tappa.acceso::after { transform: none; }
.ta__tappa h3 { font-size: clamp(21px, 5.6vw, 30px); font-weight: 740; letter-spacing: -0.024em; line-height: 1.1; }
.ta__tappa p { margin-top: 4px; max-width: 32em; color: var(--sec); font-size: 16px; line-height: 1.5; }
@media (max-width: 1023.98px) {
  /* the bars beside are already the line that lights up */
  .ta__tappa { padding-left: 0; }
  .ta__tappa::before, .ta__tappa::after { content: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .ta { grid-template-columns: 96px minmax(0, 1fr); gap: 32px; } }
@media (min-width: 1024px) {
  .ta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; margin-top: 72px; }
  .ta__marchio { top: calc(var(--testa) + 72px); margin: 0; padding: 0; background: none; }
  .ta__svg { width: 100%; max-width: 440px; filter: drop-shadow(0 0 40px rgba(139, 111, 184, 0.25)); }
  .ta__tappe { margin-top: 0; gap: 32px; }
  .ta__tappa { padding-left: 28px; }
}

/* ══ Gli altri strumenti, in breve: nome e una frase ═══════ */
.gr--visti { margin-top: 8px; }
.el { list-style: none; margin: 0; padding: 0; display: grid; }
.el__voce { display: grid; align-content: start; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--riga); }
.el__voce h4 { font-size: clamp(19px, 5.2vw, 24px); font-weight: 720; letter-spacing: -0.018em; line-height: 1.2; text-wrap: balance; }
.el__voce p { max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--sec); }
@media (min-width: 768px) { .el { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 1024px) { .el { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; } .el__voce { padding: 28px 0 30px; } }

/* ══ Contatto: la riga dell'email sotto la chiusura ═════════ */
.chiusura__mail { margin-top: 6px; }
.chiusura__mail a { color: var(--testo); text-decoration: underline; text-decoration-color: rgba(201, 169, 233, 0.5); text-underline-offset: 3px; overflow-wrap: anywhere; }
.chiusura__orari { white-space: nowrap; }
@media (max-width: 479.98px) { .chiusura__orari { display: block; } .chiusura__punto { display: none; } }

/* ══ Movimento ridotto, o «Ferma le animazioni»: lo stato finale ═ */
@media (prefers-reduced-motion: reduce) {
  html.js .rv:not(.visto) { opacity: 1; transform: none; }
}
html.fermo .rv { opacity: 1 !important; transform: none !important; }

/* 22/10 sera: the strategy is a plain list of six steps, no standing-still stretch, no bars */
.st-tappe { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: tappa; }
.st-tappa { counter-increment: tappa; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 18px; border-radius: 20px; background: rgba(15, 16, 17, 0.82); border: 1px solid var(--riga); }
.st-tappa::before { content: counter(tappa); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; font-weight: 750; color: var(--nero); background: var(--cromo); background-size: 240% 100%; }
.st-tappa h3 { font-size: 19px; font-weight: 720; letter-spacing: -0.01em; }
.st-tappa p { color: var(--sec); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 1024px) { .st-tappe { grid-template-columns: repeat(3, 1fr); gap: 16px; } }