*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    overscroll-behavior: none;
}
body {
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
menu,
dl,
dd,
ol,
ul {
    padding: 0;
    list-style: none;
    list-style-image: none;
    margin: 0;
}
:root {
    --bg: oklch(98.5% 0 0);
    --bg-accent: oklch(96.7% 0.001 286.375);
    --text: oklch(21% 0.006 285.885);
    --line: oklch(92% 0.004 286.32);
    --icon: oklch(70.5% 0.015 286.067);
}

html,
body {
    padding: 0;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-feature-settings: "ss01" on, "cv11" on, "cv04" on, "cv03" on, "cv02" on;
    font-optical-sizing: auto;
    font-style: normal;
    overflow-x: clip;
    background-color: var(--bg);
    color: var(--text);
}
body:has(dialog:modal) {
    overflow: hidden;
    height: 100svh;
}
.container {
    width: calc(100% - 3rem);
    margin: auto;
    @media (min-width: 720px) {
        width: 34rem;
    }
    @media (min-width: 960px) {
        width: 44rem;
    }

}
section {
    padding: 2.5rem 0;
    position: relative;
    h2 {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: -.004rem;
        margin-block-end: 1.5rem;
    }
    a {
        color: var(--text);
    }
    p {
        font-size: .875rem;
        line-height: 1.25rem;
        letter-spacing: -.007rem;
    }
    p:not(:last-of-type) {
        margin-block-end: .875rem;
    }
    ul.list {
        li {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            gap: .25rem;
            margin-block: .875rem;
            &::before {
                display: grid;
                place-items: center;
                flex-shrink: 0;
                content: " \2022 ";
                font-size: .875rem;
                line-height: 1.25rem;
            }
        }
        &.positive li::before,
        &.negative li::before {
            content: "";
            width: 1.25rem;
            height: 1.25rem;
            background-size: 1.125rem 1.125rem;
            background-repeat: no-repeat;
            background-position: center;
        }
        &.positive li::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2316a34a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 12 2 2 4-4m7 2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10'/%3E%3C/svg%3E%0A");
        }
        &.negative li::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23e11d48' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10'/%3E%3C/svg%3E%0A");
        }
    }
    @media (min-width: 720px) {
        h2 {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        p {
            font-size: 1rem;
            line-height: 1.5rem;
            letter-spacing: -.004rem;
        }
        p:not(:last-of-type) {
            margin-block-end: 1rem;
        }
        ul.list {
            li {
                gap: .5rem;
                margin-block: 1rem;
                &::before {
                    font-size: 1rem;
                    line-height: 1.5rem;
                }
            }
            &.positive li::before,
            &.negative li::before {
                width: 1.5rem;
                height: 1.5rem;
                background-size: 1.25rem 1.25rem;
            }
        }
    }
}
header {
    display: grid;
    place-items: center;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    z-index: 1;
    background-color: oklch(98.5% 0 0 / .95);
    backdrop-filter: blur(16px);
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: -.006rem;
    will-change: transform;
    transform: translateY(0);
    transition: transform .2s ease;
    --header-h: 0px;
    --header-hidden-y: calc(-1 * var(--header-h));
    &.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        transform: translateY(var(--header-hidden-y));
    }
    &.is-fixed.is-revealed {
        transform: translateY(0);
    }
    &.is-switching {
        transition: none !important;
    }
    &::before {
        display: block;
        content: "";
        position: absolute;
        bottom: .5px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--line);
    }
    .content {
        width: 100%;
        padding: .75rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        &::before {
            display: block;
            content: "";
            width: 3rem;
            height: 1.5rem;
            background-size: 3rem 1.5rem;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url("logo.svg");
        }
        span {
            display: flex;
            flex-direction: column;
            font-weight: 500;
            &:has(a) {
                translate: 0 .25rem;
            }
            a {
                text-decoration: none;
                color: var(--icon);
            }
            i {
                display: none;
                font-style: normal;
                color: var(--line);
            }
            b {
                font-weight: 500;
                color: var(--text);
            }
        }
    }
    @media (min-width: 720px) {
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: -.004rem;
        .content {
            width: 44rem;
            padding-inline: 0;
            padding-block: 1.625rem;
        }
        .logo {
            gap: 1.5rem;
            &::before {
                width: 3.5rem;
                height: 1.75rem;
                background-size: 3.5rem 1.75rem;
            }
        }
    }
    @media (min-width: 960px) {
        font-size: 1.25rem;
        line-height: 1.75rem;
        letter-spacing: 0;
        .content {
            width: 57rem;
            padding-block: 1.75rem;
        }
        .logo {
            &::before {
                width: 5rem;
                height: 2.5rem;
                background-size: 5rem 2.5rem;
            }
        }
    }
}

#header-spacer {
    height: 0;
}
footer {
    position: relative;
    padding-block: 1.5rem;
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: -.007rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    &::before, &::after {
        display: block;
        content: "";
        position: absolute;
        top: -.5px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--line);
    }
    i {
        font-style: normal;
    }
    span:last-child {
        display: none;
    }
    @media (min-width: 720px) {
        width: 37rem;
        translate: -1.5rem 0;
        padding-block: 2.5rem;
        padding-inline: 1.5rem;
        margin-block-start: 2.5rem;
        span:last-child {
            display: block;
        }
    }
    @media (min-width: 960px) {
        width: 47rem;
    }
}