/* Shared layout for the desk's written pages -- terms and privacy.
 *
 * A separate file rather than a <style> block in each: these two pages have to
 * say the same thing in the same shape, and a legal page that drifts visually
 * from its twin reads as the less official of the two. One stylesheet means
 * they cannot drift.
 *
 * Everything here rides on the tokens in styles.css and adds no colours of
 * its own. */

.doc-wrap{
  max-width:760px;margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--pad) clamp(48px,7vw,88px);
}

/* When it was last true. Sits directly under the lede, because for a document
   like this the date is part of the claim rather than a footnote to it. */
.doc-stamp{
  margin-top:20px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-4);
}
.doc-stamp a{color:var(--text-3);text-decoration:underline;text-underline-offset:3px}
.doc-stamp a:hover{color:var(--gold)}

/* The contents. Twelve sections is past the point where scrolling to find one
   is reasonable, and the section somebody wants -- the claim rules, usually --
   is rarely the first. */
.doc-toc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 20px;
  margin-top:28px;padding:18px 20px;
  background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-lg);
}
.doc-toc a{
  padding:5px 0;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--text-3);text-decoration:none;
}
.doc-toc a:hover{color:var(--gold)}

.doc-sec{margin-top:44px;scroll-margin-top:88px}
.doc-sec h3{
  display:flex;align-items:baseline;gap:12px;
  margin:0 0 14px;font-size:clamp(17px,2.4vw,21px);font-weight:600;color:var(--ink);
  letter-spacing:-.01em;
}
.doc-n{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--gold);
}
.doc-h4{
  margin:24px 0 10px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-4);
}
.doc-sec p{margin:0 0 13px;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec b{color:var(--ink);font-weight:600}
.doc-sec a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

.doc-list{margin:0 0 13px;padding:0;list-style:none}
.doc-list li{
  position:relative;padding-left:20px;margin-bottom:9px;
  font-size:14.5px;line-height:1.7;color:var(--text-2);
}
/* A rule rather than a bullet: these lists are conditions, and each one is a
   line somebody could be held to. */
.doc-list li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:1px;background:var(--gold);opacity:.7;
}

/* The paragraphs that change what somebody does -- not advice, not financial
   advice, what "funded" actually means. */
.doc-callout{
  margin:18px 0;padding:15px 18px;
  background:var(--gold-tint);border:1px solid var(--gold-hairline);
  border-radius:var(--radius-md);
}

/* Privacy's tables: what is collected, and who it reaches. Prose could carry
   the same facts, but not so they can be checked line by line. */
.doc-scroll{overflow-x:auto;margin:16px 0 13px}
.doc-table{width:100%;border-collapse:collapse;min-width:520px}
.doc-table th{
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-4);text-align:left;
  padding:0 12px 9px;border-bottom:1px solid var(--hairline);
}
.doc-table td{
  padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:top;
  font-size:13.5px;line-height:1.65;color:var(--text-2);
}
.doc-table td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.doc-table code{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
}

@media (max-width:640px){
  .doc-sec h3{flex-direction:column;gap:4px}
  .doc-table td:first-child{white-space:normal}
}