.legal-hero {
  padding: var(--spacing-3xl) var(--spacing-xl);
  color: var(--color-surface);
  background-color: var(--color-primary);
}

.legal-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.legal-hero .hero-subtitle {
  max-width: 850px;
  margin-top: var(--spacing-md);
}

.legal-content {
  padding: var(--spacing-3xl) var(--spacing-xl);
  background-color: var(--color-surface);
}

.legal-stack {
  gap: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.legal-card {
  gap: var(--spacing-md);
  display: flex;
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  background-color: var(--color-surface-elevated);
  flex-direction: column;
}

.legal-card .section-title {
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
}

.legal-card .section-content {
  color: var(--color-on-surface-secondary);
}

.legal-back {
  width: fit-content;
}

@media (max-width: 768px) {
  .legal-hero,
  .legal-content {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .legal-card {
    padding: var(--spacing-lg);
  }

  .legal-back {
    width: 100%;
  }
}


*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font: 16px/1.25 Arial, serif;
position: relative;
appearance: none;
}