/* Leviter's reading pages (privacy, help, download, press, accessibility).
   They share leviter.css for the colours, type, nav and footer; this adds the long-form layout. */
.doc-hero { position: relative; padding: calc(150px + env(safe-area-inset-top, 0px)) 0 clamp(56px, 8vh, 88px); background: radial-gradient(50% 70% at 82% 0%, rgba(180, 156, 255, .13), transparent 72%), var(--bg); }
.doc-hero h1 { margin-top: 12px; max-width: 900px; font-size: clamp(44px, 7vw, 88px); line-height: 1.04; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.doc-hero .lede { margin-top: 20px; max-width: 640px; }
.doc-hero .updated { margin-top: 22px; font-size: 14px; color: var(--fg-3); }
.doc-hero .get-action { align-items: flex-start; margin-top: 36px; }

.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding: clamp(24px, 4vh, 48px) 0 clamp(110px, 16vh, 180px); }
.doc-nav { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.doc-nav a { padding: 7px 0; font-size: 14px; color: var(--fg-3); transition: color .2s; }
.doc-nav a:hover { color: var(--fg); }
.doc article { min-width: 0; max-width: 720px; }
.doc section { padding: 44px 0; border-top: 1px solid var(--hair); scroll-margin-top: 84px; }
.doc section:first-child { padding-top: 0; border-top: 0; }
.doc h2 { margin-bottom: 16px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.doc h3 { margin: 26px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.doc p, .doc li, .doc td { color: var(--fg-2); }
.doc p + p { margin-top: 14px; }
.doc ol + p, .doc ul + p, .facts-table + p, .assets + p { margin-top: 18px; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--fg-3); }
.doc strong { color: var(--fg); font-weight: 600; }
.doc article a:not(.btn):not(.get-btn) { color: var(--lav); text-decoration: underline; text-underline-offset: 3px; }
.doc kbd { font: inherit; font-size: .94em; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: var(--fg); white-space: nowrap; }
.menu-icon { display: inline-block; width: auto; height: 1em; vertical-align: -.12em; padding: 0 2px; }
.doc code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--fg); overflow-wrap: anywhere; }
.facts-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.facts-table th, .facts-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--hair); }
.facts-table th { width: 32%; color: var(--fg); font-weight: 600; }
.note { margin-top: 22px; padding: 18px 22px; border-radius: 16px; background: rgba(180, 156, 255, .08); color: var(--fg-2); }
.assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.asset figure { margin: 0; }
.asset .frame { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; background: radial-gradient(70% 70% at 50% 40%, rgba(180, 156, 255, .16), transparent), #0c0b10; overflow: hidden; }
.asset .frame img { max-width: 78%; max-height: 78%; width: auto; height: auto; }
.asset figcaption { margin-top: 10px; font-size: 15px; color: var(--fg); }
.asset a { font-size: 14px; }

@media (max-width: 860px) {
  .doc { display: block; }
  .doc-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 36px; }
  .facts-table th { width: 38%; }
}
@media (max-width: 560px) { .assets { grid-template-columns: 1fr; } }