/* ══════════════════════════════════════════════════════════════════
   L'ASSE
   Un solo bordo sinistro per tutta la home, una sola misura.

   Prima di questo foglio la pagina aveva cinque assi diversi, misurati
   a 1440px: hero centrato a destra, ostrica a 172, il fascicolo delle
   domande centrato a 482 su una misura di 620, le sezioni vv a 180,
   e la lista e la chiusura di nuovo centrate. L'occhio scendeva a
   zig zag. In piu' i filetti .vv-rule non avevano il padding laterale
   delle sezioni, quindi sotto i 1200px sbordavano rispetto al testo.

   Qui si fissa una misura sola, --vae-wrap, e si calcola il contenitore
   con la stessa identica formula ovunque, cosi i bordi coincidono a
   qualunque larghezza. Niente 100vw: si lavora in percentuale, altrimenti
   la barra di scorrimento sposta tutto di una decina di pixel e il
   problema torna da dove era uscito.

   Questo foglio va caricato PER ULTIMO. Ha quattro :not(#) come le
   regole vecchie: a parita' di peso vince chi arriva dopo.
   ══════════════════════════════════════════════════════════════════ */

:root{ --vae-wrap:1080px; }

/* ── 1. IL CONTENITORE ──────────────────────────────────────────────
   La formula: larghezza = la misura, oppure tutto lo spazio meno i
   due margini quando lo schermo e' piu' stretto. Poi margini automatici.
   Applicata identica al contenitore dell'ostrica, a quello delle
   sezioni vv e ai filetti, che prima erano l'anello che non tornava. */

