/*
 * La pagina pubblica, versione C.
 *
 * Stesso copy e stessi disegni della B. Quello che cambia e' il modo di
 * costruire la pagina, preso dai due siti indicati da chi commissiona e
 * tradotto nei nostri colori invece che nel loro verde acido.
 *
 * Cosa arriva da li'.
 *
 *   Blocchi a piena larghezza che cambiano colore di sezione in sezione. Chi
 *   scorre non legge otto paragrafi di seguito, attraversa cinque stanze.
 *
 *   Tipografia molto piu' grande, crenatura strettissima, peso alto. Il titolo
 *   arriva a 112 pixel su schermo largo: sul sito che piace il corpo del testo
 *   e' a 36, e la differenza fra una brochure e una pagina di vendita e' quasi
 *   tutta qui dentro.
 *
 *   Le parole del titolo entrano una per una da sotto una feritoia, e il resto
 *   sale con calma, novecento millisecondi invece di cinquecento. E' l'entrata
 *   che gli piace del secondo sito, che la ottiene con una libreria: qui sono
 *   `transform` e `opacity` su elementi che esistono gia' nel documento.
 *
 * Cosa non arriva da li'. Il verde e il rosso pieni su fondo bianco, i caratteri
 * comprati, le librerie di animazione e le cifre grandi senza niente dietro. Il
 * fondo resta il nostro, i colori sono quelli dell'applicazione, e ogni numero
 * continua a venire da dove viene.
 *
 * Valgono tutte le regole della B: senza `data-motion` la pagina e' gia' quella
 * giusta e ferma, si animano solo `transform` e `opacity`, e a 375 pixel non
 * scorre niente di lato.
 */

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-padding-top:28px}

body{min-height:100dvh;font-family:var(--font-sans);color:var(--label);
  -webkit-font-smoothing:antialiased;font-size:18px;line-height:1.5;
  letter-spacing:-.015em;overflow-x:hidden;
  /* Gli stessi grigi alzati della B: quello smorto e' la prima cosa che fa
     sembrare una pagina scritta da una macchina. */
  --label-2:rgba(235,235,245,.92);
  --label-3:rgba(235,235,245,.78)}

:root[data-theme="light"] body,
:root[data-theme="paper"] body,
:root[data-theme="sand"] body{
  --label-2:rgba(28,28,32,.94);
  --label-3:rgba(28,28,32,.80)}

.wall{position:fixed;inset:0;z-index:-2;background:var(--wall);pointer-events:none;
  overflow:hidden}
.wall::before,.wall::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.5}
.wall::before{width:52vw;height:52vw;left:-8vw;top:-10vw;background:var(--tint-soft)}
.wall::after{width:46vw;height:46vw;right:-10vw;top:24vh;background:var(--sunk)}

a{color:inherit}
img,svg{max-width:100%}

/* La barra, trasparente e ferma in cima al documento. Vedi la B. */
.bar{position:relative;z-index:5;background:transparent}
.barIn{display:flex;align-items:center;gap:var(--space-4);
  width:min(1280px,100%);margin:0 auto;padding:13px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand{gap:12px}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.03em}
.mark svg{width:36px;height:36px}
.mark{display:flex;align-items:center;color:var(--label)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:15px}
.nav a{display:none;color:var(--label-2);text-decoration:none;padding:7px 11px;
  border-radius:var(--radius-sm);transition:background var(--duration) var(--ease)}
.nav a:hover{background:var(--hover);color:var(--label)}
.nav .quiet{display:inline-flex;border:1px solid var(--hair)}

main{width:min(1280px,100%);margin:0 auto;padding:0 20px}

/* ── Tipografia, molto piu' grande ───────────────────────────────────── */
h1{font-size:clamp(42px,9.4vw,112px);font-weight:800;letter-spacing:-.05em;
  line-height:.96;max-width:15ch;text-wrap:balance;color:var(--label)}
h2{font-size:clamp(32px,5.6vw,64px);font-weight:800;letter-spacing:-.042em;
  line-height:1.02;max-width:17ch;text-wrap:balance;color:var(--label)}
h2.big{font-size:clamp(38px,7.4vw,86px)}
h3{font-size:22px;font-weight:700;letter-spacing:-.026em;line-height:1.24;color:var(--label)}

/* Le parole del titolo. La feritoia e' il contenitore, la parola sta dentro e
   sale da sotto: senza movimento e' una parola dentro un blocco in linea, che
   e' quello che sarebbe stata comunque. */
