@layer components {
    .marketing-shell {
            background: var(--dashboard-color-surface);
            color: var(--dashboard-color-text);
            min-height: 100vh;
        }

    .marketing-shell__frame {
            margin-left: auto;
            margin-right: auto;
            max-width: var(--dashboard-shell-max-width);
            width: 100%;
        }

    .marketing-shell__header,
        .marketing-footer {
            border-bottom: 1px solid var(--dashboard-color-border);
            background: var(--dashboard-color-surface);
        }

    .marketing-shell__header {
            position: relative;
            z-index: 50;
        }

    .marketing-shell__header-inner {
            display: grid;
            gap: 0.75rem;
            padding: 0.875rem var(--dashboard-section-padding-x);
        }

    .marketing-shell__brand-row {
            align-items: center;
            display: flex;
            justify-content: space-between;
            min-width: 0;
        }

    .marketing-shell__menu-button {
            align-items: center;
            color: var(--dashboard-color-text);
            display: inline-flex;
            justify-content: center;
            min-height: 2.5rem;
            min-width: 2.5rem;
        }

    .marketing-shell__menu {
            align-items: flex-start;
            display: grid;
            gap: 1rem;
        }

    .marketing-shell__nav,
        .marketing-shell__actions,
        .marketing-shell__mobile-secondary {
            display: grid;
            gap: 0.75rem;
        }

    .marketing-shell__nav-link,
        .marketing-shell__mobile-secondary a {
            color: var(--dashboard-color-text-muted);
            font-size: 1rem;
            font-weight: 650;
            line-height: 1.35;
            text-decoration: none;
        }

    .marketing-footer a {
            color: var(--dashboard-color-text-muted);
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.35;
            text-decoration: none;
        }

    .marketing-shell__nav-link:hover,
        .marketing-shell__mobile-secondary a:hover,
        .marketing-footer a:hover {
            color: var(--dashboard-color-text);
        }

    .marketing-shell__nav-button {
            align-items: center;
            background: transparent;
            border: 0;
            cursor: pointer;
            display: inline-flex;
            gap: 0.25rem;
            justify-self: start;
            padding: 0;
        }

    .marketing-shell__chevron {
            height: 1.125rem;
            width: 1.125rem;
        }

    .marketing-shell__features {
            position: relative;
        }

    .marketing-shell__feature-menu {
            background: var(--dashboard-color-surface);
            border: 1px solid var(--dashboard-color-border);
            border-radius: var(--dashboard-radius-sm);
            box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
            display: none;
            margin-top: 0.75rem;
            min-width: min(24rem, calc(100vw - 2.5rem));
            padding: 0.375rem;
            z-index: 30;
        }

    .marketing-shell__features.is-open .marketing-shell__feature-menu {
            display: block;
        }

    .marketing-shell__feature-list {
            display: grid;
            gap: 0.25rem;
        }

    .marketing-shell__feature-item {
            align-items: flex-start;
            border-radius: 0.625rem;
            color: var(--dashboard-color-text);
            display: grid;
            gap: 0.75rem;
            grid-template-columns: auto minmax(0, 1fr);
            padding: 0.625rem 0.75rem;
            text-decoration: none;
        }

    .marketing-shell__feature-item:hover {
            background: var(--dashboard-color-pill);
        }

    .marketing-shell__feature-icon {
            color: var(--dashboard-color-brand);
            display: inline-flex;
            margin-top: 0.125rem;
        }

    .marketing-shell__feature-icon i,
        .marketing-shell__feature-icon svg {
            height: 1.25rem;
            width: 1.25rem;
        }

    .marketing-shell__feature-item strong {
            color: var(--dashboard-color-text);
            display: block;
            font-size: 0.9375rem;
            font-weight: 720;
            line-height: 1.25;
        }

    .marketing-shell__feature-item small {
            color: var(--dashboard-color-text-muted);
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.4;
            margin-top: 0.25rem;
        }

    .marketing-shell__main {
            background: var(--dashboard-color-surface);
        }

    .marketing-shell__content {
            border-left: 1px solid var(--dashboard-color-border);
            border-right: 1px solid var(--dashboard-color-border);
            min-height: 20rem;
        }

    @media (min-width: 48rem) {
        .marketing-shell__header-inner {
                    align-items: center;
                    display: flex;
                    gap: 2rem;
                    justify-content: space-between;
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                    position: relative;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__brand-row {
                    flex: 0 0 auto;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__menu-button {
                    display: none;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__menu,
                .marketing-shell__menu.u-hidden {
                    align-items: center;
                    display: flex !important;
                    flex: 1 1 auto;
                    gap: 1.5rem;
                    justify-content: flex-end;
                    min-width: 0;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__nav,
                .marketing-shell__actions {
                    align-items: center;
                    display: flex;
                    gap: 1.5rem;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__nav {
                    left: 50%;
                    position: absolute;
                    transform: translateX(-50%);
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__mobile-secondary {
                    display: none;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__feature-menu {
                    left: 50%;
                    margin-top: 0;
                    min-width: 25rem;
                    position: absolute;
                    top: calc(100% + 0.875rem);
                    transform: translateX(-50%);
                }

        .marketing-shell__feature-menu::before {
                    content: "";
                    height: 0.875rem;
                    left: 0;
                    position: absolute;
                    right: 0;
                    top: -0.875rem;
                }
    }

    @media (min-width: 48rem) {
        .marketing-shell__content,
                .marketing-footer__inner {
                    border-left: 1px solid var(--dashboard-color-border);
                    border-right: 1px solid var(--dashboard-color-border);
                }
    }

    @media (max-width: 72rem) {
        .marketing-shell__content,
                .marketing-footer__inner {
                    border-left: 0;
                    border-right: 0;
                }
    }
}