/* Moved out of styles.css 2026-07-08: legal-page layout and copy styles. */

.legal-shell {
  /* Legal copy reads best in a narrow measure - cap the content width even on
     wide desktops instead of stretching to the full page width. */
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 26px auto 44px;
}

.legal-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  background: var(--sf-white);
  border: 1px solid rgba(13, 59, 59, 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-card);
  padding: clamp(36px, 5vw, 64px);
}

.legal-card section {
  max-width: none;
}

.legal-card section + section {
  margin-top: 34px;
}

/* Roomier separation between legal sections on phones so dense clauses don't
   run together. */
@media (max-width: 640px) {
  .legal-shell {
    width: min(100% - 20px, 100%);
    margin: 20px auto 34px;
  }

  .legal-card {
    padding: 28px 22px;
  }

  .legal-card section + section {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(13, 59, 59, 0.08);
  }

  .legal-card h2 {
    margin-top: 22px;
  }

  .legal-card p {
    line-height: 1.7;
  }
}

.legal-card h1 {
  margin: 8px 0 14px;
  color: var(--sf-ink);
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0;
}

.legal-card h2 {
  margin: 0 0 12px;
  color: var(--sf-ink);
  font-size: clamp(1.18rem, 1.5vw, 1.38rem);
  line-height: 1.25;
}

.legal-card p {
  color: var(--sf-muted);
  font-size: clamp(0.98rem, 0.3vw + 0.9rem, 1.06rem);
  line-height: 1.7;
  max-width: none;
}

.legal-card ul {
  margin: 0 0 4px;
  padding-left: 1.4em;
  color: var(--sf-muted);
  font-size: clamp(0.98rem, 0.3vw + 0.9rem, 1.06rem);
  line-height: 1.7;
}

.legal-card li {
  margin-bottom: 8px;
}

.legal-card li:last-child {
  margin-bottom: 0;
}

.legal-updated {
  margin: 0 0 34px;
  color: var(--sf-muted);
}

/* Conspicuous "please read carefully" callout for the waiver's assumption of
   risk / release notice. */
.legal-alert {
  margin: 0 0 32px;
  padding: 16px 20px;
  border: 1px solid var(--sf-teal);
  border-left-width: 4px;
  border-radius: var(--sf-radius-sm);
  background: rgba(13, 59, 59, 0.05);
}

.legal-alert p {
  margin: 0;
  color: var(--sf-ink);
}