/* ═══════════════════════════════════════════════════════════════
   Sapunto — il tema di sapunto.com
   Dalla landing di Sapunto: il logotipo ufficiale, il blu #424c9b di «sa»
   e del punto, il verde acqua #00a19a di «punto», l'inchiostro #151a2d.
   Titoli in Bricolage Grotesque, testo in Instrument Sans, etichette in
   JetBrains Mono — dal sito, nessuna richiesta a terzi.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('/tema/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations'),url('/tema/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/tema/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations'),url('/tema/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/tema/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/tema/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --spt-blu:#424c9b; --spt-blu-scuro:#343c7c; --spt-blu-tenue:#e8e9f4;
  --spt-acqua:#00a19a; --spt-acqua-testo:#007a74;
  --spt-ink:#151a2d; --spt-ink2:#4a5170; --spt-muto:#5d6480; --spt-riga:#dde1ee; --spt-campo:#c9cee3;
  --spt-fondo:#f6f7fb; --spt-carta:#ffffff; --spt-notte:#151a2d; --spt-notte-testo:#b8bdd6;
  --spt-alta:#c4314b; --spt-alta-tenue:#fbe9ec; --spt-media:#a86400; --spt-media-tenue:#fdf1dc; --spt-verde:#1d7a52;
  --spt-titoli:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --spt-testo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spt-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --spt-wrap:1180px;
  /* le variabili del motore, perché pagine, negozio e moduli prendano gli stessi colori */
  --brand:#424c9b; --brand-ink:#343c7c; --go:#424c9b; --go-ink:#343c7c; --primary:#424c9b;
  --page:#f6f7fb; --surface:#ffffff; --card:#ffffff; --ink:#151a2d; --ink-2:#4a5170; --line:#dde1ee; --muted:#5d6480;
}

