/* ──────────────────────────────────────────────────────────────────────
   /privacy and /terms — the two legal pages, on top of the system in
   landing.css.

   ONE SHEET FOR BOTH, deliberately. They are the same page with different
   words: a hero, a sticky contents rail, one column of prose. Two sheets
   would be two typographic scales for documents that are always read as a
   pair, and the second one to be edited would drift.

   Load order is the contract the whole site keeps:
       landing.css → night.css → legal.css

   Everything here is layout and prose. Not one colour is invented: the
   scale comes from night.css, so a change to the ground reaches these
   pages without anybody remembering they exist.
   ────────────────────────────────────────────────────────────────────── */

/* ── 1 · the head of the document ───────────────────────────────────── */

.lgh { padding-top: 76px; padding-bottom: 54px; }
.lgh .h1 { font-size: 60px; max-width: 16ch; }
.lgh .lede { margin-top: 20px; max-width: 62ch; font-size: 18px; }
/* An anchor in the lede is part of a sentence, so it is underlined and
   nothing else. `.lnk` — the standalone "read more" affordance — is
   inline-flex with a top margin and would break the line in half. */
.lgh .lede a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.lgh .lede a:hover { text-decoration-color: var(--ink3); }

/* Updated / effective, as a mono rule under the lede. A legal page is read
   with one eye on its date, so the date is chrome rather than a line of
   body copy somebody has to find. */
.lg-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
.lg-meta b { color: var(--ink); font-weight: 500; }

/* ── 2 · the body: contents rail + one column ───────────────────────── */

/* The dotted rule is drawn at the top of this band, so the band needs a
   shoulder for it to sit in — without one it runs straight through the
   contents label. Inset to match the one on /pricing. */
.lgb { padding-top: 58px; padding-bottom: 110px; }
.lgb .prule { left: 120px; right: 120px; }
.lgb .in {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: 0 72px; align-items: start;
}

.lg-toc { position: sticky; top: 36px; }
.lg-toc b {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink3);
  font-weight: 500; margin-bottom: 14px;
}
.lg-toc a {
  display: block; padding: 5px 0 5px 13px; font-size: 13.5px; line-height: 1.4;
  color: var(--ink3); border-left: 1px solid var(--line);
  transition: color .15s, border-color .15s;
}
.lg-toc a:hover { color: var(--ink2); border-left-color: var(--ink3); }
/* The section being read. Set by the observer at the foot of each page;
   without JavaScript nothing is ever current and the rail is a plain list
   of links, which is all it has to be. */
.lg-toc a.is-on { color: var(--ink); border-left-color: var(--ink); }

/* ── 3 · the prose ──────────────────────────────────────────────────── */

.lg-doc { max-width: 70ch; }

/* The anchor target sits above the heading so a jumped-to section is not
   flush against the top of the window. */
.lg-doc section { scroll-margin-top: 28px; }
.lg-doc section + section { margin-top: 56px; }

.lg-doc h2 {
  font-size: 27px; line-height: 1.2; letter-spacing: -.03em; font-weight: 600;
  color: var(--ink);
}
/* The number is part of the heading and part of the link to it, so a
   clause can be cited the way a clause is cited. */
.lg-doc h2 i {
  font-style: normal; font-family: "JetBrains Mono", monospace;
  font-size: 15px; letter-spacing: 0; color: var(--ink3); margin-right: 12px;
}
.lg-doc h3 {
  margin-top: 30px; font-size: 17px; line-height: 1.35; letter-spacing: -.02em;
  font-weight: 600; color: var(--ink);
}

.lg-doc p { margin-top: 15px; font-size: 16px; line-height: 1.68; color: var(--ink2); }
.lg-doc h2 + p, .lg-doc h3 + p { margin-top: 13px; }
.lg-doc strong, .lg-doc b { color: var(--ink); font-weight: 600; }

/* `:not(.btn)` is load-bearing. The pair of buttons at the foot of the
   document are anchors, and without the exclusion this rule repaints the
   light one in its own ink — white text on a white button, underlined. */
