/* ==========================================================================
   Help Center
   Reuses global.css tokens (--blue, --peach, --text, --muted, --border …) and
   the shared card-hover pattern. Loaded on the hub template, single help
   articles, the help archives, and help-scoped search.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.help-hero {
  background: #f4f6fa;
  padding: 64px 0 56px;
  text-align: center;
}
.help-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 700;
  color: #1f52a4;
  margin: 0 0 10px;
}
.help-hero h1 { color: #1c1c1c; font-size: clamp(34px, 5vw, 52px); margin: 0 0 14px; }
.help-hero-sub { color: #595959; font-size: 17px; margin: 0 auto 28px; max-width: 560px; }

/* ---- Search ------------------------------------------------------------ */
.help-search { max-width: 680px; margin: 0 auto; }
.help-search--archive { margin: 0 0 26px; max-width: 520px; }
.help-search-field { position: relative; }
.help-search-input {
  width: 100%;
  padding: 16px 56px 16px 22px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(14,63,140,0.06);
  transition: border-color .15s, box-shadow .15s;
}
.help-search-input:focus {
  outline: none;
  border-color: #1f52a4;
  box-shadow: 0 4px 20px rgba(31,82,164,0.16);
}

/* ---- Keyboard focus visibility (a11y) -------------------------------
 * Custom-styled links, pills, summaries and buttons across the help
 * centre strip the UA focus ring; restore a clear one for keyboard users.
 * Scoped to the help wrappers (.help-single = article, .help-archive =
 * topic/role/all-articles) plus the hub card links. */
.help-single :focus-visible,
.help-archive :focus-visible,
.help-audience-card:focus-visible,
.help-topic-card:focus-visible,
.help-card:focus-visible,
.help-directory-role:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
.help-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #1f52a4;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.help-search-btn:hover { background: #143f85; }

