/* =========================================================
   LSNN — Servizio editoriale · landing page
   Mobile-first, riprende il mockup 1:1 e si adatta al desktop
   ========================================================= */

:root{
  --ink:#0a0f1f;
  --ink-soft:#26304d;
  --muted:#5d6781;
  --white:#fff;
  --page:#eef1f8;
  --shell:#f4f6fb;
  --card:#fff;
  --card-soft:#f7f9fe;
  --border:#e7ecf7;

  --navy-1:#0a1338;
  --navy-2:#142a72;
  --navy-3:#35206e;

  --cyan:#4fd8ff;
  --violet:#6d4dfa;
  --blue:#3f6df0;
  --sky:#2fb9f5;
  --gold:#f7bb3c;

  --grad-ico:linear-gradient(135deg,#2fb9f5 0%,#3f6df0 100%);
  --grad-cta:linear-gradient(100deg,#5b2fd6 0%,#3f6df0 46%,#2f9bf6 100%);

  --r-card:22px;
  --r-step:14px;
  --r-thumb:10px;

  --shadow-card:0 18px 44px rgba(18,28,70,.10);
  --shadow-rail:0 4px 10px rgba(18,28,70,.12);

  --shell-w:480px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* due gettoni nati con la cura del 03/10/2026: il bordo «acceso» di una card al passaggio del
     dito, e la cornice chiara che, da 540px in su, fa galleggiare la colonna (vedi il blocco in
     fondo). Sono gettoni e non colori scritti a mano perché devono cambiare col tema. */
  --border-strong:#cfd8f2;
  --frame-grad:radial-gradient(95% 62% at 50% 0%,#ffffff 0%,#e8ecf7 46%,#dee3f1 100%);

  /* il rosso dell'errore (06/10/2026): nasce col modulo «Fatti pubblicare» — l'unico punto della landing
     dove si può sbagliare qualcosa. Un gettone solo perché nel tema scuro il rosso va schiarito, o sul
     fondo navy non si legge. */
  --danger:#c8382c;
}

/* ---------- IL TEMA SCURO (03/10/2026) ----------
   Segnalazione del titolare: «non rispetta i temi light e dark». Aveva ragione, ed era la seconda metà
   del difetto: la prima era il tema che arrivava in ritardo (vedi `index.php`, `theme-init.js`); questa
   è che la pagina era disegnata SOLO chiara — fondo `#eef1f8`, card `#fff`, inchiostro `#0a0f1f` — per
   quanto `data-theme` dicesse `dark`. Il resto di Mood cambia, la landing no.
   Qui i gettoni si ridichiarano per il tema scuro e la pagina si adegua da sola, senza toccare una
   riga delle sue regole: sono gli stessi nomi che le regole già usano. Misurato dopo la cura: col
   tema chiaro il fondo della landing è `rgb(238,241,248)`, con lo scuro `rgb(12,16,34)`.
   Le due cose che restano scure in ENTRAMBI i temi sono per progetto, non per dimenticanza: la testata
   (`.hero`) e il riquadro della reputazione (`.rep-card`) sono navy con la fotografia sopra — sono la
   copertina della pagina, e la copertina non cambia col foglio. */
[data-theme="dark"]{
  --ink:#eef1ff;
  --ink-soft:#c9d1ec;
  --muted:#98a2c6;
  --page:#0c1022;
  --shell:#131834;
  --card:#1a2043;
  --card-soft:#202751;
  --border:#2c3462;
  --border-strong:#3b457c;
  --shadow-card:0 18px 44px rgba(0,0,0,.5);
  --shadow-rail:0 4px 10px rgba(0,0,0,.55);
  --frame-grad:radial-gradient(95% 62% at 50% 0%,#1b2246 0%,#131836 46%,#0b0f22 100%);
  --danger:#ff9b95;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* ---------- LE REGOLE DI QUESTA PAGINA NON ESCONO DA QUESTA PAGINA (03/10/2026) ----------
   Il titolare, guardando la landing con la barra di Mood in cima: «spacca la nav». E la causa era
   questa, non la barra: le quattro righe qui sotto (`body`, `img`, `a`, `p`) sono un inizio di foglio
   — nate quando questa pagina era da sola al mondo — e da quando la pagina carica anche `mood.css` e
   `mood-ui.css` arrivano DOPO quei fogli e quindi VINCONO su di loro. Per un selettore di elemento la
   classe batte l'elemento (`.mood-nav-btn` tiene il suo colore e la sua misura, e infatti quelli si
   salvano), ma tutto quello che nella barra è un elemento nudo — l'`img` del marchio, i collegamenti,
   l'eredità di `color` — prendeva le regole di una landing: l'inchiostro scuro della pagina dentro una
   barra navy.
   Adesso quelle regole hanno un perimetro: `.shell`, cioè la colonna della landing (la stessa che
   `index.php` apre con `<main class="shell">`). Dentro la colonna valgono come prima; fuori — la barra
   in cima, la barra in fondo del telefono, il pannello dell'utente, le tendine — valgono i fogli di
   Mood, interi. È la regola che seguono già i fogli delle altre pagine dell'app (`studio.css`,
   `articolo.css`…): un foglio di pagina non tocca `body`, `a` o `img` di tutti.
   `box-sizing` e `html` restano globali di proposito: li dichiara anche `mood.css` con lo stesso
   valore, quindi non spostano niente e servono se un giorno la pagina si riapre da sola. */
body{
  margin:0;
  background-color:var(--page);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.shell img{max-width: -webkit-fill-available;display:block;border-radius: 0;}
.shell a{text-decoration:none;color:inherit;}
.shell p{margin:0}

.shell :focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------- SHELL ---------- */
.shell{
  position:relative;
  width:100%;
  margin:0 auto;
  /* l'inchiostro e le misure del testo stanno QUI e non su `body` (vedi sopra): dentro la colonna
     sono quelli della landing, fuori sono quelli di Mood. */
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  background-color:var(--shell);
  padding-bottom:6px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:16px 20px 62px;
  color:#fff;
  background-image:
    radial-gradient(118% 76% at 82% 10%,rgba(60,124,255,.55) 0%,rgba(60,124,255,0) 62%),
    radial-gradient(90% 60% at 8% 96%,rgba(120,70,255,.35) 0%,rgba(120,70,255,0) 70%),
    linear-gradient(160deg,var(--navy-1) 0%,var(--navy-2) 46%,var(--navy-3) 100%);
}

/* fascio diagonale viola → ciano */
.hero-beam{
  position:absolute;
  left:-22%;top:46%;
  width:148%;height:2.5px;
  transform:rotate(-9deg);
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    #7a5cff 26%,
    #b39bff 44%,
    #4fd8ff 66%,
    rgba(79,216,255,0) 100%);
  box-shadow:0 0 22px 6px rgba(139,92,246,.7),0 0 60px 20px rgba(79,216,255,.25);
  pointer-events:none;
  z-index:0;
}

/* barra superiore */
.hero-bar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:12px;
  /* border-bottom:1px solid rgba(255,255,255,.13); */
}
.back{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  margin-left:-8px;
  border-radius:50%;
  color:#fff;
  transition:background-color .2s ease,transform .2s ease;
}
.back:hover{background-color:rgba(255,255,255,.12)}
.back:active{transform:scale(.94)}
.hero-bar-title{
  flex:1 1 auto;
  min-width:0;
  font-size:17.5px;
  font-weight:700;
  letter-spacing:-.015em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.badge-lsnn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:8px 13px;
  border-radius:999px;
  background-color: rgb(3 169 244 / 21%);
  box-shadow: 0 5px 50px rgba(5, 12, 45, .4);
}
.badge-lsnn img{
  display:block;
  width:auto;
  height:18px;
  border-radius: 0;
}

/* foto hero: angolo in alto a destra, esce dal bordo destro */
.hero-art{
  position:absolute;
  top: 60px;
  left: 0;
  width: -webkit-fill-available;
  height: 332px;
  aspect-ratio:.82;
  object-fit:cover;
  object-position:left center;
  z-index:1;
  pointer-events:none;
  border-radius:22px 0 0 0;
  box-shadow:0 26px 44px rgba(3,8,32,.55);
}

.hero-title{
  top: 14px;
  position:relative;
  z-index:2;
  margin:22px 0 0;
  font-size: 34px;
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.035em;
  text-shadow:0 3px 22px rgba(4,10,40,.5);
}
.hl-cyan{color:var(--cyan)}

.hero-copy{
  top: 42px;
  position:relative;
  z-index:2;
  margin-top:26px;
  max-width: 68%;
  font-weight: 600;
  font-size:14px;
  line-height:1.62;
  color:#dbe2f8;
  text-shadow: 0 1px 6px rgba(4, 10, 40, .95), 0 0 18px rgb(4 10 40);
}
.hl-gold{
  color:var(--gold);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.hl-gold:hover{color:#ffd069}

/* ---------- COME FUNZIONA ---------- */
.how{
  position:relative;
  z-index:4;
  margin-top:-34px;
  padding:0 14px;
}
.how-card{
  background-color:var(--card);
  border-radius:var(--r-card);
  padding:18px 16px 20px;
  box-shadow:var(--shadow-card);
}
.how-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.how-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  color:#fff;
  background-image:var(--grad-ico);
  box-shadow:0 8px 18px rgba(59,110,240,.35);
}
.how-head-text h2{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.2;
}
.how-head-text p{
  margin-top:1px;
  font-size:13px;
  color:var(--muted);
}

/* ---------- STEP ---------- */
.steps{
  display:flex;
  align-items:stretch;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
.step{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 11px 13px;
  background-color:var(--card-soft);
  border:1px solid var(--border);
  border-radius:var(--r-step);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.step:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 14px 26px rgba(76,60,200,.13);
}
/* LA RIGA DELLA SCHEDA (05/10/2026). Il titolare, incollando il markup: «non voglio monoliti soliti
   icona a sinistra e il testo a fianco come è stato detto ieri» — dove «ieri» è la segnalazione
   opposta: «poi hai il vizio di non mettere il testo affianco ... mette sempre icona sopra e testo
   sotto ... e questo è bruttissimo». Quindi i tre pezzi che dicono DI COSA si parla — il numero, il
   titolo e il disegno — stanno su una riga sola, e il disegno va in fondo alla riga come un fregio:
   ci pensa `.step h3` con `flex:1` (non serve spingere niente a mano). La spiegazione prende la
   larghezza intera sotto, dove una riga di testo si legge: accanto al disegno sarebbe una striscia
   di sessanta pixel, cioè il «monolito» da cui veniamo. */
.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.step-num{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  flex:0 0 auto;      /* un cerchio non si schiaccia: senza questa riga, quando la riga è stretta il
                         numero diventava un ovale — misurato 13×30 a 480px, 20×30 a 540 (05/10/2026) */
  border-radius:50%;
  color:#fff;
  font-size:14px;
  font-weight:800;
  background-image:var(--grad-ico);
  box-shadow:0 6px 14px rgba(59,110,240,.32);
}
.step-ico{
  width:23px;height:23px;
  flex:0 0 auto;
  color:var(--violet);
}
.step h3{
  margin:0;            /* lo stacco lo fa il `gap` di `.step-top`: era `3px 0 0` finché stava su una riga sua */
  flex:1 1 auto;       /* si prende la riga libera: è lui a spingere il disegno in fondo */
  min-width:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.012em;
  line-height:1.22;
}
.step p{
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}
/* chevron fra le card */
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:21px;right:-17px;
  width:12px;height:12px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4dfa' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* ---------- REPUTAZIONE ---------- */
.reputation{padding:16px 14px 0;margin-top: 1rem;margin-bottom: 1rem;}
.rep-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:20px;
  padding:46px 20px 42px;
  text-align:center;
  background-image:linear-gradient(120deg,#0d1a4a 0%,#16307f 48%,#2b1f68 100%);
  box-shadow:0 18px 40px rgba(14,22,66,.24);
}
.rep-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image: radial-gradient(82% 76% at 52% 88%,rgba(6,12,42,.88) 0%,rgba(6,12,42,.56) 62%,rgba(6,12,42,.3) 100%),
    linear-gradient(180deg,rgba(6,12,42,.55) 0%,rgba(6,12,42,.18) 46%,rgba(6,12,42,.5) 100%),
    linear-gradient(0deg,rgba(6,12,42,.55) 0%,rgba(6,12,42,0) 45%);
  pointer-events:none;
}
/* foto di sfondo del banner: riempie tutta la card */
.rep-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height: initial;
  object-fit: contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
}
.rep-content{position:relative;z-index:2;display: flex;flex-direction: column;align-items: center;}
.rep-title{
  margin:0 0 12px;
  font-size:24px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.028em;
  color:#fff;
  text-shadow:0 2px 18px rgba(3,8,30,.8);
}
.rep-title-gold{color:var(--gold)}
.rep-copy{
  max-width: 450px;
  margin:0 auto;
  font-size: 15.5px;
  line-height:1.62;
  color:#d6def6;
  text-shadow:0 1px 12px rgba(3,8,30,.8);
}

/* ---------- SETTORI ---------- */
.sectors{padding:14px 14px 0}
.set-card{
  background-color:var(--card);
  border-radius:var(--r-card);
  padding:18px 0 18px;
  box-shadow:var(--shadow-card);
}
.set-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0 16px;
}
.set-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  color:#fff;
  background-image:var(--grad-ico);
  box-shadow:0 8px 18px rgba(59,110,240,.32);
}
.set-head-text{flex:1 1 auto;min-width:0}
.set-head-text h2{
  margin:0;
  font-size:16.5px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.022em;
}
.set-head-text p{
  margin-top:3px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.link-arrow{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding-top:5px;
  font-size:13px;
  font-weight:700;
  color:var(--violet);
  white-space:nowrap;
}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* rail orizzontale */
.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:8px;
  margin:16px 0 0;
  padding: 7px 16px 4px;
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-scrollable{
  grid-auto-columns:minmax(56px,1fr);
  padding-bottom:6px;
}
.rail li{min-width:0}
.rail li:nth-child(odd), .rail li:nth-child(even){
  background:transparent;
}

.sector{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  scroll-snap-align:start;
}
.sector img{
  width:100%;
  height:auto;
  aspect-ratio: 1/1;
  object-fit:cover;
  border-radius:var(--r-thumb);
  box-shadow:var(--shadow-rail);
  transition:transform .25s ease,box-shadow .25s ease;
}
.sector:hover img{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 20px rgba(18,28,70,.2);
}
.sector span{
  font-size:clamp(9px,2.35vw,11px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink-soft);
  text-align:center;
}

/* ---------- CTA ---------- */
.cta{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 14px 24px;
  padding:17px 18px;
  border-radius:999px;
  color: #fff !important;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.012em;
  background-image:var(--grad-cta);
  box-shadow:0 14px 30px rgba(63,109,240,.42);
  transition:transform .22s ease,box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(63,109,240,.5)}
.cta:active{transform:translateY(0) scale(.985)}
.cta-ico,.cta-chev{flex:0 0 auto}
.cta-ico{width:22px;height:22px}
.cta-chev{width:19px;height:19px;opacity:.95}
.cta>span:not(.cta-shine){flex:1 1 auto;text-align:center}
.cta-shine{
  position:absolute;
  top:0;left:-60%;
  width:45%;height:100%;
  background-image:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
  transform:skewX(-18deg);
  pointer-events:none;
  animation:ctaShine 4.6s ease-in-out infinite;
}
@keyframes ctaShine{
  0%,62%{left:-60%}
  86%,100%{left:130%}
}
.cta-ripple{
  position:absolute;
  border-radius:50%;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 72%);
  transform:scale(0);
  opacity:.9;
  pointer-events:none;
  animation:ctaRipple .62s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ctaRipple{
  to{transform:scale(1);opacity:0}
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal-on .reveal{
  opacity:0;
  transform:translateY(20px);
}
.reveal-on .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .62s ease,transform .62s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
@media (max-width: 539.98px){

  .hero{padding-bottom:96px}

  /* LA FRASE LUNGA DEI PROFESSIONISTI (06/10/2026). La voce dei settori diceva «Chiedi info» (10
     caratteri) e adesso dice «Sei un professionista? Chiedi info» (34): nella riga del titolo — icona,
     testo e collegamento — a queste larghezze il titolo si stringe e va a capo due volte. Sotto i 540px
     il collegamento prende la sua riga, come già fa sotto i 480: il titolo resta su due righe piene e la
     frase si legge tutta, senza schiacciare niente. */
  .set-head{flex-wrap:wrap}
  .link-arrow{flex:0 0 100%;padding-top:8px}
}

@media (max-width: 479.98px){
  .how{
    margin-bottom: 1rem;
  }
  .reputation{
    margin-bottom: 1rem;
  }
  .hero-title{
    font-size: 26px;
    font-weight: 600;
  }
  .hero-art{
    height: 280px;
    left: -44px;
    max-width: -webkit-fill-available;
    min-width: 400px;
  }
  .hero-copy{
    font-size: 12px;
    width: -webkit-fill-available;
    max-width: -webkit-fill-available;
    top: 37px;
  }
  .rail{
    display: flex;
    gap: 9px 30px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rail .sector{
    width: 50px;
  }
  .set-head{flex-wrap:wrap}
  .link-arrow{flex:0 0 100%;padding-left:0;padding-top:8px}
  .rep-bg {
      object-fit: cover;
      height: 100%;
  }  
}

/* SOTTO I 540px LE TRE SCHEDE TORNANO UNA SOTTO L'ALTRA (05/10/2026). Era il taglio dei telefoni
   (479,98px) e sale a 539,98: qui il difetto si misura, non si guarda. A 500px di finestra la scheda è
   132px, e dentro — numero, due stacchi, titolo, disegno — al titolo restano 42px mentre la sua parola
   più lunga («Racconta», 14px) ne chiede 64: sbordava sopra il disegno di 20px, e il cerchio del numero
   si schiacciava in un ovale (misurato: 19×30). In colonna la scheda è larga 440px e la riga ci sta
   come sul telefono. */
@media (max-width: 539.98px){
  .steps{flex-direction:column;gap: 30px;}
  .step:not(:last-child)::after{
    top:auto;
    bottom: -21px;
    left:50%;
    right:auto;
    transform:translateX(-50%) rotate(90deg);
  }
}

/* E FRA 540 E 699px LA COLONNA È STRETTA (179px in giù, fino a 139): qui l'ornamento si fa piccolo per
   primo, invece di schiacciare il titolo. Misurato a 540px prima della cura: al titolo restavano 43px
   contro i 64 che chiede «Racconta» (sbordava sopra il disegno) e il numero era un ovale 20×30.
   Numero 22, disegno 18, stacco 6, titolo 12,5px: al titolo restano 61px, che è più dei 57 che chiede
   la sua parola più lunga. Sopra i 700px — dove la colonna si allarga a 192px — torna tutto grande.
   La freccia fra le schede sale di 2px perché la riga, col numero più piccolo, è più bassa. */
@media (min-width:540px) and (max-width:699.98px){
  .step-top{gap:6px}
  .step-num{width:22px;height:22px;font-size:12px}
  .step-ico{width:18px;height:18px}
  .step h3{font-size:12.5px}
  .step:not(:last-child)::after{top:19px}
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 540px){

  .hero{padding-left:24px;padding-right:24px;min-height:362px;}
  .how,.reputation,.sectors{padding-left:18px;padding-right:18px;}
  .cta{margin-left:18px;margin-right:18px}
  .set-card{padding-top:20px;padding-bottom:20px}
}

@media (min-width:540px){

  body{
    padding:0 0 28px;
    background-image:var(--frame-grad);
    background-attachment:fixed;
  }
  .shell{
    margin-top:28px;
    border-radius:32px;
    overflow:hidden;
    box-shadow:0 34px 90px rgba(16,24,64,.22);
    padding-bottom:8px;
  }

  .hero-art{top: 64px;left: 0;width: 100%;height: 299px;}
  .steps{gap:28px}
  .step:not(:last-child)::after{right:-20px}
  .step{padding:14px 13px 15px}
}

@media (min-width:700px){
  .hero-art{top: 64px;left: 0;width: 100%;height: 343px;object-fit: contain;}
  .shell{max-width: 800px;}
  .hero{padding-top:20px;padding-bottom:72px;min-height: 407px;}
  .hero-title{font-size: 38px;top: 24px;}
  .hero-copy{font-size:15.5px;top: 60px;max-width: 57%;}
  .how{margin-top:-40px}
  .rep-title{font-size:26px}
  .rail{gap: 13px;}
}
@media (min-width:1200px){
  .hero-title{font-size: 41px;top: 24px;}

  .hero {
      padding-top: 20px;
      padding-bottom: 72px;
      min-height: 504px;
  }  
  .hero-copy {
      font-size: 18.5px;
      top: 85px;
      max-width: 51%;
  }  
    .hero-title {
      font-size: 48px;
      top: 60px;
  }
  .shell{max-width: 1024px;}
  .hero-art{top: 66px;left: 0px;width: -webkit-fill-available;height: 440px;}
}
/* ---------- MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal-on .reveal{opacity:1;transform:none}
  .cta-shine{display:none}
}
@media print{
  body{background:#fff;padding:0}
  .hero-art,.rep-bg,.hero-beam,.cta-shine{display:none}
  .cta{box-shadow:none}
}

body{
  background: var(--page);
}
.shell a{
  color: inherit;
}

.chiedi{padding:16px 14px 0;margin-top: 1rem;margin-bottom: 1rem;}
.chiedi-card{
  background-color:var(--card);
  border-radius:var(--r-card);
  padding:18px 16px 20px;
  box-shadow: 0 0 1px 5px rgb(58 135 241);
}
.chiedi-form{display:flex;flex-direction:column;gap:14px}
.chiedi-due{display:grid;grid-template-columns:1fr;gap:14px}
.chiedi-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.chiedi-campo > span{font-size:12.5px;font-weight:700;letter-spacing:.005em;color:var(--ink-soft)}
.chiedi-campo input,
.chiedi-campo select,
.chiedi-campo textarea{
  width:100%;
  min-width:0;
  padding:12px 13px;
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  color:var(--ink);
  background-color:var(--card-soft);
  border:1px solid var(--border);
  border-radius:12px;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.chiedi-campo > textarea{resize:vertical;min-height:96px}
.chiedi-campo input::placeholder,.chiedi-campo textarea::placeholder{color:var(--muted);opacity:.8}
.chiedi-campo input:focus,.chiedi-campo select:focus,.chiedi-campo textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(63,109,240,.18);
}
.chiedi-piega{
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background-color:var(--card-soft);
}
.chiedi-piega summary{
  padding:11px 1px;
  font-size:13px;
  font-weight:700;
  color:var(--violet);
  cursor:pointer;
}
.chiedi-piega__corpo{display:flex;flex-direction:column;gap:14px;padding:2px 0 14px}
/* i campi dentro il riquadro ripiegato prendono il bianco della card: il fondo del riquadro è già quello
   dei campi, e senza questa riga si vedrebbe solo il bordo (un campo disegnato a metà). */
.chiedi-piega__corpo .chiedi-campo input,
.chiedi-piega__corpo .chiedi-campo select,
.chiedi-piega__corpo .chiedi-campo textarea{background-color:var(--card)}
.chiedi-consenso{display:flex;align-items:flex-start;gap:10px;padding-left: 20px;}
.chiedi-consenso input{flex:0 0 auto;width:19px;height:19px;margin:2px 0 0;accent-color:var(--blue)}
.chiedi-consenso span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.chiedi-consenso a{color:var(--violet);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.chiedi-azioni{display:flex;flex-direction:column;gap:9px}
.chiedi-invia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:15px 18px;
  font-family:var(--font);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.012em;
  color:#fff;
  background-image:var(--grad-cta);
  border:0;
  border-radius:999px;
  box-shadow:0 12px 26px rgba(63,109,240,.36);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s ease,box-shadow .22s ease,opacity .2s ease;
}
.chiedi-invia svg{width:20px;height:20px;flex:0 0 auto}
.chiedi-invia:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(63,109,240,.46)}
.chiedi-invia:active{transform:translateY(0) scale(.985)}
.chiedi-invia[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:0 8px 18px rgba(63,109,240,.28)}
.chiedi-nota{font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.chiedi-nota b{color:var(--ink-soft)}
.chiedi-errore{
  padding:11px 13px;
  border:1px solid rgba(200,56,44,.32);
  border-left:3px solid var(--danger);
  border-radius:12px;
  background-color:rgba(200,56,44,.07);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  color:var(--danger);
}
.chiedi-fatto{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:15px;
  border:1px solid var(--border);
  border-left:3px solid #1f9d55;
  border-radius:16px;
  background-color:var(--card-soft);
}
.chiedi-fatto h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.022em}
.chiedi-fatto p{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.chiedi-fatto b{color:var(--ink)}
.chiedi-fatto--info{border-left-color:var(--blue)}
.chiedi-fatto__piede{font-size:12px;color:var(--muted)}
.chiedi-form[hidden],.chiedi-fatto[hidden]{display:none}
@media (min-width:540px){
  .chiedi{padding-left:18px;padding-right:18px;margin: 7px;}
  .chiedi-card{padding:20px 20px 22px}
  .chiedi-due{grid-template-columns:1fr 1fr}
}