/* Font serviti in locale: nessuna richiesta a Google Fonts. Come nell'app, gli
   indirizzi IP dei visitatori non si mandano a un terzo per caricare un carattere —
   e il sito si apre identico anche dove i CDN sono bloccati. Il peso 800 usa il file
   del 700: la differenza a video è impercettibile e si risparmia un download. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/lexend-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/lexend-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/lexend-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/lexend-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 800; font-display: swap;
             src: url("fonts/lexend-latin-700-normal.woff2") format("woff2"); }


/* ============================================================================
   letsMark — sito vetrina. Un solo file, nessuna dipendenza oltre al font.
   Palette dal prodotto: inchiostro, carta, viola dell'app, giallo del logo.
   La firma della pagina è l'EVIDENZIATORE: i concetti chiave sono marcati a
   pennarello giallo, come su un compito corretto — è il mondo del prodotto.
   ==========================================================================*/
:root{
  --inchiostro:#1e2433;
  --carta:hsl(249 55% 96%);
  --bianco:#ffffff;
  --viola:hsl(249 45% 47%);
  --viola-chiaro:hsl(249 60% 95%);
  --giallo:#fcda3f;
  --verde:#2e9e6b;
  --verde-bg:#e3f4ec;
  --rosso-bg:#fdeaea;
  --rosso:#c94f4f;
  --muto:#6b7488;
  --bordo:#e3e6ef;
  --raggio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Lexend',system-ui,sans-serif;color:var(--inchiostro);background:var(--bianco);line-height:1.6}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* --- l'evidenziatore: la firma ------------------------------------------- */
/* L'EVIDENZIATORE — una regola sola, ovunque: tratto giallo a TUTTA ALTEZZA dietro la
   parola, testo sempre inchiostro. Su qualunque fondo il testo marcato poggia per
   intero sul giallo: stessa geometria, stessi colori, nessuna variante per tema. */
.marca{position:relative;white-space:nowrap;z-index:0;isolation:isolate;color:var(--inchiostro)}
.marca::before{content:"";position:absolute;left:-0.15em;right:-0.15em;bottom:-0.1em;height:1.16em;
  background:var(--giallo);z-index:-1;transform:skewX(-8deg) rotate(-0.6deg);border-radius:4px}

a{color:var(--viola)}
.contenitore{max-width:1080px;margin:0 auto;padding:0 1.4rem}
.eyebrow{font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--viola);margin:0 0 0.6rem}
h1,h2,h3{line-height:1.15;margin:0}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800}
.sezione{padding:4.5rem 0}
.sezione.alterna{background:var(--carta);
  border-top:2px dashed hsl(249 40% 85%); border-bottom:2px dashed hsl(249 40% 85%)}

.bottone{display:inline-block;background:var(--viola);color:#fff;text-decoration:none;font-weight:600;
  padding:0.85rem 1.7rem;border-radius:12px;transition:transform .12s, box-shadow .12s}
.bottone:hover{transform:translateY(-2px);box-shadow:0 8px 22px hsl(249 45% 47% / .28)}
.bottone:focus-visible{outline:3px solid var(--giallo);outline-offset:2px}
.bottone.secondario{background:var(--bianco);color:var(--viola);border:2px solid var(--viola)}

/* --- testata ------------------------------------------------------------- */
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bordo);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 1.4rem;max-width:1080px;margin:0 auto}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:34px;width:auto;display:block}
.nav-voci{display:flex;gap:1.6rem;align-items:center}
.nav-voci a{color:var(--inchiostro);text-decoration:none;font-weight:500;font-size:0.95rem}
.nav-voci a:hover{color:var(--viola)}
.nav-voci .bottone{padding:0.55rem 1.1rem}
@media (max-width:680px){.nav-voci a:not(.bottone){display:none}}

/* --- eroe ---------------------------------------------------------------- */
.eroe{padding:4.5rem 0 3.5rem;
  background:
    radial-gradient(900px 420px at 85% -10%, hsl(249 60% 93%), transparent),
    radial-gradient(700px 380px at -10% 60%, hsl(249 70% 96%), transparent)}