/* Suggestion dropdown */
.help-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(14,63,140,0.10);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(14,63,140,0.16), 0 2px 6px rgba(14,63,140,0.08);
  z-index: 60;
  text-align: left;
}
.help-suggest-item a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.help-suggest-item.is-active a,
.help-suggest-item a:hover { background: #f4f6fa; color: #1f52a4; }
.help-suggest-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* Popular chips */
.help-popular { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.help-popular-label { color: var(--muted); font-size: 14px; }
.help-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
}
.help-chip:hover { border-color: #1f52a4; color: #1f52a4; transform: translateY(-1px); }

/* ---- Section scaffolding ---------------------------------------------- */
.help-audiences, .help-topics, .help-mostasked { padding: 56px 0; }
.help-audiences { background: #f4f6fa; }
.help-audiences h2, .help-topics h2, .help-mostasked h2 { text-align: center; font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 8px; }
.help-section-sub {
  max-width: 720px;
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
}

/* ---- Role cards -------------------------------------------------------- */
.help-audience-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.help-audience-card {
  /* Keep each card the width it had in the 4-up grid so an incomplete row
     (e.g. 3 roles) stays the same size and simply centres. */
  flex: 0 1 calc((100% - 3 * 22px) / 4);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(28,28,28,0.14);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
}
.help-audience-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--help-accent, var(--blue)); }
.help-audience-count { display: inline-block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.help-audience-card h3 { font-size: 19px; margin: 0 0 8px; }
.help-audience-card p,
.help-audience-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.help-audience-desc p { font-size: 14px; color: inherit; margin: 0; line-height: inherit; }
.help-audience-desc p + p { margin-top: 8px; }
.help-audience-link { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--help-accent, var(--blue)); }

/* ---- Topic grid -------------------------------------------------------- */
.help-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.help-topic-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.help-topic-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0 0 14px;
  border-radius: 10px;
  color: #1f52a4;
  background: rgba(31,82,164,0.08);
}
.help-topic-icon svg {
  width: 21px;
  height: 21px;
}
.help-topic-card h3 { font-size: 17px; margin: 0 0 6px; }
.help-topic-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; flex: 1; }
.help-topic-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); }
.help-topic-count { font-size: 13px; color: var(--muted); }
.help-topic-arrow { color: #1f52a4; font-weight: 700; font-size: 13px; line-height: 1; transition: transform .15s; }
.help-topic-card:hover .help-topic-arrow { transform: translateX(4px); }

/* ---- Most asked (accordion) ------------------------------------------- */
.help-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.help-faq-item {
  border-bottom: 1px solid var(--border);
}
.help-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 30px 18px 0;
  position: relative;
  font-weight: 600;
  color: var(--blue);
  font-size: 16px;
}
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1f52a4;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.help-faq-item[open] summary::after { content: '\00d7'; }
.help-faq-body { padding: 0 30px 18px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.help-faq-more { display: inline-block; margin-top: 8px; font-weight: 700; color: #1f52a4; text-decoration: none; }
.help-seeall { text-align: center; margin: 40px 0 0; }
.help-seeall-btn {
  background: var(--blue-dark);
  color: #fff;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}
.help-seeall-btn:hover { background: #18438a; opacity: 1; transform: translateY(-1px); }

/* ---- All-articles directory ------------------------------------------- */
.help-directory-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 28px 0 54px;
}
.help-directory-role {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 26px 22px 22px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(28,28,28,0.14);
  border-radius: 16px;
}
.help-directory-role strong {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.24;
}
.help-directory-role span:not(.help-audience-bar):not(.help-audience-count) {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}
.help-directory-role em {
  margin-top: auto;
  color: var(--help-accent, var(--blue));
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}
.help-section-heading {
  margin: 0 0 22px;
  max-width: 720px;
}
.help-section-heading h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.18;
}
.help-section-heading p {
  margin: 0;
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}
.help-directory-topics { margin: 0 0 54px; }
.help-shared-directory { margin-top: 8px; }

/* ---- CTA band ---------------------------------------------------------- */
.help-cta-band {
  background: #1f52a4;
  color: #fff;
  text-align: center;
  padding: 48px 0;
  border-radius: 28px 28px 0 0;
  margin-top: 56px;
}
/* On role landings the blue band follows the brand-coloured closing band —
   drop its top margin so the two CTAs sit close instead of double-gapped. */
.help-role-landing + .help-cta-band { margin-top: 8px; }
.help-cta-band h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin: 0 0 24px; }
.help-cta-actions { display: inline-flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.help-cta-actions .btn { padding: 12px 24px; font-size: 15px; min-width: 180px; text-align: center; font-weight: 700; }
.help-cta-note { margin-top: 22px; color: rgba(255,255,255,0.85); font-size: 14px; }
@media (max-width: 640px) {
  .help-cta-band h2 { font-size: 26px; letter-spacing: -0.4px; line-height: 1.22; }
  .help-cta-actions { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  .help-cta-actions .btn { width: 100%; }
  .help-cta-note { font-size: 14px; margin-top: 18px; }
}

/* ---- Single article ---------------------------------------------------- */
.help-single { padding: 0 0 64px; background: #fff; }
/* Breadcrumb */
.help-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #888;
}
.help-breadcrumb li + li::before { content: '\203a'; margin-right: 6px; color: var(--border); }
.help-breadcrumb a { color: var(--muted); text-decoration: none; }
.help-breadcrumb a:hover { color: var(--blue); }
.help-breadcrumb li[aria-current="page"] { color: var(--text); }

.help-article-main { padding: 38px 0 0; max-width: 1100px; }
.help-article-head {
  position: static;
  top: auto;
  z-index: auto;
  display: block;
  margin: 36px 0 24px;
  padding: 0;
  background: transparent !important;
  color: var(--text);
}
.help-article-head h1 {
  max-width: 900px;
  font-size: 28px;
  line-height: 1.18;
  margin: 0 0 16px;
  color: #222;
}
.help-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 700;
}
.help-article-meta a {
  color: var(--blue);
  text-decoration: none;
}

/* Role pill */
.help-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--help-accent, var(--blue));
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--help-accent, var(--blue)) 28%, #fff);
}

.help-article-body {
  max-width: 900px;
  font-size: 18px;
  line-height: 1.68;
  color: #4d4d4d;
}
.help-article-body > p:first-child {
  color: #2f2f2f;
  font-size: 18px;
  line-height: 1.68;
  font-weight: 400;
}
.help-article-body h2 { font-size: 22px; margin: 32px 0 12px; }
.help-article-body h3 { font-size: 18px; margin: 24px 0 10px; }
.help-article-body p { margin: 0 0 16px; }
.help-article-body ul, .help-article-body ol { margin: 0 0 16px; padding-left: 22px; }

/* Make in-content links unmistakably clickable. */
.help-article-body a {
  color: var(--help-accent, var(--blue));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
  word-break: break-word;
  transition: opacity .15s ease;
}
.help-article-body a:hover,
.help-article-body a:focus-visible { opacity: .75; }

