/* =====================================================================
   SecureWebX — public legal pages (Privacy Policy / Terms of Service).
   Shared by the public renderer (/legal/index.php) AND the CRM compliance
   editor preview (app.securewebx.com) so both look identical. Design tokens
   mirror the credit-application form (/apply) — Geist, green, soft cards.
   The .lg-* classes style the GLBA model privacy grid.
   ===================================================================== */
:root {
    --ca-bg:          #ffffff;
    --ca-surface:     #fafbfc;
    --ca-border:      #d7dbe2;
    --ca-border-soft: #e5e8ed;
    --ca-rule:        #eef1f5;
    --ca-text-1: #131722;
    --ca-text-2: #586172;
    --ca-text-3: #8b93a1;
    --ca-green-50:  #e9f6ef;
    --ca-green-500: #1f8f57;
    --ca-green-600: #197a49;
    --ca-green-700: #13603a;
    --ca-ink:  #131722;
    --ca-r-card: 14px;
}

/* ---- Page shell (public renderer) ------------------------------------ */
.lg-page {
    background: var(--ca-bg);
    color: var(--ca-text-1);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex; flex-direction: column;
}
.lg-wrap { width: 100%; max-width: 820px; margin: 0 auto; padding: 40px 20px 30px; flex: 1 0 auto; }

/* ---- Dealer identity header ------------------------------------------ */
.lg-dealer { text-align: center; margin: 0 0 30px; }
.lg-dealer__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ca-text-3); }
.lg-dealer__name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ca-text-1); margin-top: 4px; }
.lg-dealer__meta { margin-top: 6px; font-size: 13px; color: var(--ca-text-2); line-height: 1.5; }

.lg-title { text-align: center; margin: 0 0 6px; font: 800 30px 'Geist', sans-serif; letter-spacing: -.025em; color: var(--ca-text-1); }
.lg-sub { text-align: center; margin: 0 0 30px; font-size: 14px; color: var(--ca-text-2); }
.lg-updated-note { text-align:center; font-size:12px; color: var(--ca-text-3); margin-top: -22px; margin-bottom: 30px; }

/* ---- The document card ----------------------------------------------- */
.lg-card {
    background: var(--ca-bg);
    border: 1px solid var(--ca-border-soft);
    border-radius: var(--ca-r-card);
    padding: 34px 38px;
    box-shadow: 0 1px 2px rgba(19,23,34,.04), 0 12px 30px -22px rgba(19,23,34,.25);
}
@media (max-width: 620px) { .lg-card { padding: 22px 18px; } .lg-wrap { padding: 24px 14px; } }

/* ---- Shared document typography -------------------------------------- */
.lg-doc { color: var(--ca-text-1); font-size: 14.5px; line-height: 1.6; }
.lg-doc h2, .lg-doc h3, .lg-doc h4 { color: var(--ca-text-1); letter-spacing: -.01em; margin: 26px 0 8px; }
.lg-doc h3 { font-size: 16px; font-weight: 700; }
.lg-doc h4 { font-size: 14.5px; font-weight: 700; }
.lg-doc p { margin: 0 0 12px; color: var(--ca-text-2); }
.lg-doc ul, .lg-doc ol { margin: 6px 0 12px; padding-left: 22px; color: var(--ca-text-2); }
.lg-doc li { margin: 3px 0; }
.lg-doc a { color: var(--ca-green-600); text-decoration: underline; text-underline-offset: 2px; }
.lg-doc a:hover { color: var(--ca-green-700); }
.lg-lead { font-size: 15px; color: var(--ca-text-1) !important; }
.lg-updated { margin-top: 24px; font-size: 12px; color: var(--ca-text-3) !important; }

/* ---- Top question banner (dealer privacy notice header) -------------- */
.lg-banner {
    background: var(--ca-ink); color: #fff;
    font: 800 17px 'Geist', sans-serif; letter-spacing: .01em; line-height: 1.35;
    text-transform: uppercase; padding: 16px 20px; border-radius: 8px 8px 0 0;
    margin: 0;
}
.lg-provider { font-size: 12.5px; color: var(--ca-text-2); margin: 0 0 14px; }
.lg-provider strong { color: var(--ca-text-1); font-weight: 700; }

