/* Zypheral — legal pages.
   Layered on top of the site's own styles.css so the pages inherit the brand
   palette and typography. Only what a long legal document needs is added here:
   readable measure, clear hierarchy, and tables that survive a phone. */

.legal-body {
  background: var(--bg, #faf9f7);
  color: var(--ink, #1c1a17);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- header ---- */
.legal-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.09));
  background: var(--surface, #fff);
  position: sticky; top: 0; z-index: 10;
}
.legal-brand img { height: 26px; display: block; }
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-nav a {
  font-size: 13.5px; text-decoration: none; color: var(--muted, #6b6660);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.legal-nav a:hover { color: var(--ink, #1c1a17); }
.legal-nav a.is-current { color: var(--accent, #1f7a5a); border-bottom-color: var(--accent, #1f7a5a); }

/* ---- document ---- */
.legal-main {
  /* ~75 characters. Long legal prose is unreadable at full window width. */
  max-width: 46rem;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.legal-main h1 {
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 38px); line-height: 1.2; letter-spacing: -.02em;
  margin: 8px 0 24px;
}
.legal-main h2 {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 20px; line-height: 1.3; letter-spacing: -.01em;
  margin: 44px 0 14px; padding-top: 20px;
  border-top: 1px solid var(--line-soft, rgba(0,0,0,.06));
}
.legal-main h3 { font-size: 16px; margin: 28px 0 10px; }
.legal-main h4 { font-size: 14.5px; margin: 22px 0 8px; color: var(--ink-2, #37332d); }
.legal-main p { margin: 0 0 14px; }
.legal-main ul, .legal-main ol { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-main li { margin-bottom: 7px; }
.legal-main strong { color: var(--ink, #1c1a17); font-weight: 650; }
.legal-main a { color: var(--accent, #1f7a5a); }
.legal-main hr { border: 0; border-top: 1px solid var(--line-soft, rgba(0,0,0,.06)); margin: 34px 0; }
.legal-main code {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: .88em;
  background: rgba(0,0,0,.045); padding: 1px 5px; border-radius: 4px;
}

/* The one or two rules we want read, not skimmed. */
.legal-main blockquote {
  margin: 20px 0; padding: 16px 18px;
  border-inline-start: 3px solid var(--accent, #1f7a5a);
  background: var(--accent-soft, rgba(31,122,90,.06));
  border-radius: 0 8px 8px 0;
}
.legal-main blockquote p { margin: 0; }

/* Tables scroll inside their own box rather than widening the page. */
.tbl-wrap { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
.legal-main table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal-main th, .legal-main td {
  text-align: start; padding: 9px 12px; vertical-align: top;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.07));
}
.legal-main th { font-weight: 650; background: rgba(0,0,0,.025); white-space: nowrap; }

/* A gap we have not filled, shown as a gap. Never a guess. */
.pending {
  display: inline-block;
  background: #fdf1d6; color: #7a5312;
  border: 1px dashed #d9a441; border-radius: 5px;
  padding: 0 6px; font-size: .86em; font-weight: 600;
  font-family: "Geist Mono", ui-monospace, monospace;
  white-space: normal;
}

.legal-draft {
  background: #fdf1d6; border: 1px solid #e6c682; color: #6b4a10;
  border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6;
  margin-bottom: 28px;
}

.legal-foot {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--line, rgba(0,0,0,.09));
  font-size: 13px; color: var(--muted, #6b6660);
}
.legal-foot-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.legal-foot-links a { color: var(--muted, #6b6660); text-decoration: none; }
.legal-foot-links a:hover { color: var(--accent, #1f7a5a); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-top { padding: 14px 16px; }
  .legal-main { padding: 28px 16px 72px; }
  .legal-nav { gap: 12px; }
  .legal-nav a { font-size: 12.5px; }
}

@media (prefers-color-scheme: dark) {
  .legal-body { background: var(--dark-bg, #14130f); color: #e8e4dc; }
  .legal-top { background: var(--dark-surface, #1b1a15); border-bottom-color: var(--dark-line, rgba(255,255,255,.1)); }
  .legal-main th { background: rgba(255,255,255,.04); }
  .legal-main code { background: rgba(255,255,255,.07); }
  .legal-main strong { color: #fff; }
  .legal-draft { background: rgba(217,164,65,.12); border-color: rgba(217,164,65,.4); color: #f0d9a8; }
  .pending { background: rgba(217,164,65,.16); color: #f0d9a8; border-color: rgba(217,164,65,.5); }
}