/* Screenshot-led article view: sibling rail + focused answer + action cards. */
.help-article-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 52px;
  align-items: start;
}
.help-article-shell .help-article-main {
  max-width: none;
  padding: 34px 0 0;
}
.help-article-rail,
.help-article-aside {
  position: sticky;
  top: 92px;
  align-self: start;
}
.help-article-rail {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(28,28,28,0.10);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.help-rail-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 14px;
}
.help-rail-head a {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.help-rail-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.help-rail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.help-rail-list a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px 10px 16px;
  border-radius: 8px;
  color: #4f5661;
  text-decoration: none;
  border-left: 4px solid transparent;
}
.help-rail-list a:hover {
  color: var(--help-accent, var(--blue));
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 8%, #fff);
}
.help-rail-list a.is-current {
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 82%, #000);
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 12%, #fff);
  border-left-color: var(--help-accent, var(--blue));
  border-radius: 0 8px 8px 0;
}
.help-rail-num {
  font-size: 13px;
  font-weight: 600;
  color: currentColor;
}
.help-rail-copy {
  min-width: 0;
}
.help-rail-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.help-rail-list a.is-current .help-rail-title {
  font-weight: 700;
}
.help-rail-all {
  display: inline-block;
  margin: 18px 0 0;
  color: var(--help-accent, var(--blue));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.help-rail-explore {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(28,28,28,0.10);
}
.help-rail-explore-head {
  margin: 0 0 10px;
  padding: 0 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.help-article-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.help-article-title-row h1 {
  margin-bottom: 10px;
}
.help-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--help-accent, var(--blue)) 28%, #fff);
  border-radius: 8px;
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 80%, #000);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.help-share-btn svg {
  width: 17px;
  height: 17px;
}
.help-article-shell .help-article-body {
  max-width: none;
  font-size: 15px;
  line-height: 1.62;
  color: #333;
}
.help-article-shell .help-article-body > p:first-child {
  font-size: 15px;
  line-height: 1.62;
  font-weight: 400;
}
.help-article-shell .help-helpful {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: none;
  margin: 28px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(28,28,28,0.12);
  text-align: left;
  box-shadow: none;
}
.help-article-shell .help-helpful-q {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.help-article-shell .help-helpful-actions {
  justify-content: flex-end;
}
.help-article-shell .help-vote {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 76px;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(28,28,28,0.18);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}
.help-article-shell .help-vote-icon,
.help-article-shell .help-vote-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.help-article-shell .help-vote[data-vote="yes"]:hover:not(:disabled),
.help-article-shell .help-vote[data-vote="yes"].is-chosen {
  color: #188738;
  border-color: #188738;
}
.help-article-shell .help-vote[data-vote="no"]:hover:not(:disabled),
.help-article-shell .help-vote[data-vote="no"].is-chosen {
  color: #cf3f46;
  border-color: #cf3f46;
}
.help-article-shell .help-helpful-thanks {
  margin: 0;
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 78%, #000);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.help-article-pager {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.help-article-pager > p {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.help-article-pager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.help-pager-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 104px;
  padding: 18px 22px;
  color: var(--text);
  text-decoration: none;
}
.help-pager-card + .help-pager-card {
  border-left: 1px solid var(--border);
}
.help-pager-card--next {
  grid-column: 2;
  text-align: right;
}
.help-article-pager-grid:not(.has-single) .help-pager-card--next {
  grid-column: auto;
}
.help-pager-kicker {
  color: var(--help-accent, var(--blue));
  font-size: 13px;
  font-weight: 800;
}
.help-pager-card > span:last-child {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* Related articles (bottom of single article) */
.help-related { margin: 28px 0 0; }
.help-related-head { font-size: 18px; font-weight: 700; color: #14233b; margin: 0 0 18px; }
.help-related-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.help-related-card { display: flex; }
.help-related-card > a {
  display: flex; flex-direction: column; gap: 9px;
  width: 100%; padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px; background: #fff; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.help-related-card > a:hover {
  box-shadow: 0 8px 24px rgba(14,63,140,0.10); transform: translateY(-1px);
  border-color: rgba(14,63,140,0.22);
}
.help-related-topic {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 75%, #555);
}
.help-related-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.help-related-icon svg { width: 100%; height: 100%; }
.help-related-title { font-size: 15px; font-weight: 700; color: #1b2a44; line-height: 1.4; }
@media (max-width: 640px) { .help-related-grid { grid-template-columns: 1fr; } }

.help-article-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}
.help-side-card {
  padding: 20px 18px;
  border: 1px solid rgba(28,28,28,0.10);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.help-side-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.help-side-card dl {
  margin: 0 0 14px;
}
.help-side-card dl:last-child {
  margin-bottom: 0;
}
.help-side-card dt {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.help-side-card dd {
  margin: 0;
}
.help-side-card dd a {
  color: var(--help-accent, var(--blue));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.help-side-card--cta p {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.help-side-primary,
.help-side-secondary {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.help-side-primary {
  color: #fff;
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 84%, #000);
}
.help-side-secondary {
  margin-top: 8px;
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--help-accent, var(--blue)) 50%, #fff);
  background: #fff;
}
.help-side-topic-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-side-topic-list a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.help-side-topic-icon {
  display: grid;
  place-items: center;
  color: var(--help-accent, var(--blue));
}
.help-side-topic-icon svg {
  width: 18px;
  height: 18px;
}
.help-side-topic-arrow {
  color: var(--text);
  text-align: right;
}

/* Helpful widget */
.help-helpful {
  max-width: 900px;
  margin: 48px 0 0;
  padding: 28px;
  border-radius: 14px;
  background: #f7f7f3;
  border: 1px solid rgba(14,63,140,0.06);
  text-align: center;
}
.help-helpful-q { font-weight: 600; margin: 0 0 14px; }
.help-helpful-actions { display: flex; gap: 12px; justify-content: center; }
.help-vote {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.help-vote:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--blue); }
.help-vote[data-vote="yes"].is-chosen { border-color: #2f9e6b; color: #2f9e6b; }
.help-vote[data-vote="no"].is-chosen { border-color: #d05a5a; color: #d05a5a; }
.help-vote:disabled { opacity: .7; cursor: default; }
.help-helpful-thanks { margin: 0; font-weight: 600; color: var(--blue); }

/* In this category / related */
.help-subhead {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #333;
  margin: 42px 0 18px;
}
.help-subhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.help-incat-list {
  max-width: 900px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.help-incat-list li a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.help-incat-list li a:hover { color: var(--blue); }
.help-incat-arrow { color: var(--blue); }

/* ---- Card grid (archives, search, related) ----------------------------- */
.help-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.help-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 28px 30px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(14,63,140,0.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,63,140,0.08); border-color: rgba(14,63,140,0.18); }
.help-card-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #666;
  font-weight: 800;
  margin-bottom: 14px;
}
.help-card-title {
  font-size: 20px;
  line-height: 1.28;
  margin: 0 0 14px;
  color: var(--blue);
}
.help-card-excerpt {
  font-size: 16px;
  color: #555;
  margin: 0 0 22px;
  line-height: 1.5;
  flex: 1;
}
.help-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.help-card-read { font-size: 13px; color: #555; white-space: nowrap; }

/* Related-articles rail: compact cards, no excerpt. */
.help-related .help-card { min-height: 0; padding: 20px 22px; }
.help-related .help-card-excerpt { display: none; }
.help-related .help-card-eyebrow { font-size: 11px; margin-bottom: 10px; }
.help-related .help-card-title { font-size: 16px; line-height: 1.3; margin: 0 0 16px; }

/* ---- Archive + tabs ---------------------------------------------------- */
.help-archive { padding: 56px 0 72px; }
.help-archive--quiet { padding-top: 66px; }
.help-archive-head {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent !important;
  color: var(--text);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0 0 8px;
}
.help-archive-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--help-accent, var(--blue));
  margin: 0 0 10px;
}
.help-archive-head h1 { font-size: 34px; line-height: 1.12; margin: 0 0 12px; color: var(--text); }
.help-archive-desc { color: #555; font-size: 17px; line-height: 1.55; margin: 0 0 12px; max-width: 60ch; }
.help-archive-count { color: var(--muted); font-size: 14px; font-weight: 600; margin: 0 0 30px; }
/* Role views carry an accent bar above the header. */
.help-archive--view .help-archive-head[style*="--help-accent"] {
  border-top: 3px solid var(--help-accent, var(--blue));
  padding-top: 22px;
}
.help-archive-sub { color: var(--muted); margin: 0 0 28px; }

/* ---- Archive view: sidebar term nav + grouped list -------------------- */
.help-archive--view { padding-top: 40px; }
.help-archive-main { min-width: 0; padding-top: 4px; }
.help-sidebar-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; color: #8a8a8a; margin: 0 0 10px 10px;
}
.help-sidebar-terms { list-style: none; margin: 0; padding: 0; }
.help-sidebar-terms li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  font-size: 14px; color: #555; text-decoration: none;
  border-radius: 0 8px 8px 0; border-left: 4px solid transparent;
}
.help-sidebar-terms li a:hover { color: var(--blue); background: rgba(31,82,164,0.06); }
.help-sidebar-terms li a.is-active {
  color: var(--blue); font-weight: 700;
  background: rgba(31,82,164,0.10);
  border-left-color: var(--blue);
}
.help-sidebar-terms .help-term-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--blue);
}
.help-sidebar-terms .help-term-icon svg { width: 18px; height: 18px; }
.help-sidebar-terms .help-term-name { flex: 1; }
.help-sidebar-terms .help-term-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--help-accent, var(--blue));
}
.help-sidebar-terms--aud li a.is-active {
  border-left-color: var(--help-accent, var(--blue));
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 12%, #fff);
}
.help-group { margin: 0 0 38px; }
.help-group-head {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: #777; margin: 0 0 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.help-group-head a { color: #777; text-decoration: none; }
.help-group-head a:hover { color: var(--blue); }
.help-list { display: flex; flex-direction: column; }
.help-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 6px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(14,63,140,0.06);
  transition: background .15s, padding .15s;
}
.help-list-row:hover { background: rgba(14,63,140,0.025); padding-left: 12px; }
.help-list-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.help-list-title { font-size: 17px; font-weight: 700; color: var(--blue); line-height: 1.3; }
.help-list-snippet {
  font-size: 14px; color: #666; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.help-list-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.help-list-read { font-size: 13px; color: #999; white-space: nowrap; }
.help-list-arrow { color: var(--blue); font-size: 18px; }
.help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}
.help-tabs--article {
  margin: 0 0 26px;
  padding-bottom: 12px;
  gap: 12px;
}
.help-topic-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 32px; }
.help-tab {
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: #555;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.help-tab:hover { color: var(--blue); background: transparent; }
.help-tab.is-active {
  color: var(--blue);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--blue);
  border-radius: 0;
}
.help-empty { color: var(--muted); font-size: 16px; }
.help-empty a, .help-pagination a { color: var(--blue); }
.help-pagination { margin-top: 32px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .help-audience-card { flex-basis: calc((100% - 22px) / 2); }
  .help-directory-roles { grid-template-columns: repeat(2, 1fr); }
  .help-topic-grid { grid-template-columns: repeat(2, 1fr); }
  .help-card-grid { grid-template-columns: repeat(2, 1fr); }
  .help-faq-grid { grid-template-columns: 1fr; gap: 0; }
  .help-article-shell { grid-template-columns: 1fr; gap: 24px; }
  .help-article-rail,
  .help-article-aside { position: static; margin-top: 0; }
  .help-article-rail { order: 2; }
  .help-article-main { order: 1; }
  .help-article-aside { order: 3; }
  .help-article-main { padding-top: 0; }
}
@media (max-width: 620px) {
  .help-audience-card { flex-basis: 100%; }
  .help-directory-roles, .help-card-grid { grid-template-columns: 1fr; }
  /* Keep "Explore by topic" as a compact 2-up grid on mobile. */
  .help-topic-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .help-topic-card { padding: 16px; }
  .help-topic-card h3 { font-size: 16px; }
  .help-section-sub { margin-bottom: 24px; font-size: 16px; }
  .help-archive { padding-top: 34px; }
  .help-tabs { gap: 8px; margin-bottom: 28px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; }
  .help-tab { flex: 0 0 auto; font-size: 14px; padding: 8px 16px; }
  .help-card { min-height: 0; padding: 24px; }
  .help-article-head h1 { font-size: 28px; }
  .help-article-body { font-size: 17px; }
  .help-article-body > p:first-child { font-size: 18px; }
  .help-article-title-row,
  .help-article-shell .help-helpful { flex-direction: column; align-items: stretch; }
  .help-share-btn { align-self: flex-start; }
  .help-article-shell .help-helpful-actions { justify-content: stretch; }
  .help-article-shell .help-vote { flex: 1; }
  .help-article-pager-grid { grid-template-columns: 1fr; }
  .help-pager-card--next { grid-column: 1; }
  .help-pager-card + .help-pager-card { border-left: 0; border-top: 1px solid var(--border); }
}

