.legal-head {
  padding:58px 0 40px; border-bottom:1px solid var(--line)
}

.legal-head h1 {
  font-size:48px; margin:20px 0 13px
}

.legal-head p {
  color:#738997; font-size:17px
}

.legal-body {
  background:#f3f6f7; padding:50px 24px 95px
}

.legal-grid {
  display:grid; grid-template-columns:230px minmax(0,800px); justify-content:space-between; gap:55px
}

.toc {
  position:sticky; top:25px; align-self:start
}

.toc h4 {
  font-size:12px; letter-spacing:1.3px; text-transform:uppercase; margin:0 0 17px
}

.toc a {
  display:block; color:#8799a5; font-size:12px; margin:11px 0
}

.toc a:hover {
  color:var(--teal)
}

.toc a span {
  display:inline-block; width:26px; color:#aebdc4; font-variant-numeric:tabular-nums
}

.toc a:hover span {
  color:var(--teal)
}

.legal-back {
  display:inline-flex; align-items:center; gap:6px; margin-top:24px; color:var(--teal); font-size:12px; font-weight:700
}

.legal-back .cs-icon {
  width:14px; height:14px
}

.legal-meta {
  display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; color:#8b9da8; font-size:12px
}

.legal-section-number {
  display:block; color:#b3c4cd; font-size:12px; font-weight:800; letter-spacing:1.4px; margin-bottom:2px
}

.legal-content {
  font-size:14px; color:#6e8492; line-height:1.85
}

.legal-content h2 {
  font-size:25px; margin:5px 0 12px; color:var(--ink)
}

.legal-content section {
  border-bottom:1px solid #dce5e8; padding:24px 0
}

.legal-content section:first-of-type {
  padding-top:30px
}

.legal-content li {
  margin:5px 0
}

.draft-banner {
  display:flex; gap:12px; align-items:flex-start; padding:17px 20px; border:1px solid #ebd9b8; border-radius:10px; background:#fffbf3; color:#96753a; font-size:13px
}

.draft-banner strong {
  display:block; color:#86672f
}

.draft-banner p {
  margin:3px 0 0; font-size:12.5px; line-height:1.6
}

.draft-banner .cs-icon {
  flex:none; margin-top:2px; color:#b0893f
}

.table-scroll {
  margin:20px 0 4px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff
}

.table-scroll table {
  width:100%; border-collapse:collapse; font-size:12.5px; min-width:560px
}

.table-scroll th,.table-scroll td {
  text-align:left; padding:11px 14px; border-bottom:1px solid #edf1f3; vertical-align:top
}

.table-scroll th {
  background:#f8fbfc; color:#7f929f; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:800
}

.table-scroll tr:last-child td {
  border-bottom:0
}

.table-scroll code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; background:#f2f7f6; border:1px solid #e3edea; border-radius:5px; padding:1px 5px; color:#3f6259
}

.legal-contact {
  margin-top:26px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff
}

.legal-contact h2 {
  font-size:19px
}

.legal-content .legal-contact p {
  margin:0; font-size:13px
}

/* ---- Error page ---- */

.error-page {
  padding:88px 24px 110px; background:#f3f6f7
}

.error-card {
  max-width:620px; margin:0 auto; padding:46px 40px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); text-align:center
}

.error-code {
  font-size:66px; font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--pale-strong)
}

.error-card h1 {
  font-size:32px; margin:12px 0 12px
}

.error-card p {
  color:var(--muted); font-size:14px; margin:0 0 26px
}

.error-actions {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap
}

@media(max-width:780px) {
  .legal-head h1 {
    font-size:38px
  }
  .toc {
    position:static
  }
  .legal-grid {
    grid-template-columns:1fr; gap:28px
  }
  .toc a {
    display:inline-block; margin:8px 14px 8px 0
  }
  .legal-grid {
    display:block
  }
  .toc {
    margin-bottom:26px
  }
  .error-page {
    padding:56px 18px 70px
  }
  .error-card {
    padding:34px 22px
  }
  .error-code {
    font-size:52px
  }
  .error-card h1 {
    font-size:26px
  }
}