:root {
  --colorText: #000;
  --colorBody: #222;
  --colorMuted: #505050;
  --colorBorder: #e4e7ea;
  --fontSans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: #fff;
  color: var(--colorBody);
  font-family: var(--fontSans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
}

a {
  color: inherit;
}

.docHeader {
  border-bottom: 1px solid var(--colorBorder);
  padding: 20px clamp(20px, 5vw, 40px);
}

.docNav {
  display: none;
}

.docHeaderLogo {
  display: inline-block;
}

.docHeaderLogo img {
  display: block;
  height: 45px;
  width: auto;
}

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 40px) 120px;
}

.docTitle {
  margin: 0 0 8px;
  font-size: clamp(24px, 1vw + 18px, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--colorText);
  line-height: 1.2;
}

.clause {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--colorBorder);
  scroll-margin-top: 24px;
}

.clauseHeading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--colorText);
  letter-spacing: -0.01em;
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.4em;
}

.subClause {
  margin-top: 24px;
}

.subClauseHeading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--colorText);
  display: grid;
  grid-template-columns: 2.5em 1fr;
  gap: 0;
}

.clauseList {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: clauseAlpha;
}

.clauseList > li {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  margin-top: 10px;
  counter-increment: clauseAlpha;
}

.clauseList > li::before {
  content: "(" counter(clauseAlpha, lower-alpha) ")";
  color: var(--colorMuted);
}

.clauseList > li > * {
  grid-column: 2;
}

.clauseList p {
  margin: 0;
}

.clauseList p + p {
  margin-top: 10px;
}

.clauseListNested {
  margin-top: 8px;
  counter-reset: clauseRoman;
}

.clauseListNested > li {
  counter-increment: clauseRoman;
}

.clauseListNested > li::before {
  content: "(" counter(clauseRoman, lower-roman) ")";
}

.clauseIntro {
  margin: 0 0 6px;
}

.clauseOutro {
  margin: 12px 0 0;
}

.bulletList {
  list-style: disc;
  margin: 10px 0 0;
  padding-left: 1.4em;
}

.bulletList > li {
  margin-top: 6px;
}

.bulletList > li::marker {
  color: var(--colorMuted);
}

.bulletList p {
  margin: 0;
}

.bulletList p + p {
  margin-top: 8px;
}

.bulletListNested {
  list-style: circle;
  margin-top: 6px;
}

.docMeta {
  margin: 0 0 24px;
  color: var(--colorMuted);
  font-size: 14px;
}

.definition {
  margin-top: 16px;
}

.definition > p {
  margin: 0;
}

.definition .clauseList {
  margin-top: 6px;
}

strong {
  font-weight: 700;
  color: var(--colorText);
}

.placeholder {
  background: #fff3a8;
  padding: 0 4px;
  border-radius: 3px;
}

@media (max-width: 480px) {
  .clauseHeading {
    grid-template-columns: 1.4em 1fr;
    font-size: 18px;
  }

  .clauseList > li,
  .subClauseHeading {
    grid-template-columns: 2.25em 1fr;
  }
}

@media (min-width: 1100px) {
  body.hasNav {
    display: grid;
    grid-template-columns: 240px 760px;
    column-gap: 40px;
    justify-content: center;
  }

  body.hasNav .docHeader {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  body.hasNav .docNav {
    display: block;
    position: sticky;
    top: 32px;
    align-self: start;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: clamp(32px, 5vw, 64px) 16px clamp(32px, 5vw, 64px) 0;
    font-size: 14px;
    line-height: 1.45;
  }

  body.hasNav .doc {
    margin: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

.docNavList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docNavList li + li {
  margin-top: 10px;
}

.docNavList a {
  display: grid;
  grid-template-columns: 2em 1fr;
  text-decoration: none;
  color: var(--colorMuted);
  transition: color 150ms ease;
}

.docNavList a:hover {
  color: var(--colorText);
}

.docNavList a.is-current {
  color: var(--colorText);
  font-weight: 600;
}

.docNavNum {
  color: var(--colorMuted);
}

.docNavList a.is-current .docNavNum {
  color: var(--colorText);
}