/* "On this page" anchor rail (right column) */
.help-toc { position: sticky; top: 96px; align-self: start; padding-top: 40px; }
.help-toc-title {
  text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
  font-size: 11px; color: #8a8a8a; margin: 0 0 12px;
}
.help-toc-nav { display: flex; flex-direction: column; border-left: 2px solid var(--border); }
.help-toc-link {
  padding: 6px 0 6px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  color: #666; text-decoration: none; line-height: 1.35; font-size: 13px;
}
.help-toc-link.is-sub { padding-left: 26px; font-size: 12px; }
.help-toc-link:hover { color: var(--blue); }
.help-toc-link.is-active { color: var(--blue); border-left-color: var(--blue); font-weight: 700; }
.help-toc-browse { display: inline-block; margin-top: 18px; color: var(--blue); text-decoration: none; font-weight: 700; font-size: 13px; }

/* "Also useful for" chips */
.help-alsofor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 4px; }
.help-alsofor-label { font-size: 13px; font-weight: 700; color: #777; }
.help-alsofor-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.help-alsofor-chip:hover { border-color: var(--help-accent, var(--blue)); background: rgba(14,63,140,0.03); }
.help-alsofor-chip .help-term-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--help-accent, var(--blue)); }

/* In-category accordion */
.help-accordion { display: flex; flex-direction: column; gap: 10px; }
.help-acc-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.help-acc-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; font-weight: 700; font-size: 16px; color: var(--text);
}
.help-acc-q::-webkit-details-marker { display: none; }
.help-acc-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.help-acc-icon::before, .help-acc-icon::after { content: ''; position: absolute; background: var(--blue); border-radius: 2px; }
.help-acc-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.help-acc-icon::after  { left: 7px; top: 0; width: 2px; height: 16px; transition: transform .2s, opacity .2s; }
.help-acc-item[open] .help-acc-icon::after { transform: rotate(90deg); opacity: 0; }
.help-acc-item[open] .help-acc-q { color: var(--blue); }
.help-acc-a { padding: 0 20px 18px; color: #555; font-size: 16px; line-height: 1.6; }
.help-acc-a p { margin: 0 0 10px; }
.help-acc-more { font-size: 15px; }
.help-acc-more { color: var(--blue); font-weight: 700; text-decoration: none; }

/* Active role filter indicator (topic archive) */
.help-filter-active { display: flex; align-items: center; gap: 10px; margin: -18px 0 30px; font-size: 14px; color: #666; }
.help-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px; background: rgba(14,63,140,0.06);
  font-weight: 700; color: var(--text);
}
.help-filter-chip .help-term-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--help-accent, var(--blue)); }
.help-filter-clear { color: var(--blue); text-decoration: none; font-weight: 600; }

