/* ============================================================
   Peaks — legal pages (privacy / terms / eula)
   Shares tokens, fonts, header and footer with site.css. The text sits on a
   card like a topic page in the app.
   ============================================================ */

@import url("site.css");

main { padding: clamp(36px, 6vw, 72px) 0 clamp(30px, 5vw, 60px); }
.legal {
  max-width: 780px; margin: 0 auto; color: var(--text2);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-panel);
  padding: clamp(28px, 6vw, 56px) clamp(22px, 6vw, 56px) clamp(32px, 6vw, 64px);
}

.legal .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.legal .meta li { font-size: 12.5px; font-weight: 500; line-height: 1; padding: 6px 11px; border-radius: 100px; background: var(--chip); color: var(--text2); }
.legal .meta li:first-child { background: var(--accent-soft); color: var(--accent-ink); }

.legal h1 { font-size: clamp(38px, 6vw, 56px); color: var(--text); letter-spacing: -0.03em; }
.legal .summary { font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: var(--text); margin: 18px 0 8px; }

.legal h2 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.6vw, 24px); letter-spacing: -0.02em; line-height: 1.25;
  color: var(--text); margin: 2em 0 0.2em; }

.legal p, .legal li { font-size: 16.5px; line-height: 1.7; }
.legal p { margin: 0.8em 0; }
.legal ul { margin: 0.8em 0; padding-left: 1.2em; }
.legal li { margin: 0.45em 0; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--text); font-weight: 600; }

.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color .2s; }
.legal a:hover { text-decoration-color: var(--accent); }

footer { margin-top: clamp(30px, 5vw, 60px); }