/* Page-owned Help Center layout; the shared Mint shell remains unchanged. */
#helpCenter { --hc-ink: #173b37; --hc-muted: #667674; --hc-teal: #007f79; --hc-fill: #edf4f3; margin: var(--cs-header-h, 72px) 0 0; padding: 0 0 52px; font-family: MintGothic, system-ui, sans-serif; }
#helpCenter *, #helpCenter *::before, #helpCenter *::after { box-sizing: border-box; }
#helpCenter [hidden] { display: none !important; }
#helpCenter :is(h1, h2, h3, p) { margin: 0; }
#helpCenter button, #helpCenter input { font: inherit; }
#helpCenter a { color: var(--hc-teal); text-decoration: none; }
#helpCenter a:hover { text-decoration: underline; text-underline-offset: 4px; }
#helpCenter :is(button, a, input):focus-visible { outline: 2px solid var(--hc-teal) !important; outline-offset: 3px !important; }
#helpCenter .hc-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 40px; background: #fff; }
#helpCenter .hc-heading h1 { color: var(--hc-ink); font-size: 28px !important; line-height: 1.35; letter-spacing: -0.025em; font-weight: 700; }
#helpCenter .hc-heading p { margin-top: 6px; color: var(--hc-muted); font-size: 15px; line-height: 1.6; }
#helpCenter .hc-search { position: relative; display: flex; align-items: center; flex: 0 1 420px; min-width: 240px; border-radius: 6px; background: #f3f5f5; }
#helpCenter .hc-search > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--hc-muted); pointer-events: none; }
html:root body #helpCenter #helpSearch { width: 100%; min-width: 0; height: 48px; padding: 12px 48px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; color: var(--hc-ink); font-size: 16px; line-height: 24px; appearance: none; }
html:root body #helpCenter #helpSearch:focus { outline: 2px solid var(--hc-teal) !important; outline-offset: 2px !important; box-shadow: none !important; }
#helpCenter #helpSearch::-webkit-search-cancel-button { display: none; }
#helpCenter #helpSearch::placeholder { color: #6c7a77; opacity: 1; }
#helpCenter .hc-clear { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--hc-muted); cursor: pointer; }
#helpCenter .hc-clear svg { width: 20px; height: 20px; }
#helpCenter .hc-clear:hover { background: #e6eceb; }
#helpCenter .hc-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 32px; width: min(100%, 1220px); margin: 0 auto; padding: 32px 40px; }
#helpCenter .hc-sidebar { padding-top: 6px; }
#helpCenter .hc-sidebar-label { padding: 0 12px 12px; color: var(--hc-muted); font-size: 13px; line-height: 1.5; font-weight: 600; }
#helpCenter .hc-topic-nav { display: flex; flex-direction: column; gap: 4px; }
#helpCenter .hc-topic { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 5px; background: transparent; color: #526561; font-size: 14px; line-height: 22px; font-weight: 500; text-align: left; cursor: pointer; }
#helpCenter .hc-topic-icon { width: 22px; height: 22px; flex: none; }
#helpCenter .hc-topic-count { margin-left: auto; color: #74827f; font-size: 13px; font-variant-numeric: tabular-nums; }
#helpCenter .hc-topic:hover { background: #e8eeed; }
#helpCenter .hc-topic.is-active { background: #fff; color: var(--hc-teal); font-weight: 700; }
#helpCenter .hc-topic.is-active .hc-topic-count { color: var(--hc-teal); }
#helpCenter .hc-contact { margin-top: 40px; padding: 0 12px; }
#helpCenter .hc-contact h2 { color: var(--hc-ink); font-size: 16px; font-weight: 600; }
#helpCenter .hc-contact p { margin-top: 4px; color: var(--hc-muted); font-size: 14px; }
#helpCenter .hc-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 700; }
#helpCenter .hc-content { min-width: 0; }
#helpCenter .hc-results-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 32px; margin-bottom: 12px; }
#helpCenter #helpResults { color: var(--hc-muted); font-size: 13px; }
#helpCenter #showAllTopics, #helpCenter #resetHelp { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--hc-teal); font-size: 14px; font-weight: 600; cursor: pointer; }
#helpCenter #showAllTopics:hover, #helpCenter #resetHelp:hover { text-decoration: underline; text-underline-offset: 4px; }
#helpCenter #helpArticles { padding: 28px; border-radius: 8px; background: #fff; }
#helpCenter .hc-group + .hc-group { margin-top: 32px; }
#helpCenter .hc-group-heading { padding: 0 16px 10px; }
#helpCenter .hc-group-heading h2 { color: var(--hc-ink); font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: -0.015em; }
#helpCenter .hc-group-heading p { margin-top: 4px; color: var(--hc-muted); font-size: 14px; line-height: 1.6; }
#helpCenter .hc-article { border-radius: 6px; scroll-margin-top: 100px; }
#helpCenter .hc-article.is-open { background: #f4f7f6; }
#helpCenter .hc-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 58px; padding: 16px; border: 0; border-radius: 6px; background: transparent; color: #274640; font-size: 16px; line-height: 26px; font-weight: 600; text-align: left; cursor: pointer; }
#helpCenter .hc-question:hover { background: #f4f7f6; }
#helpCenter .hc-chevron { flex: none; width: 20px; height: 20px; color: #71817d; }
#helpCenter .hc-toggle-vertical { transform-origin: 10px 10px; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
#helpCenter .hc-question[aria-expanded="true"] .hc-chevron { color: var(--hc-teal); }
#helpCenter .hc-question[aria-expanded="true"] .hc-toggle-vertical { transform: scaleY(0); }
#helpCenter .hc-answer { overflow: hidden; }
#helpCenter .hc-answer-inner { padding: 0 48px 22px 16px; color: #566b65; font-size: 15px; line-height: 1.8; }
#helpCenter .hc-answer-inner p + p { margin-top: 12px; }
#helpCenter .hc-answer-inner ol { margin: 0; padding-left: 20px; }
#helpCenter .hc-answer-inner li { padding-left: 3px; }
#helpCenter .hc-answer-inner li + li { margin-top: 7px; }
#helpCenter .hc-answer-inner ol + p { margin-top: 12px; }
#helpCenter .hc-answer-inner strong { color: #304f48; font-weight: 600; }
#helpCenter .hc-answer-inner a { font-weight: 600; }
#helpCenter .hc-url-example { overflow-wrap: anywhere; color: #304f48; }
#helpCenter .hc-article-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; }
#helpCenter .hc-empty { padding: 44px 32px; background: #fff; border-radius: 8px; }
#helpCenter .hc-empty h2 { color: var(--hc-ink); font-size: 20px; font-weight: 700; }
#helpCenter .hc-empty p { margin: 10px 0 14px; color: var(--hc-muted); font-size: 15px; }
#helpCenter .hc-empty > a { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; margin-top: 14px; font-size: 15px; font-weight: 600; }
#helpCenter .hc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1050px) {
  #helpCenter .hc-header { padding: 24px; }
  #helpCenter .hc-layout { gap: 24px; padding: 28px 24px; grid-template-columns: 210px minmax(0, 1fr); }
  #helpCenter #helpArticles { padding: 20px; }
}
@media (max-width: 768px) {
  #helpCenter { padding-bottom: 90px; }
  #helpCenter .hc-header { align-items: stretch; flex-direction: column; gap: 20px; padding: 24px 20px; }
  #helpCenter .hc-search { flex-basis: auto; min-width: 0; }
  #helpCenter .hc-heading h1 { font-size: 28px !important; }
  #helpCenter .hc-layout { display: block; padding: 24px 16px; }
  #helpCenter .hc-sidebar { padding: 0; }
  #helpCenter .hc-sidebar-label { padding-left: 4px; }
  #helpCenter .hc-topic-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #helpCenter .hc-topic { font-size: 14px; gap: 8px; padding: 10px; min-height: 44px; }
  #helpCenter .hc-topic-icon { width: 20px; height: 20px; }
  #helpCenter .hc-topic-count { display: none; }
  #helpCenter .hc-contact { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 0 4px; }
  #helpCenter .hc-contact p { display: none; }
  #helpCenter .hc-contact a { margin: 0; }
  #helpCenter .hc-content { margin-top: 20px; }
  #helpCenter #helpArticles { padding: 20px 12px; }
  #helpCenter .hc-group-heading { padding: 0 8px 10px; }
  #helpCenter .hc-question { padding: 14px 8px; gap: 12px; }
  #helpCenter .hc-answer-inner { padding: 0 30px 20px 8px; }
  #helpCenter .hc-group + .hc-group { margin-top: 24px; }
  #helpCenter .hc-empty { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #helpCenter .hc-toggle-vertical { transition: none; }
}