@media (max-width: 1180px) {
  /* Drop the "On this page" TOC rail on narrower viewports. */
  .help-toc { display: none; }
}

/* ---- Role landing (role archive) ------------------------------------- */
.help-role-landing { padding: 40px 0 24px; }
/* Role landing reuses the topic-page sidebar (.help-topic-sidebar /
   .help-sidebar-terms--aud) for an identical "Browse by role" rail — divider,
   sticky column, font sizing, and per-accent active pill all come from there. */

/* ...but tint each role row in its OWN accent (icon + label), active or not.
   Scoped to the role landing so the topic-page sidebar stays blue. Each <a>
   carries its role's --help-accent inline; the direct rule on the label/icon
   beats the shared blue colour the base sidebar inherits. */
.help-role-landing:not(.help-topic-page) .help-sidebar-terms--aud .help-term-icon,
.help-role-landing:not(.help-topic-page) .help-sidebar-terms--aud .help-term-name {
  color: var(--help-accent, var(--blue));
}

.help-role-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin: 18px 0 26px;
}
.help-role-hero-text { min-width: 0; }
.help-role-hero h1 { font-size: 34px; line-height: 1.12; margin: 0 0 10px; color: var(--text); }
.help-role-intro { color: #555; font-size: 17px; line-height: 1.55; margin: 0; max-width: 46ch; }
.help-role-illus {
  flex: 0 0 auto; width: 112px; height: 84px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 12%, #fff);
  color: var(--help-accent, var(--blue));
}
.help-role-illus svg { width: 42px; height: 42px; }

.help-role-search { position: relative; margin: 0 0 30px; }
.help-role-search .help-search-input {
  width: 100%; height: 52px; padding: 0 16px 0 46px; box-sizing: border-box;
}
.help-role-search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; border-radius: 50%;
  transition: color .15s, background .15s;
}
.help-role-search-icon:hover { color: var(--blue); background: rgba(14,63,140,0.06); }
.help-role-search-icon svg { width: 20px; height: 20px; }

