/* Document pages (Security, Help, Terms, Privacy), on the shared dark theme in site.css. One frame
   for all four: a title with its date line, the contents on the left and sticky (a reviewer jumps to
   one clause; a reader goes straight through), and a reading column with one measure. On a phone
   the contents fold into a single "On this page" row so the page starts with its text. */
.doc { padding: 92px 0 104px; }
.doc-head { max-width: 820px; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.doc-head h1 { margin: 0 0 16px; color: var(--ink); font: 600 clamp(36px, 4vw, 52px)/1.08 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.doc-meta { margin: 0; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.doc-body { max-width: 760px; }
.doc-body h2 { margin: 56px 0 14px; color: var(--ink); font: 600 26px/1.25 var(--serif); letter-spacing: -.012em; text-wrap: balance; scroll-margin-top: 104px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h2 .num { margin-right: 12px; color: var(--green); font: 500 15px var(--mono); vertical-align: 3px; }
.doc-body p { margin: 0 0 20px; color: #c9d6df; font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.doc-body ul { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.doc-body li { position: relative; padding-left: 24px; color: #c9d6df; font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.doc-body li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 2px; background: var(--green); }
.doc-body strong, .doc-body b { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--green-dark); font-weight: 500; text-underline-offset: 3px; }
.doc-body code { font: 500 14.5px var(--mono); color: var(--ink); }

.doc-note { margin: 28px 0 0; padding: 18px 22px; border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; background: var(--green-soft); color: var(--body); font-size: 15.5px; line-height: 1.65; }
.doc-note p { margin: 0; color: var(--body); font-size: 15.5px; }
.doc-note p + p { margin-top: 10px; }
.doc-layout > .doc-body > .doc-note:first-child { margin: 0 0 36px; }

/* contents */
.doc-toc { margin: 0; font-size: 14.5px; line-height: 1.45; }
.doc-toc details { border: 0; }
.doc-toc summary { gap: 12px; padding: 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::after { content: "+"; color: var(--green); font: 400 18px/1 var(--sans); }
.doc-toc details[open] summary::after { content: "\2212"; }
.doc-toc ul { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.doc-toc li { margin: 0; padding: 0; }
.doc-toc li::before { content: none; }
.doc-toc a { display: flex; gap: 10px; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); color: var(--body); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a.on { border-left-color: var(--green); color: var(--ink); }
.doc-toc .num { flex: none; min-width: 16px; color: var(--muted); font: 500 12px/1.9 var(--mono); text-align: right; }

/* the security questionnaire answers: read once and copied, so facts, not prose */
.doc-facts { margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.doc-facts div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc-facts dt { color: var(--muted); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.doc-facts dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.6; }

/* help: which product you have */
.doc-body ul.routes { display: grid; gap: 14px; margin: 0 0 8px; }
.doc-body .routes li { padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.doc-body .routes li::before { content: none; }
.routes strong { display: block; margin-bottom: 4px; color: var(--ink); font: 600 17px var(--serif); }
.routes span { display: block; color: var(--body); font-size: 15px; line-height: 1.6; }
.doc-cmd { display: block; margin-top: 10px; padding: 11px 14px; overflow-x: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-deep); color: var(--ink); font: 500 13.5px var(--mono); }

/* privacy: the policy is kept by Termly and shown as a page of its own */
.doc-frame { display: block; width: 100%; height: 78vh; min-height: 560px; margin: 8px 0 0; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; }

@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; }
  .doc-toc { position: sticky; top: 112px; align-self: start; }
  .doc-toc summary { pointer-events: none; }
  .doc-toc summary::after { content: none !important; }
  .doc-facts div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .doc-body ul.routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .doc { padding: 56px 0 72px; }
  .doc-head { margin-bottom: 28px; padding-bottom: 24px; }
  .doc-toc { padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
  .doc-toc details:not([open]) ul { display: none; }
  .doc-body p, .doc-body li { font-size: 16.5px; }
  .doc-body h2 { margin-top: 44px; font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .doc-toc a { transition: none; } }