/* ==========================================================================
   LEGAL RISE - versione chiara
   Logo: file originale del cliente (1563px, da Linktree). Sul chiaro il
   lettering salmone da solo non regge, quindi il marchio compare nella sua
   targa navy, cioe come lo usano loro.
   Colori campionati da quel file: navy #344474, salmone #DD968B.
   L'azzurro #9BC4E2 e il colore con cui evidenziano una riga su due nei
   titoli dei post. Su fondo chiaro non regge come testo, quindi fa lo stesso
   mestiere da evidenziatore: fondo azzurro, testo navy sopra.
   Ruoli fissi: navy = testo e superfici forti, salmone = azioni, azzurro =
   evidenziazione nei titoli. Nessuno dei tre sconfina.
   Forme: elementi interattivi = pill, superfici = 14px.
   ========================================================================== */
:root{
  color-scheme: light;
  --paper:#F1F3F9;
  --surface:#FBFCFE;
  --surface-2:#E7EAF4;
  --ink:#232E56;
  --ink-2:#5A6690;
  --navy:#344474;
  --salmon:#DD968B;
  --salmon-hi:#E8A79F;
  --azure:#9BC4E2;
  --danger:#B3453A;
  /* dal design system del brand: pesca, blu periwinkle, sky. Prima
     comparivano solo nei materiali interni, mai sul sito. Ruolo fisso:
     accendono i "glow" di sfondo (vedi piu' sotto) e qualche accento
     puntuale, mai il testo corrente ne' altre superfici. */
  --peach:#E7ACA4;
  --peach-deep:#D0857A;
  --peri:#5E81BF;
  --sky:#EBF4FE;
  --line:rgba(52,68,116,.17);
  --line-soft:rgba(52,68,116,.10);
  --r-surface:14px;
  --r-pill:999px;
  --shell:1240px;
  --sans:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Fraunces","Bodoni 72",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* "clip" invece di "hidden": nasconde l'eccedenza orizzontale senza
     rendere il body un contenitore di scorrimento. Con "hidden" il salto
     alle ancore (#form, #lex-talk...) si perdeva e la pagina restava in cima.
     La prima riga resta come ripiego per i browser che non conoscono "clip". */
  overflow-x:hidden;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{
  margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:"SOFT" 100,"WONK" 1;
  letter-spacing:-.015em;line-height:1.08;color:var(--ink);
}
::selection{background:var(--azure);color:var(--ink)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:24px}
.section{padding-block:clamp(64px,8vw,112px)}
h2.h-sec{font-size:clamp(2rem,3.9vw,3.3rem)}
.lead{max-width:56ch;color:var(--ink-2);font-size:1.0625rem;margin-top:20px}

/* l'evidenziatore: la riga sottolineata in azzurro delle loro card */
.hl{
  display:block;width:fit-content;
  background:var(--azure);color:var(--ink);
  padding:.02em .2em .12em;border-radius:8px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* tag: gli stessi pill che mettono sulle card */
.tag{
  display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 12px;background:transparent;
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
}

/* bottoni */
.btn{
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  font-family:var(--sans);font-size:.95rem;font-weight:500;
  padding:13px 24px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.btn i{font-size:1.05em;transition:transform .3s var(--ease)}
/* il primario e la coppia del logo: targa navy, lettering salmone */
.btn-primary{background:var(--ink);color:var(--salmon-hi)}
.btn-primary:hover{background:var(--navy)}
.btn-primary:hover i{transform:translateX(3px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--navy);background:rgba(52,68,116,.07)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:10px 19px;font-size:.875rem}
.tlink{display:inline-flex;align-items:center;gap:.45em;font-size:.9rem;font-weight:500;color:var(--navy)}
.tlink i{transition:transform .3s var(--ease)}
.tlink:hover{color:var(--ink)}
.tlink:hover i{transform:translate(2px,-2px)}

/* nav */
.nav{
  position:sticky;top:0;z-index:40;height:78px;display:flex;align-items:center;
  background:rgba(241,243,249,.82);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line-soft);
}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--paper);backdrop-filter:none}}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:50px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.9rem;color:var(--ink-2)}
.nav-links a{position:relative;transition:color .2s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--r-pill);width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;font-size:1.15rem}

/* "glow": macchie di colore sfocate e animate, tecnica gia' presente
   nei materiali di brand (dove accendono le slide interne), qui mai
   portata sul sito. Pesca e peri restano confinati a questo ruolo:
   danno vita a sfondi altrimenti piatti, senza mai diventare colore
   di testo o di superficie. Sempre dietro al contenuto (z-index:0) e
   mai sopra: chi legge non deve notarle, deve solo sentirle. */