html body:not(#_):not(#__):not(#___):not(#____) .vv-in{
  width:min(var(--vae-wrap), 100%) !important;
  max-width:none !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* i filetti stanno fuori dalle sezioni, quindi il padding se lo devono
   dare da soli o restano piu' lunghi del testo che dividono */
html body:not(#_):not(#__):not(#___):not(#____) .vv-rule{
  width:min(var(--vae-wrap), calc(100% - 2 * var(--pad))) !important;
  max-width:none !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* il fascicolo delle domande: era 620px centrato, cioe' un terzo asse
   in mezzo a due sezioni allineate a sinistra */
html body:not(#_):not(#__):not(#___):not(#____) .hm-int{
  width:min(var(--vae-wrap), calc(100% - 2 * var(--pad))) !important;
  max-width:none !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* ── 2. TUTTO A SINISTRA, SULLO STESSO BORDO ───────────────────────
   Il foglio vecchio centra ogni titolo e ogni paragrafo del sito con
   tre :not(#). Nell'ostrica quella regola vinceva: il filetto da 38px
   stava a sinistra e la scritta "ad libertatem" galleggiava al centro
   di una colonna larga il doppio. Da fuori sembrava un errore di
   impaginazione, ed era esattamente quello. */

html body:not(#_):not(#__):not(#___):not(#____)
:is(.hm-int,.hm-in-kick,.hm-in-file,.hm-in-meta,.hm-in-q,.hm-in-ctl,.hm-kept,
    .vv-eye,.vv-h2,.vv-lede,.vv-after,.vv-note,.vv-not,.vv-price,.vv-fine,
    .vv-star,.vv-act,.vv-p,.vv-keep,.vv-keep p,.vv-keep small,
    .vv-col h3,.vv-col li,.vv-q summary,.vv-q-a,.vv-spec dt,.vv-spec dd,
    .vv-fact b,.vv-fact span,.vv-p-when,.vv-p-name,.vv-p-n,.vv-p-go){
  text-align:left !important;
  text-align-last:left !important;
}

/* niente margini automatici: erano loro a staccare i blocchi dall'asse */
html body:not(#_):not(#__):not(#___):not(#____)
:is(.hm-in-rule,.hm-in-q,.hm-kept,.vv-keep,
    .vv-end .vv-h2,.vv-end .vv-lede,.vv-list .vv-h2,.vv-list .vv-lede,.vv-nl){
  margin-left:0 !important;
  margin-right:0 !important;
}

/* le file di bottoni e link seguono lo stesso bordo */
html body:not(#_):not(#__):not(#___):not(#____)
:is(.vv-act,.hm-in-ctl,.vv-nl,.vv-keep form){
  justify-content:flex-start !important;
}

/* la lista e la chiusura erano le ultime due centrate: l'asse si
   spezzava proprio dove la pagina chiede qualcosa al lettore */
html body:not(#_):not(#__):not(#___):not(#____)
:is(.vv-end,.vv-list){ text-align:left !important; }

/* ── 3. LE MISURE DI RIGA ──────────────────────────────────────────
   Una riga di prosa oltre i 70 caratteri si legge male. Qui si tengono
   corte e, soprattutto, coerenti: titoli su una misura, prosa su
   un'altra, occhielli liberi. Prima ogni sezione aveva la sua. */

html body:not(#_):not(#__):not(#___):not(#____) :is(.vv-h2){max-width:19ch !important}
html body:not(#_):not(#__):not(#___):not(#____) :is(.vv-lede){max-width:44ch !important}
html body:not(#_):not(#__):not(#___):not(#____) :is(.vv-after){max-width:34ch !important}
html body:not(#_):not(#__):not(#___):not(#____) :is(.vv-q-a,.vv-not){max-width:56ch !important}
html body:not(#_):not(#__):not(#___):not(#____) .hm-in-q{max-width:38ch !important}
html body:not(#_):not(#__):not(#___):not(#____) .vv-end .vv-h2{max-width:24ch !important}

/* ── 4. IL FASCICOLO DELLE DOMANDE ─────────────────────────────────
   Stessa grammatica delle altre sezioni: occhiello, filetto, contenuto.
   Il filetto era centrato con margin auto, ora parte dall'asse. */

html body:not(#_):not(#__):not(#___):not(#____) .hm-in-rule{
  width:38px !important; margin:0 0 1.9em !important;
}
html body:not(#_):not(#__):not(#___):not(#____) .hm-in-ctl{
  display:flex !important; flex-wrap:wrap !important;
  justify-content:flex-start !important; gap:.9em 1.4em !important;
}
html body:not(#_):not(#__):not(#___):not(#____) .hm-in-ctl .hm-in-sep{display:none !important}
html body:not(#_):not(#__):not(#___):not(#____) .hm-kept{max-width:46ch !important}

/* ── 5. L'HERO ─────────────────────────────────────────────────────
   Sopra i 760px la colonna sta accanto alla foto, e li' il centrato non
   regge: ogni riga si centrava sulla propria larghezza, quindi il titolo
   partiva 11px piu' a destra del paragrafo sotto. Era la cosa piu'
   visibile della pagina. Torna a sinistra, come diceva gia' il CSS
   della sezione prima che le regole globali lo coprissero.
   Sotto i 760px la foto e' a tutta larghezza e il centrato funziona:
   li' non si tocca niente. */

@media(min-width:761px){
  html body:not(#_):not(#__):not(#___):not(#____) .ap-text{
    align-items:flex-start !important;
    text-align:left !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____) .ap-text > *{
    margin-left:0 !important; margin-right:0 !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____)
  :is(.ap-h1,.ap-role,.ap-bio,.ap-bio p,.ap-cta,.ap-lede,.ap-kick){
    text-align:left !important; text-align-last:left !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____) :is(.ap-role,.ap-bio p){
    max-width:32ch !important;
  }
  /* il bordo destro della colonna hero cade sul bordo destro della
     griglia, cosi la prima schermata e l'ultima chiudono sulla stessa
     riga verticale */
  html body:not(#_):not(#__):not(#___):not(#____) .ap-text{
    padding-right:0 !important;
    margin-right:max(var(--pad), calc((100% - var(--vae-wrap)) / 2)) !important;
  }
}

/* ── 6. MOBILE ─────────────────────────────────────────────────────
   Sotto gli 860px il foglio vecchio ricentra tutto quello che sta in
   main, con quattro :not(#). Qui si tiene la sinistra per il corpo del
   testo e si lascia centrato solo l'hero, che sta sopra la foto. */

/* Nota sul peso: la regola vecchia che ricentra tutto sotto gli 860px e'
   scritta con quattro :not(#) PIU' due :is() che contengono classi, quindi
   pesa sei livelli. Qui servono sei :not(#) per superarla di uno. E' una
   corsa agli armamenti e va chiusa: quando le pagine vecchie saranno
   passate al sistema vv, quella regola si cancella e qui restano quattro. */
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) main
  :is(.hm-in-kick,.hm-in-file,.hm-in-meta,.hm-in-q,.hm-in-ctl,
      .vv-eye,.vv-h2,.vv-lede,.vv-after,.vv-note,.vv-not,.vv-price,.vv-fine,
      .vv-star,.vv-col h3,.vv-col li,.vv-q summary,.vv-q-a,
      .vv-spec dt,.vv-spec dd,.vv-fact b,.vv-fact span,
      .vv-p-when,.vv-p-name,.vv-keep p,.vv-keep small){
    text-align:left !important; text-align-last:left !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  /* su schermo stretto le misure di riga non servono piu': le toglie
     il bordo dello schermo */
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) main
  :is(.vv-h2,.vv-lede,.vv-after,
      .vv-q-a,.vv-not,.hm-in-q,.vv-end .vv-h2){max-width:none !important}
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) :is(.vv-nl,.vv-keep,.hm-kept){
    max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  }
}

@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______)
  :is(.vv-in,.hm-int,.vv-rule){margin-left:auto !important;margin-right:auto !important}
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______)
  :is(.hm-in-rule){margin-left:0 !important;margin-right:0 !important}
}

/* ── 7. RITMO VERTICALE ────────────────────────────────────────────
   Le sezioni nuove respiravano con clamp(76px,10vw,148px), l'ostrica con
   clamp(110px,17vh,210px) e il fascicolo con clamp(96px,14vh,190px):
   tre respiri diversi di fila. Uno solo, e la pagina smette di
   sobbalzare. */

html body:not(#_):not(#__):not(#___):not(#____) .hm-int{
  padding-top:clamp(76px,10vw,148px) !important;
  padding-bottom:clamp(76px,10vw,148px) !important;
  margin-top:0 !important; margin-bottom:0 !important;
}

/* ── 10. L'ASSE SECONDARIO ─────────────────────────────────────────
   Le due sezioni a due colonne avevano griglie diverse: "chi si e chi no"
   partiva con 1fr 1fr e gap 86, l'offerta con 1.05fr .95fr e gap 88.
   Risultato, a 1440px la seconda colonna cominciava a 763 in una sezione
   e a 788 nell'altra: venticinque pixel che l'occhio registra come
   sciatteria anche senza saperli nominare. Stessa griglia per entrambe. */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vv-offer{
  grid-template-columns:1fr 1fr !important;
  gap:clamp(34px,6vw,86px) !important;
}
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vv-offer{
    grid-template-columns:1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   11. LA SEZIONE VIDEO
   Una copertina grande e tre piccole sotto. Le copertine arrivano da
   YouTube, il player no: si carica solo al clic, quindi finche' non
   si clicca la pagina non contatta YouTube e non lascia cookie.
   ══════════════════════════════════════════════════════════════════ */

.vd-big{margin-top:clamp(34px,5vw,54px)}
.vd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(12px,1.6vw,20px)}

.vd-card{display:block;width:100%;padding:0;border:0;background:none;color:inherit;
  text-align:left;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none}

.vd-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.02)}
.vd-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.03);transition:filter .35s ease,transform .55s ease}
.vd-card:hover .vd-shot img,.vd-card:focus-visible .vd-shot img{filter:saturate(1) contrast(1.03);transform:scale(1.02)}
.vd-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,5,6,0) 45%,rgba(8,5,6,.55) 100%);transition:opacity .35s}
.vd-card:hover .vd-shot::after{opacity:.6}
.vd-shot.on::after,.vd-shot.on .vd-play{display:none}
.vd-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* il tondo del play: un cerchio sottile, niente pulsante rosso */
.vd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(46px,4.6vw,66px);height:clamp(46px,4.6vw,66px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(238,236,246,.72);background:rgba(8,5,6,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .3s,border-color .3s,transform .3s}
.vd-play svg{width:44%;height:44%;fill:#f4f2f8;margin-left:6%}
.vd-card:hover .vd-play,.vd-card:focus-visible .vd-play{
  background:#e12c4f;border-color:#e12c4f;transform:translate(-50%,-50%) scale(1.06)}
.vd-card:focus-visible .vd-shot{outline:1px solid #e12c4f;outline-offset:3px}

.vd-t{display:block;margin-top:.95em;font-family:var(--disp);font-weight:300;
  line-height:1.32;color:var(--haze)}
.vd-card.big .vd-t{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:1.05em;max-width:34ch}
.vd-row .vd-t{font-size:clamp(.9rem,1.4vw,1.05rem);color:rgba(238,236,246,.78)}

/* riga sotto: link al canale a sinistra, icone social a destra */
.vd-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:18px clamp(20px,3vw,34px);margin-top:clamp(26px,3.4vw,38px);
  padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--line)}
.vd-all{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:#f4f2f8;text-decoration:none;padding-bottom:.6em;
  border-bottom:1px solid rgba(236,234,244,.34);transition:border-color .3s,color .3s}
.vd-all:hover{border-color:#e12c4f;color:#fff}
.vd-soc{display:flex;align-items:center;gap:clamp(16px,2.2vw,26px)}
.vd-soc a{color:rgba(163,157,184,.85);display:inline-flex;transition:color .25s,transform .25s}
.vd-soc a svg{width:20px;height:20px;display:block}
.vd-soc a:hover{color:#e12c4f;transform:translateY(-2px)}

.vd-said{margin-top:clamp(30px,4vw,44px)}
.vd-more{margin-top:1.4em}

/* la lista email in coda alla chiusura */
.vd-list{margin-top:clamp(40px,5.5vw,64px);padding-top:clamp(26px,3.4vw,36px);
  border-top:1px solid var(--line)}
.vd-list .vv-eye{margin-bottom:clamp(16px,2.2vw,22px)}

@media(max-width:860px){
  .vd-row{grid-template-columns:1fr 1fr;gap:10px}
  .vd-row .vd-card:nth-child(3){display:none}   /* due sotto, non tre strizzate */
  .vd-foot{flex-direction:column;align-items:flex-start;gap:20px}
}
@media(max-width:430px){
  .vd-row{grid-template-columns:1fr}
  .vd-row .vd-card:nth-child(3){display:block}
}
@media(prefers-reduced-motion:reduce){
  .vd-shot img,.vd-play,.vd-soc a{transition:none}
  .vd-card:hover .vd-shot img{transform:none}
}

/* i bottoni delle schede video e i loro titoli: la regola globale li
   centrava (il browser centra da solo il contenuto di <button>) */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main
:is(.vd-card,.vd-t,.vd-more,.vd-foot,.vd-said,.vd-list){
  text-align:left !important; text-align-last:left !important;
  margin-left:0 !important; margin-right:0 !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main .vd-said .vv-facts{
  margin-top:clamp(28px,3.4vw,38px) !important;
}
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) main
  :is(.vd-card,.vd-t,.vd-more,.vd-foot,.vd-said,.vd-list){
    text-align:left !important; text-align-last:left !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}

/* il bottone della lista email tornava una pillola rosa piena, mentre
   tutti gli altri del sito sono un rettangolo con la sola cornice */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main .vv-nl button{
  background:none !important; color:#e12c4f !important;
  border:1px solid #e12c4f !important; border-radius:3px !important;
  padding:.9em 1.9em !important; font-family:var(--mono) !important;
  font-size:.72rem !important; letter-spacing:.16em !important; text-transform:uppercase !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main .vv-nl button:hover{
  background:#e12c4f !important; color:#fff !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main .vv-nl input{
  border-radius:3px !important;
}

/* ── 11. HERO SU MOBILE ────────────────────────────────────────────
   Resta centrato, perche' li' sta sopra la foto a tutta larghezza e
   funziona. Ma i blocchi avevano misure diverse, 34ch sui paragrafi e
   il bordo della colonna sulla riga del ruolo: due larghezze centrate
   una sotto l'altra danno quattro bordi invece di due. Stessa misura
   per tutti, e i bordi diventano due. */
@media(max-width:760px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______)
  :is(.ap-role,.ap-bio,.ap-bio p,.ap-h1,.ap-cta){
    max-width:none !important; width:100% !important;
  }
}

/* ── 12. LE RIGHE DELLE PRATICHE ───────────────────────────────────
   Misurato: la riga "quando" partiva a 549 mentre il nome sotto partiva
   a 262. Duecentottantasette pixel di sfasamento dentro la stessa riga.
   Causa: la riga "quando" e' uno span inline dentro un wrapper senza
   classe, quindi l'allineamento non lo decide lei ma il blocco che la
   contiene, e li' la regola generale centrava ancora. Il wrapper prende
   l'allineamento e la riga diventa un blocco. */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vv-p > span{
  text-align:left !important; text-align-last:left !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vv-p-when{
  display:block !important;
}

/* ══ RIFINITURE ══════════════════════════════════════════════════
   Due punti in cui la pagina sembrava non finita: le cinque icone
   social erano venti pixel ciascuna in fondo a una sezione vuota, e
   la domanda, che e' il centro della home, era piu' piccola del
   titolo che le sta sopra. ═══════════════════════════════════════ */

/* i social: righe con il nome accanto, non francobolli */
.so-row{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line);max-width:560px}
.so{flex:1 1 100%;display:flex;align-items:center;gap:16px;
  padding:clamp(15px,1.8vw,19px) 2px;border-bottom:1px solid var(--line);
  color:rgba(238,236,246,.72);text-decoration:none;
  transition:color .28s ease,padding-left .28s ease}
.so:hover,.so:focus-visible{color:#f4f2f8;padding-left:12px}
.so svg{width:19px;height:19px;flex:0 0 auto;color:rgba(163,157,184,.7);transition:color .28s}
.so:hover svg{color:#e12c4f}
.so span{font-family:var(--sans);font-weight:300;font-size:.98rem;letter-spacing:.01em}
.so::after{content:"\2197";margin-left:auto;font-family:var(--mono);font-size:.66rem;
  color:rgba(163,157,184,.35);transition:color .28s}
.so:hover::after{color:#e12c4f}

/* la domanda: e' il pezzo forte della home, che si veda */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .hm-in-q{
  font-family:"Cormorant",Georgia,serif !important;
  font-weight:300 !important;
  font-size:clamp(1.55rem,3.2vw,2.35rem) !important;
  line-height:1.42 !important;
  color:#f4f2f8 !important;
  max-width:22ch !important;
  min-height:2.9em !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .hm-in-ctl{
  margin-top:clamp(28px,3.4vw,40px) !important;
}
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) .hm-in-q{
    max-width:none !important; min-height:4.2em !important;
  }
  .so-row{max-width:none}
}

/* Le tre stanze in home. Classi nuove, quindi la regola vecchia che centra
   titoli e paragrafi le prendeva in pieno: i nomi uscivano centrati e le
   descrizioni pure, dentro righe allineate a sinistra. */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) main
:is(.rm-row,.rm-n,.rm-name,.rm-desc){
  text-align:left !important; text-align-last:left !important;
  margin-left:0 !important; margin-right:0 !important;
}
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) main
  :is(.rm-row,.rm-n,.rm-name,.rm-desc){
    text-align:left !important; text-align-last:left !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) main .rm-desc{max-width:none !important}
}