/* ============================================================
   CaptivaHQ — /helpcenter (hand-written, like /docs)
   Loads after styles.css; reuses .docs-layout / .docs-toc / .docs-content.
   ============================================================ */

.hc{padding:112px 0 72px}
.hc h1{font-family:var(--f-display);font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.02em;margin:6px 0 10px;color:var(--c-fg-0)}
.hc-intro{max-width:62ch;color:var(--c-fg-2);font-size:1.05rem;margin:0 0 28px}

/* ---- Atlas voice call-out: the first thing on the page ---- */
.hc-atlas{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  padding:28px 30px;margin:0 0 36px;border-radius:22px;
  border:1px solid color-mix(in oklch, var(--c-ai) 26%, var(--c-line));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--c-ai) 13%, transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in oklch, var(--c-ai-3) 12%, transparent), transparent 60%),
    var(--c-bg-1);
  box-shadow:0 22px 50px -34px color-mix(in oklch, var(--c-ai) 55%, transparent);
}
.hc-atlas h2{font-family:var(--f-display);font-size:clamp(1.45rem,3vw,2rem);margin:0 0 8px;color:var(--c-fg-0);letter-spacing:-.015em}
.hc-atlas p{margin:0 0 10px;color:var(--c-fg-1);max-width:60ch}
.hc-atlas ol{margin:6px 0 0;padding-left:1.2em;color:var(--c-fg-1)}
.hc-atlas li{margin:4px 0}
.hc-atlas .hc-say{font-family:var(--f-mono);font-size:.88rem;color:color-mix(in oklch, var(--c-ai) 70%, var(--c-fg-1))}

/* a faithful mock of the collapsed Atlas rail: Mic with the green live dot, Chat beneath */
.hc-rail{
  position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;
  width:64px;padding:12px 0;border-radius:18px;background:var(--c-bg-1);
  border:1px solid var(--c-line-strong);box-shadow:var(--sh-lift, 0 12px 30px -18px rgb(0 0 0 / .35));
}
.hc-rail-btn{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  color:var(--c-fg-2);background:var(--c-bg-2);
}
.hc-rail-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-rail-btn.is-voice{color:#fff;background:linear-gradient(140deg,var(--c-ai),var(--c-ai-2))}
.hc-rail-btn.is-voice::before{ /* the click-here ring */
  content:"";position:absolute;inset:-6px;border-radius:16px;border:2px solid var(--c-ai);
  animation:hc-ring 1.8s ease-out infinite;
}
.hc-live{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.hc-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:hc-pulse 1.6s ease-out infinite}
.hc-rail-cap{font-size:.7rem;color:var(--c-fg-3);text-align:center;line-height:1.2}
.hc-click{
  position:absolute;left:calc(100% + 10px);top:18px;white-space:nowrap;
  font-size:.78rem;font-weight:600;color:var(--c-ai);
}
@keyframes hc-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
@keyframes hc-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@media (prefers-reduced-motion: reduce){.hc-rail-btn.is-voice::before,.hc-live::after{animation:none}}

/* ---- search + topic cards ---- */
.hc-search{display:flex;gap:10px;margin:0 0 18px}
.hc-search input{
  flex:1;font:inherit;font-size:1rem;padding:13px 16px;border-radius:12px;
  border:1px solid var(--c-line-strong);background:var(--c-bg-1);color:var(--c-fg-0);
}
.hc-search input:focus{outline:none;border-color:var(--c-ai);box-shadow:0 0 0 3px var(--c-ai-soft)}
.hc-empty{color:var(--c-fg-2);margin:8px 0 24px}
.hc-group{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-fg-3);margin:18px 0 8px}
.hc .docs-content article{padding:26px 0;border-top:1px solid var(--c-line)}
.hc .docs-content article:first-of-type{border-top:0;padding-top:0}
.hc .docs-content article[hidden]{display:none}
.hc .docs-content h2{scroll-margin-top:96px}
.hc .docs-content h3{font-size:1rem;margin:18px 0 6px}
.hc-where{font-size:.9rem;color:var(--c-fg-2);margin:-4px 0 12px}
.hc-where code,.hc .docs-content code{font-size:.85em}
.hc-note{padding:12px 14px;border-radius:12px;background:var(--c-bg-2);color:var(--c-fg-1);font-size:.94rem;margin:12px 0}
.hc-err{font-family:var(--f-mono);font-size:.84rem}
.hc .docs-content dl{margin:10px 0}
.hc .docs-content dt{font-weight:600;color:var(--c-fg-0);margin-top:12px}
.hc .docs-content dd{margin:4px 0 0;color:var(--c-fg-1)}
.hc-toc-group{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-fg-3);margin:14px 0 4px}

@media (max-width: 720px){
  .hc{padding-top:92px}
  .hc-atlas{grid-template-columns:1fr;padding:22px 18px;gap:18px}
  .hc-rail{flex-direction:row;width:auto;padding:10px 12px;justify-self:start}
  .hc-rail-cap{display:none}
  .hc-click{left:auto;right:auto;top:auto;position:static;align-self:center}
}