/* ── Help Center (/help) — builds on homepage-styles.css + about-styles.css +
   contact-styles.css tokens. No dedicated Help design exists; this is the
   clean-MVP treatment consistent with the Contact page chrome. ── */

.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); }

/* 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 { display: none; padding: 0 20px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 72ch; }
.hp-item.is-open .hp-a { display: block; }
.hp-item.is-hidden { display: none; }

/* 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 p strong { color: var(--ink); }

/* 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; }
}

/* ── Contact Support form (Step 3) ── */
.hp-form-sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: -6px 0 18px; }
.hp-ref { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .03em; margin: -14px auto 22px; }
/* honeypot — off-screen, not display:none (some bots skip hidden fields) */
.hp-hpot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }