/* legal.css - the three published documents (privacy, terms, acceptable use).
   They were three inline copies of the same stylesheet that had drifted; this is the one copy.
   The pages are public and have no theme switch, so they read the literal gray ramp on purpose. */

html, body { margin: 0; padding: 0; }
body {
    font-family: var(--bk-font-sans);
    background: var(--bk-gray-0);
    color: var(--bk-gray-900);
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}
a { color: var(--bk-brand-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bk-brand) 30%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--bk-brand); }

.lg-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.lg-topbar {
    border-bottom: 1px solid var(--bk-gray-200);
    background: color-mix(in srgb, var(--bk-gray-0) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 50;
}
.lg-topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.lg-brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--bk-gray-900);
}
.lg-brand-mark { flex-shrink: 0; display: flex; }
.lg-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.lg-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.lg-brand-sub {
    font-size: 10px; color: var(--bk-gray-500); font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
}
.lg-back {
    font-size: 13px; color: var(--bk-gray-600);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.lg-back:hover { color: var(--bk-gray-900); text-decoration: none; }
.lg-back svg { width: 14px; height: 14px; }

.lg-header {
    padding: 56px 0 32px;
    border-bottom: 1px solid var(--bk-gray-100);
}
.lg-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    color: var(--bk-brand-text); letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 14px;
}
.lg-h1 {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800; letter-spacing: -.025em;
    line-height: 1.1; margin: 0 0 14px;
    color: var(--bk-gray-900);
}
.lg-meta {
    display: flex; gap: 24px; flex-wrap: wrap;
    font-size: 13px; color: var(--bk-gray-500);
}
.lg-meta strong { color: var(--bk-gray-700); font-weight: 600; }

.lg-body { padding: 40px 0 80px; }

.lg-toc {
    background: var(--bk-gray-50);
    border: 1px solid var(--bk-gray-200);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 40px;
}
.lg-toc-h {
    font-size: 12px; font-weight: 700;
    color: var(--bk-gray-600); text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 12px;
}
.lg-toc ol {
    list-style: none; padding: 0; margin: 0;
    counter-reset: lg-toc;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
}
.lg-toc li { counter-increment: lg-toc; }
.lg-toc li::before {
    content: counter(lg-toc) ".";
    display: inline-block; width: 22px;
    color: var(--bk-gray-400);
    font-variant-numeric: tabular-nums;
}
.lg-toc a { color: var(--bk-gray-700); text-decoration: none; font-size: 14px; }
.lg-toc a:hover { color: var(--bk-brand-text); text-decoration: underline; }

.lg-section {
    padding: 28px 0;
    border-bottom: 1px solid var(--bk-gray-100);
    scroll-margin-top: 80px;
}
.lg-section:last-of-type { border-bottom: 0; }
.lg-h2 {
    font-size: 22px; font-weight: 700;
    letter-spacing: -.015em; margin: 0 0 16px;
    color: var(--bk-gray-900);
}
.lg-h2 .num {
    color: var(--bk-gray-500); font-weight: 600;
    margin-right: 8px; font-variant-numeric: tabular-nums;
}
.lg-h3 {
    font-size: 16px; font-weight: 700;
    margin: 24px 0 8px; color: var(--bk-gray-900);
}
.lg-section p {
    font-size: 15px; color: var(--bk-gray-700);
    margin: 0 0 14px;
}
.lg-section ul, .lg-section ol {
    font-size: 15px; color: var(--bk-gray-700);
    padding-left: 22px; margin: 0 0 16px;
}
.lg-section li { margin-bottom: 6px; }
.lg-section li::marker { color: var(--bk-gray-400); }
.lg-section strong { color: var(--bk-gray-900); }

.lg-callout {
    background: var(--bk-brand-tint);
    border-left: 3px solid var(--bk-brand);
    padding: 14px 18px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--bk-gray-800);
}
.lg-callout-h {
    font-size: 11px; font-weight: 700;
    color: var(--bk-brand-text); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 4px;
}