.glow-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(70px)}
.glow-a{background:var(--peach);width:38vw;height:38vw;max-width:460px;max-height:460px;top:-14%;right:-8%;opacity:.3;animation:glow-deriva-a 24s ease-in-out infinite}
.glow-b{background:var(--peri);width:30vw;height:30vw;max-width:380px;max-height:380px;bottom:-16%;left:-6%;opacity:.2;animation:glow-deriva-b 28s ease-in-out infinite}
.glow-c{background:var(--azure);width:24vw;height:24vw;max-width:300px;max-height:300px;top:22%;left:40%;opacity:.15;animation:glow-deriva-a 32s ease-in-out infinite reverse}
@keyframes glow-deriva-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,6%) scale(1.1)}}
@keyframes glow-deriva-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-5%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
@media (max-width:720px){
  /* da telefono i cerchi sono molto piu' piccoli (38vw di 390px fa 148px)
     ma la sfocatura restava quella pensata per i 460px del desktop: un
     rapporto sfocatura/dimensione cosi' alto manda in crisi il render
     del blur su schermi piccoli, al punto da "cancellare" anche il
     testo sopra invece di restare un alone leggero dietro. Sfocatura
     piu' bassa qui, proporzionata alla dimensione reale del cerchio. */
  .glow{filter:blur(32px)}
}

/* la stessa grana del brand: da' consistenza quasi cartacea alle
   superfici scure, coerente con un sito che parla di documenti e
   materia legale. Bassissima opacita': si sente, non si vede. */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* hero: tipografia con un accenno di colore di sfondo, nessuna foto */
.hero{position:relative;overflow:hidden;padding-top:clamp(64px,9vw,124px);padding-bottom:clamp(56px,8vw,104px);text-align:center}
.hero>.shell{position:relative;z-index:1}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.95rem)}
.hero h1 .ln{display:block}
.hero h1 .hl{margin-inline:auto}
.hero .lead{margin:26px auto 0;max-width:52ch;font-size:1.125rem}
.actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* format come catalogo di servizi */
.svc{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.svc-card{
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:16px;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.svc-card:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 18px 40px rgba(35,46,86,.09)}
.svc-tags{display:flex;gap:8px;flex-wrap:wrap}
.svc-card h3{font-size:clamp(1.6rem,2.3vw,2.1rem)}
.svc-card>p{font-size:.95rem;color:var(--ink-2);max-width:44ch}
.spec{margin:2px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;border-top:1px solid var(--line-soft);padding-top:18px}
.spec dt{font-size:.72rem;color:var(--ink-2);margin-bottom:3px}
.spec dd{margin:0;font-size:.9rem;color:var(--ink)}
.spec-list{grid-template-columns:1fr;gap:0}
.spec-list dt{font-size:.72rem;color:var(--ink-2);margin-bottom:12px}
.spec-list dd{margin:0 0 9px;padding-left:20px;position:relative;font-size:.92rem;color:var(--ink)}
.spec-list dd:last-child{margin-bottom:0}
.spec-list dd::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--salmon)}
.svc-card .tlink{margin-top:auto;padding-top:6px;align-self:flex-start}

/* "E molto altro": l'unica proposta non ancora definita. Sfondo scuro per
   distinguerla dalle tre che descrivono servizi gia' strutturati. */
