/* ============================================================
   Aloft — legal pages (privacy / terms / eula)
   Shares tokens, fonts, header and footer with site.css.
   ============================================================ */

@import url("site.css");

main { padding: clamp(44px, 7vw, 84px) 0 clamp(30px, 5vw, 60px); }
.legal { max-width: 720px; margin: 0 auto; color: var(--sub); }

.legal h1 { font-size: clamp(48px, 7vw, 76px); color: var(--ink); }
.legal .effective { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sub); margin: 18px 0 36px; }

.legal h2 { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 36px); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ink); margin: 1.8em 0 0.3em; }

.legal p, .legal li { font-size: clamp(15.5px, 1.8vw, 17px); line-height: 1.7; }
.legal p { margin: 1em 0; }
.legal ul { margin: 1em 0; padding-left: 1.2em; }
.legal li { margin: 0.5em 0; }
.legal li::marker { color: var(--signal); }
.legal strong { color: var(--ink); font-weight: 600; }

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

footer { margin-top: clamp(40px, 7vw, 80px); }
.foot-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }