/* ==========================================================================
   LA FORMULA — sistema di design
   Carta e inchiostro. Due famiglie, un solo accento, filetti da 1px.
   ========================================================================== */

/* Font ospitati sul nostro dominio: nessuna richiesta a server di terzi
   prima del consenso (linee guida del Garante sui font remoti). */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight:300 500;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Dichiarare lo schema impedisce alla WebView Android (browser in-app di
     Instagram e Facebook con "Auto Dark Theme") di invertire da sola i colori
     della pagina, che e disegnata su carta chiara. */
  color-scheme: light;

  /* colore */
  --paper:       #F7F4EF;
  --paper-2:     #EFEAE1;
  --surface:     #FFFFFF;
  --ink:         #15120E;
  --ink-soft:    #5E574E;
  --ink-faint:   #6E665B;
  --line:        #DFD8CB;
  --line-strong: #C7BCA9;
  --accent:      #14524C;
  --accent-ink:  #0E3B36;
  --accent-soft: #E4EDE9;
  --accent-lite: #7FB3A8;
  --band:        #15120E;
  --band-ink:    #EFEAE1;
  --focus:       #14524C;

  /* tipografia */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-label: .6875rem;
  --t-micro: .8125rem;
  --t-body:  clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem);
  --t-lead:  clamp(1.1875rem, 1.10rem + .45vw, 1.375rem);
  --t-h3:    clamp(1.125rem, 1.05rem + .45vw, 1.375rem);
  --t-h2:    clamp(1.6rem, 1.30rem + 1.5vw, 2.5rem);
  --t-h1:    clamp(2.05rem, 1.55rem + 2.5vw, 3.5rem);
  --t-price: clamp(2.75rem, 2.20rem + 2.6vw, 4rem);

  /* spazio */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px; --s10:120px;

  --wrap:        68rem;
  --wrap-text:   39rem;
  --wrap-narrow: 30rem;

  /* forma */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-card: 0 1px 2px rgba(21,18,14,.04), 0 24px 48px -32px rgba(21,18,14,.26);
}

/* --------------------------------------------------------------- reset -- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-optical-sizing:auto;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  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='.045'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
hr{ height:1px; background:var(--line); border:0; margin:0; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------- tipografia -- */

h1,h2,h3{ margin:0; hyphens:auto; }

h1{
  font-weight:300;
  font-size:var(--t-h1);
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}

h2{
  font-weight:400;
  font-size:var(--t-h2);
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
  max-width:20ch;
}

h3{
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.28;
  letter-spacing:-.005em;
}

p{ margin:0 0 1.05em; max-width:62ch; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:500; color:var(--ink); }
em{ font-style:italic; font-weight:300; }

a{ color:inherit; }

.lead{
  font-size:var(--t-lead);
  font-weight:300;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:36ch;
}

.label{
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

.num{ font-variant-numeric:lining-nums tabular-nums; }

/* ---------------------------------------------------------- struttura -- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 5.2vw, 40px);
}
.wrap--text{ max-width:calc(var(--wrap-text) + 2 * clamp(20px, 5.2vw, 40px)); }

.sec{ padding-block:clamp(56px, 8.5vw, 104px); }
.sec--tight{ padding-block:clamp(40px, 6vw, 72px); }
.sec--wide{ padding-block:clamp(76px, 11vw, 152px); }

.bg-2{ background:var(--paper-2); }

.rule{
  width:40px;
  height:2px;
  background:var(--accent);
  margin:0 0 14px;
  border:0;
  transform-origin:left center;
}

.sec-head{ margin-bottom:var(--s7); }
.sec-head .label{ margin-bottom:14px; }
.sec-head .lead{ margin-top:18px; }

.sec-head--center{ text-align:center; }
.sec-head--center h2{ max-width:none; margin-inline:auto; }

.sec-body{ margin-top:28px; }

/* --------------------------------------------------------------- header -- */

.site-head{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-block:9px;   /* area tattile di 44px senza cambiare il disegno */
  text-decoration:none;
  color:var(--ink);
}
.wordmark__m{
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-xs);
  font-family:var(--font-serif);
  font-weight:400;
  font-size:14px;
  line-height:1;
  color:var(--accent);
}
.wordmark__t{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* L'etichetta sta su una riga sola: sotto i 600px non c'e spazio e andrebbe
   a capo dentro un header alto 56px. */
.site-head .label{ text-align:right; white-space:nowrap; }
@media (max-width:599px){ .site-head .label{ display:none; } }

/* ----------------------------------------------------------------- hero -- */

.hero{ padding-block:clamp(64px, 12vw, 132px); }
.hero h1{ margin:0 0 18px; }
@media (min-width:880px){ .hero h1{ max-width:16ch; } }

.facts{
  display:flex;
  flex-wrap:wrap;
  row-gap:14px;
  margin:32px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
}
.facts li{
  padding-inline:clamp(14px, 4vw, 22px);
  border-inline-start:1px solid var(--line);
}
.facts li:first-child{ padding-inline-start:0; border-inline-start:0; }
.facts b{
  display:block;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:1.25rem;
  line-height:1.1;
}
.facts span{
  display:block;
  margin-top:4px;
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ------------------------------------------------------------ narrativa -- */

.pull{
  margin:var(--s6) 0;
  padding-inline-start:20px;
  border-inline-start:2px solid var(--accent);
  font-size:var(--t-lead);
  font-weight:300;
  font-style:italic;
  line-height:1.45;
  color:var(--ink);
  max-width:34ch;
}

/* ------------------------------------------------------------- principi -- */

.principi{ list-style:none; margin:0; padding:0; }
.principi li{
  display:grid;
  grid-template-columns:2.75rem minmax(0,1fr);
  column-gap:16px;
  row-gap:6px;
  padding-block:26px;
  border-top:1px solid var(--line);
}
.principi li:last-child{ border-bottom:1px solid var(--line); }
.principi .n{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:1.35rem;
  line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:.22em;
}
.principi h3{ margin:0; }
.principi p{
  grid-column:2;
  margin:0;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:48ch;
}

@media (min-width:880px){
  .principi{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .principi li{
    grid-template-columns:minmax(0,1fr);
    border-top:0;
    border-inline-start:1px solid var(--line);
    padding:30px clamp(18px,2.4vw,28px);
  }
  .principi li:first-child{ border-inline-start:0; padding-inline-start:0; }
  .principi li:last-child{ border-bottom:0; }
  .principi p{ grid-column:1; }
  .principi .n{ padding-top:0; margin-bottom:10px; }
}

/* -------------------------------------------------------------- moduli -- */

.moduli{ list-style:none; margin:0; padding:0; }
.mod{
  display:grid;
  grid-template-columns:2.75rem minmax(0,1fr);
  column-gap:16px;
  row-gap:6px;
  padding-block:22px;
  border-top:1px solid var(--line);
}
.moduli .mod:last-child{ border-bottom:1px solid var(--line); }
.mod__n{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:1.35rem;
  line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:.22em;
  transition:color 180ms ease;
}
.mod:hover .mod__n{ color:var(--accent-ink); }
.mod__t{ margin:0; }
.mod__d{
  grid-column:2;
  margin:0;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:52ch;
}
.mod__meta{
  grid-column:2;
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

@media (min-width:880px){
  .mod{ grid-template-columns:3.25rem minmax(0,1fr) auto; column-gap:24px; }
  .mod__meta{ grid-column:3; grid-row:1; align-self:start; padding-top:.35em; white-space:nowrap; }
}

/* ---------------------------------------------------------- due colonne -- */

.due{ display:grid; gap:var(--s7); }
@media (min-width:880px){
  .due{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s8); }
}
.due h3{ margin:0 0 18px; }
.elenco{ list-style:none; margin:0; padding:0; }
.elenco li{
  position:relative;
  padding-inline-start:22px;
  padding-block:9px;
  border-top:1px solid var(--line);
  font-size:.9375rem;
  line-height:1.55;
}
.elenco li:first-child{ border-top:0; padding-top:0; }
.elenco li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:1.05em;
  width:10px;
  height:1px;
  background:var(--accent);
}
.elenco--no li{ color:var(--ink-soft); }
.elenco--no li::before{ background:var(--line-strong); }
.elenco--no li:first-child::before{ top:.55em; }
.elenco li:first-child::before{ top:.55em; }

/* ---------------------------------------------------------------- banda -- */

.band{ background:var(--band); color:var(--band-ink); }
.band h2,.band h3{ color:inherit; }
.band p{ color:rgba(239,234,225,.86); max-width:52ch; }
.band .label{ color:rgba(239,234,225,.62); }
.band .mono{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(239,234,225,.28);
  border-radius:var(--r-xs);
  font-family:var(--font-serif);
  font-weight:400;
  font-size:1.25rem;
  color:var(--accent-lite);
  margin-bottom:28px;
}
.band .name{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height:1.2;
  letter-spacing:normal;
  max-width:none;
  margin:0;
}
.band .role{ margin-top:10px; margin-bottom:26px; }

/* -------------------------------------------------------------- incluso -- */

.incluso{ list-style:none; margin:0; padding:0; }
.incluso li{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  padding-block:14px;
  border-top:1px solid var(--line);
}
.incluso li:last-child{ border-bottom:1px solid var(--line); }
.incluso svg{ margin-top:.35em; }
.incluso b{ font-weight:500; }
.incluso span{
  display:block;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink-soft);
}

/* --------------------------------------------------------------- offerta -- */

.offer{
  position:relative;
  max-width:var(--wrap-narrow);
  margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(26px, 6vw, 40px);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  text-align:center;
}
.offer::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:3px;
  background:var(--accent);
}
.offer .kicker{
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.offer .name{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:var(--t-h3);
  margin:10px 0 0;
}
.offer .price{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:var(--t-price);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
  margin:18px 0 4px;
}
.offer .terms{
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  margin:0;
}
.offer ul{
  list-style:none;
  margin:26px 0 28px;
  padding:0;
  border-top:1px solid var(--line);
  text-align:start;
}
.offer li{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  padding-block:11px;
  border-bottom:1px solid var(--line);
  font-size:.9375rem;
  line-height:1.5;
}
.offer li svg{ margin-top:.28em; }
/* ATTENZIONE: mai usare `.offer a` — il pulsante di acquisto e un <a class="btn">
   dentro .offer, e `.offer a` (0,1,1) batte `.btn` (0,1,0): il testo del pulsante
   diventerebbe verde su verde, cioe invisibile. Sempre scoping su `.offer li a`. */
.offer li a{ display:inline-block; padding-block:5px; }
.offer li a,
.guar a,
.faq details p a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}

