/* The text pages, /privacy and /terms (WEB.md > 10.8: Terms uses the privacy page's template): one readable
   column under the shared header, then the shared footer. */

.doc {
  flex: 1;
  width: 100%;
  max-width: calc(680px + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(16px, 4vw, 56px) var(--pad) clamp(48px, 7vw, 112px);
}
.doc h1 {
  margin: 0;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.94;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.doc .doc-updated {
  margin: 16px 0 0;
  font: 500 12px/16px var(--mono);
  color: var(--text-3);
}
.doc .doc-lead {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}
/* "On this page": control pills to the sections, which the dApp Store listing links to by id. */
.doc .doc-toc {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.doc .doc-toc li + li {
  margin-top: 0;
}
.doc .doc-toc a {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--control);
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.doc .doc-toc a:hover {
  background: #2c2c2e;
  opacity: 1;
}
.doc h2 {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  scroll-margin-top: 24px;
}
.doc p,
.doc li {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-2);
  text-wrap: pretty;
}
.doc p {
  margin: 10px 0 0;
}
.doc ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.doc li + li {
  margin-top: 8px;
}
.doc a {
  color: var(--text);
  text-underline-offset: 3px;
}
.doc strong {
  color: var(--text);
  font-weight: 600;
}
/* A licence's own words, as they ship with the code. */
.doc .doc-license {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  font: 500 12px/18px var(--mono);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}