:root {
  /* Palette allineata a Volleyball_AI_app/wwwroot/css/palette.css */
  --navy: #052767;
  --navy-hover: #0a2d7a;
  --navy-mid: #243761;
  --navy-dark: #121d35;
  --blue: #3b82f6;
  --blue-hover: #2563eb;
  --blue-light: #7baaf7;
  --orange: #e8720c;
  --orange-hover: #b85a09;
  --grey-50: #f5f7fc;
  --grey-200: #e3e6ec;
  --grey-600: #5b6472;
  --text: #1a1f2b;
  --radius: 12px;
  --max-width: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header {
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid var(--grey-200);
  box-shadow: 0 1px 3px rgba(5, 39, 103, 0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

header.header-reveal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

header.header-reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--navy);
}

.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}

nav.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.nav-links a {
  text-decoration: none;
  color: var(--grey-600);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s;
}

nav.nav-links a:hover,
nav.nav-links a.active {
  color: var(--navy);
}

nav.nav-links a.btn-primary,
nav.nav-links a.btn-primary:hover {
  color: #fff;
}

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-primary:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--grey-200);
}

.btn-ghost:hover {
  background: var(--grey-50);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 1.6rem;
  cursor: pointer;
}

/* Hero (condivisa anche da tutorial.html e presentazione.html: foto + overlay scuro) */
.hero {
  color: #fff;
  padding: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 30, 61, 0.88) 0%, rgba(11, 30, 61, 0.78) 45%, rgba(11, 30, 61, 0.95) 100%);
}

/* Hero della home: niente foto, sfondo bianco, testo scuro, a tutta altezza */
.hero.hero-home {
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* segue l'altezza reale dello schermo anche su mobile */
}

.hero.hero-home h1 {
  color: var(--navy);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
}

.hero.hero-home p.lead {
  color: var(--grey-600);
  font-size: 1.7rem;
}

.hero-home .hero-actions .btn {
  padding: 16px 32px;
  font-size: 1.15rem;
}

.hero-logo {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 24px 36px;
  background: #fff;
}

.hero-media {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  background: #fff;
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px 90px;
  text-align: center;
}

.hero-logo img {
  height: 88px;
  width: auto;
}

.hero-logo span {
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--navy);
}