/* Match the 240px expanded rail on the broker workspace and contact page. */
html:root body #cs-rail, html:root body #cs-rail * { box-sizing: border-box; }

/* The header spans the workspace; the reading column stays centered below it. */
html:root body[data-broker-page="help"] { margin: 0; }
html:root body[data-broker-page="help"] #helpCenter { width: 100%; max-width: none; box-sizing: border-box; }
@media (min-width: 1051px) {
  html:root body[data-broker-page="help"] #helpCenter .hc-header { padding-inline: max(40px, calc((100% - 1140px) / 2)); }
}

/* Compact Mint desk illustration, beside the existing Help Center title. */
#helpCenter .hc-heading-with-art { display:flex; align-items:center; gap:20px; min-width:0; }
#helpCenter .hc-header-art { display:block; width:136px; height:auto; flex:0 0 136px; }
@media (max-width:1050px) {
 #helpCenter .hc-heading-with-art { gap:16px; }
 #helpCenter .hc-header-art { width:112px; flex-basis:112px; }
}
@media (max-width:768px) {
 #helpCenter .hc-header-art { width:96px; flex-basis:96px; }
}
@media (max-width:380px) {
 #helpCenter .hc-header-art { width:80px; flex-basis:80px; }
 #helpCenter .hc-heading-with-art { gap:12px; }
}

/* Help actions share Mint's light grow-and-color feedback. */
html:root body #helpCenter :is(#showAllTopics, #resetHelp, .hc-contact > a, .hc-empty > a) {
    display:inline-flex; align-items:center; width:fit-content;
    color:#007f79; text-decoration:none !important; transform-origin:left center;
    transition:transform 160ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}
html:root body #helpCenter #showAllTopics { transform-origin:right center; }
html:root body #helpCenter :is(#showAllTopics, #resetHelp, .hc-contact > a, .hc-empty > a):hover {
    color:#005c56 !important; transform:scale(1.035); text-decoration:none !important;
}
html:root body #helpCenter :is(#showAllTopics, #resetHelp, .hc-contact > a, .hc-empty > a):active { transform:scale(.99); }
@media(prefers-reduced-motion:reduce) {
    html:root body #helpCenter :is(#showAllTopics, #resetHelp, .hc-contact > a, .hc-empty > a) { transition:none; transform:none !important; }
}