/* ==========================================================================
   HOME V2 (piano 004) — film + sezioni calme.
   Di base si vede il livello light (hero HTML sul poster, scene SVG già
   approvate): è ciò che vede chi non ha JavaScript. Il film WebGL compare
   solo con data-tier="full", impostato prima del primo disegno.
   Le regole del film sono copiate da proto-cinematico.css (che resta
   intatto come riferimento d'oro): cambiano solo le altezze della traccia.
   ========================================================================== */

/* il vecchio desktop.css limita <main> a 1120px con padding: la home v2 è a
   tutta larghezza (lo stage del film deve coprire la finestra) */
main.hv2{ max-width: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   1. LIVELLI
   -------------------------------------------------------------------------- */
.cine-track{ display: none; }
/* stesso ritmo di 003: 500svh di scroll per unità (mobile 320svh). Il master
   dura 2,00 (apertura 0,25 + 003 1,75) → 100 + 500 × 2 = 1100svh (mobile 740svh) */
:root[data-tier="full"] .cine-track{ display: block; height: 1100svh; position: relative; }
:root[data-tier="full"] .cine-lite{ display: none; }

/* --------------------------------------------------------------------------
   2. IL FILM (copia delle regole di 003)
   -------------------------------------------------------------------------- */
.cine-stage{
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--n-bg);
}
.cine-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* la canvas compare con una dissolvenza di 600 ms quando è pronta (main.js):
   è il piatto al buio che prende forma, non uno stacco */
.hv2-film .cine-canvas{ opacity: 0; }

/* la lampada: vignettatura già disegnata, si muove solo l'opacità */
.cine-lamp{
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 42% 50%, transparent 40%, rgba(0,0,0,.78) 100%);
}

.cine-labels span{
  position: absolute; left: 0; top: 0;
  transform: translate3d(-9999px, 0, 0);
  font-size: 13px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--n-text);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

