/* ============ Legal pages (terms, privacy): short hero, sticky contents, prose column ============ */
.legal-hero { padding-bottom: 60px; }
.legal-hero h1 { font-size: 72px; }
.legal-hero__date { display: block; margin-top: 22px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.legal-body { position: relative; z-index: 2; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 60px; align-items: start;
  width: 1040px; max-width: calc(100% - 2 * var(--pad)); margin: 0 auto; padding-bottom: 200px; }

.legal-toc { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; }
.legal-toc small { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.legal-toc a { font-size: 14px; line-height: 1.35; letter-spacing: -0.02em; color: var(--text-2); padding: 6px 0; border-bottom: 1px solid var(--line);
  transition: color .25s var(--ease), padding-left .25s var(--ease); }
.legal-toc a:hover { color: var(--ink); padding-left: 6px; }

.legal-prose { background: var(--surface); border-radius: 24px; padding: 48px 56px; }
.legal-sec { scroll-margin-top: 96px; }   /* the contents links target the section, and the navbar is fixed */
.legal-sec + .legal-sec { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-sec h2 { display: flex; gap: 14px; font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.legal-sec h2 b { flex: none; font-size: 13px; font-weight: 500; line-height: 2.5; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.legal-sec h3 { margin-top: 26px; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.legal-sec p, .legal-sec li { font-size: 16px; line-height: 1.55; letter-spacing: -0.015em; font-weight: 400; color: var(--text-2); }
.legal-sec p { margin-top: 14px; }
.legal-sec h3 + p { margin-top: 8px; }
.legal-sec ul { margin-top: 14px; padding-left: 20px; list-style: none; }
.legal-sec li { position: relative; margin-top: 8px; }
.legal-sec li::before { content: ''; position: absolute; left: -16px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.legal-sec b { color: var(--ink); font-weight: 500; }
.legal-sec a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-sec a:not(.btn):hover { text-decoration-color: var(--ink); }
.legal-sec .btn { margin-top: 22px; }
.legal-sec address { margin-top: 14px; font-size: 16px; line-height: 1.55; letter-spacing: -0.015em; font-style: normal; color: var(--text-2); }

@media (max-width: 1100px) {
  .legal-hero h1 { font-size: 54px; }
  .legal-body { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: relative; top: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
  .legal-toc small { grid-column: 1 / -1; }
  .legal-prose { padding: 36px 40px; }
}
@media (max-width: 809px) {
  .legal-hero { padding: 160px 20px 40px; }
  .legal-hero h1 { font-size: 40px; }
  .legal-body { max-width: calc(100% - 40px); padding-bottom: 140px; }
  .legal-toc { display: none; }   /* a 13-item contents list would fill a whole phone screen before the text starts */
  .legal-prose { padding: 26px 24px; border-radius: 20px; }
  .legal-sec h2 { font-size: 23px; }
  .legal-sec + .legal-sec { margin-top: 32px; padding-top: 32px; }
}