/* Data table */
.lg-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px;
    font-size: 14px;
}
.lg-table th, .lg-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--bk-gray-200);
    vertical-align: top;
}
.lg-table th {
    background: var(--bk-gray-50);
    font-size: 11px;
    font-weight: 700;
    color: var(--bk-gray-600);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.lg-table td:first-child {
    font-weight: 600;
    color: var(--bk-gray-900);
    white-space: nowrap;
}

.lg-footer {
    background: var(--bk-gray-900);
    color: color-mix(in srgb, var(--bk-gray-0) 65%, transparent);
    padding: 40px 0;
    font-size: 13px;
}
.lg-footer a { color: color-mix(in srgb, var(--bk-gray-0) 85%, transparent); }
.lg-footer-grid {
    display: flex; justify-content: space-between; gap: 24px;
    flex-wrap: wrap;
}
.lg-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .lg-toc ol { grid-template-columns: 1fr; }
    .lg-footer-grid { flex-direction: column; }
    .lg-table { font-size: 13px; display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .lg-table th, .lg-table td { padding: 8px 10px; }
}
    

/* Pieces only some documents use */
.lg-wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.lg-defs {
    background: var(--bk-gray-50);
    border: 1px solid var(--bk-gray-200);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 16px 0;
}
.lg-defs dt { font-weight: 700; font-size: 14px; color: var(--bk-gray-900); margin-top: 10px; }
.lg-defs dt:first-child { margin-top: 0; }
.lg-defs dd { font-size: 14px; color: var(--bk-gray-700); margin: 2px 0 0; padding-left: 0; }
.lg-warn { background: var(--bk-warning-bg); border-left-color: var(--bk-warning-text); }
.lg-warn .lg-callout-h { color: var(--bk-warning-text); }

/* ---------- Contents: a sticky column beside the text on a wide screen (Sprint 4, slice J8) ----------
   Below 1100px the list stays the inline block it always was. The same markup serves both, so with
   scripting off the list is still plain anchors, and the scroll marker below is an enhancement only. */
.lg-layout { display: block; }
.lg-print {
    margin-top: 16px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--bk-gray-700); background: var(--bk-gray-0);
    border: 1px solid var(--bk-gray-300); border-radius: 8px; cursor: pointer;
}
.lg-print:hover { border-color: var(--bk-gray-500); color: var(--bk-gray-900); }
.lg-print:focus-visible, .lg-toc a:focus-visible { outline: 2px solid var(--bk-brand); outline-offset: 2px; border-radius: 4px; }
.lg-print[hidden] { display: none; }
.lg-toc a.is-current { color: var(--bk-brand-text); font-weight: 600; }

@media (min-width: 1100px) {
    .lg-wrap { max-width: 1120px; }
    .lg-body .lg-callout { max-width: 820px; }
    .lg-layout { display: grid; grid-template-columns: minmax(0, 820px) 240px; gap: 56px; align-items: start; }
    .lg-article { min-width: 0; order: 1; }
    .lg-toc {
        order: 2; position: sticky; top: 88px; margin-bottom: 0;
        max-height: calc(100vh - 112px); overflow-y: auto;
    }
    .lg-toc ol { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Print: the title, the date and the body, and nothing else ---------- */
@media print {
    .lg-topbar, .lg-footer, .lg-toc, .lg-print, .lg-back { display: none !important; }
    body { background: var(--bk-gray-0); color: var(--bk-gray-900); }
    .lg-header { padding: 0 0 16px; }
    .lg-body { padding: 16px 0 0; }
    .lg-layout { display: block; }
    .lg-wrap { max-width: none; padding: 0; }
    .lg-section { break-inside: avoid-page; padding: 16px 0; }
    .lg-h2, .lg-h3 { break-after: avoid; }
    a { color: inherit; text-decoration: none; }
    .lg-section a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; color: var(--bk-gray-600); }
}