/* =====================================================
   VELLA · LEGAL PAGES
   Loaded after styles.css on /privacy-policy, /terms,
   /delete-account, /community and /support. Generated
   by tools/build-legal.mjs; the prose comes from legal/.
   ===================================================== */

.legal-page .site-header { position: sticky; }
.legal-page main { padding-top: 0; }

.band.legal {
  padding-top: clamp(48px, 7vh, 88px);
  padding-bottom: clamp(72px, 10vh, 120px);
}

/* The row of the five pages, current one set in orange. */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 44px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-nav a { color: var(--text-dim); transition: color 0.2s; }
.legal-nav a:hover { color: var(--text); }
.legal-nav [aria-current="page"] { color: var(--orange); }

.legal-body h1 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
}
.legal-body .legal-updated {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 40px;
}
.legal-body .legal-updated strong { font-weight: 500; color: var(--text-dim); }

.legal-body h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
  margin: 52px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.legal-body h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  margin: 30px 0 10px;
}

.legal-body p,
.legal-body li,
.legal-body td,
.legal-body th {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}
.legal-body p { margin: 0 0 16px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-dim); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--orange); }

/* Numbered clauses: the number hangs in the margin on wide screens. */
.legal-body .clause { position: relative; }
.legal-body .clause-no {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--text-dim);
  margin-right: 6px;
}
@media (min-width: 900px) {
  .legal-body .clause { padding-left: 0; }
  .legal-body .clause-no { position: absolute; left: -64px; top: 3px; width: 56px; text-align: right; margin-right: 0; }
}

.legal-body ul,
.legal-body ol { margin: 0 0 20px; padding-left: 24px; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body em { font-style: italic; color: var(--text-muted); }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--text-dim); }

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15px;
}
.legal-body th,
.legal-body td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
}
.legal-body th {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.legal-body td:first-child { color: var(--text); }

@media (max-width: 640px) {
  .legal-body table { display: block; overflow-x: auto; }
}

/* The policy pages carry no signup form; hide the sticky prompt. */
.legal-page .sticky-cta { display: none; }