/* The three legal pages (/terms, /privacy, /cookies). Loads landing.css first for the shared brand tokens
   (--red, --near-black, --slate, --bg) and the header/footer it already defines; this file is only the
   document-reading layout and the markdown-rendered typography. */

.legal-page {
  box-sizing: border-box;
  padding: 48px 24px 64px;
  display: flex;
  justify-content: center;
}

.legal-card {
  width: 100%;
  max-width: 760px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 48px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(5,6,6,0.08);
  color: var(--near-black);
}

/* ---- Rendered markdown typography ---- */
.legal-card h1 {
  font-family: Poppins, Arial, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.2;
  margin: 0 0 8px;
}
.legal-card h1 + p {
  color: var(--slate); font-size: 14px; margin-top: 0; margin-bottom: 24px;
}
.legal-card h2 {
  font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3;
  margin: 36px 0 12px;
}
.legal-card h2:first-of-type { margin-top: 28px; }
.legal-card h3 {
  font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 16px;
  margin: 24px 0 10px;
}
.legal-card p, .legal-card li {
  font-size: 15px; line-height: 1.6; color: var(--near-black);
}
.legal-card p { margin: 0 0 14px; }
.legal-card ul, .legal-card ol { margin: 0 0 14px; padding-left: 22px; }
.legal-card li { margin-bottom: 6px; }
.legal-card a { color: var(--red); text-decoration: underline; }
.legal-card a:hover { text-decoration: none; }
.legal-card strong { font-weight: 700; }
.legal-card hr { border: none; border-top: 1px solid #E2E6EA; margin: 32px 0; }
.legal-card em { color: var(--slate); font-style: italic; }

/* The table's own wrapper (src/legal.ts wraps every <table> marked emits) is the scroll container - max-width:
   100% keeps IT constrained to the card, while the table inside can render at its natural/min width and scroll
   within the wrapper. Putting overflow-x on the <table> element directly doesn't work: min-width on the table
   overrides its own width:100%, so the table just renders wider than its parent with nothing there to scroll. */
.legal-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; }
.legal-card table {
  width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; font-size: 13px;
}
.legal-card th, .legal-card td {
  text-align: left; padding: 10px 12px; border: 1px solid #E2E6EA; vertical-align: top; line-height: 1.5; white-space: normal;
}
.legal-card th { background: var(--bg); font-weight: 700; }

@media (max-width: 640px) {
  .legal-page { padding: 32px 16px 48px; }
  .legal-card { padding: 28px 20px; border-radius: 16px; }
  .legal-card h1 { font-size: 26px; }
}