



.legal-page {
    background: var(--legal-page-bg, transparent);
    color: var(--legal-text, var(--meb-text-default));
    min-height: 100vh;
    padding-block: var(--meb-space-stack-xl, 32px);
}




.legal-hero {
    
    --legal-hero-text: var(--legal-btn-fg, white);
    --legal-hero-subtitle: color-mix(in srgb, var(--legal-hero-text) 85%, transparent);
    --legal-badge-bg: color-mix(in srgb, var(--legal-hero-text) 18%, transparent);
    --legal-badge-border: color-mix(in srgb, var(--legal-hero-text) 45%, transparent);
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--legal-hero-bg);
    padding-block: var(--meb-space-stack-xl, 32px);
    
    padding-inline: var(--meb-space-stack-lg, 24px);
    border-radius: var(--meb-radius-lg, 12px);
}


.legal-title {
    color: var(--legal-hero-text);
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-desktop);
    font-weight: var(--font-weight-display);
    line-height: var(--font-lineheight-display);
    margin-block-end: 0;
}

.legal-subtitle {
    color: var(--legal-hero-subtitle);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: 0;
}




.legal-date-badge {
    display: inline-block;
    background: var(--legal-badge-bg);
    color: var(--legal-hero-text, white);
    border: 1px solid var(--legal-badge-border);
    border-radius: var(--meb-radius-pill, 9999px);
    padding: 4px 18px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-lineheight-body);
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}








.legal-toc {
    flex: 0 0 220px;
}


.legal-article {
    flex: 1 1 0;
    min-width: 0;
}



.legal-toc {
    position: sticky;
    top: 1.5rem;
    
    overflow-y: auto;
}

@media (max-width: 767px) {
    .legal-toc {
        display: none;
    }
}

.legal-toc-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    color: var(--legal-text, var(--meb-text-default));
    margin-block-end: var(--meb-space-stack-12, 12px);
    margin-block-start: 0;
    padding-block-end: var(--meb-space-stack-sm, 8px);
    border-block-end: 2px solid var(--legal-text, var(--meb-text-default));
}

.legal-toc-list {
    list-style: none;
    padding: var(--meb-space-stack-none);
    margin: var(--meb-space-stack-none);
}

.legal-toc-list li {
    padding-block: var(--meb-space-stack-2xs, 2px);
}

.legal-toc a {
    display: block;
    color: var(--legal-text-muted, var(--meb-text-muted));
    text-decoration: none;
    padding-block: 0.25rem;
    
    border-inline-start: 3px solid transparent;
    padding-inline-start: 0.6rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    transition: color var(--meb-motion-fast), border-color var(--meb-motion-fast);
}

.legal-toc a:hover {
    color: var(--legal-text, var(--meb-text-default));
}


.legal-toc a[data-legal-current] {
    color: var(--meb-accent-primary, var(--legal-text, var(--meb-text-default)));
    border-inline-start-color: var(--meb-accent-primary, var(--legal-text));
    font-weight: var(--font-weight-medium);
}


.legal-toc-list li[data-legal-filtered] {
    display: none;
}


.legal-toc a:focus-visible {
    color: var(--legal-text, var(--meb-text-default));
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}



.legal-article h2 {
    color: var(--legal-text, var(--meb-text-default));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--meb-border-subtle);
    margin-block-start: var(--meb-space-stack-xl, 32px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}


.legal-article > section:first-of-type h2:first-child {
    margin-block-start: 0;
}


.legal-h-num {
    color: var(--meb-accent-primary, var(--legal-text, var(--meb-text-default)));
}

.legal-article h3 {
    color: var(--legal-text, var(--meb-text-default));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: var(--meb-space-stack-lg, 20px);
    margin-block-end: var(--meb-space-stack-sm, 8px);
}

.legal-article p,
.legal-article li {
    color: var(--legal-text-muted, var(--meb-text-muted));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm));
    line-height: var(--font-lineheight-body);
}

.legal-article ul,
.legal-article ol {
    padding-inline-start: 2rem;
    margin-block-end: var(--legal-space-sm, var(--meb-space-stack-sm));
}

.legal-article a {
    color: var(--legal-text, var(--meb-text-default));
    font-weight: var(--font-weight-medium);
}

.legal-article a:hover {
    text-decoration: underline;
}


.legal-article a:focus-visible {
    outline: 2px solid var(--legal-text, var(--meb-text-default));
    outline-offset: 3px;
    border-radius: 2px;
}



.legal-section {
    display: block;
}


.legal-section[data-legal-filtered] {
    display: none;
}



.legal-search-input {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    line-height: var(--font-lineheight-body);
    color: var(--legal-text, var(--meb-text-default));
    background: var(--meb-surface-card);
    border: 1px solid var(--meb-border-subtle);
    border-radius: var(--meb-radius-pill, 9999px);
    transition: border-color var(--meb-motion-fast);
}

.legal-search-input::placeholder {
    color: var(--legal-text-muted, var(--meb-text-muted));
}

.legal-search-input:focus-visible {
    outline: 2px solid var(--meb-accent-primary, var(--legal-text));
    outline-offset: 2px;
    border-color: var(--meb-accent-primary, var(--legal-text));
}


.legal-search-empty {
    display: none;
    color: var(--legal-text-muted, var(--meb-text-muted));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm-desktop);
}

.legal-search-empty[data-legal-empty] {
    display: block;
}




.info-box,
.warning-box,
.highlight-section,
.contact-box {
    background: var(--callout-surface, var(--meb-surface-card));
    border-inline-start: 4px solid var(--callout-accent, var(--meb-border-accent, var(--meb-border-default)));
    border-radius: var(--meb-radius-md, 8px);
    padding: var(--meb-space-stack-lg, 20px);
    margin-block: var(--meb-space-stack-lg, 20px);
}


