/* Shared styling for the static pages: the landing, how-it-works, for-pros, and
   the two generated legal documents.

   ONE STYLESHEET RATHER THAN FIVE COPIES. The legal pages were built with their
   CSS inline, which was fine for two generated files and stops being fine the
   moment a third and fourth page want the same look. The Pro profile page keeps
   its own, because it is an app-like page rather than a document.

   SW9-133. */

:root {
  --bg: #121212;
  --card: #1E1E1E;
  --accent: #0096C7;
  --accent-warm: #F4801F;
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.55);
  --body: rgba(255, 255, 255, 0.85);
  --border: rgba(255, 255, 255, 0.08);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: var(--accent); }
.logo span { color: var(--text); }
.topnav { display: flex; gap: 16px; font-size: 14px; }

.page { max-width: 760px; margin: 0 auto; padding: 28px 20px 72px; }

h1 { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; }
.lede { margin-top: 14px; font-size: 17px; color: var(--muted); max-width: 34em; }

h2 { font-size: 18px; font-weight: 600; margin: 30px 0 10px; scroll-margin-top: 70px; }
p { margin-bottom: 14px; color: var(--body); font-size: 15px; }
li { margin-bottom: 6px; color: var(--body); font-size: 15px; }
strong { color: var(--text); }

/* Cards, used for the three-step row and the section stacks. */
.cards { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 620px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h2 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }

.band {
  margin-top: 34px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.band h2 { margin-top: 0; font-size: 21px; }

.btn {
  display: inline-block;
  margin-top: 16px;
  background: var(--accent);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 22px;
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn.warm { background: var(--accent-warm); color: #fff; }

.note { margin-top: 26px; color: var(--muted); font-size: 14px; }

.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.foot a { margin-right: 14px; }

/* Legal documents. */
.meta, .entity { color: var(--muted); font-size: 13px; }
.meta { margin-bottom: 4px; }
.entity { margin-bottom: 24px; }
.toc {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.toc-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 10px;
}
.toc ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.toc a { font-size: 14px; }
.legal-body ul { margin: 0 0 16px 22px; }