/* Pieran Lab — pagine legali e di supporto (privacy, support, security).
   Fonte UNICA per le 4 pagine: prima viveva duplicata in un <style> inline dentro
   ognuna, e quattro copie divergono sempre (una si aggiorna, tre no).
   I token qui sotto sono gli STESSI di /assets/site.css: se cambia la palette del
   sito, cambia in due file, non in cinque. */

:root {
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --page-bg: #04060e;
  --page-gradient:
    radial-gradient(78% 58% at 10% -14%, rgba(63,130,255,0.16) 0%, transparent 55%),
    radial-gradient(92% 72% at 60% 124%, rgba(109,92,255,0.13) 0%, transparent 55%);
  --accent: #3f82ff; --accent-2: #22d3ff; --accent-strong: #7aa6ff; --accent-hover: #5c93ff;
  --accent-bg: rgba(63,130,255,0.14);
  --glass-bg: rgba(16,22,42,0.58); --glass-blur: blur(26px) saturate(1.5);
  --glass-border: rgba(255,255,255,0.12); --glass-highlight: rgba(255,255,255,0.16);
  --glass-shadow: 0 18px 44px rgba(0,0,0,0.45);
  --surface-sunk: rgba(4,8,20,0.5); --stroke: rgba(255,255,255,0.10); --divider: rgba(255,255,255,0.08);
  --text: #eef2ff; --muted: #9fb0d0; --subtle: #66759c;
  --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--text); line-height: 1.65; letter-spacing: -0.01em;
  background: var(--page-bg); background-image: var(--page-gradient); background-attachment: fixed; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); }
.brand-gradient { background: linear-gradient(120deg,#bcd3ff,var(--accent) 45%,var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 6px 18px rgba(63,130,255,.45), inset 0 1px 0 rgba(255,255,255,.25); position: relative; }
.logo-mark::after { content:""; position:absolute; inset:7px; border-radius:4px; border:2px solid rgba(255,255,255,.9); border-right-color:transparent; border-bottom-color:transparent; }
.nav { position: sticky; top: 0; z-index: 100; background: rgba(4,6,14,.72); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--divider); }
.nav-inner { max-width: 900px; margin: 0 auto; padding: 0 var(--space-5); height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-inner a.back { color: var(--muted); font-size: 0.9375rem; font-weight: 500; }
.nav-inner a.back:hover { color: var(--text); }
.wrap { max-width: 820px; margin: 0 auto; padding: var(--space-16) var(--space-5) var(--space-16); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-bg); border: 1px solid var(--glass-border); }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin: var(--space-5) 0 var(--space-3); }
.updated { color: var(--subtle); font-size: 0.875rem; margin: 0 0 var(--space-10); }
.card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); padding: var(--space-8); }
h2 { font-size: 1.3rem; margin: var(--space-10) 0 var(--space-3); }
h2:first-of-type { margin-top: 0; }
p, li { color: var(--muted); }
strong { color: var(--text); font-weight: 600; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
.divider { height: 1px; background: var(--divider); border: 0; margin: var(--space-8) 0; }
.data-box { background: var(--surface-sunk); border: 1px solid var(--stroke); border-radius: var(--r-lg); padding: var(--space-5) var(--space-6); margin-top: var(--space-4); }
.data-box p { margin: 4px 0; font-size: 0.9375rem; }
.tbd { color: #ffd60a; border-bottom: 1px dashed rgba(255,214,10,.6); }
footer { border-top: 1px solid var(--divider); padding: var(--space-10) 0; text-align: center; }
footer .lines { color: var(--subtle); font-size: 0.8125rem; line-height: 1.8; }
footer .lines strong { color: var(--muted); }
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em; color: var(--accent-strong);
  background: var(--surface-sunk); border: 1px solid var(--stroke);
  border-radius: 6px; padding: 1px 6px;
  overflow-wrap: anywhere;
}