/* ---- "Other important information" acknowledgment / signature -------- */
.lg-ack { border: 1px solid var(--ca-border); border-top: 0; padding: 16px 18px; }
.lg-ack p { color: var(--ca-text-2); }
.lg-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; margin: 22px 0 6px; }
.lg-sign__line { border-top: 1px solid var(--ca-text-1); padding-top: 6px; font-size: 12px; color: var(--ca-text-3); }
.lg-sign__line span { display: inline-block; }
.lg-sign__line .lg-date { float: right; }
.lg-disclaimer { font-size: 11.5px; font-style: italic; color: var(--ca-text-3) !important; margin: 16px 0 0; }
@media (max-width: 620px) { .lg-sign { grid-template-columns: 1fr; gap: 22px; } }

/* ---- GLBA "FACTS" banner --------------------------------------------- */
.lg-facts { width: 100%; border-collapse: collapse; margin: 0 0 0; table-layout: fixed; }
.lg-facts td { border: 2px solid var(--ca-ink); vertical-align: middle; }
.lg-facts__label {
    width: 130px; background: var(--ca-ink); color: #fff;
    font: 800 30px 'Geist', sans-serif; letter-spacing: .02em;
    text-align: center; padding: 14px 8px;
}
.lg-facts__q {
    padding: 14px 18px; font: 700 15px 'Geist', sans-serif; color: var(--ca-text-1);
    text-transform: uppercase; letter-spacing: .01em; line-height: 1.35;
}
.lg-facts--sub { margin-top: 26px; }
.lg-facts--sub .lg-facts__label { background: var(--ca-green-600); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.lg-facts--sub .lg-facts__q { border-left: 0; }

/* ---- Why / What / How + Q&A rows ------------------------------------- */
.lg-qa { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; }
.lg-qa th, .lg-qa td { border: 1px solid var(--ca-border); padding: 12px 16px; vertical-align: top; text-align: left; }
.lg-qa th {
    width: 200px; background: var(--ca-green-50); color: var(--ca-green-700);
    font: 700 14px 'Geist', sans-serif;
}
.lg-qa td { color: var(--ca-text-2); font-size: 14px; line-height: 1.55; }
.lg-qa ul { margin: 6px 0; }
@media (max-width: 620px) {
    .lg-qa, .lg-qa tbody, .lg-qa tr, .lg-qa th, .lg-qa td { display: block; width: auto; }
    .lg-qa th { border-bottom: 0; }
    .lg-qa td { border-top: 0; }
}

/* ---- Sharing grid ---------------------------------------------------- */
.lg-share { width: 100%; border-collapse: collapse; margin: 22px 0 0; }
.lg-share th, .lg-share td { border: 1px solid var(--ca-border); padding: 11px 14px; text-align: left; vertical-align: top; font-size: 13.5px; line-height: 1.5; }
.lg-share thead th { background: var(--ca-ink); color: #fff; font: 700 13px 'Geist', sans-serif; }
.lg-share tbody td:first-child { color: var(--ca-text-2); }
.lg-share .lg-yn {
    width: 130px; text-align: center; font: 700 13px 'Geist', sans-serif;
    color: var(--ca-text-1); background: var(--ca-surface); white-space: nowrap;
}
@media (max-width: 620px) {
    .lg-share thead { display: none; }
    .lg-share tr { display: block; border: 1px solid var(--ca-border); border-radius: 8px; margin-bottom: 10px; padding: 4px; }
    .lg-share td { display: block; border: 0; }
    .lg-share .lg-yn { width: auto; text-align: left; background: none; }
    .lg-share .lg-yn::before { content: attr(data-label); color: var(--ca-text-3); font-weight: 600; margin-right: 6px; }
}

/* ---- Footer ---------------------------------------------------------- */
.lg-footer { text-align: center; padding: 26px 20px 30px; color: #b7bdc7; font-size: 11.5px; line-height: 1.6; }
.lg-footer a { color: #98a0ab; text-decoration: none; }
.lg-footer a:hover { color: var(--ca-green-600); }
.lg-back { display: inline-block; margin-top: 4px; }