.cine-copy{
  position: absolute;
  right: clamp(22px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  width: min(380px, 34vw);
  display: grid;
}
.cine-copy > *{ grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; }
.cine-cap{ font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.cine-data{ display: grid; gap: .5rem; position: relative; }
.cine-data__label{ font-size: .84rem; font-weight: 500; color: var(--n-text-2); }
.cine-data__figure{
  margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.02; font-variant-numeric: tabular-nums;
}
.cine-data__figure .x{ font-size: .52em; font-weight: 400; color: var(--n-text-3); margin: 0 .12em; vertical-align: .12em; }
.cine-data__figure .u{ font-size: .5em; color: var(--n-text-2); margin-left: .12em; }

/* Nedra Web: etichette proiettate dalla scena */
.cine-web > *{
  position: absolute; left: 0; top: 0;
  transform: translate3d(-9999px, 0, 0);
  opacity: 0; white-space: nowrap; pointer-events: none;
}
.cine-annot{
  font-size: 13px; font-weight: 600; letter-spacing: -.02em;
  color: var(--n-text);
}
.cine-url{
  transform-origin: 0 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em;
  color: var(--n-text-2);
}
.cine-url__lock{ width: 10px; height: 12px; fill: none; stroke: #2997ff; stroke-width: 1.4; opacity: 0; }
.cine-url__caret{ width: 1px; height: 13px; background: #2997ff; display: none; }
.cine-url.is-typing .cine-url__caret{ display: block; }

.cine-notes{ display: none; }

.cine-end{
  position: absolute; left: 50%; bottom: clamp(28px, 9svh, 96px);
  transform: translateX(-50%);
  width: min(760px, calc(100% - 44px));
  text-align: center;
  opacity: 0; visibility: hidden;
}
.cine-end .n-eyebrow{ margin-bottom: .6rem; }
.cine-end__line{
  margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; color: var(--n-text);
}

.cine-loading{
  position: absolute; left: 50%; bottom: 10svh; transform: translateX(-50%);
  margin: 0; font-size: .84rem; color: var(--n-text-2);
}
:root[data-cine="ready"] .cine-loading{ display: none; }

/* pannello di debug (solo ?debug=1 con NEDRA_DEBUG=1) */
.cine-debug{
  position: fixed; left: 12px; bottom: 12px; z-index: 20000;
  width: 300px; padding: 10px 12px; border-radius: 10px;
  background: #1a1a1c; border: 1px solid rgba(255,255,255,.18);
  color: #f5f5f7; font: 600 11px/1.45 ui-monospace, Consolas, monospace;
}
.cine-debug input[type="range"]{ width: 100%; }
.cine-debug button{
  font: inherit; margin: 2px 2px 0 0; padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit; cursor: pointer;
}
.cine-debug pre{ margin: 6px 0 0; white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   3. APERTURA NEL FILM: hero + manifesto (master 0 → 0,29)
   -------------------------------------------------------------------------- */
/* hero e manifesto nella stessa cella, centrati sotto la navbar: ogni blocco
   è grande quanto il suo testo, così la maschera lavora sempre sulle parole */
.hv2-open{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; place-items: center;
  padding: var(--n-nav-h) 22px 0;
}
.hv2-open > *{ grid-area: 1 / 1; }
.hv2-open .hv2-hero{
  pointer-events: auto;
  /* stato di partenza dell'uscita a maschera (GSAP porta il fondo in alto) */
  clip-path: inset(0 0 0 0);
}
.hv2-manifesto{ text-align: center; }
.hv2-open .hv2-manifesto{ display: grid; justify-items: center; }
/* le righe del manifesto aspettano la maschera del master */
.hv2-open .hv2-manifesto__line{ clip-path: inset(100% 0 0 0); visibility: hidden; }

/* hero: comune al film e al livello light */
.hv2-hero{
  display: grid; align-content: center; justify-items: center;
  text-align: center;
}
.hv2-hero .n-eyebrow{ margin-bottom: .9rem; }
.hv2-hero__title{
  /* l'H1 è l'elemento più grande della prima schermata (LCP) anche su telefono */
  font-size: clamp(3rem, 13vw, 5.6rem);
  text-wrap: balance;
}
.hv2-hero__lead{ max-width: 34rem; margin-top: 1.1rem; }
.hv2-hero__actions{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem 1.1rem; margin-top: 2rem;
}
.hv2-hero__note{ font-size: .9rem; color: var(--n-text-2); }
.hv2-hero__links{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem;
  margin: 1.4rem 0 0;
}

.hv2-manifesto__line{
  margin: 0; max-width: 22ch;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 700;
  letter-spacing: -.026em; line-height: 1.08; color: var(--n-text);
}
.hv2-manifesto__line--2{
  max-width: 36rem; margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 400;
  letter-spacing: -.012em; line-height: 1.42; color: var(--n-text-2);
}

/* link di testo con il filo che si disegna (niente chevron) */
.hv2-link{
  color: var(--n-blue); font-size: 1rem; letter-spacing: -.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size .2s var(--n-ease-out-strong);
}
.hv2-link:hover{ text-decoration: none; }
@media (hover: hover) and (pointer: fine){
  .hv2-link:hover{ background-size: 100% 1px; }
}

/* --------------------------------------------------------------------------
   4. SCHEDA TECNICA NELLA COLONNA DATI (003 = 0,48 → 0,68)
   Sta sotto la cifra senza cambiare l'altezza della colonna: le didascalie
   di 003 restano dove sono. Le voci partono a tono basso (.28).
   -------------------------------------------------------------------------- */
.hv2-scheda{ position: absolute; left: 0; right: 0; top: 100%; margin-top: 1.4rem; }
.hv2-scheda__list{ margin: 0; display: grid; }
.hv2-scheda__row{
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .8rem;
  padding: .55rem 0; border-top: 1px solid var(--n-line-soft);
  opacity: .28;
}
.hv2-scheda__row dt{ font-size: .84rem; font-weight: 500; color: var(--n-text-2); }
.hv2-scheda__row dd{ margin: 0; font-size: .95rem; font-weight: 500; color: var(--n-text); }
.hv2-scheda__note{ color: var(--n-text-2); font-weight: 400; }
.hv2-scheda__link{ display: inline-block; margin-top: .9rem; font-size: .95rem; opacity: .28; }

/* --------------------------------------------------------------------------
   5. LIVELLO LIGHT: hero sul poster e manifesto
   -------------------------------------------------------------------------- */
.hv2-hero--lite{
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--n-nav-h));
  padding: 4rem 22px;
}
/* il poster parte da sotto la navbar traslucida e copre tutta la finestra:
   è lo sfondo della scena, non il contenuto (l'elemento LCP resta l'H1) */
.hv2-poster{ position: absolute; inset: calc(-1 * var(--n-nav-h)) 0 0; z-index: -1; overflow: hidden; }
.hv2-poster img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* la stessa lampada del film sopra il poster: il testo resta leggibile */
.hv2-hero--lite::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%);
}
.hv2-hero__inner{ display: grid; justify-items: center; }
.hv2-manifesto--lite{ padding-bottom: clamp(2rem, 5vw, 4rem); }
.hv2-manifesto--lite .n-wrap{ display: grid; justify-items: center; }

/* Nedra Web lite (views/partials/scena-web-lite.ejs): copia delle regole di
   proto-cinematico.css, che la home non carica */
.n-wl__devices{
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.n-wl__dev{
  margin: 0; padding: 6px; background: #08131f;
  border: 1px solid rgba(41,151,255,.6); border-radius: 10px;
}
.n-wl__dev img{ display: block; width: 100%; height: auto; border-radius: 2px; }
.n-wl__dev--desktop{ flex: 0 1 60%; padding-top: 0; }
.n-wl__dev--tablet{ flex: 0 1 19%; border-radius: 14px; padding: 8px; }
.n-wl__dev--phone{ flex: 0 1 10%; border-radius: 16px; padding: 10px 4px 12px; }
.n-wl__bar{
  height: clamp(18px, 2.2vw, 30px); display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(41,151,255,.6); margin: 0 -6px 6px;
}
.n-wl__url{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(.62rem, .9vw, .8rem); color: var(--n-text-2);
}
.n-wl__lock{ width: 10px; height: 12px; fill: none; stroke: #2997ff; stroke-width: 1.4; }
.n-wl__items{
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem;
  font-size: .95rem; font-weight: 600; color: var(--n-text);
}
.n-wl__items li::before{
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem;
  border: 1px solid #2997ff; vertical-align: .1em;
}
.n-wl__note{ margin: 1.2rem 0 0; color: var(--n-text-2); }
@media (max-width: 700px){
  .n-wl__devices{ flex-wrap: wrap; align-items: flex-end; }
  .n-wl__dev--desktop{ flex-basis: 100%; }
  .n-wl__dev--tablet{ flex-basis: 46%; }
  .n-wl__dev--phone{ flex-basis: 24%; }
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    :root:not([data-motion="off"]) .n-wl__dev,
    :root:not([data-motion="off"]) .n-wl__items li{
      animation: n-wl-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
    :root:not([data-motion="off"]) .n-wl__dev--tablet{ animation-range: entry 15% cover 36%; }
    :root:not([data-motion="off"]) .n-wl__dev--phone{ animation-range: entry 25% cover 42%; }
  }
}
@keyframes n-wl-in{ from{ opacity: 0; transform: translateY(24px); } }

/* --------------------------------------------------------------------------
   6. NEDRA WEB: COSA REALIZZIAMO (calma) — scheda a filetti, non card
   -------------------------------------------------------------------------- */
.hv2-web__cols{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.hv2-web__head{
  margin: 0 0 1rem; font-size: .9rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--n-text-2);
}
.hv2-sheet{ margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--n-line-soft); }
.hv2-sheet__row{ padding: 1rem 0; border-top: 1px solid var(--n-line-soft); }
.hv2-sheet__row dt{ font-size: 1.05rem; font-weight: 600; letter-spacing: -.012em; color: var(--n-text); }
.hv2-sheet__row dd{ margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--n-text-2); }
.hv2-sheet--list .hv2-sheet__row{ font-size: 1.02rem; color: var(--n-text); padding: .85rem 0; }
.hv2-web__more{ margin: 1.6rem 0 0; }

/* --------------------------------------------------------------------------
   7. METODO + VOCE (calma, una sola linea legata allo scroll)
   -------------------------------------------------------------------------- */
.hv2-steps{ position: relative; padding-top: 1.4rem; }
.hv2-steps::before,
.hv2-steps__line{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
}
.hv2-steps::before{ background: var(--n-line); }
.hv2-steps__line{ background: var(--n-blue); transform-origin: 0 50%; }
.hv2-steps__list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.hv2-step__n{
  display: block; margin-bottom: .7rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--n-blue);
  font-variant-numeric: tabular-nums;
}
.hv2-step h3{ margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.012em; }
.hv2-step p{ margin: .45rem 0 0; color: var(--n-text-2); font-size: .95rem; }

