/* ══ Help centre extras (Oct 2026) ══════════════════════════════════════════════════════════════
   Attached to help.html and every help/<slug>/ page by scripts/build-site.js, so no article page
   has to be regenerated (they carry hand edits). Billy wanted it calmer and easier to use: a step
   smaller and quieter type, no animation, the article open on the page instead of in a box, the
   "On this page" list beside the article on a computer, and the personal bits from help-extras.js. */

/* No motion. A help page is read, not watched. */
.help-article-main *, #categoriesSection *, .hero *, main .content-area * { animation: none !important; }
.category-card:hover, .result-card:hover, .topic-row:hover, .quick-link:hover { transform: none !important; }

/* ── Article pages ── */
.help-article-main { max-width: 1120px; padding: 30px 24px 80px; }
.help-article-main .article-view { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
@media (min-width: 1000px) {
  .help-article-main .article-view { display: grid; grid-template-columns: minmax(0, 660px) 230px; column-gap: 72px; justify-content: center; }
  .help-article-main .article-view > * { grid-column: 1; }
  /* The contents list follows you down the page instead of sitting in a box above the first line. */
  .help-article-main .article-view > .article-toc { grid-column: 2; grid-row: 2 / span 20; align-self: start; position: sticky; top: 110px;
    margin: 6px 0 0; padding: 0 0 0 18px; background: none; border: 0; border-left: 1px solid var(--line, #e4e7f1); border-radius: 0; font-size: 13.5px; }
  .help-article-main .article-breadcrumb { grid-column: 1 / -1; }
}
.help-article-main .article-breadcrumb { font-size: 13px; margin-bottom: 20px; flex-wrap: wrap; }
.help-article-main .article-header { margin-bottom: 26px; padding-bottom: 20px; }
.help-article-main .article-header h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.help-article-main .article-header .meta { font-size: 12.5px; }
.help-article-main .article-toc .toc-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; opacity: 1; color: var(--text, #1a1a1a); margin-bottom: 8px; }
.help-article-main .article-toc a { border-bottom: 0; padding: 5px 0; line-height: 1.4; }
.help-article-main .article-toc a.is-here { color: var(--brand, #7851a9); font-weight: 600; }
.help-article-main .article-body { font-size: 15.5px; line-height: 1.75; max-width: 660px; }
.help-article-main .article-body h2 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; margin: 40px 0 12px; }
.help-article-main .article-body h3 { font-size: 16.5px; font-weight: 600; margin: 26px 0 8px; }
.help-article-main .article-body p { margin-bottom: 16px; }
.help-article-main .article-related { border-top: 0 !important; padding-top: 0; margin-top: 44px; }
.help-article-main .article-related h3 { font-size: 16px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.01em !important; margin-bottom: 6px; }
.help-article-main .article-related a { display: block; padding: 11px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line, #e4e7f1) !important; border-radius: 0 !important; background: none !important;
  font-size: 15px; font-weight: 500; color: var(--text, #1a1a1a); }
.help-article-main .article-related a:hover { color: var(--brand, #7851a9); }
.help-article-main .article-footer { border-top: 0 !important; margin-top: 30px !important; padding-top: 0 !important; }
.help-article-main .article-footer .btn-ghost { border-radius: 999px; border-color: #cfc9de; }
.help-article-main .article-header { border-bottom: 0 !important; }
/* On a phone the contents list is a quiet ruled list, not a box. */
@media (max-width: 999px) {
  .help-article-main .article-toc { background: none !important; border: 0 !important; border-left: 2px solid var(--line, #e4e7f1) !important; border-radius: 0 !important; padding: 2px 0 2px 14px !important; margin: 0 0 26px !important; }
}

/* The end of an article: next and previous in the topic, a one-tap "was this helpful", and where to go. */
.hx-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 40px 0 0; }
.hx-next a { display: block; padding: 16px 18px; border: 1px solid var(--line, #e4e7f1); border-radius: 16px; text-decoration: none; color: inherit; }
.hx-next a:hover { border-color: var(--brand, #7851a9); }
.hx-next small { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-bottom: 4px; }
.hx-next b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.hx-next .is-next { text-align: right; grid-column: 2; }
/* A soft band, not two more hairlines, so its buttons read as buttons. */
.hx-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 36px 0 0; padding: 16px 18px; border-radius: 16px; background: #f3f1f8; font-size: 14.5px; }
.hx-helpful span { margin-right: auto; font-weight: 500; }
.hx-helpful button { padding: 8px 18px; border: 1px solid #cfc9de; border-radius: 999px; background: #fff; color: #14121c; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 18, 40, .06); }
.hx-helpful button:hover { border-color: var(--brand, #7851a9); color: var(--brand, #7851a9); }
.hx-stuck { margin: 22px 0 0; font-size: 14.5px; color: var(--muted, #6b7280); }
.hx-stuck a { color: var(--brand, #7851a9); font-weight: 600; }
@media (max-width: 640px) { .hx-next { grid-template-columns: 1fr; } .hx-next .is-next { grid-column: 1; } }

/* ── Help home ── */
.hero h1 { font-weight: 600 !important; letter-spacing: -.04em; }
/* Pinned search: once the hero scrolls away, a slim full-width bar under the header (help-extras.js). */
.hero-search-wrap.is-pinned { position: fixed !important; z-index: 1030; top: var(--hx-nav, 64px); left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important;
  padding: 10px 16px !important; background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--line, #e4e7f1) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -16px rgba(15, 18, 40, .25) !important; }
.hero-search-wrap.is-pinned { transition: top .28s ease; }
.hero-search-wrap.is-pinned .search-wrap { max-width: 620px; margin: 0 auto; box-shadow: none !important; }
.hero-search-wrap.is-pinned .search-wrap input { height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 15px; }
/* Topic and read time as separate items, no dot between them. */
.result-card .meta, .topic-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.hx-recent { margin: 20px auto 0; text-align: center; }
.hx-recent-h { display: block; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--text, #1a1a1a); }
.hx-recent-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hx-recent-list a { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 14px; border: 1px solid #cfc9de; border-radius: 999px;
  background: #fff; text-decoration: none; color: inherit; font-size: 13.5px; font-weight: 500; }
.hx-recent-list a:hover { border-color: var(--brand, #7851a9); color: var(--brand, #7851a9); }
/* Sits inside the grey topics band, above the first group: one quiet line, the switch as a link. */
.hx-audience { min-height: 21px; margin: 22px 0 0; padding: 0; background: none !important; font-size: 13.5px; color: var(--muted, #6b7280); text-align: center; }
.hx-audience button { margin-left: 8px; padding: 0; border: 0; background: none !important; color: var(--brand, #7851a9); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.category-card h3 { font-weight: 600 !important; }
.category-card p { font-size: 13.5px; }

/* The topic cards are drawn by help.html's script after the page appears. Reserving roughly their
   height means the section does not grow under the reader and shove the rest of the page down.
   Slightly under the real height at each width, so there is never a band of empty space. */
/* On the section itself: the grid is hidden while empty, so a height on it never applied. Only while it
   is shown (the home view), and set by js/help-extras.js to the real height once drawn. */
#categoriesSection { min-height: 990px; }
@media (max-width: 1000px) { #categoriesSection { min-height: 1420px; } }
@media (max-width: 700px) { #categoriesSection { min-height: 1610px; } }
@media (max-width: 480px) { #categoriesSection { min-height: 1960px; } }
#categoriesSection.hx-sized { min-height: 0; }
/* On a phone the quick links are one row you can swipe. Wrapping onto two or three rows, they
   re-wrapped when the font arrived and pushed the whole page down. */
@media (max-width: 600px) {
  .hero .quick-links { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
  .hero .quick-links::-webkit-scrollbar { display: none; }
  .hero .quick-link { flex: 0 0 auto; }
  .hx-audience { min-height: 41px; }
}