/* Lo spazio sotto la linea di base non e' a occhio: la coda di questo
   carattere misura 0,241 em, e la riga a 0,96 em ne toglie ancora un po'
   invece di aggiungerne. Con 0,14 em la g e la y restavano tagliate, e si
   vedeva. 0,28 copre tutti e due i titoli con un margine di sicurezza, e il
   margine negativo rimette l'altezza della riga dov'era. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.28em;margin-bottom:-.28em}
.w > i{display:inline-block;font-style:normal}
.w.hot > i{color:var(--series-back-text)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tint-text);margin-bottom:20px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--tint);flex-shrink:0}

.lead{font-size:clamp(19px,2.6vw,27px);line-height:1.38;color:var(--label-2);
  max-width:46ch;margin-top:28px;letter-spacing:-.02em}
.lead b{color:var(--label);font-weight:800}
.body{font-size:18.5px;color:var(--label-2);max-width:56ch;margin-top:20px}
.body b{color:var(--label);font-weight:800}
.large{font-size:clamp(30px,5.4vw,58px);font-weight:800;letter-spacing:-.042em;
  line-height:1.04;color:var(--label);max-width:12ch}
.fine{font-size:16.5px;color:var(--label-3)}
.fine a{color:var(--label-2)}

.ul{display:inline;background-image:linear-gradient(var(--tint-text),var(--tint-text));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px;
  padding-bottom:3px}
b.ul{color:var(--label);font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 32px;
  border-radius:var(--radius-pill);background:var(--thumb);color:var(--on-thumb);
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:transform var(--duration) var(--ease), opacity var(--duration) var(--ease)}
.btn:hover{opacity:.94;transform:translateY(-2px)}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--label);border:1.5px solid var(--hair)}
.btn.ghost:hover{background:var(--hover);opacity:1}
.btn.big{padding:20px 38px;font-size:18px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}

/* ── Il primo schermo ────────────────────────────────────────────────── */
.hero{padding:11vh 0 64px}
.heroRow{margin-top:40px;display:grid;grid-template-columns:1fr;gap:34px;
  align-items:center}
.sub{font-size:clamp(18px,2.2vw,23px);color:var(--label-2);max-width:42ch;line-height:1.4}
.sub b{color:var(--label);font-weight:800}
/* Titolo a sinistra, i due pulsanti a destra e allineati al suo ultimo rigo.
   A destra di un titolo alto tre righe c'e' mezza schermata vuota, ed e' li'
   che l'occhio arriva dopo aver finito di leggere. */
.heroTop{display:grid;grid-template-columns:1fr;gap:26px;align-items:end}
.heroActs{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.heroActs .fine{flex-basis:100%}
.heroSay .fine{margin-top:16px}

.strip{background:var(--sunk);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:16px 18px 14px;overflow:hidden}
.strip svg{display:block;width:100%;height:clamp(130px,17vw,210px)}
.strip figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-start;gap:10px;padding-top:12px;font-size:15px;color:var(--label-3)}
.tag{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tint-text);background:var(--tint-soft);border-radius:var(--radius-xs);
  padding:4px 10px;white-space:nowrap}

/* ── La striscia che scorre ───────────────────────────────────────────── */
.belt{position:relative;margin:12px 0 0;padding:18px 0;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);overflow:hidden}
.beltRun{display:flex;width:max-content;gap:0}
.beltRun span{display:inline-flex;align-items:center;padding:0 26px;
  font-size:clamp(17px,2.2vw,23px);font-weight:700;letter-spacing:-.02em;
  color:var(--label-3);white-space:nowrap}
.beltRun span::after{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tint);margin-left:26px}

/* ── Le stanze ────────────────────────────────────────────────────────────
   Il colore esce dalla colonna del testo e prende tutta la larghezza. Il
   ritaglio viene da un livello dietro invece che da un margine negativo, cosi'
   nessun elemento sporge davvero e la misura a 375 resta pulita. */
/*
 * La fascia si dipinge con un'ombra larga quanto lo schermo invece che con un
 * livello dietro largo `100vw`.
 *
 * Il motivo e' misurato: `100vw` conta anche la barra di scorrimento, quindi il
 * livello sporgeva di otto pixel e il documento risultava piu' largo della
 * finestra. Non si scorreva di lato davvero, ma ogni misura successiva partiva
 * sporca. Un'ombra non entra mai nel calcolo dello scorrimento, e il ritaglio
 * negativo la lascia uscire solo in orizzontale.
 */
.sec{position:relative;padding:96px 0}
.sec.dark,.sec.tint,.sec.warm{clip-path:inset(0 -100vmax)}
.sec.dark{background:rgba(10,10,14,.5);box-shadow:0 0 0 100vmax rgba(10,10,14,.5)}
.sec.tint{background:var(--tint-soft);box-shadow:0 0 0 100vmax var(--tint-soft)}
.sec.warm{background:var(--bad-soft);box-shadow:0 0 0 100vmax var(--bad-soft)}
.sec.warm .eyebrow{color:var(--bad-text)}
.sec.warm .eyebrow::before{background:var(--bad)}

/* ── Il problema ─────────────────────────────────────────────────────── */
.metaWrap{margin-top:40px;display:flex;flex-direction:column;gap:32px}
/* Le due meta' del pannello, come nella B: sopra quello che arriva, sotto in
   verde quello che manca, con i punti interrogativi al posto di cifre che
   nessuno da'. Qui il riquadro e' opaco perche' sta su una fascia colorata. */
/* Come nella B: le due meta' stanno una accanto all'altra e il verde entra con
   una sfumatura larga invece che dopo un filetto. */
.meta{width:min(700px,100%);background:var(--solid);overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--radius-md);
  display:grid;grid-template-columns:1fr}
.metaHalf{padding:24px 26px;min-width:0}
.metaHalf.missing{background:linear-gradient(180deg,
    rgba(48,209,88,0) 0%, var(--ok-soft) 42%, var(--ok-soft) 100%)}
