/* ============================================================
   Document pages: the privacy policy and the terms

   Built on css/system.css. A head band with the title, then the
   text at a reading measure with its contents list beside it.
   Section numbers, list dashes and the contents numbers are drawn
   by CSS, so the markdown twin and screen readers get plain text.

   One 1240px wrap, like every other page.
   ============================================================ */

.doc { font-family: var(--pt-font); color: var(--pt-ink); }
.doc-wrap { width: 100%; max-width: var(--pt-maxw); margin-inline: auto; }

/* ---------- head band ---------- */
.doc-head {
  position: relative; overflow: hidden;
  /* the nav floats over this band (css/nav.css), so its height comes first */
  padding: calc(var(--nav-h, 103px) + clamp(28px, 4vw, 60px)) var(--pt-gutter) clamp(40px, 4.5vw, 64px);
  border-bottom: 1px solid var(--pt-border);
}
.doc-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 80% at 92% 10%, rgba(77, 83, 196, 0.10), transparent 72%),
    radial-gradient(26% 60% at 0% 100%, rgba(220, 185, 88, 0.12), transparent 70%);
}
.doc-head .doc-wrap { position: relative; z-index: 1; }
.doc-head .pt-eyebrow { margin-bottom: 20px; }
.doc-head .pt-eyebrow span { opacity: .55; }
.doc-head h1 {
  font-size: var(--pt-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 20px; max-width: 16ch; text-wrap: balance; color: var(--pt-ink);
}
.doc-meta { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pt-ink-soft); }
.doc-meta a { color: var(--pt-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-meta a:hover { color: var(--pt-primary-hover); }

/* ---------- text and contents ---------- */
.doc-main { padding: clamp(40px, 5vw, 72px) var(--pt-gutter) var(--pt-section); }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }

.doc-toc { position: sticky; top: calc(var(--nav-h, 103px) + 24px); }
.doc-toc summary {
  list-style: none; cursor: pointer;
  font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pt-ink-soft);
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--pt-border); }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline;
  margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--pt-ink-muted); text-decoration: none;
  transition: color var(--pt-fast) var(--pt-ease), border-color var(--pt-fast) var(--pt-ease);
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--pt-primary);
}
.doc-toc a:hover, .doc-toc a[aria-current] { color: var(--pt-ink); border-left-color: var(--pt-primary); }
.doc-toc a:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 2px; }

.doc-body { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--pt-ink-muted); counter-reset: sec; }
.doc-body p { margin: 0 0 1.1em; }
.doc-intro p:first-child { font-size: var(--pt-fs-lead); line-height: 1.6; color: var(--pt-ink); }
.doc-body section {
  counter-increment: sec;
  margin-top: clamp(30px, 3.5vw, 44px); padding-top: clamp(30px, 3.5vw, 44px);
  border-top: 1px solid var(--pt-border);
  scroll-margin-top: calc(var(--nav-h, 103px) + 16px);
}
.doc-body h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: var(--pt-fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--pt-ink); margin: 0 0 18px; text-wrap: balance;
}
.doc-body h2::before {
  content: counter(sec, decimal-leading-zero); flex: none;
  font-family: var(--pt-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--pt-primary);
}
.doc-body ul { list-style: none; margin: 0 0 1.1em; padding: 0; }
.doc-body li { position: relative; padding-left: 26px; margin: 0 0 0.55em; }
/* the dash that leads every eyebrow, as the bullet */
.doc-body li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 12px; height: 1px; background: var(--pt-primary); }
.doc-body a:not(.doc-also) { color: var(--pt-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the other legal page, as one card at the end */
.doc-also {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
  margin-top: clamp(40px, 5vw, 56px); padding: 20px 22px;
  background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile);
  box-shadow: var(--pt-shadow-card); color: inherit; text-decoration: none;
  transition: transform var(--pt-slow) var(--pt-ease), box-shadow var(--pt-slow) var(--pt-ease), border-color var(--pt-fast) var(--pt-ease);
}
/* the kicker is drawn by CSS and the separator is for screen readers and the markdown twin */
.doc-also::before { content: attr(data-k); grid-column: 1 / -1; font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-primary); }
.doc-also .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.doc-also .t { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); }
.doc-also .t::after { content: " \2192"; color: var(--pt-primary); }
.doc-also .d { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--pt-ink-muted); }
.doc-also:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-lift); border-color: var(--pt-border-strong); }
.doc-also:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doc-toc {
    position: static; background: var(--pt-surface); border: 1px solid var(--pt-border);
    border-radius: var(--pt-r-tile); padding: 14px 18px;
  }
  .doc-toc summary { display: flex; justify-content: space-between; align-items: center; }
  .doc-toc summary::after { content: "+"; font-size: 16px; color: var(--pt-primary); }
  .doc-toc details[open] summary::after { content: "\2212"; }
  .doc-body { font-size: 16.5px; }
}
@media (max-width: 480px) {
  .doc-body h2 { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-toc a, .doc-also { transition: none; }
  .doc-also:hover { transform: none; }
}