body {
  background: var(--surface-canvas);
  color: var(--text-secondary);
}

.legal-header,
.legal-main,
.legal-footer {
  width: min(820px, calc(100% - 2 * var(--space-24)));
  margin-inline: auto;
}

.legal-header {
  padding-block: var(--space-24) var(--space-80);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text-primary);
  font-family: var(--ts-eyebrow-s-family);
  font-size: var(--ts-eyebrow-s-size);
  font-weight: var(--ts-eyebrow-s-weight);
}

.legal-brand::before {
  content: "";
  width: var(--space-32);
  height: var(--space-32);
  background: url("/assets/logo/streetbeat-mark.svg") center / contain no-repeat;
}

.legal-main {
  padding-bottom: var(--space-96);
}

.legal-main h1,
.legal-main h2 {
  color: var(--text-primary);
}

.legal-main h1 {
  margin-bottom: var(--space-12);
  font-family: var(--ts-heading-m-family);
  font-size: var(--ts-heading-m-size);
  font-weight: var(--ts-heading-m-weight);
  line-height: var(--ts-heading-m-line);
  letter-spacing: var(--ts-heading-m-spacing);
}

.legal-main h2 {
  margin: var(--space-48) 0 var(--space-12);
  font-family: var(--ts-heading-3xs-family);
  font-size: var(--ts-heading-3xs-size);
  font-weight: var(--ts-heading-3xs-weight);
  line-height: var(--ts-heading-3xs-line);
  letter-spacing: var(--ts-heading-3xs-spacing);
}

.legal-main p,
.legal-main li {
  max-width: 74ch;
  font-family: var(--ts-body-base-family);
  font-size: var(--ts-body-base-size);
  line-height: 1.72;
}

.legal-main p + p,
.legal-main ul + p {
  margin-top: var(--space-16);
}

.legal-main ul {
  padding-left: var(--space-24);
}

.legal-main li + li {
  margin-top: var(--space-10);
}

.legal-main a,
.legal-footer a {
  color: var(--text-accent-green-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.effective {
  margin-bottom: var(--space-40);
  color: var(--text-tertiary);
}

.summary {
  margin-bottom: var(--space-32);
  padding: var(--space-24);
  border: 1px solid color-mix(in srgb, var(--accent-green) 32%, var(--border-subtle));
  border-radius: var(--radius-md);
  background: var(--accent-green-soft);
  color: var(--text-primary);
}

.legal-footer {
  padding-block: var(--space-24) var(--space-40);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-family: var(--ts-body-xs-family);
  font-size: var(--ts-body-xs-size);
}

@media (max-width: 600px) {
  .legal-header {
    padding-bottom: var(--space-48);
  }
}