/* Shared by the legal document pages (privacy-policy, terms, cookie-policy).
   Layout matches imprint.html; the .legal-doc rules are the typography of the
   documents themselves, which are written out as HTML on each page. The PDF
   of each document is still linked from the page's Open / Download buttons.
   Not hashed, so firebase.json serves it no-cache like site.css. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.legal { flex: 1; background: var(--cream); padding: clamp(56px, 9vh, 104px) 0; }
.legal .wrap { max-width: 800px; }
.legal-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em;
                 text-transform: uppercase; color: var(--clay); margin: 0 0 18px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; color: var(--ink);
            letter-spacing: -0.025em; margin: 0 0 12px; }
.legal-meta { margin: 0 0 28px; color: var(--text-dim); font-size: 15px; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; }
.legal a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:not(.btn):hover { color: var(--clay); }

/* The document. Three heading levels: h2 is a clause or schedule, h3 a
   sub-clause, h4 a small run-in label inside a schedule. */
.legal-doc { color: var(--text-soft); font-size: 17px; line-height: 1.6; }
.legal-doc > .lead { margin: 0 0 8px; }
.legal-doc h2 { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.2; color: var(--ink);
                margin: 44px 0 14px; scroll-margin-top: 96px; }
.legal-doc h2.part { font-family: var(--font-mono); font-size: 13px; font-weight: 500;
                     letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay);
                     margin: 64px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.legal-doc h2.part + h2 { margin-top: 18px; }
.legal-doc h3 { font-size: 19px; line-height: 1.3; color: var(--ink); margin: 30px 0 10px;
                scroll-margin-top: 96px; }
.legal-doc h4 { font-family: var(--font-mono); font-size: 13px; font-weight: 500;
                letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay);
                margin: 26px 0 8px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin: 0 0 8px; }
.legal-doc li::marker { color: var(--clay); }
.legal-doc .closing { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
                      font-size: 15px; color: var(--text-dim); }

/* Tables (sub-processors, retention, cookies). Wide tables scroll sideways on
   a phone inside .table-scroll rather than widening the page. */
.legal-doc .table-scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45;
                   background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 12px;
                               border-bottom: 1px solid var(--line); }
.legal-doc tr:last-child td { border-bottom: 0; }
.legal-doc th { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
                letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay);
                background: var(--cream-2); white-space: nowrap; }
.legal-doc td:first-child { color: var(--ink); font-weight: 600; }
.legal-doc .cols-4 { min-width: 640px; }
.legal-doc .cols-3 { min-width: 520px; }

@media (max-width: 640px) {
  .legal-actions .btn { flex: 1; justify-content: center; }
  .legal-doc { font-size: 16px; }
  .legal-doc h2 { margin-top: 36px; }
}