.hv2-voce{ margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; }
.hv2-voce__label{ margin: 0 0 1.2rem; text-align: center; font-size: .84rem; font-weight: 500; color: var(--n-text-2); }
.hv2-voce__list{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
/* una citazione: colonna di 560px; due o tre: griglia centrata a colonne limitate */
.hv2-voce--1 .hv2-voce__list{ grid-template-columns: minmax(0, 560px); }
.hv2-voce--2 .hv2-voce__list,
.hv2-voce--3 .hv2-voce__list{ grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); }
.hv2-quote-card{ margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--n-line); }
.hv2-quote-card blockquote{ margin: 0; }
.hv2-quote-card blockquote p{
  margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45;
  letter-spacing: -.012em; color: var(--n-text);
}
.hv2-quote-card figcaption{ margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.hv2-quote-card__prod,
.hv2-quote-card__date{ font-size: .88rem; color: var(--n-text-2); }
.hv2-quote-card__prod{ font-weight: 500; }

/* --------------------------------------------------------------------------
   8. FINALE "Hai un progetto?"
   Stato di base = stato finale (titolo pieno, luce sul pulsante): l'ingresso
   lo aggiunge finale.js una volta sola, con WAAPI.
   -------------------------------------------------------------------------- */
.hv2-finale{ position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: var(--n-nav-h); }
.hv2-finale__poster{ position: absolute; inset: 0; z-index: -2; opacity: .32; }
.hv2-finale__poster img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hv2-finale::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, #000 100%);
}
.hv2-finale__title{ position: relative; display: inline-block; scroll-margin-top: calc(var(--n-nav-h) + 2rem); }
.hv2-finale__title:focus{ outline: none; }
.hv2-finale__title:focus-visible{ outline: 2px solid var(--n-blue); outline-offset: 6px; }
.hv2-finale__build{ display: block; }
.hv2-finale__scan{
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--n-blue); opacity: 0; pointer-events: none;
}
.hv2-finale__cta{ position: relative; margin-top: 2.2rem; display: flex; justify-content: center; }
.hv2-finale__light{
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(640px, 150vw); aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.11), rgba(255,255,255,.04) 55%, transparent 100%);
  pointer-events: none;
}
.hv2-finale__choices{
  display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.8rem;
  margin: 1.5rem 0 0;
}

