:root {
    --vf-ink: #111b39;
    --vf-muted: #66708e;
    --vf-border: rgba(78, 88, 140, .12);
    --vf-card: rgba(255,255,255,.78);
    --vf-purple: #6c61ef;
    --vf-cyan: #25c8da;
    --vf-pink: #e45ac3;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--vf-ink);

    background:
        radial-gradient(
            circle at 9% 12%,
            rgba(38,203,220,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 91% 36%,
            rgba(116,91,241,.17),
            transparent 35%
        ),
        radial-gradient(
            circle at 46% 94%,
            rgba(231,87,195,.12),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            #f8fdff 0%,
            #f1f7ff 35%,
            #f7f2ff 66%,
            #fff5fb 100%
        );
}

a {
    color: #665ee9;
}

.vf-legal-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 64px;
}

.vf-legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 28px;

    padding: 14px 17px;

    border: 1px solid rgba(255,255,255,.82);
    border-radius: 22px;

    background: rgba(255,255,255,.62);

    box-shadow:
        0 12px 36px rgba(43,53,107,.08),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.vf-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    color: var(--vf-ink);
    text-decoration: none;
    font-weight: 900;
    font-size: 20px;
}

.vf-brand-mark {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2bc9dc,
            #6c61ef 55%,
            #e35ac4
        );

    box-shadow:
        0 7px 18px rgba(95,83,229,.22);
}

.vf-brand-name span {
    color: #675fe9;
}

.vf-legal-nav {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vf-legal-nav a {
    padding: 9px 13px;

    border-radius: 11px;

    color: var(--vf-ink);
    text-decoration: none;

    font-size: 13px;
    font-weight: 750;
}

.vf-legal-nav a:hover {
    background: rgba(255,255,255,.72);
}

.vf-legal-hero {
    padding:
        clamp(28px, 5vw, 58px);

    margin-bottom: 20px;

    border: 1px solid rgba(255,255,255,.86);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.79),
            rgba(248,244,255,.57)
        );

    box-shadow:
        0 25px 70px rgba(42,53,106,.10),
        inset 0 1px 0 rgba(255,255,255,.98);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.vf-legal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.92);

    color: #686d91;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.vf-legal-kicker i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2bd6ad;

    box-shadow:
        0 0 0 5px rgba(43,214,173,.11);
}

.vf-legal-hero h1 {
    margin: 0;

    font-size:
        clamp(38px, 7vw, 72px);

    line-height: .98;

    letter-spacing: -.055em;
}

.vf-legal-gradient {
    background:
        linear-gradient(
            105deg,
            var(--vf-cyan),
            var(--vf-purple) 53%,
            var(--vf-pink)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.vf-legal-hero p {
    max-width: 780px;

    margin:
        19px 0 0;

    color: var(--vf-muted);

    font-size: 15px;
    line-height: 1.75;
}

.vf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 20px;
}

.vf-meta span {
    padding: 8px 11px;

    border-radius: 11px;

    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.9);

    color: #59617f;

    font-size: 11px;
    font-weight: 750;
}

.vf-legal-layout {
    display: grid;

    grid-template-columns:
        minmax(190px, 250px)
        minmax(0, 1fr);

    gap: 20px;
}

.vf-toc {
    position: sticky;
    top: 20px;

    align-self: start;

    padding: 18px;

    border: 1px solid rgba(255,255,255,.82);
    border-radius: 21px;

    background: rgba(255,255,255,.55);

    box-shadow:
        0 16px 40px rgba(42,53,106,.07);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.vf-toc strong {
    display: block;
    margin-bottom: 11px;

    font-size: 12px;
}

.vf-toc a {
    display: block;

    padding: 7px 8px;

    border-radius: 8px;

    color: #656d88;
    text-decoration: none;

    font-size: 11px;
    line-height: 1.3;
}

.vf-toc a:hover {
    background: rgba(255,255,255,.65);
    color: #645ce5;
}

.vf-legal-content {
    min-width: 0;
}

.vf-section {
    margin-bottom: 15px;

    padding:
        clamp(21px, 3vw, 31px);

    border: 1px solid rgba(255,255,255,.82);
    border-radius: 23px;

    background: var(--vf-card);

    box-shadow:
        0 13px 36px rgba(40,50,100,.055),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.vf-section h2 {
    margin: 0 0 12px;

    font-size:
        clamp(20px, 3vw, 28px);

    letter-spacing: -.035em;
}

.vf-section h3 {
    margin:
        22px 0 8px;

    font-size: 15px;
}

.vf-section p,
.vf-section li {
    color: #59627e;

    font-size: 13px;
    line-height: 1.75;
}

.vf-section ul,
.vf-section ol {
    padding-left: 21px;
}

.vf-section li + li {
    margin-top: 7px;
}

.vf-callout {
    margin-top: 15px;

    padding: 15px 17px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(40,202,220,.08),
            rgba(111,93,238,.08),
            rgba(230,86,193,.07)
        );

    border: 1px solid rgba(103,97,223,.10);
}

.vf-callout strong {
    color: #313a61;
}

.vf-footer {
    margin-top: 28px;

    padding: 22px;

    text-align: center;

    color: #6b728c;

    font-size: 11px;
    line-height: 1.7;
}

.vf-footer a {
    text-decoration: none;
    font-weight: 750;
}

@media (max-width: 780px) {

    .vf-legal-shell {
        width: min(100% - 20px, 760px);
        padding-top: 10px;
    }

    .vf-legal-header {
        margin-bottom: 10px;
        padding: 10px 12px;
        border-radius: 17px;
    }

    .vf-brand {
        font-size: 17px;
    }

    .vf-brand-mark {
        width: 35px;
        height: 35px;
        border-radius: 11px;
    }

    .vf-legal-nav a {
        padding: 7px 8px;
        font-size: 10px;
    }

    .vf-legal-hero {
        border-radius: 22px;
    }

    .vf-legal-layout {
        grid-template-columns: 1fr;
    }

    .vf-toc {
        position: static;

        display: flex;
        gap: 5px;

        overflow-x: auto;

        padding: 10px;

        border-radius: 15px;

        scrollbar-width: none;
    }

    .vf-toc::-webkit-scrollbar {
        display: none;
    }

    .vf-toc strong {
        display: none;
    }

    .vf-toc a {
        flex: 0 0 auto;

        padding: 8px 10px;

        border-radius: 999px;

        background: rgba(255,255,255,.58);

        white-space: nowrap;
    }

    .vf-section {
        border-radius: 18px;
    }
}