/* DeepPlay website: the legal pages' layout (plan 10 PG-01), a stylesheet of their own that only the legal
   pages link, after the site's (src/tokens.css + src/kit.css + src/styles.css): the home pages never load it,
   so their text budget (plan 10 §2.6, HTML + CSS + JS ≤ 60 KB as sent) is not spent on it. One reading column
   under the fixed bar; each section an anchor with its heading; the security commitments as named points; the
   company's address as written. Logical properties only, so <html dir="rtl"> mirrors it. */
.legal { padding-block-start: calc(var(--nav-h) + var(--sat) + clamp(28px, 5vw, 64px)); }
.legal .wrap { width: min(100% - 2 * var(--gutter), 760px); }
.legal__head { display: grid; gap: 12px; margin-block-end: clamp(20px, 4vw, 36px); }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 700; overflow-wrap: anywhere; }
.legal section { display: grid; gap: 12px; padding-block: 24px; border-block-start: 1px solid var(--line); }
.legal h2 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.25; }
.legal section p, .legal dd, .legal address { color: var(--text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.legal section a { text-decoration: underline; text-decoration-thickness: 1px; }
.legal strong, .legal dt { color: var(--text); font-weight: 600; }
.legal address { font-style: normal; }
.legal__points { display: grid; gap: 14px; margin: 0; }
.legal__points dd { margin: 0; }