/* --------------------------------------------------------------------------
   9. ACCESSI AL PREVENTIVO
   -------------------------------------------------------------------------- */
.hv2-skip{
  position: fixed; left: 12px; top: 8px; z-index: 10000;
  padding: .6rem 1rem; border-radius: 980px;
  background: #1a1a1c; border: 1px solid var(--n-line-strong);
  color: var(--n-text); font-size: .9rem;
  transform: translateY(-160%);
}
.hv2-skip:focus,
.hv2-skip:focus-visible{ transform: none; }

/* solo durante il film (full): GSAP lo accende alla fine dell'apertura */
.hv2-quote{ display: none; }
:root[data-tier="full"] .hv2-quote{
  display: inline-flex; align-items: center;
  position: fixed; right: 22px; bottom: 22px; z-index: 8000;
  padding: .62rem 1.05rem; border-radius: 980px;
  background: #1a1a1c; border: 1px solid var(--n-line);
  color: var(--n-text); font-size: .88rem; font-weight: 500; letter-spacing: -.005em;
  opacity: 0; visibility: hidden;
  transition: background .25s var(--n-ease), border-color .25s var(--n-ease);
}
@media (hover: hover) and (pointer: fine){
  :root[data-tier="full"] .hv2-quote:hover{ background: var(--n-surface-3); border-color: var(--n-line-strong); }
}

/* --------------------------------------------------------------------------
   10. MOVIMENTO DELLE SEZIONI CALME (solo CSS, fermo in still e senza supporto)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    :root:not([data-motion="off"]) .hv2-metodo{ view-timeline: --hv2-metodo block; }
    /* la linea si riempie mentre la sezione attraversa lo schermo */
    :root:not([data-motion="off"]) .hv2-steps__line{
      animation: hv2-line linear both;
      animation-timeline: --hv2-metodo;
      animation-range: cover 18% cover 46%;
    }
    /* i passaggi si accendono per tono quando la linea li raggiunge */
    :root:not([data-motion="off"]) .hv2-step{
      animation: hv2-tono linear both;
      animation-timeline: --hv2-metodo;
    }
    :root:not([data-motion="off"]) .hv2-step:nth-child(1){ animation-range: cover 16% cover 22%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(2){ animation-range: cover 23% cover 29%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(3){ animation-range: cover 30% cover 36%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(4){ animation-range: cover 37% cover 43%; }
  }
}
@keyframes hv2-line{ from{ transform: scaleX(0); } }
@keyframes hv2-line-y{ from{ transform: scaleY(0); } }
@keyframes hv2-tono{ from{ opacity: .28; } }

/* --------------------------------------------------------------------------
   11. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  :root[data-tier="full"] .cine-track{ height: 740svh; }
  /* la barra "Preventivo · 48h" occupa il fondo: i testi del film salgono della sua altezza */
  .cine-copy{
    left: 22px; right: 22px; top: auto; bottom: calc(7svh + 44px);
    transform: none; width: auto; text-align: center;
  }
  .cine-lamp{ background: radial-gradient(90% 60% at 50% 42%, transparent 40%, rgba(0,0,0,.78) 100%); }
  .cine-annot{ display: none; }
  .cine-notes{
    display: grid; position: absolute; left: 22px; right: 22px; bottom: calc(7svh + 44px);
    margin: 0; padding: 0; list-style: none; text-align: center;
  }
  .cine-notes li{
    grid-area: 1 / 1; opacity: 0; visibility: hidden;
    font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: var(--n-text);
  }
  .cine-notes li::before{
    content: ""; display: block; width: 18px; height: 1px; margin: 0 auto .7rem; background: #2997ff;
  }
  .cine-end{ bottom: calc(7svh + 44px); }

  /* scheda: lista compatta sopra la cifra, "etichetta · valore" su una riga */
  .hv2-scheda{ top: auto; bottom: 100%; margin: 0 0 .9rem; }
  .hv2-scheda__row{ display: block; padding: .28rem 0; border: 0; font-size: .8rem; line-height: 1.35; }
  .hv2-scheda__row dt,
  .hv2-scheda__row dd{ display: inline; font-size: inherit; }
  .hv2-scheda__row dt::after{ content: " · "; color: var(--n-text-3); }
  .hv2-scheda__link{ display: none; }

  :root[data-tier="full"] .hv2-quote{
    left: 0; right: 0; bottom: 0; justify-content: center;
    min-height: 44px; padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
    border-radius: 0; border-width: 1px 0 0;
  }

  .hv2-web__cols{ grid-template-columns: minmax(0, 1fr); }
  .hv2-steps{ padding: 0 0 0 1.4rem; }
  .hv2-steps::before,
  .hv2-steps__line{ right: auto; bottom: 0; width: 1px; height: auto; }
  .hv2-steps__line{ transform-origin: 50% 0; }
  .hv2-steps__list{ grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    :root:not([data-motion="off"]) .hv2-steps__line{ animation-name: hv2-line-y; animation-range: cover 14% cover 52%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(1){ animation-range: cover 12% cover 20%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(2){ animation-range: cover 22% cover 30%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(3){ animation-range: cover 32% cover 40%; }
    :root:not([data-motion="off"]) .hv2-step:nth-child(4){ animation-range: cover 42% cover 50%; }
  }
}

/* ==========================================================================
   12. APERTURA "PUNTO ZERO" (derivata da public/css/proto-aperture.css,
   sola variante 3). Classi .ap-*, comuni al film e al livello light.

   La composizione è scritta in unità del suo riquadro (container query
   cqw/cqh), che è sempre 100% × 100svh:
   - nel film (full) il riquadro è lo stage sticky (.hv2-open);
   - nel livello light è .ap-frame, che copre tutta la finestra come il poster.
   Così titolo, CTA e annotazione stanno nello stesso punto dell'immagine in
   entrambi i livelli. Nel film, a scroll 0, lo stage parte sotto la navbar
   (52 px) e il fondo è tagliato.
   ========================================================================== */
.ap-open{ container-type: size; }
.ap-open > .ap-hero,
.ap-open > .ap-anns{ grid-area: auto; }

/* niente overflow sul riquadro light: il poster deve restare a finestra intera
   anche sotto la navbar, altrimenti Chrome lo conta come contenuto (LCP) */
.ap-lite{
  position: relative;
  height: calc(100svh - var(--n-nav-h));
}
.ap-frame{
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--n-nav-h));
  height: 100svh; overflow: hidden; isolation: isolate;
  container-type: size;
}
/* il poster copre tutta la finestra (sotto la navbar traslucida): per Chrome
   è uno sfondo, l'elemento LCP resta l'H1 */
.ap-poster{ position: absolute; inset: 0; z-index: -1; }
.ap-poster img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.ap-hero{ position: absolute; inset: 0; pointer-events: none; }
.ap-hero a{ pointer-events: auto; }
.ap-anns{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* testi */
.ap-title{
  margin: 0; color: var(--n-text);
  font-weight: 700; letter-spacing: -.035em; line-height: .92;
  white-space: nowrap;
}
.ap-sub{
  margin: 0; max-width: 30rem;
  font-size: .98rem; line-height: 1.4; letter-spacing: -.01em; color: var(--n-text-2);
}
.ap-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; }
.ap-btn{ padding: .62rem 1.15rem; font-size: .92rem; }
.ap-note{ font-size: .85rem; color: var(--n-text-2); }
.ap-links{ display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0; }
.ap-links .hv2-link{ font-size: .9rem; }

/* annotazione "0, 0, 0": nel film apertura3d.js la porta sul punto 3D
   proiettato (.is-proj: transform), nel light sta sul poster (left/top) */
.ap-anns > *{ position: absolute; width: 0; height: 0; }
.ap-anns > .is-proj{ left: 0; top: 0; }
.ap-anns b{
  position: absolute; white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
/* nel film l'annotazione compare con la canvas, mai prima della proiezione */
:root[data-tier="full"]:not([data-cine="ready"]) .ap-open .ap-anns{ opacity: 0; }
.ap-tag--zero b{ left: 16px; top: -5px; font-size: 11px; letter-spacing: .04em; color: var(--n-text-2); }

/* composizione: titolo monumentale su una riga (~30%), punto sull'orizzonte
   (centro), CTA (~84%) */
.ap-hero--v3 .ap-head{
  position: absolute; left: 0; right: 0; top: 23cqh;
  display: grid; justify-items: center; gap: 1.1rem; text-align: center;
}
.ap-hero--v3 .ap-title{ font-size: clamp(4rem, 9vw, 9rem); }
.ap-hero--v3 .ap-br{ display: none; }
.ap-hero--v3 .ap-foot{
  position: absolute; left: 0; right: 0; top: 79cqh;
  display: grid; justify-items: center; gap: .9rem;
}
.ap-hero--v3 .ap-actions{ justify-content: center; }

/* posizione ferma dell'annotazione nel light (sul poster del fotogramma 0,
   misurata dalla proiezione del livello full a 1440×900 e 390×844) */
.ap-lite.ap-v3 [data-ann="origin"]{ left: 50%; top: 53.6%; }

@media (max-width: 860px){
  /* titolo su due righe nella metà alta, CTA in fondo */
  .ap-hero--v3 .ap-head{ top: 15cqh; left: 22px; right: 22px; gap: .9rem; }
  .ap-hero--v3 .ap-title{ font-size: clamp(3rem, 14vw, 4.4rem); }
  .ap-hero--v3 .ap-br{ display: inline; }
  .ap-hero--v3 .ap-sub{ font-size: .9rem; max-width: 18rem; }
  .ap-hero--v3 .ap-foot{ top: auto; bottom: calc(var(--n-nav-h) + 5cqh); left: 22px; right: 22px; }
  .ap-hero--v3 .ap-links{ display: none; }
  .ap-lite.ap-v3 [data-ann="origin"]{ top: 50.9%; }
}