.info-box h3,
.warning-box h3,
.highlight-section h3,
.contact-box h3 {
    margin-block-start: 0;
    color: var(--callout-heading, var(--legal-text, var(--meb-text-default)));
}


.info-box {
    --callout-accent: var(--meb-accent-info);
    --callout-surface: var(--meb-surface-card);
    --callout-heading: var(--meb-button-link-active-foreground, var(--meb-text-link, var(--meb-accent-info)));
}


.warning-box {
    --callout-accent: var(--meb-border-danger);
    --callout-surface: var(--meb-surface-danger);
    --callout-heading: var(--meb-text-danger);
}


.highlight-section {
    --callout-accent: var(--meb-accent-warning);
    --callout-surface: var(--meb-surface-card);
    --callout-heading: var(--meb-text-notification-warning);
}


.contact-box {
    --callout-accent: var(--meb-border-success);
    --callout-surface: var(--meb-surface-success);
    --callout-heading: var(--meb-text-success);
}


@supports (background: color-mix(in srgb, red 50%, white)) {
    .info-box          { --callout-surface: color-mix(in srgb, var(--meb-accent-info) 8%, var(--meb-surface-card)); }
    .highlight-section { --callout-surface: color-mix(in srgb, var(--meb-accent-warning) 14%, var(--meb-surface-card)); }
}




.legal-cta {
    background: var(--legal-cta-bg);
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow, none));
    border-radius: var(--meb-radius-lg, 12px);
    padding: var(--meb-space-stack-lg, 24px);
    text-align: center;
}




.legal-cta--success {
    background: var(--meb-accent-success, var(--meb-surface-success));
    color: var(--meb-text-default);
    border-color: var(--meb-border-success, var(--meb-border-default));
}

.legal-cta--success .legal-cta-heading,
.legal-cta--success .legal-cta-body,
.legal-cta--success h2,
.legal-cta--success p {
    color: var(--meb-text-default);
}

.legal-cta h2 {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border-block-end: none;
    margin-block-start: 0;
}

.legal-cta p {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}

.legal-cta a {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-weight: var(--font-weight-heading);
    text-decoration: underline;
}

.legal-cta a:hover {
    opacity: 0.85;
}


.legal-cta a:focus-visible,
.legal-cta button:focus-visible {
    outline: 2px solid var(--legal-btn-fg, var(--meb-button-primary-foreground));
    outline-offset: 3px;
    border-radius: var(--meb-radius-sm, 4px);
}





.legal-cta-layout {
    flex-direction: var(--legal-cta-flow, row);
}


.legal-cta-text {
    flex: 1 1 0;
}

.legal-cta-heading {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2-desktop);
    font-weight: var(--font-weight-heading);
    line-height: var(--font-lineheight-heading);
    margin-block-start: 0;
    margin-block-end: var(--meb-space-stack-sm, 8px);
    border-block-end: none;
}

.legal-cta-body {
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-desktop);
    font-weight: var(--font-weight-body);
    line-height: var(--font-lineheight-body);
    margin-block-end: 0;
}


.legal-cta-action {
    flex-shrink: 0;
}



.return-to-top {
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    z-index: 100;
    width: 3rem;
    height: 3rem;
    border-radius: var(--meb-radius-full, 50%);
    background: var(--legal-btn-bg, var(--meb-button-primary-background));
    color: var(--legal-btn-fg, var(--meb-button-primary-foreground));
    border: 1px solid var(--legal-btn-border, var(--meb-button-primary-border, transparent));
    box-shadow: var(--legal-btn-shadow, var(--meb-button-primary-shadow));
    cursor: pointer;
    font-size: var(--font-size-h3-mobile);
    line-height: var(--font-lineheight-display);
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--meb-motion-fast);
}

.return-to-top.return-to-top--visible {
    opacity: 1;
    pointer-events: auto;
}



@media (max-width: 767px) {
    .legal-page {
        padding-block: var(--meb-space-stack-lg, 20px);
    }

    .legal-title {
        font-size: var(--font-size-display-mobile);
    }

    .legal-subtitle,
    .legal-date-badge {
        font-size: var(--font-size-body-sm-mobile);
    }

    .legal-article h2 {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-article h3 {
        font-size: var(--font-size-h3-mobile);
    }

    
    .legal-article p,
    .legal-article li {
        margin-block-end: var(--legal-space-md, var(--meb-space-stack-md, 16px));
    }

    
    .legal-article ul,
    .legal-article ol {
        padding-inline-start: var(--meb-space-stack-lg, 24px);
    }

    
    .info-box,
    .warning-box,
    .highlight-section,
    .contact-box {
        padding: var(--meb-space-stack-md, 16px);
        margin-block: var(--meb-space-stack-md, 16px);
    }

    .return-to-top {
        inset-block-end: 1rem;
        inset-inline-end: 1rem;
    }

    
    .legal-cta-heading {
        font-size: var(--font-size-h2-mobile);
    }

    .legal-cta-body {
        font-size: var(--font-size-body-mobile);
    }

    .legal-cta {
        padding: var(--meb-space-stack-md, 16px);
    }

    
    .legal-cta-layout {
        flex-direction: column;
    }

    
    .legal-cta-text,
    .legal-cta-action {
        flex: 0 0 auto;
        width: 100%;
    }

    
    .legal-cta-action .ui-button-wrapper,
    .legal-cta-action .meb-btn {
        width: 100%;
        display: block;
    }
}





.legal-deco-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--legal-deco-primary) 25%, transparent) 1.5px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}




.legal-deco-wave {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    z-index: 0;
}

.legal-deco-wave.decorative-svg {
    inline-size: 100%;
}


.legal-hero .ui-stack {
    position: relative;
    z-index: 1;
}
