/* Landing «Rottamazione sito» — Boosted Company, novembre 2026. Mobile first.
   Token e carattere del sito boostedcompany.it (v4). Firma della pagina: il film della pressa, renderizzato in Blender (js/film.js). */

@font-face {
  font-family: 'Montserrat';
  src: url('../font/montserrat-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --nero: #08090A;
  --riga: #1F2126;
  --riga-2: #2A2D33;
  --testo: #F7F8F8;
  --sec: #A3A9B3;
  --cromo: #C9A9E9;
  --cromo-chiaro: #DFC9F0;
  --cromo-scritta: linear-gradient(115deg, #8B6FB8 0%, #C9A9E9 25%, #F5E6FF 45%, #E8B7D4 55%, #C9A9E9 75%, #8B6FB8 100%); /* .chrome-text of boostedcompany.it */
  --errore: #F2B8C6;
  --g: 20px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --g: 40px; } }
@media (min-width: 1200px) { :root { --g: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; background: var(--nero); overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; color: var(--testo);
  font: 400 16.5px/1.6 'Montserrat', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--cromo); color: var(--nero); }
:focus-visible { outline: 2px solid var(--cromo); outline-offset: 3px; border-radius: 3px; }
a { color: inherit; }
img, svg, canvas, video { display: block; }
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }

.salta-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cromo); color: var(--nero); padding: 12px 16px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.salta-link:focus { top: 12px; }

/* the words that matter wear the chrome of the Boosted site. It stays still: moving light on text repaints it at every frame. A text shadow would be painted over it and dull it */
.accento { color: var(--cromo); background: var(--cromo-scritta); -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
@media (max-width: 768px) { .accento { -webkit-text-stroke: 0.5px rgba(201, 169, 233, 0.18); } }

/* ── Il cielo: tre fogli di stelle dipinti una volta sola (js/cielo.js), qui si muovono soltanto ── */
.cielo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cielo i { position: absolute; inset: -6%; }
.cielo__fondo { animation: deriva 170s ease-in-out infinite alternate; }
.cielo__mezzo { animation: deriva 130s ease-in-out infinite alternate-reverse, brilla 6.2s ease-in-out infinite alternate; }
.cielo__vive { animation: deriva 110s ease-in-out infinite alternate, brilla 8.6s ease-in-out -3s infinite alternate; }
@keyframes deriva { from { transform: translate3d(-2%, 1.4%, 0); } to { transform: translate3d(2%, -1.4%, 0); } }
@keyframes brilla { from { opacity: 1; } to { opacity: 0.42; } }
.cielo__cadente { position: absolute; top: 14%; left: 78%; width: 150px; height: 1px; opacity: 0; background: linear-gradient(90deg, rgba(223, 201, 240, 0.95), rgba(223, 201, 240, 0)); transform: rotate(-24deg); animation: cade 23s linear 6s infinite; }
.cielo__cadente--due { top: 38%; left: 42%; width: 110px; animation-duration: 37s; animation-delay: 19s; }
@keyframes cade { 0% { opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0); } 0.6% { opacity: 1; } 3.4% { opacity: 0; transform: rotate(-24deg) translate3d(-340px, 0, 0); } 100% { opacity: 0; transform: rotate(-24deg) translate3d(-340px, 0, 0); } }
.cielo--pagina { transition: visibility 0s; }
html.scena-pronta.in-scena:not(.fermo) .cielo--pagina { visibility: hidden; }

/* ── Testata ── */
.testa { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 var(--g); }
.testa__logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.testa__marchio { width: 30px; height: auto; }
.testa__scritta { width: 76px; height: auto; }
.testa .testa__cta { display: none; }
.testa__tag { font-size: 13px; font-weight: 650; color: var(--testo); white-space: nowrap; }
.metallo.cta { max-width: 100%; }
@media (min-width: 1024px) {
  .testa { position: fixed; height: 84px; background: linear-gradient(180deg, rgba(8, 9, 10, 0.82), rgba(8, 9, 10, 0)); transition: transform 320ms var(--curva); }
  .testa .testa__cta { display: inline-flex; }
  .testa__tag { margin: 0 auto 0 18px; }
}

/* ── Il film: eroe e pressa sono la stessa scena. Il primo fotogramma è l'apertura ── */
/* the whole film runs under the finger, 15 stages 70svh apart: (15 - 1) × 70 + 100 */
.film { position: relative; height: 1220svh; background: #050506; }
/* the stages: the browser holds a flick on the next one, and the next swipe goes on at once. Nothing waits on a clock */
html.fasi.scena-pronta:not(.fermo, .libera, .rotella) { scroll-snap-type: y mandatory; }
html.fasi body { position: relative; }
.fermata, .fermata-libera { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
.fermata { top: calc((100% - 100svh) * var(--p) + 24px); }
.fermata-libera { top: var(--libera); }
html.fermo .fermata, html.fermo .fermata-libera, html:not(.scena-pronta) .fermata, html:not(.scena-pronta) .fermata-libera { display: none; }
.film__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #050506; }
.film__primo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(0.77); transform-origin: 50% 0; }
.film--viva .film__primo { display: none; }
.film__tela { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.film__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 6, 0.5) 0, rgba(5, 5, 6, 0) 16%, rgba(5, 5, 6, 0) var(--velo, 41%), rgba(5, 5, 6, 0.9) calc(var(--velo, 41%) + 8%), rgba(5, 5, 6, 0.96) 100%); transition: opacity 420ms ease-out; }
.film--chiaro .film__velo { opacity: 0; }
.film__fine { display: none; }
.film__cielo.cielo { position: absolute; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 500ms ease-out, visibility 0s linear 500ms; }
.film--stelle .film__cielo.cielo { opacity: 1; visibility: visible; transition: opacity 1400ms ease-in-out; }