/* Top questions — hand-picked shortcuts above the topic accordions. */
.help-role-top { margin: 0 0 30px; }
.help-role-top-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 0 14px;
}
.help-role-top-head h2 {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.2px;
}
.help-role-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.help-role-top-item a {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.help-role-top-item a:hover {
  border-color: var(--help-accent, var(--blue));
  box-shadow: 0 2px 10px rgba(14, 63, 140, 0.06);
}
.help-role-top-q { flex: 1; font-weight: 600; font-size: 16px; color: var(--text); }
.help-role-top-chev {
  flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}
.help-role-top-item a:hover .help-role-top-chev { border-color: var(--help-accent, var(--blue)); }

.help-role-browse {
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 14px;
}
.help-topic-acc-list { display: flex; flex-direction: column; gap: 10px; }
.help-topic-acc {
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  overflow: hidden;
}
.help-topic-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 14px; padding: 16px 18px;
}
.help-topic-acc > summary::-webkit-details-marker { display: none; }
.help-topic-acc-icon {
  flex: 0 0 auto; width: 24px; height: 24px; color: var(--help-accent, var(--blue));
  display: flex; align-items: center; justify-content: center;
}
.help-topic-acc-icon svg { width: 24px; height: 24px; }
.help-topic-acc-name { flex: 1; font-weight: 700; font-size: 16px; color: var(--text); }
.help-topic-acc-count { font-size: 13px; color: var(--muted); }
.help-topic-acc-chev {
  flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg);
  transition: transform .2s ease; margin-top: -3px;
}
.help-topic-acc[open] .help-topic-acc-chev { transform: rotate(225deg); margin-top: 3px; }
.help-topic-acc-body { padding: 2px 18px 18px; }
/* Chevron-led, divider-separated article rows at every width (this used to be
   a mobile-only treatment; promoted to the base so desktop reads the same). */
