@import url('./variables.css');

body.policy-page {
    background: var(--black);
    color: var(--white);
}

body.policy-page .hero__nav {
    transform: translateY(0);
    opacity: 1;
    background: color-mix(in srgb, var(--black) 85%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
}

.policy {
    padding: clamp(110px, 12vh, 140px) 24px clamp(64px, 8vh, 96px);
    box-sizing: border-box;
}

.policy__inner {
    max-width: 720px;
    margin: 0 auto;
}

.policy h1 {
    margin: 0 0 8px;
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--white);
}

.policy .meta {
    margin: 0 0 clamp(32px, 5vh, 48px);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--fw-light);
    color: color-mix(in srgb, var(--white) 55%, transparent);
}

.policy ul,
.policy ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: var(--fw-light);
    line-height: 1.65;
    color: color-mix(in srgb, var(--white) 78%, transparent);
}

.policy li {
    margin-bottom: 0.5rem;
}

.policy p {
    margin: 0 0 1rem;
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: var(--fw-light);
    line-height: 1.65;
    color: color-mix(in srgb, var(--white) 78%, transparent);
}

.policy strong {
    font-weight: var(--fw-extrabold);
    color: var(--white);
}

.policy h2 {
    margin: 2rem 0 0.75rem;
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    color: var(--white);
}

.policy a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--white) 35%, transparent);
}

.policy a:hover {
    text-decoration-color: var(--white);
}

.policy__links {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    font-family: var(--font-primary);
    font-size: 14px;
}

.policy__links a {
    color: color-mix(in srgb, var(--white) 70%, transparent);
    text-decoration: none;
}

.policy__links a:hover {
    color: var(--white);
}