.lg-doc a:not(.btn) {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.lg-doc a:not(.btn):hover { text-decoration-color: var(--ink3); }

.lg-doc ul, .lg-doc ol { margin-top: 15px; padding-left: 0; list-style: none; }
.lg-doc li {
  position: relative; padding-left: 22px; margin-top: 9px;
  font-size: 16px; line-height: 1.62; color: var(--ink2);
}
.lg-doc ul > li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 1px; background: var(--ink3);
}
.lg-doc ol { counter-reset: lgi; }
.lg-doc ol > li { counter-increment: lgi; }
.lg-doc ol > li::before {
  content: counter(lgi) "."; position: absolute; left: 0; top: 0;
  font-family: "JetBrains Mono", monospace; font-size: 12.5px;
  line-height: 1.95; color: var(--ink3);
}

.lg-doc code {
  font-family: "JetBrains Mono", monospace; font-size: .88em;
  color: var(--ink); background: var(--night2);
  border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px;
}

/* The two-column fact table. Used for what we hold, what we never hold,
   and who the subprocessors are — the three places where prose would be
   a worse answer than a list of pairs. */
.lg-t { width: 100%; border-collapse: collapse; margin-top: 20px; }
.lg-t th {
  text-align: left; padding: 0 16px 10px 0; vertical-align: bottom;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);
  font-weight: 500; border-bottom: 1px solid var(--line);
}
.lg-t td {
  padding: 13px 16px 13px 0; vertical-align: top;
  font-size: 15px; line-height: 1.55; color: var(--ink2);
  border-bottom: 1px solid var(--line2);
}
.lg-t td:first-child { color: var(--ink); font-weight: 500; width: 34%; padding-right: 28px; }
.lg-t tr:last-child td { border-bottom: 1px solid var(--line); }

/* The note. One rule, no icon, no tinted box: a claim worth stopping on
   is set apart by the rule and the indent, which is enough on a dark
   ground and does not read as a warning sticker. */
.lg-note {
  margin-top: 22px; padding: 2px 0 2px 20px; border-left: 2px solid var(--periwinkle);
}
.lg-note p { margin-top: 0; color: var(--ink2); }
.lg-note p + p { margin-top: 11px; }

/* The summary at the top of the document, before clause 1. It says the
   same thing the clauses say and is not a substitute for them, which it
   has to state in its own words. */
.lg-sum {
  padding: 26px 28px; background: var(--night2);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 56px;
}
.lg-sum b.lg-sum-h {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink3);
  font-weight: 500; margin-bottom: 14px;
}
.lg-sum ul { margin-top: 0; }
.lg-sum li:first-child { margin-top: 0; }
.lg-sum > p:last-child {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2);
  font-size: 14px; color: var(--ink3);
}

/* The pair of links at the foot of the prose: each legal page points at
   the other, because whoever is reading one is usually checking both. */
.lg-pair { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }

/* ── 4 · narrow ─────────────────────────────────────────────────────── */

/* The rail goes first and stops being sticky: a contents list pinned to
   the top of a phone screen is a third of the screen. */
@media (max-width: 1000px) {
  .lgb .in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-toc {
    position: static; margin-bottom: 48px; padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
    columns: 2; column-gap: 32px;
  }
  .lg-toc b { column-span: all; }
  .lg-doc { max-width: none; }
}

@media (max-width: 720px) {
  .lgh { padding-top: 48px; padding-bottom: 40px; }
  .lgh .h1 { font-size: 40px; }
  .lgh .lede { font-size: 16.5px; margin-top: 16px; }
  .lgb { padding-top: 40px; padding-bottom: 72px; }
  .lgb .prule { left: 24px; right: 24px; }
  .lg-toc { columns: 1; }
  .lg-doc section + section { margin-top: 44px; }
  .lg-doc h2 { font-size: 23px; }
  .lg-doc h2 i { display: block; margin: 0 0 6px; font-size: 13px; }
  .lg-doc p, .lg-doc li { font-size: 15.5px; }
  .lg-sum { padding: 22px 20px; }

  /* The fact tables become stacked pairs. A 34% first column on a phone
     is two words per line in both halves. */
  .lg-t, .lg-t tbody, .lg-t tr, .lg-t td { display: block; width: auto; }
  .lg-t thead { display: none; }
  .lg-t tr { padding: 14px 0; border-bottom: 1px solid var(--line2); }
  .lg-t tr:last-child { border-bottom: 1px solid var(--line); }
  .lg-t td { border: 0; padding: 0; }
  .lg-t td:first-child { width: auto; padding-right: 0; margin-bottom: 5px; }
}