/* Shared legal-document component (lg-*): one wide translucent glass card that uses the site's card tokens (--r-panel, --surface-1 at 55% as --lg-fill, --elev, the static lit-edge ring and glow), justified fine-print running text (one column; two columns were measured and rejected: word gaps up to 5x the normal space and split sections around the tables), numbered sections, an optional table and a version footnote. Used by /privacy/, /terms/ and /trademark/. No header block, contents list, inset or anchor icons. Page-agnostic; the type scale is legal-specific (13 / 14 / 12 / 11 px) and lives in the --legal-font-* tokens below, set once here. */
.lg-card { --legal-font-body: 13px; --legal-font-heading: 14px; --legal-font-table: 12px; --legal-font-th: 11px; --legal-font-foot: 12px; --legal-font-code: 12px; --legal-ink: var(--text); --legal-ink-2: var(--text-dim);
  --lg-pad: clamp(1.25rem, 4vw, 3.5rem);
  width: 100%; max-width: none; margin: 0; padding: var(--lg-pad); box-sizing: border-box; min-width: 0;
  --lg-fill: color-mix(in srgb, var(--surface-1) 55%, transparent);
  position: relative; border: 1px solid transparent; border-radius: var(--r-panel);
  background-color: var(--lg-fill); background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  box-shadow: var(--lit-edge-glow), var(--elev);
  color: var(--legal-ink-2); font-size: var(--legal-font-body); line-height: 1.6; overflow-wrap: break-word; }
