.chrome-background {
    display: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    min-height: var(--header-height);
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.875rem;
}

.site-header__spacer {
    min-width: 0;
}

.site-header__controls {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.marketing-main {
    padding: 0 0 var(--space-7);
}

.marketing-shell,
.marketing-section,
.site-footer__inner {
    max-width: var(--section-width);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.marketing-shell {
    padding-top: var(--space-7);
}

.marketing-section {
    padding-top: var(--space-8);
}

.marketing-section--hero {
    padding-top: var(--space-6);
}

.marketing-section--tight {
    padding-top: var(--space-6);
}

.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 0;
}

.site-footer__inner {
    max-width: var(--page-width);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer__copyright {
    color: var(--text-soft);
    font-size: var(--type-caption-size);
    text-align: center;
}

@media (max-width: 1080px) {
    .site-header__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.85rem;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .site-header__brand,
    .site-header__controls {
        justify-self: center;
    }
}

@media (max-width: 720px) {
    .marketing-shell,
    .marketing-section,
    .site-footer__inner,
    .site-header__inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-header__controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .site-footer__inner {
        justify-content: center;
    }
}