/* ==========================================================================
   I get movin — legal documents (privacy, terms, EULA)
   Depends on site.css for tokens and chrome. Light only, deliberately: see the
   note at the top of site.css.
   ========================================================================== */

.legal { padding: 56px 0 24px; }
.legal .wrap { max-width: 820px; }

.legal .eyebrow { margin-bottom: 0; }

.legal h1 {
  font-size: clamp(32px, 5vw, 44px); line-height: 1.05; letter-spacing: -.032em;
  margin: 12px 0 6px;
}
.legal .updated { color: var(--ink-2); font-size: 14px; margin: 0 0 8px; }
.legal .intro { color: var(--ink-2); font-size: 18px; margin: 18px 0 0; }

.legal h2 {
  font-size: 22px; letter-spacing: -.02em; margin: 46px 0 10px;
  padding-top: 8px; scroll-margin-top: 84px;
}
.legal h3 { font-size: 17px; margin: 26px 0 4px; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal strong { font-weight: 650; }
.legal a { color: var(--pine); }

/* Table of contents */
.legal .toc {
  background: var(--surface); border: 1px solid var(--ghost);
  border-radius: var(--radius); padding: 20px 24px; margin: 30px 0 8px;
}
.legal .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.legal .toc li { margin: 0 0 6px; }
.legal .toc a { text-decoration: none; color: var(--ink); }
.legal .toc a:hover { color: var(--pine); text-decoration: underline; }

/* Pull-quote / important note */
.legal .callout {
  background: var(--pine-soft); border: 0; border-left: 3px solid var(--pine);
  border-radius: var(--radius-sm); padding: 15px 20px; margin: 0 0 16px;
  font-size: 15px; color: #2b3f33;
}
.legal .callout p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .legal { padding: 40px 0 20px; }
  .legal .toc ol { columns: 1; }
}