/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The notices -- privacy, cookies, terms, disclosures, fair housing,
   accessibility -- on top of landing.css.

   THE SAME SHELL AS THE BLOG and therefore the cover's palette, bar and
   footer: somebody who clicks "Cookies" at the foot of the front page has
   not left the site, and a legal page that looks like a different site is
   a legal page people do not believe.

   Every colour comes from a token defined in landing.css. A literal here
   would be a colour that exists only on these pages.

   SET FOR READING RATHER THAN FOR SKIMMING. A privacy policy is read by
   somebody who is already slightly annoyed, usually looking for one
   sentence. So: a narrow measure, headings that are obviously headings,
   generous space between sections, and nothing decorative anywhere. */

.legal-doc{max-width:780px;margin:0 auto 20px;background:var(--card);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,28,42,.05)}

/* ---- the head ----
   Left-aligned, not centred like a blog post: this is a document, and a
   document starts at the top left. */
.ldhead{padding:44px clamp(22px,5vw,56px) 24px;border-bottom:2px solid var(--ink)}
.ldhead h1{margin:0 0 10px;font-size:clamp(28px,4vw,40px);line-height:1.12;
  font-weight:700;letter-spacing:-1.1px;text-wrap:balance}
/* WHEN IT LAST CHANGED, at the top rather than buried at the foot. It is
   the first thing anybody checking a policy wants and the last thing most
   sites show them. */
.ldwhen{margin:0;font-size:13.5px;color:var(--mut)}

.ldbody{padding:34px clamp(22px,5vw,56px) 44px;
  font-size:16.5px;line-height:1.72;color:var(--ink2)}
/* The opening paragraph carries the summary of the whole document. */
.ldbody>p:first-child{font-size:18px;line-height:1.62;color:var(--ink);
  margin:0 0 26px;padding:0 0 26px;border-bottom:1px solid var(--line)}

/* `#` in the source becomes an h2 -- h1 belongs to the document's title.
   Ruled above, because in a document of eight sections the rule is what
   lets somebody find the one they came for by scrolling. */
.ldbody h2{margin:42px 0 14px;padding-top:26px;border-top:1px solid var(--line);
  font-size:21px;font-weight:700;letter-spacing:-.35px;color:var(--ink);
  text-wrap:balance}
/* The opening paragraph already draws a rule under itself, and the first
   section heading draws one over. Two rules with a gap between them reads
   as a mistake, which is what it was. */
.ldbody h2:first-child,
.ldbody>p:first-child + h2{margin-top:0;padding-top:0;border-top:0}
.ldbody h3{margin:28px 0 10px;font-size:17.5px;font-weight:700;color:var(--ink)}
.ldbody p{margin:0 0 16px}
/* A COOKIE'S NAME IS THE THING PEOPLE SEARCH THE PAGE FOR. Each one opens
   its paragraph in bold, and this makes that name findable at a glance
   rather than merely emphatic. */
.ldbody strong{color:var(--ink);font-weight:700}
.ldbody em{color:var(--mut);font-style:normal;font-size:14.5px}
.ldbody a{color:var(--accent)}
.ldbody ul,.ldbody ol{margin:0 0 16px;padding-left:24px}
.ldbody li{margin:0 0 9px}
.ldbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;background:var(--band);padding:1px 5px;border-radius:4px;
  border:1px solid var(--line)}
.ldbody hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* ---- the other notices ----
   Every one links to all the others. Somebody who came here for the
   cookie notice is often two clicks from what they actually wanted, and a
   dead end at the foot of a legal page is how that becomes an email. */
.ldmore{display:flex;flex-wrap:wrap;gap:10px 12px;
  padding:22px clamp(22px,5vw,56px) 30px;background:var(--band);
  border-top:1px solid var(--line)}
.ldmore a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);text-decoration:none;
  font-size:13.5px;font-weight:600}
.ldmore a:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:760px){
  .legal-doc{margin:0 auto 16px;border-radius:14px}
  .ldhead{padding:30px 20px 20px}
  .ldbody{padding:26px 20px 34px;font-size:16px}
  .ldbody>p:first-child{font-size:17px}
  .ldmore{padding:18px 20px 24px}
}