/* ==========================================================================
   /privacy-policy and /terms-of-service.

   Reference: autosend.com/legal/terms, for shape — a centred header, then the document on the left with a
   sticky table of contents on the right, and a slug anchor on every heading so a single clause is linkable.
   Everything visual is the site's own: the 1360/40 frame, the type roles from tokens.css (.cx-h2-display
   for the title, .cx-title for a section, .cx-q for a clause, .cx-body-16 for prose, .cx-body for the
   contents column) and the same hairlines the rest of the site uses. No new sizes enter the scale.
   ========================================================================== */
.cx-legal { background: var(--cx-page); }
.cx-legal__inner { display: flex; flex-direction: column; gap: 72px; padding: 96px 40px 120px; }

/* ---- the header, centred as the reference has it ---------------------------------------------------- */
.cx-legal__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cx-legal__eyebrow { margin: 0; color: var(--cx-ink-2); }
.cx-legal__h1 { margin: 0; max-width: 900px; }
.cx-legal__meta { margin: 0; color: var(--cx-ink-2); }

/* ---- document left, contents right. The nav comes FIRST in the DOM — it is navigation, and on a phone a
        jump list belongs at the top of a document this long — and row-reverse puts it on the right. ----- */
.cx-legal__cols { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 80px; width: 100%; }

.cx-legal__toc {
  flex: 0 0 260px; width: 260px; position: sticky; top: 104px;      /* 72 header + 32 */
  max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
}
.cx-legal__toc-title { margin: 0 0 16px; color: var(--cx-ink-3); }
.cx-legal__toc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cx-legal__toc-link {
  display: block; padding: 6px 0 6px 16px; text-decoration: none; color: var(--cx-ink-2);
  border-left: 1px solid var(--cx-line); transition: color 120ms linear, border-color 120ms linear;
}
.cx-legal__toc-link:hover { color: var(--cx-ink); }
.cx-legal__toc-link.is-current { color: var(--cx-ink); border-left-color: var(--cx-ink); }
.cx-legal__toc-link:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }

/* ---- the document ----------------------------------------------------------------------------------- */
.cx-legal__doc { flex: 1 1 0; min-width: 0; max-width: 680px; }
.cx-legal__doc > *:first-child { margin-top: 0; }

/* every heading is an anchor target, so it clears the 72px sticky header when you land on it */
.cx-legal__h2, .cx-legal__h3 { scroll-margin-top: 104px; color: var(--cx-ink); font-weight: 500; }
/* 20 for a section and 16 for a clause, both straight off the scale (.cx-lead and .cx-body-16). The rule
   and the whitespace above a section are what break the page; the size does not have to. */
.cx-legal__h2 { margin: 64px 0 20px; padding-top: 28px; border-top: 1px solid var(--cx-line); }
.cx-legal__h3 { margin: 32px 0 10px; }
.cx-legal__p { margin: 0 0 16px; color: var(--cx-ink-2); }
.cx-legal__list { margin: 0 0 16px; padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 8px; color: var(--cx-ink-2); }
.cx-legal__list li { list-style: inherit; }
.cx-legal__list li::marker { color: var(--cx-ink-3); }
/* the source marks a defined term with a darker ink; it reads as emphasis, so it is emphasis — 500, the
   second of the site's two weights, not a third */
.cx-legal__term { font-weight: 500; color: var(--cx-ink); }
.cx-legal__a { color: var(--cx-ink); text-decoration: underline; text-underline-offset: 4px; }
.cx-legal__a:hover { text-decoration-thickness: 2px; }
.cx-legal__addr { margin: 0 0 16px; font-style: normal; color: var(--cx-ink-2); }

/* ---- narrow ----------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cx-legal__inner { padding: 64px 20px 96px; gap: 48px; }
  .cx-legal__cols { flex-direction: column; gap: 40px; }
  /* the contents stop being a rail and become a jump list at the top, which is what the column order was
     chosen for; it scrolls with the page rather than pinning a third of a phone screen */
  .cx-legal__toc { position: static; flex: none; width: 100%; max-height: none; overflow: visible;
    padding-bottom: 32px; border-bottom: 1px solid var(--cx-line); }
  .cx-legal__doc { max-width: none; }
  .cx-legal__h2 { margin-top: 56px; }
}
/* on touch the contents column is the page's navigation and its entries are the only controls on it, so
   they get a 44 target — the same treatment the FAQ question takes *
@media (pointer: coarse) {
  .cx-legal__toc-link { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-legal__toc-link { transition: none; }
}