/* Long-form text pages (privacy, terms) on design system v3.3.
   Loads after /assets/graphite.css. */

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 96px;
  font-size: 16px;
  line-height: 1.75;
}

.doc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; }
.doc-top .mark { font-size: 22px; text-decoration: none; }

.kicker { font-weight: 600; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.035em; margin: 0 0 6px; }
h2 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; margin: 44px 0 12px; }
h3 { font-family: var(--display); font-weight: 600; font-size: 16px; margin: 28px 0 8px; }
.updated { font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-variant-numeric: tabular-nums; }

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

/* Links in prose are white and underlined: white is action. */
a { color: var(--text-hi); text-decoration: underline; text-decoration-color: var(--line-hi); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text-hi); }

.contact { padding: 20px 24px; margin: 20px 0; }
.contact p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14.5px; }
th {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-dim); }
footer a { color: var(--text); }