/* the card is translucent glass: no own dot pattern, so the page's single background grid (.bg__dots) shows through it. The 1px lit edge is the shared static lit-edge ring (--lit-edge-ring) drawn as a masked ring so it never paints under the fill; it does not animate. */
.lg-card::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--lit-edge-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the page background grid (.bg__dots) is the only dot layer on these pages. The legal pages sit on the calm background (dots .045); here the grid takes the site default dot strength (.07, the :root --bg-dot) so it reads through the translucent card. */
.bg[data-bg] { --bg-dot: .07; }
.lg-ent { text-transform: none; letter-spacing: normal; white-space: normal; }
.lg-card p { margin: 0 0 .9em; max-width: none; text-align: justify; text-justify: inter-word; text-align-last: left;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 5 2 2; overflow-wrap: break-word; font-size: var(--legal-font-body); line-height: 1.6; font-weight: 400; letter-spacing: normal; color: var(--legal-ink-2); }
.lg-card a { color: var(--legal-ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none; }
.lg-card a:hover { color: color-mix(in srgb, var(--legal-ink), var(--brand-tint) 45%); text-decoration-color: currentColor; }
.lg-card :focus-visible { outline: 2px solid var(--focus, #6aa2ff); outline-offset: 3px; border-radius: 3px; }
.lg-card code { font-size: var(--legal-font-code); overflow-wrap: anywhere; }
/* the product name keeps the surrounding colour and weight inside the legal card (no tint, no semibold) */
.lg-card .brand { color: inherit; font-weight: inherit; }
.lg-sec { margin: 28px 0 0; padding: 0; border: 0; scroll-margin-top: calc(var(--header-h, 4rem) + 1rem); }
.lg-card > .lg-sec:first-of-type { margin-top: 0; }
.lg-sec h2 { margin: 0 0 8px; font-size: var(--legal-font-heading); line-height: 1.4; font-weight: 600; letter-spacing: normal; color: var(--legal-ink); text-align: left; max-width: none; break-after: avoid; }
.lg-n { font-variant-numeric: tabular-nums; margin-right: .15em; }
.lg-tw { margin: .25rem 0 1rem; border-top: 1px solid var(--border); text-align: left; }
.lg-table { width: 100%; border-collapse: collapse; font-size: var(--legal-font-table); line-height: 1.55; text-align: left; table-layout: fixed; }
.lg-table th, .lg-table td { text-align: left; vertical-align: top; padding: .85rem .9rem .85rem 0; border-bottom: 1px solid var(--border); font-weight: 400; letter-spacing: normal; color: var(--legal-ink-2); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.lg-table thead th { font-family: var(--mono); font-size: var(--legal-font-th); line-height: 1.3; font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--legal-ink-2); padding-block: .7rem; background: none; }
.lg-table tbody th { text-transform: none; letter-spacing: normal; font-family: inherit; font-size: inherit; font-weight: 400; color: inherit; background: none; box-shadow: none; }
.lg-table tbody th b { display: block; font-weight: 600; color: var(--legal-ink); margin-bottom: .2rem; }
.lg-table tbody th span { display: block; }
.lg-table tbody tr, .lg-table tbody td { background: none; }
.lg-table col, .lg-table th:nth-child(1) { width: 29%; }
/* five-column table (licence overview) */
.lg-table--5 th:nth-child(1) { width: 17%; }
.lg-table--5 th:nth-child(2) { width: 17%; }
.lg-table--5 th:nth-child(3) { width: 19%; }
.lg-table--5 th:nth-child(4) { width: 20%; }
.lg-table--5 th:nth-child(5) { width: 27%; }
/* quoted attribution (licence page): neutral hairline, same text colours */
.lg-card p.lg-attr { margin: 0 0 .9em; padding: .6rem 1rem .6rem 1.1rem; border-left: 1px solid var(--border); text-align: left; -webkit-hyphens: manual; hyphens: manual; }
/* version / effective-date footnote: the last line of the text */
.lg-card p.lg-foot { margin: 28px 0 0; font-size: var(--legal-font-foot); line-height: 1.5; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 32.5rem) { .lg-card p { text-align: left; -webkit-hyphens: manual; hyphens: manual; } }
/* stacked tables: column names become small labels. Below 640px for every table; the five-column licence table does not fit cleanly in one column between 640px and 768px, so it stacks below 768px */
@media (max-width: 47.99rem) {
  .lg-table--5, .lg-table--5 tbody, .lg-table--5 tr, .lg-table--5 th, .lg-table--5 td { display: block; width: 100%; }
  .lg-table--5 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table--5 tr { padding: .9rem 0; border-bottom: 1px solid var(--border); }
  .lg-table--5 th, .lg-table--5 td { border: 0; padding: .25rem 0; }
  .lg-table--5 td::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: var(--legal-font-th); line-height: 1.3; font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--legal-ink-2); margin-bottom: .1rem; }
  .lg-table--5 th:nth-child(1) { width: 100%; }
}
@media (max-width: 39.99rem) {
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table th, .lg-table td { display: block; width: 100%; }
  .lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table tr { padding: .9rem 0; border-bottom: 1px solid var(--border); }
  .lg-table th, .lg-table td { border: 0; padding: .25rem 0; }
  .lg-table td::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: var(--legal-font-th); line-height: 1.3; font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--legal-ink-2); margin-bottom: .1rem; }
  .lg-table th:nth-child(1) { width: 100%; }
}
@media print {
  @page { size: A4; margin: 18mm; }
  body, body::before { background: #fff !important; }
  header, footer, .skip-link, .totop, nav[aria-label="Main"], [data-bg], .bg-layer { display: none !important; }
  .page-hero--title { padding-block: 0 8mm; } .page-hero--title h1, .page-hero--title .hero-key { color: #000 !important; background: none !important; -webkit-text-fill-color: #000; font-size: 18pt; }
  .lg-card::before { display: none; }
  .lg-card { width: auto; padding: 0; border: 0; border-radius: 0; background: #fff; background-image: none; box-shadow: none; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .lg-card *, .lg-card a { color: #000 !important; text-decoration: none !important; }
  .lg-card p, .lg-card .lg-table, .lg-card .lg-table th, .lg-card .lg-table td, .lg-card p.lg-foot { font-size: 10.5pt; }
  .lg-sec { break-inside: auto; } .lg-sec h2 { break-after: avoid; font-size: 11.5pt; }
  .lg-table tr { break-inside: avoid; } .lg-table th, .lg-table td, .lg-tw, .lg-card p.lg-attr { border-color: #999 !important; }
}

/* contact block at the end of the legal pages: entity, place and mailbox as a small stacked block (one implementation for Privacy, Terms and License) */
.lg-card .lg-contact { margin: 12px 0 0; break-inside: avoid; }
.lg-card .lg-contact p { margin: 0 0 6px; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.lg-card .lg-contact p:last-child { margin-bottom: 0; }
.lg-card .lg-contact__name { color: var(--text); font-weight: 600; }
.lg-card .lg-contact__place { color: var(--text-dim); }
.lg-card .lg-contact__mail { display: flex; align-items: center; gap: 8px; color: var(--text); }
.lg-card .lg-contact__mail svg { flex: none; width: 14px; height: 14px; }