.eroe-griglia{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
@media (max-width:880px){.eroe-griglia{grid-template-columns:1fr}}
.eroe h1{font-size:clamp(2.1rem,5vw,3.1rem);font-weight:800;letter-spacing:-0.01em}
.eroe .sotto{font-size:1.15rem;color:var(--muto);margin:1.2rem 0 1.8rem;max-width:32rem}
.eroe .azioni{display:flex;gap:0.9rem;flex-wrap:wrap}
.eroe .nota-azioni{margin-top:0.9rem;font-size:0.85rem;color:var(--muto)}

/* Il mock della matrice: il prodotto vero, ricostruito. È la cosa più
   caratteristica che abbiamo — un riepilogo che si corregge da solo. */
.mock{background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:0 18px 50px rgba(30,36,51,.12);overflow:hidden}
.mock-barra{display:flex;gap:6px;padding:0.6rem 0.9rem;border-bottom:1px solid var(--bordo);background:var(--carta)}
.mock-barra span{width:10px;height:10px;border-radius:50%;background:var(--bordo)}
.mock-scorri{overflow-x:auto}
.mock table{width:100%;border-collapse:collapse;font-size:0.82rem}
.mock th{text-align:left;color:var(--muto);font-weight:600;padding:0.55rem 0.7rem;border-bottom:1px solid var(--bordo);white-space:nowrap}
.mock td{padding:0.5rem 0.7rem;border-bottom:1px solid var(--bordo);white-space:nowrap}
.mock td.si{background:var(--verde-bg);color:var(--verde);text-align:center;font-weight:700}
.mock td.no{background:var(--rosso-bg);color:var(--rosso);text-align:center;font-weight:700}
.mock td.attesa{background:#fff7df;color:#9a7b13;text-align:center;font-weight:700}
.mock .voto{font-weight:700;color:var(--viola)}
.mock-dida{padding:0.7rem 0.9rem;font-size:0.8rem;color:var(--muto);background:var(--carta);border-top:1px solid var(--bordo)}

/* --- come funziona -------------------------------------------------------- */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem}
@media (max-width:780px){.passi{grid-template-columns:1fr}}
.passo{background:var(--bianco);border:2px dashed hsl(249 35% 82%);border-radius:var(--raggio);padding:1.6rem}
.passo .num{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  border-radius:50%;background:var(--viola-chiaro);color:var(--viola);font-weight:800;margin-bottom:0.9rem}
.passo h3{font-size:1.1rem;margin-bottom:0.5rem}
.passo p{margin:0;color:var(--muto);font-size:0.95rem}

/* --- caratteristiche ------------------------------------------------------ */
.caratteristiche{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 2.2rem;margin-top:2.2rem}
@media (max-width:780px){.caratteristiche{grid-template-columns:1fr}}
.car{display:flex;gap:0.9rem;align-items:flex-start}
.car .segno{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:6px;background:var(--verde-bg);
  color:var(--verde);display:flex;align-items:center;justify-content:center;font-weight:800;margin-top:0.15rem}
.car h3{font-size:1.02rem;margin-bottom:0.25rem}
.car p{margin:0;color:var(--muto);font-size:0.92rem}

/* --- prezzi --------------------------------------------------------------- */
.listino{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
@media (max-width:880px){.listino{grid-template-columns:1fr;max-width:26rem;margin-left:auto;margin-right:auto}}
.piano{background:var(--bianco);border:2px dashed hsl(249 35% 82%);border-radius:var(--raggio);padding:1.8rem;display:flex;flex-direction:column}
.piano.rilievo{border:2px solid var(--viola);position:relative}
.piano.rilievo .fascia{position:absolute;top:-0.85rem;left:50%;transform:translateX(-50%);
  background:var(--giallo);color:var(--inchiostro);font-size:0.72rem;font-weight:800;letter-spacing:0.06em;
  text-transform:uppercase;padding:0.28rem 0.8rem;border-radius:99px;white-space:nowrap}
.piano h3{font-size:1.25rem}
.piano .prezzo{font-size:2rem;font-weight:800;margin:0.7rem 0 0.2rem}
.piano .prezzo small{font-size:0.9rem;font-weight:500;color:var(--muto)}
.piano .per{color:var(--muto);font-size:0.9rem;margin:0 0 1.1rem}
.piano ul{list-style:none;margin:0 0 1.4rem;padding:0;font-size:0.93rem}
.piano li{padding:0.34rem 0 0.34rem 1.5rem;position:relative}
.piano li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:800}
.piano .bottone{margin-top:auto;text-align:center}
.nota-prezzi{text-align:center;color:var(--muto);font-size:0.85rem;margin-top:1.6rem}

/* --- scuola / GDPR --------------------------------------------------------- */
.scuola-griglia{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media (max-width:820px){.scuola-griglia{grid-template-columns:1fr}}
.scuola-punti{list-style:none;margin:1.4rem 0 0;padding:0}
.scuola-punti li{padding:0.5rem 0 0.5rem 1.9rem;position:relative}
.scuola-punti li::before{content:"✓";position:absolute;left:0;top:0.5rem;width:1.3rem;height:1.3rem;
  border-radius:50%;background:var(--viola);color:#fff;font-size:0.75rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.gdpr-card{background:var(--inchiostro);color:#fff;border-radius:var(--raggio);padding:2rem;
  border:2px dashed hsl(45 90% 60% / .55)}
.gdpr-card h3{color:var(--giallo);font-size:1.05rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1rem}
.gdpr-card p{margin:0 0 0.9rem;font-size:0.95rem;color:#cfd3e0}
.gdpr-card p:last-child{margin:0}

/* --- chiusura + piè -------------------------------------------------------- */
.chiusura{text-align:center}
.chiusura h2{margin-bottom:0.8rem}
.chiusura p{color:var(--muto);max-width:34rem;margin:0 auto 1.8rem}
footer{border-top:1px solid var(--bordo);padding:2.2rem 0;color:var(--muto);font-size:0.85rem}
.pie{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.pie a{color:var(--muto);text-decoration:none;margin-left:1.2rem}
.pie a:hover{color:var(--viola)}

/* --- pagine interne -------------------------------------------------------- */
.nav-voci a.attiva{color:var(--viola);font-weight:700}
.pagina-testa{padding:3.5rem 0 1rem}
.pagina-testa h1{font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:800}
.pagina-testa .sotto{color:var(--muto);font-size:1.1rem;max-width:36rem;margin-top:0.9rem}
.faq-blocco{max-width:46rem}
.faq-voce{border-bottom:1px solid var(--bordo);padding:1.3rem 0}
.faq-voce h3{font-size:1.05rem;margin-bottom:0.45rem}
.faq-voce p{margin:0;color:var(--muto);font-size:0.95rem}
.prosa{max-width:44rem;font-size:1.02rem}
.prosa p{margin:0 0 1.1rem}
.tabella-piani{width:100%;border-collapse:collapse;margin-top:2rem;font-size:0.93rem}
.tabella-piani th,.tabella-piani td{padding:0.7rem 0.8rem;border-bottom:1px solid var(--bordo);text-align:left}
.tabella-piani thead th{font-weight:700}
.tabella-piani thead th:not(:first-child){text-align:center}
.tabella-piani td:not(:first-child){text-align:center}
.tabella-piani .gruppo td{background:var(--carta);font-weight:700;font-size:0.8rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--viola)}
.tabella-piani .si{color:var(--verde);font-weight:800}
.tabella-piani .no{color:var(--bordo);font-weight:800}
.galleria{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2.4rem}
/* Quattro scatti come presentazione, non come elenco: due colonne dal desktop in su,
   così ognuno resta a misura di colpo d'occhio. */
@media(min-width:56rem){.galleria-2col{grid-template-columns:1fr 1fr;gap:1.8rem}}
.scatto{background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--raggio);
  overflow:hidden;box-shadow:0 12px 36px rgba(30,36,51,.08)}
.scatto img{width:100%;display:block}
.scatto figcaption{padding:0.9rem 1.2rem;font-size:0.9rem;color:var(--muto);border-top:1px solid var(--bordo)}


/* ============================================================================
   IL TEMA (ex «sito2», promosso): viola pieno dove prima era bianco, chiaro
   dove c'era l'accento. I riquadri restano bianchi: è lo sfondo a cambiare
   pelle, non il contenuto.
   ==========================================================================*/
:root{
  --viola-pieno:hsl(249 45% 42%);
  --viola-fondo:hsl(249 45% 36%);
}
body{background:var(--viola-pieno)}

.sezione:not(.alterna){background:transparent;color:#fff}
.sezione:not(.alterna) h2{color:#fff}
.sezione:not(.alterna) .eyebrow{color:var(--giallo)}
.sezione:not(.alterna) .car h3{color:#fff}
.sezione:not(.alterna) .car p{color:hsl(249 40% 88%)}
.sezione:not(.alterna) .car .segno{background:hsl(150 45% 88%)}
.scatto figcaption{color:var(--muto)}
.sezione.alterna{background:hsl(249 40% 97%);border-top:2px dashed hsl(249 40% 70% / .5);
  border-bottom:2px dashed hsl(249 40% 70% / .5)}

.eroe{background:
    radial-gradient(900px 420px at 85% -10%, hsl(249 55% 52%), transparent),
    var(--viola-fondo);color:#fff;padding-bottom:4rem}
.eroe h1{color:#fff}
.eroe .sotto{color:hsl(249 40% 88%)}
.eroe .nota-azioni{color:hsl(249 40% 82%)}

/* Il MOCK della matrice: è un foglio bianco, e il testo NON deve ereditare il
   bianco dei titoli intorno — era il difetto «Bianchi Sofia 9/10 invisibile». */
.mock{color:var(--inchiostro)}
.mock-dida{color:var(--muto)}

/* Azioni: giallo primario sul viola; secondario in bianco. */
.sezione:not(.alterna) .bottone,.eroe .bottone{background:var(--giallo);color:var(--inchiostro)}
.sezione:not(.alterna) .bottone:hover,.eroe .bottone:hover{box-shadow:0 8px 22px hsl(45 90% 50% / .35)}
.eroe .bottone.secondario,.sezione:not(.alterna) .bottone.secondario{
  background:transparent;color:#fff;border-color:#fff}
.eroe .bottone.secondario:hover,.sezione:not(.alterna) .bottone.secondario:hover{
  box-shadow:0 8px 22px rgba(255,255,255,.22)}

header{background:hsl(249 45% 40% / .92);border-bottom:1px solid hsl(249 40% 55%)}
.nav-voci a{color:#fff}
.nav-voci a:hover{color:var(--giallo)}
.nav-voci a.attiva{color:var(--giallo)}
footer{background:var(--viola-fondo);color:hsl(249 40% 85%);border-top:1px solid hsl(249 40% 55%)}
.pie a{color:hsl(249 40% 88%)}
.pie a:hover{color:var(--giallo)}

.passo,.piano{border-color:hsl(249 40% 75% / .6);color:var(--inchiostro)}
.mock{border-color:hsl(249 40% 70%)}


.eroe .eyebrow{color:var(--giallo)}

/* Pagine interne: la testata-pagina vive sul viola. */
.pagina-testa{color:#fff}
.pagina-testa h1{color:#fff}
.pagina-testa .sotto{color:hsl(249 40% 88%)}
.pagina-testa .eyebrow{color:var(--giallo)}
/* …e il corpo delle pagine interne resta su fondo chiaro, leggibile. */
.sezione .faq-blocco,.sezione .prosa,.sezione .tabella-piani{color:var(--inchiostro)}
.sezione:not(.alterna) .faq-voce h3{color:#fff}
.sezione:not(.alterna) .faq-voce p{color:hsl(249 40% 88%)}
.sezione:not(.alterna) .prosa{color:hsl(249 40% 92%)}
.sezione:not(.alterna) .prosa a{color:var(--giallo)}
/* …ma NON i link-bottone: là il giallo è già lo SFONDO, e il colore del testo deve
   restare inchiostro — senza questa riga la regola qui sopra vinceva per specificità
   e il pulsante veniva giallo su giallo. */
.sezione:not(.alterna) .prosa a.bottone{color:var(--inchiostro)}
.sezione:not(.alterna) .tabella-piani{color:#fff}
.sezione:not(.alterna) .tabella-piani th,.sezione:not(.alterna) .tabella-piani td{border-color:hsl(249 40% 55%)}
.sezione:not(.alterna) .tabella-piani .gruppo td{background:hsl(249 45% 38%);color:var(--giallo)}
.sezione:not(.alterna) .nota-prezzi{color:hsl(249 40% 85%)}
.sezione:not(.alterna) .scuola-punti li{color:hsl(249 40% 92%)}


/* Interruttore mensile/annuale: vive DENTRO la card Pro. */
.fatturazione-toggle{display:flex;justify-content:flex-start;gap:0;margin:0.8rem 0 0.6rem}
.fatt-btn{font:inherit;font-weight:600;font-size:0.8rem;padding:0.35rem 0.8rem;cursor:pointer;
  background:hsl(249 40% 94%);color:var(--inchiostro);border:2px dashed hsl(249 35% 78%)}
.fatt-btn:first-child{border-radius:10px 0 0 10px;border-right:0}
.fatt-btn:last-child{border-radius:0 10px 10px 0}
.fatt-btn.attivo{background:var(--viola);color:#fff;border-color:var(--viola);border-style:solid}
.fatt-sconto{background:var(--giallo);color:var(--inchiostro);font-size:0.68rem;font-weight:800;
  padding:0.1rem 0.4rem;border-radius:6px;margin-left:0.3rem;vertical-align:1px}

#prezzo-vista-annuale .prezzo,#prezzo-vista-mensile .prezzo{margin-top:0.2rem}

/* Fascia delle offerte di lancio nella card Pro: spenta finché non serve. */
.promo-fascia{background:var(--giallo);color:var(--inchiostro);font-weight:700;font-size:0.85rem;
  padding:0.4rem 0.7rem;border-radius:8px;margin:0.2rem 0 0.6rem}


/* La tabella dei confronti vive in un FOGLIO chiaro sul viola: si legge come su carta. */
.box-chiaro{background:hsl(249 30% 98%);border-radius:var(--raggio);padding:1.2rem 1.6rem 1.6rem;
  box-shadow:0 18px 50px rgba(20,24,38,.25)}
.sezione:not(.alterna) .box-chiaro{color:var(--inchiostro)}
.sezione:not(.alterna) .box-chiaro .tabella-piani{color:var(--inchiostro)}
.sezione:not(.alterna) .box-chiaro .tabella-piani th,
.sezione:not(.alterna) .box-chiaro .tabella-piani td{border-color:var(--bordo)}
.sezione:not(.alterna) .box-chiaro .tabella-piani .gruppo td{
  background:hsl(249 55% 95%);color:var(--viola)}

/* FAQ a fisarmonica: si vedono le DOMANDE, la risposta compare al clic. La freccina
   sta in fondo a destra e ruota all'apertura. Niente JavaScript: <details> nativo. */
details.faq-voce{border-bottom:2px dashed hsl(249 40% 60% / .5);padding:0}
details.faq-voce summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.2rem 0}
details.faq-voce summary::-webkit-details-marker{display:none}
details.faq-voce summary h3{margin:0;font-size:1.05rem;color:#fff}
details.faq-voce summary .freccia{flex:0 0 auto;color:var(--giallo);font-size:1rem;
  transition:transform .18s ease}
details.faq-voce[open] summary .freccia{transform:rotate(90deg)}
details.faq-voce p{margin:0 0 1.2rem;color:hsl(249 40% 88%);font-size:0.95rem}