.hc-legal-page {
  background: var(--color-bg);
  color: var(--color-text);
}

.hc-legal-hero {
  padding-top: clamp(128px, 12vw, 190px);
  padding-bottom: var(--container-gap);
}

.hc-legal-hero-inner {
  display: grid;
  gap: calc(var(--container-gap) / 2);
}

.hc-legal-kicker {
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--color-ink-12);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.hc-legal-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: -0.045em;
}

.hc-legal-hero p {
  max-width: 860px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
}

.hc-legal-content {
  padding-bottom: calc(var(--container-gap) * 2);
}

.hc-legal-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: var(--container-gap);
  align-items: start;
}

.hc-legal-aside {
  position: sticky;
  top: calc(18px + 88px + 24px);
  display: grid;
  gap: var(--space-18);
  padding: var(--container-gap);
  border: 1px solid var(--color-ink-12);
  border-radius: var(--radius-3xl);
  background: var(--color-white);
}

.hc-legal-aside > span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.hc-legal-aside nav {
  display: grid;
  gap: var(--space-8);
}

.hc-legal-aside a {
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.hc-legal-aside a:hover,
.hc-legal-aside a.is-active {
  background: var(--color-surface);
  color: var(--color-text);
}

.hc-legal-article {
  display: grid;
  gap: calc(var(--container-gap) / 2);
}

.hc-legal-section {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: calc(var(--container-gap) / 2);
  padding: var(--container-gap);
  border: 1px solid var(--color-ink-12);
  border-radius: var(--radius-3xl);
  background: var(--color-white);
}

.hc-legal-section-number {
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
}

.hc-legal-section h2 {
  margin: 0 0 14px;
  font-size: var(--fs-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.hc-legal-section p,
.hc-legal-section li {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--line-height-body);
}

.hc-legal-section p {
  margin: 0 0 12px;
}

.hc-legal-section ul {
  display: grid;
  gap: var(--space-8);
  margin: 14px 0 0;
  padding-left: 20px;
}


.hc-legal-lead-card {
  padding: var(--container-gap);
  border: 1px solid var(--color-ink-12);
  border-radius: var(--radius-3xl);
  background: var(--color-white);
}

.hc-legal-lead-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--line-height-body);
}

.hc-legal-subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-ink-12);
}

.hc-legal-subsection h3 {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

@media (max-width: 992px) {
  .hc-legal-grid {
    grid-template-columns: 1fr;
  }

  .hc-legal-aside {
    position: static;
  }

  .hc-legal-aside nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hc-legal-aside nav {
    grid-template-columns: 1fr;
  }

  .hc-legal-section {
    grid-template-columns: 1fr;
  }
}