.help-topic-acc-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.help-topic-acc-links li + li { border-top: 1px solid var(--border); }
.help-topic-acc-links a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 0; color: var(--text); text-decoration: none;
  font-size: 16px; line-height: 1.45;
}
.help-topic-acc-links a::before {
  content: "\203A"; flex: 0 0 auto; font-size: 18px; line-height: 1.35;
  font-weight: 700; color: var(--help-accent, var(--blue));
}
.help-topic-acc-links a:hover { color: var(--help-accent, var(--blue)); }
/* Underline only the question text on hover — never the leading chevron. */
.help-topic-acc-links a:hover .help-topic-acc-q { text-decoration: underline; }
.help-topic-acc-all {
  display: block; margin-top: 0; padding: 14px 0 4px;
  border-top: 1px solid var(--border); font-size: 15px; font-weight: 700;
  color: var(--help-accent, var(--blue)); text-decoration: none;
}
.help-topic-acc-all:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .help-role-hero { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .help-role-hero h1 { font-size: 28px; }

  /* Mobile keeps the same chevron rows (now in the base) — just tighten the
     card padding and step the type down a touch. */
  .help-topic-acc > summary { padding: 14px 16px; gap: 12px; }
  .help-topic-acc-body { padding: 0 16px 6px; }
  .help-topic-acc-links a { font-size: 15px; }
}

/* Topic page — two columns: topics sidebar + role-grouped main. */
.help-topicpage-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start;
}
.help-topic-sidebar {
  position: sticky; top: 88px; min-height: calc(100vh - 88px);
  padding: 4px 22px 40px 0; border-right: 1px solid rgba(14,63,140,0.10);
}
.help-topic-main { min-width: 0; }
.help-topic-sidebar .help-sidebar-label { margin-left: 10px; }
@media (max-width: 900px) {
  .help-topicpage-grid { grid-template-columns: 1fr; gap: 8px; }
  .help-topic-sidebar { position: static; display: none; }
}

