/* Privacy policy and support: the home page's section head, numbered index and
   closing section, over a long document split into cards. */

/* Runs up behind the floating header, as the home page's hero does. */
.doc-hero {
  margin-top: calc(-12px - 58px);
  padding-top: calc(72px + 70px);
  background: radial-gradient(50% 90% at 20% 0%, rgba(45, 95, 63, 0.4), rgba(7, 9, 10, 0) 70%);
  max-width: none;
}
.doc-hero .section-head { max-width: 1112px; margin: 0 auto; }
.doc-hero h1 {
  width: fit-content;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
}
.doc-hero .lead { max-width: 760px; color: #c9d2cc; font-size: 19px; margin: 0 0 22px; }
.doc-hero .hero-pill { backdrop-filter: none; -webkit-backdrop-filter: none; }

.doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

/* The index: a column beside the document, the home page's pill row when narrow. */
@media (min-width: 961px) {
  .doc-layout .chapter-index {
    flex-direction: column;
    align-self: start;
    top: calc(var(--bar-h) + 16px);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .doc-layout .chapter-index a { flex: none; border-radius: 12px; border-color: transparent; line-height: 1.4; }
  .doc-layout .chapter-index a span { flex: none; }
  .doc-layout .chapter-index a.is-active { border-color: var(--green); }
}

.doc-doc { display: grid; gap: 20px; }

.doc-section {
  scroll-margin-top: calc(var(--bar-h) + 16px);
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--surface-strong), rgba(255, 255, 255, 0.01));
}
.doc-section h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; margin: 6px 0 14px; }
.doc-section h3 { font-size: 18px; margin: 26px 0 6px; color: var(--green); }
.doc-section p, .doc-section li { color: #d6ddd8; }
.doc-section strong { color: var(--text); }
.doc-section > :last-child { margin-bottom: 0; }

/* The one promise worth finding at a glance. */
.doc-section .doc-note {
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--surface);
}

.doc-final { margin-top: 56px; scroll-margin-top: var(--bar-h); }
.doc-final .btn-primary { max-width: 100%; }

@media (max-width: 960px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .doc-section { scroll-margin-top: calc(var(--bar-h) + 69px); }
  .doc-final { scroll-margin-top: calc(var(--bar-h) + 69px); }
}

@media (max-width: 560px) {
  .doc-hero { padding-top: calc(48px + 70px); }
  .doc-layout { padding-left: 16px; padding-right: 16px; }
  .doc-section { padding: 24px 20px; border-radius: 20px; }
}

/* Documents get printed and saved: all of it, without the chrome. */
@media print {
  .bar, .chapter-index { display: none; }
  .doc-layout { display: block; }
}