/* Legal documents (imprint, privacy). A plain reading column in the brand's dark field. */

.doc {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s9);
}

.doc header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s8);
}

.doc h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--s6);
}

.doc h2 {
  font-size: var(--fs-lg);
  margin-top: var(--s7);
  margin-bottom: var(--s3);
}

.doc p,
.doc li {
  color: var(--fg-2);
}

.doc p + p {
  margin-top: var(--s3);
}

.doc ul {
  margin: var(--s3) 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--s2);
}

.doc li::marker {
  color: var(--fg-3);
}

.doc address {
  font-style: normal;
  color: var(--fg);
  line-height: var(--lh-loose);
}

/* Placeholders the operator still has to fill in. Loud on purpose: they must never ship unnoticed. */
.todo {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 var(--s2);
  border-radius: var(--r1);
  background: var(--accent-tint);
  color: var(--accent-text);
  border: 1px dashed var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.doc footer {
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: var(--border-w) solid var(--border);
  display: flex;
  gap: var(--s4);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}