/*! MailSenpai - msp-ds-v2-confronti.css, gruppo «Confronti», giro 2 di design (04/10/2026). @pagine: 5388,5666,5691,99394,99395,99396,95193,95194,95195
Si carica SOLO con lo strato v2 acceso (anteprima con token), dopo msp-ds-confronti.css e msp-ds-v2.css. Sorgente: scratchpad cf/v2/.
Pagine «MailSenpai vs ...» IT ed EN: hero chiara, pulsanti del gruppo allineati allo strato v2, nota sui prezzi, card, nastro loghi. */

/* hero chiara: occhiello in pillola e sottotitolo (aveva il colore in linea var(--awb-color8)) */
.msp-v2 .ms-cf-hero .ms-cf-eye{margin:0 0 var(--s-4)!important}
.msp-v2 .ms-cf-hero .ms-cf-eye p{margin:0}
.msp-v2 .ms-cf-hero .fusion-text p[style*="awb-color8"]{color:var(--v2-ink2)!important}

/* pulsanti del gruppo (.ms-cf-b) come quelli dello strato v2: verde solo per la prova, contorno che in hover diventa arancio pieno
   con testo bianco, riflesso che scorre una volta, sollevamento e risposta al clic */
.msp-v2 .ms-cf-b{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;font-weight:700;
 transition:transform .25s var(--v2-ease),box-shadow .25s var(--v2-ease)!important}
.msp-v2 .ms-cf-b.ms-cf-g{background:linear-gradient(135deg,var(--v2-g1),var(--v2-g2))!important;color:#fff!important;border-color:transparent!important;
 box-shadow:0 14px 30px -16px rgba(22,108,68,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.msp-v2 .ms-cf-b.ms-cf-o{background:#fff!important;color:var(--v2-act)!important;border-color:var(--v2-line2)!important;box-shadow:none}
.msp-v2 .ms-cf-b::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.16) 50%,transparent 68%);transform:translateX(-130%)}
.msp-v2 .ms-cf-b.ms-cf-o::before{display:none}
@media (hover:hover){
 .msp-v2 .ms-cf-b.ms-cf-g:hover{background:linear-gradient(135deg,var(--v2-g1h),var(--v2-g2h))!important;transform:translateY(-2px);box-shadow:0 20px 36px -18px rgba(15,82,51,.9)}
 .msp-v2 .ms-cf-b.ms-cf-o:hover{background:linear-gradient(135deg,var(--v2-o1),var(--v2-o2))!important;color:#fff!important;border-color:transparent!important;transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(127,60,15,.85)}
 .msp-v2 .ms-cf-b.ms-cf-d:hover{transform:translateY(-2px)}
 .msp-v2 .ms-cf-b:hover::before{transform:translateX(130%);transition:transform .75s var(--v2-ease)}
}
.msp-v2 .ms-cf-b:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
.msp-v2 .ms-cf-b:focus-visible{outline:3px solid #2f2a26!important;outline-offset:3px}
.msp-v2 .ms-cf-final .ms-cf-b:focus-visible{outline-color:#fff!important}

/* C05: nota sotto la tabella (prezzi dei concorrenti rilevati sui siti ufficiali) */
.msp-v2 .ms-cf-notaw{max-width:1100px;margin:var(--s-4) auto 0!important}
.msp-v2 .ms-cf-nota{margin:0;font-size:13px;line-height:1.5;color:var(--v2-mut)!important;text-align:center}

/* card «Cosa ci rende unici?»: luce che segue il puntatore dello strato v2 (classe messa dal JS del gruppo) */
.msp-v2 .ms-cf-unici .content-box-column>.col.msp-v2-card{border-radius:var(--v2-r2)}

/* fascia dei loghi: il nastro si ferma davvero fuori schermo (la regola «animation» con .is-run prevaleva su .is-off) */
html.msp-v2-js .msp-cl-mq.is-run.is-off .msp-cl-rail{animation-play-state:paused!important}

/* spaziature: scala unica dello strato v2 tra titolo, testo e pulsanti delle sezioni del gruppo */
.msp-v2 .ms-cf-ctas{gap:var(--s-3)!important;margin-top:var(--s-5)!important}

/* ---- correzioni del 04/10 dopo la verifica indipendente ---- */
/* stelle delle recensioni sempre col valore vero (5/5 = piene): niente riempimento legato allo scorrimento */
.msp-v2 .msp-rv-stars{animation:none!important}

/* «Mostra altre domande»: in hover testo bianco su arancio profondo (prima arancio chiaro #f58634 con testo scuro, regola del giro 1) */
.msp-v2 .ms-cf-faq .mspai-more{font-family:inherit!important;font-weight:600;transition:transform .25s var(--v2-ease),box-shadow .25s var(--v2-ease),background-color .2s!important}
.msp-v2 .ms-cf-faq .mspai-more:hover,.msp-v2 .ms-cf-faq .mspai-more:focus-visible{background:linear-gradient(135deg,var(--v2-o1),var(--v2-o2))!important;
 border-color:var(--v2-o2)!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(127,60,15,.85)}
.msp-v2 .ms-cf-faq .mspai-more:active{transform:translateY(0) scale(.97)}
/* icone «+»/«-» delle FAQ: arancio scuro AA sul bianco (prima #f58634, 2,5:1) */
.msp-v2 .ms-cf-faq .fusion-toggle-icon-wrapper i,.msp-v2 .ms-cf-faq .fusion-toggle-icon-wrapper i::before{color:var(--v2-act)!important}

/* chiusura scura: niente bagliore del giro 1 attaccato al bordo alto (si vedeva la cucitura col divisore); l'aurora sfuma in alto */
.msp-v2 .ms-cf-final.msp-v2-bg--scuro{background:#0e1011!important}
.msp-v2 .ms-cf-final.msp-v2-bg::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 calc(18% + 120px));
 mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 calc(18% + 120px))}

/* card «Cosa ci rende unici?»: stessa altezza nella riga */
@media (min-width:641px){
 .msp-v2 .ms-cf-unici .fusion-content-boxes{display:flex!important;flex-wrap:wrap}
 .msp-v2 .ms-cf-unici .fusion-content-boxes>.content-box-column{display:flex;float:none}
 .msp-v2 .ms-cf-unici .fusion-content-boxes>.content-box-column>.col{flex:1 1 auto;width:100%;height:auto!important}
 .msp-v2 .ms-cf-unici .fusion-content-boxes>.fusion-clearfix{display:none}
}

/* card dei prezzi: separatori di un solo colore e righe con la stessa interlinea */
.msp-v2 .ms-cf-piani .fusion-separator .fusion-separator-border{border-color:var(--v2-line2)!important}
.msp-v2 .ms-cf-piani .fusion-text p{line-height:1.55!important;margin:0 0 var(--s-3)!important}
.msp-v2 .ms-cf-piani .fusion-text p :is(span,b,strong,em){line-height:inherit!important}
.msp-v2 .ms-cf-piani .fusion-text p:last-child{margin-bottom:0!important}
.msp-v2 .ms-cf-piani .fusion-text p sup{line-height:0}

@media (prefers-reduced-motion:reduce){
 .msp-v2 .ms-cf-b,.msp-v2 .ms-cf-b::before{transition:none!important}
 .msp-v2 .ms-cf-b:hover,.msp-v2 .ms-cf-b:active{transform:none!important}
 .msp-v2 .ms-cf-faq .mspai-more,.msp-v2 .ms-cf-faq .mspai-more:hover,.msp-v2 .ms-cf-faq .mspai-more:active{transform:none!important;transition:none!important}
}

/* ---- postlive 05/10/2026 ---- */
/* hero: la metà destra era quasi vuota (Lottie 400 px che parte vuota, finisce senza i riquadri e non si vede senza JS).
   Ora: illustrazione ferma al fotogramma completo (msp-cf-hero-0510.svg, estratta dalla stessa Lottie) a tutta colonna,
   alone chiaro e anello tratteggiato che gira piano; ingresso e lieve fluttuazione solo con transform, ferme fuori schermo
   (classe is-off dello strato v2 sulla hero) e con movimento ridotto. Visibile anche senza JS. Su telefono la colonna resta nascosta. */
.msp-v2 .ms-cf-hero .fusion-lottie-1{position:relative;isolation:isolate;width:100%!important;max-width:min(100%,560px)!important;margin-inline:auto!important;aspect-ratio:1/1}
.msp-v2 .ms-cf-hero .fusion-lottie-1>.fusion-lottie-animation{display:none!important}
.msp-v2 .ms-cf-hero .fusion-lottie-1::before{content:"";position:absolute;inset:3%;z-index:0;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.96) 0,rgba(255,245,234,.88) 36%,rgba(253,226,200,.5) 57%,rgba(253,226,200,0) 70.5%);
 border:1.5px dashed rgba(168,84,25,.22);animation:cfOrbita 90s linear infinite}
