:root{
  /* Light theme – blue/azure primary */
  --bg:#f5f8ff; --card:#ffffff; --muted:#51607a; --text:#0b1020; --accent:#3eb7ff; --accent-2:#1e7cf2;
  --ok:#059669; --warn:#d97706; --err:#dc2626;
  --line:#d7e2fb; --line-strong:#c4d4f7; --shadow:0 6px 28px rgba(12,50,120,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(120,173,255,.25) 0%, rgba(120,173,255,0) 70%),
    radial-gradient(1000px 700px at 110% 10%, rgba(62,183,255,.25) 0%, rgba(62,183,255,0) 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.logo{font-weight:700;letter-spacing:.5px;color:var(--text)}
.pill{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:14px;background:#f0f6ff}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:48px 0}
.card{background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.92));
      border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 26px}
.badge{font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#0b3d91;background:#eaf2ff}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#ffffff}
.btn-ghost{background:#ffffff;border-color:var(--line);color:var(--text)}
.hero-visual{padding:22px}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px}
.progress .item{background:#ffffff;border:1px dashed var(--line-strong);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.progress .value{font-size:18px;font-weight:700}

.section{padding:56px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{padding:22px}
.tile h3{margin:0 0 8px}
.muted{color:var(--muted)}

.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{padding:18px;text-align:center;background:#ffffff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.kpi .n{font-size:34px;font-weight:800;color:#0b3d91}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.quote{font-size:18px;color:#0b3d91}
.quote::before{content:"“";opacity:.5}
.quote::after{content:"”";opacity:.5}

.faq details{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600;color:var(--text)}
.faq details+details{margin-top:12px}

form{display:grid;gap:12px}
input,select,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#ffffff;color:var(--text);box-shadow:var(--shadow)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(30,124,242,.25);border-color:#9ec5ff}
label{font-size:14px;color:var(--muted)}
.consent{display:flex;gap:10px;align-items:flex-start}
.consent input{width:auto;margin-top:4px}
.form-note{font-size:12px;color:var(--muted)}

.footer{padding:36px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#ffffff}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}

/* Privacy page helpers */
h1,h2,h3{color:#0b3d91}
header p, p, li, small{color:var(--muted)}
code.placeholder{background:#f1f6ff;border:1px dashed var(--line-strong);border-radius:6px;padding:.1rem .35rem;color:#0b3d91}
.box{ /* light card */
  background:#ffffff;
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:18px
}
details{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
details+details{margin-top:12px}
details>summary{cursor:pointer;font-weight:600;color:var(--text)}



/* --- Mobile polish & overflow fixes --- */
html, body { overflow-x: hidden; }

/* Media elements never overflow */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Container padding più stretto su mobile */
@media (max-width: 640px) {
  .container { padding: 16px; }
}

/* Navbar: evita overflow quando logo + pill non ci stanno su una riga */
.nav { flex-wrap: wrap; gap: 10px; }
.nav .pill { margin-left: auto; } /* spinge la pill a destra se c’è spazio */

/* Titoli fluidi */
.hero h1 { font-size: clamp(26px, 6vw, 44px); }

/* Badge / chip spezzano correttamente e non “spingono” la pagina a destra */
.badge, .pill, .chip { overflow-wrap: anywhere; max-width: 100%; }

/* Call-to-action: pulsanti a tutta larghezza su schermi piccoli */
@media (max-width: 640px) {
  .cta { gap: 10px; }
  .cta .btn { width: 100%; justify-content: center; }
}

/* Card/hero: padding più compatto su mobile */
@media (max-width: 640px) {
  .hero-visual { padding: 14px; }
  .tile { padding: 16px; }
}

/* Griglie: progress/kpi/faq più dense e senza scroll orizzontale */
@media (max-width: 640px) {
  .progress { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
  .numbers { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .progress { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr; }
}

/* Colonne split: già 1fr sotto 980px, riduciamo il gap su telefoni piccoli */
@media (max-width: 640px) {
  .split { gap: 14px; }
}

/* Moduli: campi e select non devono strabordare */
form { min-width: 0; }
input, select, textarea { min-width: 0; width: 100%; }

/* Iframe (Tally/video) dentro card: niente overflow */
.card iframe { width: 100% !important; border: 0; display: block; }


/* === Tally CTA – coerente con .btn/.btn-primary === */
button[data-tally-open]{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px;
  font: inherit; font-weight:700; letter-spacing:.2px;
  color:#ffffff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:1px solid transparent;
  border-radius:12px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
  will-change:transform;
}

/* Hover/active */
button[data-tally-open]:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(30,124,242,.25);
}
button[data-tally-open]:active{
  transform:translateY(0);
  filter:brightness(.98);
}

/* Focus accessibile */
button[data-tally-open]:focus-visible{
  outline:3px solid rgba(30,124,242,.35);
  outline-offset:2px;
}

/* Stato disabilitato / busy */
button[data-tally-open][disabled],
button[data-tally-open][aria-busy="true"]{
  opacity:.7; cursor:not-allowed; transform:none; filter:grayscale(.1);
}

/* Mobile: CTA a tutta larghezza */
@media (max-width:640px){
  button[data-tally-open]{ width:100%; }
}

/* Variante ghost, se ti serve */
button[data-tally-open].is-ghost{
  background:#ffffff; color:var(--text);
  border-color:var(--line);
}
button[data-tally-open].is-ghost:hover{
  box-shadow:0 10px 30px rgba(12,50,120,.12);
}