/* Legal pages. Long text, read once, usually on a phone, usually by somebody
   who is annoyed. Wider measure than the app screens, generous line height,
   and headings that let you find the one clause you came for. */

.legal{max-width:660px;padding-bottom:72px}
.legal h1{font-size:32px;margin-bottom:6px}
.legal .updated{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px}
.legal .lead{font-size:16px;line-height:1.6;color:var(--ink);border-left:2px solid var(--accent);padding-left:16px;margin-bottom:8px}
.legal h2{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:0;text-transform:none;margin:34px 0 10px}
.legal p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 13px}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal ul{margin:0 0 15px;padding-left:20px}
.legal li{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:9px}
.legal a{text-decoration:underline;text-underline-offset:2px}

/* The clauses that cost money if they go unread. */
.legal .callout{border:1px solid var(--accent);border-radius:var(--r);background:rgba(255,77,109,.05);padding:15px 17px;margin:16px 0 18px;color:var(--muted)}

/* The designated agent. A rights holder should be able to find this without
   reading the whole page, so it is given a box of its own. */
.legal .agent{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:16px 18px;margin:18px 0}
.legal .agent > b{display:block;color:var(--ink);font-size:14px;margin-bottom:8px}
.legal .agent p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.legal .agent .regno{margin:0;font-size:13px;color:var(--muted-2)}
.legal .agent .regno b{color:var(--accent)}
.legal .fineprint{font-size:13px;color:var(--muted-2);margin-top:24px}