.help-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 100svh;
    overflow: hidden;
    padding: 72px 32px;
    background: radial-gradient(ellipse at 15% 20%, var(--info-soft), transparent 50%), radial-gradient(ellipse at 90% 80%, var(--bg-3), transparent 50%), var(--surface);
    color: var(--text-1);
}

.help-network:where(.help-hero, .help-hero *) {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center,transparent 8%,#0009 70%);
}

.help-network svg:where(.help-hero, .help-hero *) {
    width: 100%;
    height: 100%;
    min-height: 640px;
    color: var(--text-3);
}

.help-network path:where(.help-hero, .help-hero *) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: .35;
}

.help-network circle:where(.help-hero, .help-hero *) {
    fill: var(--surface);
    stroke: currentColor;
    stroke-width: 1.5;
}

.help-network__orbit:where(.help-hero, .help-hero *) {
    transform-box: fill-box;
    transform-origin: center;
    animation: help-drift 24s ease-in-out infinite alternate;
}

.help-network__orbit--two:where(.help-hero, .help-hero *) {
    animation-name: help-drift-back;
    animation-duration: 31s;
    animation-delay: -12s;
}

.help-network__orbit--three:where(.help-hero, .help-hero *) {
    animation-duration: 28s;
    animation-delay: -8s;
}

.help-hero__content:where(.help-hero, .help-hero *) {
    max-width: 640px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.help-brand:where(.help-hero, .help-hero *) {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    letter-spacing: -.8px;
    margin-bottom: 52px;
}

.help-brand img:where(.help-hero, .help-hero *) {
    display: block;
}

.help-hero__eyebrow:where(.help-hero, .help-hero *) {
    font-size: var(--fs-12);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 18px;
}

.help-hero h1 {
    font-size: var(--fs-32);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -.045em;
    margin: 0;
    text-wrap: balance;
}

.help-hero p {
    max-width: 480px;
    font-size: var(--fs-16);
    line-height: var(--lh-text);
    color: var(--text-2);
    margin: 24px 0 30px;
    text-wrap: pretty;
}

.help-hero__guides:where(.help-hero, .help-hero *) {
    font-size: var(--fs-14);
    color: var(--text-2);
    text-decoration: none;
    margin-top: 22px;
    padding: 8px;
}

.help-hero__guides:hover:where(.help-hero, .help-hero *) {
    text-decoration: underline;
}

.help-hero :is(button,a):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

@keyframes help-drift {
    from {
        transform: translate(-18px,8px) rotate(-7deg);
    }

    to {
        transform: translate(35px,-28px) rotate(9deg);
    }
}

@keyframes help-drift-back {
    from {
        transform: translate(28px,-18px) rotate(8deg);
    }

    to {
        transform: translate(-35px,30px) rotate(-10deg);
    }
}

@media (max-width:768px) {
    .help-hero {
        min-height: calc(100svh - 48px);
        padding: 40px 24px 100px;
    }

    .help-brand:where(.help-hero, .help-hero *) {
        margin-bottom: 36px;
    }

    .help-hero p {
        font-size: var(--fs-14);
        margin: 20px 0 26px;
    }

    .help-network:where(.help-hero, .help-hero *) {
        opacity: .7;
    }
}

@media (prefers-reduced-motion:reduce) {
    .help-network__orbit:where(.help-hero, .help-hero *) {
        animation: none;
    }
}

@media (max-width:768px) {
    body:has(.mobile-bottom-nav) .help-hero {
        min-height: 100svh;
    }
}

.help-hero .help-hero__chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 14px 26px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
    text-decoration: none;
}