/* The privacy policy and terms pages (privacy.html, terms.html). Loaded after site.css and uses its tokens.
   Layout: a contents list on the left from 1000px up (sticky; hidden on narrower screens, as Stripe's is), one reading column of about 68 characters. */

.legal-head { padding-block: clamp(40px, 7vw, 88px) 28px; }
.legal-head h1 { font-size: clamp(40px, 7vw, 72px); margin-top: 14px; }
.legal-head .dates { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.legal-head .lede { margin-top: 18px; }

.legal { display: grid; gap: 40px; padding-bottom: 96px; }
@media (min-width: 1000px) { .legal { grid-template-columns: 240px minmax(0, 1fr); gap: 72px; } }

.toc { display: none; font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 18px; }
.toc p { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { display: grid; gap: 6px; counter-reset: toc; }
.toc a { color: var(--muted); text-decoration: none; display: block; padding-block: 2px; }
.toc a:hover { color: var(--fg); text-decoration: underline; }
@media (min-width: 1000px) { .toc { display: block; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; } }

.prose { max-width: 68ch; min-width: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: clamp(27px, 3.4vw, 34px); margin-top: 56px; padding-top: 8px; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; }
.prose ul { display: grid; gap: 8px; padding-left: 0; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.prose a { overflow-wrap: anywhere; }
.prose strong { font-weight: 600; }

/* The short version: a card at the top of each page. */
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.summary h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 0 0 10px; padding: 0; }
.summary ul { gap: 8px; }

/* Who handles what: a plain table that becomes stacked rows on a phone. */
.vendors { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.vendors th, .vendors td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-top: 1px solid var(--line); }
.vendors th { font-weight: 600; }
.vendors thead th { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 0; }
@media (max-width: 640px) {
  .vendors thead { display: none; }
  .vendors tr { display: block; border-top: 1px solid var(--line); padding-block: 10px; }
  .vendors th, .vendors td { display: block; border: 0; padding: 2px 0; }
}