/* Legal pages (/privacy, /terms, /dpa): the site's nav and footer around one document. A contents list on the left at
   desktop (sticky under the nav), the document at a 720px reading measure; Sora headings, Inter 16/26 body. */
#legal { padding: 120px 0 96px; }
#legal .lg-wrap { display: grid; grid-template-columns: 240px minmax(0, 720px); column-gap: 96px; justify-content: center; align-items: start; }
#legal .lg-toc { position: sticky; top: calc(var(--nav-h) + 32px); padding-top: 6px; }
#legal .lg-toc-h { font: 500 var(--t-12)/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); margin-bottom: 16px; }
#legal .lg-toc ol { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--rule); padding-left: 16px; }
#legal .lg-toc a { font: 400 var(--t-14)/20px var(--f-body); color: var(--body); transition: color var(--fade); }
#legal .lg-toc a:hover, #legal .lg-toc a.is-on { color: var(--ink); }
#legal .lg-h1 { margin-top: 24px; font: 400 48px/1.1 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
#legal .lg-meta { margin-top: 16px; font: 400 var(--t-14)/22px var(--f-body); color: var(--kicker); }
#legal .lg-body { margin-top: 48px; border-top: 1px solid var(--rule); }
#legal .lg-body h2 { margin: 48px 0 12px; font: 400 var(--t-24)/1.3 var(--f-display); letter-spacing: -.005em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); }
#legal .lg-body h3 { margin: 28px 0 8px; font: 500 var(--t-16)/24px var(--f-body); color: var(--ink); }
#legal .lg-body p, #legal .lg-body li { font: 400 var(--t-16)/26px var(--f-body); color: #444; }
#legal .lg-body p + p { margin-top: 12px; }
#legal .lg-body ul, #legal .lg-body ol { margin: 12px 0; padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
#legal .lg-body ol { list-style: decimal; }
#legal .lg-body strong { font-weight: 500; color: var(--ink); }
#legal .lg-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); }
#legal .lg-body a:hover { text-decoration-color: var(--ink); }
#legal .lg-body hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
@media (max-width: 1100px) {
  #legal .lg-wrap { grid-template-columns: minmax(0, 720px); }
  #legal .lg-toc { position: static; order: 2; margin-top: 0; display: none; }
}
@media (max-width: 600px) {
  #legal { padding: 64px 0 64px; }
  #legal .lg-h1 { font-size: 34px; }
  #legal .lg-body { margin-top: 32px; }
  #legal .lg-body h2 { font-size: 21px; margin-top: 40px; }
  #legal .lg-body p, #legal .lg-body li { font-size: 15px; line-height: 24px; }
}