/* ── Help Center (/help, rendered by Pages/Help; help-ui.js adds search, the topic filter and the form) — builds on
   homepage-styles.css + about-styles.css + contact-styles.css (the form; the honeypot is site-base.css). No dedicated Help design
   exists; this follows the Contact page. ── */

.hp-hero { padding-bottom: 56px; }
.hp-hero .ab-hero-sub { margin-bottom: 0; }

.hp-sect { padding: 56px 36px 96px; }
.hp-in { max-width: 880px; margin: 0 auto; }

/* search card (overlaps the hero like a toolbar) */
.hp-search-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 18px 20px; margin-top: -92px; position: relative; display: grid; gap: 14px; }
.hp-search-row { position: relative; display: flex; align-items: center; }
.hp-search-row svg { position: absolute; left: 16px; color: var(--ink-2); pointer-events: none; }
.hp-search-input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 44px 13px 46px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.hp-search-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.hp-search-clear { position: absolute; right: 8px; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: none; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.hp-search-clear:hover { background: var(--red-soft); color: var(--red); }
.hp-search-clear.is-visible { display: inline-flex; }
.hp-results-count { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }

/* category chips */
.hp-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.hp-chips::-webkit-scrollbar { display: none; }
.hp-chip { flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; white-space: nowrap; }
.hp-chip:hover { border-color: var(--red); color: var(--red); }
.hp-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); }
a.hp-chip { display: inline-flex; align-items: center; text-decoration: none; }

/* category sections */
.hp-cat { margin-top: 40px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.hp-cat > h2 { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.hp-cat.is-hidden { display: none; }

/* accordion */
.hp-acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.hp-item + .hp-item { border-top: 1px solid var(--line); }
.hp-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 16px 20px; font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-align: left; background: none; border: none; cursor: pointer; transition: background .15s; }
.hp-q:hover { background: var(--paper); }
.hp-q svg { flex-shrink: 0; color: var(--ink-2); transition: transform .18s; }
.hp-item.is-open .hp-q svg { transform: rotate(180deg); color: var(--red); }
.hp-a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 72ch; }
/* Without help-ui.js every answer shows; with it (.hp-ready) only the opened ones */
.hp-ready .hp-item:not(.is-open) .hp-a { display: none; }
.hp-item.is-hidden { display: none; }
/* The question is a heading (h3) holding its button */
.hp-q-h { margin: 0; font: inherit; }

/* empty state (escalation nudge) */
.hp-empty { margin-top: 40px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 28px; text-align: center; display: none; }
.hp-empty.is-visible { display: block; }
.hp-empty p { font-size: 15px; color: var(--ink-2); line-height: 1.65; max-width: 46ch; margin: 0 auto 20px; }
.hp-empty-cta { width: auto; display: inline-flex; }

/* email side note (reuses Contact side-card look, inline under the FAQ) */
.hp-mail-card { margin-top: 48px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }

@media (max-width: 640px) {
  .hp-sect { padding: 48px 20px 72px; }
  .hp-search-card { margin-top: -76px; padding: 14px 14px; }
  .hp-q { font-size: 15px; }
  /* Phones: a 44px clear button (the form and the address card: contact-styles.css) */
  .hp-search-clear { width: 44px; height: 44px; right: 2px; }
}

/* ── The support form's intro on /help (the form itself: contact-styles.css) ── */
.hp-form-sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: -6px 0 18px; }