/**
 * The help centre: one article, and one category.
 *
 * Both pages share this file because they share most of their surface — the
 * tokens, the full-bleed hero, the "Still stuck?" strip — and keeping two
 * copies of that is how the two pages start to look like different websites.
 * Everything common is scoped to .bpr-help; the parts that belong to one page
 * carry .bpr-help-article or .bpr-help-category as well.
 *
 * Scoped under .bpr and prefixed class by class, the same convention the help
 * centre's landing page uses, so the two pages share one visual language and
 * neither can be reached by a stray rule from the theme or a page builder.
 *
 * The tokens are declared here rather than inherited from the plugin's
 * stylesheet: they resolve to the theme's own brand variables, so the two
 * definitions cannot disagree, and this file still works if the plugin's
 * stylesheet is not on the page.
 */

.bpr.bpr-help {
    --bpr-red-400: #FF5A5F;
    --bpr-red-500: var(--baipar-primary, #EE1C25);
    --bpr-red-600: #D2121A;
    --bpr-navy-900: var(--baipar-secondary, #0D1930);
    --bpr-ink: var(--baipar-ink, #101C33);
    --bpr-ink-soft: #33425C;
    --bpr-muted: var(--baipar-muted, #6B7A93);
    --bpr-line: var(--baipar-line, #E6EBF2);
    --bpr-bg: var(--baipar-surface, #F4F7FB);
    --bpr-surface: #FFFFFF;

    --bpr-grad-red: linear-gradient(135deg, #FF4A4F 0%, #E01119 100%);
    --bpr-grad-soft: linear-gradient(140deg, #FFF1F2 0%, #F6F9FE 52%, #EDF3FF 100%);
    --bpr-grad-soft2: linear-gradient(150deg, #FFF7F7 0%, #FFFFFF 70%);

    --bpr-glow-1: var(--bpr-red-500);
    --bpr-glow-2: #2F6BFF;

    --bpr-shadow-s: 0 1px 2px rgba(13, 25, 48, .05), 0 4px 14px rgba(13, 25, 48, .05);
    --bpr-shadow-m: 0 2px 6px rgba(13, 25, 48, .05), 0 18px 44px rgba(13, 25, 48, .09);

    --bpr-font: "Outfit", var(--baipar-font-body, "DM Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    position: relative;
    margin: 0;
    padding: 0 0 78px;
    overflow-x: clip;
    background: var(--bpr-bg);
    color: var(--bpr-ink);
    font-family: var(--bpr-font);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* The theme's page wrapper boxes and pads its main column; the hero wants the
   full width and supplies its own spacing. */
.bpr.bpr-help {
    width: 100%;
    max-width: none;
    padding-block: 0 78px;
}

.bpr-help *,
.bpr-help *::before,
.bpr-help *::after { box-sizing: border-box; }

.bpr-help img,
.bpr-help svg { display: block; max-width: 100%; }

.bpr-help a { color: inherit; text-decoration: none; }

.bpr-help h1,
.bpr-help h2,
.bpr-help h3,
.bpr-help h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

.bpr-help p { margin: 0; }
.bpr-help ul,
.bpr-help ol { margin: 0; padding: 0; list-style: none; }
.bpr-help button { font-family: inherit; }
.bpr-help ::selection { background: #FFD9DB; color: var(--bpr-ink); }

.bpr-help .bpr-wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── hero ────────────────────────────────────────────────────────────── */

.bpr-help .bpr-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 0 46px;
    border-bottom: 1px solid #EAEFF7;
    background: var(--bpr-grad-soft);
}

.bpr-help .bpr-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    color: var(--bpr-navy-900);
}

.bpr-help .bpr-hero > .bpr-wrap { position: relative; z-index: 1; }

.bpr-help .bpr-hero-bg__dots { color: var(--bpr-navy-900); }
.bpr-help .bpr-hero-bg__ring1 { color: var(--bpr-glow-1); }
.bpr-help .bpr-glow-a { stop-color: var(--bpr-glow-1); }
.bpr-help .bpr-glow-b { stop-color: var(--bpr-glow-2); }
.bpr-help .bpr-art-grad-from { stop-color: #FF4A4F; }
.bpr-help .bpr-art-grad-to { stop-color: var(--bpr-red-600); }
.bpr-help .bpr-art-accent { color: var(--bpr-red-400); }

/* ── breadcrumb ──────────────────────────────────────────────────────── */

.bpr-help .bpr-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--bpr-muted);
    font-size: 14px;
}

.bpr-help .bpr-crumbs a { font-weight: 500; transition: color .2s ease; }
.bpr-help .bpr-crumbs a:hover { color: var(--bpr-red-600); }
.bpr-help .bpr-sep { color: #B9C4D4; }
.bpr-help .bpr-here { color: var(--bpr-ink); font-weight: 600; }

/* ── article head ────────────────────────────────────────────────────── */

.bpr-help .bpr-art-head {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 32px;
    align-items: center;
    margin-top: 26px;
}

.bpr-help .bpr-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border: 1px solid #F8CBCD;
    border-radius: 999px;
    background: #FFECED;
    color: var(--bpr-red-600);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}

.bpr-help .bpr-tag:hover { background: #FFE2E3; border-color: var(--bpr-red-400); }

/* The category's own animated drawing, at pill size. */
.bpr-help .bpr-tag-ico { display: grid; place-items: center; }
.bpr-help .bpr-tag-ico svg { width: 15px; height: 15px; }

.bpr-help .bpr-art-head h1 {
    max-width: 20ch;
    margin: 16px 0 14px;
    font-size: clamp(29px, 3.9vw, 46px);
    font-weight: 800;
    text-wrap: balance;
}

.bpr-help .bpr-art-head > div > p {
    max-width: 52ch;
    color: var(--bpr-ink-soft);
    font-size: 16.5px;
}

.bpr-help .bpr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
    color: var(--bpr-muted);
    font-size: 13.5px;
}

.bpr-help .bpr-meta span { display: inline-flex; align-items: center; gap: 7px; }
.bpr-help .bpr-meta svg { color: var(--bpr-red-400); }

/* ── layout ──────────────────────────────────────────────────────────── */

.bpr-help .bpr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 334px;
    gap: 30px;
    align-items: start;
    margin-top: 36px;
}

.bpr-help .bpr-card {
    overflow: hidden;
    border: 1px solid var(--bpr-line);
    border-radius: 28px;
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-m);
}

.bpr-help .bpr-art-body { padding: 34px 44px 42px; }

.bpr-help .bpr-art-body > p {
    margin-bottom: 14px;
    color: var(--bpr-ink-soft);
    font-size: 16.5px;
}

.bpr-help .bpr-art-body > p:first-child { font-size: 17px; }
.bpr-help .bpr-art-body a { color: var(--bpr-red-600); text-decoration: underline; text-underline-offset: 2px; }

/* ── section headings ────────────────────────────────────────────────── */

.bpr-help .bpr-h2 {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 40px 0 18px;
    scroll-margin-top: 24px;
}

.bpr-help .bpr-art-body > .bpr-h2:first-child { margin-top: 0; }

.bpr-help .bpr-mk {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(150deg, #FFF1F1, #FFE1E2);
    box-shadow: inset 0 0 0 1px rgba(238, 28, 37, .14);
    color: var(--bpr-red-600);
}

.bpr-help .bpr-h2 h2 { font-size: 22px; font-weight: 700; }
.bpr-help .bpr-h2--sub h2 { font-size: 18.5px; }
.bpr-help .bpr-h2--sub .bpr-mk { width: 30px; height: 30px; border-radius: 9px; }

/* ── ticked rows ─────────────────────────────────────────────────────── */

.bpr-help .bpr-ticks { display: grid; gap: 11px; margin-bottom: 14px; }

.bpr-help .bpr-ticks li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px 16px;
    border: 1px solid var(--bpr-line);
    border-radius: 14px;
    background: #FBFCFE;
    color: var(--bpr-ink-soft);
    font-size: 16px;
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.bpr-help .bpr-ticks li:hover { border-color: #F4D2D4; background: #fff; transform: translateX(4px); }
.bpr-help .bpr-ticks li svg { flex: none; margin-top: 3px; color: var(--bpr-red-500); }

/* ── numbered steps ──────────────────────────────────────────────────── */

.bpr-help .bpr-steps { display: grid; gap: 12px; margin-bottom: 14px; counter-reset: bpr-s; }

.bpr-help .bpr-steps li {
    position: relative;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 15px 18px;
    border: 1px solid var(--bpr-line);
    border-radius: 16px;
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
    color: var(--bpr-ink-soft);
    font-size: 16px;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.bpr-help .bpr-steps li:hover { transform: translateY(-3px); box-shadow: var(--bpr-shadow-m); border-color: #F4D2D4; }

.bpr-help .bpr-num {
    counter-increment: bpr-s;
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--bpr-grad-red);
    box-shadow: 0 8px 16px -8px rgba(224, 17, 25, .8);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bpr-help .bpr-num::before { content: counter(bpr-s, decimal-leading-zero); }

/* ── callouts ────────────────────────────────────────────────────────── */

.bpr-help .bpr-note,
.bpr-help .bpr-warn {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 22px 0;
    border-radius: 16px;
}

.bpr-help .bpr-note {
    padding: 18px 20px;
    border: 1px solid #DCE8F7;
    background: linear-gradient(135deg, #F3F8FF, #FAFCFF);
    color: var(--bpr-ink-soft);
    font-size: 16px;
}

.bpr-help .bpr-note .bpr-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #E3EEFC;
    color: #24589E;
}

.bpr-help .bpr-warn {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border: 1px solid #FFD6D8;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF3F3, #FFF9F9);
}

.bpr-help .bpr-warn .bpr-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bpr-grad-red);
    box-shadow: 0 10px 20px -10px rgba(224, 17, 25, .9);
    color: #fff;
}

.bpr-help .bpr-warn p { color: #7B2A2E; font-size: 16px; font-weight: 600; }
.bpr-help .bpr-note b,
.bpr-help .bpr-note strong { color: var(--bpr-ink); font-weight: 700; }

/* ── was this helpful ────────────────────────────────────────────────── */

.bpr-help .bpr-fb {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--bpr-line);
    text-align: center;
}

.bpr-help .bpr-fb h3 { margin-bottom: 16px; font-size: 17.5px; font-weight: 700; }

.bpr-help .bpr-fb-row {
    display: flex;
    gap: 14px;
    max-width: 620px;
    margin-inline: auto;
}

/* The plugin's script hides this row once a vote is cast, and [hidden] is only
   a hint that any class-level display beats. */
.bpr-help .bpr-fb-row[hidden] { display: none; }

.bpr-help .bpr-fb-row button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border: 1.6px solid #F3C7C9;
    border-radius: 999px;
    background: #fff;
    color: var(--bpr-red-600);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.bpr-help .bpr-fb-row button:hover {
    transform: translateY(-2px);
    border-color: var(--bpr-red-500);
    box-shadow: 0 14px 26px -14px rgba(224, 17, 25, .7);
}

.bpr-help .bpr-fb-thanks { margin-top: 14px; color: var(--bpr-muted); font-size: 15px; min-height: 23px; }
.bpr-help .bpr-fb-thanks[hidden] { display: none; }

/* ── sidebar ─────────────────────────────────────────────────────────── */

.bpr-help .bpr-side { position: sticky; top: 24px; display: grid; gap: 18px; }

.bpr-help .bpr-panel {
    padding: 22px 22px 24px;
    border: 1px solid var(--bpr-line);
    border-radius: 22px;
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
}

.bpr-help .bpr-panel h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--bpr-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bpr-help .bpr-panel h4 svg { color: var(--bpr-red-500); flex: none; }

.bpr-help .bpr-toc { display: grid; gap: 3px; }

.bpr-help .bpr-toc a {
    position: relative;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 10px 12px 10px 14px;
    border-radius: 11px;
    color: var(--bpr-ink-soft);
    font-size: 15px;
    font-weight: 500;
    transition: background .22s ease, color .22s ease;
}

.bpr-help .bpr-toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: var(--bpr-grad-red);
    opacity: 0;
    transform: scaleY(.3);
    transition: opacity .25s ease, transform .25s ease;
}

.bpr-help .bpr-toc a:hover { background: #F7F9FC; color: var(--bpr-ink); }
.bpr-help .bpr-toc a.bpr-on { background: #FFF5F5; color: var(--bpr-ink); font-weight: 600; }
.bpr-help .bpr-toc a.bpr-on::before { opacity: 1; transform: scaleY(1); }

.bpr-help .bpr-flow-steps { display: grid; gap: 11px; margin-top: 4px; }

.bpr-help .bpr-flow-steps li {
    position: relative;
    padding-left: 20px;
    color: var(--bpr-ink-soft);
    font-size: 14.5px;
}

.bpr-help .bpr-flow-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bpr-grad-red);
    box-shadow: 0 0 0 3px #FFECED;
}

.bpr-help .bpr-flow-steps b { display: block; color: var(--bpr-ink); font-weight: 600; line-height: 1.4; }
.bpr-help .bpr-flow-steps a:hover b { color: var(--bpr-red-600); }

/* ── still stuck ─────────────────────────────────────────────────────── */

.bpr-help .bpr-help-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #FAD3D5;
    background: var(--bpr-grad-soft2);
    box-shadow: 0 20px 44px -26px rgba(224, 17, 25, .45);
    color: var(--bpr-ink);
}

.bpr-help .bpr-hc-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.bpr-help .bpr-help-card > *:not(.bpr-hc-bg) { position: relative; z-index: 1; }
.bpr-help .bpr-help-card h4 { color: var(--bpr-red-600); }
.bpr-help .bpr-help-card p { margin-bottom: 16px; color: var(--bpr-ink-soft); font-size: 14.5px; }

.bpr-help .bpr-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--bpr-grad-red);
    box-shadow: 0 14px 28px -12px rgba(224, 17, 25, .85);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .25s ease;
}

.bpr-help .bpr-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(224, 17, 25, .9); }

.bpr-help .bpr-mail {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 16px;
    border: 1px solid #F0D5D7;
    border-radius: 999px;
    background: #fff;
    color: var(--bpr-ink);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}

.bpr-help .bpr-mail:hover { background: #FFF3F3; border-color: var(--bpr-red-400); transform: translateY(-2px); }
.bpr-help .bpr-mail svg { color: var(--bpr-red-500); flex: none; }

/* ── related ─────────────────────────────────────────────────────────── */

.bpr-help .bpr-related { margin-top: 44px; }

.bpr-help .bpr-related-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.bpr-help .bpr-related-head h2 { font-size: 24px; font-weight: 700; }
.bpr-help .bpr-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--bpr-line), transparent); }

.bpr-help .bpr-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.bpr-help .bpr-rel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding: 22px 22px 20px;
    border: 1px solid var(--bpr-line);
    border-radius: 20px;
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.bpr-help .bpr-rel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bpr-grad-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}

.bpr-help .bpr-rel:hover { transform: translateY(-6px); box-shadow: var(--bpr-shadow-m); border-color: #F4D2D4; }
.bpr-help .bpr-rel:hover::before { transform: scaleX(1); }
.bpr-help .bpr-rel h3 { font-size: 16.5px; font-weight: 600; }
.bpr-help .bpr-rel p { color: var(--bpr-muted); font-size: 14.5px; }

.bpr-help .bpr-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--bpr-red-600);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bpr-help .bpr-go svg { transition: transform .3s ease; }
.bpr-help .bpr-rel:hover .bpr-go svg { transform: translateX(4px); }

/* ── reveal ──────────────────────────────────────────────────────────── */

.bpr-help.bpr-js .bpr-reveal { opacity: 0; transform: translateY(20px); }

.bpr-help.bpr-js .bpr-reveal.bpr-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

.bpr-help.bpr-js .bpr-reveal.bpr-d1.bpr-in { transition-delay: .08s; }
.bpr-help.bpr-js .bpr-reveal.bpr-d2.bpr-in { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
    .bpr-help *,
    .bpr-help *::before,
    .bpr-help *::after { animation: none !important; transition-duration: .01ms !important; }
    .bpr-help.bpr-js .bpr-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── breakpoints ─────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    .bpr-help .bpr-layout { grid-template-columns: 1fr; }
    .bpr-help .bpr-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bpr-help .bpr-rel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .bpr.bpr-help { padding-block: 0 56px; }
    .bpr-help .bpr-wrap { padding-inline: 18px; }
    .bpr-help .bpr-hero { padding: 22px 0 34px; }
    .bpr-help .bpr-art-head { grid-template-columns: 1fr; gap: 22px; margin-top: 20px; }
    .bpr-help .bpr-art-head-art { max-width: 190px; }
    .bpr-help .bpr-art-body { padding: 28px 22px 34px; }
    .bpr-help .bpr-side { grid-template-columns: 1fr; }
    .bpr-help .bpr-fb-row { flex-direction: column; }
    .bpr-help .bpr-card { border-radius: 22px; }
}

/* ═══ the category page ═══════════════════════════════════════════════ */

.bpr-help-category .bpr-hero-grid {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 34px;
    align-items: center;
    margin-top: 26px;
}

.bpr-help-category .bpr-cat-ico {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 12px 26px -14px rgba(224, 17, 25, .55), inset 0 0 0 1px rgba(238, 28, 37, .14);
    color: var(--bpr-red-500);
}

.bpr-help-category .bpr-cat-ico svg { width: 30px; height: 30px; }

.bpr-help-category .bpr-hero h1 {
    margin-bottom: 12px;
    font-size: clamp(32px, 4.4vw, 50px);
    font-weight: 800;
    text-wrap: balance;
}

.bpr-help-category .bpr-sub { max-width: 50ch; color: var(--bpr-ink-soft); font-size: 17.5px; }

/* ── filter ──────────────────────────────────────────────────────────── */

.bpr-help-category .bpr-filter {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: 26px;
    padding: 7px;
    padding-inline-start: 20px;
    border: 1px solid #E7ECF4;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 14px 34px -22px rgba(13, 25, 48, .5);
    transition: box-shadow .25s ease, transform .25s ease;
}

.bpr-help-category .bpr-filter:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px -22px rgba(13, 25, 48, .55), 0 0 0 2px var(--bpr-red-500);
}