/* Topic page — role-grouped accordions + audience filter pills. */
.help-rolefilter-label { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.help-rolefilter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.help-rolefilter-pill {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: #555;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.help-rolefilter-pill:hover { border-color: var(--help-accent, var(--blue)); color: var(--help-accent, var(--blue)); }
.help-rolefilter-pill.is-active {
  background: var(--help-accent, var(--blue)); border-color: var(--help-accent, var(--blue)); color: #fff;
}
/* On the topic page each accordion's heading takes its role's accent colour. */
.help-topic-page .help-topic-acc-name { color: var(--help-accent, var(--text)); }

/* Role-coloured conversion band at the foot of the role landing —
   compact horizontal card: text left, CTAs right. */
.help-role-closing {
  margin-top: 32px; padding: 22px 28px; border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--help-accent, var(--blue)) 13%, #fff);
}
.help-role-closing-text { min-width: 0; }
.help-role-closing h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.25;
  margin: 0 0 2px; color: color-mix(in srgb, var(--help-accent, var(--blue)) 80%, #000);
}
.help-role-closing-sub { margin: 0; font-size: 15px; color: #4a4a4a; }
.help-role-closing-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.help-role-closing-actions a {
  display: inline-block; padding: 11px 22px; border-radius: 999px; font-size: 14px;
  font-weight: 700; text-align: center; border: 2px solid transparent;
  transition: opacity .15s, background .15s;
}
.help-role-closing-primary { background: color-mix(in srgb, var(--help-accent, var(--blue)) 84%, #000); color: #fff; }
.help-role-closing-primary:hover { opacity: .92; }
.help-role-closing-actions a.help-role-closing-secondary {
  background: transparent; border-color: var(--help-accent, var(--blue));
  color: color-mix(in srgb, var(--help-accent, var(--blue)) 78%, #000);
}
.help-role-closing-actions a.help-role-closing-secondary:hover { background: color-mix(in srgb, var(--help-accent, var(--blue)) 10%, transparent); }
@media (max-width: 640px) {
  .help-role-closing { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 20px; }
  .help-role-closing-actions { flex-direction: column; align-items: stretch; }
  .help-role-closing-actions a { flex: 1 1 auto; width: 100%; }
}

/* =======================================================================
   All help articles (/help) — search + role/topic filters + topic-grouped
   accordion cards with per-article role badges.
   ===================================================================== */
.help-allart { padding-top: 40px; }
.help-allart-head { margin: 10px 0 24px; }
.help-allart-head h1 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 8px; letter-spacing: -0.5px; }
.help-allart-desc { color: var(--muted); font-size: 17px; margin: 0; max-width: 680px; }

/* Controls row: search (left, grows) + role pills (right). */
.help-allart-controls {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 28px; margin: 0 0 18px;
}
.help-allart-search { position: relative; flex: 1 1 360px; min-width: 280px; }
.help-allart-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.help-allart-search-input {
  width: 100%; box-sizing: border-box; padding: 14px 16px 14px 46px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  font-size: 16px; color: var(--text); font-family: inherit;
}
.help-allart-search-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,82,164,0.12); }

.help-allart-roles { flex: 1 1 auto; }
.help-allart-roles-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.help-allart-rolepills { display: flex; flex-wrap: wrap; gap: 8px; }
.help-allart-rolepill {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: #555;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
/* Neutral at rest; the role's brand accent (set inline via --help-accent)
   only appears on hover/active — "All" falls back to brand blue. */
.help-allart-rolepill:hover { border-color: var(--help-accent, var(--blue)); color: var(--help-accent, var(--blue)); }
.help-allart-rolepill[data-role].is-active { background: var(--help-accent, var(--blue)); border-color: var(--help-accent, var(--blue)); color: #fff; }

/* Topic dropdown. */
.help-allart-topicfilter { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.help-allart-topicfilter label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.help-allart-topic {
  padding: 10px 38px 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 15px; font-weight: 600; color: var(--text); font-family: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer; min-width: 200px;
}

.help-allart-empty { color: var(--muted); font-size: 16px; margin: 0 0 24px; }
.help-allart-reset {
  background: none; border: none; padding: 0; color: var(--blue); font-weight: 700;
  font-size: inherit; font-family: inherit; cursor: pointer; text-decoration: underline;
}

/* Topic group cards. */
.help-allart-list { display: flex; flex-direction: column; gap: 14px; }
.help-allart-group { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.help-allart-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
}
.help-allart-group > summary::-webkit-details-marker { display: none; }
.help-allart-group-icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.help-allart-group-icon svg { width: 24px; height: 24px; }
.help-allart-group-name { font-weight: 800; font-size: 18px; color: var(--text); }
.help-allart-group-count { font-size: 13px; color: var(--muted); }
.help-allart-group-chev {
  flex: 0 0 auto; margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px;
}
.help-allart-group[open] .help-allart-group-chev { transform: rotate(225deg); margin-top: 3px; }
.help-allart-group-body { border-top: 1px solid var(--border); }

/* Article rows. */
.help-allart-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  text-decoration: none; color: var(--text); border-top: 1px solid #f0f1f4;
  transition: background .12s;
}
.help-allart-group-body > .help-allart-row:first-child { border-top: none; }
/* The display:flex above outranks the UA [hidden] rule, so JS-hidden rows would
   still render — restore the hide. */
.help-allart-row[hidden] { display: none; }
.help-allart-row:hover { background: #f7f9fc; }
.help-allart-row-icon { flex: 0 0 auto; width: 22px; height: 22px; color: #9aa3b2; display: flex; align-items: center; justify-content: center; }
.help-allart-row-icon svg { width: 20px; height: 20px; }
.help-allart-row-title { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.35; }
.help-allart-row:hover .help-allart-row-title { color: var(--blue); }
.help-allart-row-badges { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.help-allart-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  /* Tinted in each role's brand accent (set inline via --help-accent). */
  background: color-mix(in srgb, var(--help-accent, #5b59c4) 14%, #fff);
  color: color-mix(in srgb, var(--help-accent, #5b59c4) 78%, #000);
}
.help-allart-badge--all { background: #f0f1f4; color: #5d6470; }
.help-allart-row-chev {
  flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #c2c8d2;
  border-bottom: 2px solid #c2c8d2; transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .help-allart-controls { flex-direction: column; gap: 16px; }
  .help-allart-search { flex-basis: auto; width: 100%; }
  /* Keep the doc icon inline as a leading bullet beside the title (a 0 basis
     stops the long title from wrapping onto its own line below the icon);
     top-align so the icon sits on the title's first line. */
  .help-allart-row { flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
  .help-allart-row-icon { margin-top: 1px; }
  .help-allart-row-title { flex: 1 1 0; }
  .help-allart-row-badges { width: 100%; justify-content: flex-start; padding-left: 36px; order: 3; }
  .help-allart-row-chev { display: none; }
}