/* The legal pages — /privacy, /imprint, /terms and their English twins
   under /en/. Plain HTML like the landing page, and for the same reason:
   they have to be readable by anything that fetches them, not only by a
   browser that runs the app. Tokens, header and footer come from
   /landing/landing.css; this file is only the text column. */

.legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 88px; }
@media (max-width: 600px) { .legal { padding: 32px 16px 64px; } }

.legal h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.03em; }
.legal__meta { margin-top: 10px; font-size: 14px; color: var(--fg-muted); }
.legal__note {
  margin-top: 16px; padding: 12px 16px; border-radius: 10px;
  background: var(--bg-surface); font-size: 14px; color: var(--fg-2);
}

.legal__toc { margin-top: 28px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); }
.legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 14px; }
.legal__toc li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 600px) { .legal__toc ol { columns: 1; } }

/* All four sides: landing.css gives every <section> the tall padding of a
   landing-page band. */
.legal section { margin-top: 40px; padding: 32px 0 0; border-top: 1px solid var(--border); }
.legal h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.legal h3 { margin-top: 24px; font-size: 16px; line-height: 1.4; }
.legal p { margin-top: 10px; color: var(--fg-2); }
.legal ul { margin-top: 8px; padding-left: 22px; color: var(--fg-2); }
.legal li + li { margin-top: 4px; }
.legal a { color: var(--accent); text-underline-offset: 2px; }
.legal strong { color: var(--fg); }
.legal code { font-size: 0.9em; padding: 1px 5px; border-radius: 5px; background: var(--bg-surface); overflow-wrap: anywhere; }
.legal address { font-style: normal; margin-top: 10px; color: var(--fg-2); }

/* What is asked of Google, and what for — the one table on these pages. */
.legal table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { padding: 10px 12px; text-align: left; vertical-align: top; border: 1px solid var(--border); color: var(--fg-2); }
.legal th { background: var(--bg-surface); color: var(--fg); font-weight: 600; }
/* A scope name is one word: it may move to the next line, not break in two. */
.legal td code { white-space: nowrap; }
@media (max-width: 600px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .legal td { border: none; }
  .legal td + td { border-top: 1px solid var(--border); }
  .legal td code { white-space: normal; }
}

.legal__box { margin-top: 16px; padding: 16px 20px; border-radius: 12px; background: var(--accent-tint); }
.legal__box p:first-child { margin-top: 0; }