/* -------------------------------------------------------------- bottone -- */

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:26rem;
  min-height:56px;
  padding:18px 22px;
  background:var(--accent);
  color:#FBF9F6;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border:0;
  border-radius:var(--r-sm);
  transition:background 180ms cubic-bezier(.22,.61,.36,1), transform 120ms ease;
}
.btn:hover{ background:var(--accent-ink); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{
  background:var(--line-strong);
  color:var(--ink-soft);
  cursor:default;
}
.btn:disabled:hover{ background:var(--line-strong); }
.offer .btn{ margin-inline:auto; }

.btn-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:12px 0 0;
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  max-width:26rem;
}
.offer .btn-note{ margin-inline:auto; }

.cta-inline{ max-width:var(--wrap-text); }
.cta-inline p{ margin-bottom:22px; }
.cta-inline .btn-note{ justify-content:flex-start; }

/* ------------------------------------------------------------- garanzia -- */

.guar{
  max-width:var(--wrap-narrow);
  margin-inline:auto;
  background:var(--accent-soft);
  border:1px solid #CFDDD7;
  border-radius:var(--r-lg);
  padding:clamp(24px, 6vw, 34px);
  text-align:center;
}
.guar svg{ margin-inline:auto; }
.guar h3{ margin:16px 0 8px; }
.guar p{
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:44ch;
  margin-inline:auto;
}

