/* Boosted v4 · bozza E — testata e menu «Indice» (parti/menu.html + parti/menu.js).
   Il menu: in cima quattro capitoli (Servizi · Lavori · Chi siamo · Contatti) con una linea lilla che scivola
   sotto quello scelto; sotto, le pagine del capitolo, grandi; accanto, un'anteprima viva della pagina, fatta di
   testo e movimento come le schermate vere (un sito che si scrive, la chat dell'assistente, le prenotazioni);
   in fondo il pulsante di metallo e i recapiti (sul telefono il pulsante resta sempre in vista sul bordo basso, e
   l'anteprima è alta quanto la sua scheda più alta, così nessuna resta tagliata).
   Sul computer: capitoli a sinistra, pagine al centro, anteprima a destra.
   Ogni regola parte da .testa, da .menu o da .mv- (le piccole scene dell'anteprima, sempre dentro .menu);
   html.menu-aperto serve solo a bloccare la pagina. */

/* ── Testata ─────────────────────────────────── */
.testa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--testa) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--g), env(safe-area-inset-right)) 0 max(var(--g), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* scrolling: dark glass exactly as tall as the header (the blur stops at its edge)… */
.testa::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(8, 9, 10, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0; transition: opacity 320ms ease-out;
}
/* …and under it, with no blur, a faint line of lilac light on the edge and a soft shade that fades out */
.testa::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(201, 169, 233, 0), rgba(201, 169, 233, 0.13) 30%, rgba(223, 201, 240, 0.19) 50%, rgba(201, 169, 233, 0.13) 70%, rgba(201, 169, 233, 0)) 50% 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(8, 9, 10, 0.46), rgba(8, 9, 10, 0.16) 55%, rgba(8, 9, 10, 0));
  opacity: 0; transition: opacity 320ms ease-out;
}
.testa.scorsa::before, .testa.scorsa::after { opacity: 1; }
.testa.testa--aperta::before, .testa.testa--aperta::after { opacity: 0; transition-duration: 160ms; }

.testa__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; border-radius: 10px; }
.testa__menu:focus-visible { outline-offset: 4px; border-radius: 999px; }
.testa__marchio { width: 30px; height: auto; }
.testa__scritta { width: auto; height: 34px; }

/* the toggle: a small metal pill (tasti.css); the word slides between Menu and Chiudi, the two lines become an X */
.testa__menu.metallo.piccolo { padding: 0 16px 0 19px; }
.testa__menu .metallo-scritta { gap: 12px; }
.testa__parole { display: grid; overflow: hidden; line-height: 1.3; }
.testa__parola { grid-area: 1 / 1; text-align: center; transition: transform 460ms var(--curva), opacity 240ms ease-out; }
.testa__parola + .testa__parola { transform: translateY(105%); opacity: 0; }
.testa--aperta .testa__parola:first-child { transform: translateY(-105%); opacity: 0; }
.testa--aperta .testa__parola + .testa__parola { transform: none; opacity: 1; }
.testa__icona { position: relative; flex: none; width: 18px; height: 10px; }
.testa__icona i {
  position: absolute; left: 0; top: 0; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor;
  transform-origin: 50% 50%; transition: transform 420ms var(--curva);
}
.testa__icona i:last-child { transform: translateY(8px) scaleX(0.62); transform-origin: 100% 50%; }
.testa--aperta .testa__icona i:first-child { transform: translateY(4.2px) rotate(45deg); }
.testa--aperta .testa__icona i:last-child { transform: translateY(4.2px) rotate(-45deg); transform-origin: 50% 50%; }

/* ── Menu ─────────────────────────────────────── */
html.menu-aperto { overflow: hidden; scrollbar-gutter: stable; }

.menu { position: fixed; inset: 0; z-index: 30; color: var(--testo); outline: none; }
.menu[hidden] { display: none; }
.menu.esce { pointer-events: none; }
/* the section the menu takes you to gets the focus (for keyboards and screen readers), without a lilac frame around it */
.menu__meta:focus, .menu__meta:focus-visible { outline: none; }

