:root{
    --legal-bg: #2a2a2a;
    --legal-panel: #ffffff;
    --legal-text: #111;
    --legal-muted: rgba(0,0,0,.45);
    --legal-border: rgba(0,0,0,.10);
}

body{
    margin:0;
    min-height:100vh;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.legal-header{
    display:grid;
    grid-template-columns: 160px 1fr 160px;
    align-items:center;
    padding: 26px 28px 8px;
}

.legal-brand{
    display:flex;
    align-items:center;
}

.legal-logo{
    height: 42px;
    width: auto;
    display:block;
}

.legal-title{
    text-align:center;
    font-weight: 800;
    font-size: 22px;
    color: var(--legal-text);
    margin:0;
}

.legal-close-wrap{
    display:flex;
    justify-content:flex-end;
}

.legal-close-btn{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size: 18px;
    line-height: 1;
    transition: transform .12s ease, filter .12s ease;
}

.legal-close-btn:hover{ filter: brightness(.9); }
.legal-close-btn:active{ transform: translateY(1px); }

/* Meta */
.legal-meta{
    padding: 0 28px 18px;
}

.legal-updated{
    font-size: 12px;
    font-weight: 600;
    color: var(--legal-muted);
}

.legal-divider{
    height:1px;
    background: var(--legal-border);
    margin: 0 28px;
}

/* Body */
.legal-body{
    padding: 22px 28px 28px;
}

.legal-scroll{
    max-height: 520px;
    overflow:auto;
    padding-right: 18px;
}

.legal-section-title{
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #000;
}

.legal-scroll p{
    font-size: 13px;
    line-height: 1.7;
    color: rgba(0,0,0,.78);
    margin: 0 0 14px;
}

.legal-scroll strong{
    color:#000;
    font-weight: 800;
}

/* Scrollbar */
.legal-scroll::-webkit-scrollbar{ width: 10px; }
.legal-scroll::-webkit-scrollbar-track{ background: transparent; }
.legal-scroll::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.35);
    border-radius: 999px;
}
.legal-scroll::-webkit-scrollbar-thumb:hover{
    background: rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width: 640px){
    .legal-header{
        grid-template-columns: 90px 1fr 90px;
        padding: 18px 18px 8px;
    }

    .legal-logo{
        height: 34px;
    }

    .legal-title{
        font-size: 18px;
    }

    .legal-meta{
        padding: 0 18px 14px;
    }

    .legal-body{
        padding: 18px 18px 20px;
    }

    .legal-divider{
        margin: 0 18px;
    }

    .legal-scroll{
        max-height: 62vh;
    }
}