.legal-page {
  --color-text:#202321;
  --color-muted:#626960;
  --color-accent:#147788;
  --border-1:#dfe3dd;
  background:#f7f7f5;
  color:var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.legal-page .topbar,
.legal-page .site-footer {
  width: 100%;
  background:#f7f7f5;
  color:var(--color-text);
  border-color:var(--border-1);
}

.legal-page .brand{color:var(--color-text);font-weight:750;letter-spacing:-.045em}
.legal-page .btn-primary{background:#09bad8;color:#072b31;border-color:#09bad8}
.legal-page .legal-date{font-size:.75rem;color:var(--color-muted)}
.legal-page .topbar{position:static}
.legal-content :where(a,button):focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}

.legal-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 3.6rem 2.8rem 4.8rem;
  overflow-wrap: anywhere;
}

.legal-heading,
.legal-content section {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.legal-heading {
  gap: 1.2rem;
}

.legal-heading h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
}

.legal-heading p {
  color: var(--color-muted);
}

.legal-content section h2 {
  font-size: 1.2rem;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.legal-content section p {
  font-size: .9rem;
  line-height: 1.75;
}

.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal-content a:hover {
  color: var(--color-text);
}

.legal-page .site-footer [aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (max-width: 640px) {
  .legal-page .topbar,
  .legal-page .site-footer {
    padding-inline: 1rem;
  }

  .legal-page .topbar {
    flex-wrap: wrap;
  }

  .legal-content {
    padding: 2.4rem 1rem 3.2rem;
    gap: 2rem;
  }
}

@media (forced-colors: active) {
  .legal-content a,
  .legal-page .site-footer a {
    color: LinkText;
  }
}