@media (min-width:620px){
  .meta{grid-template-columns:1fr 1fr}
  .metaHalf.missing{background:linear-gradient(100deg,
      rgba(48,209,88,0) 0%, rgba(48,209,88,.10) 38%, var(--ok-soft) 78%)}
}
.missing .metaHead{color:var(--ok-text)}
.missing .metaRows dd{color:var(--ok-text);letter-spacing:.08em}
.missing .metaRows > div{border-bottom-color:rgba(48,209,88,.18)}
.metaHead{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label-3);margin-bottom:16px}
.metaRows{display:flex;flex-direction:column;gap:11px;font-family:var(--font-mono);
  font-size:17px;font-variant-numeric:tabular-nums}
.metaRows > div{display:flex;justify-content:space-between;gap:16px;padding-bottom:11px;
  border-bottom:1px solid var(--hair-2)}
.metaRows dt{color:var(--label-3)}
.metaRows dd{color:var(--label-2)}
.metaFoot{margin-top:14px;font-size:14.5px;color:var(--label-3);max-width:46ch}

.two{margin-top:10px}
.blocks{margin-top:52px;display:grid;grid-template-columns:1fr;gap:0}
.block{padding:28px 0;border-top:1px solid var(--hair)}
.block h3{margin-top:20px}
.block p{margin-top:12px;font-size:17px;color:var(--label-2);max-width:50ch}
.block b{color:var(--label);font-weight:700}
.draw{background:var(--sunk);border-radius:var(--radius-md);padding:10px;max-width:340px;
  transition:transform var(--duration) var(--ease)}
.draw:hover{transform:translateY(-2px)}
.draw svg{display:block;width:100%;height:auto}

.cardEdge{fill:none;stroke:var(--hair);stroke-width:1.5}
.bar{fill:var(--series-new)}
.bar.hot{fill:var(--series-back)}
.track{fill:var(--hair-2)}
.grow{fill:var(--tint)}
.drain{fill:var(--series-back)}
.tap{fill:var(--tint)}
.who{fill:var(--series-back);opacity:.85}
.tick{fill:var(--label-2);font-size:13px;font-family:var(--font-sans)}
.line{stroke:var(--series-back);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fadeTop{stop-color:var(--series-back);stop-opacity:.32}
.fadeEnd{stop-color:var(--series-back);stop-opacity:0}
.base{stroke:var(--hair);stroke-width:1}
.cut{stroke:var(--label-3);stroke-width:1;stroke-dasharray:4 5}
.cap{fill:var(--label-3);font-size:15px;font-family:var(--font-sans);text-anchor:middle}
.cap.small{font-size:14px;text-anchor:start}

/* ── Il giro in quattro tappe ────────────────────────────────────────── */
.flow{margin-top:48px;padding:26px 20px 20px;background:var(--glass);
  border:1px solid var(--glass-edge);border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.flowSteps{list-style:none;display:grid;grid-template-columns:1fr;gap:28px}
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative}
.scene{width:min(210px,72%);transition:transform var(--duration) var(--ease)}
.stage:hover .scene{transform:translateY(-3px)}
.flow svg{display:block;width:100%;height:auto}
.stageCap{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--label);
  text-align:center;max-width:20ch}
.flow figcaption{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  font-size:17px;color:var(--label-2);max-width:62ch}
.stage + .stage::before{content:"";position:absolute;background:var(--hair);
  left:50%;top:-21px;width:1px;height:14px}
.pill{fill:var(--tint-soft)}
.deviceEdge{fill:var(--solid);stroke:var(--glass-edge);stroke-width:1.5}
.poster{fill:var(--tint-soft)}
.lineLo{fill:var(--hair)}
.lineLo.short{fill:var(--hair-2)}
.finger{fill:var(--tint)}
.ring{fill:none;stroke:var(--series-back);stroke-width:5}
.playRing{fill:none;stroke:var(--tint);stroke-width:5}
.playTri{fill:var(--tint)}
.wave{fill:var(--series-back)}
.day{fill:var(--hair)}
.day.back{fill:var(--series-back)}
.returnArc{stroke:var(--series-back);stroke-width:2.5;stroke-linecap:round}

/* ── I quattro passi, con il numero grande ───────────────────────────── */
.steps{list-style:none;margin-top:52px;display:grid;grid-template-columns:1fr;gap:0}
.steps li{display:grid;grid-template-columns:1fr;gap:10px;padding:30px 0;
  border-top:1px solid var(--hair)}
.stepNo{font-size:clamp(38px,5.6vw,64px);font-weight:800;letter-spacing:-.05em;
  line-height:1;color:var(--tint-text);font-variant-numeric:tabular-nums;opacity:.5}
.steps p{font-size:17.5px;color:var(--label-2);max-width:54ch}
.steps b{color:var(--label);font-weight:700}
.steps h3 + p{margin-top:10px}

/* ── Le quattro schermate ────────────────────────────────────────────── */
.shots{margin-top:52px;display:flex;flex-direction:column;gap:0}
.shot{padding:36px 0;border-top:1px solid var(--hair);display:grid;
  grid-template-columns:1fr;gap:26px;align-items:center}
.shotText h3{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.035em;font-weight:800}
.shotText p{margin-top:16px;font-size:19px;color:var(--label-2);max-width:46ch}
.shotText b{color:var(--label);font-weight:700}
.frame{position:relative;border:1px dashed var(--warn);border-radius:var(--radius-md);
  background:var(--sunk);padding:16px}
.frame svg{display:block;width:100%;height:auto}
.frame figcaption{position:absolute;right:14px;top:14px}
.colNew{fill:var(--series-new)}
.colBack{fill:var(--series-back)}
.rowName{fill:var(--hair)}
.rowTrack{fill:var(--hair-2)}
.rowFill{fill:var(--series-back)}
.rowFill.cool{fill:var(--series-new)}

/* ── I quattro no ────────────────────────────────────────────────────── */
/* I quattro no dentro una scheda sola, come nella B: il rosso non tocca il
   fondo colorato della fascia, e resta sul titolo e sulle parole in evidenza. */
.nots{margin-top:40px;display:grid;grid-template-columns:1fr;gap:0;
  background:var(--solid);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:4px 28px;overflow:hidden}
.nots > div{padding:26px 0;border-top:1px solid var(--hair-2)}
.nots > div:first-child{border-top:0}
.nots dt{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.035em;
  margin-bottom:12px;color:var(--bad-text)}
.nots b{color:var(--bad-text)}
.nots dd{font-size:17.5px;color:var(--label-2);max-width:56ch}


/* ── I piani ─────────────────────────────────────────────────────────── */
.plans{margin:40px 0 28px;display:grid;grid-template-columns:1fr;gap:0}
.loading{font-size:16px;color:var(--label-3)}
.plan{padding:26px 0;border-top:1px solid var(--hair)}
.planName{font-size:15.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tint-text)}
.planPrice{font-size:clamp(40px,4.6vw,54px);font-weight:800;letter-spacing:-.05em;
  line-height:1.04;font-variant-numeric:tabular-nums;margin-top:12px}
.planPer{display:block;font-size:15.5px;font-weight:500;letter-spacing:0;
  color:var(--label-3);margin-top:4px}
.planOff{margin-top:14px;font-size:17px;color:var(--label-2)}
/* Come nella B: le righe sono le stesse su tutte le colonne, e quella spenta
   e' quello che si compra salendo di piano. */
.planList{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:13px}
.planList li{position:relative;padding-left:28px;font-size:18px;color:var(--label);
  line-height:1.34}
.planList li.on::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:12px;
  border-right:2.5px solid var(--tint-text);border-bottom:2.5px solid var(--tint-text);
  transform:rotate(45deg)}
.planList li.off{color:var(--label-3);opacity:.62}
.planList li.off::before{content:"";position:absolute;left:0;top:12px;width:14px;height:2px;
  border-radius:1px;background:var(--label-3)}

/* ── Le domande ──────────────────────────────────────────────────────── */
.faq{max-width:74ch;margin-top:40px}
.faq details{border-top:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:22px 38px 22px 0;position:relative;
  font-size:20px;font-weight:700;letter-spacing:-.026em;
  transition:color var(--duration) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:29px;width:9px;height:9px;
  border-right:2.5px solid var(--label-3);border-bottom:2.5px solid var(--label-3);
  transform:rotate(45deg);transition:transform var(--duration) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--tint-text)}
.faq details p{padding:0 0 24px;font-size:17.5px;color:var(--label-2);max-width:64ch}
.faq details b{color:var(--label);font-weight:800}
.metaFoot b,.strip figcaption b,.flow figcaption b,.fine b{color:var(--label);font-weight:800}

/* ── La chiusura ─────────────────────────────────────────────────────── */
.close{padding-bottom:110px}
.contact{margin-top:44px;font-style:normal;font-size:17px;color:var(--label-2);
  line-height:1.8}
.foot{width:min(1280px,100%);margin:0 auto;padding:30px 20px 48px;
  border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.foot b{font-size:15px}
.legal{font-size:13.5px;color:var(--label-3);max-width:80ch;line-height:1.7}

/* ── Lo schermo largo ─────────────────────────────────────────────────── */
@media (min-width:620px){ .nav a{display:inline-flex} }
@media (min-width:760px){ .heroRow{grid-template-columns:1.05fr 1fr;gap:44px} }
@media (min-width:900px){
  .barIn,main,.foot{padding-left:36px;padding-right:36px}
  .heroTop{grid-template-columns:minmax(0,1fr) auto;gap:56px}
  .heroActs{justify-content:flex-end;max-width:320px}
  .sec{padding:120px 0}
  .heroRow{gap:60px}
  .metaWrap{flex-direction:row;align-items:center;justify-content:space-between;gap:52px}
  .meta{flex:0 0 auto}
  .large{margin-top:0}
  .two{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:48px}
  .two .body{margin-top:0}
  .blocks{grid-template-columns:repeat(3,1fr);gap:30px}
  .flowSteps{grid-template-columns:repeat(4,1fr);gap:22px}
  .stage + .stage::before{left:-11px;top:84px;width:12px;height:1px}
  .steps{grid-template-columns:repeat(2,1fr);gap:0 44px}
  .steps li{grid-template-columns:auto 1fr;gap:24px;align-items:start}
  .nots{grid-template-columns:repeat(2,1fr);gap:0 44px}
  .nots > div:nth-child(2){border-top:0}
  .nots > div:nth-child(even){border-left:1px solid var(--hair-2);padding-left:44px}
  .shot{grid-template-columns:1.15fr 1fr;gap:48px;padding:56px 0}
  .shot:nth-child(even) .frame{order:2}

  .plans{grid-template-columns:repeat(4,1fr);gap:20px}
  .calcTop{align-items:baseline}
  .aGrid{grid-template-columns:repeat(4,1fr)}
}

/* ══ Il movimento ═══════════════════════════════════════════════════════ */

html[data-motion]{scroll-behavior:smooth}

[data-motion] .wall::before{animation:driftA 54s ease-in-out infinite}
[data-motion] .wall::after{animation:driftB 66s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:none}50%{transform:translate3d(5vw,4vh,0) scale(1.08)}}
@keyframes driftB{0%,100%{transform:none}50%{transform:translate3d(-6vw,-5vh,0) scale(1.1)}}