.eyebrow {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero p.lead {
  font-size: 1.15rem;
  color: #d7dcea;
  max-width: 640px;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections */
section {
  padding: 80px 0;
}

section.alt {
  background: var(--grey-50);
}

/* Media split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split.reverse .split-media { order: 2; }
.split.reverse .split-text { order: 1; }

/* comparsa in scroll: il video entra da sinistra, il testo da destra (con un piccolo ritardo dopo il video) */
.reveal-split {
  align-items: start;
  grid-template-columns: 2fr 1fr;
  column-gap: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* la sezione "Statistiche di squadra" ha lo stesso sfondo dell'Editor grafico su presentazione.html;
   niente padding superiore, così il margine dalla sezione precedente resta uguale a quello sotto l'hero */
section.stats-alt {
  padding-top: 0;
}

/* più spazio tra la tabella (con le card di distribuzione/direzioni sovrapposte, che sporgono
   oltre il suo bordo) e il testo a fianco, rispetto al gap standard di .reveal-split */
section.stats-alt .reveal-split {
  column-gap: 64px;
}

.reveal-split .split-text-col {
  text-align: left;
}

.reveal-split .split-media,
.reveal-split .split-text-col {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-split .split-media {
  transform: translateX(-60px);
}

.reveal-split .split-text-col {
  transform: translateX(60px);
  transition-delay: 0.25s;
}

.reveal-split.is-visible .split-media,
.reveal-split.is-visible .split-text-col {
  opacity: 1;
  transform: translateX(0);
}

/* variante speculare: immagine a destra (2/3), testo a sinistra (1/3) — stessa comparsa, direzioni invertite */
.reveal-split.reveal-reverse {
  grid-template-columns: 1fr 2fr;
}

.reveal-split.reveal-reverse .split-media {
  transform: translateX(60px);
}

.reveal-split.reveal-reverse .split-text-col {
  transform: translateX(-60px);
}

.reveal-split.reveal-reverse.is-visible .split-media,
.reveal-split.reveal-reverse.is-visible .split-text-col {
  transform: translateX(0);
}

.reveal-split .reveal-title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin: 0 0 16px;
  font-weight: 800;
  color: var(--blue);
}

/* Pagina organizzata a "container" a schermo intero: il primo (hero) è alto quanto lo schermo, tutti i
   successivi sono alti quanto lo schermo meno la barra del menu (--header-h, calcolata in js/main.js).
   Lo snap da un container all'altro è gestito interamente in JS (non da scroll-snap CSS: andrebbe in
   conflitto con l'animazione, "cortocircuitandola" e rendendola istantanea invece che graduale). */
.screen-section {
  height: calc(100vh - var(--header-h, 76px));
  height: calc(100dvh - var(--header-h, 76px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* testo dei paragrafi "Analisi dettagliata azioni" e "Statistiche di squadra", ingranditi
   rispetto al corpo standard e allineati alla stessa dimensione tra loro */
.lead-text {
  font-size: 1.3rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-split .split-media,
  .reveal-split .split-text-col,
  .reveal-split .reveal-title,
  .reveal-split .split-text,
  .mstb-overlay-card,
  .mv-container .mv-head,
  .mv-container .mv-preview-video,
  .mv-container .mv-sidebar,
  .hero-reveal .hero-logo img,
  .hero-reveal .hero-logo span,
  .hero-reveal h1,
  .hero-reveal p.lead,
  .hero-reveal .hero-actions {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* riquadro della tabella: stessa dimensione/rapporto del riquadro del video (620:492), tabella
   allineata in alto e "in fondo" (z-index sotto le card di distribuzione/direzioni attacco, che
   le si sovrappongono — vedi .mstb-overlay più sotto) */
.stats-table-media {
  aspect-ratio: 620 / 492;
  position: relative;
}

.stats-table-media .mstb-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

/* Tabella statistiche — stessa grafica delle tabelle statistiche dell'app (MatchStatsFullTable),
   senza sfondo proprio: si fonde con lo sfondo della sezione, così le card sovrapposte risultano
   più leggere */
.mstb-wrap {
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
}

/* Card "Distribuzione attacchi" e "Direzioni attacco" — stessa grafica dei grafici campo dello
   Studio Partita dell'app (StudioViewer: ChartCard/DistributionCourt), con dati di esempio.
   Sovrapposte alla parte bassa della tabella per dare profondità al riquadro. */
.mstb-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mstb-overlay-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(11, 30, 61, 0.2);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.55s;
}

.mstb-overlay-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.45);
}

.mstb-overlay-sublabel {
  font-size: 0.56rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.3);
  margin-top: -2px;
}

.mstb-dist-svg,
.mstb-court-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.mstb-overlay-dist {
  right: -5%;
  bottom: -8%;
  width: 42%;
  transform: translateY(18px) rotate(6deg) scale(0.92);
}

.mstb-overlay-court {
  left: -3%;
  bottom: -10%;
  width: 30%;
  z-index: 3;
  transition-delay: 0.7s;
  transform: translateY(18px) rotate(-5deg) scale(0.92);
}

.reveal-split.is-visible .mstb-overlay-card {
  opacity: 1;
}

.reveal-split.is-visible .mstb-overlay-dist {
  transform: translateY(0) rotate(6deg) scale(1);
}

.reveal-split.is-visible .mstb-overlay-court {
  transform: translateY(0) rotate(-5deg) scale(1);
}

.mstb-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 460px;
  font-size: 0.72rem;
  background: #fff;
}

.mstb-col-role { width: 40px; }
.mstb-col-stat { width: 42px; }

.mstb-th-group {
  background: #f0f4ff;
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.3rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mstb-th-sub {
  background: #f0f4ff;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.3rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mstb-td-player {
  font-weight: 600;
  color: #1a1a2e;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mstb-td-role {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.7rem;
}

.mstb-td {
  padding: 0.4rem 0.3rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mstb-eff { font-weight: 700; }

.mstb-total-row { border-top: 1.5px solid rgba(0, 0, 0, 0.12); }

.mstb-total-label {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
}

.mstb-total-cell { font-weight: 700; background: rgba(59, 130, 246, 0.03); }

/* linea verticale marcata tra i blocchi Ruolo / Battuta / Ricezione / Attacco, come nell'app */
.mstb-vsep { border-left: 1px solid rgba(0, 0, 0, 0.1) !important; }

/* Sezione "Visualizza velocemente ogni azione": video con la card statistiche del giocatore
   sovrapposta, stessa logica delle card di Statistiche di squadra ma con un'unica card centrata
   in basso e celle cliccabili che spostano il video sull'azione corrispondente (vedi js/main.js). */
.opposto-video-media {
  position: relative;
}

/* il video sorgente è 1280x720: ritaglia 1/6 a sinistra e 1/6 a destra (rimane la fascia centrale
   4/6), mostrando nel player solo quella. Il wrapper ha l'aspect-ratio della fascia ritagliata
   (32:27) e il video, allargato al 150% e centrato, viene tagliato dall'overflow:hidden. */
.opposto-video-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 32 / 27;
  border-radius: var(--radius);
  box-shadow: none;
}

/* selettore più specifico di ".split-media video" (che altrimenti, a parità di specificità e
   dichiarato dopo nel foglio di stile, vincerebbe sovrascrivendo max-width/height/ritaglio) */
.opposto-video-media .opposto-video-crop video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  border-radius: 0;
  box-shadow: none;
}

/* Sezione "Ogni attacco, con la sua traiettoria": il video sorgente è 1920x1080. La finestra di
   ritaglio è un rettangolo centrato orizzontalmente sul bounding box delle traiettorie, dimensioni
   854.545x721.023px (rapporto 32:27, il riquadro resta identico agli altri box della pagina) —
   zoom del 10% rispetto alla versione precedente (940x793.125px) ottenuto rimpicciolendo il
   ritaglio mantenendo fisso il bordo inferiore (y=943 nel campo originale): il bordo superiore si
   sposta quindi più in basso (da y=149.875 a y=221.977), avvicinando le traiettorie al bordo
   superiore del player. Il video viene ingrandito uniformemente (224.681% = 1920/854.545 in
   larghezza, 149.788% = 1080/721.023 in altezza — stesso fattore, nessuna deformazione) e
   spostato di cropX/originalW e cropY/originalH (in % della SUA dimensione resa, coerente con
   transform:translate) così quell'area risulta allineata in alto a sinistra nel riquadro;
   l'eccedenza viene tagliata dall'overflow. */
.attacchi-video-media {
  position: relative;
}

.attacchi-video-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 32 / 27;
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

.attacchi-video-media .attacchi-video-crop video {
  position: absolute;
  top: 0;
  left: 0;
  width: 224.681%;
  max-width: none;
  height: 149.788%;
  /* scale(1.02) aggiuntivo: senza, il bordo vero del video sorgente può cadere esattamente sul
     confine del ritaglio — un filo di sotto-pixel dove compositing/decodifica GPU e overflow:hidden
     non si allineano perfettamente lascia intravedere quel bordo (bande nere/bianche di 1px,
     sfarfallanti da un frame all'altro). Zoomando dell'ulteriore 2% attorno al centro (transform-
     origin di default) si guadagna ~1% di margine per lato, che assorbe l'errore di arrotondamento
     senza spostare percettibilmente l'inquadratura (il translate successivo resta lo stesso: è
     calcolato sul riquadro di layout, non sulla dimensione già scalata). */
  transform: translate(-19.882%, -20.553%) scale(1.02);
  border-radius: 0;
  box-shadow: none;
}

/* Traiettorie della palla (alzata prima della schiacciata) sovrapposte al video: il viewBox
   (0 0 854.545 721.023) coincide esattamente con la finestra ritagliata sopra, quindi le coordinate dei
   dati (già ricalcolate con lo stesso offset in js/main.js) si allineano senza altri calcoli. */
.attacchi-traj-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.traj-group {
  cursor: pointer;
}

.traj-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 26;
  pointer-events: stroke;
}

.traj-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.352;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

/* "corrente" = il frame in riproduzione ora sta dentro la finestra di questa traiettoria
   (calcolato in js/main.js, stesso criterio di MontageBallOverlay/ball-trajectory.js dell'app):
   piena opacità e tratto più marcato, come al passaggio del mouse. */
.traj-group.is-current .traj-line,
.traj-group:hover .traj-line {
  opacity: 1;
}

.traj-group.is-current .traj-line,
.traj-group:hover .traj-line {
  stroke-width: 5;
}

/* Pallina animata che segue la posizione esatta nel frame corrente lungo la traiettoria attiva
   (interpolata tra i due punti più vicini) — stesso concetto della scia gialla di
   ball-trajectory.js, qui un singolo punto con alone luminoso invece della scia sfumata. */
.traj-ball {
  pointer-events: none;
  fill: rgba(255, 220, 0, 0.95);
  stroke: rgba(120, 80, 0, 0.6);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.85));
  opacity: 0;
  transition: opacity 0.1s ease;
}

.traj-ball.is-visible {
  opacity: 1;
}

/* Scia di puntini che sfumano dietro la pallina animata (posizioni recenti, non solo quella
   attuale) — stesso concetto della "scia gialla" di ball-trajectory.js nell'app, qui come pool
   di cerchi creati una volta in js/main.js e riposizionati/scoloriti a ogni frame. */
.traj-trail-dot {
  pointer-events: none;
  fill: rgba(255, 220, 0, 0.9);
}

/* Card "Altezza / Velocità" dell'attacco corrente, sovrapposta a cavallo del bordo SUPERIORE del
   player (stessa idea della legenda sotto, ma speculare: top:0 + translateY(-50%) mette il centro
   della card sul bordo superiore, metà dentro e metà fuori dal video). Stesso sfondo di
   .attacchi-traj-legend, per coerenza tra le due card sovrapposte allo stesso video. */
.attacchi-stats-overlay {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(11, 30, 61, 0.18);
  padding: 2px;
}

