/* Pagine pubbliche (giro 21, parte 5): presentazione, privacy, termini, sicurezza.
   Stessi token e font dell'app (design-system-2.0.css), nessuna risorsa esterna. */
@import url('../css/design-system-2.0.css');

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--color-canvas); color:var(--color-ink); font-family:var(--font-ui); font-size:var(--fs-16); line-height:1.6; }
a{ color:var(--color-forest); text-underline-offset:3px; }
a:focus-visible, .s-btn:focus-visible{ outline:2px solid var(--color-forest); outline-offset:3px; border-radius:6px; }
.s-skip{ position:absolute; left:-999px; top:8px; background:var(--color-surface); padding:8px 12px; z-index:10; }
.s-skip:focus{ left:8px; }

.s-wrap{ width:100%; max-width:1040px; margin:0 auto; padding:0 20px; }
.s-narrow{ max-width:720px; }

.s-head{ border-bottom:1px solid var(--color-border); }
.s-head .s-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.s-brand{ display:inline-block; padding:10px 0; font-weight:700; letter-spacing:-.01em; color:var(--color-ink); text-decoration:none; font-size:var(--fs-17); }
.s-nav{ display:flex; gap:4px 18px; flex-wrap:wrap; font-size:var(--fs-14); }
.s-nav a{ display:inline-flex; min-height:44px; align-items:center; color:var(--color-ink-secondary); text-decoration:none; padding:0 4px; }
.s-nav a:hover, .s-nav a[aria-current="page"]{ color:var(--color-forest); }

.s-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:var(--radius-md, 10px); background:var(--color-forest); color:#fff; font:inherit; font-weight:600; text-decoration:none; border:1px solid var(--color-forest); }
:root[data-theme="dark"] .s-btn:not(.s-btn-ghost){ color:#012105; }
.s-btn:hover{ background:var(--color-forest-strong); }
.s-btn-ghost{ background:transparent; color:var(--color-forest); border-color:var(--color-border-strong); }
.s-btn-ghost:hover{ background:var(--color-forest-soft); }
:root[data-theme="dark"] .s-btn-ghost{ color:var(--color-forest); }

.s-hero{ padding:56px 0 40px; display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
.s-eyebrow{ font-size:var(--fs-13); letter-spacing:.08em; text-transform:uppercase; color:var(--color-brass-text); font-weight:600; margin:0 0 12px; }
h1{ font-size:clamp(2rem,5vw,3.25rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; font-weight:700; }
h2{ font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.2; letter-spacing:-.01em; margin:0 0 12px; font-weight:700; }
h3{ font-size:var(--fs-17); margin:24px 0 6px; }
.s-lead{ font-size:var(--fs-18); color:var(--color-ink-secondary); margin:0 0 24px; max-width:34em; }
.s-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.s-note{ font-size:var(--fs-13); color:var(--color-ink-muted); margin-top:14px; }

.s-shot{ display:block; width:100%; max-width:300px; height:auto; border:1px solid var(--color-border-strong); border-radius:28px; background:var(--color-surface); }
.s-shot-dark{ display:none; }
:root[data-theme="dark"] .s-shot-light{ display:none; }
:root[data-theme="dark"] .s-shot-dark{ display:block; }
.s-hero .s-shot{ margin:0 auto; }

.s-section{ padding:48px 0; border-top:1px solid var(--color-border); }
.s-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
.s-fig{ margin:0; text-align:center; }
.s-fig figcaption{ margin-top:12px; font-size:var(--fs-14); color:var(--color-ink-secondary); max-width:300px; margin-left:auto; margin-right:auto; }
.s-fig figcaption b{ display:block; color:var(--color-ink); font-size:var(--fs-16); }
.s-list{ margin:0; padding:0; list-style:none; display:grid; gap:18px; }
.s-list li{ padding-left:18px; border-left:2px solid var(--color-brass); }
.s-list b{ display:block; }
.s-list span{ color:var(--color-ink-secondary); }
.s-two{ display:grid; gap:32px; grid-template-columns:1fr; }

.s-draft{ background:var(--color-brass-tint); border:1px solid var(--color-brass); border-radius:10px; padding:12px 16px; font-size:var(--fs-14); margin:0 0 28px; }
.s-ph{ background:var(--color-brass-tint); border-radius:4px; padding:0 4px; font-weight:600; }

.s-doc{ padding:40px 0 64px; }
.s-doc h1{ font-size:clamp(1.8rem,4vw,2.4rem); }
.s-doc p, .s-doc li{ color:var(--color-ink-secondary); }
.s-doc ul, .s-doc ol{ padding-left:22px; }
.s-doc li{ margin:6px 0; }
.s-doc strong{ color:var(--color-ink); }
.s-doc table{ border-collapse:collapse; width:100%; font-size:var(--fs-14); margin:12px 0; }
.s-doc th, .s-doc td{ text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--color-border); }
.s-doc th{ color:var(--color-ink); }
.s-table-scroll{ overflow-x:auto; }
.s-updated{ font-size:var(--fs-13); color:var(--color-ink-muted); }

.s-foot{ border-top:1px solid var(--color-border); padding:28px 0 40px; font-size:var(--fs-14); color:var(--color-ink-muted); }
.s-foot .s-wrap{ display:flex; gap:12px 24px; flex-wrap:wrap; justify-content:space-between; }
.s-foot nav{ display:flex; gap:4px 18px; flex-wrap:wrap; }
.s-foot a{ display:inline-flex; align-items:center; min-height:44px; color:var(--color-ink-secondary); }

@media (min-width:820px){
  .s-hero{ grid-template-columns:1.15fr .85fr; padding:88px 0 64px; }
  .s-grid{ grid-template-columns:repeat(4,1fr); gap:24px; }
  .s-two{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:no-preference){
  .s-btn{ transition:background-color .15s ease, border-color .15s ease; }
}