/* =========================================================
   AnvilWired - legal pages (privacy / terms / cookies)
   Reuses tokens + header/footer from styles.css. This file
   only styles the legal prose. Dark "forge" theme.
   ========================================================= */

.legal-hero {
  position: relative; padding: 64px 0 40px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(600px circle at 80% 0%, rgba(245,158,11,.14), transparent 60%),
    var(--bg);
}
.legal-hero .kicker { margin-bottom: 12px; }
.legal-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.legal-updated { color: var(--text-soft); margin-top: 14px; font-size: .95rem; }

.legal-content { max-width: 800px; margin: 0 auto; padding: 46px 24px 84px; }

.legal-note {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px; color: var(--text-soft);
  font-size: .92rem; margin-bottom: 30px;
}
.legal-note strong { color: var(--text); }

.legal-content h2 {
  color: var(--text); font-size: 1.42rem; margin: 40px 0 12px;
  padding-top: 10px;
}
.legal-content h2:first-of-type { margin-top: 8px; }
.legal-content h3 { color: var(--text); font-size: 1.08rem; margin: 26px 0 8px; }
.legal-content p { color: var(--text-soft); margin-bottom: 14px; }
.legal-content a { color: var(--accent); }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--text); }

.legal-content ul { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; }
.legal-content ul li {
  position: relative; padding-left: 24px; color: var(--text-soft);
}
.legal-content ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.legal-content ul li strong { color: var(--text); }

.legal-content .placeholder { color: var(--accent-press); }

.legal-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-soft); font-weight: 600; margin-bottom: 8px;
}
.legal-back:hover { color: var(--accent); }