/* .attacchi-stats-table ha già .mstb-table per la stessa grafica delle altre tabelle del sito
   (Statistiche di squadra/Battuta opposto): qui sovrascriviamo solo larghezza (min-width/
   width:100% pensati per tabelle a più colonne, non per questo riquadro a 2 celle), sfondo
   (uguale al box che la contiene, così si fondono) e bordi delle celle (tolti: il contorno della
   card è già sufficiente in un riquadro così piccolo). Selettore con tag (table.attacchi-stats-
   table) per battere .mstb-table a parità di specificità, indipendentemente dall'ordine nel
   foglio di stile. */
table.attacchi-stats-table {
  width: auto;
  min-width: 280px;
  background: #fff;
}

table.attacchi-stats-table .mstb-td {
  border: none;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
}

/* linea grigia a metà del box, tra la cella "Altezza" e quella "Velocità" */
table.attacchi-stats-table .mstb-td + .mstb-td {
  border-left: 2px solid var(--grey-200);
}

/* riga "Dati schiacciata": stessa tipografia di .mstb-total-label (etichetta di riepilogo delle
   altre tabelle), su un'unica cella a tutta larghezza sopra le due celle valore, separata da essa
   con la stessa linea grigia del divisorio Altezza/Velocità */
.attacchi-stats-title {
  text-align: center;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.5rem 0.15rem;
  border-bottom: 1px solid var(--grey-200);
}

/* Legenda: spiega il significato dei colori delle traiettorie (stessa convenzione di "Direzioni
   attacco" in Statistiche di squadra), in una card sovrapposta al bordo inferiore del player —
   stesso stile di .mstb-overlay-card, centrata orizzontalmente e a cavallo del bordo (bottom:0 +
   translateY(50%) mette il CENTRO della card sul bordo, quindi metà dentro e metà fuori dal
   video). Larghezza "auto": senza una width esplicita, un elemento position:absolute si
   restringe al contenuto, quindi nessuno spazio vuoto ai lati del testo. Va sul contenitore
   esterno (.attacchi-video-media, non .attacchi-video-crop) perché quest'ultimo ha
   overflow:hidden per il ritaglio del video e taglierebbe la metà "fuori" della card. */
.attacchi-traj-legend {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translate(-50%, 50%);
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 14px;
  padding: 7px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(11, 30, 61, 0.18);
  white-space: nowrap;
}

.attacchi-traj-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
}

