/* ============ InQueue Help Centre ============
   Light, card-driven support hub matching the approved design. Rides the
   marketing site's tokens from inqueue-site.css (--ink, --coral,
   --coral-text, --coral-tint, --cream, --border, --gray); the aliases
   below keep these rules readable. All selectors are scoped to .hc so the
   Help Centre can never leak styles into the rest of the site. */
/* Bridge to inqueue-site.css's actual variable names: it defines
   --coralD/--coralT/--muted/--ink2, not the --coral-text/--coral-tint/
   --gray/--ink-2 spellings used below. Without these aliases those
   colours resolve to nothing and fall back to inherited black. */
.hc{--coral-text:var(--coralD);--coral-tint:var(--coralT);--gray:var(--muted);--ink-2:var(--ink2);
    --tint:var(--coralT);--bd:var(--border);--soft:#F1EEE8;--green:#178A5B;--ink-soft:#2A2D35;}
.hc .wrap{max-width:1120px;}
/* hero, light, Webflow-calm */
/* Same coral glow the marketing site's .subhero uses, so the Help Centre
   hero reads as part of the same site rather than a plain white slab. */
.hc .hero{background:radial-gradient(60% 60% at 80% 0%,rgba(255,90,60,.13),rgba(255,90,60,0) 70%),linear-gradient(180deg,var(--cream),var(--paper));border-bottom:1px solid var(--bd);padding:140px 0 64px;text-align:center;position:relative;overflow:hidden}
.hc .hero .wrap{position:relative}
.hc .hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.05;word-spacing:.22em}
.hc .hero .sub{margin:12px auto 0;max-width:480px;color:var(--ink-2);font-size:16.5px}
.hc .search{position:relative;max-width:620px;margin:30px auto 0}
.hc .search > svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gray)}
.hc .search input{width:100%;height:62px;border:1.5px solid var(--bd);border-radius:16px;background:#fff;padding:0 56px 0 52px;font:inherit;font-size:16.5px;color:var(--ink);outline:none;box-shadow:0 14px 34px -22px rgba(21,23,28,.35);transition:.15s}
.hc .search input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,90,60,.12),0 14px 34px -22px rgba(21,23,28,.35)}
.hc .search kbd{position:absolute;right:17px;top:50%;transform:translateY(-50%);font:600 12px 'Inter';color:var(--gray);border:1px solid var(--bd);border-radius:7px;padding:4px 9px;background:var(--cream)}
.hc .sres{position:absolute;top:70px;left:0;right:0;background:#fff;border:1px solid var(--bd);border-radius:15px;box-shadow:0 28px 56px -18px rgba(21,23,28,.3);padding:7px;z-index:60;text-align:left;max-height:390px;overflow:auto}
.hc .sres a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:10px;font-size:14.5px;font-weight:600}
.hc .sres a svg{width:16px;height:16px;color:var(--gray);flex:none}
.hc .sres a small{margin-left:auto;color:var(--gray);font-weight:500;font-size:12px;white-space:nowrap}
.hc .sres a:hover,.hc .sres a.on{background:var(--tint)}
.hc .nores{padding:16px 14px;font-size:14px;color:var(--ink-2)}
.hc .nores a{color:var(--coral-text);font-weight:700}
.hc .chips{margin-top:18px;display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.hc .chips a{padding:8px 16px;border:1px solid var(--bd);border-radius:999px;background:#fff;font-weight:600;font-size:13px;transition:.15s}
.hc .chips a:hover{border-color:var(--coral);color:var(--coral-text)}
.hc .stat{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:12.5px;font-weight:600;color:var(--green);background:#E3F5EC;border:1px solid #BFE6D2;border-radius:999px;padding:6px 14px}
.hc .stat .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
/* resource tiles (Webflow's University/Quick help row) */
.hc .rrow{margin-top:-34px;position:relative;z-index:5}
.hc .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hc .rt{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:7px;transition:.16s;box-shadow:0 16px 34px -26px rgba(21,23,28,.4)}
.hc .rt:hover{transform:translateY(-3px);border-color:var(--coral)}
.hc .rt .ic{width:38px;height:38px;border-radius:11px;background:var(--tint);color:var(--coral-text);display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.hc .rt .ic svg{width:18px;height:18px}
.hc .rt b{font-size:15px;letter-spacing:-.01em}
.hc .rt p{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.hc .rt span{margin-top:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--coral-text)}
.hc .rt span svg{width:13px;height:13px;transition:.16s}
.hc .rt:hover span svg{transform:translateX(3px)}
/* section headers */
.hc .secband{margin:58px 0 0}
.hc .secband > h2,.hc .lsec h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hc .secband > h2{margin-bottom:16px}
/* help sections grid */
.hc .hsgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hc .hs{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--bd);border-radius:15px;padding:17px 19px;transition:.15s}
.hc .hs:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:0 16px 30px -24px rgba(21,23,28,.4)}
.hc .hs .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--tint);color:var(--coral-text);display:flex;align-items:center;justify-content:center}
.hc .hs .ic svg{width:20px;height:20px}
.hc .hs b{font-size:15px;display:block;letter-spacing:-.01em}
.hc .hs p{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:1px}
.hc .hs .ct{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--soft);border-radius:999px;padding:4px 11px}
/* article lists */
.hc .hlist{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.hc .hl{display:flex;align-items:center;gap:13px;padding:14px 19px;transition:.13s}
.hc .hl + .hl{border-top:1px solid var(--soft)}
.hc .hl:hover{background:#FCFBF9}
.hc .hl > svg:first-child{width:17px;height:17px;color:var(--gray);flex:none}
.hc .hl b{font-size:14.5px;font-weight:600;display:block;letter-spacing:-.01em}
.hc .hl small{color:var(--gray);font-size:12px}
.hc .hl .tag{display:inline-block;background:var(--soft);border-radius:6px;padding:1px 8px;font-weight:600;color:var(--ink-2);margin-right:4px}
.hc .hl .g{width:16px;height:16px;color:var(--gray);margin-left:auto;flex:none}
.hc .hl:hover .g{color:var(--coral-text)}
.hc .lsec{margin:46px 0}
.hc .lh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hc .lh .ic{width:36px;height:36px;flex:none;border-radius:11px;background:var(--tint);color:var(--coral-text);display:flex;align-items:center;justify-content:center}
.hc .lh .ic svg{width:18px;height:18px}
.hc .lh .n{margin-left:auto;font-size:12.5px;color:var(--gray);font-weight:600}
.hc .none{margin:44px 0;text-align:center;color:var(--ink-2)}
.hc .none a{color:var(--coral-text);font-weight:700}
/* promo card (Webflow partner-promo equivalent) */
.hc .promo{margin:64px 0 72px;background:linear-gradient(135deg,#FFF4F0,var(--tint));border:1px solid #F3D8CE;border-radius:20px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hc .promo h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hc .promo p{color:var(--ink-2);margin-top:5px;max-width:480px;font-size:14.5px}
/* resource trio */
.hc .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.hc .tri{background:#fff;border:1px solid var(--bd);border-radius:15px;padding:19px 20px;transition:.15s}
.hc .tri:hover{border-color:var(--coral)}
.hc .tri b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.hc .tri b svg{width:16px;height:16px;color:var(--coral-text)}
.hc .tri p{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.5}
/* article view */
.hc .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);padding:112px 0 20px;flex-wrap:wrap}
.hc .crumbs a{color:var(--ink-2);font-weight:600}
.hc .crumbs a:hover{color:var(--coral-text)}
.hc .crumbs svg{width:14px;height:14px}
.hc .agrid{display:grid;grid-template-columns:250px 1fr;gap:42px;align-items:start;padding-bottom:20px}
.hc .aside{position:sticky;top:92px}
.hc .aside .cat{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:12px}
.hc .aside .cat .ic{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--coral-text);display:flex;align-items:center;justify-content:center}
.hc .aside .cat .ic svg{width:16px;height:16px}
.hc .toc{display:flex;flex-direction:column;border-left:2px solid var(--bd)}
.hc .toc a{padding:8px 0 8px 14px;font-size:13.5px;color:var(--ink-2);margin-left:-2px;border-left:2px solid transparent;line-height:1.45}
.hc .toc a:hover{color:var(--ink)}
.hc .toc a.on{color:var(--coral-text);font-weight:700;border-left-color:var(--coral)}
.hc .art{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:44px 48px;min-width:0}
.hc .art h1{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.hc .meta{display:flex;gap:18px;font-size:13px;color:var(--gray);margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--soft)}
.hc .meta span{display:inline-flex;align-items:center;gap:6px}
.hc .meta svg{width:14px;height:14px}
.hc .art h2{font-size:19px;font-weight:800;margin:28px 0 10px}
.hc .art p{margin:10px 0;color:var(--ink-soft);font-size:15px}
.hc .art ul,.hc .art ol{margin:10px 0 14px 22px;color:var(--ink-soft);font-size:15px}
.hc .art li{margin:7px 0}
.hc .art a{color:var(--coral-text);font-weight:600}
.hc .art code{background:var(--soft);border:1px solid var(--bd);border-radius:6px;padding:1.5px 7px;font-size:13.5px;font-family:ui-monospace,Menlo,monospace}
.hc .callout{display:flex;gap:13px;background:var(--tint);border-radius:13px;padding:15px 17px;margin:20px 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.hc .callout svg{width:18px;height:18px;color:var(--coral-text);flex:none;margin-top:2px}
.hc .fb{display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:24px;border-top:1px solid var(--soft);font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.hc .fb .btn{padding:9px 16px;font-size:13.5px;border-radius:10px}
.hc .pn2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.hc .pcard{border:1px solid var(--bd);border-radius:14px;padding:15px 18px;transition:.15s;background:#fff}
.hc .pcard:hover{border-color:var(--coral);transform:translateY(-2px)}
.hc .pcard small{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.hc .pcard small svg{width:13px;height:13px}
.hc .pcard b{display:block;margin-top:5px;font-size:14.5px}
.hc .pcard.nx{text-align:right}
.hc .pcard.nx small{justify-content:flex-end}
@media(max-width:960px){
.hc .rgrid{grid-template-columns:1fr 1fr}
.hc .hsgrid{grid-template-columns:1fr}
.hc .agrid{grid-template-columns:1fr}
.hc .aside{position:static}
.hc .art{padding:30px 24px}
.hc .ft .grid{grid-template-columns:1fr 1fr}
.hc .trio{grid-template-columns:1fr}
}
@media(max-width:620px){
.hc .rgrid{grid-template-columns:1fr}
.hc .links{display:none}
.hc .pn2{grid-template-columns:1fr}
.hc .search kbd{display:none}
}