/* ------------------------------------------------------------------ faq -- */

.faq{ max-width:var(--wrap-text); }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  min-height:56px;
  padding-block:18px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:1rem;
  line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  flex:0 0 13px;
  width:13px;
  height:13px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 13px no-repeat;
  transition:background-size 200ms cubic-bezier(.22,.61,.36,1);
}
.faq details[open] summary::after{ background-size:13px 1px, 1px 0; }
.faq details p{
  padding-bottom:22px;
  font-size:.9375rem;
  line-height:1.62;
  color:var(--ink-soft);
  max-width:58ch;
}

/* --------------------------------------------------------------- chiusura -- */

.manifesto{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:var(--t-h2);
  line-height:1.18;
  letter-spacing:-.015em;
  max-width:24ch;
  text-wrap:balance;
  margin:0 0 var(--s6);
}

/* ---------------------------------------------------------------- footer -- */

.site-foot{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding-block:44px;
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  line-height:1.65;
  color:var(--ink-soft);
}
.site-foot .wordmark__t{ color:var(--ink); }
.site-foot nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  margin:16px 0;
}
.site-foot nav a,
.site-foot .legal a{ min-height:44px; }
/* :not(.wordmark) perche il logo del footer e anch'esso un <a>: senza questo
   verrebbe sottolineato e grigio, diverso dallo stesso componente nell'header. */
.site-foot a:not(.wordmark){
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--line-strong);
  min-height:24px;
  display:inline-flex;
  align-items:center;
  overflow-wrap:anywhere;
}
.site-foot a:not(.wordmark):hover{ color:var(--ink); }
.site-foot p{ max-width:74ch; margin:0 0 .8em; }
.legal{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  overflow-wrap:anywhere;
}
.legal dl{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px 18px;
  margin:0 0 14px;
}
@media (min-width:640px){
  .legal dl{ grid-template-columns:minmax(0,auto) minmax(0,1fr); }
  .legal dt{ text-align:start; }
}
.legal dt{ color:var(--ink-faint); }
.legal dd{ margin:0 0 6px; }
@media (min-width:640px){ .legal dd{ margin-bottom:2px; } }

/* --------------------------------------------------------------- consenso -- */

.consent{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:50;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -12px 32px -24px rgba(21,18,14,.4);
  padding:16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  line-height:1.55;
  color:var(--ink-soft);
}
.consent[hidden]{ display:none; }
.consent__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
}
.consent p{ margin:0; flex:1 1 18rem; min-width:0; max-width:58ch; }
.consent .acts{ display:flex; flex-wrap:wrap; gap:10px; }
.consent p a{ display:inline-block; padding-block:6px; }
.consent button{
  font-family:inherit;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.04em;
  min-height:48px;
  padding:12px 20px;
  border-radius:var(--r-sm);
  cursor:pointer;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
}
.consent button.primary{ background:var(--accent); border-color:var(--accent); color:#FBF9F6; }
.consent button.primary:hover{ background:var(--accent-ink); }
.consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ------------------------------------------------------- pagine legali -- */

.doc{ max-width:var(--wrap-text); }
.doc h1{ font-size:var(--t-h2); margin-bottom:10px; }
.doc h2{
  font-size:var(--t-h3);
  font-weight:500;
  margin:var(--s7) 0 12px;
  max-width:none;
}
.doc h3{
  font-family:var(--font-sans);
  font-size:.9375rem;
  font-weight:600;
  margin:var(--s5) 0 8px;
}
.doc p,.doc li,.doc dd{ font-size:1rem; line-height:1.65; overflow-wrap:break-word; }
.doc p a{ display:inline-block; padding-block:6px; }
.doc ul,.doc ol{ margin:0 0 1.05em; padding-inline-start:20px; }
.doc li{ margin-bottom:.5em; }
.doc .updated{
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  margin-bottom:var(--s6);
}
.doc dl{ margin:0 0 1.2em; }
.doc dt{ font-family:var(--font-sans); font-size:var(--t-micro); color:var(--ink-faint); }
.doc dd{ margin:0 0 10px; overflow-wrap:anywhere; }
/* Lo scorrimento sta sul contenitore, NON sulla tabella: display:block su
   <table> cancella i ruoli table/row/cell dall'albero di accessibilita e lo
   screen reader smette di annunciare righe e colonne. */
.tw{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  margin:0 0 1.2em;
}
.doc table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:.9375rem;
}
.doc th,.doc td{
  text-align:start;
  vertical-align:top;
  padding:10px 12px 10px 0;
  border-bottom:1px solid var(--line);
}
.doc th{
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.doc a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  text-decoration:none;
  min-height:32px;
}
.back{ min-height:44px; }
.back:hover{ color:var(--ink); }