/* La striscia scorre di meta' della sua larghezza, e la seconda copia delle
   voci prende il posto della prima senza che si veda il salto. */
[data-motion] .beltRun{animation:beltRun 38s linear infinite}
@keyframes beltRun{from{transform:none}to{transform:translateX(-50%)}}

/* Le parole del titolo, una per una da sotto la feritoia. Novecento
   millisecondi e sessanta di scarto: piu' lento della B, ed e' il punto. */
[data-motion] .w > i{transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
[data-motion] .in .w > i{transform:none}
[data-motion] .in .w:nth-child(1) > i{transition-delay:.02s}
[data-motion] .in .w:nth-child(2) > i{transition-delay:.08s}
[data-motion] .in .w:nth-child(3) > i{transition-delay:.14s}
[data-motion] .in .w:nth-child(4) > i{transition-delay:.2s}
[data-motion] .in .w:nth-child(5) > i{transition-delay:.26s}
[data-motion] .in .w:nth-child(6) > i{transition-delay:.32s}
[data-motion] .in .w:nth-child(7) > i{transition-delay:.38s}
[data-motion] .in .w:nth-child(8) > i{transition-delay:.44s}
[data-motion] .in .w:nth-child(9) > i{transition-delay:.5s}
[data-motion] .in .w:nth-child(10) > i{transition-delay:.56s}
[data-motion] .in .w:nth-child(11) > i{transition-delay:.62s}
[data-motion] .in .w:nth-child(12) > i{transition-delay:.68s}
[data-motion] .in .w:nth-child(13) > i{transition-delay:.74s}
[data-motion] .in .w:nth-child(14) > i{transition-delay:.8s}

/* Tutto il resto sale di quaranta pixel invece che di sedici, e ci mette
   novecento millisecondi. E' l'entrata dei due siti indicati. */
[data-motion] .hero > *,
[data-motion] .sec > *,
[data-motion] .belt{opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
[data-motion] .in > *,[data-motion] .belt.in{opacity:1;transform:none}
[data-motion] .in > *:nth-child(1){transition-delay:.05s}
[data-motion] .in > *:nth-child(2){transition-delay:.15s}
[data-motion] .in > *:nth-child(3){transition-delay:.25s}
[data-motion] .in > *:nth-child(4){transition-delay:.35s}
[data-motion] .in > *:nth-child(5){transition-delay:.45s}
[data-motion] .in > *:nth-child(6){transition-delay:.55s}
[data-motion] .in > *:nth-child(7){transition-delay:.65s}
/* Il titolo non aspetta il suo turno: sono le sue parole a scaglionarsi. */
[data-motion] .hero > h1,[data-motion] .sec > h2{opacity:1;transform:none;transition:none}

[data-motion] .ul{background-size:0 3px;transition:background-size .8s var(--ease) .6s}
[data-motion] .in .ul{background-size:100% 3px}

/* Le righe che mancano arrivano dopo che le quattro cifre sopra hanno finito
   di salire. Prima il conto, poi il vuoto. */
[data-motion] .blank > div{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
[data-motion] .in .blank > div{opacity:1;transform:none}
[data-motion] .in .blank > div:nth-child(1){transition-delay:1.1s}
[data-motion] .in .blank > div:nth-child(2){transition-delay:1.25s}
[data-motion] .in .blank > div:nth-child(3){transition-delay:1.4s}
[data-motion] .in .blank > div:nth-child(4){transition-delay:1.55s}
[data-motion] .in .blank > div:nth-child(5){transition-delay:1.7s}

[data-motion] .line{stroke-dasharray:var(--len,1300);stroke-dashoffset:var(--len,1300);
  transition:stroke-dashoffset 2.1s cubic-bezier(.4,.5,.2,1) .2s}
[data-motion] .in .line{stroke-dashoffset:0}
[data-motion] .area{opacity:0;transition:opacity .9s ease 1.3s}
[data-motion] .in .area{opacity:1}
[data-motion] .cut,[data-motion] .cap{opacity:0;transition:opacity .7s ease 1.3s}
[data-motion] .in .cut,[data-motion] .in .cap{opacity:1}

[data-motion] .bar.late,[data-motion] .grow,[data-motion] .drain{
  transform-box:fill-box;transform-origin:left center}
[data-motion] .bar.late{transform:scaleX(0)}
[data-motion] .in .bar.late{animation:barLoop 6s var(--ease) infinite}
[data-motion] .in .bar.late.hot{animation-delay:.25s}
@keyframes barLoop{0%{transform:scaleX(0)}14%{transform:scaleX(1)}82%{transform:scaleX(1)}
  92%{transform:scaleX(0)}100%{transform:scaleX(0)}}
[data-motion] .grow{transform:scaleX(0)}
[data-motion] .in .grow{animation:growLoop 6s var(--ease) infinite}
[data-motion] .in .grow.slow{animation-duration:8s}
@keyframes growLoop{0%{transform:scaleX(0)}40%{transform:scaleX(1)}86%{transform:scaleX(1)}
  96%{transform:scaleX(0)}100%{transform:scaleX(0)}}
[data-motion] .in .drain{animation:drainLoop 8s var(--ease) infinite}
@keyframes drainLoop{0%{transform:none}40%{transform:scaleX(.06)}86%{transform:scaleX(.06)}
  96%{transform:none}100%{transform:none}}

[data-motion] .tap,[data-motion] .finger{transform-box:fill-box;transform-origin:center;
  opacity:0}
[data-motion] .in .tap{animation:tapLoop 2s var(--ease) infinite}
[data-motion] .in .finger{animation:tapLoop 3s var(--ease) .6s infinite}
@keyframes tapLoop{0%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1)}
  46%{opacity:1;transform:scale(1)}72%{opacity:0;transform:scale(1.6)}
  100%{opacity:0;transform:scale(1.6)}}
[data-motion] .who{transform-box:fill-box;transform-origin:center}
[data-motion] .in .who{animation:walkLoop 6s var(--ease) infinite}
[data-motion] .in .w2{animation-delay:.4s}
[data-motion] .in .w3{animation-delay:.8s}
@keyframes walkLoop{0%{opacity:.85;transform:none}22%{opacity:0;transform:translateX(34px)}
  23%{opacity:0;transform:translateX(-12px)}40%{opacity:.85;transform:none}
  100%{opacity:.85;transform:none}}
.draw:hover .bar.late,.draw:hover .grow,.draw:hover .drain,
.draw:hover .tap,.draw:hover .who{animation-duration:3s}

[data-motion] .stage{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
[data-motion] .in .stage{opacity:1;transform:none}
[data-motion] .in .s1{transition-delay:.1s}
[data-motion] .in .s2{transition-delay:.7s}
[data-motion] .in .s3{transition-delay:1.3s}
[data-motion] .in .s4{transition-delay:1.9s}
[data-motion] .stage + .stage::before{transform:scaleY(0);transform-origin:top center;
  transition:transform .5s var(--ease)}
[data-motion] .in .stage + .stage::before{transform:none}
@media (min-width:900px){
  [data-motion] .stage + .stage::before{transform:scaleX(0);transform-origin:left center}
  [data-motion] .in .stage + .stage::before{transform:none}
}
[data-motion] .ring{transform-box:fill-box;transform-origin:center}
[data-motion] .in .r1{animation:joinL 5s var(--ease) infinite}
[data-motion] .in .r2{animation:joinR 5s var(--ease) infinite}
@keyframes joinL{0%,100%{transform:translateX(-14px)}34%,82%{transform:none}}
@keyframes joinR{0%,100%{transform:translateX(14px)}34%,82%{transform:none}}
[data-motion] .wave{transform-box:fill-box;transform-origin:center bottom}
[data-motion] .in .wave{animation:eq 1.5s ease-in-out infinite}
[data-motion] .in .w-2{animation-delay:.16s}
[data-motion] .in .w-3{animation-delay:.32s}
[data-motion] .in .w-4{animation-delay:.1s}
[data-motion] .in .w-5{animation-delay:.26s}
@keyframes eq{0%,100%{transform:scaleY(.34)}50%{transform:scaleY(1)}}
[data-motion] .day.back{transform-box:fill-box;transform-origin:center}
[data-motion] .in .day.back{animation:dayPop 6s var(--ease) 2.4s infinite}
@keyframes dayPop{0%{transform:scale(.3);opacity:0}10%{transform:none;opacity:1}
  84%{transform:none;opacity:1}94%{transform:scale(.3);opacity:0}
  100%{transform:scale(.3);opacity:0}}
[data-motion] .returnArc{stroke-dasharray:var(--len,160)}
[data-motion] .in .returnArc{animation:arcLoop 6s var(--ease) 2.2s infinite}
@keyframes arcLoop{0%{stroke-dashoffset:var(--len,160)}16%{stroke-dashoffset:0}
  84%{stroke-dashoffset:0}94%{stroke-dashoffset:var(--len,160)}
  100%{stroke-dashoffset:var(--len,160)}}

[data-motion] .colNew,[data-motion] .colBack{transform-box:fill-box;
  transform-origin:center bottom;transform:scaleY(0);transition:transform .6s var(--ease)}
[data-motion] .in .colNew,[data-motion] .in .colBack{transform:none}
[data-motion] .in .cols > *:nth-child(1){transition-delay:.05s}
[data-motion] .in .cols > *:nth-child(2){transition-delay:.13s}
[data-motion] .in .cols > *:nth-child(3){transition-delay:.21s}
[data-motion] .in .cols > *:nth-child(4){transition-delay:.29s}
[data-motion] .in .cols > *:nth-child(5){transition-delay:.37s}
[data-motion] .in .cols > *:nth-child(6){transition-delay:.45s}
[data-motion] .in .cols > *:nth-child(7){transition-delay:.53s}
[data-motion] .in .cols > *:nth-child(8){transition-delay:.61s}
[data-motion] .in .cols > *:nth-child(9){transition-delay:.69s}
[data-motion] .in .cols > *:nth-child(10){transition-delay:.77s}
[data-motion] .in .cols > *:nth-child(11){transition-delay:.85s}
[data-motion] .in .cols > *:nth-child(12){transition-delay:.93s}

[data-motion] .row{opacity:0;transform:translateY(10px);transform-box:fill-box;
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
[data-motion] .in .row{opacity:1;transform:none}
[data-motion] .in .rows > *:nth-child(1){transition-delay:.1s}
[data-motion] .in .rows > *:nth-child(2){transition-delay:.2s}
[data-motion] .in .rows > *:nth-child(3){transition-delay:.3s}
[data-motion] .in .rows > *:nth-child(4){transition-delay:.4s}
[data-motion] .in .rows > *:nth-child(5){transition-delay:.5s}
[data-motion] .rowFill{transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0);transition:transform .9s var(--ease) .5s}
[data-motion] .in .rowFill{transform:none}

@media (prefers-reduced-motion:reduce){
  html[data-motion]{scroll-behavior:auto}
  [data-motion] .wall::before,[data-motion] .wall::after,[data-motion] .beltRun{animation:none}
  [data-motion] .hero > *,[data-motion] .sec > *,[data-motion] .belt,
  [data-motion] .stage,[data-motion] .row,
  [data-motion] .blank > div{opacity:1;transform:none;transition:none}
  [data-motion] .w > i{transform:none;transition:none}
  [data-motion] .ul{background-size:100% 3px;transition:none}
  [data-motion] .stage + .stage::before{transform:none;transition:none}
  [data-motion] .line,[data-motion] .returnArc{stroke-dashoffset:0;transition:none}
  [data-motion] .area,[data-motion] .cut,[data-motion] .cap{opacity:1;transition:none}
  [data-motion] .bar.late,[data-motion] .grow,[data-motion] .drain,
  [data-motion] .colNew,[data-motion] .colBack,[data-motion] .rowFill,
  [data-motion] .wave,[data-motion] .day.back{transform:none;transition:none}
  [data-motion] .tap,[data-motion] .finger{opacity:1}
  [data-motion] .in .tap,[data-motion] .in .who,[data-motion] .in .finger,
  [data-motion] .in .wave,[data-motion] .in .r1,[data-motion] .in .r2{animation:none}
}

/* ── Le due note sotto la tabella ─────────────────────────────────────────
   Erano due righe piccole appoggiate sul fondo. Sono le due domande che chi
   compra fa sempre, quindi hanno una scheda e un disegno che le mostra. */
.notes{margin-top:34px;display:grid;grid-template-columns:1fr;gap:0;
  background:var(--solid);border:1px solid var(--hair);
  border-radius:var(--radius-lg);padding:6px 26px;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.note{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;
  padding:24px 0;border-top:1px solid var(--hair-2)}
.note:first-child{border-top:0}
.note p{font-size:19px;color:var(--label-2);max-width:56ch}
.note b{color:var(--label);font-weight:700}
.noteArt{width:min(190px,60%)}
.noteArt svg{display:block;width:100%;height:auto}
.tile{fill:var(--hair-2)}
.purse{fill:var(--hair-2)}
.spent{fill:var(--tint)}
.backAgain{fill:var(--series-back)}

@media (min-width:760px){
  .note{grid-template-columns:200px 1fr;gap:28px}
  .noteArt{width:100%}
}

/* I quattro riquadri si accendono uno dopo l'altro, e il quarto resta acceso
   un attimo di piu': e' quello che dice che una traccia e tre playlist fanno
   quattro campagne. */
[data-motion] .in .tile{animation:tileOn 5s var(--ease) infinite}
[data-motion] .in .t2{animation-delay:.35s}
[data-motion] .in .t3{animation-delay:.7s}
[data-motion] .in .t4{animation-delay:1.05s}
@keyframes tileOn{
  0%{fill:var(--hair-2)}
  8%{fill:var(--tint)}
  70%{fill:var(--tint)}
  84%{fill:var(--hair-2)}
  100%{fill:var(--hair-2)}
}
/* La spesa scende, e quello che resta torna indietro come credito. */
[data-motion] .spent{transform-box:fill-box;transform-origin:left center}
[data-motion] .in .spent{animation:spendDown 6s var(--ease) infinite}
@keyframes spendDown{
  0%{transform:scaleX(1)}
  40%{transform:scaleX(.72)}
  86%{transform:scaleX(.72)}
  100%{transform:scaleX(1)}
}
[data-motion] .backAgain{transform-box:fill-box;transform-origin:center}
[data-motion] .in .backAgain{animation:creditBack 6s var(--ease) infinite}
@keyframes creditBack{
  0%,30%{opacity:0;transform:translateX(0) scale(.4)}
  46%{opacity:1;transform:translateX(0) scale(1)}
  86%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(-24px) scale(.4)}
}


/* ── Le chiamate all'azione, dentro una scheda ────────────────────────────
   Un pulsante e una riga di testo appoggiati sul fondo, in mezzo a una pagina
   lunga, si saltano senza accorgersene. Dentro una scheda diventano una cosa
   sola e si fermano sotto l'occhio. */
.sec > .acts{margin-top:44px;padding:22px 26px;border-radius:var(--radius-lg);
  background:var(--glass);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  gap:18px}
.sec > .acts .fine{max-width:40ch}


/* ══ I piani, quattro schede con una spinta avanti ═══════════════════════
   Il modello scelto fra i tre messi in fila. La scheda alzata non e' la piu'
   cara: e' quella che consigliamo a chi arriva senza sapere ancora quanto
   spendera', ed e' il punto in cui la lettura scritta passa da fine ciclo a
   ogni due settimane.

   Tre segnali insieme, e non uno: fondo di vetro, bordo dell'accento ed
   etichetta. Con un segnale solo si legge come un errore di allineamento. */
.plans{margin:40px 0 0;display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.loading{font-size:16px;color:var(--label-3)}
.plan{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:28px 26px 26px;border:1px solid var(--hair);border-radius:var(--radius-lg);
  background:var(--field);transition:transform var(--duration) var(--ease)}
.plan:hover{transform:translateY(-3px)}
.plan.lifted{background:var(--glass);border-color:var(--tint);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.planFlag{position:absolute;top:-13px;left:26px;font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--on-tint);
  background:var(--tint);border-radius:var(--radius-pill);padding:5px 12px}
.planName{font-size:15.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tint-text)}
.planPrice{font-size:clamp(40px,4.4vw,50px);font-weight:800;letter-spacing:-.05em;
  line-height:1.04;font-variant-numeric:tabular-nums;margin-top:10px;color:var(--label)}
.planPer{display:block;font-size:15.5px;font-weight:500;letter-spacing:0;
  color:var(--label-3);margin-top:4px}
.planOff{margin-top:12px;font-size:17px;color:var(--label-2)}
.planList{list-style:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:13px}
.planList li{position:relative;padding-left:28px;font-size:17px;color:var(--label);
  line-height:1.34}
.planList li.on::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:12px;
  border-right:2.5px solid var(--tint-text);border-bottom:2.5px solid var(--tint-text);
  transform:rotate(45deg)}
.planList li.off{color:var(--label-3);opacity:.62}
.planList li.off::before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;
  border-radius:1px;background:var(--label-3)}
