:root {

    color-scheme:
        dark;

    --bg:
        #080c12;

    --panel:
        #101720;

    --inner:
        #0b1118;

    --border:
        #273342;

    --border-strong:
        #334253;

    --text:
        #f4f7fb;

    --soft:
        #dce6f1;

    --muted:
        #8e9baa;

    --muted-dark:
        #687787;

    --success:
        #9ef0bd;

    --warning:
        #f0c987;

}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    background: var(--bg);
    color: var(--text);
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-width: 0;

    min-height: 100dvh;

    background: var(--bg);

    color: var(--text);

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

    -webkit-font-smoothing:
        antialiased;

}


a {
    color: inherit;
}


[hidden] {
    display: none !important;
}


::selection {
    background: #334253;
    color: #fff;
}


/* ============================================================
   HEADER
   ============================================================ */

.legal-header {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        0
        clamp(20px, 5vw, 72px);

    border-bottom:
        1px solid var(--border);

}


.brand {

    color: var(--text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 850;

    letter-spacing: .24em;

}


.header-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.header-links a {

    color: var(--muted);

    text-decoration: none;

    font-size: 10px;

    font-weight: 650;

}


.header-links a:hover {
    color: var(--text);
}


/* ============================================================
   PAGE
   ============================================================ */

.legal-shell {

    width:
        min(
            calc(100% - 40px),
            1180px
        );

    margin:
        0 auto;

    padding:
        90px 0 120px;

}


.legal-hero {

    display: grid;

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

    gap:
        clamp(45px, 8vw, 110px);

    padding-bottom:
        75px;

    border-bottom:
        1px solid var(--border);

}


.eyebrow {

    margin-bottom: 17px;

    color: var(--muted-dark);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;

}


.legal-hero h1 {

    max-width: 760px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            45px,
            7vw,
            80px
        );

    font-weight: 690;

    line-height: 1;

    letter-spacing: -.05em;

}


.legal-intro {

    max-width: 700px;

    margin: 25px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

}


.legal-meta {

    align-self: end;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: 15px;

    background: var(--panel);

}


.meta-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 10px 0;

    border-bottom:
        1px solid var(--border);

    color: var(--muted);

    font-size: 9px;

}


.meta-row:last-child {
    border-bottom: 0;
}


.meta-row strong {

    color: var(--soft);

    font-weight: 650;

    text-align: right;

}


/* ============================================================
   DEVELOPMENT NOTICE
   ============================================================ */

.development-notice {

    margin:
        35px 0 0;

    padding:
        17px 19px;

    border:
        1px solid #5f512c;

    border-radius:
        13px;

    background:
        #17150f;

    color:
        #b9ae8f;

    font-size:
        10px;

    line-height:
        1.65;

}


.development-notice strong {
    color: var(--warning);
}


/* ============================================================
   DOCUMENT
   ============================================================ */

.legal-layout {

    display: grid;

    grid-template-columns:
        210px
        minmax(0, 760px);

    justify-content: space-between;

    gap:
        65px;

    padding-top:
        70px;

}


.legal-nav {

    position: sticky;

    top: 30px;

    align-self: start;

}


.legal-nav-title {

    margin-bottom: 14px;

    color: var(--muted-dark);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .14em;

}


.legal-nav a {

    display: block;

    padding: 7px 0;

    color: var(--muted);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.4;

}


.legal-nav a:hover {
    color: var(--text);
}


.legal-document {

    min-width: 0;
}


.legal-section {

    padding:
        0 0 53px;

    margin:
        0 0 53px;

    border-bottom:
        1px solid var(--border);

}


.legal-section:last-child {

    margin-bottom: 0;

    border-bottom: 0;

}


.section-number {

    display: block;

    margin-bottom: 12px;

    color: var(--muted-dark);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .13em;

}


.legal-section h2 {

    margin: 0 0 20px;

    color: var(--text);

    font-size: 24px;

    font-weight: 680;

    letter-spacing: -.02em;

}


.legal-section h3 {

    margin: 28px 0 10px;

    color: var(--soft);

    font-size: 13px;

}


.legal-section p,
.legal-section li {

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;

}


.legal-section p {

    margin:
        0 0 16px;

}


.legal-section ul {

    margin:
        16px 0;

    padding-left:
        19px;

}


.legal-section li {
    margin-bottom: 9px;
}


.legal-section strong {
    color: var(--soft);
}


.legal-section a {

    color: var(--soft);

    text-underline-offset: 3px;

}


.data-box {

    margin:
        22px 0;

    padding:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        var(--inner);

}


.data-box strong {

    display: block;

    margin-bottom: 6px;

    color: var(--success);

    font-size: 10px;

}


.data-box p {

    margin: 0;

    font-size: 10px;

}


.warning-box strong {
    color: var(--warning);
}


/* ============================================================
   FOOTER
   ============================================================ */

.legal-footer {

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: end;

    gap: 30px;

    margin-top:
        100px;

    padding-top:
        40px;

    border-top:
        1px solid var(--border);

}


.footer-copy p {

    margin:
        11px 0 0;

    color: var(--muted-dark);

    font-size: 8px;

}


.footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 20px;

}


.footer-links a {

    color: var(--muted);

    text-decoration: none;

    font-size: 9px;

}


.footer-links a:hover {
    color: var(--text);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .legal-header {

        height: 70px;

        padding:
            0 18px;

    }


    .header-links a:not(:last-child) {
        display: none;
    }


    .legal-shell {

        width:
            min(
                calc(100% - 28px),
                1180px
            );

        padding:
            65px 0 80px;

    }


    .legal-hero {

        grid-template-columns:
            1fr;

        gap: 35px;

        padding-bottom:
            50px;

    }


    .legal-hero h1 {
        font-size: 48px;
    }


    .legal-meta {
        align-self: auto;
    }


    .legal-layout {

        grid-template-columns:
            1fr;

        gap: 40px;

        padding-top:
            48px;

    }


    .legal-nav {

        position: static;

        display: flex;

        gap: 7px;

        overflow-x: auto;

        padding-bottom: 9px;

        scrollbar-width: none;

    }


    .legal-nav::-webkit-scrollbar {
        display: none;
    }


    .legal-nav-title {
        display: none;
    }


    .legal-nav a {

        flex: 0 0 auto;

        padding: 8px 11px;

        border:
            1px solid var(--border);

        border-radius: 8px;

        background: var(--inner);

    }


    .legal-section {

        padding-bottom: 40px;

        margin-bottom: 40px;

    }


    .legal-section h2 {
        font-size: 21px;
    }


    .legal-section p,
    .legal-section li {

        font-size: 11px;

    }


    .legal-footer {

        grid-template-columns:
            1fr;

    }


    .footer-links {

        justify-content: flex-start;

        gap: 14px;

    }

}