html{scroll-behavior:smooth}
body{font-family:var(--spt-testo);color:var(--spt-ink);background:var(--spt-fondo);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--spt-blu)}
a:hover{color:var(--spt-blu-scuro)}
h1,h2,h3,.article-title{font-family:var(--spt-titoli);letter-spacing:-.02em;color:var(--spt-ink)}
:focus-visible{outline:2px solid var(--spt-blu);outline-offset:2px}
.spt-wrap{max-width:var(--spt-wrap);margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.spt-mono{font-family:var(--spt-mono)}
@media (max-width:560px){.spt-wrap{padding-left:16px;padding-right:16px}}

/* ── il logotipo: le due tinte ufficiali, «sa» bianco sui fondi scuri ── */
.sp-logo{display:block;height:30px;width:auto}
.sp-lg-a{fill:#424c9b}.sp-lg-b{fill:#00a19a}
.spt-marchio{display:inline-flex;align-items:center}
.spt-marchio--footer .sp-logo{height:32px}
.spt-marchio--footer .sp-lg-a{fill:#ffffff}

/* ── i bottoni ── */
.spt-btn, .btn, button.btn, .btn-primary, .frm-invia button, .nl-form button{
  font:600 15px/1 var(--spt-testo);border:0;border-radius:10px;cursor:pointer;
  background:var(--spt-blu)!important;color:#fff!important;transition:background .15s,color .15s}
.spt-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;min-height:48px;text-decoration:none;box-sizing:border-box}
.spt-btn:hover, .btn:hover, button.btn:hover, .btn-primary:hover, .frm-invia button:hover{background:var(--spt-blu-scuro)!important;color:#fff!important}
.spt-btn--vuoto{background:transparent!important;color:var(--spt-ink)!important;border:1px solid var(--spt-campo)}
.spt-btn--vuoto:hover{background:var(--spt-blu-tenue)!important;color:var(--spt-ink)!important}
.spt-btn--chiaro{background:#fff!important;color:var(--spt-ink)!important}
.spt-btn--chiaro:hover{background:var(--spt-blu-tenue)!important;color:var(--spt-ink)!important}
.btn.sec, .btn-secondary{background:transparent!important;color:var(--spt-ink)!important;border:1px solid var(--spt-campo)}

/* ═════════ la testata del motore, vestita ═════════ */
.site-nav{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--spt-riga);box-shadow:none}
.site-nav .nav-inner{max-width:var(--spt-wrap);height:76px;padding:0 24px}
.site-nav .nav-logo{display:flex;align-items:center;text-decoration:none}
.site-nav .nav-links > li > a{color:var(--spt-ink);font:500 15px/1 var(--spt-testo);padding:10px 12px;border-radius:8px}
.site-nav .nav-links > li > a:hover, .site-nav .nav-links > li > a[aria-current]{color:var(--spt-blu);background:var(--spt-blu-tenue)}
.site-nav .sub-menu{border:1px solid var(--spt-riga);border-radius:12px;box-shadow:0 18px 40px -24px rgba(21,26,45,.35);padding:8px;background:#fff}
.site-nav .sub-menu a{color:var(--spt-ink);border-radius:8px}
.site-nav .sub-menu a:hover{background:var(--spt-blu-tenue);color:var(--spt-blu)}
.site-nav .head-cerca{display:none}
.site-nav .ico-btn{color:var(--spt-ink)}
.site-nav .nav-cta, .site-nav a.btn-nav-primary{background:var(--spt-blu);color:#fff;border-radius:10px;font:600 15px/1 var(--spt-testo);padding:14px 16px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
.site-nav .nav-cta:hover, .site-nav a.btn-nav-primary:hover{background:var(--spt-blu-scuro);color:#fff}
.nav-mobile-drawer{background:#fff;border-top:1px solid var(--spt-riga)}
.nav-mobile-drawer a{font-weight:500;color:var(--spt-ink);font-size:16px}
@media (max-width:900px){.site-nav .nav-inner{height:64px;padding:0 16px}.site-nav .sp-logo{height:26px}}
@media (max-width:480px){.site-nav .sp-logo{height:22px}.site-nav .nav-cta, .site-nav a.btn-nav-primary{padding:10px 12px;min-height:40px;font-size:14px}}
@media (max-width:360px){.site-nav .nav-cta, .site-nav a.btn-nav-primary{display:none}}
.article-meta-item{white-space:normal}

/* ═════════ la home ═════════ */
.spt-main{display:block}
.spt-occhiello{margin:0;font:500 13px/1.3 var(--spt-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--spt-blu)}
.spt-tit{margin:0;font:700 clamp(30px,3.6vw,40px)/1.1 var(--spt-titoli);letter-spacing:-.02em;text-wrap:balance}
.spt-sotto{margin:0;color:var(--spt-ink2);max-width:40em}
.spt-nota{margin:0;font-size:14.5px;color:var(--spt-muto)}
.spt-sez{padding-top:80px;padding-bottom:40px;display:grid;gap:32px}
.spt-sez--stretta{padding-top:56px;padding-bottom:80px}
.spt-sez-testa{display:grid;gap:10px;align-content:start}
.spt-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}

/* il titolo e il report d'esempio */
.spt-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.spt-hero-testo{display:flex;flex-direction:column;gap:22px}
.spt-hero-tit{margin:0;font:700 clamp(40px,5.6vw,64px)/1.02 var(--spt-titoli);letter-spacing:-.03em;text-wrap:balance}
.spt-hero-sotto{margin:0;font-size:19px;color:var(--spt-ink2);max-width:34em}
.spt-bottoni{display:flex;gap:12px;flex-wrap:wrap}

.spt-esempio{margin:0;background:#fff;border:1px solid var(--spt-riga);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 40px -24px rgba(21,26,45,.35)}
.spt-es-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.spt-es-testa > div:first-child{display:flex;flex-direction:column;gap:4px}
.spt-es-nome{font:600 18px/1.2 var(--spt-titoli)}
.spt-es-sotto{font-size:13px;color:var(--spt-muto)}
.spt-es-punti{text-align:right}
.spt-es-punti b{display:block;font:700 44px/1 var(--spt-titoli)}
.spt-es-punti span{font-size:12px;color:var(--spt-muto)}
.spt-basso{color:var(--spt-alta)}.spt-medio{color:var(--spt-media)}.spt-ok{color:var(--spt-verde)}
.spt-es-barre{display:flex;flex-direction:column;gap:10px}
.spt-es-barra{display:grid;grid-template-columns:130px minmax(0,1fr) 28px;gap:12px;align-items:center;font-size:14px}
.spt-es-barra .spt-mono{text-align:right}
.spt-es-traccia{height:8px;background:var(--spt-blu-tenue);border-radius:4px;overflow:hidden}
.spt-es-traccia span{display:block;height:8px;background:var(--spt-blu);border-radius:0 4px 4px 0}
.spt-es-anomalie{border-top:1px solid var(--spt-riga);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.spt-es-anomalie > div{display:flex;gap:10px;align-items:baseline;font-size:14px}
.spt-g{flex:0 0 auto;font:600 11px/1 var(--spt-testo);text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:999px}
.spt-g--alta{color:var(--spt-alta);background:var(--spt-alta-tenue)}
.spt-g--media, .spt-g--bassa{color:var(--spt-media);background:var(--spt-media-tenue)}
.spt-esempio figcaption{font-size:12px;color:var(--spt-muto)}
.spt-esempio figcaption a{font-weight:600;text-decoration:none;white-space:nowrap}

/* il problema, sul fondo scuro */
.spt-scuro{background:var(--spt-notte);color:#e8eaf6}
.spt-problema{padding-top:64px;padding-bottom:64px;display:grid;gap:18px}
.spt-problema h2{margin:0;font:700 clamp(28px,3.4vw,38px)/1.1 var(--spt-titoli);letter-spacing:-.02em;max-width:22em;text-wrap:balance;color:#fff}
.spt-problema p{margin:0;font-size:18px;color:var(--spt-notte-testo);max-width:40em}

/* i cinque controlli */
.spt-controlli{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.spt-controllo{background:#fff;border:1px solid var(--spt-riga);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.spt-controllo .spt-mono{font-size:12px;font-weight:500;color:var(--spt-muto)}
.spt-controllo h3{margin:0;font:600 20px/1.2 var(--spt-titoli)}
.spt-controllo p{margin:0;font-size:14.5px;color:var(--spt-ink2)}

/* come funziona */
.spt-passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.spt-passi li{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--spt-blu);padding-top:16px}
.spt-passi .spt-mono{font-size:14px;font-weight:500;color:var(--spt-blu)}
.spt-passi h3{margin:0;font:600 19px/1.25 var(--spt-titoli)}
.spt-passi p{margin:0;font-size:14.5px;color:var(--spt-ink2)}

/* per chi */
.spt-tenue{background:var(--spt-blu-tenue)}
.spt-tenue .spt-due{padding-top:72px;padding-bottom:72px}
.spt-tenue .spt-sotto{color:#3a4060}
.spt-perchi{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.spt-perchi li{background:#fff;border-radius:12px;padding:18px 20px;display:grid;gap:2px}
.spt-perchi span{color:var(--spt-ink2);font-size:15px}

/* i prezzi */
#prezzi{padding-bottom:80px}
.spt-piani{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spt-piano{background:#fff;border:1px solid var(--spt-riga);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.spt-piano-testa{display:flex;justify-content:space-between;align-items:center;gap:10px}
.spt-piano h3{margin:0;font:600 16px/1 var(--spt-testo);text-transform:uppercase;letter-spacing:.08em;color:var(--spt-muto)}
.spt-prezzo{font:700 48px/1 var(--spt-titoli);letter-spacing:-.02em}
.spt-prezzo span{font:500 16px/1 var(--spt-testo);letter-spacing:0;color:var(--spt-muto)}
.spt-piano-cat{margin:0;color:var(--spt-ink2);font-size:15px}
.spt-piano-cat small{font-size:13px;color:var(--spt-muto)}
.spt-piano ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;flex:1}
.spt-piano-btn{margin-top:6px;width:100%}
.spt-etichetta{font:500 12px/1 var(--spt-mono);background:var(--spt-blu);color:#fff;padding:6px 9px;border-radius:999px;white-space:nowrap}
.spt-piano--scuro{background:var(--spt-notte);border-color:var(--spt-notte);color:#e8eaf6}
.spt-piano--scuro h3, .spt-piano--scuro .spt-prezzo span, .spt-piano--scuro .spt-piano-cat, .spt-piano--scuro .spt-piano-cat small{color:var(--spt-notte-testo)}
.spt-piano--scuro .spt-prezzo{color:#fff}

/* la richiesta di demo */
.spt-demo{background:#fff;border-top:1px solid var(--spt-riga)}
.spt-demo .spt-due{padding-top:80px;padding-bottom:88px}
.spt-demo .spt-sez-testa{gap:16px}
.spt-demo-form .frm{margin:0;display:grid;gap:14px;background:var(--spt-fondo);border:1px solid var(--spt-riga);border-radius:16px;padding:28px}
.spt-demo-form .frm-ok{margin:0}

/* il Form, ovunque: campi come nella landing */
.frm label, .frm legend{font-size:14px;font-weight:600;margin:0 0 6px}
.frm input[type=text], .frm input[type=email], .frm input[type=tel], .frm input[type=number], .frm input[type=date], .frm input[type=password], .frm select, .frm textarea{
  font:15px/1.4 var(--spt-testo);color:var(--spt-ink);background:#fff;border:1px solid var(--spt-campo);border-radius:10px;padding:12px 14px;min-height:46px}
.frm .frm-scelta{font-size:13.5px;color:var(--spt-ink2);font-weight:400}
.frm .frm-scelta input{width:18px;height:18px;margin-top:2px}
.frm-invia{margin:0}
.frm-invia button{padding:15px 22px;min-height:48px;width:100%}

/* ═════════ il piè di pagina ═════════ */
.spt-footer{background:var(--spt-notte);color:var(--spt-notte-testo);font-size:14px}
.spt-footer a{color:var(--spt-notte-testo);text-decoration:none}
.spt-footer a:hover{color:#fff;text-decoration:underline}
.spt-footer-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-top:48px;padding-bottom:36px}
.spt-footer-marchio p{margin:14px 0 0;max-width:30em}
.spt-footer-logo{display:inline-block}
.spt-footer-di{color:#e8eaf6}
.spt-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spt-footer-widget{padding-bottom:24px}
.spt-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.spt-footer-bottom .spt-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:24px}
.spt-footer-bottom p{margin:0}
.spt-footer-bottom ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}

/* ═════════ pagine, legali, negozio ═════════ */
.article-hero{background:#fff;border-bottom:1px solid var(--spt-riga)}
.article-title{font-weight:700;letter-spacing:-.025em}
.article-body{font-size:17px;line-height:1.65}
.article-body h2{font:700 28px/1.2 var(--spt-titoli);letter-spacing:-.02em}
.article-body h3{font:600 21px/1.25 var(--spt-titoli)}
.article-breadcrumb a{color:var(--spt-muto)}

/* ═════════ telefono e tablet ═════════ */
@media (max-width:980px){
  .spt-hero, .spt-due{grid-template-columns:minmax(0,1fr)}
  .spt-hero{gap:40px;padding-top:48px;padding-bottom:56px}
  .spt-controlli{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spt-passi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spt-piani{grid-template-columns:minmax(0,1fr)}
  .spt-footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spt-footer-marchio{grid-column:1/-1}
}
@media (max-width:560px){
  .spt-controlli, .spt-passi{grid-template-columns:minmax(0,1fr)}
  .spt-hero-sotto{font-size:17px}
  .spt-es-barra{grid-template-columns:110px minmax(0,1fr) 24px;gap:10px;font-size:13px}
  .spt-es-punti b{font-size:36px}
  .spt-esempio{padding:18px}
  .spt-demo-form .frm{padding:20px}
  .spt-sez{padding-top:56px}
  .spt-bottoni .spt-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}