.plan .btn{margin-top:auto;width:100%;padding-top:15px;padding-bottom:15px}
.plan .planList{margin-bottom:22px}

/* ══ Il conto sul budget di chi legge ════════════════════════════════════ */
.calc{margin-top:34px;padding:30px 28px;background:var(--solid);
  border:1px solid var(--hair);border-radius:var(--radius-lg)}
.calcTitle{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.03em;
  color:var(--label);max-width:30ch;margin-bottom:22px}
.calcTop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.calcLabel{font-size:17px;color:var(--label-2)}
.calcOut{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--label)}
.calcRange{width:100%;margin-top:16px;accent-color:var(--tint);height:26px}
.calcRow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px}
.calcHint{font-size:16px;color:var(--label-3);min-width:17ch}
.calcRange.short{flex:1;min-width:180px;margin-top:0}
.calcAnswer{margin-top:26px;padding-top:24px;border-top:1px solid var(--hair)}
.aHead{font-size:clamp(20px,2.8vw,28px);line-height:1.32;color:var(--label-2);max-width:42ch}
.aHead b{color:var(--label);font-weight:800}
.aHead .aPlan{color:var(--series-back-text)}
.aGrid{margin-top:24px;display:grid;grid-template-columns:1fr;gap:16px}
.aCell{padding:18px 20px;background:var(--sunk);border-radius:var(--radius-md)}
.aBig{font-size:27px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--label)}
.aSmall{font-size:15.5px;color:var(--label-2);margin-top:6px;max-width:26ch}
.calcAnswer .btn{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  .plan:hover{transform:none}
}

/* Lo schermo largo per i piani e per il conto, scritto qui in fondo e non nel
   blocco di sopra: le regole delle schede sono state aggiunte dopo quel blocco,
   e a parita' di peso vince l'ultima scritta. Le quattro colonne restavano una
   sotto l'altra per quel motivo, non per la misura della finestra. */
@media (min-width:900px){
  .plans{grid-template-columns:repeat(4,1fr);gap:20px}
  .aGrid{grid-template-columns:repeat(4,1fr)}
}