.msp-v2 .ms-cf-hero .fusion-lottie-1::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:url(msp-cf-hero-0510.svg) center/contain no-repeat;filter:drop-shadow(0 26px 30px rgba(127,60,15,.16));
 animation:cfIn .9s var(--v2-ease) both,cfFluttua 7s ease-in-out .9s infinite}
.msp-v2 .ms-cf-hero.is-off .fusion-lottie-1::before,.msp-v2 .ms-cf-hero.is-off .fusion-lottie-1::after{animation-play-state:paused}
@keyframes cfOrbita{to{transform:rotate(1turn)}}
@keyframes cfIn{from{transform:translateY(16px) scale(.94)}to{transform:none}}
@keyframes cfFluttua{0%,100%{transform:none}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.msp-v2 .ms-cf-hero .fusion-lottie-1::before,.msp-v2 .ms-cf-hero .fusion-lottie-1::after{animation:none!important}}

/* card dei prezzi su telefono e tablet stretto: «Attiva» a tutta larghezza come in Home e Piani */
@media (max-width:800px){
 .msp-v2 .ms-cf-piani .fusion-button-wrapper{display:block!important;width:100%!important}
 body.msp-v2 #main .ms-cf-piani a.fusion-button{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:48px;box-sizing:border-box}}

/* sezioni «Smart» e «FAQ» con lo stesso fondo bianco piatto e nessuna separazione: le FAQ passano su crema chiaro e la sezione
   sopra riceve un divisore «curva» (classi messe dal JS del gruppo; senza JS resta il cambio di fondo) */
.msp-v2 .fusion-fullwidth.ms-cf-faq{background:var(--v2-cream2)!important}
.msp-v2 .ms-cf-faq .fusion-faqs-wrapper .fusion-panel,.msp-v2 .ms-cf-faq .fusion-faqs-wrapper .panel-heading,.msp-v2 .ms-cf-faq .fusion-faqs-wrapper .panel-title a{background:#fff!important}
/* etichetta della prima card («prova» -> «Prova», come in Piani/V9) */
.msp-v2 .ms-cf-piani h3.fusion-title-heading::first-letter{text-transform:uppercase}