/* ==========================================================================
   EnjoyBuds — landing / deck investitori
   Tema chiaro, tipografia grottesca, nessun gradiente.
   Palette derivata dal marchio: rosso #D8322C, blu #2E6FA8.
   ========================================================================== */

:root {
  --ink:        #14181C;
  --ink-2:      #39424B;
  --muted:      #5C646E;   /* 5,59 di contrasto sul fondo alternativo */
  --faint:      #6C7279;   /* 4,53: il minimo per il testo piccolo */

  --line:       #E1E5E9;
  --line-soft:  #EDEFF2;

  --bg:         #FFFFFF;
  --bg-alt:     #F6F7F8;
  --shell:      #101317;

  --red:        #D8322C;
  --red-dark:   #B3261F;
  --red-tint:   #FCF2F1;
  --blue:       #2E6FA8;

  --ok:         #198246;   /* etichette di stato a 11px: serve 4,5 */
  --warn:       #956A13;   /* l'ocra chiaro stava a 2,27 */

  --maxw:       1160px;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */
.skipLink {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.skipLink:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   Barra di avanzamento
   -------------------------------------------------------------------------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 260; background: transparent; }
.progress__bar { height: 100%; width: 0; background: var(--red); }

/* --------------------------------------------------------------------------
   Navigazione
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 5vw, 3.5rem);
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease, box-shadow .25s ease;
}
.nav--scrolled {
  padding-top: .75rem; padding-bottom: .75rem;
  box-shadow: 0 1px 12px rgba(16,19,23,.06);
}

.nav__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.nav__brand img { width: 30px; height: 30px; }
.nav__brand b {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
}

.nav__links {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__links a {
  position: relative; display: inline-block; padding: .25rem 0;
  font-size: .8125rem; font-weight: 500; letter-spacing: .01em;
  color: var(--muted); text-decoration: none;
  transition: color .2s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 1.5px; background: var(--red); transition: right .25s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after, .nav__links a:hover::after { right: 0; }

.nav__cta {
  display: inline-flex; align-items: center;
  padding: .55rem 1.05rem; border-radius: 3px;
  background: var(--red); color: #fff !important;
  font-size: .8125rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}
.nav__cta:hover { background: var(--red-dark); }
.nav__cta::after { display: none; }

.nav__toggle {
  display: none; width: 38px; height: 38px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); cursor: pointer;
}
.nav__toggle svg { width: 16px; height: 16px; }
.nav__scrim { display: none; }
li.nav__mobileOnly { display: none; }
/* Le voci che portano dentro i contenuti protetti. Senza il codice quelle
   slide non esistono in pagina e il collegamento non porterebbe a niente:
   compaiono quando gate.js mette is-unlocked sul body. */
li.nav__riservato, li.footer__riservato { display: none; }
body.is-unlocked li.nav__riservato,
body.is-unlocked li.footer__riservato { display: block; }
/* Il pulsante di uscita ha l'aspetto dei link accanto. */
.footer__logout { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.footer__logout:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .nav__toggle { display: flex; z-index: 252; }
  .nav > .nav__cta { display: none; }
  li.nav__mobileOnly { display: block; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.5rem; padding: 2rem clamp(1.5rem, 6vw, 2.5rem);
    background: #fff; border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
    z-index: 251;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { font-size: 1.0625rem; }
  .nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 249;
    background: rgba(16,19,23,.35);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .nav__scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* --------------------------------------------------------------------------
   Slide
   -------------------------------------------------------------------------- */
.slide {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6rem, 10vh, 8.5rem) clamp(1.5rem, 6vw, 5.5rem);
  scroll-margin-top: 0;
}
.slide--alt { background: var(--bg-alt); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--wide { grid-template-columns: 1.15fr .85fr; }
.split--mapLead { grid-template-columns: .78fr 1.22fr; }
.split--text { align-items: start; }
@media (max-width: 900px) { .split, .split--wide, .split--mapLead { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

.h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 650; letter-spacing: -.03em; line-height: 1.05;
  max-width: 20ch;
}
.h2--wide { max-width: 26ch; }

.lead {
  margin: 0 0 1.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55; color: var(--ink-2); max-width: 58ch;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

h3 { margin: 0 0 .45rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }
h4 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

.muted { color: var(--muted); }
.small { font-size: .9375rem; }

.pull {
  margin: 2.25rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--red);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500; letter-spacing: -.018em; line-height: 1.35;
  max-width: 34ch; color: var(--ink);
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btnRow { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.5rem; border-radius: 3px; border: 1px solid transparent;
  font-family: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { width: 13px; height: 13px; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--onDark:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* --------------------------------------------------------------------------
   Slide fotografiche (hero e capitoli)
   -------------------------------------------------------------------------- */
.slide--photo { color: #fff; justify-content: flex-end; overflow: hidden; }
.slide--photo .photo {
  position: absolute; inset: 0; z-index: 0;
}
.slide--photo .photo img { width: 100%; height: 100%; object-fit: cover; }
.slide--photo .photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(13,16,20,.56);
}
.slide--photo .wrap { position: relative; z-index: 1; }
.slide--photo .lead { color: rgba(255,255,255,.86); }

.hero { justify-content: flex-end; }
.hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(3.25rem, 9.5vw, 7rem);
  font-weight: 700; letter-spacing: -.045em; line-height: .95;
}
.hero__title em { font-style: normal; color: #fff; }

.scrollcue {
  position: absolute; left: clamp(1.5rem, 6vw, 5.5rem); bottom: 2rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.scrollcue svg { width: 12px; height: 12px; animation: nudge 2s ease-in-out infinite; }
.scrollcue:hover { color: #fff; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* --------------------------------------------------------------------------
   Griglie e schede
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.cell {
  background: var(--bg); padding: 1.75rem 1.6rem;
  transition: background .2s ease;
}
.slide--alt .cell { background: var(--bg-alt); }
.cell:hover { background: var(--bg); }
.slide--alt .cell:hover { background: #fff; }
.cell p { color: var(--muted); font-size: .9375rem; margin: 0; }
.cell__n {
  display: block; margin-bottom: .9rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  color: var(--red);
}

/* Elenco a punti tipografici */
.list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.25rem; max-width: 62ch; }
.list--tight { gap: 1.1rem; }
.item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.item__mark {
  width: 22px; height: 22px; flex: none; margin-top: .12rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--mono); font-size: .6875rem; color: var(--muted);
}
.item__mark svg { width: 10px; height: 10px; fill: var(--red); }
.item p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* Griglia di spunte (feature dense) */
.checks {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 3rem; margin-top: 2.25rem;
}
@media (max-width: 860px) { .checks { grid-template-columns: 1fr; } }

/* Nota in evidenza */
.note {
  margin-top: 2.25rem; padding: 1.15rem 1.35rem;
  border: 1px solid var(--line); border-left: 2px solid var(--red);
  background: var(--bg); font-size: .9375rem; max-width: 62ch;
}
.slide--alt .note { background: #fff; }
.note b { font-weight: 600; }

/* Pillole tecniche */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.pill {
  padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 3px;
  font-size: .8125rem; color: var(--ink-2); background: var(--bg);
}
.slide--alt .pill { background: #fff; }

/* --------------------------------------------------------------------------
   Steps numerati
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: flex; flex-direction: column; }
.steps li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .n { font-family: var(--mono); font-size: .8125rem; color: var(--red); padding-top: .15rem; }
.steps p { margin: 0; font-size: .9375rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Diagramma di rete (SVG inline)
   -------------------------------------------------------------------------- */
.diagram { width: 100%; }
.diagram svg { width: 100%; height: auto; display: block; }
.dg-line { stroke: var(--line); stroke-width: 1.5; fill: none; }
.dg-flow {
  stroke: var(--blue); stroke-width: 1.5; fill: none;
  stroke-dasharray: 4 7; animation: flow 1.6s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -22; } }
.dg-node { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.dg-hub  { fill: var(--red); stroke: none; }
.dg-box  { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.dg-label { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); letter-spacing: -.01em; }
.dg-sub  { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Modalità operative
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .9rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.status--live { color: var(--ok); }
.status--live::before { background: var(--ok); }
.status--dev  { color: var(--warn); }
.status--dev::before { background: var(--warn); }

/* --------------------------------------------------------------------------
   Cornice browser / screenshot
   -------------------------------------------------------------------------- */
.shot { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.shot__bar {
  display: flex; align-items: center; gap: 6px;
  padding: .55rem .8rem; background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: #D4D8DD; }
.shot__url {
  margin-left: .5rem; font-family: var(--mono); font-size: .6875rem;
  color: var(--muted); letter-spacing: .02em;
}
/* height:auto e' necessario: senza, l'attributo HTML height="…" (messo per
   riservare lo spazio prima del caricamento) resta fisso in pixel anche
   quando width:100% restringe l'immagine, deformandola. Con height:auto
   il rapporto viene ricalcolato dagli attributi width/height dell'img. */
.shot__img { display: block; width: 100%; height: auto; }

/* Placeholder immagine — le foto definitive arrivano più avanti */

.figure { margin: 0; }
/* max-height: senza, una foto in verticale (es. il nodo fotografato in piedi)
   renderebbe alla sua altezza intrinseca e potrebbe da sola superare lo
   spazio di una slide. object-fit la ritaglia invece di stirare il layout. */
.figure img { width: 100%; height: auto; max-height: 58vh; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.figure figcaption {
  margin-top: .7rem; font-size: .8125rem; color: var(--muted);
  display: flex; align-items: center; gap: .5rem;
}
.figure figcaption::before { content: ""; width: 14px; height: 1px; background: var(--line); flex: none; }

/* Due foto in una: la verticale (contesto) a sinistra, il primo piano in un
   riquadro che la sormonta in basso a destra. L'altezza la decide la foto
   verticale, quindi il limite di 58vh vale per tutta la composizione. */
.figure--duo .duo { position: relative; padding-bottom: 1.5rem; }
.figure--duo .duo__main {
  width: auto; max-width: 62%; height: min(58vh, 620px); aspect-ratio: 900 / 1286;
}
.figure--duo .duo__inset {
  position: absolute; right: 0; bottom: 0; width: 42%; max-height: none;
  aspect-ratio: 700 / 759; border: 5px solid var(--bg);
  box-shadow: 0 10px 30px rgba(20, 24, 28, .18);
}

/* --------------------------------------------------------------------------
   Divisore interno a una slide che accorpa due argomenti
   -------------------------------------------------------------------------- */
.subhead {
  margin: 2.75rem 0 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
  font-size: 1.375rem; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
}
/* variante per colonna: e' gia' la prima cosa nella colonna, niente filetto sopra */

/* --------------------------------------------------------------------------
   Evoluzione hardware: coppie di foto per generazione
   -------------------------------------------------------------------------- */
.devGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; margin-top: 2.25rem; }
.devGrid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem 1rem; }
@media (max-width: 900px) { .devGrid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .devGrid, .devGrid--4 { grid-template-columns: 1fr; } }
.devCard { margin: 0; }
/* height:auto e' necessario: le foto hanno width e height negli attributi (per
   riservare lo spazio mentre caricano) e senza di questo l'altezza dell'attributo
   vincerebbe sull'aspect-ratio, mandando la slide a 2400px. */
.devCard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; display: block; }
.devCard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.devCard__pair img { aspect-ratio: 3 / 4; }
.devCard figcaption { margin-top: .8rem; display: flex; flex-direction: column; gap: .15rem; }
.devCard figcaption strong { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.devCard figcaption span { font-size: .8125rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Tabella comparativa
   -------------------------------------------------------------------------- */
.tableWrap { margin-top: 2.25rem; overflow-x: auto; border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; min-width: 680px; }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.cmp thead th {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cmp thead th.hl { color: var(--red); }
.cmp td.hl { background: var(--red-tint); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { color: var(--ink-2); min-width: 240px; }
.cmp .yes { color: var(--ok); font-weight: 600; }
.cmp .no { color: var(--faint); }
.cmp .partial { color: var(--muted); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Roadmap
   -------------------------------------------------------------------------- */
.timeline { margin-top: 2.5rem; }
.timeline__track { position: relative; height: 1px; background: var(--line); margin: 0 0 0 0; }
.timeline__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.timeline__nodes { display: flex; justify-content: space-between; margin-top: -5px; }
.tnode { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; width: 19%; }
.tnode__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.tnode.is-done .tnode__dot { background: var(--red); border-color: var(--red); }
.tnode strong { font-size: .875rem; font-weight: 600; color: var(--muted); }
.tnode.is-done strong { color: var(--ink); }
.tnode small { font-size: .75rem; color: var(--faint); }
@media (max-width: 700px) { .tnode small { display: none; } }

.dashlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dashlist li {
  padding: .8rem 0 .8rem 1.4rem; position: relative;
  border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2);
}
.dashlist li:last-child { border-bottom: 1px solid var(--line); }
.dashlist li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 8px; height: 1px; background: var(--red); }

/* --------------------------------------------------------------------------
   Distribuzione
   -------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.25rem; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }
.flow__step { background: #fff; padding: 1.6rem 1.5rem; position: relative; }
.slide--alt .flow__step { background: #fff; }
.flow__step .cell__n { color: var(--red); }
.flow__step p { margin: 0; font-size: .9375rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Statistiche
   -------------------------------------------------------------------------- */
.stats { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 2.5rem; }
.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat b {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 650;
  letter-spacing: -.035em; line-height: 1; color: var(--ink);
}
.stat span { font-size: .8125rem; color: var(--muted); max-width: 22ch; }

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.contact { text-align: left; }
.contactGrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem;
}
@media (max-width: 860px) { .contactGrid { grid-template-columns: 1fr; } }
.contactGrid > div { background: #fff; padding: 1.5rem; }
.contactGrid strong { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: .3rem; }
.contactGrid a, .contactGrid span { font-size: .875rem; color: var(--muted); text-decoration: none; }
.contactGrid a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   Claim finale
   -------------------------------------------------------------------------- */
.claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: 2rem; }
.claim span {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1;
}
.claim .a { color: var(--red); }
.claim .b { color: var(--blue); }
.claim .amp { font-size: clamp(1.1rem, 2.2vw, 1.75rem); font-weight: 400; color: var(--muted); }

/* Chiusura in coda ai contatti: prima era una slide a se', ma con un titolo,
   una riga e il claim non giustificava una schermata intera. */
.closing {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.closing .claim { margin: 0; }

/* Il simbolo sta nello spazio che il titolo lascia libero a destra, invece di
   occupare una riga per conto suo. */
.contactHead { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.contactHead > div { min-width: 0; }
.contactHead__mark {
  width: clamp(96px, 12vw, 168px); height: auto;
  margin-left: auto; flex: none;
}
@media (max-width: 860px) {
  .contactHead { display: block; }
  .contactHead__mark { width: 84px; margin: 1.25rem 0 0; }
}
/* --------------------------------------------------------------------------
   Contenuti riservati: fascia segnaposto + form di sblocco
   -------------------------------------------------------------------------- */
.lockSlot { padding: 0 clamp(1.5rem, 6vw, 5.5rem); }
.lockStrip {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 1.6rem 1.75rem;
  border: 1px dashed var(--line); border-left: 2px solid var(--red);
  background: var(--bg-alt);
}
.lockStrip__body { display: flex; flex-direction: column; gap: .35rem; }
.lockStrip__tag {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.lockStrip strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }
.lockStrip__list {
  list-style: none; margin: .15rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
  font-size: .875rem; color: var(--muted);
}
.lockStrip__list li { position: relative; padding-left: .9rem; }
.lockStrip__list li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--faint);
}
.lockStrip .btn { flex: none; background: #fff; }

.gate {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem; background: #fff; border: 1px solid var(--line);
}
.gate__label {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.gate__input {
  font-family: var(--mono); font-size: 1rem; letter-spacing: .1em;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg-alt); color: var(--ink); width: 100%;
}
.gate__input:focus { outline: 2px solid var(--red); outline-offset: 1px; background: #fff; }
.gate .btn { justify-content: center; }
.gate__msg { margin: 0; font-size: .875rem; color: var(--muted); min-height: 1.3em; }
.gate__msg--err { color: var(--red); }
.inlineLink { color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Roadmap economica (sezione riservata)
   -------------------------------------------------------------------------- */
.phases {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 2.25rem;
}
@media (max-width: 860px) { .phases { grid-template-columns: 1fr; } }
.phase { background: #fff; padding: 1.6rem 1.5rem; }
.phase h4 { margin: .7rem 0 .2rem; font-size: 1.0625rem; }
.phase p { margin: 0; font-size: .9375rem; color: var(--muted); }
.phase__econ {
  font-size: .8125rem !important; font-weight: 600; letter-spacing: .01em;
  color: var(--red) !important; margin-bottom: .6rem !important;
}
.phase__tag {
  display: inline-block;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.phase__tag--done { color: var(--ok); }
.phase__tag--now { color: var(--red); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 2rem clamp(1.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.footer__brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; letter-spacing: -.02em; }
.footer__brand img { width: 24px; height: 24px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer__links a { font-size: .8125rem; color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { width: 100%; font-size: .75rem; color: var(--faint); line-height: 1.7; }
.footer__legal a { color: var(--muted); }

/* --------------------------------------------------------------------------
   Torna su
   -------------------------------------------------------------------------- */
.toTop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 200;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, border-color .2s ease;
}
.toTop.is-visible { opacity: 1; pointer-events: auto; }
.toTop:hover { border-color: var(--ink); }
.toTop svg { width: 13px; height: 13px; transform: rotate(180deg); }
/* --------------------------------------------------------------------------
   Copertura del territorio — mappa multi-zona

   Le zone stanno tutte nella stessa cella di griglia: il contenitore prende
   l'altezza della piu' alta e la dissolvenza non fa saltare il layout. Quella
   inattiva resta nel flusso (serve a dimensionare) ma sparisce con visibility,
   che la toglie anche dallo screen reader e dal giro dei tab: display:none
   la escluderebbe dal calcolo dell'altezza e il riquadro ballerebbe.
   -------------------------------------------------------------------------- */
.zones { display: grid; margin-top: 1.5rem; }
.zone {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.zone.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .5s ease, visibility 0s;
}
@media (max-width: 900px) { .zone { grid-template-columns: 1fr; } }

.zone__map { display: flex; justify-content: center; min-width: 0; }
.zone__panel { min-width: 0; }

/* Altezza guidata + aspect-ratio: la larghezza si ricava dall'altezza, cosi'
   la mappa non fa mai sforare la slide oltre uno schermo (vedi LEGGIMI).
   Quando la colonna e' piu' stretta, max-width taglia e l'altezza segue. */
.zmap { margin: 0; display: flex; flex-direction: column; align-items: center; width: 100%; }
.zmap__frame {
  position: relative;
  height: min(47vh, 470px);
  aspect-ratio: 1245 / 1030;
  max-width: 100%;
  background: #eef0ea; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 900px) { .zmap__frame { height: min(36vh, 320px); } }

/* Lo sfondo di rilievo: senza, la macchia galleggiava sul bianco e si capiva
   quanto territorio ma non quale. E' un'immagine e non un altro strato SVG
   perche' l'ombreggiatura e' un dato continuo, non un contorno. Sta nello
   stesso riquadro di pixel della mappa, quindi non puo' disallinearsi.
   Copernicus DEM (ESA); l'attribuzione e' nella didascalia. */
.zmap__rilievo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
}
.zmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Fiumi e laghi: sul rilievo si vedono le forme, non dove sta il fondovalle,
   che e' poi dove stanno i paesi. Vanno sotto a tutto il resto. */
.zmap__fiume {
  fill: none; stroke: #6d9ec4; stroke-opacity: .75;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.zmap__lago { fill: #a9c8e0; fill-opacity: .85; stroke: #6d9ec4; stroke-width: 1.2; }
/* i confini fanno da sfondo: senza, la macchia galleggia nel vuoto e non si
   capisce quanto territorio copra. Vanno sotto alla copertura, che essendo
   semitrasparente li lascia leggere anche dove passa sopra. */
.zmap__bounds {
  fill: none; stroke: #5d6570; stroke-opacity: .34;
  stroke-width: 2.5; stroke-linejoin: round;
  /* un filo di alone chiaro: sul rilievo un tratto grigio sottile si perde */
  paint-order: stroke; 
}
/* i comuni serviti si riconoscono da una velatura, non da un anello marcato:
   un contorno spesso ruberebbe la scena alla macchia di copertura */
.zmap__served {
  fill: #fff; fill-opacity: .22;
  stroke: #3b424b; stroke-opacity: .75;
  stroke-width: 3; stroke-linejoin: round;
}
.zmap__cov {
  fill: var(--red); fill-opacity: .26;
  stroke: var(--red); stroke-opacity: .72; stroke-width: 2.5; stroke-linejoin: round;
}
.zmap__dot { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.zmap__ping { fill: none; stroke: var(--blue); stroke-width: 4; opacity: 0; }

.zmap__pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.zmap__pin {
  position: absolute; left: var(--x); top: var(--y);
  transform: translateY(-50%);
  display: flex; align-items: center; gap: .3rem;
  font-size: clamp(.625rem, .95vw, .75rem); line-height: 1.1; font-weight: 500;
  white-space: nowrap; color: var(--muted);
  /* alone bianco: sopra la macchia di copertura il testo perde contrasto */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
.zmap__pin::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  margin-left: -3px; background: var(--faint); box-shadow: 0 0 0 2px #fff;
}
.zmap__pin.is-served { color: var(--ink); font-weight: 600; }
.zmap__pin.is-served::before { background: var(--ink); }
/* etichetta a sinistra del punto: il riquadro si sposta di tutta la sua
   larghezza, cosi' il pallino resta esattamente sulla coordinata */
.zmap__pin--l { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.zmap__pin--l::before { margin-left: 0; margin-right: -3px; }
/* il punto dei siti lo disegna gia' l'SVG: qui il ::before fa solo da distanza */
.zmap__pin--site { color: var(--blue); font-weight: 600; }
.zmap__pin--site::before { width: 11px; background: none; box-shadow: none; margin: 0; }

/* la larghezza in percentuale della barra si misura sul riquadro, non sul
   testo: per questo il paragrafo e' largo quanto la mappa e senza padding */
.zmap__scale {
  position: absolute; left: 0; bottom: .55rem; width: 100%; margin: 0;
  display: flex; align-items: center; gap: .45rem;
  font-size: .6875rem; color: var(--muted);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.zmap__scale span {
  flex: none; height: 5px; margin-left: .75rem;
  border: 1px solid var(--muted); border-top: 0;
}

.zmap figcaption {
  margin-top: .7rem; font-size: .75rem; color: var(--muted);
  display: flex; align-items: center; gap: .5rem; max-width: 100%;
  align-self: flex-start;
}
.zmap figcaption::before { content: ""; width: 14px; height: 1px; background: var(--line); flex: none; }

.zone__name { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; }
.zone__name span {
  display: block; margin-top: .15rem;
  font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted);
}
.zone__state {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: .75rem 0 0; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 3px; background: #fff;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.zone__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.zone__state.is-live { color: var(--red); border-color: rgba(216, 50, 44, .35); }
.zone__state.is-live::before { background: var(--red); }

.zone__stats { margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.zone__stats > div { display: flex; flex-direction: column; gap: .2rem; }
.zone__stats dt {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 650;
  letter-spacing: -.035em; line-height: 1; color: var(--ink);
}
.zone__stats dt sup { font-size: .55em; vertical-align: super; }
.zone__stats dd { margin: 0; font-size: .8125rem; color: var(--muted); max-width: 36ch; }

.zone__towns { margin: 1.1rem 0 0; font-size: .875rem; color: var(--faint); }
.zone__towns b { color: var(--ink); font-weight: 600; }
.zone__note { margin: .7rem 0 0; font-size: .8125rem; color: var(--muted); max-width: 54ch; }

.zoneTabs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.05rem; }
.zoneTab {
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 3px;
  background: #fff; font: inherit; font-size: .8125rem; color: var(--muted);
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.zoneTab:hover { color: var(--ink); }
.zoneTab.is-on { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.zoneTabs__hint { margin-left: .4rem; font-size: .75rem; color: var(--faint); }
.zoneTabs.is-stopped .zoneTabs__hint { visibility: hidden; }

/* Animazioni: partono quando la slide entra in vista (.zones.is-in) e
   ripartono a ogni cambio di zona, perche' e' .is-on a portarle. */
@keyframes zmapReveal { from { r: 0; } to { r: 1700; } }
@keyframes zmapPing {
  0%   { r: 9;  opacity: .5; }
  70%  { opacity: 0; }
  100% { r: 62; opacity: 0; }
}
@keyframes zmapPin { from { opacity: 0; } to { opacity: 1; } }

.zones.is-in .zone.is-on .zmap__reveal {
  animation: zmapReveal 1.15s cubic-bezier(.22, .75, .3, 1) both;
  animation-delay: calc(var(--d, 0) * 140ms);
}
.zones.is-in .zone.is-on .zmap__ping {
  animation: zmapPing 3.4s ease-out infinite;
  animation-delay: calc(1.2s + var(--d, 0) * 700ms);
}
.zones.is-in .zone.is-on .zmap__pin {
  animation: zmapPin .4s ease-out both;
  animation-delay: calc(.7s + var(--i, 0) * 70ms);
}

/* --------------------------------------------------------------------------
   Scena dei settori d'uso
   Diorama a tutta slide con punti cliccabili.
   -------------------------------------------------------------------------- */
.scene {
  height: 100svh; padding: 0; overflow: hidden;
  /* stesso colore del cielo del render: la fascia che avanza in alto non si
     legge come una banda, sembra cielo */
  background: #DCE9F2;
  display: block;
}

/* Il render e' un diorama su fondo pieno, non un paesaggio a tutto campo:
   ritagliarlo ne taglierebbe dei pezzi. Il riquadro sta quindi INTERO dentro
   la slide, ancorato in basso, e lo spazio che avanza va tutto in alto.
   Punti e immagine stanno nello stesso riquadro, quindi non possono
   disallinearsi a nessuna proporzione di schermo. */
.scene__stage {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.scene__box {
  position: relative; flex: none;
  width: 100%; max-width: calc(100svh * 2200 / 1228);
  aspect-ratio: 2200 / 1228;
  /* la barra fissa in cima copriva la punta dell'antenna: il riquadro scende
     di quel tanto, e a essere tagliato e' il mare vuoto in fondo */
  margin-bottom: -4rem;
}

.scene__img { width: 100%; height: 100%; object-fit: fill; display: block; }
.scene__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
  opacity: 0; transition: opacity 1s ease;
}
/* compare solo quando ha davvero dei fotogrammi da mostrare: cosi' non
   lampeggia un rettangolo nero prima di partire */
.scene__video.is-pronto { opacity: 1; }
.scene__net { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene__link {
  fill: none; stroke: var(--blue); stroke-opacity: .5;
  stroke-width: 2; stroke-dasharray: 10 12; stroke-linecap: round;
}
.scene__mast { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.scene__wave { fill: none; stroke: var(--blue); stroke-width: 3; opacity: 0; }

/* --- punti ---------------------------------------------------------------- */
.scene__spots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* Va sulla coordinata il PALLINO, non il centro della pillola: altrimenti
   ogni punto risulta spostato di meta' etichetta, e quelli vicini al bordo
   escono dall'inquadratura. --ancora e' la distanza fra il bordo della
   pillola e il centro del pallino. */
.scene__spots > li {
  --ancora: 17px;
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(calc(var(--ancora) * -1), -50%);
  pointer-events: auto;
}
.scene__spots > li.spot--sx {
  transform: translate(calc(-100% + var(--ancora)), -50%);
}
.scene__spots > li.is-on { z-index: 6; }

.spot {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .7rem .3rem .35rem;
  border: 1px solid rgba(20, 24, 28, .12); border-radius: 999px;
  /* semitrasparente: sotto si intuisce il territorio. Piu' giu' di cosi' il
     testo perde leggibilita' sugli alberi e sulle rocce. */
  background: rgba(255, 255, 255, .78);
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 24, 28, .12);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.spot--sx .spot { flex-direction: row-reverse; padding: .3rem .35rem .3rem .7rem; }
.spot__dot {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--red); position: relative;
}
.spot__dot::before,
.spot__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff;
  transform: translate(-50%, -50%);
}
.spot__dot::before { width: 10px; height: 2px; }
.spot__dot::after { width: 2px; height: 10px; }
.spot:hover { background: rgba(255, 255, 255, .95); box-shadow: 0 4px 16px rgba(20, 24, 28, .18); }
.spot.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.spot.is-on .spot__dot { background: #fff; }
.spot.is-on .spot__dot::before,
.spot.is-on .spot__dot::after { background: var(--ink); }

/* --- scheda del punto ----------------------------------------------------- */
/* Sta dentro il punto: si apre accanto a dove si e' cliccato. Le classi
   spot--sx / spot--su la ribaltano dove il bordo dell'inquadratura e' vicino. */
.spotCard {
  position: absolute; top: calc(100% + .5rem); left: 0;
  width: min(21rem, 40vw);
  background: #fff; border: 1px solid var(--line);
  padding: .9rem 1.1rem;
  box-shadow: 0 8px 28px rgba(20, 24, 28, .14);
}
.spot--sx .spotCard { left: auto; right: 0; }
.spot--su .spotCard { top: auto; bottom: calc(100% + .5rem); }
.spotCard h3 { margin: 0 0 .3rem; font-size: 1rem; }
.spotCard p { margin: 0; font-size: .875rem; color: var(--muted); }

/* Sotto una certa larghezza le etichette si accavallerebbero: restano i soli
   pallini, e il nome lo legge la scheda. */
@media (max-width: 1100px) {
  .spot__nome {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .spot, .spot--sx .spot { padding: .3rem; }
  .spotCard { width: min(18rem, 60vw); }
}

/* --- testata -------------------------------------------------------------- */
.scene__head { position: absolute; z-index: 4; }
.scene__head {
  top: clamp(5.5rem, 11vh, 8rem); left: clamp(1.5rem, 6vw, 5.5rem);
  max-width: min(30rem, 42vw);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line); border-left: 2px solid var(--red);
  padding: 1.1rem 1.4rem;
}
.scene__head .h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.25rem); max-width: 16ch; }
.scene__hint {
  margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--muted); max-width: 34ch;
}
.scene__hint b { color: var(--ink); font-weight: 600; }

/* Sotto gli 860px il diorama diventa minuscolo se resta a tutta slide:
   la scena si mostra intera in alto e i blocchi si impilano sotto. */
@media (max-width: 860px) {
  .scene {
    height: auto; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    gap: 1.25rem; padding: 6rem clamp(1.25rem, 5vw, 2rem) 3rem;
  }
  .scene__stage { position: static; display: block; }
  .scene__box { max-width: none; width: 100%; margin-bottom: 0; }
  .scene__head { position: static; }
  .scene__head { max-width: none; }
  .spotCard { width: min(16rem, 66vw); }
}

/* --- animazioni ----------------------------------------------------------- */
@keyframes sceneFlusso { to { stroke-dashoffset: -44; } }
@keyframes sceneOnda {
  0%   { r: 10; opacity: .5; }
  70%  { opacity: 0; }
  100% { r: 74; opacity: 0; }
}
@keyframes sceneSpot { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes sceneScheda { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }

.scene.is-in .scene__link { animation: sceneFlusso 2.4s linear infinite; }
.scene.is-in .scene__wave {
  animation: sceneOnda 3.6s ease-out infinite;
  animation-delay: calc(var(--d, 0) * 900ms);
}
.scene.is-in .scene__spots > li > .spot {
  animation: sceneSpot .4s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: calc(.4s + var(--i, 0) * 90ms);
}
.spotCard { animation: sceneScheda .22s ease-out both; }

/* con le animazioni ridotte il video non parte e resta l'immagine ferma:
   lo dice anche il blocco prefers-reduced-motion in fondo al foglio */

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */
.rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .dg-flow, .scrollcue svg { animation: none; }
  .timeline__fill { transition: none; }
  .zone { transition: none; }
  .zones.is-in .zone.is-on .zmap__reveal,
  .zones.is-in .zone.is-on .zmap__ping,
  .zones.is-in .zone.is-on .zmap__pin { animation: none; }
  .zmap__ping { opacity: 0; }
  .spotCard { animation: none; }
  .scene.is-in .scene__link,
  .scene.is-in .scene__wave,
  .scene.is-in .scene__spots > li > .spot { animation: none; }
  .scene__wave { opacity: 0; }
  .scene__video { display: none; }
}