/* ──────────────────────────────────────────────────────────────────────
   /privacy, /terms and /dpa — the legal pages, on top of the system in
   landing.css, on its light ground.

   ONE SHEET FOR ALL OF THEM, 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 → legal.css

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

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

/* A title and its dates, and nothing else. These pages are read the way
   anyone reads a legal page, so the head looks like one: no lede, no
   summary card, no marketing scale. */
.lgh { padding-top: 64px; padding-bottom: 40px; }
.lgh .h1 { font-size: 44px; max-width: 20ch; }

.lg-meta {
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline;
  margin-top: 16px; font-size: 14.5px; color: var(--ink3);
}
.lg-meta b { color: var(--ink2); font-weight: 500; }

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

.lgb { padding-top: 16px; padding-bottom: 110px; }
.lgb .in {
  display: grid; grid-template-columns: minmax(0, 1fr) 216px;
  gap: 0 72px; align-items: start;
}

/* The contents rail sits to the right of the prose, never the left: the
   document is what is read first. Placed by grid rather than source order
   so the rail still comes first for a screen reader and on a phone. */
.lg-toc { position: sticky; top: 36px; grid-column: 2; grid-row: 1; }
.lg-doc { grid-column: 1; grid-row: 1; }
.lg-toc b {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; 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);
}
.lg-doc h2 { font-size: 22px; letter-spacing: -.02em; }
/* The clause number, set in the heading's own face: "4. Accounts". */
.lg-doc h2 i { font-style: normal; margin-right: 8px; }
.lg-doc h3 {
  margin-top: 30px; font-size: 17px; line-height: 1.35; letter-spacing: -.02em;
  font-weight: 600; color: var(--ink);
}

/* A numbered sub-clause, "4.2", hung in the margin so the text aligns. */
.lg-doc p.cl { position: relative; padding-left: 44px; }
.lg-doc p.cl > .n { position: absolute; left: 0; top: 0; color: var(--ink3); }
.lg-doc p.cl + ol, .lg-doc p.cl + ul { padding-left: 44px; }

.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 { padding-left: 30px; }
.lg-doc ol > li::before {
  content: "(" counter(lgi, lower-alpha) ")"; position: absolute; left: 0; top: 0;
  color: var(--ink3);
}

/* The intro paragraph before clause 1, and the defined terms. */
.lg-doc > p:first-child { margin-top: 0; }
.lg-doc > p + section { margin-top: 44px; }
.lg-doc dl { margin-top: 15px; }
.lg-doc dd { margin: 4px 0 12px; font-size: 16px; line-height: 1.62; color: var(--ink2); }
.lg-doc dt { font-size: 16px; color: var(--ink); font-weight: 600; }

.lg-doc code {
  font-family: "JetBrains Mono", monospace; font-size: .88em;
  color: var(--ink); background: var(--soft);
  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: 12px; 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); }

/* ── 3b · light chrome ──────────────────────────────────────────────── */

/* The whole page is light, nav and footer included: landing.css draws
   both on night, so they are repainted here rather than in landing.css,
   where the home page still wants them dark. */
.navwrap { background: #fff; border-bottom: 1px solid var(--line); }
.nav { color: var(--ink2); }
.nav .brand { color: var(--ink); }
.nav .links a:hover, .nav .sign-in:hover { color: var(--ink); }
.nav .b-lime { background: var(--ink); color: #fff; }
.nav .b-lime:hover { background: #2A2D38; }
.nav-burger i { background: var(--ink); }

.w.dk { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.ft { color: var(--ink3); border-top: 0; }
.ft-brand, .ft b { color: var(--ink); }
.ft a:hover { color: var(--ink); }
.fine { color: var(--ink3); border-top-color: 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) {
  .nav .links { background: #fff; border-bottom-color: var(--line); }
  .lgb .in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-toc {
    grid-column: auto; grid-row: auto;
    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 { grid-column: auto; grid-row: auto; max-width: none; }
}

@media (max-width: 720px) {
  .lgh { padding-top: 44px; padding-bottom: 32px; }
  .lgh .h1 { font-size: 34px; }
  .lgb { padding-top: 8px; padding-bottom: 72px; }
  .lg-toc { columns: 1; }
  .lg-doc section + section { margin-top: 44px; }
  .lg-doc h2 { font-size: 20px; }
  .lg-doc p.cl { padding-left: 36px; }
  .lg-doc p.cl + ol, .lg-doc p.cl + ul { padding-left: 36px; }
  .lg-doc p, .lg-doc li, .lg-doc dd { font-size: 15.5px; }

  /* 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; }
}