/* Stile delle pagine aggiuntive (legali, prezzi, grazie).

   Queste pagine caricano ANCHE il CSS della home (index-*.css): da li
   ereditano token, .site-header, .brand, .brand-mark, .button e .site-footer,
   percio logo, colori, font e spaziature sono gli stessi senza duplicarli.
   Qui sta solo cio che alla home non serve: i font (che nella home vivono in
   un <style> inline) e l'impaginazione di un documento di testo lungo. */

/* ---- font: identici a quelli della home ---- */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-37facb2a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-c9a5f13c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-f00fa027.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-bd6e7fdc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-76dcfc73.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/_vinext_fonts/manrope-76eca2803f7f/manrope-81401990.woff2) format('woff2');
  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_manrope_0zgwfjk { font-family: 'Manrope', sans-serif; }

.__variable_manrope_0zgwfjk { --font-manrope: 'Manrope', sans-serif; }

/* ---- il documento ---- */
/* La home applica la classe .__variable_manrope_0zgwfjk al <body>: e li che
   nasce --font-manrope. Le sottopagine fanno lo stesso; questa regola e solo
   una rete di sicurezza se un domani la classe sparisse. */
:root { --font-manrope: 'Manrope', sans-serif; }

body { background: var(--sand); color: var(--navy); font-family: var(--font-manrope), Arial, sans-serif; margin: 0; overflow-x: hidden; }

.pagina { width: min(760px, 100% - 48px); margin-inline: auto; padding: 8px 0 80px; }

.pagina h1 { font-size: clamp(34px, 5vw, 46px); line-height: 1.1; letter-spacing: -.03em; font-weight: 850; margin: 24px 0 6px; text-wrap: balance; }
.pagina .aggiornato { color: var(--muted); font-size: 14px; margin: 0 0 38px; }

.pagina h2 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.pagina h2:first-of-type { border-top: 0; padding-top: 0; }
.pagina h3 { font-size: 16px; font-weight: 800; margin: 26px 0 8px; }

.pagina p, .pagina li { font-size: 15.5px; line-height: 1.72; color: var(--navy-soft); }
.pagina p { margin: 0 0 14px; }
.pagina ul { margin: 0 0 16px; padding-left: 22px; }
.pagina li { margin-bottom: 8px; }
.pagina strong { color: var(--navy); font-weight: 750; }
/* I link dentro il testo si sottolineano; i pulsanti no.
   L'esclusione e necessaria, non estetica: «.pagina a» ha specificita 0-1-1 e
   batterebbe «.button-primary» (0-1-0), ridipingendo di verde scuro il testo
   bianco del pulsante verde — contrasto 1.42:1, illeggibile. */
.pagina a:not(.button) { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.pagina a:not(.button):hover { color: var(--navy); }

.pagina table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; }
.pagina th, .pagina td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.pagina th { background: var(--teal-pale); color: var(--navy); font-weight: 750; font-size: 13px; }
.pagina code { background: var(--teal-pale); border-radius: 5px; padding: 1px 6px; font-size: 13.5px; }

.pagina .nota { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.65; }

/* La tabella va lasciata scorrere per conto suo su schermi stretti,
   altrimenti e la pagina intera a scorrere in orizzontale. */
.tabella-scorrevole { overflow-x: auto; }

/* ---- intestazione: stessa della home, ma i link tornano alla home ---- */
.site-header .torna { color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; justify-self: end; }
.site-header .torna:hover { color: var(--navy); }

/* ---- pagina prezzi ---- */
.prezzo-scheda { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 34px clamp(20px, 4vw, 38px); box-shadow: 0 14px 44px rgba(16,42,58,.07); margin: 6px 0 30px; }
.prezzo-lancio { display: inline-block; background: var(--amber-pale); color: #8a6413; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; }
.prezzo-cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prezzo-cifra b { font-size: clamp(46px, 8vw, 62px); font-weight: 850; letter-spacing: -.035em; line-height: 1; }
.prezzo-cifra span { font-size: 16px; color: var(--muted); font-weight: 700; }
.prezzo-poi { margin: 12px 0 0; font-size: 15px; color: var(--navy-soft); }
.prezzo-attivazione { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.7; color: var(--navy-soft); }

.incluso { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incluso li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--navy-soft); margin: 0; }
.incluso li::before { content: "✓"; color: var(--teal); font-weight: 850; flex: none; margin-top: 1px; }

.riquadro { background: var(--teal-pale); border-radius: 16px; padding: 20px 22px; margin: 26px 0; }
.riquadro p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--navy-soft); }
.riquadro p + p { margin-top: 10px; }

.prezzo-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 30px 0 8px; }
.prezzo-iva { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.6; }
