/* ============================================================================
   CargoFlow — legal pages (Terms / Privacy / DPA)
   Shares tokens + header/footer styling with home.css. This file only adds
   the prose column and the draft-review banner.
   ========================================================================== */

.legal-main { padding: 48px 0 80px; }
.legal-wrap { max-width: 760px; }

.draft-banner {
  background: var(--red-soft);
  border: 1px solid rgba(216, 31, 42, 0.35);
  color: var(--ink);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 32px;
}
.draft-banner strong { color: var(--red-dark); }

.legal-wrap .eyebrow {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 6px;
}

.legal-wrap h1 {
  font-family: var(--cond);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin: 0 0 6px;
  color: var(--ink);
}

.legal-meta {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 36px;
}

.legal-wrap section {
  margin-bottom: 30px;
}

.legal-wrap h2 {
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.legal-wrap p,
.legal-wrap li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}

.legal-wrap ul {
  margin: 0;
  padding-left: 20px;
}
.legal-wrap li { margin-bottom: 8px; }
.legal-wrap li:last-child { margin-bottom: 0; }

.legal-wrap a { color: var(--red); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }

.legal-wrap code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.legal-wrap .callout {
  background: var(--panel-2);
  border-left: 3px solid var(--red);
  padding: 14px 16px;
  border-radius: 4px;
}

.legal-footnote {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}

.site-footer .legal-links {
  color: var(--muted-2, var(--muted));
  font-size: 13px;
}
.site-footer .legal-links a {
  color: inherit;
  text-decoration: none;
  margin: 0 2px;
}
.site-footer .legal-links a:hover { color: var(--red); text-decoration: underline; }