.attacchi-traj-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.attacchi-traj-legend-dot-outline {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.mstb-overlay-stats {
  left: 50%;
  bottom: -10%;
  width: 68%;
  max-width: 300px;
  background: #dbe6fb;
  box-shadow: none;
  transform: translate(-50%, 18px) scale(0.92);
  pointer-events: auto;
}

.reveal-split.is-visible .mstb-overlay-stats {
  transform: translate(-50%, 0) scale(1);
}

/* stessa grafica di .mstb-table ma senza il min-width pensato per la tabella a 13 colonne: qui
   bastano 4 colonne di uguale larghezza, con un contorno visibile su ogni cella */
.mstb-table-compact {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.mstb-table-compact .mstb-th-sub,
.mstb-table-compact .mstb-td {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.mstb-stat-btn {
  cursor: pointer;
  font-weight: 700;
  color: var(--blue);
  transition: background 0.15s ease, color 0.15s ease;
}

.mstb-stat-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.mstb-stat-btn:active {
  background: rgba(59, 130, 246, 0.22);
}

/* resta evidenziata l'ultima statistica premuta (di default "Tot", impostata già in HTML) */
.mstb-stat-btn.is-active {
  background: rgba(59, 130, 246, 0.18);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

/* Sezione "Tracciamento accurato di ogni giocatore": video con il grafico "Direzioni ricezione"
   sovrapposto (vedi index.html per i dettagli sui meccanismi, presi da TabMontageGrafici.razor).
   Il video sorgente è 1280x720: ritaglia 1/9 a sinistra e 2/9 a destra (rimane la fascia centrale
   6/9 = 2/3, stessa frazione di .opposto-video-crop — infatti l'aspect-ratio risultante è lo
   stesso 32:27, quindi il riquadro ha le stesse dimensioni degli altri box della pagina). */
.ricezioni-video-media {
  position: relative;
}

.ricezioni-video-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 32 / 27;
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

.ricezioni-video-media .ricezioni-video-crop video {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  max-width: none;
  height: 100%;
  transform: translateX(-11.111%);
  border-radius: 0;
  box-shadow: none;
}

/* Grafico "Direzioni ricezione", sovrapposto al bordo SUPERIORE DESTRO del video (stessa idea di
   .mstb-overlay-dist/.mstb-overlay-court in Statistiche di squadra: sporge leggermente oltre il
   contorno). Stessa grafica campo di .mstb-court-svg/"Direzioni attacco C1" (viewBox "0 0 11 20",
   campo intero). Campo dritto (nessun rotate, a differenza delle altre card sovrapposte del
   sito, che sono leggermente inclinate). transform-origin in alto a destra: l'angolo che sporge
   dal bordo (right/top sopra) resta fermo lì mentre la card si rimpicciolisce (scale 0.46→0.5),
   invece di restringersi verso il centro. */
.ricezioni-overlay-court {
  right: -5%;
  top: -8%;
  width: 46%;
  transform-origin: top right;
  transform: translateY(-18px) scale(0.46);
  pointer-events: auto;
}

.reveal-split.is-visible .ricezioni-overlay-court {
  transform: translateY(0) scale(0.5);
}

/* campo azzurrino (invece dello sfondo bianco di .mstb-overlay-card, ereditato quando il
   rettangolo era fill:none) */
.ricezioni-court-svg .court-rect {
  fill: rgba(230, 240, 255, 0.7);
}

.ricezioni-court-svg .court-arrow-group {
  cursor: pointer;
}

/* frecce disegnate il 50% più spesse rispetto al default SVG (stroke-width inline 0.19 →
   0.285); le punte (poligoni) sono scalate della stessa proporzione direttamente nei punti
   in index.html, dato che non hanno uno stroke da poter allargare via CSS. */
.ricezioni-court-svg .court-arrow-line {
  stroke-width: 0.285;
}

/* evidenziazione più marcata al passaggio del mouse: oltre a opacità piena, uno spessore
   nettamente superiore (non solo proporzionale al +50% di base) così la freccia risalta di più */
.ricezioni-court-svg .court-arrow-group:hover .court-arrow-line {
  stroke-width: 0.44;
  opacity: 1;
}
.ricezioni-court-svg .court-arrow-group:hover .court-arrow-poly {
  opacity: 1;
}

/* titolo ("Direzioni ricezione") e legenda della card, molto più grandi del default
   .mstb-overlay-label/.mstb-overlay-sublabel (pensati per le card più piccole e decorative delle
   altre sezioni) dato che qui sono la spiegazione del grafico interattivo, non un dettaglio.
   Titolo centrato sulla larghezza della card (.mstb-overlay-card è un flex column, quindi lo
   span si stira già a piena larghezza: basta text-align). */
.ricezioni-overlay-court .mstb-overlay-label {
  font-size: 1.05rem;
  text-align: center;
}

/* due voci per riga (flex-basis 50% invece del wrap "naturale", che a seconda della larghezza
   disponibile potrebbe andare su 1, 3 o 4 colonne) */
.ricezioni-court-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 2px 2px 0;
}

.ricezioni-legend-item {
  flex: 0 0 calc(50% - 5px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.ricezioni-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.split-media img {
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

.split-media video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

/* Sezione "Analisi dettagliata": stesso riquadro (aspect-ratio 32:27) di .opposto-video-crop
   ("Visualizza velocemente ogni evento"), così i due player risultano identici a dimensione.
   Ritaglio sull'angolo in alto a sinistra del video sorgente (1244x820): object-fit:cover con
   object-position:left top riempie il riquadro senza deformarlo mostrando tutta l'altezza (source
   più "largo" del riquadro: l'altezza combacia esattamente, l'eccedenza in larghezza viene
   tagliata a destra). scale(1.1) aggiuntivo sul video (transform-origin di default, al centro
   dell'inquadratura già ritagliata) applica uno zoom del 10%, tagliando in eccesso anche in
   verticale (voluto, a differenza del semplice cover) grazie a overflow:hidden sul contenitore. */
.spike-video-media {
  position: relative;
}

.spike-video-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 32 / 27;
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

.spike-video-media .spike-video-crop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  transform: scale(1.1);
  border-radius: 0;
  box-shadow: none;
}

/* Selettore di velocità/frame-per-frame a cavallo del bordo inferiore del player, centrato in
   orizzontale: bottom:0 + translateY(50%) mette il CENTRO verticale del box sul bordo (metà
   dentro, metà fuori dal video), left:50% + translateX(-50%) lo centra in orizzontale — stessa
   tecnica di .attacchi-traj-legend. Largo un terzo del riquadro video (33.333% di
   .spike-video-media, che ha la stessa larghezza di .spike-video-crop essendo quest'ultimo
   width:100% al suo interno). Stessa identità grafica di .mv-tabs/.mv-tab (tab Punti/Azioni/
   Rotazioni di "Rimozione dei tempi morti") ma su sfondo bianco pieno (invece che grigio) per
   restare leggibile sopra il video. Comportamento gestito in js/main.js. */
.spike-speed-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translate(-50%, 50%);
  width: 33.333%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 7px;
  box-shadow: 0 10px 22px rgba(11, 30, 61, 0.22);
}

.spike-speed-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #000;
  padding: 0 2px;
}

.spike-speed-row {
  display: flex;
  gap: 4px;
}

.spike-speed-btn {
  flex: 1;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--grey-600);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.4rem 0.3rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.spike-speed-btn:hover  { background: rgba(5, 39, 103, 0.06); color: var(--navy); }
.spike-speed-btn.active { background: var(--navy); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }

.spike-frame-row {
  display: flex;
  gap: 4px;
}

.spike-frame-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--grey-200);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.35rem 0.3rem;
  cursor: pointer;
  transition: background 0.15s;
}

.spike-frame-btn:hover { background: rgba(5, 39, 103, 0.06); }
.spike-frame-btn svg   { flex-shrink: 0; }

.split-text .kicker {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.split-text h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin: 0 0 16px;
  font-weight: 800;
}

.split-text p {
  color: var(--grey-600);
  margin: 0 0 16px;
}

.split-text ul {
  margin: 0;
  padding-left: 20px;
  color: var(--grey-600);
}

.split-text li { margin-bottom: 8px; }

/* Sezione "Rimozione dei tempi morti": ricostruzione (sola navigazione) del player+sidebar
   Punti/Azioni/Rotazioni di MatchViewer.razor nell'app — vedi index.html/js/main.js. Sfondo
   bianco (niente .alt), a differenza delle sezioni precedenti.
   .mv-container ha anche la classe .reveal-split (stesso sistema di comparsa in scroll delle
   altre sezioni: setRevealVisible in js/main.js, parte dello scroll a container, cerca
   .reveal-split nella sezione appena diventata attiva e le mette/toglie is-visible). Non essendo
   una vera griglia a due colonne, si riscrivono qui align-items/
   max-width per neutralizzare le regole pensate per .split-media/.split-text-col (altrimenti
   .mv-container si restringerebbe a 900px e i suoi figli non si stirerebbero più a piena
   larghezza) — l'animazione vera e propria è sotto, su .mv-head/.mv-preview invece che su
   .split-media/.split-text-col. */
.mv-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* max-width dimensionato esattamente sulla somma video + gap + .mv-sidebar (larghezza fissa
     calcolata dall'aspect-ratio, vedi .mv-preview-video) così la riga non lascia spazio vuoto
     a destra della sidebar.
     width:100% è necessario perché .container gli dà margin:0 auto — dentro un flex-parent in
     colonna (.screen-section) i margini auto sul cross-axis fanno "collassare" l'elemento al
     contenuto (shrink-to-fit) invece di stirarlo, vanificando il max-width qui sotto. */
  width: 100%;
  max-width: 1022px;
}

/* comparsa in scroll granulare (a differenza delle altre sezioni, qui tre pezzi indipendenti
   invece di due): il titolo entra dall'alto, il video da sinistra, la sidebar Punti/Azioni/
   Rotazioni da destra — l'animazione va quindi sui due figli di .mv-preview (non su .mv-preview
   stesso, che resta un contenitore di layout puro) oltre che su .mv-head. */
.mv-container .mv-head,
.mv-container .mv-preview-video,
.mv-container .mv-sidebar {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.mv-container .mv-head {
  transform: translateY(-40px);
}
.mv-container .mv-preview-video {
  transform: translateX(-60px);
  transition-delay: 0.2s;
}
.mv-container .mv-sidebar {
  transform: translateX(60px);
  transition-delay: 0.35s;
}
.mv-container.is-visible .mv-head,
.mv-container.is-visible .mv-preview-video,
.mv-container.is-visible .mv-sidebar {
  opacity: 1;
  transform: translate(0, 0);
}

.mv-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}

.mv-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin: 0 0 14px;
  font-weight: 800;
  color: var(--blue);
}

.mv-head p {
  color: var(--grey-600);
  font-size: 1.25rem;
  margin: 0;
}

/* testo alternativo per il telefono (vedi @media max-width:600px più sotto): nascosto qui,
   sopra i 600px resta invariato il paragrafo normale */
.mv-head-mobile-text {
  display: none;
}

.mv-reveal-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

.mv-reveal-btn:hover {
  color: var(--blue-hover);
}

/* Altezza della riga FISSA (a differenza delle altre sezioni ritagliate, che la lasciano
   determinare dall'aspect-ratio): qui .mv-sidebar ha una lista che può crescere parecchio
   (fino a 12 punti coi loro eventi), e in una riga flex senza altezza propria è lei — non il
   video — a decidere quanto alta viene tutta la riga (stretch degli item flex usa il PIÙ ALTO
   contenuto "naturale" tra i due, non quello del video). Con l'altezza fissata qui, invece,
   .mv-preview-video calcola la propria LARGHEZZA dall'aspect-ratio (sotto), e .mv-sidebar scrolla
   il proprio contenuto internamente invece di spingere in basso il bordo della card.
   justify-content:center: su finestre più basse (60vh < 540px, oppure quando .mv-preview viene
   compressa in altezza perché testo+video non ci stanno in .screen-section) il video si restringe
   ma .mv-sidebar resta al suo max-width — senza centrare la riga, lo spazio che avanza finirebbe
   tutto a destra della sidebar invece che ripartito ai due lati, facendo sembrare il blocco
   spostato rispetto al centro di .mv-container (che invece è sempre centrato sulla pagina). */
