/* ========================================
   Legal / text-based pages (Privacy Policy, Terms of Use, Client
   Disputes, and similar strict text-heavy pages going forward).
   Typography and color match the rest of the site (homepage, How It
   Works, FAQ) via the --cs- variables from clientscore-dashboard.css
   and the same heading/body type scale used there, rather than a
   one-off palette.
   Scoped under .policy-wrap (Privacy Policy), .terms-of-use-wrap
   (Terms of Use), and .disputes-wrap (Client Disputes) - the wrapper
   classes actually used in each page's HTML widget content - plus
   .cs-legal-content as an alias in case a future page's content uses
   that name instead. Keeps rules from leaking onto the shared site
   header/footer/nav.
======================================== */

.policy-wrap h1,
.terms-of-use-wrap h1,
.disputes-wrap h1,
.cs-legal-content h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--cs-text);
    line-height: 1.15;
    margin: 0 0 8px 0;
}

.policy-wrap .updated,
.terms-of-use-wrap .updated,
.disputes-wrap .updated,
.cs-legal-content .updated {
    color: var(--cs-muted);
    font-size: 14px;
    margin: 0 0 36px 0;
}

.policy-wrap h2,
.terms-of-use-wrap h2,
.disputes-wrap h2,
.cs-legal-content h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--cs-text);
    margin: 36px 0 12px 0;
}

.policy-wrap p,
.policy-wrap li,
.terms-of-use-wrap p,
.terms-of-use-wrap li,
.disputes-wrap p,
.disputes-wrap li,
.cs-legal-content p,
.cs-legal-content li {
    font-size: 16px;
    color: var(--cs-muted);
    line-height: 1.7;
}

.policy-wrap p,
.terms-of-use-wrap p,
.disputes-wrap p,
.cs-legal-content p {
    margin: 0 0 14px 0;
}

.policy-wrap ul,
.terms-of-use-wrap ul,
.disputes-wrap ul,
.cs-legal-content ul {
    margin: 0 0 14px 0;
    padding-left: 22px;
}

.policy-wrap li,
.terms-of-use-wrap li,
.disputes-wrap li,
.cs-legal-content li {
    margin-bottom: 6px;
}

.policy-wrap a,
.terms-of-use-wrap a,
.disputes-wrap a,
.cs-legal-content a {
    color: var(--cs-blue);
    text-decoration: underline;
}

.policy-wrap a:hover,
.terms-of-use-wrap a:hover,
.disputes-wrap a:hover,
.cs-legal-content a:hover {
    color: var(--cs-blue-dark);
}

.policy-wrap .placeholder,
.terms-of-use-wrap .placeholder,
.disputes-wrap .placeholder,
.cs-legal-content .placeholder {
    background: #fff6d8;
    padding: 1px 4px;
    border-radius: 3px;
}

@media (max-width: 767px) {
    .policy-wrap h1,
    .terms-of-use-wrap h1,
    .disputes-wrap h1,
    .cs-legal-content h1 {
        font-size: 28px;
    }
}