/* Intellica legal pages (2026-10-17). Loaded by site/src/legal/*.html (generated by site/legal.py).
   Valarian's legal layout (Calvin's pick): a sticky left column with the documents list, the title, the date, a one-line
   summary and a contents box that follows the reader (legal.js); the document on the right. The text follows the house
   rule for legal documents: 13.5px with .75em gaps, and section heads at document scale, never marketing scale. */

.lg-wrap { max-width: 1200px; margin: 0 auto; padding: 64px var(--gutter) 120px; }
.lg { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }

/* ---------- the left column ---------- */
.lg-aside { position: sticky; top: 96px; }
.lg-docs { display: flex; flex-direction: column; gap: 1px; margin: 0 0 28px; }
.lg-docs a { padding: 3px 0; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.lg-docs a:hover { color: var(--ink); }
.lg-docs a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.lg-title { margin: 0 0 16px; font-family: var(--display); font-weight: var(--display-w); font-variation-settings: var(--display-fvs);
  font-size: clamp(32px, 3vw, 42px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.lg-meta { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lg-sum { margin: 0 0 26px; max-width: 30ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
/* the contents box: where you are, how far through, and every section */
.lg-toc { max-height: calc(100vh - 380px); overflow: auto; overscroll-behavior: contain; padding: 14px 16px 10px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); scrollbar-width: thin; }
.lg-toc-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lg-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lg-prog { display: flex; gap: 3px; margin: 0 0 10px; }
.lg-prog i { flex: 1; height: 2px; border-radius: 1px; background: var(--line-2); transition: background .25s; }
.lg-prog i.fill { background: var(--hero); }
.lg-links { display: flex; flex-direction: column; }
.lg-links a { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); transition: color .2s; }
.lg-links a b { flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.lg-links a:hover { color: var(--ink); }
.lg-links a.on, .lg-links a.on b { color: var(--hero); }

/* ---------- the document ---------- */
.lg-doc { min-width: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.lg-doc p, .lg-doc ul, .lg-doc ol { margin: 0 0 .75em; }
.lg-doc ul, .lg-doc ol { padding-left: 1.3em; }
.lg-doc li { margin: 0 0 .35em; }
.lg-doc li > ul, .lg-doc li > ol { margin: .35em 0 0; }
.lg-doc a { color: var(--hero); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.lg-doc strong { font-weight: 600; }
.lg-intro { margin: 0 0 40px; }
.lg-sec { margin: 0 0 44px; scroll-margin-top: 96px; }
.lg-sec > h2 { margin: 0 0 .7em; font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.lg-doc h3 { margin: 1.5em 0 .5em; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; scroll-margin-top: 96px; }
.lg-doc h4 { margin: 1.2em 0 .4em; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
/* tables (the privacy policy's data chart): their own scroller, so the page never runs wide */
.lg-tbl { margin: 0 0 1em; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.lg-doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.lg-doc th, .lg-doc td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-doc th { font-weight: 600; background: var(--paper-3); }
.lg-doc tr:last-child td { border-bottom: 0; }
.lg-doc td ul { margin: 0; }

@media (max-width: 980px) {
  .lg-wrap { padding-top: 40px; }
  .lg { grid-template-columns: minmax(0, 1fr); }
  .lg-aside { position: static; }
  .lg-toc { max-height: none; }
}