.mv-preview {
  display: flex;
  justify-content: center;
  gap: 22px;
  height: min(540px, 60vh);
}

/* il video sorgente è 1280x720: ritaglia 1/9 a sinistra e 2/9 a destra (rimane la fascia
   centrale 6/9 = 2/3), stessa tecnica/frazioni di .ricezioni-video-crop — infatti l'aspect-ratio
   è lo stesso 32:27. flex:0 0 auto (non "1 1 62%" come si potrebbe pensare): la larghezza NON è
   una frazione della riga, è quella che l'aspect-ratio calcola dall'altezza fissa qui sopra —
   .mv-sidebar prende poi tutto lo spazio che resta (flex:1 1 auto, sotto). */
.mv-preview-video {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 32 / 27;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(11, 30, 61, 0.18);
}

.mv-preview-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  max-width: none;
  height: 100%;
  /* scale(1.02) aggiuntivo: senza, il bordo vero del video sorgente può cadere esattamente sul
     confine del ritaglio — un filo di sotto-pixel dove compositing/decodifica GPU e overflow:hidden
     non si allineano perfettamente lascia intravedere quel bordo (bande nere/bianche di 1px,
     sfarfallanti da un frame all'altro, vedi stesso commento su .attacchi-video-crop). Zoomando
     dell'ulteriore 2% attorno al centro si guadagna ~1% di margine per lato senza spostare
     percettibilmente l'inquadratura. */
  transform: translateX(-11.111%) scale(1.02);
  display: block;
}

.mv-sidebar {
  flex: 1 1 264px;
  max-width: 312px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

/* ── Tab bar (Punti/Azioni/Rotazioni) — stessa grafica di .rot-team-toggle nell'app ── */
.mv-tabs {
  display: flex;
  gap: 3px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding: 8px;
  flex-shrink: 0;
}

.mv-tab {
  flex: 1;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--grey-600);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mv-tab:hover { background: rgba(5, 39, 103, 0.06); color: var(--navy); }
.mv-tab.active { background: var(--navy); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }

.mv-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}

/* pannello Rotazioni: a differenza degli altri due .mv-panel, ha un controllo fisso (toggle
   squadra/situazione) sopra la lista — diventa lui stesso un flex column, e lo scroll passa a
   .mv-rot-list (niente doppia scrollbar). :not([hidden]): un display esplicito qui batterebbe
   sempre — qualunque specificità — il display:none di [hidden] nello UA stylesheet, restando
   visibile anche sulle altre tab; qui infatti lo era, bug segnalato e corretto. */
.mv-panel-rotazioni:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.mv-rot-controls { padding: 10px 10px 0; flex-shrink: 0; }
.mv-rot-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; box-sizing: border-box; }

/* ── Toggle squadra (tab Rotazioni) — stessa grafica di .rot-team-toggle nell'app ── */
.mv-rot-team-toggle {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 3px;
}

