@layer components {

    .help {
        max-width: 1280px;
        margin-inline: auto;
        padding: var(--s-7) var(--gutter) 0;
    }

    .help__search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--s-3);
        max-width: 640px;
        margin-inline: auto;
        padding-inline: var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-pill);
        background: var(--c-surface);
    }

    .help__search:focus-within {
        border-color: var(--c-ink);
    }

    .help__input {
        width: 100%;
        height: 52px;
        border: 0;
        background: none;
        font-size: var(--t-md);
        outline: none;
        appearance: none;
    }

    .help__none {
        margin-top: var(--s-6);
        text-align: center;
        color: var(--c-muted);
    }

    .help__layout {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--s-7) clamp(40px, 7vw, 120px);
        align-items: start;
        margin-top: var(--s-8);
    }

    .help__body > .faq {
        margin-top: 0;
    }

    @media (max-width: 899px) {
        .help__layout {
            grid-template-columns: minmax(0, 1fr);
            margin-top: var(--s-6);
        }
    }

}