/* Legal pages: one readable column on the app's grey ground. */
.doc { padding-block: 32px 24px; }
.doc .wrap { max-width: 760px; display: grid; gap: 40px; }
.doc-head { display: grid; gap: 12px; }
.doc-head h1 { font-size: clamp(36px, 5vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.updated { font-size: 14px; font-weight: 600; color: var(--text-faint); }
.intro { font-size: 18px; line-height: 1.6; color: var(--text-muted); }

.doc section { display: grid; gap: 12px; }
.doc h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.doc h3 { font-size: 16px; letter-spacing: -.01em; margin-top: 8px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: var(--text-muted); max-width: 65ch; }
.doc b { color: var(--text); font-weight: 700; }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

.summary { display: grid; gap: 12px; padding: 24px; }
.summary h2 { font-size: 17px; }
.summary li { color: var(--text); font-weight: 600; }

.table { overflow-x: auto; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--card-border); box-shadow: var(--shadow-1); }
.table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 18px; line-height: 1.55; }
.table th { font-size: 13px; font-weight: 700; color: var(--text-muted); border-bottom: .5px solid var(--border); }
.table td { color: var(--text-muted); }
.table td:first-child { color: var(--text); font-weight: 600; }
.table tr + tr td { border-top: .5px solid var(--border); }
.note { font-size: 14px; line-height: 1.6; color: var(--text-faint); padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-alt); }
.note a { color: var(--text-muted); font-weight: 700; }

/* On a phone the two-column table becomes one card per row. */
@media (max-width: 600px) {
  .table table, .table tbody, .table tr, .table td { display: block; min-width: 0; }
  .table thead { display: none; }
  .table tr { padding: 14px 18px; }
  .table tr + tr { border-top: .5px solid var(--border); }
  .table tr + tr td { border-top: 0; }
  .table td { padding: 0; }
  .table td + td { margin-top: 6px; font-size: 14px; }
}