.apri__media video,.apri__media .top__fermo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.apri__media .top__fermo{display:none}
@media (prefers-reduced-motion:reduce){
  .apri__media video{display:none}
  .apri__media .top__fermo{display:block}
}

.apri[data-apri="video"]{height:auto;min-height:100svh}
.apri[data-apri="video"] .apri__in{height:auto;min-height:100svh}
.apri__in{
  justify-content:center;
  padding-top:calc(var(--head-h) + var(--s-9));
}

.top__box{
  width:min(1440px,100% - var(--clear) * 2);
  margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-8);align-items:stretch;
}

.top__say{
  display:flex;flex-direction:column;
  color:var(--paper);
}
.top__say h1 .mk{display:inline-block}
.top__lead{margin-top:var(--s-4);max-width:44ch;font-size:var(--t-para);line-height:var(--lh-para)}
.top__where{margin-top:var(--s-6)}
.top__where .rule{margin-bottom:var(--filo);--star-x:0%}
.top__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.top__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4)}
.top__k{
  flex:0 0 auto;min-width:9ch;
  font-size:var(--t-ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.top__v{font-size:var(--t-para);line-height:var(--lh-para);font-weight:400}
.top__soc{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4)}
.top__v a,a.top__v,.top__soc a{padding-block:var(--s-3);margin-block:calc(var(--s-3) * -1)}
.top__soc{row-gap:var(--s-4)}

.card{
  background:var(--paper);
  padding:var(--pad);
  color:var(--ink);
  display:grid;gap:var(--s-3);align-content:start;
}
.card__s{margin-top:var(--s-1);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.card__head{display:block}

.f__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.f__in{
  width:100%;min-height:var(--dito);
  padding:var(--filo);
  border:1px solid var(--linea);border-radius:0;
  background:color-mix(in srgb,var(--ink) 4%,var(--paper));
  color:var(--ink);
  font-family:var(--f-sans);font-variation-settings:"wdth" 100;
  font-size:var(--t-para);line-height:var(--lh-para);
}
.f__in::placeholder{color:var(--ink);opacity:.6}
.f__in:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.f__ta{min-height:var(--s-10);resize:vertical;display:block}
.f__campo{display:grid;gap:var(--s-1);min-width:0}
.f__lab{font-size:var(--t-para-md);line-height:var(--lh-para-md);color:var(--ink)}
.f__data{color-scheme:light;min-height:var(--dito)}
.f__data::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.72}
.f__data:hover::-webkit-calendar-picker-indicator{opacity:1}


.f__tipi{min-width:0;margin:0;padding:0;border:0}
.f__tipi__t{
  padding:0 var(--s-3) 0 0;margin-bottom:var(--s-1); /* un respiro prima della riga del fieldset */
  font-size:var(--t-para-md);line-height:var(--lh-para-md);color:var(--ink);
}
.f__pills{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.f__pill{
  display:inline-flex;align-items:center;min-height:calc(var(--dito) - 6px);
  padding-block:0;padding-inline:var(--filo);
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:var(--t-ui);line-height:var(--lh-para-md);
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;
}
.f__pill input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.f__pill:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.f__pill:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.f__pill[aria-invalid="true"],.f__tipi[aria-invalid="true"] .f__pill{border-color:var(--accent)}

.f__gdpr{display:flex;align-items:center;gap:var(--s-2);min-height:var(--dito);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
/* Tolto qui il primo disegno della casella di spunta (44px con bordo trasparente e
   margine negativo): era interamente riscritto dal blocco .f__box piu' in basso in
   questo stesso foglio, tranne box-shadow e background-clip, che il secondo blocco
   non ridichiara e che quindi sopravvivevano da soli. Effetto: la casella disegnava
   due anelli, quello grigio dichiarato piu' un anello nero pieno rimasto dal
   disegno abbandonato. Tolte anche :checked e :focus-visible del primo blocco,
   ridichiarate per intero dal secondo. */
.f__say{margin:0;font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.f__gdpr a{padding-block:var(--s-3);margin-block:calc(var(--s-3) * -1)}
.f__say{font-weight:700}
.f__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f__sr input{width:1px;height:1px;min-height:0;padding:0;border:0}

.prt{background:transparent;padding-block:0;margin-top:auto;padding-top:var(--s-8);width:100%}
.apri__in{position:relative;z-index:2}
.prt__t{text-align:left;padding-inline:0}
.prt__t{
  font-family:var(--f-sans);
  font-size:var(--t-menu);line-height:var(--lh-menu);
  font-weight:500;letter-spacing:var(--tr-menu);text-transform:uppercase;
  font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  color:var(--paper);
}
.prt__rail{
  margin-top:var(--s-2);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.prt__rail::-webkit-scrollbar{display:none}
.prt__rail.is-trascina{cursor:grabbing}
.prt__list{
  list-style:none;margin:0;padding:0;
  display:flex;gap:0;
}
.prt__it{flex:0 0 clamp(150px,33.33%,240px);height:var(--s-8);display:grid;place-items:center}
.prt__logo{width:auto;max-width:75%;max-height:44px;object-fit:contain;pointer-events:none}

.foot > .wrap-i:first-child,
.foot__top{display:none}

/* 1023 e non 1024: _sistema.css riapre il desktop a min-width:1024px (righe 1026 e 1492).
   A esattamente 1024px valevano tutte e due le fasce, e la pagina prendeva la tipografia
   desktop dal sistema col layout tablet di questo foglio. */
@media (max-width:1023px){
  /* niente altezza minima centrata per le FAQ: su tablet lasciava vuoti sopra il titolo e sotto "Read more" */
  .faq.schermo-80{min-height:auto;align-content:start}
  .apri__in{padding-top:calc(var(--head-h) + var(--s-9))}
  .top__box{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .top__where{margin-top:var(--s-4)}
  .top__k{min-width:0}
  .f__row{grid-template-columns:minmax(0,1fr)}
}

.faq{background:var(--ink)}
.faq{padding:clamp(var(--s-7),10vw,var(--s-9)) 0 clamp(var(--s-8),11vw,var(--s-10))}
.faq__head{
  text-align:center;max-width:62ch;margin-inline:auto;
  margin-top:clamp(var(--s-4), 4vw, var(--s-8));
}
.faq__t{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:400}
.faq__sub{margin-top:var(--s-2);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.faq__more{display:grid;place-items:center;margin-top:var(--s-6);justify-self:center;width:100%}

.card > *{margin-block:0}
.card .f__gdpr{margin-block:0}

.f__in{height:var(--dito);min-height:var(--dito);padding-block:0}
.f__ta{height:auto;min-height:var(--s-10);padding-block:var(--filo)}
/* stesso bottone di tutto il sito (altezza, testo, quadrato): niente misure a parte */
.f__send{
  width:max-content;max-width:100%;
  align-self:flex-start;justify-self:start;margin-right:auto;
}

.f__in[aria-invalid="true"],
.f__ta[aria-invalid="true"]{
  border-color:var(--male);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--male) 34%,transparent);
}
.f__tipi[aria-invalid="true"] .f__pill,
.f__pill[aria-invalid="true"]{border-color:var(--male)}
.f__gdpr[aria-invalid="true"] .f__box{
  border-color:var(--male);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--male) 34%,transparent);
}
.f__say[data-male="1"]{color:var(--male)}

.f__box{
  appearance:none;-webkit-appearance:none;
  flex:none;width:22px;height:22px;margin:0;
  border:1px solid var(--linea);border-radius:0;
  background:transparent;cursor:pointer;
  display:inline-grid;place-items:center;
}
.f__box::after{
  content:"";width:12px;height:9px;
  background:var(--paper);
  -webkit-mask:var(--spunta) center / contain no-repeat;
          mask:var(--spunta) center / contain no-repeat;
  transform:scale(0);transition:transform 160ms var(--e-out);
}
.f__box:checked{background:var(--ink);border-color:var(--ink)}
.f__box:checked::after{transform:scale(1)}
.f__box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

:root{
  --ico-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20v16H2z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M2.6 5 12 13 21.4 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-instagram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='%23000'/%3E%3C/svg%3E");
  --ico-tiktok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v10.5a3.5 3.5 0 1 1-3-3.46' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M14 3c.6 2.6 2.3 4.2 5 4.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  --ico-youtube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='3.6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M10.2 9.4 15 12l-4.8 2.6z' fill='%23000'/%3E%3C/svg%3E");
  --ico-linkedin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7 10v7M7 7.2v.1M11 17v-4a2.2 2.2 0 0 1 4.4 0v4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}

.top__v[data-soc]{display:inline-flex;align-items:center;gap:8px}
.top__v[data-soc]::before,
.top__soc a[data-soc]::before{
  content:"";flex:none;width:16px;height:16px;
  background:currentColor;
  -webkit-mask:var(--ico-mail) center / contain no-repeat;
          mask:var(--ico-mail) center / contain no-repeat;
}
.top__soc a[data-soc]{display:inline-flex;align-items:center;gap:7px}
.top__soc a[data-soc="instagram"]::before{-webkit-mask-image:var(--ico-instagram);mask-image:var(--ico-instagram)}
.top__soc a[data-soc="tiktok"]::before{-webkit-mask-image:var(--ico-tiktok);mask-image:var(--ico-tiktok)}
.top__soc a[data-soc="youtube"]::before{-webkit-mask-image:var(--ico-youtube);mask-image:var(--ico-youtube)}
.top__soc a[data-soc="linkedin"]::before{-webkit-mask-image:var(--ico-linkedin);mask-image:var(--ico-linkedin)}
.f__tipi{
  margin-block:var(--s-6);
  padding-block:var(--s-4);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.f__tipi__t{margin-bottom:var(--s-2)}
.top__lead{margin-top:var(--s-6)}
.top__where{margin-top:var(--s-6);padding-block:var(--s-4) var(--s-6)}
.top__list{gap:var(--s-4)}
.prt{padding-top:var(--s-6)}
.prt__rail{padding-inline:0}
.prt__list{padding-inline:0;justify-content:flex-start}
.prt__it:first-child{justify-items:start}
.prt__it{place-items:center start}
.prt__logo{margin-inline-start:0}
.prt > .wrap{padding-inline:0;width:100%;max-width:none;margin-inline:0}

.prt__rail{overflow:hidden}
.prt__list{width:max-content;animation:prt-giro 34s linear infinite}
.prt__rail:hover .prt__list,
.prt__rail.is-trascina .prt__list{animation-play-state:paused}
@keyframes prt-giro{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .prt__list{animation:none}
  .prt__rail{overflow-x:auto}
}
@media (max-width:767px){
  /* sul telefono la scheda va da bordo a bordo: via il doppio margine, i campi respirano */
  .card{margin-inline:calc(var(--clear) * -1);padding:var(--s-6) var(--clear)}
  .top__row{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .prt__it{flex:0 0 clamp(130px,33.33%,200px)}
}

:root{--bene:#1B7F4C}
.f__say{color:var(--bene)}
/* Il modulo e la conferma stanno nella STESSA cella: cosi' e' il piu' alto
   dei due a dettare l'altezza, e passare dall'uno all'altro non fa piu'
   saltare le colonne. Misurato prima: perdevano 318 px di colpo. */
.f__cassa{display:grid}
.f__cassa>.card{grid-area:1/1}
/* Nascosto ma ancora ingombrante: display:none lo toglierebbe dal conto e
   l'altezza tornerebbe a ballare. Invisibile, non cliccabile e fuori dalla
   tabulazione, che e' quello che serve. */
.f__cassa>.card[hidden]{display:grid;visibility:hidden;pointer-events:none}
.card[hidden]{display:none}

/* Dentro il riquadro il contenuto si centra invece di appoggiarsi in cima:
   lo spazio in piu' era 143 px di bianco sotto l'ultima riga. */
.f__done{align-content:center}
.f__done__in{display:grid;gap:var(--s-3);max-width:46ch}
.f__done__ico{
  width:calc(var(--dito) * 1.18);height:calc(var(--dito) * 1.18);
  color:var(--bene);margin-bottom:var(--s-1);
}
.f__done__t{margin:0;text-wrap:balance}
.f__done__p{margin:0;font-size:var(--t-para);line-height:var(--lh-para)}
/* Il filetto divide la ricevuta dalla promessa: sono due cose diverse e
   prima si leggevano come un paragrafo solo piu' lungo. */
.f__done__rule{
  height:1px;background:color-mix(in srgb,var(--ink) 16%,transparent);
  margin-block:var(--s-1);
}
.f__done__p--ora{font-weight:600}

@media (max-width:767px){
  /* Sul telefono le due colonne sono una sotto l'altra e non c'e' niente da
     tenere fermo: il riquadro torna alto quanto il suo contenuto. */
  .f__cassa>.card[hidden]{display:none}
  .f__done{align-content:start}
}