/* ============================================================
   PEOPLEIZE · stile condiviso
   Stessi caratteri e stessi colori della dashboard: chi passa dal
   sito al proprio spazio deve sentirsi nello stesso posto.
   ============================================================ */

:root{
  --brand:#9463F5; --brand-deep:#5B32C4; --brand-soft:#F0E9FE;
  --ink:#2C2C34; --muted:#6E6B78;
  --cream:#FBF9F4; --paper:#FFFFFF;
  --line:#E8E3D9;
  --scuro:#0E0B1C; --scuro-2:#141026;
  --teal:#4FE3C1;
  --display:'Fraunces', Georgia, serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15; letter-spacing:-.02em}
a{color:var(--brand-deep)}

/* Il salto al contenuto: invisibile finche' non si arriva con la
   tastiera. Serve a chi naviga senza mouse. */
.salta{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  font-weight:600; text-decoration:none;
}
.salta:focus{left:0}

/* ===== TESTATA ===== */
.testata{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:22px;
  padding:14px 26px;
  background:rgba(251,249,244,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.marchio{display:flex; align-items:center; flex:none}
.marchio img{height:26px; width:auto; display:block}
.menu{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap}
.menu a{
  font-size:14.5px; font-weight:500; color:var(--muted); text-decoration:none;
  padding:8px 13px; border-radius:10px; transition:color .15s, background .15s;
}
.menu a:hover{color:var(--ink); background:var(--brand-soft)}
.menu a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.menu .menu-cta{
  background:var(--brand); color:#fff; font-weight:600;
  padding:9px 18px; border-radius:11px;
}
.menu .menu-cta:hover{background:var(--brand-deep); color:#fff}

@media(max-width:720px){
  .testata{flex-wrap:wrap; gap:10px; padding:12px 18px}
  .menu{width:100%; margin-left:0; gap:2px}
  .menu a{padding:7px 10px; font-size:13.5px}
}

/* ===== PAGINE DI TESTO (legali, articoli) ===== */
.documento{
  max-width:74ch; margin:0 auto; padding:56px 26px 80px;
}
.documento h1{font-size:clamp(30px,4.5vw,42px); margin-bottom:6px}
.documento .doc-data{color:var(--muted); font-size:14px; margin-bottom:38px}
.documento h2{
  font-size:22px; margin:40px 0 12px;
  padding-top:22px; border-top:1px solid var(--line);
}
.documento h3{font-size:17.5px; margin:26px 0 8px}
.documento p{margin-bottom:15px}
.documento ul,.documento ol{margin:0 0 18px 22px}
.documento li{margin-bottom:8px}
.documento table{
  width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:14.5px;
}
.documento th,.documento td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;
}
.documento th{font-weight:600; background:var(--brand-soft)}
.documento em{color:var(--muted)}

/* ===== PIÈ DI PAGINA ===== */
.pie{
  background:var(--scuro); color:#EFEBFB;
  padding:56px 26px 30px; margin-top:80px;
}
.pie-griglia{
  max-width:1060px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:38px;
}
.pie-chi img{height:24px; width:auto; margin-bottom:14px; display:block}
.pie-chi p{font-size:14px; color:#A49CC0; line-height:1.55; max-width:40ch}
.pie-soc{margin-top:14px; display:flex; gap:16px}
.pie h2{
  font-family:var(--body); font-size:13px; font-weight:600;
  color:#fff; margin-bottom:12px;
}
.pie a{display:block; color:#A49CC0; text-decoration:none; font-size:14px; padding:4px 0}
.pie a:hover{color:var(--teal)}
.pie-soc a{display:inline}
.pie-legale{
  max-width:1060px; margin:40px auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:#726A90; line-height:1.7;
}
.pie-legale a{display:inline; color:#726A90}

@media(max-width:820px){
  .pie-griglia{grid-template-columns:1fr 1fr; gap:30px}
  .pie-chi{grid-column:1/-1}
}
@media(max-width:480px){
  .pie-griglia{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}