.bpr-help-category .bpr-filter > svg { flex: none; color: var(--bpr-muted); }

/* Explicit sizing, because a page-builder kit setting width:100% on every
   input is what put the search button on its own line once already. */
.bpr-help-category .bpr-filter input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding-block: 10px;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bpr-ink);
    font-size: 16px;
    text-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.bpr-help-category .bpr-filter input::placeholder { color: #9AA7BC; opacity: 1; }
.bpr-help-category .bpr-filter input::-webkit-search-cancel-button,
.bpr-help-category .bpr-filter input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.bpr-help-category .bpr-clear {
    flex: none;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #F2F5F9;
    color: var(--bpr-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.bpr-help-category .bpr-clear:hover { background: #FFECED; color: var(--bpr-red-600); }
.bpr-help-category .bpr-filter.bpr-has-text .bpr-clear { display: grid; }

/* ── child categories ────────────────────────────────────────────────── */

.bpr-help-category .bpr-kids { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.bpr-help-category .bpr-kids a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--bpr-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bpr-ink);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.bpr-help-category .bpr-kids a:hover { border-color: var(--bpr-red-400); color: var(--bpr-red-600); transform: translateY(-2px); }
.bpr-help-category .bpr-kids span { color: var(--bpr-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ── list ────────────────────────────────────────────────────────────── */

.bpr-help-category .bpr-list-head { display: flex; align-items: center; gap: 14px; margin: 38px 0 20px; }
.bpr-help-category .bpr-list-head h2 { font-size: 22px; font-weight: 700; }

.bpr-help-category .bpr-count {
    padding: 5px 12px;
    border: 1px solid #F8CBCD;
    border-radius: 999px;
    background: #FFECED;
    color: var(--bpr-red-600);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.bpr-help-category .bpr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* The filter hides items with the hidden attribute, and [hidden] is only a
   presentation hint that any class-level display beats. */
.bpr-help-category .bpr-item[hidden] { display: none; }

.bpr-help-category .bpr-item {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow: hidden;
    padding: 22px 22px 22px 20px;
    border: 1px solid var(--bpr-line);
    border-radius: 20px;
    background: var(--bpr-surface);
    box-shadow: var(--bpr-shadow-s);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.bpr-help-category .bpr-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bpr-grad-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}

.bpr-help-category .bpr-item:hover { transform: translateY(-5px); box-shadow: var(--bpr-shadow-m); border-color: #F4D2D4; }
.bpr-help-category .bpr-item:hover::before { transform: scaleY(1); }

.bpr-help-category .bpr-item .bpr-n {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #FFF1F1;
    box-shadow: inset 0 0 0 1px rgba(238, 28, 37, .12);
    color: var(--bpr-red-600);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background .3s ease, color .3s ease;
}

.bpr-help-category .bpr-item:hover .bpr-n {
    background: var(--bpr-grad-red);
    box-shadow: 0 10px 18px -10px rgba(224, 17, 25, .85);
    color: #fff;
}

.bpr-help-category .bpr-tx { flex: 1; min-width: 0; }
.bpr-help-category .bpr-item h3 { margin-bottom: 5px; font-size: 16.5px; font-weight: 600; }
.bpr-help-category .bpr-item p { color: var(--bpr-muted); font-size: 14.5px; }

.bpr-help-category .bpr-item .bpr-go {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4F7FB;
    color: var(--bpr-muted);
    transition: background .28s ease, color .28s ease, transform .28s ease;
}

.bpr-help-category .bpr-item:hover .bpr-go { background: var(--bpr-grad-red); color: #fff; transform: translateX(3px); }

/* ── nothing matched ─────────────────────────────────────────────────── */

.bpr-help-category .bpr-empty {
    display: none;
    padding: 46px 20px;
    border: 1px dashed #D9E2EC;
    border-radius: 20px;
    background: #fff;
    color: var(--bpr-muted);
    font-size: 16px;
    text-align: center;
}

.bpr-help-category .bpr-empty b { display: block; margin-bottom: 6px; color: var(--bpr-ink); font-size: 18px; font-weight: 700; }

.bpr-help-category.bpr-no-results .bpr-grid { display: none; }
.bpr-help-category.bpr-no-results .bpr-empty { display: block; }
.bpr-help-category.bpr-no-results .bpr-pager,
.bpr-help-category.bpr-filtering .bpr-pager { display: none; }

/* ── pagination ──────────────────────────────────────────────────────── */

.bpr-help-category .bpr-pager { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 34px; }

.bpr-help-category .bpr-pager a,
.bpr-help-category .bpr-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 42px;
    height: 42px;
    padding-inline: 14px;
    border: 1px solid var(--bpr-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--bpr-shadow-s);
    color: var(--bpr-ink-soft);
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease;
}

.bpr-help-category .bpr-pager a:hover { transform: translateY(-2px); border-color: #F4D2D4; color: var(--bpr-red-600); }

.bpr-help-category .bpr-pager .current {
    background: var(--bpr-grad-red);
    border-color: transparent;
    box-shadow: 0 12px 24px -12px rgba(224, 17, 25, .85);
    color: #fff;
}

/* ── still stuck strip ───────────────────────────────────────────────── */

.bpr-help-category .bpr-stuck {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    margin-top: 46px;
    padding: 34px 38px;
    border: 1px solid #FAD3D5;
    border-radius: 26px;
    background: var(--bpr-grad-soft2);
    box-shadow: 0 22px 48px -30px rgba(224, 17, 25, .45);
}

.bpr-help-category .bpr-stuck-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.bpr-help-category .bpr-stuck > div { position: relative; z-index: 1; min-width: 0; }
.bpr-help-category .bpr-stuck h3 { margin-bottom: 8px; font-size: 22px; font-weight: 800; }
.bpr-help-category .bpr-stuck p { max-width: 52ch; color: var(--bpr-ink-soft); font-size: 15.5px; }
.bpr-help-category .bpr-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }

.bpr-help-category .bpr-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid #F0D5D7;
    border-radius: 999px;
    background: #fff;
    color: var(--bpr-ink);
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, border-color .25s ease, background .25s ease;
}

.bpr-help-category .bpr-btn-ghost:hover { transform: translateY(-2px); border-color: var(--bpr-red-400); background: #FFF6F6; }
.bpr-help-category .bpr-btn-ghost svg { color: var(--bpr-red-500); flex: none; }

/* The strip's button is inline, not the sidebar's full-width one. */
.bpr-help-category .bpr-row .bpr-btn { width: auto; padding: 12px 22px; }

/* ── breakpoints ─────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .bpr-help-category .bpr-grid { grid-template-columns: 1fr; }
    .bpr-help-category .bpr-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .bpr-help-category .bpr-hero-art { max-width: 210px; }
    .bpr-help-category .bpr-stuck { grid-template-columns: 1fr; padding: 28px 24px; }
    .bpr-help-category .bpr-stuck-art { max-width: 180px; }
}

@media (max-width: 620px) {
    .bpr-help-category .bpr-item { padding: 18px 16px; }
    .bpr-help-category .bpr-list-head { flex-wrap: wrap; gap: 10px; }
    .bpr-help-category .bpr-list-head .bpr-line { display: none; }
    .bpr-help-category .bpr-pager a,
    .bpr-help-category .bpr-pager span { min-width: 38px; height: 38px; padding-inline: 11px; font-size: 14px; }
}