/* ============================================================
   Answerly · Help center (visitor-facing, demo workspace)
   Layered on main.css tokens & primitives (.btn, .search-box,
   .chip, .answer, .md-preview …)
   ============================================================ */

.hc-top{border-bottom:1px solid var(--border-2);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;}
.hc-top-in{display:flex;align-items:center;justify-content:space-between;height:64px;}
.hc-cust{display:flex;align-items:center;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.hc-cust .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#0EA5E9,#4F46E5);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;margin-right:10px;}
.hc-powered{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);}
.hc-powered a{font-weight:650;color:var(--ink-3);transition:color .12s;}
.hc-powered a:hover{color:var(--brand-strong);}
.hc-powered .p-mark{width:17px;height:17px;border-radius:5px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:800;}

/* hero / ask */
.hc-hero{padding:72px 0 8px;text-align:center;background:
  radial-gradient(900px 400px at 50% -160px,rgba(79,70,229,.09),transparent 60%);}
.hc-hero h1{font-size:44px;font-weight:750;letter-spacing:-.03em;margin-bottom:10px;}
.hc-hero p{font-size:16.5px;color:var(--muted);margin-bottom:32px;}
.hc-ask{max-width:680px;margin:0 auto;}
.hc-ask .search-box{padding:15px 18px;border-radius:14px;box-shadow:var(--shadow);}
.hc-ask .search-box input{font-size:16px;}
.hc-ask .chips{justify-content:center;margin-top:14px;}

/* ai answer */
.hc-answer-wrap{max-width:680px;margin:26px auto 0;text-align:left;}
.hc-thinking{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--border-2);border-radius:14px;background:var(--bg-soft);font-size:14px;color:var(--muted);}
.hc-thinking .tdots{display:flex;gap:5px;}
.hc-thinking .tdots i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:tb 1.2s infinite;}
.hc-thinking .tdots i:nth-child(2){animation-delay:.15s;}
.hc-thinking .tdots i:nth-child(3){animation-delay:.3s;}
@keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.hc-ai-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--brand-strong);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;padding:3px 11px;margin-bottom:10px;}
.hc-ai-badge .spark{font-size:11px;}

/* categories */
.hc-cats{padding:64px 0 80px;}
.hc-cats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.hc-cat{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 28px;transition:transform .16s,box-shadow .16s,border-color .16s;}
.hc-cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-100);}
.hc-cat .cat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:16px;}
.hc-cat h3{font-size:17px;font-weight:650;margin-bottom:4px;}
.hc-cat .cnt{font-size:13px;color:var(--muted-2);margin-bottom:14px;}
.hc-cat ul{list-style:none;}
.hc-cat li{font-size:14px;color:var(--ink-3);padding:5px 0;border-bottom:1px dashed var(--border-2);}
.hc-cat li:last-child{border-bottom:none;}
.hc-cat li a{display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);}
.hc-cat li a:hover{color:var(--brand-strong);}
.hc-cat li .arr{color:var(--muted-2);font-size:13px;}

/* article page */
.hc-page{display:grid;grid-template-columns:250px 1fr;gap:48px;max-width:1040px;margin:0 auto;padding:44px 32px 80px;}
.hc-side{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px;}
.hc-side .side-group{margin-bottom:6px;}
.hc-side h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:650;padding:0 8px;margin:14px 0 8px;}
.hc-art{min-width:0;max-width:720px;}
.hc-art .prose{padding:0;max-width:none;}
.hc-art-head{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border-2);}
.hc-art-head h1{font-size:36px;font-weight:750;letter-spacing:-.03em;line-height:1.15;margin:12px 0 10px;}
.hc-art-head .meta{font-size:13px;color:var(--muted-2);}
.hc-related{margin-top:40px;padding-top:26px;border-top:1px solid var(--border-2);}
.hc-related h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:14px;}
.hc-related a{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);padding:9px 0;}
.hc-related a:hover{color:var(--brand-strong);}
.hc-related .ico{color:var(--brand);font-size:13px;}
.hc-ask-again{margin-top:34px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--radius);padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hc-ask-again p{font-size:14px;color:var(--ink-2);flex:1;min-width:200px;margin:0;}
.hc-ask-again b{color:var(--ink);}

/* vote */
.hc-vote{display:flex;align-items:center;gap:14px;margin-top:36px;padding:16px 0 0;border-top:1px solid var(--border-2);font-size:13.5px;color:var(--muted);}
.hc-foot{border-top:1px solid var(--border-2);background:var(--bg-soft);padding:30px 0;text-align:center;}
.hc-foot p{font-size:13px;color:var(--muted-2);margin-bottom:6px;}
.hc-foot a{font-weight:650;color:var(--ink-3);}
.hc-foot a:hover{color:var(--brand-strong);}

@media (max-width:900px){
  .hc-cats-grid{grid-template-columns:1fr;}
  .hc-page{grid-template-columns:1fr;gap:32px;}
  .hc-side{position:static;max-height:none;}
  .hc-hero h1{font-size:34px;}
}