.menu__vetro {
  position: absolute; inset: 0; overflow: hidden;
  background: rgba(8, 9, 10, 0.74); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  opacity: 0; transition: opacity 260ms ease-out;
}
.menu__vetro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 40% at 100% 104%, rgba(139, 111, 184, 0.22), rgba(139, 111, 184, 0) 70%);
}
.menu.aperto .menu__vetro { opacity: 1; transition-duration: 340ms; }

.menu__dentro {
  position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 18px;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 2px) max(var(--g), env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left));
  scrollbar-width: none;
  /* what scrolls up fades out under the header */
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--testa) + env(safe-area-inset-top) - 6px), #000 calc(var(--testa) + env(safe-area-inset-top) + 14px));
  mask-image: linear-gradient(180deg, transparent calc(var(--testa) + env(safe-area-inset-top) - 6px), #000 calc(var(--testa) + env(safe-area-inset-top) + 14px));
}
.menu__dentro::-webkit-scrollbar { display: none; }
.menu__capi, .menu__pagine, .menu__anteprima, .menu__fondo { opacity: 0; transform: translateY(16px); }
.menu:is(.aperto, .esce) :is(.menu__capi, .menu__pagine, .menu__anteprima, .menu__fondo) { opacity: 1; transform: none; }
.menu.aperto :is(.menu__capi, .menu__pagine, .menu__anteprima, .menu__fondo) { transition: opacity 420ms ease-out calc(60ms + var(--k, 0) * 70ms), transform 700ms var(--curva) calc(60ms + var(--k, 0) * 70ms); }
.menu.esce .menu__dentro { opacity: 0; transition: opacity 200ms ease-out; }

/* the chapters: four words in a row, a lilac line slides under the chosen one */
.menu__capi { position: relative; display: flex; justify-content: space-between; margin: 0 -10px; border-bottom: 1px solid var(--riga-2); }
.menu__capo {
  min-height: 50px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  color: var(--sec); font: 650 15.5px/1 'Montserrat', 'Inter', system-ui, sans-serif; letter-spacing: -0.012em; white-space: nowrap;
  transition: color 220ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.menu__capo[aria-selected="true"] { color: var(--testo); }
.menu__capo:focus-visible { outline-offset: -4px; border-radius: 12px; }
.menu__segno {
  position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--viola), var(--lilla-chiaro) 50%, var(--lilla));
  box-shadow: 0 0 12px rgba(201, 169, 233, 0.6);
  transform-origin: 0 50%; transform: translateX(10px) scaleX(0.6);
  transition: transform 460ms var(--curva);
}

/* the pages of the chosen chapter */
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__voce {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 0 5px 18px;
  color: var(--testo); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-size: 22px; line-height: 1.15; font-weight: 660; letter-spacing: -0.026em;
}
.menu__lista li + li .menu__voce { box-shadow: inset 0 1px 0 rgba(247, 248, 248, 0.07); }
.menu__nome { flex: 1 1 auto; min-width: 0; transition: color 220ms ease-out; }
/* the dot of the page shown in the preview */
.menu__voce::before {
  content: ''; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--lilla-chiaro); box-shadow: 0 0 10px 1px rgba(201, 169, 233, 0.7);
  opacity: 0; transform: scale(0.2); transition: opacity 200ms ease-out, transform 360ms var(--curva);
}
.menu__voce.in-anteprima::before { opacity: 1; transform: none; }
.menu__voce.in-anteprima .menu__nome { color: var(--lilla-chiaro); }
.menu__voce[aria-current] .menu__nome {
  background: var(--cromo); background-size: 200% 100%; background-position: 20% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu__segno-voce { flex: none; width: 18px; height: 18px; fill: none; stroke: rgba(163, 169, 179, 0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--curva), stroke 200ms ease-out; }
.menu__voce[data-dove="qui"] .menu__segno-voce { transform: rotate(90deg); }
.menu__voce:active .menu__nome { color: var(--lilla); }
.menu__voce:focus-visible { outline-offset: 2px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .menu__voce:hover .menu__segno-voce { stroke: var(--lilla-chiaro); transform: translateX(4px); }
  .menu__voce[data-dove="qui"]:hover .menu__segno-voce { transform: rotate(90deg) translateX(4px); }
}
.menu__pannello.menu__pannello--entra li, .menu__pannello.menu__pannello--entra .menu__nota { animation: menu-entra 520ms var(--curva) calc(var(--i, 0) * 40ms) backwards; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(10px); } }
.menu__nota { margin: 12px 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--sec); max-width: 30em; }
.menu__diretti { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.menu__diretto {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 16px;
  background: rgba(247, 248, 248, 0.045); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.08);
  color: var(--testo); text-decoration: none;
}
.menu__diretto svg, .menu__tondo svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--lilla); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu__diretto svg .pieno, .menu__tondo svg .pieno { fill: var(--lilla); stroke: none; }
.menu__diretto span { display: grid; gap: 3px; min-width: 0; line-height: 1.25; }
.menu__diretto b { font-size: 15.5px; font-weight: 650; }
.menu__diretto small { font-size: 13px; color: var(--sec); overflow-wrap: anywhere; }
.menu__social { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; }
.menu__tondo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(247, 248, 248, 0.05); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.11); }