.svc-dark{background:var(--ink);border-color:var(--ink)}
.svc-dark h3{color:var(--paper)}
.svc-dark>p{color:#C6CCE4}
.svc-dark .tag{border-color:rgba(198,204,228,.34);color:#C6CCE4}
.svc-dark .spec{border-top-color:rgba(198,204,228,.22)}
.svc-dark .spec dt,.svc-dark .spec-list dt{color:#8F9AC0}
.svc-dark .spec dd,.svc-dark .spec-list dd{color:#C6CCE4}
.svc-dark .spec-list dd::before{background:var(--salmon-hi)}
.svc-dark .tlink{color:var(--salmon-hi)}
.svc-dark .tlink:hover{color:var(--paper)}
.svc-dark:hover{border-color:var(--salmon);box-shadow:0 18px 40px rgba(35,46,86,.22)}
.svc-note{
  margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  border-top:1px solid var(--line-soft);padding-top:24px;
}
.svc-note p{font-size:.95rem;color:var(--ink-2);max-width:54ch}

/* fascia dati */
.band{background:var(--ink);color:#C6CCE4}
.band .shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-block:32px}
.stats{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.stat b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:2.1rem;font-weight:800;line-height:1;color:var(--salmon)}
.stat span{display:block;margin-top:8px;font-size:.82rem;color:#C6CCE4}
.band-note{font-size:.875rem;color:#C6CCE4;max-width:36ch}
.band-note b{color:var(--salmon-hi);font-weight:500}

/* feed */
.filters{margin-top:32px;display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 17px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;
  color:var(--ink-2);cursor:pointer;transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--navy);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--salmon-hi)}
.grid-posts{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{
  position:relative;border-radius:var(--r-surface);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;border:1px solid var(--line);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.post:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 20px 44px rgba(35,46,86,.12)}
.post-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .post-img img{transform:scale(1.035)}
.post-open{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(35,46,86,.66);transition:opacity .3s var(--ease);
}
.post:hover .post-open,.post:focus-within .post-open{opacity:1}
.post-open span{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;font-weight:500;color:var(--paper);border:1px solid rgba(241,243,249,.6);border-radius:var(--r-pill);padding:10px 18px}
.post-meta{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--ink-2)}
.post-meta b{color:var(--ink);font-weight:500}
.post-meta i{color:var(--navy);transition:transform .3s var(--ease)}
.post:hover .post-meta i{transform:translate(2px,-2px)}
.post a::after{content:"";position:absolute;inset:0}
.empty{display:none;margin-top:22px;border:1px dashed var(--line);border-radius:var(--r-surface);padding:44px 26px;text-align:center;color:var(--ink-2);font-size:.95rem}
.empty.on{display:block}
.feed-foot{margin-top:30px;display:flex;justify-content:center}

/* fascia con lo stesso tono chiaro del manifesto, per spezzare pagine
   lunghe dove piu' sezioni di fila userebbero altrimenti tutte lo
   stesso sfondo: senza, una accanto all'altra sembrano la stessa cosa
   scritta due volte, anche se il contenuto e' diverso */
.section-tint{border-block:1px solid var(--line-soft);background:var(--surface-2)}

/* manifesto */
.manifesto{border-block:1px solid var(--line-soft);background:var(--surface-2)}
.manifesto .shell{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.manifesto .badge{width:clamp(140px,15vw,196px);height:auto;border-radius:50%}
.manifesto blockquote{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.015em;max-width:18ch;color:var(--ink)}
.manifesto .body{margin-top:24px;max-width:58ch;color:var(--ink-2);font-size:1.0625rem}

/* newsletter */
.signup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.signup h2{max-width:15ch}
form{display:flex;flex-direction:column;gap:8px;max-width:450px}
label{font-size:.85rem;font-weight:500;color:var(--ink)}
.field{display:flex;gap:10px;flex-wrap:wrap}
input[type=email]{
  flex:1;min-width:220px;background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:14px 20px;border-radius:var(--r-pill);font-family:var(--sans);font-size:.95rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
input[type=email]::placeholder{color:var(--ink-2)}
input[type=email]:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(155,196,226,.5)}
input[type=email][aria-invalid=true]{border-color:var(--danger)}
.help{font-size:.8rem;color:var(--ink-2)}
.err{font-size:.82rem;color:var(--danger);min-height:1.2em}
.ok{display:none;align-items:center;gap:.5em;font-size:.92rem;color:var(--navy);font-weight:500}
form.done .field,form.done .help,form.done .err{display:none}
form.done .ok{display:flex}

/* footer */
footer{padding-block:60px 34px;background:var(--ink);color:#C6CCE4}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.f-grid h4{margin:0 0 14px;font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#8F9AC0}
.f-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.9rem;color:#C6CCE4}
.f-grid ul a:hover{color:var(--salmon)}
.f-about img{height:64px;width:auto}
.f-about p{margin-top:16px;font-size:.9rem;color:#C6CCE4;max-width:32ch}
.socials{margin-top:20px;display:flex;gap:10px}
.socials a{width:40px;height:40px;border:1px solid rgba(198,204,228,.28);border-radius:var(--r-pill);display:grid;place-items:center;font-size:1.05rem;color:#C6CCE4;transition:all .25s var(--ease)}
.socials a:hover{border-color:var(--salmon);color:var(--salmon)}
.f-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(198,204,228,.2);display:flex;justify-content:space-between;align-items:flex-start;gap:12px 32px;flex-wrap:wrap;font-size:.8rem;line-height:1.7;color:#8F9AC0}
.f-bottom strong{color:#C6CCE4;font-weight:500}
.f-bottom p:last-child{white-space:nowrap}
.f-bottom p:first-child{max-width:72ch}

/* icone: SVG incorporati, ereditano colore e corpo del testo come faceva
   il font Phosphor che sostituiscono */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.135em;fill:currentColor;flex:none}

/* motion: rivelazione allo scroll, scandisce la lettura sezione per sezione */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* responsive */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .nav.open{height:auto;padding-block:14px}
  .nav.open .shell{flex-wrap:wrap}
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;padding:20px 0 8px;order:3}
  /* il bottone "Entra nella community" resta fuori dal menu a tendina:
     è un'azione, non una voce di navigazione */
  .grid-posts{grid-template-columns:1fr 1fr}
  .manifesto .shell{grid-template-columns:1fr;justify-items:start}
  .signup{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .svc{grid-template-columns:1fr}

  .grid-posts{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74vw;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;
  }
  .post{scroll-snap-align:start}
  .band .shell{flex-direction:column;align-items:flex-start}

  /* numeri: griglia 2x2 regolare. Prima erano a flusso libero e si dimensionavano
     sul contenuto, cosi' "600+" restava solo su una riga e "10+" su un'altra */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
  .stat b{font-size:1.75rem}

  /* footer: marchio a tutta larghezza, gruppi di link affiancati su due colonne.
     Prima erano quattro blocchi impilati, quasi 1000px di altezza */
  footer{padding-block:44px 28px}
  .f-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .f-about{grid-column:1/-1}
  .f-about img{height:46px}
  .f-about p{margin-top:12px}
  .socials{margin-top:16px}
  .socials a{width:36px;height:36px}
  .f-grid h4{margin-bottom:10px}
  .f-grid ul{gap:9px}
  /* l'ultimo gruppo ("LegalRise") restava solo sulla seconda riga con meta'
     spazio vuoto: lo allargo e gli metto i link su due colonne */
  .f-grid > div:last-child{grid-column:1/-1}
  .f-grid > div:last-child ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
  .f-bottom{margin-top:26px;padding-top:18px}
  /* privacy e cookie sono gia' nella colonna qui sopra: in fondo sarebbero un doppione */
  .f-bottom p:last-child{display:none}
  .nav .brand img{height:42px}
}

/* ==========================================================================
   Sito multipagina: index.html, studenti.html, aziende.html.
   Fogli condivisi in assets/css e assets/js.
   ========================================================================== */
/* le ancore non finiscono sotto la barra fissa */
[id]{scroll-margin-top:104px}
/* voce di menu della pagina corrente */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* hero delle pagine interne: allineato a sinistra, per distinguerlo da quello
   centrato della home */
.hero-l{text-align:left;padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(44px,6vw,72px)}
.hero-l h1{font-size:clamp(2.1rem,4.2vw,3.6rem);max-width:19ch}
.hero-long h1{font-size:clamp(1.85rem,3.3vw,2.85rem);max-width:34ch}
.hero-l h1 .hl{margin-inline:0}
.hero-l h1 .ln{display:block}
.hero-l .lead{margin-left:0;margin-right:0;max-width:54ch}
.hero-l .actions{justify-content:flex-start}

/* cosa trovi: righe con filetto in cima, niente riquadri */
.pts{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px) clamp(32px,5vw,64px)}
.pt{border-top:1px solid var(--line);padding-top:20px}
.pt h3{font-size:1.22rem;margin-bottom:8px}
.pt p{font-size:.93rem;color:var(--ink-2);max-width:42ch}

/* l'icona come piccolo badge colorato sopra al titolo, non piu' in
   linea col testo: prima, ereditando il colore del testo, spariva; e
   un titolo lungo andava a capo sotto l'icona invece di restare
   allineato con gli altri titoli della griglia. I colori girano sui
   toni del brand invece di restare tutti uguali. */
.pt-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:14px;
  background:var(--surface-2);color:var(--navy);
}
.pt-icon .ico{width:20px;height:20px}
.pt:nth-child(4n+2) .pt-icon{background:#F5E1DC;color:var(--peach-deep)}
.pt:nth-child(4n+3) .pt-icon{background:#E3E9F6;color:var(--peri)}
.pt:nth-child(4n) .pt-icon{background:#F8E5E1;color:var(--salmon)}

/* etichetta introduttiva in maiuscolo, sul modello delle sezioni di
   datapizza.tech/it/tech-recruiting */
.eyebrow{margin:0 0 14px;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* "fase per fase": timeline verticale con cerchi numerati collegati da
   una linea (aziende.html). Sfondo scuro come .close e .band usano gia'
   altrove sul sito; l'oro del riferimento diventa il salmone del brand. */
.phases-section{position:relative;overflow:hidden;background:var(--ink);color:#C6CCE4}
.phases-section>.shell{position:relative;z-index:1}
.phases-section .eyebrow{color:#8F9AC0}
.phases-section .lead{color:#C6CCE4}
.phases-section h2{color:var(--paper)}
.phases-section .hl{background:var(--salmon);color:var(--ink)}
.phases-section .tag{border-color:rgba(198,204,228,.32);color:#C6CCE4}

.phases{margin-top:44px}
.phase{position:relative;padding-left:76px;padding-bottom:32px}
.phase:last-child{padding-bottom:0}
.phase::before{
  content:"";position:absolute;left:25px;top:52px;bottom:-32px;width:2px;
  background:rgba(198,204,228,.22);
}
.phase:last-child::before{display:none}
.phase-num{
  position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);border:2px solid var(--salmon);
  color:var(--salmon-hi);font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;
  font-weight:800;font-size:1.25rem;z-index:1;
}
.phase-card{
  border:1px solid rgba(198,204,228,.22);border-radius:var(--r-surface);
  background:rgba(241,243,249,.04);padding:clamp(20px,2.4vw,28px);
}
.phase-card h3{color:var(--paper);font-size:1.4rem;margin-bottom:10px}
.phase-card>p{font-size:.95rem;color:#C6CCE4;max-width:60ch}
.phase-list{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.phase-list li{position:relative;padding-left:20px;font-size:.92rem;color:#C6CCE4}
.phase-list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--salmon)}

/* hover sui passi della timeline: la card si solleva appena e il cerchio
   numerato si accende, per far sentire ogni fase come uno step attivo
   senza staccare troppo dal resto (nessun movimento sugli altri step) */
.phase-card{transition:transform .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.phase-num{transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.phase:hover .phase-card{transform:translateY(-4px);border-color:rgba(233,122,106,.5);background-color:rgba(241,243,249,.07)}
.phase:hover .phase-num{transform:scale(1.08);background-color:var(--salmon);color:var(--ink)}

/* motion della timeline: ogni fase e' un .rise a se' (non piu' un unico
   blocco), cosi' appaiono una alla volta mentre si scorre, come le card
   del track record. Il cerchio "scatta" e la linea si allunga verso la
   fase successiva subito dopo, per accentuare la sensazione di percorso. */
.js .phase-num{opacity:0;transform:scale(.6);transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s}
.js .phase.in .phase-num{opacity:1;transform:none}
.js .phase::before{transform-origin:top;transform:scaleY(0);transition:transform .8s var(--ease) .35s}
.js .phase.in::before{transform:scaleY(1)}
.phases .phase:nth-child(2){transition-delay:.08s}
.phases .phase:nth-child(3){transition-delay:.16s}
.phases .phase:nth-child(4){transition-delay:.24s}
.phases .phase:nth-child(5){transition-delay:.32s}

/* stessa cascata per qualunque griglia di card/box che rivela i suoi
   elementi uno alla volta (.pts, .doors, .cases): senza, gli elementi
   affiancati nella stessa riga entrano nello schermo insieme e appaiono
   tutti in un colpo solo, invece che a scaletta */
.pts .pt:nth-child(2),.doors .door:nth-child(2),.cases .case:nth-child(2){transition-delay:.08s}
.pts .pt:nth-child(3),.cases .case:nth-child(3){transition-delay:.16s}
.pts .pt:nth-child(4),.cases .case:nth-child(4){transition-delay:.24s}
.pts .pt:nth-child(5),.cases .case:nth-child(5){transition-delay:.32s}
.pts .pt:nth-child(6){transition-delay:.4s}

@media (max-width:720px){
  .phase{padding-left:60px}
  .phase-num{width:42px;height:42px;font-size:1.05rem}
  .phase::before{left:20px}
}

/* variante di .pts per un processo in passi numerati ("Come lavoriamo insieme").
   5 colonne fisse: con l'auto-fit il quinto passo, non trovando piu'
   posto in riga, andava a capo da solo lasciando vuoto il resto della
   riga sotto */
.steps{grid-template-columns:repeat(5,1fr)}
.step-num{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:1.5rem;line-height:1;color:var(--salmon);margin-bottom:10px}

/* loghi dei partner: fascia sobria subito sotto i numeri, come le griglie
   di loghi cliente che si vedono su siti B2B (es. datapizza.tech) */
.partners{padding-block:clamp(36px,5vw,54px);border-bottom:1px solid var(--line-soft)}
.partners-label{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
/* striscia che scorre da sola: .partners-row taglia i bordi e sfuma
   l'inizio/fine con una maschera, .partners-track e' il doppio elenco
   di loghi che trasla del 50% all'infinito. Duplicando la lista invece
   di usarne una sola, quando il primo set esce da sinistra il secondo
   e' gia' al suo posto: il loop non si vede mai "ripartire". */
.partners-row{
  margin-top:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 60px,#000 calc(100% - 60px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 60px,#000 calc(100% - 60px),transparent);
}
.partners-track{
  display:flex;align-items:center;flex:none;width:max-content;
  gap:clamp(28px,5vw,56px);animation:partners-scorri 32s linear infinite;
}
.partners-set{display:flex;align-items:center;gap:clamp(28px,5vw,56px);flex:none}
.partners-row img{height:32px;width:auto;max-width:150px;object-fit:contain;opacity:.75;transition:opacity .25s var(--ease);flex:none}
.partners-row img:hover{opacity:1}
@keyframes partners-scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* con le animazioni ridotte il doppio elenco (serve solo al loop)
     resterebbe fermo e visibile due volte: si nasconde la copia */
  .partners-track{animation:none;width:auto;flex-wrap:wrap}
  .partners-track .partners-set:last-child{display:none}
}

/* track record */
.cases{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.case{
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);
  padding:clamp(20px,2.2vw,26px);display:grid;grid-template-columns:clamp(112px,12vw,152px) minmax(0,1fr);
  gap:clamp(18px,2vw,26px);align-items:start;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* il fotogramma della campagna: sono verticali come i reel, quindi resta verticale */
.case-media{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;background:var(--surface-2)}
.case-media a{display:block;height:100%}
.case-media .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(35,46,86,.55);transition:opacity .3s var(--ease)}
.case-media a:hover .play,.case-media a:focus-visible .play{opacity:1}
.case-media .play span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:1.1rem;color:var(--paper);border:1px solid rgba(241,243,249,.7);background:rgba(35,46,86,.35)}
.case-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.case:hover .case-media img{transform:scale(1.04)}
.case-body{display:flex;flex-direction:column;gap:13px;min-width:0}
/* eventi senza una foto propria (studenti.html): la card resta a una
   sola colonna invece di lasciare vuoto lo spazio dell'immagine */
.case--plain{grid-template-columns:1fr}

/* foto in apertura di sezione */
.banner{margin:38px 0 0}
.banner img{width:100%;height:clamp(230px,32vw,400px);object-fit:cover;display:block;border-radius:var(--r-surface)}
.banner figcaption{margin-top:12px;font-size:.85rem;color:var(--ink-2)}

/* Riquadro per il recap in video. Il girato e' verticale come un reel:
   invece di ritagliarlo dentro una fascia orizzontale, lo teniamo nel
   suo formato. Da telefono resta da solo, verticale, ed e' gia' giusto
   cosi'. Da schermi piu' larghi un video verticale da solo lascerebbe
   due fasce bianche ai lati: gli affianchiamo un testo che riempie
   quello spazio invece di sprecarlo.
   preload="none" nel markup: gli 11 MB si scaricano solo se qualcuno
   preme play, non a ogni visita. */
.banner-video{margin:38px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.banner-video-media{flex:none;margin-inline:auto}
.banner-video .cornice{
  background:var(--surface-2);border-radius:var(--r-surface);
  padding:clamp(14px,2.2vw,26px);display:grid;place-items:center;
  /* la cornice si stringe attorno al video (che è verticale, come un reel):
     senza width:fit-content il grid si allarga a tutta la larghezza dello
     shell e il video, molto più stretto, resta piccolo al centro di un
     grande riquadro grigio su schermi larghi */
  width:fit-content;max-width:100%;margin-inline:auto;
}
.banner-video video{
  display:block;width:auto;max-width:100%;
  height:clamp(360px,46vw,540px);
  border-radius:10px;background:#000;
}
.banner-video figcaption{margin-top:12px;font-size:.85rem;color:var(--ink-2)}
.banner-video-copy{flex:1 1 280px;min-width:0}
.banner-video-copy .tag{margin-bottom:16px}
.banner-video-copy h3{font-size:clamp(1.35rem,2.4vw,1.85rem);max-width:18ch;margin-bottom:12px}
.banner-video-copy p{font-size:.98rem;color:var(--ink-2);max-width:42ch}
.banner-video-copy .tlink{margin-top:18px}
@media (max-width:720px){
  /* sotto i 720px il video torna a definire la propria larghezza in
     percentuale (vedi sotto): la cornice deve poter occupare tutto lo
     shell, altrimenti quel 100% si calcolerebbe su un contenitore
     "fit-content" ancora indefinito */
  .banner-video .cornice{padding:10px;width:100%}
  /* tetto alla larghezza: senza, su schermi intermedi il player
     diventava alto oltre mille pixel, piu' di una schermata intera */
  .banner-video video{width:100%;max-width:330px;height:auto;aspect-ratio:9/16}
  .banner-video-media{width:100%}
  .banner-video-copy{text-align:center;margin-inline:auto}
  .banner-video-copy h3,.banner-video-copy p{max-width:none;margin-inline:auto}
}
.case:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 18px 40px rgba(35,46,86,.09)}
.case-logo--tall{height:42px;max-width:min(130px,100%)}
.case-logo--compact{height:24px}
.case-logo{align-self:flex-start;height:28px;width:auto;max-width:min(200px,100%);object-fit:contain;object-position:left center;opacity:.92}
.case h3{font-size:1.35rem}
.case>p{font-size:.93rem;color:var(--ink-2);max-width:42ch}
.res{margin:4px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px 28px}
.res div{display:flex;flex-direction:column}
.res b{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:1.35rem;line-height:1;color:var(--navy)}
.res span{margin-top:5px;font-size:.76rem;color:var(--ink-2)}

/* le due porte, in fondo alla home */
.doors{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.door{
  border:1px solid var(--line);border-radius:var(--r-surface);padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;gap:14px;background:var(--surface);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.door:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 18px 40px rgba(35,46,86,.09)}
.door h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.door p{font-size:.95rem;color:var(--ink-2);max-width:38ch}
.door .tlink{margin-top:auto;padding-top:8px}
.door-dark{background:var(--ink);border-color:var(--ink);color:#C6CCE4}
.door-dark h3{color:var(--paper)}
.door-dark p{color:#C6CCE4}
.door-dark .tlink{color:var(--salmon-hi)}
.door-dark:hover{border-color:var(--salmon)}

/* chiusura pagina aziende */
.close{position:relative;overflow:hidden;background:var(--ink);color:#C6CCE4}
.close .shell{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.close h2{color:var(--paper);max-width:20ch}
.close .hl{background:var(--salmon);color:var(--ink)}
.close p{margin-top:16px;font-size:1rem;color:#C6CCE4;max-width:46ch}
.close .btn-primary{background:var(--salmon);color:var(--ink)}
.close .btn-primary:hover{background:var(--salmon-hi)}

/* form community */
.cform{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:8px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld.full{grid-column:1/-1}
.cform input[type=text],.cform input[type=email],.cform select{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:13px 18px;border-radius:var(--r-pill);font-family:var(--sans);font-size:.95rem;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.cform select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cform input::placeholder{color:var(--ink-2)}
.cform input:focus,.cform select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(155,196,226,.5)}
.cform [aria-invalid=true]{border-color:var(--danger)}
.cform .msg{font-size:.78rem;color:var(--danger);min-height:1em;line-height:1.5}
/* compare solo se /api/subscribe risponde con un errore: vuoto, non occupa spazio */
.form-error{margin:0;font-size:.85rem;color:var(--danger)}
.form-error:empty{display:none}
.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:var(--ink-2)}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--ink);flex:none}
.consent a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.consent a:hover{color:var(--ink)}
.consent em{font-style:normal;color:var(--ink)}
.cform .send{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cform .send .help{margin:0}
.cdone{
  display:none;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);
  padding:clamp(28px,4vw,44px);text-align:center;margin-top:8px;
}
.cdone i{font-size:2rem;color:var(--navy)}
.cdone h3{margin-top:12px;font-size:1.5rem}
.cdone p{margin-top:10px;color:var(--ink-2);max-width:44ch;margin-inline:auto}
.signup.sent form{display:none}
.signup.sent .cdone{display:block}
/* edizione gia chiusa: tag piu sommesso degli altri */
.tag-past{border-color:var(--line-soft);color:var(--ink-2)}

@media (max-width:1000px){
  .cases{grid-template-columns:1fr}
  .case{grid-template-columns:120px minmax(0,1fr)}
  .case--plain{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
.scroll-hint{display:none}
@media (max-width:720px){
  /* liste .pts (problemi, valori, step...): impilate diventavano
     lunghissime, specie quelle da 5-6 voci. Stesso carosello orizzontale
     del track record e degli eventi, cosi' la pagina resta corta anche
     con molte voci. Il filetto in cima (pensato per una colonna) diventa
     un riquadro vero, altrimenti da telefono non si capirebbe dove
     inizia e finisce ogni scheda mentre si scorre di lato. */
  .pts{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80vw;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  }
  .pt{
    scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-surface);
    background:var(--surface);padding:20px;
  }
  /* timeline "fase per fase" (aziende.html): un po' meno aria fra le
     card, sono cinque e sulla singola colonna diventano lunghe */
  .phase{padding-bottom:22px}
  .phase-card{padding:16px}
  .phase-list{gap:7px}
  .cform{grid-template-columns:1fr}

  /* eventi gia' realizzati: carosello orizzontale, stessa logica del feed.
     Impilati erano 2180px, oltre tre schermate da scorrere. align-items:
     start invece dello stretch di default: altrimenti ogni scheda veniva
     tirata alla stessa altezza della piu' alta (quasi 700px, praticamente
     tutto lo schermo), anche quando il suo contenuto ne occupava meno
     della meta' - risultato: schede lunghissime, difficili da superare
     scorrendo in verticale. */
  .cases{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86vw;
    align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  }
  .case{scroll-snap-align:start;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:16px}
  .case--plain{grid-template-columns:1fr}
  .case .case-body{gap:10px}
  /* con la miniatura a fianco (92px) il testo resta troppo stretto per
     due colonne: "Formato/Dove" affiancate andavano a capo su piu'
     righe ciascuna. Una colonna sola, con l'etichetta sopra al valore,
     usa tutta la larghezza disponibile ed e' molto piu' compatta. */
  .case .spec{grid-template-columns:1fr;gap:8px;padding-top:12px}

  /* l'intravedere la scheda successiva non bastava a far capire che il
     carosello scorre: un avviso esplicito sotto, con una freccina che
     si muove appena, per ogni carosello orizzontale della pagina.
     .scroll-hint{display:none} sta PRIMA di questo blocco apposta:
     stessa specificita', quindi vince l'ultima dichiarazione nel file,
     e deve essere questa "display:flex" a farlo, non quella di base */
  .scroll-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;font-size:.78rem;color:var(--ink-2)}
  .scroll-hint .ico{font-size:.8em;animation:scroll-hint-nudge 1.6s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.scroll-hint .ico{animation:none}}
}
@keyframes scroll-hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ---- righe legali del footer e segnaposto da compilare ---- */
.f-bottom a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.f-bottom a:hover{color:var(--salmon)}

/* ---- pagine di testo: privacy e cookie ---- */
.legal{padding-block:clamp(48px,6vw,88px) clamp(64px,8vw,112px)}
.legal .shell{max-width:820px}
.legal h1{font-size:clamp(2rem,3.6vw,3rem)}
.legal .updated{margin-top:16px;font-size:.85rem;color:var(--ink-2)}
.legal h2{font-size:clamp(1.3rem,1.9vw,1.6rem);margin-top:48px}
.legal h2 + p,.legal h2 + ul{margin-top:14px}
.legal p{margin-top:14px;color:var(--ink-2);font-size:1rem;max-width:70ch}
.legal p strong{color:var(--ink);font-weight:500}
.legal ul{margin:14px 0 0;padding:0;list-style:none;max-width:70ch}
.legal li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--ink-2);font-size:1rem}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--salmon)}
.legal li strong{color:var(--ink);font-weight:500}
.legal .box{
  margin-top:22px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface);padding:clamp(22px,2.4vw,30px);
}
.legal .box p{margin-top:8px}
.legal .box p:first-child{margin-top:0}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--ink)}

/* ==========================================================================
   Barra del consenso ai cookie.
   I due pulsanti sono identici per dimensione e colore: rifiutare deve
   costare quanto accettare, altrimenti il consenso non e' libero.
   ========================================================================== */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:#C6CCE4;
  border-top:1px solid rgba(198,204,228,.22);
  box-shadow:0 -14px 40px rgba(35,46,86,.18);
  padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));
  animation:cookiebar-entra .4s var(--ease) both;
}
@keyframes cookiebar-entra{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cookiebar{animation:none}}

.cookiebar .shell{display:flex;align-items:center;gap:22px 28px;flex-wrap:wrap}
.cookiebar-testo{flex:1 1 320px;min-width:0;font-size:.85rem;line-height:1.6}
.cookiebar-testo b{display:block;margin-bottom:4px;color:#F1F3F9;font-weight:500;font-size:.95rem}
.cookiebar-testo a{color:var(--salmon-hi);text-decoration:underline;text-underline-offset:3px}
.cookiebar-testo a:hover{color:#F1F3F9}

.cookiebar-scelte{display:flex;gap:10px;flex:0 0 auto}
.cookiebar-scelte button{
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  padding:11px 22px;min-width:132px;border-radius:var(--r-pill);
  background:#F1F3F9;color:var(--ink);border:1px solid #F1F3F9;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.cookiebar-scelte button:hover{background:var(--salmon-hi);border-color:var(--salmon-hi)}
.cookiebar-scelte button:focus-visible{outline:2px solid var(--salmon-hi);outline-offset:3px}

@media (max-width:720px){
  .cookiebar{padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
  .cookiebar .shell{gap:16px}
  .cookiebar-testo{flex:1 1 100%;font-size:.82rem}
  .cookiebar-scelte{width:100%;gap:9px}
  .cookiebar-scelte button{flex:1 1 0;min-width:0;padding:13px 10px}
}