/* Styling for the generated legal pages (see website/build-legal.js).
   Reuses the design tokens from styles.css; everything here is layout and
   long-form typography, which the marketing page has no need for. */

.legal-body {
  background: var(--bg, #0a0e1a);
  color: var(--text, #e8ecf5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 1.05rem;
}

.legal-brand .brand-name span {
  color: #2e90fa;
}

.legal-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.legal-nav a {
  color: rgba(232, 236, 245, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  color: #2e90fa;
}

.legal-main {
  flex: 1;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 3rem);
}

/* ~68 characters at this size — long-form legal text is read, not skimmed, and
   a full-width column of it is genuinely harder to follow. */
.legal-doc {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(232, 236, 245, 0.86);
}

.legal-doc h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.legal-doc h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 3rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-wrap: balance;
}

.legal-doc h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  margin: 2rem 0 0.6rem;
}

.legal-doc h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin: 1.5rem 0 0.5rem;
}

.legal-doc p {
  margin: 0 0 1.1rem;
}

.legal-doc ul {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}

.legal-doc li {
  margin-bottom: 0.5rem;
}

.legal-doc strong {
  color: #fff;
  font-weight: 700;
}

.legal-doc a {
  color: #2e90fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.legal-doc hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2.5rem 0;
}

.legal-doc em {
  font-style: italic;
  color: rgba(232, 236, 245, 0.72);
}

/* Tables carry the refund matrix and the fee splits, which are the parts people
   actually come to these pages to read. They scroll inside their own box so the
   page body never scrolls sideways on a phone. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.legal-doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-size: 0.92rem;
}

.legal-doc th {
  text-align: left;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.legal-doc td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.legal-doc tr:last-child td {
  border-bottom: 0;
}

/* An unfilled [PLACEHOLDER] must be impossible to publish by accident. */
.legal-doc mark.todo {
  background: #ffd34d;
  color: #0a0e1a;
  font-weight: 700;
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

.legal-foot {
  padding: 1.5rem clamp(1rem, 5vw, 3rem) 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(232, 236, 245, 0.55);
}

.legal-foot a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}