.help-article {
    --help-blue: var(--blue, #004AAD);
    --help-blue-soft: var(--blue-soft, #e8f0fb);
    --help-ink: var(--ink, #111111);
    --help-muted: var(--muted, #5b6472);
    --help-line: var(--line, #dde3ec);
    --help-gray: var(--gray, #F4F6FA);
    color: var(--help-ink);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 28px;
}

.help-article [id] {
    scroll-margin-top: 90px;
}

.help-article h2 {
    font-size: 1.55rem;
    margin: 40px 0 12px;
    line-height: 1.2;
}

.help-article h3 {
    font-size: 1.2rem;
    margin: 28px 0 10px;
}

.help-article h4 {
    font-size: 1.05rem;
    margin: 20px 0 8px;
}

.help-article p,
.help-article ul,
.help-article ol,
.help-article table,
.help-article figure,
.help-article details,
.help-article pre,
.help-article blockquote {
    margin: 0 0 16px;
}

.help-article ul,
.help-article ol {
    padding-left: 24px;
}

.help-article li + li {
    margin-top: 6px;
}

.help-article a {
    color: var(--help-blue);
}

.help-article strong {
    font-weight: 700;
}

.help-article img,
.help-article video {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--help-line);
    border-radius: 12px;
}

.help-article figcaption {
    color: var(--help-muted);
    font-size: .9rem;
    margin-top: 6px;
    text-align: center;
}

.help-article table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    display: block;
    overflow-x: auto;
}

.help-article th,
.help-article td {
    border: 1px solid var(--help-line);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.help-article th {
    background: var(--help-gray);
}

.help-article kbd,
.help-article code {
    background: var(--help-gray);
    border: 1px solid var(--help-line);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: .9em;
}

.help-article blockquote {
    border-left: 4px solid var(--help-line);
    padding-left: 16px;
    color: var(--help-muted);
}

.help-article details {
    border: 1px solid var(--help-line);
    border-radius: 12px;
    padding: 12px 16px;
}

.help-article summary {
    cursor: pointer;
    font-weight: 700;
}

.help-article aside {
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 16px;
    background: var(--help-gray);
    border-left: 4px solid var(--help-line);
}

.help-article aside.help-tip {
    background: var(--help-blue-soft);
    border-left-color: var(--help-blue);
}

.help-article aside.help-warning {
    background: #fff4d6;
    border-left-color: #e0a800;
}

.help-article aside.help-example {
    background: #eaf7ef;
    border-left-color: #2fa86a;
}

.help-article ol.help-steps {
    counter-reset: help-step;
    list-style: none;
    padding-left: 0;
}

.help-article ol.help-steps > li {
    counter-increment: help-step;
    position: relative;
    padding-left: 40px;
}

.help-article ol.help-steps > li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--help-blue);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}