/* Terms of Service, Privacy Policy, Refund Policy (views/legal.ts). Loaded only on these pages. */

/* The container already has the gutter; the site's headings add another one, which text blocks here do not. */
.legal h1,
.legal h2 {
  padding-inline: 0;
}

.legal {
  padding-top: clamp(40px, 6vw, 72px);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: clamp(24px, 4vw, 40px);
  margin-left: -12px;
}

.legal-nav a {
  padding: 6px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.legal-nav a:hover {
  color: var(--text);
  background: var(--glass);
  text-decoration: none;
}

.legal-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--glass-2);
}

.legal h1 {
  font-size: clamp(32px, 5vw, 44px);
}

.legal-updated {
  margin-top: 8px;
  font-size: 14px;
}

.legal .lead {
  margin-top: 24px;
}

.legal-section {
  margin-top: 36px;
}

.legal h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.legal p + p,
.legal p + ul {
  margin-top: 12px;
}

.legal ul {
  padding-left: 20px;
}

.legal li + li {
  margin-top: 8px;
}

.legal-section p,
.legal-section li {
  color: var(--muted);
}

.legal-seller {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.legal-seller-name {
  font-weight: 600;
}

.legal-seller dl {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

.legal-seller dl div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.legal-seller dt {
  color: var(--faint);
}

.legal-seller dt::after {
  content: ":";
}