/* Legal pages (terms, privacy): celembi-design 6.25 "Legal". One reset, Inter
   Tight heads, meta line, plain table of contents, numbered h2 at Section
   head, body at a 44em measure, a notice as a bold-led paragraph. No cards. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-body); background: var(--bg-page); line-height: 1.6; font-size: 1rem;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2 { font-family: 'Inter Tight', 'Inter Tight Fallback', 'Inter', -apple-system, sans-serif; color: var(--text-primary); }
a { color: var(--gold-ink); }

.legal { max-width: calc(44em + 2 * var(--s-4)); margin: 0 auto; padding: clamp(24px, 4vh, 40px) var(--s-4) clamp(64px, 9vh, 96px); }
.legal p a, .legal li a, .legal dd a, .legal td a, .legal .toc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal .meta { margin-bottom: var(--s-2-5); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
.legal h1 { max-width: 22em; margin-bottom: var(--s-3); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.legal .lead { max-width: 38em; margin-bottom: var(--s-4); color: var(--text-muted); font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; }
.legal h2 { margin: var(--s-6) 0 var(--s-2-5); padding-top: var(--s-3); border-top: 1px solid var(--border-hair); font-size: 1.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; scroll-margin-top: var(--s-3); text-wrap: balance; }
.legal h2 .n { display: inline-block; min-width: 2ch; margin-right: var(--s-1); font-variant-numeric: tabular-nums; }
.legal p, .legal li { max-width: 44em; font-size: 1.02rem; line-height: 1.65; }
.legal p { margin-bottom: var(--s-3); }
.legal ul, .legal ol { margin: 0 0 var(--s-3) var(--s-4); }
.legal li { margin-bottom: var(--s-1); }
.legal li[id] { scroll-margin-top: var(--s-3); }
.legal strong { color: var(--text-primary); font-weight: 600; }

/* A notice is a paragraph led by a bold word: no box, fill or edge. */
.legal .notice { margin: var(--s-4) 0; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2-5); margin: 0 0 var(--s-4); }

/* The four answers a reader looks for before the first clause. */
.facts { margin: 0 0 var(--s-4); border-bottom: 1px solid var(--border-hair); }
.facts > div { display: grid; grid-template-columns: minmax(9em, 15em) 1fr; gap: var(--s-1) var(--s-2-5); padding: var(--s-2-5) 0; border-top: 1px solid var(--border-hair); }
.facts dt { color: var(--text-primary); font-weight: 600; }
.facts dd { margin: 0; color: var(--text-body); }

/* Plain table of contents: the sections, one link each. */
.legal .toc-head { margin: 0 0 var(--s-1); color: var(--text-primary); font-family: 'Inter Tight', 'Inter Tight Fallback', 'Inter', -apple-system, sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.legal .toc { margin: 0 0 var(--s-3); list-style: none; }
.legal .toc li { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.legal .toc a { display: inline-block; padding: var(--s-1) 0; }
@media (min-width: 641px) { .legal .toc { columns: 2; column-gap: var(--s-5); } .legal .toc li { break-inside: avoid; } }

/* Article table: heads in ink, hairlines, caption below. */
.table-wrap { overflow-x: auto; margin-bottom: var(--s-3); }
.legal table { width: 100%; min-width: 34em; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; }
.legal th, .legal td { padding: var(--s-2); text-align: left; border-bottom: 1px solid var(--border-hair); vertical-align: top; }
.legal th { color: var(--text-primary); font-weight: 600; }
.legal td { color: var(--text-body); }
.legal td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legal caption { caption-side: bottom; padding: var(--s-2) 0 0; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; line-height: 1.4; text-align: left; }

@media (max-width: 640px) {
  .legal { padding-left: max(var(--s-3), env(safe-area-inset-left)); padding-right: max(var(--s-3), env(safe-area-inset-right)); }
  .legal h1 { font-size: 1.5rem; line-height: 1.3; }
  .facts > div { grid-template-columns: 1fr; gap: var(--s-0); }
  .actions .btn { flex: 1 1 100%; }
}
/* nav.css gives links their 44 px height on a coarse pointer; a short word
   also needs the width. */
@media (pointer: coarse) {
  .legal .toc a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .legal td > a:only-child { min-width: 44px; }
}