.eroe {
  position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 96px var(--g) calc(26px + env(safe-area-inset-bottom));
  transition: opacity 420ms ease-out, transform 620ms var(--curva), visibility 0s;
}
.eroe.fuori { opacity: 0; visibility: hidden; transform: translate3d(0, -28px, 0); transition: opacity 320ms ease-out, transform 480ms var(--curva), visibility 0s linear 320ms; }
.eroe__chi { font-size: 14.5px; font-weight: 680; color: var(--cromo-chiaro); letter-spacing: -0.005em; }
.eroe h1 { margin-top: 10px; font-size: clamp(34px, min(10.8vw, 6.4svh), 96px); line-height: 1; font-weight: 800; letter-spacing: -0.036em; text-wrap: balance; }
.eroe__sotto { margin-top: 14px; max-width: 31em; font-size: clamp(15.5px, 4.3vw, 19px); line-height: 1.45; color: #D7DAE0; }
.eroe__cta { margin-top: 18px; }
.eroe__nota { margin-top: 12px; max-width: 30em; font-size: 14px; line-height: 1.45; color: var(--sec); }

.film__frasi { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.fr {
  position: absolute; top: calc(92px + env(safe-area-inset-top)); left: var(--g); right: var(--g); opacity: 0; transform: translate3d(0, 22px, 0);
  font-size: 17px; line-height: 1.45; color: #D7DAE0; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.8);
  transition: opacity 260ms ease-out, transform 360ms ease-out;
}
.fr.vista { opacity: 1; transform: none; transition: opacity 460ms ease-out, transform 760ms var(--curva); }
.fr strong { display: block; font-size: clamp(27px, 7.6vw, 40px); line-height: 1.1; font-weight: 780; letter-spacing: -0.028em; color: var(--testo); margin-bottom: 8px; }
.fr--2 { font-size: clamp(21px, 5.9vw, 30px); line-height: 1.26; font-weight: 650; letter-spacing: -0.018em; color: var(--testo); }
/* while the phone stands alone at the top of the screen the words stay under it, on the dark of the base */
.fr--1, .fr--2 { top: auto; bottom: calc(30px + env(safe-area-inset-bottom)); }
.fr--1::before, .fr--2::before { content: ''; position: absolute; z-index: -1; left: calc(var(--g) * -1); right: calc(var(--g) * -1); top: -72px; bottom: calc(-30px - env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(5, 5, 6, 0.94) 58%, rgba(5, 5, 6, 0)); }
/* the title of the blow sits on the dark of the head, above its mark */
.fr--3 { top: 12%; left: 0; right: 0; text-align: center; transform: none; text-shadow: none; }
.fr--3.vista { transform: none; transition: opacity 90ms ease-out; }
/* «Lo rottamiamo.» keeps the chrome of the page and lands with one single bounce when the plate hits */
.rimbalzo { transform-origin: 50% 100%; }
.fr--3.vista .rimbalzo { animation: rimbalzo 680ms both; }
@keyframes rimbalzo {
  0% { opacity: 0; transform: translate3d(0, -0.9em, 0); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  10% { opacity: 1; }
  40% { transform: translate3d(0, 0, 0) scale(1.05, 0.92); animation-timing-function: cubic-bezier(0.15, 0.6, 0.35, 1); }
  66% { transform: translate3d(0, -0.2em, 0) scale(0.99, 1.02); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  86% { transform: translate3d(0, 0, 0) scale(1.015, 0.98); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fr--3.vista .rimbalzo { animation: none; } }
/* the words stand on their own dark: the rods of the press go out behind them, the logo and the wreck stay in sight */
.fr--3::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -100svh; bottom: -11svh; background: linear-gradient(to top, rgba(5, 5, 6, 0), #050506 9svh); }
.fr--3 strong { display: inline-block; margin: 0; font-size: clamp(36px, 11.4vw, 190px); line-height: 1.06; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.fr--4 { top: calc(74px + env(safe-area-inset-top)); }
.fr--4 strong { margin: 0; font-size: clamp(24px, 6.7vw, 38px); }
.fr--4 .cta { display: none; }
.fr--4.vista .cta { pointer-events: auto; }

.film__demo { position: absolute; z-index: 1; inset: 0; opacity: 0; visibility: hidden; transition: opacity 240ms ease-out, visibility 0s linear 240ms; }
/* the last frames of the film are painted with this same site: the live one takes over in one frame, with no melt that would
   show the film's phone through a window already opening */
.film.nuova .film__demo { opacity: 1; visibility: visible; transition: none; }
/* the headline of the end leaves under the window as it opens, never over the name of the site */
.film.nuova .film__frasi { z-index: 0; }
.film--dentro :is(.film__tela, .film__cielo, .film__velo) { visibility: hidden; }

/* the old site, face to face for a moment: an invented page, declared as an example, that looks its age. The page of the phone
   in the film, here laid out for the whole screen. --f sets the type, --r the rows; wide screens have their own layout */
.film__vecchio {
  --f: min(calc(100vw / 390), calc(100svh / 690));
  --r: calc(100svh / 800);
  position: absolute; z-index: 1; inset: 0; visibility: hidden; opacity: 0; will-change: clip-path, opacity;
}
.vs { position: absolute; inset: 0; overflow: hidden; background: #FFFFE8; color: #000; font-family: 'Times New Roman', Times, serif; line-height: 1.25; text-align: center; }
.vs p { margin-block: 0; }
.vs__barra { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; height: calc(100vw / 15); padding: 0 3vw; display: flex; align-items: center; justify-content: space-between; background: #111; color: #ddd; font: 600 calc(100vw / 30) / 1 Arial, sans-serif; transform-origin: 0 0; will-change: transform, opacity; }
.vs__testa, .vs__nome, .vs__menu, .vs__foto, .vs__corpo, .vs__lavori, .vs__piede { position: absolute; left: 0; right: 0; margin-inline: auto; will-change: transform; }
.vs__testa { top: calc(var(--r) * 57); width: 18.25em; font-size: calc(var(--f) * 21.74); font-weight: 700; color: #C00000; }
.vs__nome { top: calc(var(--r) * 94.6); width: 9.1em; font-size: calc(var(--f) * 39.71); font-weight: 700; font-style: italic; color: #0000C8; text-shadow: 1px 1px 0 #9D9D9D; }
.vs__menu { top: calc(var(--r) * 154.5); width: 20.5em; font-size: calc(var(--f) * 16.72); color: #0000C8; }
.vs__foto { top: calc(var(--r) * 192.6); box-sizing: border-box; display: grid; place-items: center; width: 17.12em; aspect-ratio: 16 / 10; background: #CFCFCF; border: 2px inset #8A8A8A; font-size: calc(var(--f) * 15.47); color: #555; }
.vs__corpo { top: calc(var(--r) * 376.7); width: 19.1em; font-size: calc(var(--f) * 17.97); text-align: justify; }
.vs__lavori { top: calc(var(--r) * 464.7); box-sizing: border-box; width: 18.25em; padding: 0.42em 0; background: #FFEE00; color: #C00000; font-size: calc(var(--f) * 18.81); font-weight: 700; border: 2px dashed #C00000; }
.vs__piede { top: calc(var(--r) * 719.6); width: 22.8em; font-size: calc(var(--f) * 15.05); color: #5A5A5A; }
.vs__esempio { position: absolute; z-index: 2; top: 0; left: 0; padding: 0.25em 0.6em; border-radius: 999px; background: rgba(8, 9, 10, 0.82); color: #fff; font: 600 15px / 1.2 Arial, sans-serif; transform-origin: 0 0; will-change: transform; }
@media (min-aspect-ratio: 11/10) {
  .film__vecchio { --f: min(calc(100vw / 660), calc(100svh / 520)); --r: calc(100svh / 520); }
  .vs__testa { top: calc(var(--r) * 24); }
  .vs__nome { top: calc(var(--r) * 56); }
  .vs__menu { top: calc(var(--r) * 118); }
  .vs__foto { top: calc(var(--r) * 166); left: auto; right: calc(50% + 2.4vw); margin: 0; }
  .vs__corpo { top: calc(var(--r) * 166); left: calc(50% + 2.4vw); right: auto; margin: 0; }
  .vs__lavori { top: calc(var(--r) * 268); left: calc(50% + 2.4vw); right: auto; margin: 0; }
  .vs__piede { top: calc(var(--r) * 392); }
}
/* the site takes the whole stage: the sticky call and the fixed header leave it alone */
html.demo-piena .barra-cta.vista { transform: translateY(110%); pointer-events: none; }
html.demo-piena .testa { transform: translate3d(0, -100%, 0); }

/* still (no JS, reduced motion, «Ferma le animazioni», save data): the opening, every sentence, the new phone */
html:not(.scena-pronta) .film, html.fermo .film { height: auto; }
html:not(.scena-pronta) .film__palco, html.fermo .film__palco { position: static; height: auto; overflow: visible; background: none; padding-bottom: 8px; }
html:not(.scena-pronta) :is(.film__tela, .film__velo, .film__demo, .film__vecchio, .film__primo, .film__cielo), html.fermo :is(.film__tela, .film__velo, .film__demo, .film__vecchio, .film__primo, .film__cielo) { display: none; }
html:not(.scena-pronta) .eroe, html.fermo .eroe { position: static; opacity: 1; visibility: visible; transform: none; }
html:not(.scena-pronta) .film__frasi, html.fermo .film__frasi { position: static; padding: 24px var(--g) 0; }
html:not(.scena-pronta) .fr, html.fermo .fr { position: static; opacity: 1; transform: none; margin-bottom: 18px; }
html:not(.scena-pronta) .fr--3 strong, html.fermo .fr--3 strong { font-size: clamp(44px, 13vw, 76px); white-space: normal; }
html:not(.scena-pronta) .fr--3::before, html.fermo .fr--3::before { display: none; }
html:not(.scena-pronta) .film__fine, html.fermo .film__fine { display: block; }
html:not(.scena-pronta) .film__fine img, html.fermo .film__fine img { width: 100%; height: auto; max-height: 92svh; object-fit: contain; }
html:not(.scena-pronta) .film, html.fermo .film { background: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* wide screens and phones held sideways: the text stands left of the press */
@media (min-aspect-ratio: 11/10) {
  .film__primo img { transform: translate3d(15vw, 0, 0); }
  .film__velo { background: linear-gradient(90deg, rgba(5, 5, 6, 0.86) 0, rgba(5, 5, 6, 0.5) 34%, rgba(5, 5, 6, 0) 52%); }
  /* the new phone stands alone among the stars: what is left of the machine goes dark on both sides */
  .film--solo .film__velo { opacity: 1; background: linear-gradient(90deg, #050506 calc(var(--tel-a) - 160px), rgba(5, 5, 6, 0) var(--tel-a), rgba(5, 5, 6, 0) var(--tel-b), #050506 calc(var(--tel-b) + 160px)); transition: opacity 900ms ease-in-out; }
  .eroe { justify-content: center; width: min(56%, 760px); padding: 96px 0 40px var(--g); }
  .eroe h1 { font-size: clamp(34px, min(5.4vw, 11svh), 88px); }
  .eroe__sotto { font-size: clamp(14.5px, 2.2svh, 19px); }
  .fr { top: 50%; bottom: auto; right: auto; width: min(36%, 30em); font-size: 20px; transform: translate3d(0, calc(-50% + 22px), 0); }
  .fr--1, .fr--2 { width: min(36%, 30em, var(--fr-largo, 30em)); }
  .fr--1::before, .fr--2::before { display: none; }
  .fr.vista { transform: translate3d(0, -50%, 0); }
  .fr strong { font-size: clamp(30px, 3.6vw, 54px); margin-bottom: 12px; }
  .fr--2 { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.24; }
  .fr--3 { top: 24%; left: 0; right: 0; width: auto; transform: translate3d(0, -50%, 0); }
  .fr--3.vista { transform: translate3d(0, -50%, 0); }
  .fr--3::before { bottom: -7svh; background: linear-gradient(to top, rgba(5, 5, 6, 0), #050506 6svh); }
  .fr--3 strong { font-size: clamp(60px, 11vw, 190px); }
  .fr--4 strong { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.08; }
  .fr--4 .cta { display: inline-flex; margin-top: 22px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .eroe { padding-top: 62px; padding-bottom: 12px; }
  .eroe__nota { display: none; }
  .fr { font-size: 15px; }
  .fr strong { font-size: 24px; }
  .fr--2 { font-size: 18px; }
  .fr--4 strong { font-size: 26px; }
  .fr--4 .cta { display: none; }
}

/* ── Le sezioni sotto ── */
.domande, .candidati, .passi, .loghi { position: relative; padding: 96px var(--g); }
.obiezione h2, .contrario h2, .domande h2, .candidati h2, .passi h2 { font-size: clamp(32px, min(8.8vw, 14svh), 72px); line-height: 1.06; font-weight: 780; letter-spacing: -0.03em; text-wrap: balance; }

/* right after the jeweller's site: one screen, one big call. A stage of its own, so a flick stops here.
   The rules that touch the button carry two classes: tasti.css comes after this sheet and wins at equal weight */
.subito { position: relative; isolation: isolate; display: grid; min-height: 100svh; padding: 72px var(--g) 64px; text-align: center; }
.subito__palco { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.subito__palco::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(130vw, 100svh); height: min(130vw, 100svh); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(139, 111, 184, 0.2), rgba(139, 111, 184, 0)); pointer-events: none; }
.subito h2 { max-width: 12em; font-size: clamp(32px, min(11vw, 7.4svh), 96px); line-height: 1.04; font-weight: 800; letter-spacing: -0.034em; text-wrap: balance; }
.subito__riga { display: block; }
.subito__sotto { margin-top: 18px; max-width: 24em; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.4; font-weight: 600; color: var(--sec); text-wrap: balance; }
.subito .subito__cta { width: min(100%, 420px); min-height: 76px; margin-top: 38px; padding: 0 12px 0 30px; font-size: clamp(19px, 5.2vw, 23px); font-weight: 700; justify-content: space-between; }
.subito .subito__cta .metallo-scritta { width: 100%; justify-content: space-between; }
.subito .subito__cta .cta__freccia { width: 52px; height: 52px; }
.subito .subito__cta .cta__freccia svg { width: 22px; height: 22px; }
.subito__tempi { margin-top: 18px; max-width: 30em; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--sec); text-wrap: balance; }
/* it comes in once, when the screen is there: lines first, then the button. One deceleration, no bounce */
.subito.attende :is(.subito__riga, .subito__sotto, .subito__cta, .subito__tempi) { opacity: 0; transform: translate3d(0, 28px, 0); }
.subito.attende.vista :is(.subito__riga, .subito__sotto, .subito__cta, .subito__tempi) { opacity: 1; transform: none; transition: opacity 520ms ease-out, transform 820ms var(--curva); }
.subito.attende.vista .subito__riga + .subito__riga { transition-delay: 90ms; }
.subito.attende.vista .subito__sotto { transition-delay: 200ms; }
.subito.attende.vista .subito__cta { transition-delay: 320ms; }
.subito.attende.vista .subito__tempi { transition-delay: 440ms; }
/* the button settles in place: its own press still works afterwards (tasti.css scales it on :active) */
.subito.attende.vista .subito__cta:active:not(:disabled) { transform: translateY(1px) scale(0.98); transition: transform 150ms ease, box-shadow 150ms ease; }
html:not(.scena-pronta) .subito, html.fermo .subito { min-height: 0; padding: 96px var(--g); }
html.fermo .subito.attende :is(.subito__riga, .subito__sotto, .subito__cta, .subito__tempi) { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .subito.attende :is(.subito__riga, .subito__sotto, .subito__cta, .subito__tempi) { opacity: 1; transform: none; transition: none; } }
@media (min-aspect-ratio: 11/10) {
  .subito h2 { max-width: 14em; font-size: clamp(40px, min(6.4vw, 11svh), 112px); }
  .subito .subito__cta { width: 440px; margin-top: 44px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .subito { padding: 48px var(--g) 28px; }
  .subito h2 { font-size: clamp(28px, 10svh, 40px); }
  .subito__sotto { margin-top: 10px; font-size: 17px; }
  .subito .subito__cta { min-height: 60px; margin-top: 20px; }
  .subito__tempi { margin-top: 12px; }
  .subito .subito__cta .cta__freccia { width: 42px; height: 42px; }
}

/* the objection: the stage holds and the scroll only picks the beat. The sentence lights up, a search answers it, a finger chooses */
.obiezione { position: relative; height: 450svh; }
.ob-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; padding: 0 var(--g); }
.ob-uno, .ob-gancio, .ob-chiusa, .ricerca { grid-area: 1 / 1; min-width: 0; transition: opacity 420ms ease-out, transform 620ms var(--curva), visibility 0s; }
.obiezione__so { font-size: 17px; font-weight: 600; color: var(--cromo-chiaro); margin-bottom: 14px; }
.obiezione h2 { max-width: 15em; font-size: clamp(34px, min(10vw, 7.4svh), 92px); line-height: 1.08; }
.pw { opacity: 0.16; transition: opacity 260ms ease-out; }
.obiezione.legge .pw { opacity: 1; transition-delay: calc(var(--i) * 62ms); }
.ob-gancio { opacity: 0; visibility: hidden; transform: translate3d(0, 34px, 0); }
.ob-gancio p:first-child { max-width: 15em; font-size: clamp(32px, min(9.4vw, 6.4svh), 62px); line-height: 1.08; font-weight: 780; letter-spacing: -0.03em; text-wrap: balance; }
.ob-gancio p + p { margin-top: 18px; max-width: 28em; font-size: clamp(18px, min(5.1vw, 3.1svh), 25px); line-height: 1.42; color: #D7DAE0; opacity: 0.16; transition: opacity 360ms ease-out; }
.obiezione.due .ob-uno { opacity: 0; visibility: hidden; transform: translate3d(0, -40px, 0) scale(0.96); transition: opacity 280ms ease-out, transform 460ms var(--curva), visibility 0s linear 280ms; }
.obiezione.due .ob-gancio { opacity: 1; visibility: visible; transform: none; }
.obiezione.gancio .ob-gancio p + p { opacity: 1; }
.obiezione.foglio .ob-gancio { opacity: 0; visibility: hidden; transform: translate3d(0, -40px, 0); transition: opacity 280ms ease-out, transform 460ms var(--curva), visibility 0s linear 280ms; }
.ob-chiusa { position: relative; z-index: 2; opacity: 0; visibility: hidden; }
.ob-chiusa p { font-size: clamp(40px, min(12vw, 8.4svh), 88px); line-height: 1.04; font-weight: 800; letter-spacing: -0.036em; opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 220ms ease-out, transform 280ms ease-in; }
.ob-chiusa p:nth-child(3) { margin-top: 20px; max-width: 24em; font-size: clamp(17px, min(4.9vw, 3svh), 22px); line-height: 1.42; font-weight: 500; letter-spacing: 0; color: #D7DAE0; }
.obiezione.finale .ob-chiusa { opacity: 1; visibility: visible; }
.obiezione.finale .ob-chiusa p { opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 720ms var(--curva); }
.obiezione.finale .ob-chiusa p:nth-child(2) { transition-delay: 300ms; }
.obiezione.finale .ob-chiusa p:nth-child(3) { transition-delay: 620ms; }

/* the search: one sheet, drawn in one unit, so it fits every phone whole */
.ricerca { --w: min(calc((100vw - 28px) / 362), calc((100svh - 136px) / 544)); position: relative; justify-self: center; margin-bottom: 56px; width: calc(var(--w) * 362); padding: calc(var(--w) * 14); border-radius: calc(var(--w) * 14); background: #FFF; color: #202124; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); font: 400 calc(var(--w) * 14) / 1.32 Arial, Helvetica, sans-serif; opacity: 0; visibility: hidden; transform: translate3d(0, 56svh, 0); }
.obiezione.foglio .ricerca { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms ease-out, transform 760ms var(--curva), visibility 0s; }
.obiezione.finale .ricerca { opacity: 0; transform: scale(0.94); transition: opacity 460ms ease-out, transform 760ms var(--curva); }
.ricerca__stella { position: absolute; width: 0; height: 0; }
.ricerca__barra { display: flex; align-items: center; gap: calc(var(--w) * 10); height: calc(var(--w) * 46); padding: 0 calc(var(--w) * 16); border-radius: calc(var(--w) * 23); background: #F1F3F4; font-size: calc(var(--w) * 16); }
.ricerca__barra svg { flex: none; width: calc(var(--w) * 18); height: calc(var(--w) * 18); fill: none; stroke: #4D5156; stroke-width: 2; stroke-linecap: round; }
.ricerca__scritta { display: inline-block; overflow: hidden; white-space: nowrap; }
.ricerca__scritta span { display: inline-block; }
.scheda { padding: calc(var(--w) * 14) calc(var(--w) * 2) calc(var(--w) * 13); transition: opacity 420ms ease-out, transform 620ms var(--curva); }
.scheda + .scheda { border-top: 1px solid #EBEBEB; }
.scheda p { margin: 0; }
.scheda__nome { display: block; font-size: calc(var(--w) * 20); line-height: 1.2; font-weight: 400; color: #1A0DAB; }
.scheda__voto { display: flex; align-items: center; gap: calc(var(--w) * 6); margin-top: calc(var(--w) * 5) !important; color: #4D5156; }
.scheda--su .scheda__voto span:first-child { color: #202124; font-weight: 700; }
.stelle { flex: none; width: calc(var(--w) * 88); height: calc(var(--w) * 16); fill: #DADCE0; }
.stelle use { transition: fill 140ms ease-out; }
.scheda--su .stelle { fill: #FBBC04; }
.scheda__info { margin-top: calc(var(--w) * 3) !important; color: #4D5156; }
.scheda__info em { font-style: normal; color: #188038; }
.scheda__foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--w) * 4); margin-top: calc(var(--w) * 10); }
.scheda__foto img, .scheda__foto i { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--w) * 6); }
.scheda__foto i { background: #F1F3F4; transition: background-color 240ms ease-out calc(var(--d, 0) * 170ms); }
.scheda__tasti { display: flex; gap: calc(var(--w) * 8); margin-top: calc(var(--w) * 12); }
.scheda__tasti i { position: relative; flex: 1 1 0; min-width: 0; display: grid; place-items: center; height: calc(var(--w) * 38); border-radius: calc(var(--w) * 19); box-shadow: inset 0 0 0 1px #DADCE0; font-style: normal; font-size: calc(var(--w) * 13.5); color: #1A73E8; white-space: nowrap; }
.scheda__tasti i.pieno { background: #1A73E8; box-shadow: none; color: #FFF; }
.scheda__tasti i.spento { color: #5F6368; }
/* what is missing lights up piece by piece */
.manca { padding: 0 0.3em; margin-left: -0.3em; border-radius: 3px; transition: background-color 240ms ease-out calc(var(--d, 0) * 170ms), color 240ms ease-out calc(var(--d, 0) * 170ms); }
.scheda__tasti i.manca { margin: 0; }
.obiezione.mancanze .manca, html:not(.scena-pronta) .manca, html.fermo .manca { background: #FCE8E6; color: #B3261E; }
.obiezione.mancanze .scheda__tasti i.manca, html:not(.scena-pronta) .scheda__tasti i.manca, html.fermo .scheda__tasti i.manca { box-shadow: none; color: #B3261E; }
.obiezione.mancanze .scheda__foto--vuote i, html:not(.scena-pronta) .scheda__foto--vuote i, html.fermo .scheda__foto--vuote i { background: #FCE8E6; }
/* a finger goes to the other one */
.chiama span { grid-area: 1 / 1; transition: opacity 200ms ease-out 480ms; }
.chiama span + span { opacity: 0; font-size: calc(var(--w) * 12.5); }
.chiama::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 46); height: calc(var(--w) * 46); margin: calc(var(--w) * -23); border-radius: 50%; background: rgba(32, 33, 36, 0.3); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); opacity: 0; pointer-events: none; }
.scheda__tasti i.chiama { transition: background-color 200ms ease-out 480ms, color 200ms ease-out 480ms, box-shadow 200ms ease-out 480ms; }
.obiezione.tocco .scheda__tasti i.chiama { background: #188038; box-shadow: none; color: #FFF; }
.obiezione.tocco .chiama span { opacity: 0; }
.obiezione.tocco .chiama span + span { opacity: 1; }
.obiezione.tocco .chiama::after { animation: dito 1040ms var(--curva) both; }
@keyframes dito { 0% { opacity: 0; transform: translate3d(calc(var(--w) * 40), calc(var(--w) * 170), 0) scale(1.2); } 12% { opacity: 1; } 46% { opacity: 1; transform: none; } 58% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.7); } }
.ricerca figcaption { position: absolute; right: calc(var(--w) * 12); top: calc(var(--w) * -13); padding: 4px 9px; border-radius: 3px; background: #1C1E22; color: #F7F8F8; font: 600 12.5px / 1.2 'Montserrat', system-ui, sans-serif; }
html.scena-pronta:not(.fermo) .ricerca__scritta { clip-path: inset(0 100% 0 0); transition: clip-path 760ms steps(19, end); }
html.scena-pronta:not(.fermo) .obiezione.scrive .ricerca__scritta { clip-path: inset(0 0 0 0); }
html.scena-pronta:not(.fermo) .scheda { opacity: 0; transform: translate3d(0, 18px, 0); }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su, html.scena-pronta:not(.fermo) .obiezione.seconda .scheda--tua { opacity: 1; transform: none; }
html.scena-pronta:not(.fermo) .obiezione.tocco .scheda--tua { opacity: 0.4; }
html.scena-pronta:not(.fermo) .scheda--su .stelle { fill: #DADCE0; }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su .stelle use { fill: #FBBC04; }
.obiezione.prima .stelle use:nth-of-type(1) { transition-delay: 220ms; }
.obiezione.prima .stelle use:nth-of-type(2) { transition-delay: 330ms; }
.obiezione.prima .stelle use:nth-of-type(3) { transition-delay: 440ms; }
.obiezione.prima .stelle use:nth-of-type(4) { transition-delay: 550ms; }
.obiezione.prima .stelle use:nth-of-type(5) { transition-delay: 660ms; }
html.scena-pronta:not(.fermo) .scheda--su img { opacity: 0; transform: scale(0.94); transition: opacity 380ms ease-out, transform 620ms var(--curva); }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su img { opacity: 1; transform: none; }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su img:nth-child(1) { transition-delay: 240ms; }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su img:nth-child(2) { transition-delay: 340ms; }
html.scena-pronta:not(.fermo) .obiezione.prima .scheda--su img:nth-child(3) { transition-delay: 440ms; }

html:not(.scena-pronta) .obiezione, html.fermo .obiezione { height: auto; }
html:not(.scena-pronta) .ob-palco, html.fermo .ob-palco { position: static; height: auto; overflow: visible; display: block; padding: 96px var(--g); }
html:not(.scena-pronta) .obiezione :is(.ob-uno, .ob-gancio, .ob-gancio p + p, .ob-chiusa, .ob-chiusa p, .ricerca), html.fermo .obiezione :is(.ob-uno, .ob-gancio, .ob-gancio p + p, .ob-chiusa, .ob-chiusa p, .ricerca) { opacity: 1; visibility: visible; transform: none; }
html:not(.scena-pronta) .obiezione :is(.ob-gancio, .ricerca, .ob-chiusa), html.fermo .obiezione :is(.ob-gancio, .ricerca, .ob-chiusa) { margin-top: 44px; margin-bottom: 0; }
html:not(.scena-pronta) .pw, html.fermo .pw { opacity: 1; }

/* the contrario. The press belongs to the film and does not come back here: a piece of chrome melts and pours into what each sentence promises. Without the stage it is a plain list */
.contrario { position: relative; padding: 96px var(--g); }
.contrario h2 { max-width: 15em; font-size: clamp(34px, min(9.4vw, 7.6svh), 76px); line-height: 1.06; }
.contrario h2 .accento { display: block; width: fit-content; max-width: 100%; }
.cr-pezzi { display: none; }
.promesse { list-style: none; margin: 36px 0 0; padding: 0; border-bottom: 1px solid var(--riga-2); }
.promesse li { padding: 24px 0 26px; border-top: 1px solid var(--riga-2); }
.promesse__altri { margin-bottom: 10px; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.3; font-weight: 600; color: var(--sec); }
.promesse__cosa { font-size: clamp(28px, 7.6vw, 46px); line-height: 1.1; font-weight: 780; letter-spacing: -0.03em; text-wrap: balance; }
.promesse__come { margin-top: 8px; max-width: 30em; font-size: clamp(16px, 4.2vw, 19px); line-height: 1.45; font-weight: 500; color: var(--sec); }
html:not(.scena-pronta) .contrario h2, html.fermo .contrario h2, html:not(.scena-pronta) .promesse li, html.fermo .promesse li { opacity: 1 !important; transform: none !important; }
/* with the stage. The scroll picks the sentence, the metal melts by itself and the words follow on transform and opacity */
html.scena-pronta:not(.fermo) .contrario { height: 450svh; padding: 0; }
html.scena-pronta:not(.fermo) .cr-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.scena-pronta:not(.fermo) .cr-palco::before { content: ''; position: absolute; left: 50%; top: calc(7svh + min(96vw, 47svh) / 2); width: min(120vw, 94svh); height: min(120vw, 94svh); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(139, 111, 184, 0.16), rgba(139, 111, 184, 0)); pointer-events: none; }
html.scena-pronta:not(.fermo) .cr-pezzi { display: block; position: absolute; left: 50%; top: 7svh; width: min(96vw, 47svh); height: auto; aspect-ratio: 1; margin-left: calc(min(96vw, 47svh) / -2); }
/* each piece moves like its sentence: it waits below, rises into place with one deceleration and no bounce, and leaves upwards with the old sentence
   (downwards when going back). Transitions only: an animation removed with its class drops the piece in one frame.
   Written with .cr-pezzi in front, so the .contrario .acceso and .passato of the sentences below never reach the pieces */
html.scena-pronta:not(.fermo) .cr-pezzi .cr-pezzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translate3d(0, 5%, 0) scale(0.97); transition: opacity 180ms ease-out, transform 240ms ease-in; }
html.scena-pronta:not(.fermo) .cr-pezzi .cr-pezzo.passato { transform: translate3d(0, -5%, 0) scale(0.97); }
html.scena-pronta:not(.fermo) .cr-pezzi .cr-pezzo.acceso { opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 720ms var(--curva); }
html.scena-pronta:not(.fermo) .promesse { margin: 0; border: 0; }
html.scena-pronta:not(.fermo) .contrario h2, html.scena-pronta:not(.fermo) .promesse li { position: absolute; left: var(--g); right: var(--g); top: 69%; margin: 0 auto; padding: 0; border: 0; text-align: center; opacity: 0; transform: translate3d(0, calc(-50% + 26px), 0); transition: opacity 180ms ease-out, transform 240ms ease-in; }
html.scena-pronta:not(.fermo) .contrario .passato { transform: translate3d(0, calc(-50% - 26px), 0); }
html.scena-pronta:not(.fermo) .contrario .acceso { opacity: 1; transform: translate3d(0, -50%, 0); transition: opacity 360ms ease-out 120ms, transform 640ms var(--curva) 120ms; }
html.scena-pronta:not(.fermo) .contrario h2 { top: 50%; font-size: clamp(30px, min(8.6vw, 4.6svh), 64px); }
html.scena-pronta:not(.fermo) .contrario h2 .accento { margin: 0 auto; }
/* first what usually happens, alone. The promise answers it when that line has been read, together with the metal */
html.scena-pronta:not(.fermo) .promesse__altri { margin: 0 auto 14px; max-width: 26em; font-size: clamp(18px, min(5vw, 2.7svh), 27px); }
html.scena-pronta:not(.fermo) .promesse :is(.promesse__cosa, .promesse__come) { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 160ms ease-out, transform 200ms ease-in; }
html.scena-pronta:not(.fermo) .promesse .acceso :is(.promesse__cosa, .promesse__come) { opacity: 1; transform: none; transition: opacity 420ms ease-out var(--dopo), transform 720ms var(--curva) var(--dopo); }
html.scena-pronta:not(.fermo) .promesse .acceso .promesse__come { transition-delay: calc(var(--dopo) + 180ms); }
html.scena-pronta:not(.fermo) .promesse__cosa { font-size: clamp(38px, min(11.6vw, 6.4svh), 84px); line-height: 1.03; font-weight: 800; letter-spacing: -0.034em; }
html.scena-pronta:not(.fermo) .promesse__come { margin: 12px auto 0; font-size: clamp(15.5px, 4vw, 19px); }
html.scena-pronta:not(.fermo) .promesse__fine .promesse__cosa { font-size: clamp(34px, min(10vw, 5.6svh), 72px); }
@media (min-aspect-ratio: 11/10) {
  html.scena-pronta:not(.fermo) .cr-palco::before { left: auto; right: calc(4vw + min(46vw, 84svh) / 2); top: 50%; width: 100svh; height: 100svh; transform: translate(50%, -50%); }
  html.scena-pronta:not(.fermo) .cr-pezzi { left: auto; right: 4vw; top: 50%; width: min(46vw, 84svh); margin: calc(min(46vw, 84svh) / -2) 0 0; }
  html.scena-pronta:not(.fermo) .contrario h2, html.scena-pronta:not(.fermo) .promesse li { top: 50%; right: 50%; left: max(var(--g), 6vw); text-align: left; }
  html.scena-pronta:not(.fermo) .contrario h2 .accento { margin: 0; }
  html.scena-pronta:not(.fermo) .promesse__come { margin: 16px 0 0; }
  html.scena-pronta:not(.fermo) .promesse__altri { margin: 0 0 16px; }
}

/* why us: four plain rows. Each rule draws itself and its words rise once, when the row comes into view; without JS all is there */
.perche { position: relative; padding: 96px var(--g); border-top: 1px solid var(--riga); }
.perche h2 { font-size: clamp(32px, min(8.8vw, 14svh), 72px); line-height: 1.06; font-weight: 780; letter-spacing: -0.03em; }
.perche__lista { list-style: none; max-width: 1240px; margin: 36px 0 0; padding: 0; }
.perche__lista li { position: relative; padding: 24px 0 26px; }
.perche__lista li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--cromo), var(--riga-2) 70%); transform-origin: 0 50%; }
.perche__lista b { display: block; font-size: clamp(24px, 6.4vw, 38px); line-height: 1.1; font-weight: 780; letter-spacing: -0.028em; }
.perche__lista p { margin-top: 8px; max-width: 30em; font-size: clamp(16px, 4.2vw, 19px); line-height: 1.45; font-weight: 500; color: var(--sec); }
.perche.attende li::before { transform: scaleX(0); }
.perche.attende li :is(b, p) { opacity: 0; transform: translate3d(0, 18px, 0); }
.perche.attende li.vista::before { transform: none; transition: transform 900ms var(--curva); }
.perche.attende li.vista :is(b, p) { opacity: 1; transform: none; transition: opacity 520ms ease-out 160ms, transform 820ms var(--curva) 160ms; }
.perche.attende li.vista p { transition-delay: 300ms; }
@media (min-width: 900px) {
  .perche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 6vw; max-width: 1400px; margin: 0 auto; }
  .perche h2 { position: sticky; top: 120px; align-self: start; }
  .perche__lista { margin: 0; }
  .perche__lista li:first-child { padding-top: 10px; }
}
html.fermo .perche.attende li::before, html.fermo .perche.attende li :is(b, p) { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .perche.attende li::before, .perche.attende li :is(b, p) { opacity: 1; transform: none; transition: none; } }

/* the logos: tiles of one height, each client in its own colours, no carousel */
.loghi { padding-top: 88px; padding-bottom: 80px; border-top: 1px solid var(--riga); }
.loghi h2 { font-size: clamp(19px, 5vw, 26px); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; color: var(--sec); text-align: center; }
.loghi__lista { list-style: none; max-width: 1240px; margin: 34px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.loghi__lista li { flex: 0 1 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: clamp(108px, 31vw, 136px); padding: clamp(18px, 5vw, 26px) clamp(22px, 7vw, 34px); overflow: hidden; border-radius: 8px; background: #101114; box-shadow: inset 0 0 0 1px var(--riga-2); }
.loghi__lista img { width: 100%; height: 100%; object-fit: contain; }
.loghi__lista .lg--fu { padding: 0; box-shadow: none; }
.loghi__lista .lg--fu img { object-fit: cover; object-position: 50% 66%; }
.loghi__lista .lg--bastardo { padding-block: 6px; background: #F3EAD6; box-shadow: none; }
.loghi__lista .lg--pieve { background: #0F1D33; box-shadow: none; }
.loghi__lista .lg--euro { background: #1B1C20; box-shadow: none; }
.loghi__lista .lg--fate { background: #274629; box-shadow: none; }
.loghi__lista .lg--fantasia { padding-inline: clamp(14px, 4vw, 22px); background: #FBDCC6; box-shadow: none; }
@media (min-width: 640px) {
  .loghi__lista li { flex-basis: calc(50% - 5px); height: 136px; }
}
@media (min-width: 1000px) {
  .loghi__lista li { flex-basis: calc((100% - 30px) / 4); }
}

/* how the application works: the one block of flat colour on the page, big plain numbers, ruled like a form */
.passi { background: var(--cromo-scritta); color: #0A0A0B; }
.passi__lista { list-style: none; counter-reset: passo; margin: 36px 0 0; padding: 0; border-bottom: 2px solid #0A0A0B; }
.passi__lista li { counter-increment: passo; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; padding: 20px 0 24px; border-top: 2px solid #0A0A0B; }
.passi__lista li::before { content: counter(passo); grid-row: span 2; font-size: clamp(56px, 16vw, 92px); line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; }
.passi__lista b { display: block; font-size: clamp(21px, 5.6vw, 28px); line-height: 1.16; font-weight: 750; letter-spacing: -0.022em; }
.passi__lista p { margin-top: 6px; max-width: 30em; font-weight: 500; color: #1E1A26; }
.passi__cta { margin-top: 32px; }

@media (min-width: 1024px) {
  .domande, .candidati { padding: 160px var(--g); max-width: calc(1296px + var(--g) * 2); margin: 0 auto; }
  .passi { padding: 140px max(var(--g), calc((100% - 1296px) / 2)); }
  .passi__lista li { grid-template-columns: 124px minmax(0, 1fr); padding: 26px 0 32px; }
  .ob-palco { max-width: calc(1296px + var(--g) * 2); margin: 0 auto; }
  .ob-palco { grid-template-columns: minmax(0, 1fr) auto; column-gap: 72px; }
  .ob-uno { grid-column: 1 / -1; }
  .ricerca { --w: min(calc((100svh - 96px) / 544), 1.2px); grid-area: 1 / 2; margin-bottom: 0; }
  .obiezione.foglio .ob-gancio { opacity: 1; visibility: visible; transform: none; }
  .obiezione.finale .ob-gancio { opacity: 0; visibility: hidden; transform: translate3d(0, -40px, 0); transition: opacity 280ms ease-out, transform 460ms var(--curva), visibility 0s linear 280ms; }
  .obiezione.finale .ricerca { opacity: 1; transform: none; }
  .ob-chiusa p { font-size: clamp(44px, min(5.6vw, 10svh), 88px); }
  .loghi { padding-top: 110px; padding-bottom: 110px; }
  .loghi__lista { margin-top: 44px; }
  .passi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .passi__lista { margin-top: 0; grid-row: span 2; }
  .passi__cta { align-self: start; justify-self: start; margin-top: 28px; }
  .domande { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .dm-lista { margin-top: 0; max-width: none; }
}

/* ── Domande ── */
.dm-lista { margin-top: 26px; max-width: 46em; border-bottom: 1px solid var(--riga-2); }
.dm-lista details { border-top: 1px solid var(--riga-2); }
.dm-lista summary {
  position: relative; display: block; min-height: 60px; padding: 18px 40px 18px 0; list-style: none; cursor: pointer;
  font-size: 17.5px; line-height: 1.35; font-weight: 650; letter-spacing: -0.012em; color: var(--testo);
}
.dm-lista summary::-webkit-details-marker { display: none; }
.dm-lista summary::after {
  content: ''; position: absolute; right: 6px; top: 24px; width: 12px; height: 12px;
  border-right: 2px solid var(--cromo); border-bottom: 2px solid var(--cromo); transform: rotate(45deg); transition: transform 280ms var(--curva);
}
.dm-lista details[open] summary::after { transform: translateY(6px) rotate(225deg); }
.dm-lista details { interpolate-size: allow-keywords; }
.dm-lista details::details-content { height: 0; overflow: clip; transition: height 320ms var(--curva), content-visibility 320ms allow-discrete; }
.dm-lista details[open]::details-content { height: auto; }
.dm-lista details p { padding: 0 0 20px; max-width: 38em; color: #C6CBD2; font-size: 16.5px; }

/* ── Candidatura ── */
.candidati { scroll-margin-top: 8px; padding-bottom: 72px; }
.posti { margin-top: 22px; }
.posti__segni { display: flex; gap: 8px; }
.posti__segni i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 3px; font-style: normal; font-size: 17px; font-weight: 800; background: var(--cromo-scritta); color: #0A0A0B; }
.posti__segni i.preso { background: none; box-shadow: inset 0 0 0 1px var(--riga-2); color: #5A5E66; }
.posti__scritta { margin-top: 10px !important; font-size: 15px !important; font-weight: 600; color: var(--testo) !important; }
.modulo__titolo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #0A0A0B; font-size: 21px; font-weight: 780; letter-spacing: -0.02em; }
.modulo__titolo small { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: #4A4D55; white-space: nowrap; }
.candidati__testo > p { margin-top: 12px; max-width: 30em; font-size: 18px; color: #D0D4DA; }
.candidati__tempi { font-size: 15px !important; color: var(--sec) !important; }
.candidati__tempi a { color: var(--testo); text-underline-offset: 3px; white-space: nowrap; }
.modulo { --errore: #A8123A; margin-top: 26px; display: grid; gap: 20px; max-width: 540px; padding: 24px 20px; border-radius: 2px; background: #FFF; color: #0A0A0B; }
.scelta-sito { margin: 0; padding: 0; border: 0; min-width: 0; }
.scelta-sito legend { padding: 0; margin-bottom: 8px; font-size: 15.5px; font-weight: 650; }
.scelta-sito .segmenti { display: flex; width: 100%; background: #0A0A0B; }
.scelta-sito .segmenti button { flex: 1 1 50%; padding: 0 8px; font-size: 14.2px; }
.modulo__offerta { padding: 12px 14px; border-radius: 2px; background: var(--cromo-scritta); color: #0A0A0B; font-size: 15.5px; line-height: 1.4; font-weight: 650; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-size: 15px; font-weight: 650; color: #0A0A0B; }
.campo label span { font-weight: 500; color: #4A4D55; }
.campo input {
  width: 100%; min-height: 48px; padding: 0 2px; border: 0; border-bottom: 2px solid #0A0A0B; border-radius: 0; background: none; color: #0A0A0B;
  font: 500 17px/1.2 'Montserrat', system-ui, sans-serif; transition: border-color 160ms ease-out;
}
.campo input::placeholder { color: #5A5E66; }
.campo input:focus { outline: none; border-color: #6B3FA8; box-shadow: 0 2px 0 #6B3FA8; }
.campo input[aria-invalid="true"] { border-color: var(--errore); box-shadow: 0 2px 0 var(--errore); }
.campo__errore { font-size: 14px; color: var(--errore); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* on the light sheets clear glass would vanish and take the words with it: the body turns to solid ink, the metal ring stays */
.passi .cta .metallo-corpo, .modulo .cta .metallo-corpo { background: #0A0A0B; box-shadow: none; }
.modulo__invia { width: 100%; justify-content: space-between; margin-top: 4px; }
.modulo__invia .metallo-scritta { width: 100%; justify-content: space-between; }
.modulo__esito { font-size: 15px; color: var(--errore); }
.modulo__privacy { font-size: 13.5px; line-height: 1.5; color: #4A4D55; }
.modulo__privacy a { color: #0A0A0B; text-underline-offset: 3px; }
.modulo__prova { padding: 8px 12px; border-radius: 2px; background: #EFEFF1; font-size: 13.5px; color: #4A4D55; }
.chiusa { margin-top: 26px; max-width: 540px; padding: 24px 20px; border-radius: 2px; background: #FFF; color: #0A0A0B; }
.chiusa__titolo { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 8px; }
.candidati__nojs { margin-top: 20px; font-size: 18px; }
html:not(.js) .modulo { display: none !important; }

@media (min-width: 1024px) {
  .candidati { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 72px; align-items: start; }
  .modulo, .chiusa { margin-top: 0; padding: 32px; }
  .candidati__testo { position: sticky; top: 110px; }
  .candidati__testo > p { font-size: 21px; }
}

/* ── Barra fissa sul telefono: la candidatura sempre a un tocco ── */
.barra-cta {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 9, 10, 0), rgba(8, 9, 10, 0.92) 42%);
  transform: translateY(110%); transition: transform 320ms var(--curva); pointer-events: none;
}
.barra-cta.vista { transform: none; pointer-events: auto; }
.barra-cta .metallo { width: 100%; justify-content: space-between; }
.barra-cta .metallo-scritta { width: 100%; justify-content: space-between; }
@media (min-width: 1024px) { .barra-cta { display: none; } }
@media (orientation: landscape) and (max-height: 560px) { .barra-cta { left: auto; width: 320px; padding-right: calc(var(--g) + env(safe-area-inset-right)); background: none; } }

/* ── Piè di pagina ── */
.piede { position: relative; padding: 56px var(--g) calc(56px + env(safe-area-inset-bottom)); border-top: 1px solid var(--riga); background: var(--nero); font-size: 15px; color: var(--sec); }
/* the sticky call must never sit on the last line of the footer */
@media (max-width: 1023px) { .piede { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }
.piede__motto { font-size: clamp(46px, 14.4vw, 190px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--testo); text-wrap: balance; }
.piede__sotto { margin: 10px 0 34px; font-size: clamp(16px, 4.4vw, 20px); font-weight: 600; color: var(--cromo-chiaro); }
.piede__griglia { display: grid; gap: 22px; }
.piede__griglia p + p { margin-top: 2px; }
.piede__nome { color: var(--testo); font-weight: 650; }
.piede a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.link-piede, .ferma { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.piede__piccolo { margin-top: 28px; font-size: 13.5px; }
@media (hover: hover) { .piede a:hover { color: var(--testo); } }
@media (min-width: 768px) { .piede__griglia { grid-template-columns: repeat(3, 1fr); } }

/* ── Avviso cookie: «Rifiuta» e «Accetta» sono lo stesso tasto ── */
.ck {
  position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-height: calc(100svh - 20px); overflow: auto;
  padding: 16px 16px 14px; border-radius: 6px; background: #131417; color: var(--testo);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ck__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck__titolo { font-size: 16.5px; font-weight: 720; letter-spacing: -0.015em; }
.ck__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 999px; background: none; color: var(--testo); cursor: pointer; }
.ck__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ck__testo { margin-top: 4px; font-size: 14.2px; line-height: 1.5; color: #C6CBD2; }
.ck__testo a { color: var(--testo); text-underline-offset: 3px; }
.ck__scelte { margin: 12px 0 0; padding: 0; border: 0; display: grid; gap: 4px; }
.ck__riga { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--riga-2); cursor: pointer; }
.ck__riga b { display: block; font-size: 15px; font-weight: 650; }
.ck__riga small { display: block; font-size: 13px; line-height: 1.4; color: var(--sec); }
.ck__riga input { width: 44px; height: 26px; margin: 0; accent-color: var(--cromo); }
.ck__fisso { font-size: 13px; color: var(--sec); }
.ck__azioni { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.ck__tasto {
  min-height: 46px; padding: 0 8px; border: 0; border-radius: 999px; cursor: pointer; background: #2A2D33; color: var(--testo);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 650 14.5px/1.2 'Montserrat', system-ui, sans-serif;
}
.ck__tasto:active { transform: scale(0.98); }
@media (min-width: 640px) { .ck { left: auto; right: 20px; bottom: 20px; width: 420px; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html.fermo *, html.fermo *::before, html.fermo *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
html.fermo .parole .p > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}