/* ==========================================================================
   VPNAK — legal-privacy.css
   Page-scoped layout for the privacy policy document.
   Colours, radii and fonts all come from :root tokens in base.css.
   ========================================================================== */

.legal-doc{
  max-width:820px;
  margin-inline:auto;
  min-width:0;
}

.legal-doc h1{
  font-size:clamp(30px,4vw,48px);
  margin-bottom:14px;
}

.legal-updated{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.02em;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  margin-bottom:22px;
}

.legal-lead{
  font-size:15px;
  color:var(--muted);
  margin-bottom:8px;
}

.legal-doc h2{
  font-size:clamp(20px,2.3vw,26px);
  margin-top:38px;
  margin-bottom:12px;
  padding-left:14px;
  border-left:3px solid var(--accent);
  line-height:1.35;
}

.legal-doc p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--text);
}

.legal-doc p+p{
  margin-top:12px;
}

.legal-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:14px 0 4px;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 14px 34px -26px var(--shadow-tint),inset 0 1px 0 var(--highlight);
}

.legal-list li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  min-width:0;
}

.legal-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.legal-list li b{
  color:var(--text);
  font-weight:700;
}

.legal-doc .callout{
  margin:16px 0 4px;
}

.legal-doc .callout p{
  font-size:14px;
  color:var(--text);
}

.legal-note{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.8;
}

.legal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

@media (max-width:640px){
  .legal-doc h2{
    padding-left:11px;
    margin-top:30px;
  }
  .legal-list{
    padding:14px 14px;
  }
  .legal-actions .btn{
    width:100%;
  }
}