/* Shared styling for the legal documents.
 *
 * Hand-written rather than pulled from the landing page's stylesheet: that one
 * is a pre-compiled Tailwind subset containing only the utilities index.html
 * happens to use, so any class these pages needed and it didn't would silently
 * do nothing. These are long-lived documents that must stay readable on their
 * own; a hundred lines of plain CSS is the cheaper dependency.
 */

:root {
  --ink: #1c1d1f;
  --body: #3f4652;
  --muted: #8a94a6;
  --powder: #1273cf;
  --rule: #e6e9ee;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* --- header ---------------------------------------------------------------- */

.doc-head {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  margin-bottom: 48px;
}

/* One SVG, mark and word together — the word is Manrope 500 outlined to
   paths. font-size is still the size handle; 1.4em draws the mark at the
   1.15em it had when the word beside it was live Inter Tight text. */
.lotic-lockup {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}
.lotic-lockup img { height: 1.14em; width: auto; display: block; }

/* --- document -------------------------------------------------------------- */

main { padding-bottom: 72px; }

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px;
}

.updated {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 40px;
}

h2 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 44px 0 12px;
}

h3 {
  font-size: 15px;
  color: var(--ink);
  margin: 26px 0 8px;
}

p, li { margin: 0 0 14px; }
ul { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }

a { color: var(--powder); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #0f5da8; }

strong { color: var(--ink); font-weight: 600; }

/* A short summary panel at the top of each document. The detail below is the
   operative text; this is so someone on a phone gets the gist in ten seconds. */
.tldr {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--powder);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 36px;
  background: #fbfcfd;
}
.tldr p { margin: 0 0 10px; }
.tldr p:last-child { margin-bottom: 0; }

/* Contents. Twelve numbered sections is more than anyone will scroll through
   to find the one clause they came for, so the document names its own parts up
   front. Two columns where there is room, one on a phone. Its heading is the
   same size as the body rather than an h2, so the list reads as navigation
   rather than as the document's first section. */
.toc {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px 6px;
  margin: 0 0 40px;
}
.toc h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.toc ol {
  margin: 0; padding-left: 20px;
  columns: 2; column-gap: 28px;
}
.toc li {
  margin: 0 0 8px;
  /* Keep a wrapped entry from splitting across the column break. */
  break-inside: avoid;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .toc ol { columns: 1; }
}

/* A linked section should not land flush against the top of the window. */
h2[id] { scroll-margin-top: 24px; }

/* Tables of what's collected. Scrolls inside itself rather than pushing the
   page sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
th { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* --- footer ---------------------------------------------------------------- */

.doc-foot {
  border-top: 1px solid var(--rule);
  padding: 24px 0 48px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}
.doc-foot a { color: var(--muted); text-decoration: none; }
.doc-foot a:hover { color: var(--ink); }

@media (max-width: 600px) {
  h1 { font-size: 27px; }
  h2 { font-size: 17px; }
  .doc-head { margin-bottom: 32px; }
}