:root {
    --ink: #0b2344;
    --muted: #5e7188;
    --line: #dbe8f5;
    --blue: #086fd4;
    --teal: #078975;
    --surface: #ffffff;
    --canvas: #f5f9fe;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 100% 0, rgba(8, 111, 212, .12), transparent 30rem),
        var(--canvas);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}

a { color: var(--blue); }

.legal-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 12px max(22px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid rgba(210, 227, 244, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
}

.legal-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
}

.legal-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.legal-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-nav-links a {
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #365675;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 750;
}

.legal-nav-links a:hover,
.legal-nav-links a[aria-current="page"] {
    color: var(--blue);
    border-color: #9bc8f1;
    background: #fff;
}

.legal-wrap {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 54px;
}

.legal-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 58px);
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(128deg, #071c40 0%, #0a3d77 58%, #087d91 100%);
    box-shadow: 0 24px 60px rgba(7, 37, 78, .2);
}

.legal-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -96px;
    top: -120px;
    border: 46px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.legal-kicker {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: #8ee7ff;
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.legal-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.05em;
}

.legal-hero p {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
}

.legal-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.legal-meta span {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 750;
}

.legal-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.legal-toc {
    position: sticky;
    top: 92px;
    align-self: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(15, 54, 96, .07);
}

.legal-toc strong {
    display: block;
    margin-bottom: 10px;
    color: #254966;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-toc a {
    display: block;
    padding: 7px 9px;
    border-left: 2px solid transparent;
    color: #62778e;
    text-decoration: none;
    font-size: .72rem;
}

.legal-toc a:hover {
    color: var(--blue);
    border-left-color: var(--blue);
}

.legal-content {
    min-width: 0;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 14px 40px rgba(15, 54, 96, .08);
}

.legal-content section {
    scroll-margin-top: 92px;
}

.legal-content section + section {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.legal-content h2 {
    margin: 0 0 10px;
    color: #102f53;
    font-size: 1.24rem;
    letter-spacing: -.025em;
}

.legal-content h3 {
    margin: 20px 0 7px;
    color: #234d70;
    font-size: .94rem;
}

.legal-content p,
.legal-content li {
    color: var(--muted);
    font-size: .85rem;
}

.legal-content p { margin: 8px 0; }
.legal-content ul { margin: 10px 0; padding-left: 22px; }
.legal-content li + li { margin-top: 6px; }

.legal-callout {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid #98c8ef;
    border-radius: 14px;
    color: #245171;
    background: #f8fcff;
    font-size: .8rem;
}

.legal-callout.important {
    border-color: #edbd72;
    color: #6f4a0d;
    background: #fffdf8;
}

.legal-contact {
    display: grid;
    gap: 7px;
    margin-top: 16px;
    padding: 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(130deg, #0b376c, #096e80);
}

.legal-contact strong { font-size: .9rem; }
.legal-contact a { color: #b8efff; }
.legal-contact span { color: rgba(255, 255, 255, .74); font-size: .75rem; }

.legal-footer {
    padding: 22px;
    color: #718298;
    text-align: center;
    font-size: .7rem;
}

@media (max-width: 800px) {
    .legal-nav { position: static; }
    .legal-nav-links a:not([aria-current="page"]) { display: none; }
    .legal-grid { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
}

@media (max-width: 520px) {
    .legal-wrap { width: min(100% - 20px, 1180px); margin-top: 12px; }
    .legal-hero { padding: 25px 21px; border-radius: 20px; }
    .legal-content { padding: 21px 18px; border-radius: 18px; }
}