/* The terms and privacy pages: one readable column of text on the site's dark background. */

.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; }
.legal .updated { margin-top: 10px; color: var(--dim); font-size: 14px; }
.legal h2 { font-size: 1.3rem; margin: 46px 0 12px; letter-spacing: -0.02em; }
.legal h3 { font-size: 1.02rem; margin: 26px 0 8px; letter-spacing: -0.01em; }
.legal p, .legal ul, .legal ol { margin: 0 0 14px; color: #c9cdd6; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--dim); }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

.legal .summary {
  margin: 30px 0 8px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.legal .summary h2 { margin: 0 0 10px; font-size: 1.05rem; }
.legal .summary ul { margin: 0; }

.legal .table { overflow-x: auto; margin: 0 0 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: #c9cdd6; }
.legal th { color: var(--muted); font-weight: 600; font-size: 13px; border-bottom-color: var(--line); }

/* who we are: the company, at the very end of each page */
.legal .company {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 14.5px; font-style: normal;
}
.legal .company b { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
  .legal { padding: 36px 16px 60px; }
  /* the table becomes one card per row, each cell labelled */
  .legal table { min-width: 0; }
  .legal thead { display: none; }
  .legal tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal td { display: block; padding: 4px 0; border: 0; }
  .legal td::before { content: attr(data-label); display: block; color: var(--dim); font-size: 12.5px; font-weight: 600; }
  .legal td:first-child { color: var(--text); font-weight: 600; }
  .legal td:first-child::before { content: none; }
}