/* Feature, comparison and changelog pages. Builds on base.css + legal.css. */

.legal-top nav { flex-wrap: wrap; justify-content: flex-end; }

.page-crumbs { font-size: 14px; color: var(--muted); }
.page-crumbs a { color: var(--muted); text-decoration: none; }
.page-crumbs a:hover { color: var(--ink); }
.legal .page-crumbs + h1 { margin-top: 10px; }

.page-cta {
  margin-top: 28px; padding: 22px 24px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.legal .page-cta p { margin: 0; font-size: 15px; color: var(--muted); }
.legal .page-cta a.btn { text-decoration: none; }
.page-cta__buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.legal ol.page-steps { margin-top: 14px; padding-left: 1.4em; list-style: decimal; }
.legal ol.page-steps li + li { margin-top: 8px; }

.legal .page-yes { color: var(--green); font-weight: 600; }
.legal .page-no { color: var(--muted); }

.page-related { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.legal .page-related a {
  display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600;
}
.page-related a span { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 14px; }
.page-related a:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }

.legal .page-release h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.legal .page-release time { font-size: 15px; font-weight: 400; color: var(--muted); }

.page-404 { text-align: center; }
.legal .page-404 .page-cta { justify-content: center; }