/* Shared styling for the three legal pages (terms, privacy, refunds).
 *
 * These exist because a merchant of record will not approve an account without
 * them, and because a buyer should be able to read what they are agreeing to
 * without wading through a wall of grey text.
 *
 * Neutral palette on purpose: these pages belong to the site rather than to
 * EndFrame or Script Cutter, so they do not re-point --primary the way
 * endframe.css does. They inherit styles.css's surfaces and type. */

.legal-head {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line);
}
.legal-head h1 {
  font-size: clamp(30px, 4.5vw, 44px);
  margin: 12px 0 14px;
}
.legal-updated {
  font-size: 13px;
  color: var(--faint);
}

.legal-body { padding: 40px 0 72px; }
.legal-body .wrap { max-width: 760px; }

.legal-body h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 19px;
  margin: 40px 0 12px;
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p,
.legal-body li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.legal-body p { margin-bottom: 14px; }

.legal-body ul {
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal-body li { padding-left: 18px; position: relative; }
.legal-body li::before {
  content: "";
  position: absolute; left: 2px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--faint);
}

.legal-body strong { color: var(--text); font-weight: 900; }
.legal-body a { color: var(--primary-3); text-decoration: underline; }

/* A pulled-out statement of the one thing on each page a reader most needs.
   Used sparingly — one per page at most, or it stops meaning anything. */
.legal-callout {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--keep);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 4px 0 22px;
}
.legal-callout p { margin: 0; color: var(--text); }

.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.legal-nav a { font-size: 13.5px; color: var(--faint); }
.legal-nav a:hover { color: var(--text); }
.legal-nav a.current { color: var(--text); }