.mv-rot-team-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #777;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-rot-team-btn:hover { background: rgba(0, 0, 0, 0.07); color: #333; }
.mv-rot-team-btn.active { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

/* toggle "Situazione" (Tutte/Battuta/Ricezione), stessa grafica del toggle squadra sopra di lui */
.mv-rot-situation-toggle { margin-top: 6px; }

.mv-rot-stats { font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
.mv-rot-won { color: #22a55e; margin-right: 6px; }
.mv-rot-lost { color: #ef4444; }

/* ── Header "Set N" / "Rot. N" collassabile — stessa grafica di .sidebar-set-toggle nell'app ── */
.mv-set-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #e8edf7;
  border: 1.5px solid #b0bdd8;
  border-radius: 7px;
  color: #555;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0.6rem 0 0.5rem;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}

.mv-set-group:first-child .mv-set-toggle { margin-top: 0; }
.mv-set-toggle:hover { background: #dde4f2; color: #333; }

.mv-set-toggle-label { display: flex; align-items: center; }

.mv-set-toggle-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mv-set-badge {
  margin-left: 0.35em;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.65;
  text-transform: none;
  letter-spacing: 0;
}

.mv-set-arrow {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: #a0afc8;
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}
.mv-set-toggle.open .mv-set-arrow { transform: rotate(0deg); }

.mv-set-group.collapsed .mv-set-body { display: none; }

/* ── Punto (condiviso da Punti/Rotazioni) — stessa grafica di .point-box nell'app ── */
.mv-point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  background: #fff;
  padding: 0.45rem 0.9rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mv-point:hover { border-color: var(--navy); background: #f0f4ff; }

.mv-point.is-current {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.07);
  box-shadow: inset 3px 0 0 var(--blue), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mv-point-num {
  font-size: 0.65rem;
  color: #aaa;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-point-score {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 0.45rem;
  row-gap: 0.06rem;
  align-items: center;
  width: 100%;
}

.mv-team-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-team-score {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
}

.mv-plus1 {
  font-size: 0.62rem;
  font-weight: 700;
  color: transparent;
  min-width: 1.5rem;
  text-align: left;
}
.mv-plus1.shown { color: #22a55e; }

/* ── Lista eventi (tab Azioni) — stessa grafica di .event-list/.event-box nell'app ── */
.mv-event-list {
  border-left: 2px solid var(--grey-200);
  margin-left: 14px;
  padding-left: 6px;
  padding-bottom: 2px;
  margin-bottom: 0.5rem;
}

.mv-event {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.24rem 0.4rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}

.mv-event:hover { background: rgba(0, 0, 0, 0.05); }

.mv-event.is-current {
  background: rgba(59, 130, 246, 0.09);
  box-shadow: inset 2.5px 0 0 var(--blue);
}

.mv-event-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #444;
}

.mv-empty {
  color: var(--grey-600);
  font-size: 0.8rem;
  padding: 8px 4px;
}

/* Steps (tutorial) */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--grey-200);
}

.step:last-child { border-bottom: none; }

.step-num {
  counter-increment: step;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--blue-light);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-num::before { content: counter(step); }

.step h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.step p {
  margin: 0 0 14px;
  color: var(--grey-600);
}

.step img {
  border-radius: var(--radius);
  margin-top: 14px;
  box-shadow: 0 14px 30px rgba(11, 30, 61, 0.12);
}

.tag {
  display: inline-block;
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--navy), var(--navy-mid));
  color: #fff;
  text-align: center;
  padding: 70px 24px;
  border-radius: var(--radius);
}

.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 14px;
}

.cta-band p {
  color: #cfd6e6;
  margin: 0 0 30px;
}

/* Footer */
footer {
  background: var(--navy);
  color: #a9b2c6;
  padding: 46px 0 28px;
  font-size: 0.9rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

footer a { text-decoration: none; color: #a9b2c6; }
footer a:hover { color: #fff; }

.footer-links {
  display: flex;
  gap: 22px;
}

.disclaimer {
  background: rgba(232, 114, 12, 0.12);
  border: 1px solid rgba(232, 114, 12, 0.35);
  color: var(--orange-hover);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
}

/* Responsive */
/* "and (orientation: portrait)" su questi tre breakpoint: un telefono ruotato in orizzontale ha
   spesso una larghezza (CSS px) superiore a questi breakpoint pensati per lo schermo stretto in
   verticale, ma non sempre — senza il vincolo di orientamento, un telefono più piccolo in
   landscape (es. ~700px) attiverebbe comunque l'impilamento mobile pur avendo lo spazio per il
   layout desktop a due colonne. Con orientation:portrait, il landscape usa sempre il layout da
   PC indipendentemente dalla larghezza esatta del dispositivo. */
@media (max-width: 860px) and (orientation: portrait) {
  /* .mstb-wrap ha già overflow-x:auto (scroll interno voluto per .mstb-table, troppo larga per
     stare in una sola schermata): ma alcuni browser mobile, nel decidere quanto allargare il
     viewport di layout, non tengono conto di quello scroll interno e allargano comunque l'intera
     pagina per "fare stare" quel contenuto — risultato: tutta la pagina scorre in orizzontale,
     non solo la tabella. overflow-x:hidden qui blocca lo scroll orizzontale a livello di pagina
     (senza toccare .mstb-wrap, che scorre comunque al suo interno normalmente). */
  html, body { overflow-x: hidden; }

  /* .mstb-overlay-dist/.mstb-overlay-court ("Statistiche di squadra") e .ricezioni-overlay-court
     ("Tracciamento accurato di ogni giocatore") sporgono di proposito oltre il bordo del
     riquadro (right/left negativi, vedi i commenti sopra) — un effetto voluto in desktop, dove
     il riquadro ha ampi margini attorno. Sotto 860px il riquadro arriva quasi al bordo dello
     schermo, quindi quella sporgenza esce dalla viewport e causa scroll orizzontale sulla pagina
     intera. Qui si azzera solo l'offset (le card restano identiche, semplicemente a filo invece
     che a cavallo del bordo). */
  .mstb-overlay-dist { right: 0; }
  .mstb-overlay-court { left: 0; }
  .ricezioni-overlay-court { right: 0; }

  /* la height fissa della riga desktop (sopra) non ha senso impilata in colonna: qui il video
     torna a calcolare la propria altezza dall'aspect-ratio in base alla larghezza (piena, quella
     della colonna) invece che il contrario. */
  .mv-preview { flex-direction: column; height: auto; }
  .mv-preview-video { flex: none; height: auto; max-width: none; }
  .mv-sidebar { height: 360px; flex: none; max-width: none; }
  /* minmax(0, 1fr) e non semplicemente "1fr": una colonna 1fr ha un minimo implicito "auto" (il
     max-content dei suoi elementi) — con .mstb-table che ha min-width:460px dentro, il grid
     intero si allargherebbe fino a quella larghezza invece di stare negli ~342px disponibili su
     mobile, causando lo scroll orizzontale di tutta la pagina invece che il solo scroll interno
     già previsto su .mstb-wrap (overflow-x:auto). minmax(0, 1fr) toglie quel minimo, lasciando
     la colonna libera di restringersi alla larghezza reale dello schermo. */
  .split, .split.reverse { grid-template-columns: minmax(0, 1fr); }
  .split.reverse .split-media,
  .split.reverse .split-text { order: initial; }
  .reveal-split,
  .reveal-split.reveal-reverse {
    grid-template-columns: minmax(0, 1fr);
  }
  /* il wrapper "sparisce" dal layout: titolo e paragrafo diventano elementi indipendenti,
     così il titolo può salire sopra il video mantenendo il paragrafo sotto */
  .reveal-split .split-text-col {
    display: contents;
  }
  .reveal-split .reveal-title {
    order: -1;
  }
  /* ordine esplicito (indipendente dalla posizione nel DOM): titolo, poi video/immagine, poi testo */
  .reveal-split .split-media {
    order: 0;
  }
  .reveal-split .split-text {
    order: 1;
  }
  /* "Statistiche di squadra": testo subito dopo il titolo, prima della tabella (vedi anche
     @media max-width:600px più sotto, stesso motivo) */
  section.stats-alt .split-text {
    order: 0;
  }
  section.stats-alt .split-media {
    order: 1;
  }
  /* comparsa uniforme anche da stretti: stessa direzione per entrambe le sezioni, anche quella speculare */
  .reveal-split .split-media,
  .reveal-split.reveal-reverse .split-media {
    transform: translateX(-60px);
  }
  .reveal-split.is-visible .split-media,
  .reveal-split.reveal-reverse.is-visible .split-media {
    transform: translateX(0);
  }
  /* il wrapper con display:contents non genera più una sua "scatola" da animare:
     l'effetto di comparsa va riapplicato ai due elementi rimasti indipendenti */
  .reveal-split .reveal-title,
  .reveal-split .split-text {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0.25s;
  }
  .reveal-split.is-visible .reveal-title,
  .reveal-split.is-visible .split-text {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Su telefono (sotto i 600px — sopra, su tablet/PC, questo blocco non si applica e nulla
   cambia) ogni player video della pagina diventa "a tutta larghezza": tocca i bordi sinistro
   e destro dello schermo invece di fermarsi al padding di 24px di .container, come invece
   resta per titoli/testo. Tecnica di "breakout": width:100vw fa uscire l'elemento dalla
   larghezza della sua colonna, margin-left/right con un calc() in vw (non in %) lo ricentrano
   esattamente sul viewport indipendentemente da quanto sia annidato/paddato il contenitore —
   il calcolo si autocompensa (50% è relativo alla larghezza della colonna che lo contiene,
   50vw è sempre metà schermo: la differenza tra i due è sempre e solo il padding da annullare,
   qualunque esso sia). Va sui contenitori ESTERNI (-video-media/.mv-preview-video, non i
   riquadri -video-crop più interni) perché le card sovrapposte al video (tabella "Battuta
   opposto", traiettorie "Ogni alzata", card altezza/velocità e legenda della stessa sezione,
   frecce "Direzioni ricezione", selettore velocità "Analisi dettagliata") sono posizionate in
   percentuale rispetto a questi stessi contenitori: allargandoli tutti insieme (invece del
   solo riquadro video interno) restano agganciate agli angoli del player come in origine,
   solo più grandi — non serve quindi alcun aggiustamento separato sulle card.
   L'altezza dei riquadri segue sempre dall'aspect-ratio già dichiarato sui -video-crop, quindi
   ora cresce (video piena larghezza invece che limitato al 40% dell'altezza schermo come nella
   versione precedente di questa regola): la regola su .screen-section subito sotto passa da
   altezza fissa a minima apposta per non tagliare il contenuto quando serve più spazio. */
@media (max-width: 600px) and (orientation: portrait) {
  .opposto-video-media,
  .spike-video-media,
  .attacchi-video-media,
  .ricezioni-video-media,
  .mv-preview-video {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .reveal-split .reveal-title {
    font-size: 1.25rem;
    margin: 0 0 8px;
  }

  .reveal-split .lead-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* .screen-section (sopra) ha altezza FISSA (100dvh meno la barra del menu): con i video ora
     a piena larghezza (quindi anche più alti, vedi sopra) il contenuto di alcune sezioni può
     non starci più. Qui l'altezza fissa diventa un minimo, così se serve più spazio la sezione
     cresce invece di tagliare video/testo. Lo scroll a container in js/main.js non ne risente:
     la posizione di ogni sezione viene ricalcolata al momento dello scatto
     (sectionTargetY → getBoundingClientRect), non è un valore fisso salvato in anticipo. */
  .screen-section {
    height: auto;
    min-height: calc(100vh - var(--header-h, 76px));
    min-height: calc(100dvh - var(--header-h, 76px));
  }

  /* Sezione "Rimozione dei tempi morti": il video ora a tutta larghezza (sopra) lascia poco
     spazio per la sidebar Punti/Azioni/Rotazioni accanto — qui resta quindi nascosta finché
     l'utente non tocca "qui" nel testo alternativo mobile (.mv-head-mobile-text, mostrato al
     posto di quello desktop). Il tocco (mvRevealBtn in js/main.js) aggiunge .mv-table-visible
     a .mv-container: titolo e testo spariscono e la tabella compare sotto al player, unica
     cosa rimasta nella sezione. */
  .mv-head-desktop-text {
    display: none;
  }
  .mv-head-mobile-text {
    display: block;
  }
  .mv-sidebar {
    display: none;
  }
  .mv-container.mv-table-visible .mv-head {
    display: none;
  }
  .mv-container.mv-table-visible .mv-sidebar {
    display: flex;
  }

  /* Schema comune a TUTTE le sezioni "titolo, testo, player video" (Visualizza velocemente ogni
     azione / Analisi dettagliata / Ogni alzata / Tracciamento accurato, più Statistiche di
     squadra che però ha un ultimo spazio diverso, vedi sotto) — QUATTRO spazi (bordo
     superiore→titolo, titolo→testo, testo→video, video→bordo inferiore), tutti uguali tranne
     titolo→testo che è 0,5 volte gli altri. Impossibile con justify-content:space-evenly (spazi
     sempre identici) — si usa quindi una grid a 7 righe: 4 righe "vuote" con altezza in frazioni
     (fr, proporzionali fra loro: 1/0.5/1/1) che fanno da spaziatori elastici, alternate alle 3
     righe di contenuto vero (altezza auto, assegnate esplicitamente sotto via grid-row). Una riga
     vuota in una grid occupa comunque la sua quota di spazio anche senza alcun elemento dentro,
     quindi non serve nessun div "spaziatore" fittizio nell'HTML. flex:1 (ereditato da .container,
     reso anch'esso flex:1 dentro .screen-section "alto quanto lo schermo") dà alla grid l'altezza
     totale su cui applicare le frazioni; row-gap:0 azzera il gap ereditato da .split (riga ~291,
     "gap: 56px"), che altrimenti si sommerebbe alle righe elastiche.
     :has() nel primo selettore prende solo i .container che contengono davvero un
     .split.reveal-split, per non toccare altre sezioni senza questo schema (es. "Pronto a
     provarlo...", niente video) né .mv-container ("Rimozione dei tempi morti": non ha la classe
     .split, struttura del tutto diversa con tab/sidebar — trattata a parte). */
  .screen-section > .container:has(> .split.reveal-split) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .split.reveal-split {
    display: grid;
    grid-template-rows: 1fr auto 0.5fr auto 1fr auto 1fr;
    row-gap: 0;
    flex: 1;
    min-height: 0;
  }

  /* Titolo e testo centrati (width:100% sul titolo perché il testo si centri sull'intera riga,
     non solo sulla larghezza del proprio contenuto) e con dimensione fluida (clamp: cresce con
     la larghezza dello schermo tra un minimo e un massimo) invece di un singolo valore fisso,
     così restano proporzionati sia su un telefono piccolo che su uno grande — stessa dimensione
     in tutte le sezioni. grid-row li piazza nelle 3 righe "auto" della grid sopra (2ª, 4ª, 6ª) —
     l'ordine di comparsa (titolo, testo, video) è quindi lo stesso indipendentemente dall'ordine
     nel DOM (alcune sezioni hanno il video PRIMA del testo nel markup, es. reveal-reverse). */
  .reveal-split .reveal-title {
    grid-row: 2;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: clamp(1.3rem, 7vw, 2rem);
  }
  .reveal-split .lead-text {
    text-align: center;
    font-size: clamp(1.05rem, 5vw, 1.5rem);
    line-height: 1.45;
  }
  .reveal-split .split-text {
    grid-row: 4;
    width: 100%;
  }
  .reveal-split .split-media {
    grid-row: 6;
  }

  /* Come per le card di "Statistiche di squadra" (bottom:0 più sotto): ".mstb-overlay-stats"
     (card statistiche di "Visualizza velocemente ogni azione") e ".ricezioni-overlay-court"
     (grafico di "Tracciamento accurato di ogni giocatore") sporgono di proposito oltre il
     riquadro video con lo stesso meccanismo (bottom/top negativi in percentuale) — qui vengono a
     filo per lo stesso motivo, così il margine video→bordo pagina risulta lo stesso ovunque.
     (".attacchi-stats-overlay"/".attacchi-traj-legend" e ".spike-speed-bar" usano invece una
     tecnica diversa — sempre a cavallo del bordo per scelta grafica permanente, non un residuo
     di animazione — e sono lasciate invariate.) */
  .mstb-overlay-stats {
    bottom: 0;
  }
  .ricezioni-overlay-court {
    top: 0;
  }

  /* "Statistiche di squadra" fa eccezione solo sull'ultimo spazio (tabella→bordo inferiore),
     1,5 volte gli altri invece di 1 — vince su ".split.reveal-split" sopra per specificità
     (section.stats-alt ha una classe in più), le altre righe restano invariate. */
  section.stats-alt .reveal-split {
    grid-template-rows: 1fr auto 0.5fr auto 1fr auto 1.5fr;
  }

  /* La tabella ha 13 colonne (Ruolo + 3 Battuta + 5 Ricezione + 4 Attacco), troppe per stare
     leggibili su uno schermo da telefono senza rimpicciolire il testo all'illeggibile. Invece di
     stringere tutto, si nasconde il gruppo "Ricezione" (il più largo, 5 colonne) via nth-child:
     colgroup/th/td hanno tutti la stessa struttura a 13 colonne su ogni riga, quindi le stesse
     posizioni (3ª del gruppo, 5ª-9ª della singola colonna) valgono ovunque. Nascondere anche i
     <col> (non solo le celle) è necessario con table-layout:fixed, altrimenti lo spazio della
     colonna resterebbe comunque riservato pur essendo le celle vuote. Il divisore verticale tra
     Battuta e Attacco resta automaticamente (la cella "Tot" di Attacco ha già la sua classe
     mstb-vsep, indipendente da quella di Ricezione che scompare). Restano quindi 8 colonne, che
     stanno larghe anche senza font minuscoli. */
  section.stats-alt .mstb-table colgroup col:nth-child(n+5):nth-child(-n+9) {
    display: none;
  }
  section.stats-alt .mstb-table thead tr:first-child th:nth-child(3) {
    display: none;
  }
  section.stats-alt .mstb-table thead tr:nth-child(2) th:nth-child(n+5):nth-child(-n+9),
  section.stats-alt .mstb-table tbody tr > :nth-child(n+5):nth-child(-n+9) {
    display: none;
  }

  /* .mstb-table ha min-width:460px (pensato per lo scroll orizzontale interno di .mstb-wrap su
     desktop/tablet) — su telefono lo si toglie: con solo 8 colonne visibili la tabella torna a
     stare larga quanto il contenitore (width:100%, niente più scroll) con un font solo
     leggermente ridotto rispetto al desktop, non minuscolo. */
  section.stats-alt .mstb-table {
    min-width: 0;
    font-size: 0.66rem;
  }
  section.stats-alt .mstb-th-group,
  section.stats-alt .mstb-th-sub {
    padding: 0.3rem 0.15rem;
    font-size: 0.56rem;
  }
  section.stats-alt .mstb-td-player,
  section.stats-alt .mstb-td {
    padding: 0.35rem 0.2rem;
  }

  /* .stats-table-media ha aspect-ratio:620/492 (riga ~409), tarato per il desktop: con il
     carattere ingrandito qui sopra la tabella non ci stava più per intero in quell'altezza e
     .mstb-wrap (overflow-y:auto) mostrava una barra di scorrimento verticale, tagliando l'ultima
     riga. Rapporto più alto qui = più altezza a parità di larghezza. */
  section.stats-alt .stats-table-media {
    aspect-ratio: 620 / 580;
  }

  /* .mstb-wrap ha un box-shadow leggero (riga ~430, "0 1px 5px") che disegna un contorno/ombra
     attorno al riquadro tabella — qui rimosso perché il contenitore non risulti visibile. */
  section.stats-alt .mstb-wrap {
    box-shadow: none;
  }

  /* Le due card "Distribuzione attacchi"/"Direzioni attacco" sporgono di proposito sotto il
     bordo del contenitore (bottom:-8%/-10%, riga ~480-494) — un effetto voluto in desktop. Su
     mobile lo spazio prima del bordo inferiore della pagina è calcolato su .split-media (il
     contenitore, non le card), quindi quella sporgenza faceva sembrare quel margine più corto
     degli altri tre: qui le card tornano a filo (bottom:0) così il loro bordo visivo coincide
     con quello del contenitore già usato per lo spazio equidistante. */
  section.stats-alt .mstb-overlay-dist,
  section.stats-alt .mstb-overlay-court {
    bottom: 0;
  }

  /* Hero iniziale su telefono — stessa logica a griglia di "Statistiche di squadra" sopra:
     4 elementi (scritta "Spike Net", titolo, testo, i 2 pulsanti) con 5 spazi, tutti uguali
     tranne titolo→testo che è 0,5 volte gli altri. .hero-media/.hero-content diventano
     display:contents (come .split-text-col altrove) così titolo/testo/pulsanti — normalmente
     annidati dentro di loro — risultano item diretti della grid sulla section, insieme a
     .hero-logo che invece è già suo fratello diretto nell'HTML. .hero-media perde così la
     propria box (quindi il suo background:#fff, riga ~221, non renderizza più): spostato sulla
     section stessa perché lo sfondo bianco dell'hero resti coperto ovunque. Selettori con
     "section.hero.hero-home"/"section.hero-home" (invece del semplice ".hero-logo"/".hero.hero-home
     p.lead" usato altrove) apposta più specifici delle regole equivalenti nel blocco
     @media max-width:720px più sotto: quel blocco viene DOPO nel file, quindi a parità di
     specificità vincerebbe lui nonostante sia il breakpoint più largo. */
  section.hero.hero-home {
    display: grid;
    grid-template-rows: 1fr auto 1fr auto 0.5fr auto 1fr auto 1fr;
    row-gap: 0;
    background: #fff;
    /* .hero-content forniva prima il padding orizzontale (24px) e il max-width che tenevano
       titolo/testo/pulsanti staccati dai bordi — persi diventando display:contents (sotto): si
       sposta qui, sulla grid, così vale allo stesso modo per tutti e 4 gli elementi impilati. */
    padding: 0 24px;
  }
  .hero-media,
  .hero-content {
    display: contents;
  }
  section.hero-home .hero-logo {
    grid-row: 2;
    padding: 0;
  }
  section.hero.hero-home h1 {
    grid-row: 4;
  }
  section.hero.hero-home p.lead {
    grid-row: 6;
    /* stessa dimensione del testo di "Statistiche di squadra" (clamp identico), come richiesto */
    font-size: clamp(1.05rem, 5vw, 1.5rem);
    line-height: 1.45;
  }
  section.hero-home .hero-actions {
    grid-row: 8;
  }
  /* Logo e scritta "Spike Net" ingranditi rispetto al clamp mobile generico (blocco 720px più
     sotto), e di nuovo leggermente rispetto al primo ingrandimento (su richiesta). */
  section.hero-home .hero-logo img {
    height: 64px;
  }
  section.hero-home .hero-logo span {
    font-size: clamp(2.3rem, 11vw, 4.4rem);
  }

  /* Comparsa in ingresso dell'hero: ogni elemento entra dalla propria direzione (logo da
     sinistra, scritta "Spike Net" da destra, titolo da sinistra, testo da destra, pulsanti dal
     basso). Stesso meccanismo JS di .reveal-split (setRevealVisible in js/main.js, esteso anche a
     .hero-reveal) — nome diverso da ".reveal-split" apposta per non ereditare lo stile desktop di
     quella classe (pensato per il pattern split-media/split-text-col, che l'hero non usa). */
  .hero-reveal .hero-logo img,
  .hero-reveal h1 {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .hero-reveal .hero-logo span,
  .hero-reveal p.lead {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0.15s;
  }
  .hero-reveal .hero-actions {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0.3s;
  }
  .hero-reveal.is-visible .hero-logo img,
  .hero-reveal.is-visible .hero-logo span,
  .hero-reveal.is-visible h1,
  .hero-reveal.is-visible p.lead,
  .hero-reveal.is-visible .hero-actions {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  nav.nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--grey-200);
    box-shadow: 0 8px 16px rgba(5, 39, 103, 0.08);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px;
    gap: 16px;
    display: none;
  }
  nav.nav-links.open { display: flex; }
  .menu-toggle { display: block; }
  .hero-content { padding: 56px 24px 60px; }

  /* Sotto i 720px la hero non deve mai "tagliare" logo/titolo/testo: l'altezza
     diventa un minimo (non più un valore fisso) così, se il contenuto ha bisogno
     di più spazio di quanto lo schermo ne offra, il container cresce invece di
     nascondere ciò che eccede; font e padding vengono inoltre ridotti e resi
     più proporzionali alla larghezza (vw) così si restringono col restringersi
     della pagina invece di fermarsi al minimo del clamp() usato da desktop. */
  .hero.hero-home {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .hero-logo {
    flex-wrap: wrap;
    padding: 32px 16px 20px;
    gap: 12px;
  }
  .hero-logo img {
    height: 56px;
  }
  .hero-logo span {
    font-size: clamp(1.6rem, 8vw, 3.6rem);
  }
  .hero.hero-home h1 {
    font-size: clamp(1.8rem, 8vw, 4.2rem);
  }
  .hero.hero-home p.lead {
    font-size: clamp(0.95rem, 4vw, 1.7rem);
  }
  .hero-logo,
  .hero.hero-home h1,
  .hero.hero-home p.lead {
    text-align: center;
  }
}