/* QUATTRO - il motion design delle pagine costruite con i componenti Q4.
 *
 * Tutto sta sotto body.quattro: la classe la mette il tema solo sulle pagine
 * segnate _quattro, e la specificita' serve a vincere sugli stili di base
 * degli elementi atomici di Elementor (padding, margini, pulsante blu).
 *
 * I colori: senza JavaScript ogni sezione porta i suoi (data-scena); con il
 * movimento li porta la radice e cambiano mentre si scorre.
 */

@property --n{syntax:"<integer>";initial-value:0;inherits:false}

/* Lenis. Sulle pagine di Elementor <html> riceve scroll-behavior:smooth
   scritto in linea: con Lenis attivo ogni suo passo di scorrimento ripartiva
   da capo e su Chrome la pagina non scorreva piu'. L'!important vince sullo
   stile in linea. Sono le regole che Lenis stesso chiede. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

:root{
  --fondo:#131517;--testo:#FFFFFF;--tenue:#A2A6AB;
  --blu:#0072CE;--grigio:#53565A;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-corpo:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  /* Il box standard dei contenuti: la larghezza "boxed" di Elementor. */
  --box:1140px;
}

html:not(.moto) body.quattro [data-scena="scuro"]{--fondo:#131517;--testo:#FFFFFF;--tenue:#A2A6AB}
html:not(.moto) body.quattro [data-scena="chiaro"]{--fondo:#FFFFFF;--testo:#131517;--tenue:#53565A}
html:not(.moto) body.quattro [data-scena="grigio"]{--fondo:#53565A;--testo:#FFFFFF;--tenue:#DADDE0}
html:not(.moto) body.quattro [data-scena="blu"]{--fondo:#0072CE;--testo:#FFFFFF;--tenue:#D6E8F7}

body.quattro{
  margin:0;background:var(--fondo);color:var(--testo);font:400 17px/1.6 var(--f-corpo);overflow-x:hidden;

  /* Gli elementi atomici nascono con padding, gap, margini e un pulsante
     blu: qui si azzerano, e ogni classe dichiara solo quello che vuole. */
  & .e-flexbox-base,& .e-div-block-base{display:block;padding:0;margin:0;gap:0;min-width:0;min-height:0;border:0;background:none}
  & .e-heading-base,& .e-paragraph-base{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
  & .e-button-base{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-decoration:none;box-shadow:none}
  /* Il documento del Theme Builder e il contenitore della testata tendono a
     stringersi al contenuto: la testata fissa ne ereditava la larghezza e
     logo e link finivano ammassati a sinistra. */
  & .elementor-location-header,& .elementor-location-footer{position:static;display:block;width:100%}
  & .testata-involucro{display:block;width:100%}

  & [data-scena]{background:var(--fondo);color:var(--testo)}
  html.moto & [data-scena]{background:transparent}
  & a{color:inherit}
  & :focus-visible{outline:3px solid var(--blu);outline-offset:4px;border-radius:4px}
  & a[href="#vuoto"]{display:none}
  /* Le colonne del menu e del piede con tutti i link spenti (pagine non
     ancora pubbliche) spariscono, titolo compreso. */
  & .mega-colonna:not(:has(a:not([href="#vuoto"]))),& .colonna-piede:not(:has(a:not([href="#vuoto"]))){display:none}

  & .etichetta{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
  & .gutter{padding-inline:var(--gutter)}
  & .mega{font-family:var(--f-display);font-weight:850;text-transform:uppercase;letter-spacing:-.01em;font-stretch:70%;font-variation-settings:"wdth" 70;line-height:.86;text-wrap:balance}
  & .parola{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
  & .lettera{display:inline-block;will-change:transform}
  & .corpo{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--tenue);max-width:46ch}

  /* Pulsanti */
  & .azioni{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  & .pulsante{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font:600 16px/1 var(--f-corpo);text-decoration:none;border:1.5px solid currentColor;transition:background-color .3s,color .3s,border-color .3s}
  & .pulsante--pieno{background:var(--blu);border-color:var(--blu);color:#FFFFFF}
  & .pulsante--pieno:hover{background:#005BA5;border-color:#005BA5}
  & .pulsante--linea{background:transparent;color:var(--testo)}
  & .pulsante--linea:hover{background:var(--testo);color:var(--fondo)}
  & [data-scena="blu"] .pulsante--pieno,& [data-scena="grigio"] .pulsante--pieno{background:#FFFFFF;border-color:#FFFFFF;color:#0072CE}
  & [data-scena="blu"] .pulsante--pieno:hover{background:#131517;border-color:#131517;color:#FFFFFF}
  & .link{display:inline-block;font:600 16px/1.2 var(--f-corpo);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}

  /* La farfalla del marchio: una tela sopra la pagina, sotto la testata, che
     non prende mai i clic. Quando c'e' lei, il pallino bianco del cursore si
     toglie di mezzo: due cose che inseguono il mouse sono una di troppo. */
  & .farfalla{position:fixed;inset:0;width:100vw;height:100vh;z-index:890;pointer-events:none}
  html.farfalla-viva.moto & .cursore{display:none}

  /* Cursore e avanzamento: li crea lo script */
  & .cursore{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FFFFFF;mix-blend-mode:difference;pointer-events:none;z-index:1000;transition:width .3s,height .3s,margin .3s;display:none}
  & .cursore.grande{width:72px;height:72px;margin:-36px 0 0 -36px}
  & .progresso{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--blu);transform-origin:left;transform:scaleX(0);z-index:990}
  @media (hover:hover) and (pointer:fine){html.moto & .cursore{display:block}}

  /* Testata e menu */
  & .testata{position:fixed;top:0;left:0;right:0;width:auto;max-width:none;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter);color:#FFFFFF;mix-blend-mode:difference;pointer-events:none}
  & .testata > *{pointer-events:auto}
  /* Elementor scrive le classi sull'immagine stessa, e il link le sta attorno. */
  & .e-image-link-base{display:block;line-height:0}
  & .marchio{display:block;width:clamp(112px,11vw,148px);height:auto}
  /* I blocchi atomici nascono larghi quanto il genitore: il gruppo di destra
     si prendeva tutta la riga e i link partivano da sinistra. */
  & .testata-destra{display:flex;width:auto;margin-left:auto;justify-content:flex-end;gap:26px;align-items:center;font:500 14px/1 var(--f-corpo)}
  & .testata-link{text-decoration:none;color:#FFFFFF}
  & .apri-menu{display:inline-block;font:500 14px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF;border:1.5px solid #FFFFFF;border-radius:999px;padding:11px 18px;cursor:pointer}
  & .menu-pieno{position:fixed;inset:0;z-index:950;background:#0072CE;color:#FFFFFF;display:grid;align-content:center;gap:30px;padding:90px var(--gutter) 40px;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
  & .menu-pieno.aperto{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
  & .menu-voci{display:grid;gap:4px;justify-items:start}
  & .voce-menu{font:850 clamp(40px,7vw,96px)/.95 var(--f-display);font-stretch:72%;font-variation-settings:"wdth" 72;text-transform:uppercase;text-decoration:none;transition:font-variation-settings .4s,font-stretch .4s}
  & .voce-menu:hover{font-stretch:118%;font-variation-settings:"wdth" 118}
  & .menu-sotto{display:flex;flex-wrap:wrap;gap:24px}
  & .menu-sotto a{font:500 14px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
  & .chiudi-menu{position:absolute;top:22px;right:var(--gutter)}
  /* Il megamenu: un pannello bianco che scende dall'alto (non tutto lo
     schermo), la pagina dietro si scurisce. Le voci salgono a cascata; al
     passaggio una freccia blu entra da sinistra e spinge la voce. */
  & .menu-pieno.mega{bottom:auto;max-height:100svh;overflow:auto;background:#FFFFFF;color:#131517;display:block;padding:clamp(88px,11vh,120px) var(--gutter) clamp(36px,6vh,64px);box-shadow:0 30px 80px rgba(0,0,0,.25)}
  & .mega .chiudi-menu{color:#131517;border-color:#131517}
  & .mega .mega-voce,& .mega .mega-vetrina-testo,& .mega .pulsante{text-transform:none}
  & .mega-griglia{width:100%;max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:clamp(24px,3vw,56px);align-items:start}
  & .mega-colonna{display:grid;gap:4px;justify-items:start;align-content:start}
  & .mega-titolo{margin:0 0 12px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#0072CE}
  & .mega-voce{position:relative;display:inline-flex;align-items:center;padding:7px 0;font:700 clamp(17px,1.35vw,21px)/1.2 var(--f-corpo);color:#131517;text-decoration:none;transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
  & .mega-voce::before{content:"→";display:inline-block;width:0;overflow:hidden;color:#0072CE;transition:width .35s cubic-bezier(.2,.8,.2,1)}
  & .mega-voce:hover,& .mega-voce:focus-visible{color:#0072CE}
  & .mega-voce:hover::before,& .mega-voce:focus-visible::before{width:1.3em}
  & .mega-colonna:nth-child(3) .mega-voce:not(:nth-child(2)){font-size:15px;font-weight:500;color:#53565A}
  & .mega-colonna:nth-child(3) .mega-voce:not(:nth-child(2)):hover{color:#0072CE}
  & .mega-vetrina{position:relative;display:grid;gap:14px;justify-items:start;padding:clamp(24px,2.4vw,34px);border-radius:22px;color:#FFFFFF;overflow:hidden;isolation:isolate;background:#0072CE}
  & .mega-vetrina::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(40% 40% at 30% 30%,#5AA7E6,transparent 70%),radial-gradient(45% 45% at 75% 70%,#00589F,transparent 70%);animation:q4-vetrina 9s ease-in-out infinite alternate}
  & .mega-etichetta{color:#D6E8F7}
  & .mega-vetrina-titolo{margin:0;font:800 clamp(24px,2.2vw,36px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase}
  & .mega-vetrina-testo{margin:0;font-size:15px;line-height:1.45;color:#D6E8F7}
  & .mega-colonna > *,& .mega-vetrina{opacity:0;transform:translateY(18px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
  & .mega.aperto .mega-colonna > *,& .mega.aperto .mega-vetrina{opacity:1;transform:none;transition-delay:calc(.25s + var(--i, 0) * .035s)}
  html.menu-su body::after{content:"";position:fixed;inset:0;z-index:940;background:rgba(19,21,23,.45);backdrop-filter:blur(3px);animation:q4-compare .4s ease-out both}
  @media (max-width:1100px){
    & .mega-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:640px){
    & .menu-pieno.mega{bottom:0}
    & .mega-griglia{grid-template-columns:minmax(0,1fr);gap:30px}
    & .mega-vetrina{order:-1}
  }

  /* 1. Apertura */
  & .eroe{position:relative;min-height:100svh;display:flex;padding:120px var(--gutter) 36px;overflow:hidden}
  /* Il video sta sotto le parole: muto, in giro senza fine, tagliato a
     riempire. Sopra, un velo scuro che tiene leggibile il titolo bianco. */
  & .eroe-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;border:0}
  & .eroe-video video{display:block;width:100%;height:100%;object-fit:cover}
  & .eroe::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(19,21,23,.74),rgba(19,21,23,.5) 42%,rgba(19,21,23,.88))}
  & .eroe-contenuto{position:relative;z-index:2}
  & .eroe-contenuto{flex:1;display:grid;grid-template-rows:1fr auto;gap:40px}
  & .eroe-testi{align-self:end;display:grid;gap:18px}
  & .titolo-eroe{font-size:clamp(54px,9.6vw,164px)}
  /* Elementor, salvando, toglie le classi dagli span dei testi: le righe del
     titolo sono i suoi span diretti, e l'ultima e' blu. */
  & .titolo-eroe > span,& .titolo-eroe > .riga{display:block}
  & .titolo-eroe > span:last-child{color:var(--blu)}
  & .cade{font:800 clamp(28px,4.2vw,70px)/1 var(--f-display);font-stretch:82%;font-variation-settings:"wdth" 82;text-transform:uppercase;color:var(--tenue);position:relative;z-index:2;pointer-events:none;width:max-content;max-width:100%}
  & .cade .parola{overflow:visible}
  & .eroe-piede{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
  & .destra{display:grid;gap:22px;justify-items:start}
  & .pavimento{display:flex;gap:18px;align-items:center}
  & .freccia-giu{display:inline-block;width:1.5px;height:44px;background:var(--tenue);position:relative;overflow:hidden}
  & .freccia-giu::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--testo)}

  /* 2. Il problema */
  /* La frase a sinistra e, a destra, il telefono che si apre: e' la scena che
     spiega la frase. Il compratore non cerca piu', chiede - e nella risposta
     ci sono tre nomi, non il tuo. */
  & .manifesto-frase{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(28px,5vw,80px);padding:110px var(--gutter)}
  & .manifesto-testi{display:grid;align-content:center;gap:28px}

  & .telefono{width:100%;display:grid;place-items:center;perspective:1700px}
  & .duo{position:relative;display:flex;gap:6px;width:min(100%,540px);aspect-ratio:1.5/1;transform-style:preserve-3d;filter:drop-shadow(0 34px 70px rgba(19,21,23,.3))}
  & .anta{position:relative;flex:1;border-radius:20px;background:#0E1114;border:1.5px solid rgba(255,255,255,.14);padding:12px}
  & .anta--destra{transform-origin:left center;transform-style:preserve-3d}
  & .anta--destra .schermo{backface-visibility:hidden}
  & .dorso{position:absolute;inset:0;border-radius:20px;background:linear-gradient(140deg,#20262C,#0B0E11);border:1.5px solid rgba(255,255,255,.12);transform:rotateY(180deg);backface-visibility:hidden}
  & .schermo{position:relative;height:100%;border-radius:13px;background:#14181C;display:grid;align-content:start;gap:11px;padding:14px;color:#FFFFFF;text-align:left}

  & .barra-app{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8A9AA8;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:10px}
  & .punto-app{width:8px;height:8px;border-radius:50%;background:#10A37F;display:block}
  & .bolla{border-radius:15px;padding:11px 13px;font-size:13.5px;line-height:1.42;max-width:94%}
  & .bolla--io{background:var(--blu);color:#FFFFFF;justify-self:end;border-bottom-right-radius:5px}
  & .attesa{display:flex;gap:5px;padding-left:4px}
  & .attesa span{display:block;width:7px;height:7px;border-radius:50%;background:#8A9AA8;animation:q4-attesa 1.2s ease-in-out infinite}
  & .attesa span:nth-child(2){animation-delay:.18s}
  & .attesa span:nth-child(3){animation-delay:.36s}
  & .titolo-risposta{font-size:12.5px;line-height:1.4;color:#AFC0CE}
  & .righe-risposta{display:grid;gap:8px}
  & .riga-risposta{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 11px}
  & .pallino-riga{flex:0 0 auto;display:block;width:7px;height:7px;border-radius:50%;background:#10A37F}
  & .testo-riga{font-size:12.5px;line-height:1.35;color:#E6EDF3}
  & .chiusa-risposta{margin-top:6px;font:800 clamp(15px,1.5vw,21px)/1.12 var(--f-display);font-stretch:84%;font-variation-settings:"wdth" 84;text-transform:uppercase;color:#6FB2EC}
  & .frase-ore{font:800 clamp(38px,6.2vw,104px)/.98 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.015em;text-transform:uppercase;max-width:16ch}
  & .frase-ore .parola{overflow:visible}
  & .ripetizioni{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding:0 var(--gutter) clamp(72px,9vw,120px)}
  & .ripetizione{display:grid;gap:14px;align-content:start;border-top:1.5px solid var(--testo);padding-top:18px}
  & .ripetizione-titolo{font:800 clamp(26px,2.6vw,38px)/1 var(--f-display);font-stretch:80%;font-variation-settings:"wdth" 80;text-transform:uppercase}
  & .ripetizione-testo{color:var(--tenue)}
  & .chiusa-ore{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;margin-top:clamp(28px,4vw,56px)}
  & .chiusa-testo{font:700 clamp(24px,2.6vw,36px)/1.15 var(--f-display);font-stretch:92%;font-variation-settings:"wdth" 92;max-width:30ch}

  /* I problemi che risolviamo. Senza movimento (e sul telefono) sono un
     elenco; col movimento, sul largo, si danno il cambio uno alla volta,
     grandi, e le lettere salgono dalla loro riga. */
  & .problemi-scena{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(28px,4vw,72px);padding-block:clamp(70px,10vh,110px)}
  & .problemi-scena .manifesto-testi{gap:clamp(16px,2.6vh,28px)}
  & .problemi-etichetta{margin:0}
  & .problemi{display:grid;border-top:1px solid rgba(19,21,23,.16)}
  & .problema{display:grid;grid-template-columns:3em minmax(0,1fr);gap:0 clamp(10px,1.4vw,22px);align-items:baseline;padding:clamp(7px,1.15vh,14px) 0;border-bottom:1px solid rgba(19,21,23,.16)}
  & .problema-n{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--tenue)}
  & .problema-corpo{display:grid;gap:.4em}
  & .problema-testo{margin:0;font:800 clamp(22px,min(2.9vw,4.3vh),48px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.01em;text-transform:uppercase;color:var(--testo)}
  & .problema-soluzione{margin:0;font-size:clamp(14px,1.02vw,15.5px);line-height:1.45;color:var(--tenue)}
  @media (min-width:901px){
    html.moto & .problemi{border:0}
    html.moto & .problema{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,26px);padding:0;border:0}
    html.moto & .problema-n{font-size:clamp(12px,.95vw,15px);color:var(--blu)}
    html.moto & .problema-n::after{content:" / 06";color:var(--tenue)}
    html.moto & .problema-corpo{gap:clamp(16px,2.6vh,30px)}
    html.moto & .problema-testo{font-size:clamp(36px,min(4.2vw,8.4vh),88px);line-height:.94}
    html.moto & .problema-testo .parola{white-space:nowrap}
    html.moto & .problema-soluzione{font-size:clamp(16px,1.3vw,21px);max-width:34ch;color:var(--testo)}
  }

  /* Il monitor: dentro lo schermo un sito vero per ogni problema. Sopra,
     il corpo a segmenti del bruco. Tutto si misura in cqw, la larghezza
     dello schermo: il sito si rimpicciolisce intero col monitor. */
  & .problemi-monitor{position:relative;width:100%;--bruco:#9DC33B}
  & .monitor-interno{display:grid;gap:clamp(10px,1.6vh,18px)}
  & .monitor-testa{display:flex;align-items:center;gap:14px;padding-left:5.7%}
  & .banco-stadio{display:block;white-space:nowrap;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#5B7A22}
  & .segmenti{display:flex;gap:4px;transform-origin:left center}
  & .segmento{display:block;width:clamp(14px,1.3vw,20px);height:12px;border-radius:7px;background:#DCE3CF;box-shadow:inset 0 -3px 0 rgba(34,40,26,0)}
  & .monitor{position:relative;width:100%;aspect-ratio:1800/1217;background:url("../img/monitor.webp") center/100% 100% no-repeat;transform-origin:50% 90%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
  & .monitor-schermo{position:absolute;left:5.714%;right:5.714%;top:2.641%;bottom:25.493%;width:auto;height:auto;overflow:hidden;border-radius:2px;background:#FFFFFF;container-type:inline-size}
  & .sito{position:absolute;inset:0;width:auto;height:auto;display:flex;flex-direction:column;background:#FFFFFF;color:#131517;font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;visibility:hidden;opacity:0}
  & .sito--cerca{visibility:visible;opacity:1}
  & .sito-barra{flex:0 0 auto;display:flex;align-items:center;gap:1.4cqw;height:4.2cqw;padding:0 1.6cqw;background:#ECEEF1;border-bottom:1px solid #DDE1E5}
  & .sito-pallini{display:flex;gap:.6cqw;flex:0 0 auto}
  & .sito-pallino{display:block;width:1cqw;height:1cqw;border-radius:50%;background:#FF5F57}
  & .sito-pallino:nth-child(2){background:#FEBC2E}
  & .sito-pallino:nth-child(3){background:#28C840}
  & .sito-url{display:block;flex:0 1 58%;margin:0 auto;background:#FFFFFF;border-radius:99px;padding:.7cqw 1.6cqw;font:500 1.2cqw/1 var(--f-mono);color:#53565A;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  & .sito-schede{display:flex;gap:.4cqw;align-self:flex-end}
  & .sito-scheda{display:block;padding:.9cqw 1.8cqw;border-radius:.8cqw .8cqw 0 0;font:500 1.15cqw/1 var(--f-mono);color:#8A9098}
  & .sito-corpo{position:relative;flex:1;min-height:0;width:auto;padding:2.4cqw 3.2cqw;overflow:hidden}
  & .sito-nav{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.6cqw;margin-bottom:2.4cqw;border-bottom:1px solid #EEF0F2}
  & .sito-logo{display:block;font:800 1.5cqw/1 var(--f-display);letter-spacing:.06em}
  & .sito-menu{display:flex;gap:2.2cqw}
  & .sito-menu-voce{display:block;font-size:1.2cqw;color:#53565A}
  & .sito-h1{margin:0 0 2.2cqw;font:800 3.8cqw/1 var(--f-display);letter-spacing:-.01em}
  & .sito-riga{display:block;height:.8cqw;border-radius:.4cqw;background:#E8EBEE}
  & .sito-riga--corta{width:60%}
  & .sito-timbro{position:absolute;right:4cqw;bottom:4cqw;margin:0;padding:1cqw 2cqw;border:.35cqw solid #C2362B;border-radius:1cqw;color:#C2362B;background:rgba(255,255,255,.92);
    font:800 2.8cqw/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase;transform:rotate(-7deg);opacity:0;z-index:3}
  & .sito-timbro--nero{color:#131517;border-color:#131517}

  /* 1. La ricerca */
  & .cerca-testa{display:flex;align-items:center;gap:2.4cqw;margin-bottom:2.4cqw}
  & .cerca-logo{display:block;font:800 2.8cqw/1 var(--f-display);color:var(--blu)}
  & .cerca-box{flex:1;display:flex;align-items:center;border:1px solid #DDE1E5;border-radius:99px;padding:1.1cqw 2.2cqw;box-shadow:0 .3cqw 1cqw rgba(0,0,0,.06)}
  & .cerca-query{display:block;font-size:1.5cqw;white-space:nowrap;overflow:hidden}
  & .cerca-lista{display:grid;gap:2cqw;max-width:64%}
  & .cerca-ris{display:grid;gap:.6cqw}
  & .cerca-ris-url{display:block;font-size:1.1cqw;color:#3E7B1E}
  & .cerca-ris-tit{display:block;font-size:1.75cqw;font-weight:600;color:#1A56C4}
  & .cerca-pagine{position:absolute;left:3.2cqw;bottom:2.6cqw;display:flex;align-items:center;gap:1.2cqw;width:auto}
  & .cerca-pag{display:grid;place-items:center;width:3.2cqw;height:3.2cqw;border-radius:50%;font-size:1.35cqw;color:#1A56C4;background:#F1F3F5}
  & .cerca-pag--tu{background:#131517;color:#FFFFFF}
  & .cerca-tu{display:block;margin-left:1cqw;font:700 1.6cqw/1 var(--f-display);color:#C2362B}

  /* 2. La chat */
  & .chat-corpo{display:flex;padding:0}
  & .chat-lato{flex:0 0 18%;width:auto;display:grid;align-content:start;gap:1.3cqw;padding:2.4cqw 1.8cqw;background:#F4F5F7}
  & .chat-lato-riga{display:block;height:.9cqw;border-radius:.45cqw;background:#DCE0E5}
  & .chat-main{position:relative;flex:1;width:auto;display:flex;flex-direction:column;gap:1.8cqw;padding:2.4cqw 4cqw}
  & .chat-io{align-self:flex-end;max-width:62%;margin:0;padding:1.2cqw 1.8cqw;border-radius:2cqw 2cqw .6cqw 2cqw;background:var(--blu);color:#FFFFFF;font-size:1.45cqw;line-height:1.35}
  & .chat-ia{display:grid;gap:.8cqw;max-width:80%}
  & .chat-ia-t,& .chat-ia-voce{margin:0;font-size:1.45cqw;line-height:1.4}
  & .chat-ia-voce{padding:.7cqw 1.3cqw;border-radius:.8cqw;background:#F4F5F7}
  & .chat-fine{margin:0;font:800 3.6cqw/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase;color:#C2362B}
  & .chat-input{margin-top:auto;border:1px solid #DDE1E5;border-radius:99px;padding:1.1cqw 2.2cqw}
  & .chat-input-t{display:block;font-size:1.3cqw;color:#9AA0A6}

  /* 3. Le news */
  & .news-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2cqw}
  & .news-card{display:grid;gap:.9cqw}
  & .news-foto{position:relative;aspect-ratio:4/3;border-radius:1cqw;overflow:hidden;background:linear-gradient(140deg,#D5DCE3,#8C99A6)}
  & .news-foto::after{content:"";position:absolute;left:28%;top:30%;width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F4F6F8,#6E7C8A 70%);box-shadow:1.2cqw 1.2cqw 2cqw rgba(0,0,0,.18)}
  & .news-foto--2{background:linear-gradient(140deg,#E3DDD3,#9C8F7C)}
  & .news-foto--3{background:linear-gradient(140deg,#D8E2D6,#7E9179)}
  & .news-data{display:block;font-size:1.1cqw;color:#8A9098}
  & .news-tit{display:block;font-size:1.6cqw;font-weight:700}

  /* 4. Trova la differenza */
  & .uguali-corpo::after{content:"";position:absolute;right:3.2cqw;top:10.5cqw;width:30cqw;height:27cqw;border-radius:1.2cqw;background:linear-gradient(140deg,#A9B8C6,#56687A)}
  & .uguali-loghi{position:relative;width:24cqw;height:1.6cqw}
  & .uguali-logo{position:absolute;left:0;top:0;opacity:0}
  & .uguali-logo:first-child{opacity:1}
  & .uguali-eroe{position:relative;z-index:1;display:grid;gap:1.8cqw;justify-items:start;max-width:52%;padding-top:2cqw}
  & .uguali-h{margin:0;font:800 4.4cqw/1.02 var(--f-display);letter-spacing:-.01em}
  & .uguali-s{margin:0;font-size:1.7cqw;color:#53565A}
  & .uguali-b{display:inline-block;padding:1.1cqw 2.4cqw;border-radius:99px;background:#131517;color:#FFFFFF;font-size:1.3cqw}

  /* 5. La sostenibilita' nel cassetto */
  & .sost-vuoto{display:grid;place-items:center;height:18cqw;max-width:56%;border:.25cqw dashed #C9CDC2;border-radius:1.2cqw}
  & .sost-vuoto-t{display:block;font:500 1.3cqw/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#A2A6AB}
  & .sost-pdf{position:absolute;right:3.2cqw;top:8cqw;width:36cqw;display:grid;gap:1.7cqw;padding:2.2cqw;border-radius:1cqw;background:#FFFFFF;box-shadow:0 1.6cqw 4cqw rgba(19,21,23,.22)}
  & .pdf-testa{display:grid;gap:.5cqw;padding-bottom:1.3cqw;border-bottom:1px solid #EEF0F2}
  & .pdf-nome{display:block;font-weight:700;font-size:1.4cqw}
  & .pdf-cartella{display:block;font-size:1.1cqw;color:#8A9098}
  & .pdf-voce{display:grid;gap:.6cqw}
  & .pdf-etichetta{display:block;font-size:1.15cqw;color:#53565A}
  & .pdf-barra{height:1.2cqw;border-radius:.6cqw;background:#EEF1E8;overflow:hidden}
  & .pdf-pieno{height:100%;border-radius:.6cqw;background:linear-gradient(90deg,var(--bruco),#5B8A1E);transform-origin:left center;transform:scaleX(0)}

  /* 6. La posta del preventivo */
  & .posta-corpo{display:flex;padding:0}
  & .posta-lato{flex:0 0 20%;width:auto;display:grid;align-content:start;gap:.9cqw;padding:2.2cqw 1.4cqw;background:#F4F5F7}
  & .posta-cartella{display:block;padding:.7cqw 1.1cqw;border-radius:.6cqw;font-size:1.25cqw;color:#53565A}
  & .posta-cartella--si{background:#DCE8F7;color:#0B4A8B;font-weight:600}
  & .posta-main{flex:1;width:auto;display:flex;flex-direction:column}
  & .posta-attesa{display:flex;align-items:baseline;gap:1cqw;padding:1.6cqw 2.4cqw;background:#FFF4F2;border-bottom:1px solid #F3D4CF}
  & .posta-attesa-t,& .posta-ore-u{display:block;font-size:1.35cqw;color:#8A2B22}
  & .posta-ore{--n:0;counter-reset:ore var(--n);display:block;font:800 3.2cqw/1 var(--f-display);color:#C2362B}
  & .posta-ore::after{content:counter(ore)}
  & .mail-riga{display:grid;grid-template-columns:22% minmax(0,1fr);gap:1.6cqw;padding:1.45cqw 2.4cqw;border-bottom:1px solid #EEF0F2}
  & .mail-da{display:block;font-weight:700;font-size:1.3cqw}
  & .mail-ogg{display:block;font-size:1.3cqw;color:#53565A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Il ponte: dai problemi a come li risolviamo. Fascia blu Weevo a tutta
     larghezza, piu' bassa di uno schermo; testi e pulsanti nel box standard.
     Davanti al blu, onde di linee bianche semitrasparenti che si muovono
     mentre si scorre: le disegna lo script, in un SVG dentro .ponte-sfondo. */
  & .ponte{position:relative;isolation:isolate;overflow:hidden;padding:clamp(90px,14vh,150px) var(--gutter);color:#FFFFFF;background:#0072CE}
  /* Il blu e' suo sempre: col movimento le sezioni sono trasparenti e il
     colore lo porta la pagina, ma qui il blu deve esserci da subito. */
  html.moto & .ponte{background:#0072CE}
  & .ponte-sfondo{position:absolute;inset:0;width:auto;z-index:-1;overflow:hidden;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
  & .ponte-onde{position:absolute;inset:0;width:100%;height:100%;display:block}
  & .ponte-onde path{fill:none;stroke:#FFFFFF;stroke-width:1.2;vector-effect:non-scaling-stroke}

  /* Il menu delle sezioni: una colonna di punti a destra, a meta' altezza.
     Il punto della sezione in cui si e' si allunga; passandoci sopra
     compare il nome. Sta sopra a tutto e si inverte sul fondo, come la
     testata, cosi' si vede sul chiaro e sullo scuro. */
  & .indice{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;z-index:870;transform:translateY(-50%);display:grid;gap:4px;mix-blend-mode:difference;color:#FFFFFF}
  & .indice-voce{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:22px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  & .indice-punto{display:block;width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.45;transition:height .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
  & .indice-nome{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s}
  & .indice-voce:hover .indice-nome,& .indice-voce:focus-visible .indice-nome,& .indice-voce.si .indice-nome{opacity:1;transform:none}
  & .indice-voce.si .indice-punto{height:22px;opacity:1}
  & .indice-voce:hover .indice-punto{opacity:1}
  & .indice-voce:focus-visible{outline:none}
  & .indice-voce:focus-visible .indice-punto{box-shadow:0 0 0 3px currentColor}
  @media (max-width:900px){ & .indice{display:none} }
  & .ponte-box{position:relative;width:100%;max-width:var(--box);margin:0 auto;display:grid;gap:clamp(18px,3vh,32px)}
  & .ponte-etichetta{margin:0;color:rgba(255,255,255,.78)}
  & .ponte-titolo{margin:0;max-width:15ch;font:800 clamp(40px,6.2vw,108px)/.92 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.015em;text-transform:uppercase;color:#FFFFFF}
  & .ponte-piede{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
  & .ponte-testo{margin:0;max-width:46ch;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(255,255,255,.9)}
  & .ponte-azioni{display:flex;flex-wrap:wrap;gap:12px}
  & .pulsante--bianco{background:#FFFFFF;border-color:#FFFFFF;color:#0072CE}
  & .pulsante--bianco:hover{background:#131517;border-color:#131517;color:#FFFFFF}
  & .pulsante--linea-bianca{background:transparent;border-color:rgba(255,255,255,.7);color:#FFFFFF}
  & .pulsante--linea-bianca:hover{background:#FFFFFF;border-color:#FFFFFF;color:#0072CE}

  /* L'invito: lo stesso componente del ponte, su bianco, fra i casi studio e
     la fabbrica. Il pulsante pieno diventa blu, quello a filo scuro. */
  & .invito{padding:clamp(90px,14vh,150px) var(--gutter)}
  & .invito .ponte-etichetta{color:var(--blu)}
  & .invito .ponte-titolo{color:var(--testo)}
  & .invito .ponte-testo{color:var(--tenue)}
  & .invito .pulsante--bianco{background:var(--blu);border-color:var(--blu);color:#FFFFFF}
  & .invito .pulsante--bianco:hover{background:#131517;border-color:#131517;color:#FFFFFF}
  & .invito .pulsante--linea-bianca{background:transparent;border-color:currentColor;color:var(--testo)}
  & .invito .pulsante--linea-bianca:hover{background:var(--testo);border-color:var(--testo);color:var(--fondo)}

  /* Per chi lo facciamo: il carosello dei casi studio, come una seconda
     hero. Ogni caso e' una slide a tutto schermo - la foto riempie, i testi
     stanno nel box standard - e le slide scorrono in orizzontale (col
     trascinamento, il dito o le frecce) fermandosi una alla volta. Il
     titolo della sezione sta sopra la foto; contatore, frecce e avanzamento
     in basso a destra. Foto: 2400x1500 o 2560x1440, soggetto al centro. */
  & .per-chi{position:relative;padding:0;overflow:hidden}
  /* La testa della sezione sta fuori dalla slide, sopra: una fascia bassa,
     il titolo a sinistra e la frase a destra sulla stessa riga. */
  & .casi-testa{position:relative;z-index:3;width:100%;max-width:none;margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 48px;
    padding:clamp(56px,9vh,96px) max(var(--gutter),calc((100vw - var(--box)) / 2)) clamp(22px,3.4vh,34px)}
  & .casi-testa-testi{display:contents}
  & .casi-testa .etichetta{flex:0 0 100%;margin:0}
  & .casi-titolo-grande{margin:0;font:800 clamp(38px,5vw,88px)/.9 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.015em;text-transform:uppercase;color:var(--testo)}
  & .casi-sottotitolo{margin:0;max-width:34ch;font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:var(--tenue);text-align:right}
  & .casi-comandi{position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - var(--box)) / 2));bottom:clamp(40px,7vh,72px);display:flex;align-items:center;gap:14px;color:#FFFFFF}
  & .casi-conta{font:500 13px/1 var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.7);min-width:5.5em;text-align:right}
  & .casi-conta b{color:#FFFFFF;font-weight:500}
  & .casi-freccia{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(19,21,23,.2);color:#FFFFFF;font-size:20px;cursor:pointer;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s,opacity .25s}
  & .casi-freccia:hover{background:#FFFFFF;color:#131517}
  & .casi-freccia[disabled]{opacity:.3;cursor:default;background:rgba(19,21,23,.2);color:#FFFFFF}
  & .casi-avanza{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
  & .casi-avanza span{display:block;height:100%;background:#FFFFFF;transform-origin:left center;transform:scaleX(0)}
  & .casi-pista{position:relative;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:0;cursor:grab}
  & .casi-pista::-webkit-scrollbar{display:none}
  & .casi-pista.trascina{cursor:grabbing;scroll-snap-type:none}
  & .casi-pista.trascina *{pointer-events:none}
  & .casi-pista > .e-component,& .casi-pista > *{flex:0 0 100%;width:100%}
  & .caso-slide{position:relative;display:block;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#131517;color:#FFFFFF;scroll-snap-align:start;scroll-snap-stop:always}
  & .caso-foto,& .caso-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
  & .caso-foto{inset:0 -10%;width:auto;will-change:transform}
  & .caso-velo{position:absolute;inset:0;width:auto;background:linear-gradient(180deg,rgba(19,21,23,.6) 0,rgba(19,21,23,0) 34%,rgba(19,21,23,0) 46%,rgba(19,21,23,.88) 100%)}
  & .caso-testi{position:absolute;left:0;right:0;bottom:0;width:auto;display:grid;gap:clamp(14px,2.2vh,24px);
    padding:0 max(var(--gutter),calc((100vw - var(--box)) / 2)) clamp(40px,7vh,72px);padding-right:calc(max(var(--gutter),calc((100vw - var(--box)) / 2)) + 240px);will-change:transform}
  & .caso-chi{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
  & .caso-settore{color:#8FC4F2}
  & .caso-cliente{display:block;font-weight:600;font-size:15px;color:rgba(255,255,255,.85)}
  & .caso-grande-titolo{margin:0;max-width:20ch;font:800 clamp(30px,3.6vw,64px)/.95 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.012em;text-transform:uppercase;color:#FFFFFF}
  & .caso-piede{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px clamp(28px,4vw,64px)}
  & .caso-numeri{display:flex;gap:clamp(20px,3vw,48px)}
  & .caso-numero{display:grid;gap:4px}
  & .caso-n{display:block;font:800 clamp(30px,3.2vw,54px)/1 var(--f-display);color:#FFFFFF}
  & .caso-n-l{display:block;font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
  & .caso-link{color:#FFFFFF}
  /* Il caso a livelli, come la hero: il palco 3:2 copre la slide; dentro,
     lo sfondo, il nome enorme e il soggetto scontornato davanti, che ne copre
     un pezzo. Dove sta il soggetto e gli effetti li decide lo script leggendo
     la "regia" del caso; sul telefono il palco si sposta per tenerlo in
     quadro. L'acqua e' un canvas sopra al soggetto. */
  & .caso-palco{position:absolute;left:0;top:50%;width:max(100%,150svh);aspect-ratio:3/2;will-change:transform}
  & .caso-sfondo,& .caso-sfondo img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover}
  & .caso-sfondo{will-change:transform}
  & .caso-nome-grande{position:absolute;left:0;right:0;top:34%;margin:0;transform:translateY(-50%);text-align:center;white-space:nowrap;
    font:800 clamp(56px,11vw,230px)/.85 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.02em;text-transform:uppercase;color:#FFFFFF;text-shadow:0 10px 60px rgba(0,0,0,.18)}
  & .caso-soggetto{position:absolute;display:block;height:auto;max-width:none;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35));will-change:transform}
  & .caso-acqua{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  & .caso-regia{display:none}
  & .caso-slide--livelli .caso-velo{background:linear-gradient(180deg,rgba(19,21,23,.5) 0,rgba(19,21,23,0) 30%,rgba(19,21,23,0) 52%,rgba(19,21,23,.86) 100%)}
  @media (prefers-reduced-motion:no-preference){
    & .caso-sfondo img{animation:q4-respiro 22s ease-in-out infinite alternate}
  }
  @media (max-width:900px){
    & .casi-sottotitolo{text-align:left}
    & .caso-testi{padding-right:var(--gutter);padding-bottom:120px}
    & .casi-comandi{bottom:36px}
    & .casi-freccia{width:48px;height:48px}
    /* Sul telefono il soggetto copriva mezzo nome del cliente: il nome passa
       davanti, con un'ombra che lo stacca dalla foto. */
    & .caso-nome-grande{z-index:2;text-shadow:0 2px 18px rgba(0,0,0,.45)}
  }

  /* Le web app: le nostre (bordo) e quelle dei clienti (piene, blu),
     mescolate in una griglia; poi l'assessment, quattro passi su una linea
     che si disegna mentre si scorre. Tutto nel box standard. */
  & .app{--box-app:calc(var(--box) + 240px);padding:clamp(90px,13vh,150px) var(--gutter)}
  & .app-testa{width:100%;max-width:var(--box-app);margin-inline:auto}
  & .app-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 48px;margin-bottom:clamp(36px,6vh,64px)}
  & .app-testa-titoli{display:grid;gap:14px}
  & .app-titolo{margin:0;font:800 clamp(44px,6.4vw,112px)/.9 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.015em;text-transform:uppercase}
  & .app-testo{margin:0;max-width:40ch;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--tenue)}
  /* Il flusso di lavoro, largo quasi quanto lo schermo: sopra ogni tappa
     una piccola scena animata (la mappa dei processi con la lente, il
     prototipo che si costruisce, l'app collegata ai sistemi, il lucchetto
     che chiude codice, dati e server); sotto, la linea con i nodi. Il pieno
     avanza con lo scorrimento e accende le tappe; ogni scena parte quando
     la sua tappa si accende e poi continua a vivere da sola. */
  & .flusso{width:100%;max-width:min(1400px,100%);margin:0 auto clamp(100px,15vh,170px);display:grid;gap:clamp(40px,7vh,72px)}
  & .flusso-testa{width:100%;max-width:var(--box);margin-inline:auto;display:grid;gap:14px}
  & .flusso-titolo{margin:0;font:800 clamp(38px,5vw,88px)/.9 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.015em;text-transform:uppercase}
  & .flusso-binario{--nodo:46px;--scena:clamp(150px,13vw,200px);--spazio:clamp(24px,3vw,48px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spazio);padding-top:calc(var(--scena) + 30px)}
  & .flusso-binario > *{min-width:0}
  & .flusso-traccia,& .flusso-pieno{position:absolute;left:calc(var(--nodo) / 2);right:calc((100% - 3 * var(--spazio)) / 4 - var(--nodo) / 2);top:calc(var(--scena) + 30px + var(--nodo) / 2 - 1.5px);height:3px;width:auto;border-radius:3px}
  & .flusso-traccia{background:rgba(19,21,23,.1)}
  & .flusso-pieno{background:repeating-linear-gradient(90deg,#0072CE 0 18px,rgba(0,114,206,.3) 18px 26px);background-size:26px 100%;animation:q4-dati 1.1s linear infinite;clip-path:inset(0 0 0 0)}
  & .flusso-pieno::after{content:"";position:absolute;top:50%;left:0;width:110px;height:16px;margin-top:-8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,114,206,.75),rgba(0,114,206,0));animation:q4-segnale 3.2s cubic-bezier(.5,0,.5,1) infinite}
  & .flusso-passo{position:relative;z-index:1;display:grid;gap:12px;align-content:start;transition:opacity .5s}
  & .flusso-scena{position:absolute;left:0;right:0;top:calc(-1 * (var(--scena) + 30px));height:var(--scena);display:flex;align-items:flex-end}
  & .flusso-scena svg{display:block;height:100%;width:auto;max-width:100%;overflow:visible}
  & .flusso-nodo{position:relative;display:grid;place-items:center;width:var(--nodo);height:var(--nodo);border-radius:50%;border:2px solid rgba(19,21,23,.2);background:#FFFFFF;font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--testo);transition:background .45s,color .45s,border-color .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
  & .flusso-nodo::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #0072CE;opacity:0}
  & .flusso-passo.acceso .flusso-nodo{background:#0072CE;border-color:#0072CE;color:#FFFFFF;transform:scale(1.08)}
  & .flusso-passo.acceso .flusso-nodo::after{animation:q4-onda 2.2s ease-out infinite}
  & .flusso-t{margin:6px 0 0;font:800 clamp(24px,2.1vw,34px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase}
  & .flusso-d{margin:0;max-width:32ch;font-size:15px;line-height:1.5;color:var(--tenue)}
  html.moto & .flusso-passo{opacity:.4}
  html.moto & .flusso-passo.acceso{opacity:1}

  /* Le nostre web app: non schede ma un elenco, una per riga, col nome
     grande. Il filetto si disegna quando la riga arriva; passandoci sopra
     una fascia blu la riempie da sinistra. L'ultima riga e' quella su
     misura: il blu c'e' sempre, e sotto al titolo gli esempi si scrivono.
     L'elenco e' piu' largo del box: AIRISTANDROS, il nome piu' lungo,
     misura quasi 7 volte il corpo e nel box sfondava nella descrizione. */
  & .app-elenco{width:100%;max-width:var(--box-app);margin-inline:auto;display:grid;border-bottom:1px solid rgba(255,255,255,.18)}
  & .app-elenco > *{min-width:0}
  & .app-riga{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,30ch) 104px;align-items:center;gap:12px 28px;padding:clamp(20px,2.6vh,30px) 18px;isolation:isolate}
  & .app-riga::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(19,21,23,.16);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
  & .app-riga::after{content:"";position:absolute;inset:0;z-index:-1;background:#0072CE;transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  & .app-riga:hover::after{transform:none}
  & .app-riga-n{font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--tenue);transition:color .3s}
  & .app-riga-nome{margin:0;font:800 clamp(38px,5.2vw,92px)/.92 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.01em;text-transform:uppercase;color:var(--testo);transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
  & .app-riga:hover .app-riga-nome{transform:translateX(14px)}
  & .app-riga-desc{margin:0;font-size:15.5px;line-height:1.45;color:var(--tenue);transition:color .3s}
  & .app-riga:hover .app-riga-desc,& .app-riga:hover .app-riga-nome,& .app-riga:hover .app-riga-n,& .app-riga:hover .app-riga-tipo{color:#FFFFFF}
  & .app-riga-tipo{justify-self:end;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);transition:color .3s;text-align:right}
  html.moto & .app-riga:not(.entra)::before{transform:scaleX(0)}
  html.moto & .app-riga.entra .app-riga-nome{animation:q4-riga .9s cubic-bezier(.2,.8,.2,1) backwards}
  html.moto & .app-riga.entra .app-riga-desc,html.moto & .app-riga.entra .app-riga-tipo{animation:q4-compare .9s .15s ease-out backwards}
  & .app-tua{grid-template-columns:56px minmax(0,1fr) minmax(0,30ch);align-items:start;padding-block:clamp(34px,5vh,56px)}
  & .app-tua::after{transform:none;background:linear-gradient(110deg,#0072CE,#00589F)}
  & .app-tua:hover .app-riga-nome{transform:none}
  & .app-tua .app-riga-n{color:rgba(255,255,255,.8);padding-top:6px}
  & .app-tua .app-tua-corpo{display:grid !important;gap:14px;min-width:0}
  & .app-tua-corpo .app-riga-tipo{justify-self:start;text-align:left;color:#FFFFFF}
  & .app-tua-esempi{margin:0;min-height:1.4em;font:500 clamp(17px,1.6vw,24px)/1.4 var(--f-mono);color:#D6E8F7}
  & .app-tua-esempi .scrive::before{content:"> ";color:#5AA7E6}
  & .app-tua-esempi .cursore{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#FFFFFF;animation:q4-cursore 1s steps(1) infinite}
  & .app-tua .app-tua-lato{display:grid !important;gap:22px;justify-items:start;align-content:start;padding-top:6px}
  & .app-tua .app-riga-desc,& .app-tua .app-riga-nome{color:#FFFFFF}
  /* Tablet e portatili piccoli: il tipo va sotto la descrizione, cosi' il
     nome ha la colonna piu' larga. */
  @media (min-width:901px) and (max-width:1180px){
    & .app-riga{grid-template-columns:56px minmax(0,1fr) minmax(0,26ch)}
    & .app-riga-tipo{grid-column:3;justify-self:start;text-align:left}
    & .app-tua{grid-template-columns:56px minmax(0,1fr) minmax(0,26ch)}
  }
  @media (max-width:900px){
    & .flusso-binario{--nodo:40px;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:0;padding-left:calc(var(--nodo) + 18px)}
    & .flusso-traccia,& .flusso-pieno{left:calc(var(--nodo) / 2 - 1.5px);right:auto;top:calc(var(--nodo) / 2);bottom:calc(var(--nodo) / 2);width:3px;height:auto}
    & .flusso-pieno{background:repeating-linear-gradient(180deg,#0072CE 0 18px,rgba(0,114,206,.3) 18px 26px);background-size:100% 26px;animation-name:q4-dati-giu}
    & .flusso-pieno::after{display:none}
    & .flusso-scena{position:static;height:150px;margin-bottom:4px}
    & .flusso-nodo{position:absolute;left:calc(-1 * var(--nodo) - 18px);top:0}
    & .flusso-t{margin-top:4px}
    & .app-riga{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding-inline:6px}
    & .app-riga-nome{font-size:clamp(26px,9vw,44px)}
    & .app-riga-desc,& .app-riga-tipo{grid-column:2}
    & .app-riga-tipo{justify-self:start;text-align:left}
    & .app-tua{grid-template-columns:40px minmax(0,1fr);padding-inline:14px}
    & .app-tua-lato{grid-column:2}
  }

  & .ripetizioni--chiusa{grid-template-columns:minmax(0,1fr);padding-top:clamp(8px,2vw,24px)}
  & .ripetizioni--chiusa .chiusa-ore{margin-top:0}

  /* 3. Cosa facciamo, in orizzontale */
  /* Senza movimento i pannelli stanno uno sotto l'altro: la fascia
     orizzontale serve solo quando lo scorrimento la fa avanzare. */
  & .aree{overflow:hidden}
  & .pannello{position:relative;display:grid;align-content:end;gap:22px;padding:90px var(--gutter);border-top:1px solid rgba(162,166,171,.25);overflow:hidden}
  & .pannello--intro{border-top:0;align-content:center}
  @media (min-width:901px){
    html.moto & .binario{display:flex;width:max-content}
    html.moto & .pannello{width:78vw;min-height:100svh;padding:120px var(--gutter) 72px;border-top:0;border-left:1px solid rgba(162,166,171,.25)}
    html.moto & .pannello--intro{width:62vw;border-left:0}
  }
  & .pannello--intro .mega{font-size:clamp(56px,8.4vw,150px)}
  & .pannello-titolo{font-size:clamp(52px,8.4vw,150px);position:relative;z-index:1;max-width:10ch}
  & .pannello > :not(.forma){position:relative;z-index:1}
  /* La bolla: una per pannello, organica, piatta, nel blu Weevo e nelle sue
     variazioni. Si muove da sola - si deforma, gira e respira come la bolla
     di QUATTRO, e in piu' va un po' alla deriva - e si muove anche con lo
     scorrimento: quello lo fa lo script sulla .forma, che fa da contenitore;
     la bolla e' il suo ::before. */
  & .forma{position:absolute;right:-4vw;top:8vh;width:40vw;height:40vw;max-width:600px;max-height:600px;pointer-events:none}
  & .forma::before{content:"";position:absolute;inset:6%;background:#0072CE;border-radius:62% 38% 46% 54%/60% 44% 56% 40%;will-change:transform,border-radius}
  & .pannello:nth-child(3) .forma::before{background:#3D8FDB}
  & .pannello:nth-child(4) .forma::before{background:#00589F}
  & .pannello:nth-child(5) .forma::before{background:#5AA7E6}
  & .pannello:nth-child(6) .forma::before{background:#0B4F8A}
  & .pannello:nth-child(7) .forma::before{background:#2F82D0}
  @media (prefers-reduced-motion:no-preference){
    & .forma::before{animation:q4-bolla 12s ease-in-out infinite,q4-alla-deriva 9s ease-in-out infinite alternate}
    & .pannello:nth-child(odd) .forma::before{animation-duration:14s,11s;animation-direction:reverse,alternate-reverse}
    & .pannello:nth-child(3n) .forma::before{animation-duration:10s,8s}
  }
  /* La deformazione e la rotazione, come la bolla di prima; la deriva usa
     la proprieta' translate, cosi' le due si sommano. */

  /* 4. Un contenuto, cinque canali */
  & .officina{padding:110px var(--gutter) 60px}
  & .officina-interno{min-height:calc(100svh - 170px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
  & .officina-testi{display:grid;gap:22px}
  & .officina-titolo{font-size:clamp(46px,6.4vw,110px)}
  & .banco{position:relative;aspect-ratio:5/4;width:100%;max-width:100%;border-radius:28px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 1.4px) 0 0/24px 24px,#464a4e}
  & .fonte{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#FFFFFF;color:#131517;border-radius:12px;font:500 clamp(10px,1vw,13px)/1.2 var(--f-mono);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  & .fonte::before{content:"";width:8px;height:8px;border-radius:2px;background:#0072CE}
  & .fonte-1{left:17%;top:12%}
  & .fonte-2{left:83%;top:10%}
  & .fonte-3{left:12%;top:54%}
  & .fonte-4{left:87%;top:60%}
  & .fonte-5{left:24%;top:91%}
  & .documento{position:absolute;left:30%;top:18%;width:40%;height:66%;background:#FFFFFF;color:#131517;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.35);padding:6.5%;display:grid;align-content:start;gap:8%}
  & .testa-doc{font:500 clamp(9px,.9vw,12px)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#0072CE}
  & .voce{display:grid;gap:6px}
  & .nome-voce{font:500 clamp(8px,.75vw,10px)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#53565A}
  & .barra{height:clamp(6px,.7vw,10px);border-radius:3px;background:#E3E6E9;overflow:hidden}
  & .riempi{height:100%;background:#131517;transform-origin:left}
  & .voce:nth-of-type(3) .riempi{transform:scaleX(.72)}
  & .voce:nth-of-type(4) .riempi{background:#0072CE;transform:scaleX(.86)}
  & .voce:nth-of-type(5) .riempi{transform:scaleX(.58)}
  & .voce:nth-of-type(6) .riempi{transform:scaleX(.8)}
  & .timbro{position:absolute;right:-12%;bottom:9%;transform:rotate(-8deg);border:2.5px solid #0072CE;color:#0072CE;background:#FFFFFF;border-radius:10px;padding:8px 12px;font:600 clamp(10px,1vw,13px)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

  /* 5. Le cifre */
  & .cifre{position:relative;overflow:hidden}
  & .numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:110px var(--gutter)}
  & .numero-blocco{display:grid;align-content:center;justify-items:start;gap:10px}
  & .n{display:block;font:900 clamp(150px,30vw,520px)/.78 var(--f-display);font-stretch:62%;font-variation-settings:"wdth" 62;color:var(--blu);letter-spacing:-.04em}
  & .didascalia{display:block;font:800 clamp(22px,2.6vw,40px)/1 var(--f-display);font-stretch:80%;font-variation-settings:"wdth" 80;text-transform:uppercase;max-width:16ch}
  @media (min-width:901px){
    html.moto & .numeri{height:100svh;display:block;position:relative;padding:0}
    html.moto & .numero-blocco{position:absolute;inset:0;grid-template-columns:auto minmax(0,26ch);align-items:center;justify-content:center;column-gap:clamp(24px,4vw,64px)}
  }

  /* 6. Nastri */
  & .nastri{padding:clamp(80px,10vw,140px) 0;display:grid;gap:clamp(40px,5vw,72px)}
  & .nastri-testi{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;padding-inline:var(--gutter)}
  & .nastri-titolo{font-size:clamp(46px,6.4vw,110px)}
  & .nastri-colonna{display:grid;gap:18px;justify-items:start}
  & .riga-nastro{overflow:hidden}
  & .traccia{display:flex;flex-wrap:wrap;row-gap:.2em}
  html.moto & .riga-nastro{white-space:nowrap}
  html.moto & .traccia{display:inline-flex;flex-wrap:nowrap;will-change:transform}
  & .nome{font:850 clamp(56px,8vw,140px)/1 var(--f-display);font-stretch:68%;font-variation-settings:"wdth" 68;text-transform:uppercase;padding-inline:.35em;display:inline-flex;align-items:center;gap:.7em}
  & .nome::after{content:"";width:.16em;height:.16em;background:currentColor;border-radius:50%}
  & .variante-vuota .nome{color:transparent;-webkit-text-stroke:1.5px #FFFFFF}
  & .nastri > .etichetta{color:#D6E8F7}

  /* 7. Web app */
  & .webapp{padding:clamp(90px,11vw,150px) var(--gutter)}
  & .webapp-interno{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
  & .webapp-titolo{font-size:clamp(44px,6vw,104px)}
  & .webapp-testi{display:grid;gap:26px}
  & .fatti{display:grid;border-top:1.5px solid var(--testo)}
  & .fatto{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:18px;padding-block:16px;border-bottom:1px solid rgba(83,86,90,.3)}
  & .chiave{font:500 12px/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
  & .valore{font-weight:600}
  & .browser{border-radius:18px;background:#FFFFFF;border:1px solid #D8DDE2;box-shadow:0 40px 80px rgba(0,60,110,.18);overflow:hidden;color:#131517}
  & .browser-barra{display:flex;align-items:center;gap:8px;padding:13px 15px;background:#F2F4F6;border-bottom:1px solid #D8DDE2}
  & .pallino{width:11px;height:11px;border-radius:50%;background:#D8DDE2}
  & .indirizzo{margin-left:10px;flex:1;font:500 12px/1 var(--f-mono);color:#53565A;background:#FFFFFF;padding:7px 10px;border-radius:6px}
  & .browser-corpo{padding:28px;display:grid;gap:16px}
  & .campo{display:grid;gap:7px}
  & .campo-nome{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#53565A}
  & .campo-valore{display:block;font:500 16px/1.2 var(--f-corpo);padding:12px 13px;border:1px solid #D8DDE2;border-radius:9px;white-space:nowrap;overflow:hidden}
  & .campo:nth-of-type(3) .campo-valore{border-color:#0072CE;box-shadow:0 0 0 3px #E8F2FB}
  & .browser-piede{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  & .nota-esempio{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#53565A}
  & .finto{font:600 14px/1 var(--f-corpo);background:#0072CE;color:#FFFFFF;padding:12px 18px;border-radius:999px}
  /* Sul grigio: i filetti tra i fatti chiari, l'ombra del browser piu' scura. */
  & [data-scena="grigio"] .fatto{border-bottom-color:rgba(255,255,255,.18)}
  & [data-scena="grigio"] .browser{border-color:transparent;box-shadow:0 40px 90px rgba(0,0,0,.4)}

  /* 8. Casi studio */
  & .casi{padding:0 var(--gutter) clamp(90px,11vw,150px);display:grid;gap:28px}
  & .casi-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  & .caso{display:grid;gap:12px;padding:30px;border:1.5px dashed #9CA1A6;border-radius:22px}
  & .caso-titolo{font:800 28px/1.05 var(--f-display);font-stretch:88%;font-variation-settings:"wdth" 88;text-transform:uppercase;color:var(--tenue)}
  & .caso-testo{color:var(--tenue)}

  /* 9. Referto */
  & .referto{padding:clamp(100px,12vw,170px) var(--gutter);overflow-x:clip}
  & .referto-interno{display:grid;gap:clamp(28px,4vw,48px)}
  & .referto-titolo{font-size:clamp(40px,5.6vw,96px);max-width:18ch}
  & .gratis{font:900 clamp(92px,15vw,270px)/.8 var(--f-display);font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.02em}
  & .referto-piede{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
  & .referto-colonna{display:grid;gap:22px;justify-items:start}
  & .referto .corpo,& .referto .etichetta{color:#D6E8F7}
  /* Il foglio d'esempio: carta bianca un po' inclinata, tre modelli con
     la barra di quanto ti conoscono e l'esito, le azioni, la firma. Una
     riga di lettura scorre giu' per il foglio mentre lo si guarda. */
  & .referto-pulsante{margin-top:6px}
  & .referto-foglio{position:relative;justify-self:end;width:100%;max-width:500px;display:grid;gap:14px;padding:clamp(24px,2.4vw,34px);border-radius:16px;background:#FFFFFF;color:#131517;box-shadow:0 40px 80px rgba(0,40,90,.35),0 2px 0 rgba(0,0,0,.04);transform:rotate(-2deg);overflow:hidden}
  & .referto-foglio::after{content:"";position:absolute;left:0;right:0;top:0;height:70px;background:linear-gradient(180deg,rgba(0,114,206,0),rgba(0,114,206,.1) 70%,rgba(0,114,206,.35));border-bottom:2px solid rgba(0,114,206,.55);transform:translateY(-80px);animation:q4-lettura 5s cubic-bezier(.6,0,.4,1) 1.5s infinite;pointer-events:none}
  & .referto .foglio-etichetta{justify-self:start;padding:6px 10px;border-radius:999px;background:#D6E8F7;color:#0072CE;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
  & .foglio-titolo{margin:0 0 6px;font:800 clamp(22px,1.9vw,30px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase}
  & .foglio-riga{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"m b" ". e";gap:6px 14px;align-items:center;padding-top:12px;border-top:1px solid rgba(19,21,23,.1)}
  & .foglio-modello{grid-area:m;font:500 12px/1 var(--f-mono);letter-spacing:.06em}
  & .foglio-barra{grid-area:b;position:relative;height:8px;border-radius:8px;background:#EEF1F4;overflow:hidden}
  & .foglio-barra::after{content:"";position:absolute;inset:0;border-radius:8px;background:#0072CE;transform-origin:left center;transform:scaleX(var(--pieno,.5))}
  & .foglio-riga:nth-of-type(1) .foglio-barra{--pieno:.62}
  & .foglio-riga:nth-of-type(2) .foglio-barra{--pieno:.24}
  & .foglio-riga:nth-of-type(3) .foglio-barra{--pieno:.08}
  & .foglio-esito{grid-area:e;font-size:14px;line-height:1.35;color:#53565A}
  & .foglio-azioni{margin:6px 0 0;padding:12px 14px;border-radius:10px;background:#F3F7FB;font-size:14.5px;font-weight:600;color:#0072CE}
  & .foglio-azioni::before{content:"→ "}
  & .foglio-piede{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:8px}
  & .foglio-firma{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#53565A}
  & .foglio-sigla{display:block;width:150px;height:54px;flex:none}
  & .foglio-sigla svg{display:block;width:100%;height:100%;overflow:visible}

  /* 10. Titolari */
  & .titolari{padding:clamp(100px,12vw,160px) var(--gutter) 60px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end}
  & .titolari-testi{display:grid;gap:22px}
  & .titolari-titolo{font-size:clamp(46px,6.2vw,106px)}
  & .persone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  & .persona{display:grid;gap:10px;padding:26px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(162,166,171,.25)}
  & .volto{width:68px;height:68px;border-radius:50%;border:1.5px dashed #7D8187;display:grid;place-items:center;font:500 11px/1 var(--f-mono);color:var(--tenue)}
  & .persona-nome{font:800 24px/1.05 var(--f-display);font-stretch:90%;font-variation-settings:"wdth" 90;border-bottom:1.5px dashed #7D8187;justify-self:start}
  & .persona-tel{font:500 16px/1 var(--f-mono);color:#6FB2EC;text-decoration:none}

  /* I titolari con la foto: le due card stanno accanto al testo, sulla
     stessa riga. Quella aperta e' larga e a colori, l'altra e' stretta,
     scura, col nome in verticale; passandoci sopra (o col tasto Tab) si
     scambiano, come nelle app della TV. */
  & .persone--foto{display:flex;gap:12px;height:clamp(380px,58vh,560px);align-self:end}
  & .titolare{position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;isolation:isolate;cursor:pointer;background:#131517;transition:flex-grow .8s cubic-bezier(.7,0,.2,1)}
  & .titolare.aperto{flex-grow:2.4;cursor:default}
  & .titolare-foto{position:absolute;inset:0;width:100% !important;height:100%;z-index:-2}
  & .titolare-foto img,& img.titolare-foto{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) brightness(.55);transform:scale(1.08);transition:filter .8s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
  & .titolare.aperto .titolare-foto img,& .titolare.aperto img.titolare-foto{filter:none;transform:none}
  & .titolare-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,21,23,0) 40%,rgba(19,21,23,.85));width:auto}
  & .titolare-testi{position:absolute;left:0;right:0;bottom:0;width:auto;display:grid;gap:12px;justify-items:start;padding:clamp(18px,2vw,28px)}
  & .titolare-ruolo{color:#D6E8F7}
  & .titolare-nome{margin:0;font:800 clamp(28px,2.6vw,46px)/.92 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase;color:#FFFFFF;white-space:normal}
  & .titolare-testi > *{transition:opacity .45s .25s,transform .6s .2s cubic-bezier(.2,.8,.2,1)}
  & .titolare:not(.aperto) .titolare-testi > *{opacity:0;transform:translateY(24px);transition-delay:0s}
  & .titolare-verticale{position:absolute;left:50%;bottom:clamp(18px,2vw,28px);transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font:800 clamp(20px,1.7vw,28px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase;letter-spacing:.02em;color:#FFFFFF;white-space:nowrap;pointer-events:none;transition:opacity .4s .3s}
  & .titolare.aperto .titolare-verticale{opacity:0;transition-delay:0s}
  & .titolare:focus-visible{outline:3px solid #0072CE;outline-offset:4px}
  @media (max-width:900px){
    & .persone--foto{flex-direction:column;height:clamp(560px,100svh,760px)}
    & .titolare.aperto{flex-grow:2.2}
    & .titolare-verticale{writing-mode:horizontal-tb;transform:none;left:clamp(22px,3vw,40px);bottom:22px}
    & .titolare-nome{white-space:normal}
  }

  /* Philip Kotler, su bianco. In alto il ritratto (blu) e la citazione; sotto
     la lettera, in una colonna stretta come un foglio: il titolo con
     "profitto" cancellato, i "Non quando" che girano come le palette di un
     tabellone, le tre firme, il PDF. */
  & .kotler{padding:clamp(100px,13vw,180px) var(--gutter);display:grid;gap:clamp(90px,14vh,160px)}
  html.moto & .kotler{background:#FFFFFF;color:#131517;--testo:#131517;--tenue:#53565A}
  & .kotler-apertura{width:100%;max-width:var(--box);margin-inline:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
  & .kotler-cornice{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:#0072CE}
  & .kotler-ritratto,& .kotler-ritratto img{position:absolute;inset:0;width:100% !important;height:100%;object-fit:cover;object-position:50% 22%}
  & .kotler-testi{display:grid;gap:20px;justify-items:start}
  & .kotler-titolo{margin:0;font:800 clamp(34px,3.8vw,64px)/.95 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.01em;text-transform:uppercase}
  & .kotler-citazione{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.55;font-style:italic;color:var(--testo)}
  & .kotler-citazione .parola{transition:none}
  & .kotler-autore{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#0072CE}
  & .kotler-autore::before{content:"— "}
  & .kotler-lettera{width:100%;max-width:980px;margin-inline:auto;display:grid;gap:clamp(22px,3vh,34px);justify-items:center;text-align:center}
  & .lettera-titolo{position:relative;margin:0;font:900 clamp(56px,8.6vw,150px)/.88 var(--f-display);font-stretch:80%;font-variation-settings:"wdth" 80;letter-spacing:-.02em;text-transform:uppercase}
  & .lettera-titolo .cancellato{position:relative;display:inline-block}
  & .lettera-titolo .cancellato svg{position:absolute;left:-4%;top:28%;width:108%;height:50%;overflow:visible;pointer-events:none}
  & .lettera-intro{margin:0;font:600 clamp(18px,1.5vw,24px)/1.4 var(--f-body, inherit);color:var(--tenue)}
  & .lettera-non{position:relative;width:100%;height:clamp(150px,20vh,210px);perspective:900px;display:grid}
  & .lettera-non-riga{grid-area:1 / 1;align-self:center;margin:0;font:800 clamp(26px,3.2vw,52px)/1.02 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase;color:#0072CE;backface-visibility:hidden;transform-origin:50% 50% -40px}
  & .lettera-chiusa{margin:0;font:800 clamp(22px,2vw,32px)/1.1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase}
  & .firme{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);align-items:end;padding-top:10px}
  & .firma{display:grid;gap:10px;justify-items:center}
  & .firma-segno,& .firma-segno img{display:block;width:auto !important;height:clamp(54px,6vw,88px);max-width:100%;object-fit:contain}
  & .firma-nome{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);padding-top:10px;border-top:1px solid rgba(19,21,23,.2);width:min(100%,220px)}
  html.moto & .lettera-non-riga:not(:first-child){opacity:0}
  @media (max-width:900px){
    & .kotler-apertura{grid-template-columns:minmax(0,1fr)}
    & .kotler-cornice{max-width:420px}
    & .lettera-non{height:clamp(170px,30vh,240px)}
    & .firme{grid-template-columns:minmax(0,1fr);gap:28px}
  }

  /* Piede */
  & .piede{padding:40px var(--gutter) 28px;display:grid;gap:44px;overflow:hidden}
  /* Il piede e' sempre bianco, su ogni pagina, col marchio a colori. */
  html.moto & .piede,& .piede{background:#FFFFFF;color:#131517;--testo:#131517;--tenue:#53565A;border-top:1px solid rgba(19,21,23,.1)}
  & .piede-colonne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;font-size:15px}
  & .colonna-piede{display:grid;gap:9px;align-content:start;justify-items:start}
  & .colonna-titolo{font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--testo);margin-bottom:5px}
  & .voce-piede{color:var(--tenue);text-decoration:none}
  & .voce-piede:hover{color:var(--testo)}
  /* Il marchio del piede e, accanto, il bollino ESG: e' scritto in nero, e su
     fondo scuro sparirebbe, quindi sta su una targhetta bianca. */
  & .piede-marchio{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:36px}
  & .piede-logo{display:block;width:clamp(220px,38vw,560px);height:auto}
  & .bollino{flex:0 0 auto;width:max-content;background:#FFFFFF;border-radius:12px;padding:16px 20px;border:1px solid rgba(19,21,23,.12)}
  & .bollino img{display:block;width:clamp(150px,17vw,220px);height:auto}
  & .piede-legale{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13px;line-height:1.55;color:var(--tenue);border-top:1px solid rgba(19,21,23,.12);padding-top:20px}
  & .legale-link{display:flex;flex-wrap:wrap;gap:18px}
  /* La frase-definizione (la stessa dello schema), il marchio e il bollino:
     una striscia sola, la frase a sinistra e i due loghi piccoli a destra. */
  & .piede{grid-template-columns:minmax(0,1fr) auto}
  & .piede > *{grid-column:1 / -1}
  & .piede > .piede-frase{grid-column:1;align-self:center;margin:0;max-width:72ch;font-size:14px;line-height:1.5;color:var(--tenue)}
  & .piede > .piede-marchio{grid-column:2;align-self:center;flex-wrap:nowrap;gap:24px}
  & .piede .piede-marchio .piede-logo{width:clamp(130px,11vw,170px)}
  & .piede .piede-marchio .bollino{padding:8px 12px;border-radius:10px}
  & .piede .piede-marchio .bollino img{width:clamp(84px,7vw,108px)}
  /* La newsletter nel piede: a sinistra cos'e', a destra il modulo di
     form.weevo.it, vestito come gli altri. */
  & .piede-newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 44px;align-items:start;padding-top:28px;border-top:1px solid rgba(19,21,23,.12)}
  & .piede-newsletter-testi{display:grid;gap:4px;align-content:start}
  & .piede-newsletter-testo{margin:0;max-width:34ch;font-size:15px;line-height:1.5;color:var(--tenue)}
  & .piede .modulo-newsletter{min-height:0;max-width:none}
  & .piede .modulo-newsletter .wf-fields{gap:16px 22px;max-width:640px}
  & .piede .modulo-newsletter .wf-field--full{grid-column:1/-1}
  & .piede .modulo-newsletter .wf-success{padding:18px 22px;font-size:18px}

  /* Privacy e cookie: i testi li scrive Script dentro .legale-testo. Una
     colonna da leggere, titoli come quelli del sito, la tabella dei cookie
     che scorre di lato sul telefono. */
  & .testa--legale{min-height:auto;padding-bottom:clamp(48px,8vh,84px)}
  /* La conferma del referto: una frase, non parole una sotto l'altra. */
  & .titolo-conferma{margin:0;max-width:14ch;font-size:clamp(44px,6.4vw,112px);line-height:.92}
  & .legale{padding:clamp(56px,9vh,104px) var(--gutter) clamp(90px,13vh,150px)}
  & .legale-testo{max-width:780px;margin-inline:auto;font-size:17px;line-height:1.65;color:var(--testo)}
  & .legale-testo:empty{min-height:40vh}
  & .legale-testo h1,& .legale-testo h2{margin:56px 0 18px;font:800 clamp(26px,2.6vw,38px)/1.05 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
  & .legale-testo h3{margin:36px 0 12px;font:800 clamp(20px,1.7vw,24px)/1.15 var(--f-display);font-stretch:90%;font-variation-settings:"wdth" 90}
  & .legale-testo > :first-child,& .legale-testo > :first-child > :first-child,& .legale-testo .privacy-section:first-child h2{margin-top:0}
  /* Il primo "titolo" della privacy di Script e' una frase intera (chi e' il
     titolare): in maiuscolo grande sarebbe un muro, si legge come apertura. */
  & .legale-testo .privacy-section:first-child h2{font:600 clamp(19px,1.6vw,22px)/1.45 var(--f-corpo);text-transform:none;letter-spacing:0}
  & .legale-testo p{margin:0 0 16px}
  & .legale-testo ul{margin:0 0 22px;padding-left:22px}
  & .legale-testo li{margin:7px 0}
  & .legale-testo li::marker{color:var(--blu)}
  & .legale-testo a{color:var(--blu);text-underline-offset:3px}
  & .legale-testo em{color:var(--tenue)}
  & .legale-testo .table-wrapper{margin:26px 0 30px;overflow-x:auto;border:1px solid rgba(19,21,23,.12);border-radius:14px}
  & .legale-testo table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
  & .legale-testo th{padding:13px 16px;text-align:left;background:#F2F4F6;font:500 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
  & .legale-testo td{padding:13px 16px;vertical-align:top;border-top:1px solid rgba(19,21,23,.1)}

  /* =======================================================================
     Le pagine interne: la testa, gli elenchi, i passi, le schede, le
     domande, la chiusa. Stessi colori e stessa tipografia della home; qui
     cambia solo il ritmo, piu' calmo perche' si legge.
     ==================================================================== */
  & .testa{min-height:66svh;display:flex;padding:176px var(--gutter) 84px}
  & .testa-pagina{flex:1;display:grid;align-content:end;gap:22px}
  & .titolo-pagina{font-size:clamp(46px,7.6vw,132px)}
  & .titolo-pagina > span{display:block}
  & .titolo-pagina > span:last-child{color:var(--blu)}
  & [data-scena="blu"] .titolo-pagina > span:last-child{color:#FFFFFF}
  & .testa-sotto{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:end;margin-top:14px}
  /* La testa col modulo: titolo a sinistra, la richiesta a destra in un
     riquadro, i campi a due a due. */
  & .testa--modulo{min-height:auto;padding-bottom:clamp(60px,9vh,100px)}
  & .testa-griglia{flex:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:start}
  & .testa-griglia > :first-child{position:sticky;top:120px}
  & .testa-breve{gap:22px}
  & .testa--modulo .titolo-pagina{font-size:clamp(46px,6.2vw,112px)}
  & .testa-richiesta{display:grid;gap:14px;padding:clamp(22px,2.6vw,36px);border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
  & .testa-richiesta > .etichetta:nth-child(2){font:400 15px/1.5 var(--f-corpo);letter-spacing:0;text-transform:none;color:var(--tenue);margin:0 0 6px}
  & .testa-richiesta .modulo{gap:18px 22px;max-width:none}
  & .testa-richiesta textarea.campo-controllo{min-height:64px}
  & .testa-richiesta .gutter{padding-inline:0;margin-inline:0}
  /* Il modulo di form.weevo.it, vestito come i campi del sito: etichette in
     mono, linee sottili, il pulsante blu. I campi vanno a due a due; il
     captcha e la privacy stanno su una riga intera. */
  & .modulo-esterno{min-height:420px;width:100%;max-width:980px}
  /* Le sedi: due colonne, la via, il pulsante per arrivarci col navigatore
     e il telefono accanto. */
  & .elenco-sedi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
  & .sede{display:grid;gap:12px;align-content:start;justify-items:start;padding-top:22px;border-top:1px solid rgba(162,166,171,.35)}
  & .sede-titolo{margin:0;font:800 clamp(26px,2.4vw,38px)/1 var(--f-display);font-stretch:86%;font-variation-settings:"wdth" 86;text-transform:uppercase}
  & .sede-via{margin:0;font-size:17px;line-height:1.5;color:var(--tenue)}
  & .sede-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px}
  & .sede-tel{font:500 16px/1 var(--f-mono);color:var(--testo);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
  & .weevo-form{display:grid;gap:22px}
  & .wf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}
  & .wf-field{display:grid;gap:8px;align-content:start;min-width:0}
  & .wf-field--recaptcha,& .wf-field--privacy{grid-column:1/-1}
  & .wf-label{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
  & .wf-required{color:#5AA7E6}
  & .wf-input{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1.5px solid rgba(162,166,171,.55);border-radius:0;color:var(--testo);font:400 17px/1.5 var(--f-corpo);padding:8px 0;transition:border-color .25s}
  & .wf-input::placeholder{color:rgba(162,166,171,.6)}
  & .wf-input:focus{outline:0;border-bottom-color:#0072CE}
  & .wf-textarea{height:76px;min-height:44px;resize:vertical}
  /* L'ultimo campo di testo lungo (il messaggio, i concorrenti) prende la
     riga intera ed e' piu' alto; quello da due righe (il sito) resta basso. */
  & .wf-field--textarea:nth-last-child(3){grid-column:1/-1}
  & .wf-field--textarea:nth-last-child(3) .wf-textarea{height:120px}
  & .wf-textarea[rows="2"]{height:46px}
  & .wf-field--invalid .wf-input{border-bottom-color:#FF9A8B}
  & .wf-error{margin:0;font-size:13px;line-height:1.4;color:#FF9A8B}
  & .wf-option{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--f-corpo);color:var(--testo);cursor:pointer}
  & .wf-option input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:#0072CE}
  & .wf-field--privacy{grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px}
  & .wf-field--privacy .wf-error{grid-column:1/-1}
  & .wf-privacy-link{font-size:14px;color:#5AA7E6}
  & .wf-recaptcha{min-height:78px}
  & .wf-actions{display:flex}
  & .wf-button{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border:0;border-radius:999px;background:#0072CE;color:#FFFFFF;font:700 16px/1 var(--f-corpo);cursor:pointer;transition:background .25s,transform .25s}
  & .wf-button::after{content:"→"}
  & .wf-button:hover{background:#005BA6;transform:translateY(-2px)}
  & .wf-button[disabled]{opacity:.6;cursor:wait}
  & .wf-alert{padding:12px 16px;border-radius:12px;background:rgba(255,154,139,.14);color:#FFB3A7;font-size:15px}
  & .wf-success{padding:28px;border-radius:16px;background:#0072CE;color:#FFFFFF;font:700 clamp(20px,1.8vw,26px)/1.3 var(--f-corpo)}

  & .fascia{display:grid;gap:44px;padding:104px var(--gutter)}
  & .fascia--cta{padding-block:132px}

  & .discorso{display:grid;gap:20px}
  & .discorso-titolo{font-size:clamp(32px,4.4vw,76px);max-width:18ch}
  & .discorso-testo{color:var(--tenue);font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:62ch}

  & .elenco-voci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px}
  & .voce-elenco{display:grid;gap:9px;align-content:start;border-top:1px solid rgba(162,166,171,.35);padding-top:18px}
  & .voce-segno{font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--blu)}
  & [data-scena="blu"] .voce-segno,& [data-scena="grigio"] .voce-segno{color:#FFFFFF}
  & .voce-titolo{font:600 clamp(20px,2.1vw,27px)/1.25 var(--f-corpo)}
  & .voce-testo{color:var(--tenue);line-height:1.55}

  & .passi{list-style:none;margin:0;padding:0;display:grid}
  & .passo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start;padding:28px 0;border-top:1px solid rgba(162,166,171,.35)}
  & .passo-numero{font:850 clamp(42px,5.2vw,78px)/.9 var(--f-display);font-stretch:70%;font-variation-settings:"wdth" 70;color:var(--blu);min-width:1.4em}
  & [data-scena="blu"] .passo-numero,& [data-scena="grigio"] .passo-numero{color:#FFFFFF}
  & .passo-testi{display:grid;gap:8px}
  & .passo-titolo{font:600 clamp(22px,2.5vw,32px)/1.2 var(--f-corpo)}
  & .passo-testo{color:var(--tenue);max-width:62ch}

  & .schede{display:grid;gap:26px}
  & .schede--tre{grid-template-columns:repeat(3,minmax(0,1fr))}
  & .schede--due{grid-template-columns:repeat(2,minmax(0,1fr))}
  & .scheda{display:grid;gap:12px;align-content:start;padding:32px;border:1px solid rgba(162,166,171,.35);border-radius:20px}
  & .scheda-titolo{font-size:clamp(26px,2.8vw,40px)}
  & .scheda-testo{color:var(--tenue);font-size:16px;line-height:1.55}
  & .scheda .link{margin-top:4px;justify-self:start}

  & .domande{display:grid}
  & .domanda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:12px 40px;padding:26px 0;border-top:1px solid rgba(162,166,171,.35)}
  & .domanda-titolo{font:600 clamp(18px,1.9vw,24px)/1.3 var(--f-corpo)}
  & .domanda-risposta{color:var(--tenue);line-height:1.55}

  & .cta{display:grid;gap:24px}
  & .cta-titolo{font-size:clamp(38px,6.2vw,110px)}
  & .cta-sotto{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}

  /* Il modulo. I campi non hanno riquadro: una riga sotto, come su un foglio
     da riempire, e diventa blu quando ci si scrive dentro. */
  & .modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;max-width:980px}
  & .campo{display:grid;gap:8px;align-content:start}
  & .campo--largo{grid-column:1/-1}
  & .campo-etichetta{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
  & .campo-controllo{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1.5px solid rgba(162,166,171,.55);border-radius:0;color:var(--testo);font:400 17px/1.5 var(--f-corpo);padding:10px 2px;transition:border-color .3s}
  & .campo-controllo:focus{outline:0;border-bottom-color:var(--blu)}
  & [data-scena="blu"] .campo-controllo:focus{border-bottom-color:#FFFFFF}
  & select.campo-controllo{appearance:none;cursor:pointer}
  & select.campo-controllo option{color:#131517}
  & textarea.campo-controllo{resize:vertical;min-height:96px}
  & .campo-spunta{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start}
  & .campo-spunta input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:var(--blu)}
  & .campo-spunta .campo-etichetta{font:400 15px/1.5 var(--f-corpo);letter-spacing:0;text-transform:none}
  & .modulo-invio{grid-column:1/-1;justify-self:start;cursor:pointer}
  & .modulo-esito{grid-column:1/-1;font:500 16px/1.5 var(--f-corpo)}
  & .modulo-esito--errore{color:#FF9A8B}
  & [data-scena="chiaro"] .modulo-esito--errore{color:#C1362B}

  /* Movimento continuo via CSS */
  @media (prefers-reduced-motion:no-preference){
    & .freccia-giu::after{animation:q4-goccia 1.6s cubic-bezier(.6,0,.3,1) infinite}
  }

  @media (max-width:900px){
    & .solo-largo,& .pavimento .etichetta > span{display:none}
    & .eroe-piede,& .officina-interno,& .webapp-interno,& .referto-piede,& .titolari{grid-template-columns:minmax(0,1fr)}
    & .ripetizioni{grid-template-columns:minmax(0,1fr)}
    & .manifesto-frase{grid-template-columns:minmax(0,1fr);gap:40px;align-content:center}
    & .problema-testo{font-size:clamp(24px,7.6vw,36px)}
    & .problemi-scena{align-items:start}
    & .problemi-monitor{order:-1;position:sticky;top:64px;z-index:2;align-self:start;padding-bottom:12px;background:#FFFFFF}
    & .problema{grid-template-columns:2.4em minmax(0,1fr)}
    & .duo{aspect-ratio:1.35/1}
    & .binario{flex-direction:column;width:100%}
    & .pannello,& .pannello--intro{width:100%;min-height:auto;padding:70px var(--gutter);border-left:0;border-top:1px solid rgba(162,166,171,.25)}
    & .forma{position:relative;right:auto;top:auto;justify-self:end;width:58vw;height:58vw;margin-bottom:8px}
    & .numeri{grid-template-columns:minmax(0,1fr);gap:48px}
    & .referto-foglio{justify-self:start;transform:rotate(-1deg)}
    & .casi-griglia,& .persone,& .piede-colonne,& .piede-newsletter{grid-template-columns:minmax(0,1fr)}
    & .piede .modulo-newsletter .wf-fields{grid-template-columns:minmax(0,1fr)}
    & .piede > .piede-frase,& .piede > .piede-marchio{grid-column:1 / -1}
    & .legale-testo{font-size:16px}
    & .fatto{grid-template-columns:minmax(0,1fr);gap:4px}
    & .fonte{font-size:10px;padding:6px 8px}
    & .testa{min-height:auto;padding:130px var(--gutter) 60px}
    & .testa-sotto,& .cta-sotto,& .domanda,& .testa-griglia{grid-template-columns:minmax(0,1fr)}
    & .testa-richiesta{padding:22px 18px}
    & .testa-griglia > :first-child{position:static}
    & .wf-fields{grid-template-columns:minmax(0,1fr)}
    & .elenco-sedi{grid-template-columns:minmax(0,1fr)}
    & .wf-recaptcha{transform:scale(.92);transform-origin:left top}
    & .elenco-voci,& .schede--tre,& .schede--due{grid-template-columns:minmax(0,1fr)}
    & .fascia{padding:70px var(--gutter);gap:34px}
    & .passo{grid-template-columns:minmax(0,1fr);gap:8px}
    & .modulo{grid-template-columns:minmax(0,1fr)}
    & .piede-marchio{gap:24px}
    /* Telefono: i problemi. Lo schermo resta fermo in alto su fondo bianco
       pieno fin sotto la testata, cosi' l'elenco gli scorre dietro senza
       spuntare sopra; una sfumatura lo stacca dal testo. */
    & .problemi-monitor{top:0;padding-top:74px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);box-shadow:0 18px 22px -12px rgba(255,255,255,1)}
    /* Cosa facciamo: bolla piu' piccola accanto all'etichetta, meno vuoto. */
    & .pannello,& .pannello--intro{padding:52px var(--gutter)}
    & .forma{width:min(34vw,200px);height:min(34vw,200px);margin:0 0 -8px}
    /* La riga su misura in una colonna sola. */
    & .app-tua{grid-template-columns:minmax(0,1fr);gap:18px;padding:34px 20px}
    & .app-tua .app-riga-n,& .app-tua-lato{grid-column:1}
    & .app-tua .app-riga-tipo,& .app-tua .app-riga-desc{grid-column:auto}
    & .app-tua-titolo{font-size:clamp(34px,10vw,48px)}
    & .app-tua-esempi{font-size:16px}
    /* "Gratis." resta su una riga anche quando si allarga. */
    & .gratis{font-size:15vw;white-space:nowrap}
    & .referto-foglio{transform:rotate(-1deg)}
  }
}

@keyframes q4-morfa{
  0%,100%{border-radius:62% 38% 46% 54%/60% 44% 56% 40%;transform:rotate(0) scale(1)}
  33%{border-radius:40% 60% 58% 42%/42% 58% 42% 58%;transform:rotate(60deg) scale(1.06)}
  66%{border-radius:55% 45% 35% 65%/65% 35% 55% 45%;transform:rotate(-40deg) scale(.96)}
}
@keyframes q4-goccia{to{top:110%}}
/* I @keyframes stanno qui, fuori dal blocco body.quattro: annidati dentro
   una regola il browser li ignora e le animazioni restano ferme. */
@keyframes q4-attesa{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes q4-respiro{0%{transform:scale(1)}100%{transform:scale(1.07)}}
@keyframes q4-alla-deriva{0%{translate:-6% 5%}100%{translate:7% -6%}}
@keyframes q4-bolla{
  0%,100%{border-radius:62% 38% 46% 54%/60% 44% 56% 40%;transform:rotate(0) scale(1)}
  33%{border-radius:40% 60% 58% 42%/42% 58% 42% 58%;transform:rotate(60deg) scale(1.08)}
  66%{border-radius:55% 45% 35% 65%/65% 35% 55% 45%;transform:rotate(-40deg) scale(.94)}
}
@keyframes q4-dati{from{background-position:0 0}to{background-position:26px 0}}
@keyframes q4-dati-giu{from{background-position:0 0}to{background-position:0 26px}}
@keyframes q4-segnale{from{left:-90px;opacity:0}15%{opacity:1}85%{opacity:1}to{left:100%;opacity:0}}
@keyframes q4-onda{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
@keyframes q4-riga{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes q4-compare{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes q4-cursore{50%{opacity:0}}
@keyframes q4-lettura{0%{transform:translateY(-80px)}60%{transform:translateY(calc(100% + 900px))}100%{transform:translateY(calc(100% + 900px))}}
@keyframes q4-vetrina{from{transform:translate(0,0) rotate(0)}to{transform:translate(8%,-6%) rotate(25deg)}}
/* Telefono: niente colore di fondo che cambia sulla radice. Ogni sezione
   ha il suo fondo e i suoi colori, cosi' quando la sezione dopo comincia a
   salire quella di prima non cambia colore sotto gli occhi. E nessuna
   sezione allarga la pagina. */
@media (max-width:900px){
  body.quattro [data-scena="scuro"]{--fondo:#131517;--testo:#FFFFFF;--tenue:#A2A6AB}
  body.quattro [data-scena="chiaro"]{--fondo:#FFFFFF;--testo:#131517;--tenue:#53565A}
  body.quattro [data-scena="grigio"]{--fondo:#53565A;--testo:#FFFFFF;--tenue:#DADDE0}
  body.quattro [data-scena="blu"]{--fondo:#0072CE;--testo:#FFFFFF;--tenue:#D6E8F7}
  html.moto body.quattro section[data-scena]{background:var(--fondo);color:var(--testo)}
  body.quattro section[data-scena]{overflow-x:clip}
}