/* Document pages share Keemo's colors, typography roles, brand and footer. */
.document-wrap { width: min(720px, calc(100% - 64px)); margin-inline: auto; padding-block: 48px 96px; }
.document-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 36px; }
.document-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.document-nav a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.document-nav a:hover { color: var(--ink); }
.document-home { color: var(--muted); padding-block: 12px; }
.document-page .language { display: inline-flex; align-items: center; justify-content: center; }
.document-intro h1 { font-size: var(--site-section); line-height: var(--site-section-leading); letter-spacing: -.035em; text-wrap: balance; }
.document-meta { margin-top: 24px; color: var(--muted); font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.document-lead { margin-top: 24px; color: var(--muted); }
.document-publisher { margin-top: 24px; color: var(--muted); font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.document-publisher p + p { margin-top: 6px; }
.document-contact { margin-top: 28px; }
.document-email { margin-top: 12px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.document-content { margin-top: 48px; }
.document-section + .document-section { margin-top: 36px; }
.document-section h2 { margin-bottom: 14px; font-size: var(--km-font-heading); line-height: var(--km-leading-heading); font-weight: var(--km-weight-semibold); letter-spacing: -.01em; }
.document-content p { color: #bec3b7; text-wrap: pretty; }
.document-content p + p { margin-top: 14px; }
.document-content a, .document-email a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.document-content a:hover, .document-email a:hover { color: var(--ink); }
.document-faq details { border-top: 1px solid var(--line); }
.document-faq details:last-child { border-bottom: 1px solid var(--line); }
.document-faq summary { cursor: pointer; min-height: 64px; padding-block: 22px; padding-right: 20px; font-size: var(--km-font-heading); line-height: var(--km-leading-heading); font-weight: var(--km-weight-medium); }
.document-faq summary::marker { color: var(--accent); }
.document-answer { padding-bottom: 26px; }
.document-page .footer-bottom { flex-wrap: wrap; gap: 12px 24px; }
.document-intro, .document-section, .document-faq { overflow-wrap: break-word; }
@media (max-width: 760px) {
  .document-wrap { width: calc(100% - 40px); padding-block: 24px 64px; }
  .document-nav { gap: 0 20px; padding-bottom: 28px; }
  .document-home { display: none; }
  .document-intro h1 { font-size: var(--km-font-title); line-height: var(--km-leading-title); text-wrap: pretty; }
  .document-content { margin-top: 36px; }
  .document-section + .document-section { margin-top: 30px; }
  .document-faq summary { font-size: var(--km-font-body); line-height: var(--km-leading-body); padding-block: 20px; }
}
@media (max-width: 360px) { .document-wrap { width: calc(100% - 32px); } }