/* ===========================================================
   PictoNova — Legal pages (Privacy, Cookie Policy, T&C)
   Stile coerente con il brand: dark, mono/sans, accent verde.
   =========================================================== */

:root{
  --bg:#060608;
  --surface:#0d0d12;
  --surface-2:#11111a;
  --border:#1a1a28;
  --border-strong:#23233a;
  --accent:#00f5a0;
  --accent2:#00c8ff;
  --accent3:#7b61ff;
  --text:#eeeef5;
  --text-dim:#9797b8;
  --muted:#5a5a7a;
  --mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Syne',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:880px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Griglia decorativa sullo sfondo */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(0,245,160,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,160,.025) 1px, transparent 1px);
  background-size:72px 72px;
  pointer-events:none;z-index:0;
}

/* Nav minima */
.legal-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,8,.88);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.legal-nav .logo{
  font-size:1.2rem;font-weight:800;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.legal-nav .logo span{color:var(--accent)}
.legal-nav .logo-mark{
  width:28px;height:28px;border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.legal-nav .logo-mark::before{
  content:'';width:7px;height:7px;background:var(--accent);border-radius:50%;
}
.legal-nav .back{
  font-family:var(--mono);font-size:.72rem;
  color:var(--text-dim);text-decoration:none;
  letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--border-strong);
  transition:color .2s,border-color .2s,background .2s;
}
.legal-nav .back:hover{color:var(--accent);border-color:var(--accent)}

/* Hero */
.legal-hero{
  position:relative;z-index:1;
  padding:80px 32px 40px;
  max-width:var(--maxw);margin:0 auto;
  border-bottom:1px solid var(--border);
}
.legal-eyebrow{
  font-family:var(--mono);font-size:.72rem;
  color:var(--accent);letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.legal-eyebrow::before{
  content:'';width:24px;height:1px;background:var(--accent);
}
.legal-title{
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  margin-bottom:14px;
}
.legal-meta{
  font-family:var(--mono);font-size:.8rem;
  color:var(--text-dim);letter-spacing:.06em;
}

/* Main content */
.legal-main{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:48px 32px 80px;
  font-size:1.02rem;
}
.legal-main h2{
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  margin:48px 0 16px;padding-top:8px;
  display:flex;align-items:baseline;gap:14px;
}
.legal-main h2 .num{
  font-family:var(--mono);font-size:.9rem;
  color:var(--accent);letter-spacing:.1em;
  border:1px solid var(--accent);
  padding:4px 10px;border-radius:2px;flex:none;
}
.legal-main h3{
  font-size:1.1rem;font-weight:700;margin:28px 0 10px;
  color:var(--text);
}
.legal-main p{
  margin:12px 0;color:var(--text-dim);
}
.legal-main p strong{color:var(--text)}
.legal-main ul,.legal-main ol{
  margin:12px 0 12px 24px;color:var(--text-dim);
}
.legal-main li{margin:6px 0}
.legal-main a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent)}
.legal-main a:hover{opacity:.85}
.legal-main code{
  font-family:var(--mono);font-size:.88em;
  background:var(--surface-2);padding:2px 6px;border-radius:3px;
  color:var(--accent2);
}

/* Callout box */
.callout{
  margin:24px 0;padding:18px 22px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-left:3px solid var(--accent);
  border-radius:2px;
}
.callout.warn{border-left-color:#ffb040}
.callout p{margin:6px 0;color:var(--text)}

/* Table */
.legal-table{
  width:100%;border-collapse:collapse;
  margin:18px 0;font-size:.94rem;
  background:var(--surface);border:1px solid var(--border-strong);
}
.legal-table th,.legal-table td{
  padding:12px 14px;text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top;
}
.legal-table th{
  background:var(--surface-2);
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:500;
}
.legal-table tr:last-child td{border-bottom:none}
.legal-table td strong{color:var(--text)}

/* Footer */
.legal-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border);
  padding:32px;text-align:center;
  font-family:var(--mono);font-size:.72rem;
  color:var(--muted);letter-spacing:.12em;text-transform:uppercase;
}
.legal-footer a{color:var(--text-dim);text-decoration:none;margin:0 10px}
.legal-footer a:hover{color:var(--accent)}

/* Small screens */
@media(max-width:640px){
  .legal-nav{padding:14px 20px}
  .legal-hero{padding:60px 20px 32px}
  .legal-main{padding:36px 20px 64px;font-size:.98rem}
  .legal-main h2{font-size:1.25rem;gap:10px}
  .legal-main h2 .num{font-size:.78rem;padding:3px 8px}
  .legal-table{font-size:.88rem}
  .legal-table th,.legal-table td{padding:10px 10px}
}