/* ============================================================
   Legal pages - long-form policy text (Data Processing Agreement,
   and any future Privacy Policy / Terms of Service page). Plain
   prose in a comfortable reading column, reusing the site's real
   tokens rather than inventing new type/colour values.
   ============================================================ */
.legal-doc { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 40px; }
.legal-doc__updated { font-family: var(--font-ui); font-size: 14px; color: var(--text-secondary); }
.legal-doc__section { display: flex; flex-direction: column; gap: 16px; }
.legal-doc__section h2 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); }
.legal-doc__section p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.legal-doc__section ul, .legal-doc__section ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.legal-doc__section li { text-wrap: pretty; }

/* The pricing/add-ons tables (clauses 7 and 11) are 4 columns wide,
   which doesn't fit .legal-doc's 760px reading column on mobile - the
   wrapper scrolls horizontally rather than squeezing cells unreadably
   thin, same trade-off as any other data table on a narrow screen. */
.legal-doc__table-wrap { width: 100%; overflow-x: auto; }
.legal-doc__section table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.legal-doc__section th, .legal-doc__section td { text-align: left; padding: 12px 16px 12px 0; border-bottom: var(--border-width) solid var(--border-default); vertical-align: top; }
.legal-doc__section th { font-family: var(--font-ui); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; }
.legal-doc__section td:first-child, .legal-doc__section th:first-child { font-weight: 600; }

/* CookieYes's own audit-table widget (Cookies section, Privacy and
   Cookies page only) renders several category blocks - Necessary,
   Analytics, Functional... - as its own heading/paragraph/table markup
   inside .cky-audit-table-element, with no space of its own between a
   category's description text and the table that follows it: reported
   live as text "bunched up" against the table above it. .legal-doc's
   16px flex gap only applies between .legal-doc__section's own direct
   children (the single div this whole widget renders into counts as
   one), not inside whatever CookieYes renders inside that div, so this
   adds the breathing room back, scoped to this one widget rather than
   .legal-doc__section table generally - the Terms and Conditions
   pricing table already gets its own spacing from the surrounding
   paragraph's normal flow and doesn't need this. */
.cky-audit-table-element table { margin-top: 16px; }