/* ----------------------------------------------------------- animazione -- */

/* Il contenuto e visibile per impostazione predefinita. L'animazione si attiva
   solo se lo script aggiunge .reveal all'elemento <html>: cosi una pagina
   aperta senza JS, in prerendering o in una scheda in secondo piano non
   resta mai bianca. */

html.reveal .rv{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1), transform 520ms cubic-bezier(.22,.61,.36,1);
}
html.reveal .rv.in-view{ opacity:1; transform:none; }
html.reveal .rv:nth-child(2){ transition-delay:60ms; }
html.reveal .rv:nth-child(3){ transition-delay:120ms; }
html.reveal .rv:nth-child(4){ transition-delay:180ms; }
/* .moduli ha sei voci: senza queste due gli ultimi due comparirebbero di scatto
   insieme al primo, rompendo la cascata. */
html.reveal .rv:nth-child(5){ transition-delay:200ms; }
html.reveal .rv:nth-child(6){ transition-delay:220ms; }

/* Il filetto di accento cresce insieme al blocco che lo contiene: non viene
   osservato da solo perche un elemento largo 0 non intercetta mai. */
html.reveal .rule--anim{ width:0; transition:width 420ms cubic-bezier(.22,.61,.36,1) 80ms; }
html.reveal .in-view .rule--anim,
html.reveal .rv.in-view .rule--anim{ width:40px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html.reveal .rv{ opacity:1 !important; transform:none !important; }
  html.reveal .rule--anim{ width:40px !important; }
}

/* ---------------------------------------------------------------- mobile -- */

/* Il banner e fisso: senza questo respiro copre la fine del documento.
   Questi valori sono solo il punto di partenza: lo script misura l'altezza
   reale del banner e sovrascrive il padding, perche l'altezza cambia con la
   larghezza dello schermo e con la dimensione del carattere di sistema. */
body.consent-open{ padding-bottom:280px; }
@media (min-width:640px){ body.consent-open{ padding-bottom:190px; } }

/* Sotto i 430px i tre dati del titolo andrebbero a capo uno alla volta,
   lasciando un filetto verticale sospeso accanto al prezzo.
   Le etichette sono maiuscole con tracking: in una cella da ~76px traboccavano
   sul filetto della colonna accanto, quindi qui si stringe il tracking e si
   permette l'a capo fra parole. */
@media (max-width:430px){
  .facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .facts li{ padding-inline:clamp(6px, 2vw, 12px); }
  .facts span{ letter-spacing:.06em; word-break:normal; overflow-wrap:normal; }
}

@media (max-width:360px){
  .label,.facts span,.mod__meta{ letter-spacing:.14em; }
}

.faq details p a{ display:inline-block; padding-block:6px; }