/* ── the preview: a glass screen, one card per page. The cards sit on top of each other in one grid cell,
      so the screen is as tall as its tallest card: no card is ever cut, and it does not jump between pages ── */
.menu__anteprima {
  position: relative; flex: none; display: grid; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, rgba(247, 248, 248, 0.06), rgba(247, 248, 248, 0.022));
  box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.menu__anteprima::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 100% 0%, rgba(201, 169, 233, 0.10), rgba(201, 169, 233, 0) 70%);
}
.menu__ant {
  grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px;
  opacity: 0; visibility: hidden; transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
/* the card going away fades first, then the new one comes in: they never overlap */
.menu__ant.attiva { opacity: 1; visibility: visible; transition: opacity 360ms ease-out 150ms, visibility 0s; }
.menu__ant-dove { font-size: 11.5px; line-height: 1.2; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.menu__ant-frase { font-size: 14px; line-height: 1.4; font-weight: 560; color: var(--testo); text-wrap: pretty; }
.menu__ant-vivo { margin-top: auto; font-size: 12.5px; line-height: 1.3; }
.menu__ant.attiva .menu__ant-frase { animation: menu-entra 520ms var(--curva) 40ms backwards; }

/* ── The little scenes: each starts when its card is shown (in reduced motion it is simply at its end).
      Example screens, with the colours of the real apps where it helps (the browser, WhatsApp). ── */

/* the problem and the answer */
.mv-pr { display: grid; gap: 10px; }
.mv-pr__coppia { display: grid; gap: 4px; }
.mv-pr__no span { position: relative; color: var(--sec); }
.mv-pr__no span::after { content: ''; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: rgba(201, 169, 233, 0.75); transform-origin: 0 50%; }
.mv-pr__si { display: flex; gap: 6px; align-items: flex-start; color: var(--lilla-chiaro); font-weight: 600; }
.mv-pr__si svg { flex: none; width: 1.2em; height: 1.2em; margin-top: 0.02em; fill: none; stroke: var(--lilla); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.menu__ant.attiva .mv-pr__no { animation: menu-sale 420ms var(--curva) calc(150ms + var(--d, 0) * 1000ms) backwards; }
.menu__ant.attiva .mv-pr__no span::after { animation: menu-riga 420ms cubic-bezier(0.6, 0, 0.3, 1) calc(620ms + var(--d, 0) * 1000ms) backwards; }
.menu__ant.attiva .mv-pr__si { animation: menu-sale 480ms var(--curva) calc(900ms + var(--d, 0) * 1000ms) backwards; }
@keyframes menu-sale { from { opacity: 0; transform: translateY(8px); } }
@keyframes menu-riga { from { transform: scaleX(0); } }

/* the browser */
.mv-br { border-radius: 12px; overflow: hidden; background: #F7F7F8; color: #18191C; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.8); }
.mv-br__barra { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #E9E9EC; }
.mv-br__pallini { display: flex; gap: 4px; }
.mv-br__pallini i { width: 7px; height: 7px; border-radius: 50%; background: #C9C9CF; }
.mv-br__url { flex: 1; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; background: #FFFFFF; font-size: 11px; color: #3B3D42; }
.mv-br__url svg { flex: none; width: 11px; height: 11px; fill: none; stroke: #5E6168; stroke-width: 2; stroke-linecap: round; }
.mv-br__scritto { white-space: nowrap; }
.mv-br__pagina { padding: 12px 12px 13px; display: grid; gap: 3px; }
.mv-br__nome { font-size: 1.35em; font-weight: 750; letter-spacing: -0.02em; }
.mv-br__sotto { font-size: 0.92em; color: #5E6168; }
.mv-br__tasti { display: flex; gap: 6px; margin-top: 7px; }
.mv-br__tasto { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #18191C; color: #FFFFFF; font-size: 0.88em; font-weight: 650; }
.mv-br__tasto--vuoto { background: transparent; color: #18191C; box-shadow: inset 0 0 0 1px #CFCFD5; }
.menu__ant.attiva .mv-br__scritto { animation: menu-scrivi 900ms steps(14, end) 260ms backwards; }
.menu__ant.attiva .mv-br__pagina > * { animation: menu-sale 480ms var(--curva) backwards; }
.menu__ant.attiva .mv-br__nome { animation-delay: 1150ms; }
.menu__ant.attiva .mv-br__sotto { animation-delay: 1250ms; }
.menu__ant.attiva .mv-br__tasti { animation-delay: 1380ms; }
.menu__ant.attiva .mv-br__tasto:first-child { animation: menu-tocca 700ms ease-out 2100ms; }
@keyframes menu-scrivi { from { clip-path: inset(0 100% 0 0); } }
@keyframes menu-tocca { 40% { transform: scale(0.93); box-shadow: 0 0 0 5px rgba(139, 111, 184, 0.35); } }

/* the weekly plan */
.mv-pe { border-radius: 14px; padding: 10px 12px 4px; background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.08); }
.mv-pe__testa { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.mv-pe__testa b { font-size: 1.05em; font-weight: 700; }
.mv-pe__testa span { font-size: 0.86em; color: var(--sec); }
.mv-pe ul { list-style: none; margin: 0; padding: 0; }
.mv-pe li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: 8px; min-height: 2.6em; box-shadow: inset 0 1px 0 rgba(247, 248, 248, 0.07); }
.mv-pe__g { color: var(--sec); font-weight: 600; }
.mv-pe__t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-pe__s { display: grid; overflow: hidden; height: 1.7em; border-radius: 999px; }
.mv-pe__s i { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.7em; border-radius: 999px; font-style: normal; font-size: 0.86em; font-weight: 650; white-space: nowrap; }
.mv-pe__s i:first-child { background: rgba(247, 248, 248, 0.08); color: var(--sec); opacity: 0; transform: translateY(-110%); }
.mv-pe__s i:last-child { background: rgba(201, 169, 233, 0.18); color: var(--lilla-chiaro); }
.menu__ant.attiva .mv-pe li { animation: menu-sale 420ms var(--curva) calc(150ms + var(--d) * 120ms) backwards; }
.menu__ant.attiva .mv-pe__s i:first-child { animation: menu-esce-su 380ms cubic-bezier(0.6, 0, 0.3, 1) calc(1100ms + var(--d) * 650ms) backwards; }
.menu__ant.attiva .mv-pe__s i:last-child { animation: menu-entra-giu 420ms var(--curva) calc(1100ms + var(--d) * 650ms) backwards; }
@keyframes menu-esce-su { from { opacity: 1; transform: none; } }
@keyframes menu-entra-giu { from { opacity: 0; transform: translateY(110%); } }

/* the three campaigns and the new contact */
.mv-fu { display: grid; gap: 12px; }
.mv-fu__passi { position: relative; list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.mv-fu__passi::before { content: ''; position: absolute; left: 6px; right: 6px; top: 4px; height: 1.5px; background: linear-gradient(90deg, var(--viola), var(--lilla-chiaro)); transform-origin: 0 50%; }
.mv-fu__passi li { position: relative; font-size: 0.92em; font-weight: 650; color: var(--testo); }
.mv-fu__passi li:nth-child(2) { text-align: center; }
.mv-fu__passi li:nth-child(3) { text-align: right; }
.mv-fu__passi li::before { content: ''; position: absolute; top: -14px; width: 9px; height: 9px; border-radius: 50%; background: var(--lilla-chiaro); box-shadow: 0 0 10px rgba(201, 169, 233, 0.8); }
.mv-fu__passi li:nth-child(1)::before { left: 2px; }
.mv-fu__passi li:nth-child(2)::before { left: calc(50% - 4.5px); }
.mv-fu__passi li:nth-child(3)::before { right: 2px; }
.mv-fu__contatto { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.08); }
.mv-fu__av { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: linear-gradient(135deg, var(--lilla-chiaro), var(--viola)); color: var(--nero); font-weight: 750; }
.mv-fu__chi { flex: 1; display: grid; gap: 1px; min-width: 0; }
.mv-fu__chi b { font-weight: 650; }
.mv-fu__chi small { color: var(--sec); font-size: 0.9em; }
.mv-fu__tag { flex: none; padding: 0.35em 0.7em; border-radius: 999px; background: rgba(201, 169, 233, 0.16); color: var(--lilla-chiaro); font-size: 0.82em; font-weight: 650; }
.menu__ant.attiva .mv-fu__passi::before { animation: menu-riga 1400ms cubic-bezier(0.5, 0, 0.3, 1) 200ms backwards; }
.menu__ant.attiva .mv-fu__passi li { animation: menu-sale 420ms var(--curva) backwards; }
.menu__ant.attiva .mv-fu__passi li:nth-child(1) { animation-delay: 200ms; }
.menu__ant.attiva .mv-fu__passi li:nth-child(2) { animation-delay: 800ms; }
.menu__ant.attiva .mv-fu__passi li:nth-child(3) { animation-delay: 1400ms; }
.menu__ant.attiva .mv-fu__contatto { animation: menu-sale 520ms var(--curva) 1900ms backwards; }
.menu__ant.attiva .mv-fu__tag { animation: menu-pop 520ms var(--curva) 2400ms backwards; }
@keyframes menu-pop { from { opacity: 0; transform: scale(0.6); } }

/* tonight's bookings */
.mv-ge { border-radius: 14px; padding: 10px 12px 4px; background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.08); }
.mv-ge__testa { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.mv-ge__testa b { font-size: 1.25em; font-weight: 750; letter-spacing: -0.02em; }
.mv-ge__testa span { font-size: 0.86em; color: var(--sec); }
.mv-ge ul { list-style: none; margin: 0; padding: 0; }
.mv-ge li { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: 8px; min-height: 2.5em; box-shadow: inset 0 1px 0 rgba(247, 248, 248, 0.07); }
.mv-ge time { font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-ge li span { color: var(--testo); }
.mv-ge em { font-style: normal; font-size: 0.84em; font-weight: 650; color: var(--sec); }
.mv-ge__nuova { margin: 0 -6px; padding: 0 6px; border-radius: 8px; background: rgba(201, 169, 233, 0.12); box-shadow: none !important; }
.mv-ge__nuova em { color: var(--lilla-chiaro); }
.menu__ant.attiva .mv-ge li:not(.mv-ge__nuova) { animation: menu-sale 420ms var(--curva) calc(150ms + var(--d) * 120ms) backwards; }
.menu__ant.attiva .mv-ge__nuova { animation: menu-arriva 640ms var(--curva) 1200ms backwards; }
@keyframes menu-arriva { from { opacity: 0; transform: translateX(-14px); } }

/* the assistant's chat */
.mv-ch { display: grid; gap: 7px; border-radius: 14px; padding: 10px; background: #0B141A; box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.07); }
.mv-ch__testa { display: flex; align-items: center; gap: 8px; }
.mv-ch__av { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1F2C34; color: #E9EDEF; font-size: 0.8em; font-weight: 750; }
.mv-ch__testa span:last-child { display: grid; }
.mv-ch__testa b { font-weight: 650; color: #E9EDEF; }
.mv-ch__testa small { color: #8696A0; font-size: 0.88em; }
.mv-ch__msg { max-width: 86%; padding: 0.5em 0.75em; border-radius: 10px; color: #E9EDEF; }
.mv-ch__msg--lui { justify-self: end; background: #005C4B; border-top-right-radius: 3px; }
.mv-ch__msg--bot { background: #1F2C34; border-top-left-radius: 3px; }
.mv-ch__posto { position: relative; display: grid; }
.mv-ch__scrive { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 0.75em 0.85em; border-radius: 10px; background: #1F2C34; opacity: 0; }
.mv-ch__scrive i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; }
.menu__ant.attiva .mv-ch__msg--lui { animation: menu-sale 420ms var(--curva) 200ms backwards; }
.menu__ant.attiva .mv-ch__scrive { animation: menu-scrive 1300ms ease-out 700ms; }
.menu__ant.attiva .mv-ch__scrive i { animation: menu-punto 600ms ease-in-out 700ms 2 alternate; }
.menu__ant.attiva .mv-ch__scrive i:nth-child(2) { animation-delay: 850ms; }
.menu__ant.attiva .mv-ch__scrive i:nth-child(3) { animation-delay: 1000ms; }
.menu__ant.attiva .mv-ch__msg--bot { animation: menu-sale 460ms var(--curva) 2000ms backwards; }
@keyframes menu-scrive { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes menu-punto { to { transform: translateY(-3px); opacity: 0.5; } }

/* the tools and the lists of names */
.mv-st ul, .mv-el ul, .mv-pa ol { list-style: none; margin: 0; padding: 0; }
.mv-st li, .mv-el li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; padding: 0.45em 0; box-shadow: inset 0 1px 0 rgba(247, 248, 248, 0.07); }
.mv-st li:first-child, .mv-el li:first-child { box-shadow: none; }
.mv-st b, .mv-el b { font-weight: 650; }
.mv-st small, .mv-el small { grid-column: 1; color: var(--sec); font-size: 0.92em; }
.mv-el em { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0.35em 0.7em; border-radius: 999px; background: rgba(201, 169, 233, 0.14); color: var(--lilla-chiaro); font-style: normal; font-size: 0.82em; font-weight: 650; }
.mv-el--fitto li { display: flex; justify-content: space-between; gap: 10px; padding: 0.38em 0; }
.mv-el--fitto small { text-align: right; }
.menu__ant.attiva :is(.mv-st, .mv-el) li { animation: menu-sale 420ms var(--curva) calc(150ms + var(--d) * 180ms) backwards; }

/* the three steps */
.mv-pa ol { position: relative; display: grid; gap: 9px; padding-left: 20px; }
.mv-pa ol::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 10px; width: 1.5px; background: linear-gradient(180deg, var(--lilla-chiaro), var(--viola)); transform-origin: 50% 0; }
.mv-pa li { position: relative; display: grid; gap: 1px; }
.mv-pa li::before { content: ''; position: absolute; left: -20px; top: 0.3em; width: 9px; height: 9px; border-radius: 50%; background: var(--lilla-chiaro); box-shadow: 0 0 10px rgba(201, 169, 233, 0.8); }
.mv-pa b { font-weight: 650; }
.mv-pa small { color: var(--sec); font-size: 0.92em; }
.menu__ant.attiva .mv-pa ol::before { animation: menu-scende 1500ms cubic-bezier(0.5, 0, 0.3, 1) 150ms backwards; }
.menu__ant.attiva .mv-pa li { animation: menu-sale 460ms var(--curva) calc(200ms + var(--d) * 520ms) backwards; }
.menu__ant.attiva .mv-pa li::before { animation: menu-pop 460ms var(--curva) calc(200ms + var(--d) * 520ms) backwards; }
@keyframes menu-scende { from { transform: scaleY(0); } }

/* the claim */
.mv-cl__grande { font-size: 2.3em; line-height: 1.02; font-weight: 760; letter-spacing: -0.035em; }
.mv-cl__grande span { display: inline-block; }
.mv-cl__sotto { margin-top: 8px; color: var(--sec); font-size: 1.02em; max-width: 24em; }
.menu__ant.attiva .mv-cl__grande span { animation: menu-sale 620ms var(--curva) backwards; }
.menu__ant.attiva .mv-cl__grande span:nth-child(2) { animation-delay: 140ms; }
.menu__ant.attiva .mv-cl__grande span:nth-child(3) { animation-delay: 280ms; }
.menu__ant.attiva .mv-cl__sotto { animation: menu-sale 520ms var(--curva) 600ms backwards; }

/* the message the button sends on WhatsApp */
.mv-wa { display: grid; gap: 8px; border-radius: 14px; padding: 10px; background: #0B141A; box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.07); }
.mv-wa__testa { display: flex; align-items: center; gap: 8px; }
.mv-wa__av { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #1F2C34; }
.mv-wa__av img { width: 1.25em; height: auto; }
.mv-wa__testa span:last-child { display: grid; }
.mv-wa__testa b { font-weight: 650; color: #E9EDEF; }
.mv-wa__testa small { color: #8696A0; font-size: 0.88em; }
.mv-wa__msg { justify-self: end; max-width: 90%; padding: 0.5em 0.75em 0.45em; border-radius: 10px; border-top-right-radius: 3px; background: #005C4B; color: #E9EDEF; }
.mv-wa__spunte { display: inline-block; width: 1.3em; height: 0.9em; margin-left: 0.35em; vertical-align: -0.1em; fill: none; stroke: #53BDEB; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mv-wa__nota { color: var(--sec); font-size: 0.92em; text-align: center; }
.menu__ant.attiva .mv-wa__msg { animation: menu-sale 460ms var(--curva) 250ms backwards; }
.menu__ant.attiva .mv-wa__spunte { animation: menu-pop 420ms var(--curva) 1100ms backwards; }
.menu__ant.attiva .mv-wa__nota { animation: menu-sale 460ms var(--curva) 1500ms backwards; }

/* the bottom: the metal button, the numbers, «Ferma le animazioni» */
.menu__fondo { display: grid; gap: 4px; padding-top: 4px; }
.menu .menu__cta.metallo { width: 100%; padding: 0 9px 0 20px; font-size: 15px; }
.menu__cta .metallo-scritta { width: 100%; justify-content: space-between; gap: 10px; }
.menu__cta .cta__freccia { width: 38px; height: 38px; }
/* phone and email in glass pills */
.menu__recapito { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.menu__pillola {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px 0 12px; border-radius: 999px;
  background: rgba(247, 248, 248, 0.05); box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--testo); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out, transform 140ms ease-out;
}
.menu__pillola svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--lilla); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu__pillola:active { transform: scale(0.96); background: rgba(201, 169, 233, 0.14); }
.menu__pillola:focus-visible { outline-offset: 3px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .menu__pillola:hover { background: rgba(201, 169, 233, 0.12); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}
.menu__piede { margin: 2px 0 -8px; }
.menu .ferma--menu { font-size: 13.5px; }

@media (max-width: 389px) {
  .menu__capo { padding: 0 7px; font-size: 14.5px; }
  .menu__capi { margin: 0 -7px; }
  .menu__voce { font-size: 20px; }
  /* the button stays on one line down to 360 px */
  .menu .menu__cta.metallo { padding: 0 7px 0 16px; font-size: 13.8px; letter-spacing: -0.014em; }
  .menu__cta .metallo-scritta { gap: 8px; white-space: nowrap; }
  .menu__cta .cta__freccia { width: 34px; height: 34px; }
  .menu__ant-vivo { font-size: 12px; }
}
/* phone and tablet: the metal button never waits below the fold. It is pulled out of the bottom block
   (display: contents) and stays on the bottom edge while the pages and the preview scroll under it; at the end
   it sits back in its place above the numbers. While it floats (menu.js puts .menu--galleggia) a dark veil comes
   up behind it and its glass gets a dark body, so nothing reads through it. */
@media (max-width: 1023px) {
  /* sticky offsets count from inside the scroller's padding: the bottom space moves to the last line instead */
  .menu__dentro { padding-bottom: 0; }
  .menu__fondo { display: contents; }
  .menu .menu__cta.metallo {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2;
    opacity: 0; translate: 0 16px;
  }
  .menu__recapito { margin-top: -2px; }
  .menu__piede { margin: -12px 0 calc(14px + env(safe-area-inset-bottom)); }
  .menu__recapito, .menu__piede { opacity: 0; transform: translateY(16px); }
  .menu:is(.aperto, .esce) .menu__cta.metallo { opacity: 1; translate: none; }
  .menu:is(.aperto, .esce) :is(.menu__recapito, .menu__piede) { opacity: 1; transform: none; }
  /* all three come in together (the same delay the bottom block had), keeping the metal's own press */
  .menu.aperto .menu__cta.metallo { transition: opacity 420ms ease-out 270ms, translate 700ms var(--curva) 270ms, transform 150ms ease, box-shadow 150ms ease, background-color 240ms ease-out; }
  .menu.aperto :is(.menu__recapito, .menu__piede) { transition: opacity 420ms ease-out 270ms, transform 700ms var(--curva) 270ms; }
  .menu.menu--galleggia .menu__cta.metallo { background-color: rgba(12, 12, 15, 0.9); }
  /* the veil: the last item of the scroller, stuck to the bottom edge, taking no room (negative margin = gap + height) */
  .menu__dentro::after {
    content: ''; position: sticky; bottom: 0; z-index: 1; flex: none; pointer-events: none;
    height: calc(128px + env(safe-area-inset-bottom)); margin-top: calc(-146px - env(safe-area-inset-bottom));
    margin-left: calc(-1 * max(var(--g), env(safe-area-inset-left))); margin-right: calc(-1 * max(var(--g), env(safe-area-inset-right)));
    background: linear-gradient(180deg, rgba(8, 9, 10, 0), rgba(8, 9, 10, 0.6) 22%, rgba(8, 9, 10, 0.9) 42%, rgba(8, 9, 10, 0.95));
    opacity: 0; transition: opacity 240ms ease-out;
  }
  .menu.menu--galleggia .menu__dentro::after { opacity: 1; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .menu__dentro { max-width: 640px; margin: 0 auto; }
  /* on a tablet the menu sits in the middle of the screen when there is room */
  .menu__capi { margin-top: auto; }
  .menu__dentro::after { margin-bottom: auto; }
  /* the veil fades at its sides, the column being narrower than the screen */
  .menu__dentro::after { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--g), #000 calc(100% - var(--g)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--g), #000 calc(100% - var(--g)), transparent); }
  .menu__anteprima { min-height: 270px; }
  .menu__ant-vivo { font-size: 13.5px; }
}

/* computer: chapters on the left, pages in the middle, the preview on the right, the first step below */
@media (min-width: 1024px) {
  .menu__dentro {
    display: grid; grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.1fr) minmax(380px, 1fr); grid-template-rows: 1fr auto;
    column-gap: clamp(32px, 4.4vw, 80px); row-gap: 22px; align-items: center;
    padding-top: calc(var(--testa) + 24px); padding-bottom: 28px; max-width: 1440px; margin: 0 auto;
  }
  .menu__capi { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin: 0; border: 0; }
  .menu__capo { min-height: 66px; padding: 0; font-size: clamp(32px, 2.9vw, 46px); font-weight: 730; letter-spacing: -0.036em; color: rgba(163, 169, 179, 0.5); }
  .menu__capo[aria-selected="true"] {
    background: var(--cromo); background-size: 200% 100%; background-position: 20% 50%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .menu__segno { display: none; }
  .menu__pagine { grid-column: 2; grid-row: 1; align-self: center; }
  .menu__voce { min-height: 58px; font-size: clamp(21px, 1.75vw, 27px); padding-left: 22px; }
  .menu__anteprima { grid-column: 3; grid-row: 1; min-height: min(410px, 56vh); border-radius: 28px; }
  .menu__ant { padding: 26px 26px 24px; gap: 10px; }
  .menu__ant-dove { font-size: 12.5px; }
  .menu__ant-frase { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
  .menu__ant-vivo { font-size: 15px; }
  .menu__fondo { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 28px; padding-top: 22px; border-top: 1px solid var(--riga-2); }
  .menu .menu__cta.metallo { width: auto; padding-left: 24px; }
  .menu__cta .metallo-scritta { width: auto; gap: 18px; }
  .menu__recapito { margin: 0; }
  .menu__piede { margin: 0 0 0 auto; }
}

/* ── Reduced motion, or «Ferma le animazioni»: everything is simply there ── */
@media (prefers-reduced-motion: reduce) {
  .menu *, .menu *::before, .menu *::after, .testa *, .testa::before, .testa::after { transition: none !important; animation: none !important; }
}
html.fermo .menu *, html.fermo .menu *::before, html.fermo .menu *::after, html.fermo .testa * { transition: none !important; animation: none !important; }