html,
body {
    margin: 0;
    min-height: 100%;
}

body.privacy-page {
    --privacy-era-bg: linear-gradient(180deg, rgba(67, 108, 148, 0.84) 0%, rgba(44, 65, 89, 0.8) 36%, rgba(17, 23, 33, 0.9) 74%, rgba(9, 12, 18, 1) 100%);
    --privacy-era-texture: none;
    --privacy-era-image: none;
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 18%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.94), rgba(6, 9, 14, 1));
    color: #f4f4ef;
}

.privacy-backdrop,
.privacy-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.privacy-backdrop {
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 12, 0.42), rgba(5, 8, 12, 0.72)),
        var(--privacy-era-image),
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 12%, transparent), transparent 24%),
        var(--privacy-era-bg);
    background-position: center center, center center, center center, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto, cover, auto, auto;
    mix-blend-mode: normal;
    filter: saturate(0.92) contrast(1.02) brightness(0.84);
    opacity: 1;
}

.privacy-grid {
    z-index: 0;
    background:
        var(--privacy-era-texture),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent calc(100% / 6)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.015));
    background-position: center center, center center, center center;
    background-repeat: repeat, repeat, no-repeat;
    opacity: 0.3;
    mix-blend-mode: screen;
}

.privacy-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding:
        calc(var(--shared-header-height) + 36px)
        24px
        calc(var(--shared-bottom-nav-height) + 72px);
}

.privacy-hero {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(12, 18, 28, 0.82), rgba(8, 12, 18, 0.88)),
        radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 12%, transparent), transparent 28%);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.privacy-kicker {
    color: color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 62%, white);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.privacy-hero h1 {
    margin: 0;
    font-family: var(--shared-header-display);
    font-size: clamp(2rem, 6vw, 4.4rem);
    line-height: 0.94;
    text-transform: uppercase;
}

.privacy-hero p {
    margin: 0;
    max-width: 72ch;
    color: rgba(244, 244, 239, 0.84);
    font-size: 1rem;
    line-height: 1.65;
}

.privacy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: rgba(244, 244, 239, 0.62);
    font-size: 0.84rem;
}

.privacy-meta a,
.privacy-card a {
    color: color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 58%, white);
    text-decoration: none;
}

.privacy-meta a:hover,
.privacy-card a:hover {
    text-decoration: underline;
}

.privacy-card {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(12, 18, 28, 0.84), rgba(8, 12, 18, 0.9));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.privacy-card--highlight {
    border-color: color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 34%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px color-mix(in srgb, var(--shared-era-accent, #5eb6ff) 18%, rgba(255, 255, 255, 0.04));
}

.privacy-card h2 {
    margin: 0;
    font-family: var(--shared-header-display);
    font-size: clamp(1rem, 2vw, 1.35rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.privacy-card p,
.privacy-card li {
    color: rgba(244, 244, 239, 0.84);
    font-size: 0.98rem;
    line-height: 1.7;
}

.privacy-card p {
    margin: 0;
}

.privacy-card ul {
    margin: 0;
    padding-left: 1.25rem;
}

.privacy-card code {
    padding: 0.12rem 0.36rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #f4f4ef;
    font-size: 0.92em;
}

@media (max-width: 720px) {
    .privacy-shell {
        padding:
            calc(var(--shared-header-height) + 22px)
            14px
            calc(var(--shared-bottom-nav-height) + 84px);
    }

    .privacy-hero,
    .privacy-card {
        padding: 18px;
        border-radius: 14px;
    }

    .privacy-hero h1 {
        font-size: clamp(1.8rem, 10vw, 2.8rem);
    }

    .privacy-card p,
    .privacy-card li {
        font-size: 0.94rem;
    }
}