.layout-obsidian .hc-hero-wave path{fill:#0d0d0d}
.layout-obsidian .hc-art-card{background:var(--card-bg)}
.layout-obsidian .hc-body{color:#94a3b8}
.layout-obsidian .hc-body code{background:#0d0d0d;border-color:#333;color:#c9d1d9}
.layout-obsidian .hc-body td{border-color:#333}
.layout-obsidian .hc-body th{background:#0d0d0d;color:#94a3b8;border-color:#333}
.layout-obsidian .hc-feedback{background:#111;border-color:#2a2a2a}
.layout-obsidian .hc-fb-btn{background:#111;border-color:#333;color:#94a3b8}
.layout-obsidian .hc-side-card{background:var(--card-bg);border-color:#2a2a2a}
.layout-obsidian .hc-hdr{background:rgba(13,13,13,.92);border-color:#2a2a2a}
.layout-obsidian .hc-hdr-search input{background:#1a1a1a;border-color:#2a2a2a;color:#f1f5f9}
.layout-obsidian .hc-hdr-search input:focus{background:#222;border-color:var(--brand)}
.layout-obsidian .hc-suggest{background:#1a1a1a;border-color:#2a2a2a}
.layout-obsidian .hc-suggest-item{color:#94a3b8}
.layout-obsidian .hc-logo{color:#f1f5f9}
.layout-obsidian .hc-cat-badge{background:#0d0d0d;color:#64748b}
.layout-obsidian .hc-foot{border-color:#1e1e1e}
.layout-obsidian .hc-crumb a{color:#64748b}

/* ── Prism layout — bold colorful ───────────────────────────────────────────── */
.layout-prism{--hero-text:#fff;--hero-sub:rgba(255,255,255,.7)}
.layout-prism .hc-hero{background:var(--brand);padding:80px 24px 100px}
.layout-prism .hc-hero::before{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,.18) 0%,transparent 60%)}
.layout-prism .hc-hero::after{display:none}
.layout-prism .hc-orb-1{background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 68%)}
.layout-prism .hc-orb-2{background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 72%)}
.layout-prism .hc-hero h1{font-size:clamp(42px,6vw,72px);letter-spacing:-.04em}
.layout-prism .hc-hero-pill{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}
.layout-prism .hc-hero-stats strong{color:#fff}
.layout-prism .hc-srch-glass{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.5);
  box-shadow:0 8px 40px rgba(0,0,0,.2)}
.layout-prism .hc-srch-glass:focus-within{background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.25)}
.layout-prism .hc-srch-ico{color:var(--g400)}
.layout-prism .hc-srch-glass input{color:var(--g900)}
.layout-prism .hc-srch-glass input::placeholder{color:var(--g400)}
.layout-prism .hc-hero-wave path{fill:var(--body-bg)}
.layout-prism .hc-hero .hc-suggest{background:#fff;border-color:var(--g200)}
.layout-prism .hc-hero .hc-suggest-item{color:var(--g700)}
.layout-prism .hc-hero .hc-suggest-item:hover,.layout-prism .hc-hero .hc-suggest-item.hc-act{
  background:var(--brand-5);color:var(--brand-ink,var(--brand))}
.layout-prism .hc-hero .hc-suggest-item svg{color:var(--g400)}
.layout-prism .hc-cat:hover{background:var(--brand-5)}
.layout-prism .hc-cat-ico{background:var(--brand-10)}

/* ── Classic layout — traditional SaaS ──────────────────────────────────────── */
.layout-classic{--hero-text:var(--g900);--hero-sub:var(--g500)}
.layout-classic .hc-hero{background:#fff;border-bottom:1px solid var(--g200);padding:64px 24px 72px}
.layout-classic .hc-hero::before{display:none}
.layout-classic .hc-hero::after{display:none}
.layout-classic .hc-orb-1,.layout-classic .hc-orb-2{display:none}
.layout-classic .hc-hero-pill{background:var(--g100);border-color:var(--g200);color:var(--g600)}
.layout-classic .hc-hero-dot{box-shadow:none}
.layout-classic .hc-hero-stats{color:var(--g500)}
.layout-classic .hc-hero-stats strong{color:var(--g700)}
.layout-classic .hc-stat-sep{background:var(--g300)}
.layout-classic .hc-srch-glass{background:#fff;border:1.5px solid var(--g300);
  box-shadow:var(--shadow-sm);backdrop-filter:none;-webkit-backdrop-filter:none}
.layout-classic .hc-srch-glass:focus-within{border-color:var(--brand);
  box-shadow:var(--shadow-sm),0 0 0 3px var(--brand-10)}
.layout-classic .hc-srch-ico{color:var(--g400)}
.layout-classic .hc-srch-glass input{color:var(--g900)}
.layout-classic .hc-srch-glass input::placeholder{color:var(--g400)}
.layout-classic .hc-hero-wave path{fill:var(--body-bg)}
.layout-classic .hc-suggest{background:#fff}
.layout-classic .hc-hero .hc-suggest{background:#fff;border-color:var(--g200)}
.layout-classic .hc-hero .hc-suggest-item{color:var(--g700)}
.layout-classic .hc-hero .hc-suggest-item:hover,.layout-classic .hc-hero .hc-suggest-item.hc-act{
  background:var(--brand-5);color:var(--brand-ink,var(--brand))}
.layout-classic .hc-hero .hc-suggest-item svg{color:var(--g400)}
.layout-classic .hc-cat{border-radius:10px}
.layout-classic .hc-arow{border-radius:8px}


/* ── Premium glassmorphism redesign system ─────────────────────────────────── */
#hc-page *, .hc-hdr *, .hc-foot *{letter-spacing:0!important}
.hc-orb,.hc-hero-wave{display:none!important}
body{
  min-height:100vh;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.92) 45%, rgba(246,243,255,.96)),
    linear-gradient(90deg, rgba(var(--br),.08), rgba(14,165,233,.08));
}
.hc-hdr{
  background:rgba(255,255,255,.68)!important;
  border-bottom:1px solid rgba(148,163,184,.22)!important;
  box-shadow:0 18px 50px rgba(15,23,42,.08)!important;
}
.hc-hdr-inner{height:68px;justify-content:space-between}
.hc-hdr-search,.hc-hdr-search-wrap{display:none!important}
.hc-logo{padding:0!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.hc-hdr-home{background:rgba(255,255,255,.54);border:1px solid rgba(148,163,184,.22);color:var(--g700);font-weight:800;border-radius:14px;padding:9px 13px}
.hc-main{background:transparent;position:relative;z-index:1}
.hc-hero{
  min-height:430px;
  display:grid;
  place-items:center;
  padding:84px 24px 94px;
  background:
    linear-gradient(135deg, rgba(7,12,28,.96), rgba(22,36,70,.86) 52%, rgba(var(--br),.50)),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent);
}
.hc-hero:before{background:linear-gradient(120deg, rgba(255,255,255,.14), transparent 34%, rgba(255,255,255,.08) 70%, transparent)!important}
.hc-hero:after{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:44px 44px;opacity:.44!important}
.hc-hero-inner{max-width:880px;width:100%;padding:34px;border-radius:32px;background:rgba(255,255,255,.105);border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 34px 90px rgba(2,6,23,.22);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.hc-hero-pill{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.86);text-transform:none;font-size:12px;font-weight:800;padding:7px 14px;margin-bottom:20px}
.hc-hero h1{font-weight:900;letter-spacing:0;font-size:clamp(34px,5vw,64px);line-height:1.05;color:#fff;text-wrap:balance}
.hc-hero-sub{color:rgba(255,255,255,.78);font-size:17px;margin-bottom:28px}
.hc-srch-glass{border-radius:20px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 42px rgba(2,6,23,.18)}
.hc-srch-glass button{border-radius:14px;background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 70%,#00d4ff));box-shadow:0 14px 30px rgba(var(--btn-rgb),.32)}
.hc-suggest{border-radius:18px;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
.hc-hero .hc-suggest{background:rgba(15,23,42,.74);border-color:rgba(255,255,255,.18)}
.hc-sec{margin-top:10px;margin-bottom:18px}.hc-sec-label{font-size:12px;color:var(--g600);font-weight:900;text-transform:none}.hc-sec-line{background:linear-gradient(90deg,rgba(var(--br),.32),transparent)}
.hc-cats{grid-template-columns:repeat(12,1fr);gap:16px}.hc-cat{grid-column:span 4;min-height:205px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 22px 60px rgba(15,23,42,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hc-cat:nth-child(5n+1),.hc-cat:nth-child(5n+4){grid-column:span 5}.hc-cat:nth-child(5n+2){grid-column:span 7}.hc-cat:before{height:100%;width:4px;right:auto;transform:none;background:linear-gradient(180deg,var(--brand),rgba(14,165,233,.76))}.hc-cat:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 28px 70px rgba(15,23,42,.13)}
.hc-cat-ico{width:52px;height:52px;border-radius:18px;background:rgba(var(--br),.12);border-color:rgba(var(--br),.18)}.hc-cat-name{font-size:17px;font-weight:900}.hc-cat-desc{font-size:13px;color:var(--g600)}.hc-cat-badge{background:rgba(255,255,255,.7);border:1px solid rgba(148,163,184,.20);font-weight:800}
.hc-pop-list,.hc-alist{gap:10px}.hc-pop-item,.hc-arow,.hc-cats-tint-theme .hc-home-cat{background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.72);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 38px rgba(15,23,42,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hc-pop-num{width:34px;height:34px;border-radius:12px;background:rgba(var(--br),.10);display:grid;place-items:center;color:var(--brand-ink,var(--brand))}
.hc-art-layout{max-width:1180px;grid-template-columns:minmax(0,1fr) 270px}.hc-art-card,.hc-side-card{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.76);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 24px 70px rgba(15,23,42,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.hc-art-title{letter-spacing:0;font-size:clamp(26px,3vw,42px)}.hc-body{color:#334155}.hc-feedback{background:rgba(255,255,255,.52);border-color:rgba(255,255,255,.66);border-radius:22px}.hc-fb-btn{border-radius:14px;background:rgba(255,255,255,.74)}
.hc-empty{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);border-radius:28px;box-shadow:0 24px 70px rgba(15,23,42,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hc-foot{background:transparent;border-top:1px solid rgba(148,163,184,.16)}
.hc-route-loader{position:fixed;inset:0;z-index:450;display:none;place-items:center;background:rgba(248,250,252,.46);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hc-route-loader.show{display:grid}.hc-route-loader-card{min-width:230px;border-radius:22px;padding:18px 20px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.78);box-shadow:0 24px 70px rgba(15,23,42,.16);font-weight:900;color:var(--g800);display:flex;align-items:center;gap:12px}.hc-route-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(var(--br),.16);border-top-color:var(--brand);animation:hc-spin .8s linear infinite}@keyframes hc-spin{to{transform:rotate(360deg)}}
.hc-toast{position:fixed;left:50%;bottom:28px;z-index:500;transform:translate(-50%,18px);opacity:0;pointer-events:none;max-width:min(420px,calc(100vw - 36px));padding:13px 16px;border-radius:18px;background:rgba(15,23,42,.86);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 70px rgba(2,6,23,.30);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;font-weight:800;transition:.2s var(--ease)}.hc-toast.show{opacity:1;transform:translate(-50%,0)}
.hc-feedback-done{margin:0;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px}.hc-feedback-done.ok{color:#059669}.hc-feedback-done.soft{color:#475569}.hc-feedback-done a{font-weight:900}
.surface-smoke{--body-bg:#101827;--card-bg:rgba(15,23,42,.66);--card-border:rgba(255,255,255,.10);--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8}.surface-smoke .hc-main,.surface-smoke+.hc-foot{color:#f8fafc}.surface-smoke .hc-cat,.surface-smoke .hc-pop-item,.surface-smoke .hc-arow,.surface-smoke .hc-art-card,.surface-smoke .hc-side-card,.surface-smoke .hc-empty,.surface-smoke .hc-cats-tint-theme .hc-home-cat{background:rgba(15,23,42,.58);border-color:rgba(255,255,255,.12);color:#f8fafc}.surface-smoke .hc-body{color:#cbd5e1}.surface-pearl .hc-cat,.surface-pearl .hc-pop-item,.surface-pearl .hc-arow,.surface-pearl .hc-art-card,.surface-pearl .hc-side-card,.surface-pearl .hc-cats-tint-theme .hc-home-cat{background:rgba(255,255,255,.82)}.surface-solid .hc-cat,.surface-solid .hc-pop-item,.surface-solid .hc-arow,.surface-solid .hc-art-card,.surface-solid .hc-side-card,.surface-solid .hc-cats-tint-theme .hc-home-cat{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;border-color:#e2e8f0}
.hero-compact .hc-hero{min-height:300px;padding:46px 24px}.hero-compact .hc-hero-inner{max-width:760px;padding:24px}.hero-split .hc-hero{text-align:left;place-items:stretch}.hero-split .hc-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:28px;align-items:center;max-width:1120px}.hero-split .hc-srch-wrap{margin:0}.hero-split .hc-hero-stats{justify-content:flex-start}.density-airy .hc-main{padding-top:68px}.density-airy .hc-cats{gap:22px}.density-airy .hc-cat{padding:30px}.density-compact .hc-main{padding-top:30px}.density-compact .hc-cat{min-height:160px;padding:18px}.density-compact .hc-pop-item,.density-compact .hc-arow{padding:12px 16px}.cards-bordered .hc-cat,.cards-bordered .hc-pop-item,.cards-bordered .hc-arow,.cards-bordered .hc-art-card,.cards-bordered .hc-side-card{box-shadow:none;border:1.5px solid rgba(148,163,184,.28)}.cards-soft .hc-cat,.cards-soft .hc-pop-item,.cards-soft .hc-arow,.cards-soft .hc-art-card,.cards-soft .hc-side-card{box-shadow:0 8px 28px rgba(15,23,42,.045);border-radius:20px}
.layout-nebula{--body-bg:#eef4ff}.layout-nebula .hc-hero{background:linear-gradient(135deg,#07111f,#18375f 56%,color-mix(in srgb,var(--brand) 48%,#06101f))}.layout-nebula .hc-main{max-width:1180px}
.layout-aurora{--body-bg:#f3fbf8}.layout-aurora .hc-hero{background:linear-gradient(135deg,#e8fff7,#eef5ff 42%,#fbf0ff);color:#0f172a}.layout-aurora .hc-hero-inner{background:rgba(255,255,255,.62);color:#0f172a}.layout-aurora .hc-hero h1{color:#0f172a}.layout-aurora .hc-hero-sub,.layout-aurora .hc-hero-stats,.layout-aurora .hc-hero-stats strong{color:#475569}.layout-aurora .hc-srch-glass{background:rgba(255,255,255,.86)}.layout-aurora .hc-srch-glass input{color:#0f172a}.layout-aurora .hc-srch-ico{color:#64748b}.layout-aurora .hc-hero-pill{color:var(--brand-ink,var(--brand));background:rgba(var(--br),.10);border-color:rgba(var(--br),.18)}
.layout-minimal{--body-bg:#fbfcff}.layout-minimal .hc-hero{background:transparent;min-height:auto;padding:42px 24px 12px}.layout-minimal .hc-hero-inner{box-shadow:none;background:rgba(255,255,255,.72);border-color:rgba(148,163,184,.20);text-align:left;max-width:1160px}.layout-minimal .hc-hero h1{color:#0f172a;font-size:clamp(30px,4vw,52px)}.layout-minimal .hc-hero-sub,.layout-minimal .hc-hero-stats,.layout-minimal .hc-hero-stats strong{color:#64748b}.layout-minimal .hc-srch-glass input{color:#0f172a}.layout-minimal .hc-srch-ico{color:#64748b}.layout-minimal .hc-cats{display:block}.layout-minimal .hc-cat{display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center;min-height:0;margin-bottom:10px}.layout-minimal .hc-cat-desc{margin-bottom:0}.layout-minimal .hc-cat-foot{justify-content:flex-end}
.layout-obsidian{--body-bg:#070b12;background:#070b12}.layout-obsidian ~ .hc-foot{background:#070b12}.layout-obsidian .hc-hero{background:linear-gradient(135deg,#05070d,#111827 55%,#10243a)}.layout-obsidian .hc-main{color:#f8fafc}.layout-obsidian .hc-cat,.layout-obsidian .hc-pop-item,.layout-obsidian .hc-arow,.layout-obsidian .hc-art-card,.layout-obsidian .hc-side-card,.layout-obsidian .hc-cats-tint-theme .hc-home-cat{background:rgba(15,23,42,.70);border-color:rgba(255,255,255,.11);color:#f8fafc}.layout-obsidian .hc-body{color:#cbd5e1}.layout-obsidian .hc-sec-label,.layout-obsidian .hc-cat-desc,.layout-obsidian .hc-pop-exc,.layout-obsidian .hc-arow-exc{color:#94a3b8}.layout-obsidian .hc-hdr{background:rgba(7,11,18,.72)!important}.layout-obsidian .hc-logo{color:#f8fafc}.layout-obsidian .hc-hdr-home{background:rgba(255,255,255,.08);color:#f8fafc;border-color:rgba(255,255,255,.12)}
.layout-prism{--body-bg:#fff7fb}.layout-prism .hc-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 80%,#ec4899),#06b6d4 54%,#111827)}.layout-prism .hc-hero-inner{max-width:1080px}.layout-prism .hc-cats{grid-template-columns:repeat(10,1fr)}.layout-prism .hc-cat{grid-column:span 5}.layout-prism .hc-cat:nth-child(3n+1){grid-column:span 10}.layout-prism .hc-cat:nth-child(3n+1) .hc-cat-name{font-size:22px}
.layout-classic{--body-bg:#f8fafc}.layout-classic .hc-hero{background:linear-gradient(180deg,#fff,#eef4ff);min-height:360px}.layout-classic .hc-hero-inner{background:rgba(255,255,255,.82);max-width:820px}.layout-classic .hc-hero h1{color:#0f172a}.layout-classic .hc-hero-sub,.layout-classic .hc-hero-stats,.layout-classic .hc-hero-stats strong{color:#475569}.layout-classic .hc-srch-glass input{color:#0f172a}.layout-classic .hc-srch-ico{color:#64748b}.layout-classic .hc-cats{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.layout-classic .hc-cat,.layout-classic .hc-pop-item,.layout-classic .hc-arow{grid-column:auto!important;border-radius:16px}
.layout-atlas{--body-bg:#f5f7fb}.layout-atlas .hc-hero{text-align:left;background:linear-gradient(135deg,#10243a,#0f766e)}.layout-atlas .hc-hero-inner{max-width:1120px;margin:0 auto 0 0}.layout-atlas .hc-cats{grid-template-columns:320px 1fr 1fr}.layout-atlas .hc-cat{grid-column:auto!important}.layout-atlas .hc-cat:first-child{grid-row:span 2;min-height:430px}.layout-atlas .hc-pop-list{display:grid;grid-template-columns:1fr 1fr}.layout-atlas .hc-pop-item{align-items:flex-start}
.layout-editorial{--body-bg:#fffaf5}.layout-editorial .hc-hero{background:linear-gradient(135deg,#1e293b,#7c2d12);text-align:left}.layout-editorial .hc-hero-inner{max-width:980px;margin-left:max(24px,calc((100vw - 1160px)/2));margin-right:auto}.layout-editorial .hc-cats{grid-template-columns:repeat(6,1fr)}.layout-editorial .hc-cat{grid-column:span 3!important;min-height:260px}.layout-editorial .hc-cat:nth-child(4n+1){grid-column:span 6!important}.layout-editorial .hc-cat-name{font-size:24px}.layout-editorial .hc-pop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.layout-editorial .hc-pop-item{min-height:118px}
.layout-command{--body-bg:#08111f;background:#08111f}.layout-command ~ .hc-foot{background:#08111f}.layout-command .hc-main{color:#e5eefb}.layout-command .hc-hero{background:linear-gradient(135deg,#020617,#0f172a 55%,#082f49)}.layout-command .hc-hero-inner{border-radius:18px;background:rgba(2,6,23,.72);font-family:var(--font)}.layout-command .hc-cat,.layout-command .hc-pop-item,.layout-command .hc-arow,.layout-command .hc-art-card,.layout-command .hc-side-card,.layout-command .hc-cats-tint-theme .hc-home-cat{border-radius:14px;background:rgba(2,6,23,.66);border-color:rgba(125,211,252,.16);color:#e5eefb}.layout-command .hc-cat-ico{border-radius:10px}.layout-command .hc-cats{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.layout-command .hc-cat{grid-column:auto!important}.layout-command .hc-body{color:#cbd5e1}.layout-command .hc-hdr{background:rgba(2,6,23,.78)!important}.layout-command .hc-logo{color:#e5eefb}.layout-command .hc-hdr-home{background:rgba(14,165,233,.08);color:#e5eefb;border-color:rgba(125,211,252,.16)}
.layout-horizon{--body-bg:#f6f8fb}.layout-horizon .hc-hero{background:linear-gradient(90deg,#0f172a 0%,#164e63 50%,color-mix(in srgb,var(--brand) 52%,#0f172a));min-height:330px}.layout-horizon .hc-hero-inner{max-width:1120px}.layout-horizon .hc-cats{display:flex;overflow-x:auto;padding:8px 2px 24px;scroll-snap-type:x mandatory}.layout-horizon .hc-cat{flex:0 0 340px;grid-column:auto!important;scroll-snap-align:start}.layout-horizon .hc-pop-list{display:grid;grid-template-columns:repeat(4,1fr)}.layout-horizon .hc-pop-item{display:block}.layout-horizon .hc-pop-num{margin-bottom:12px}
@media(max-width:920px){.hc-art-layout{grid-template-columns:1fr}.hero-split .hc-hero-inner{grid-template-columns:1fr}.hc-cats,.layout-atlas .hc-cats,.layout-editorial .hc-cats,.layout-prism .hc-cats{display:grid;grid-template-columns:1fr 1fr}.hc-cat,.hc-cat:nth-child(n),.layout-atlas .hc-cat:first-child,.layout-editorial .hc-cat:nth-child(n),.layout-prism .hc-cat:nth-child(n){grid-column:auto!important;min-height:190px}.layout-atlas .hc-pop-list,.layout-editorial .hc-pop-list,.layout-horizon .hc-pop-list{grid-template-columns:1fr}}



/* ── Enterprise configurable nav/header ───────────────────────────────────── */
.hc-hdr-inner{gap:18px}.hc-nav-links{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.hc-nav-links>a,.hc-nav-drop>button,.hc-nav-cta{border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:850;text-decoration:none;padding:9px 11px;border-radius:13px;cursor:pointer;white-space:nowrap}.hc-nav-links>a:hover,.hc-nav-drop>button:hover{background:rgba(255,255,255,.46)}.hc-nav-drop{position:relative}.hc-nav-drop>button{display:flex;align-items:center;gap:5px}.hc-nav-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:190px;padding:8px;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.78);box-shadow:0 26px 70px rgba(15,23,42,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:none}.hc-nav-drop:hover .hc-nav-menu,.hc-nav-drop.is-open .hc-nav-menu{display:grid}.hc-nav-drop::after{content:'';position:absolute;top:100%;left:-8px;right:-8px;height:16px;pointer-events:none}.hc-nav-drop:hover::after,.hc-nav-drop.is-open::after{pointer-events:auto}.hc-nav-menu{animation:hc-navmenu-in .16s ease}@keyframes hc-navmenu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.hc-nav-menu a{padding:10px 11px;border-radius:12px;color:#0f172a;font-size:13px;font-weight:800}.hc-nav-menu a:hover{background:rgba(var(--br),.10)}.hc-nav-cta{background:linear-gradient(135deg,var(--btn),color-mix(in srgb,var(--btn) 72%,#06b6d4));color:#fff!important;box-shadow:0 14px 30px rgba(var(--btn-rgb),.24)}.hc-op-logo-mark{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#06b6d4 52%,#7c3aed);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 24px rgba(37,99,235,.24)}.hc-op-logo-mark span{font-size:15px;font-weight:950}.hc-op-logo-text{font-weight:950;color:inherit}.hc-logo-right .hc-logo{order:5}.hc-logo-right .hc-nav-links{justify-content:flex-start}.hc-logo-center .hc-logo{position:absolute;left:50%;transform:translateX(-50%)}.hc-logo-center .hc-hdr-inner{position:relative}.hc-nav-solid{background:#fff!important}.hc-nav-dark{background:rgba(2,6,23,.88)!important;color:#e5eefb!important;border-color:rgba(255,255,255,.12)!important}.hc-nav-dark .hc-logo,.hc-nav-dark .hc-hdr-home{color:#e5eefb}.hc-nav-dark .hc-nav-links>a:hover,.hc-nav-dark .hc-nav-drop>button:hover{background:rgba(255,255,255,.09)}.hc-nav-floating{top:18px;width:min(1120px,calc(100vw - 32px));margin-left:auto;margin-right:auto;border-radius:24px!important;border:1px solid rgba(255,255,255,.70)!important}.hc-nav-floating + #hc-page .hc-hero{padding-top:120px}.hc-nav-split .hc-hdr-inner{justify-content:space-between}.hc-nav-split .hc-nav-links{justify-content:flex-end}.hc-nav-sidebar{position:fixed!important;left:18px;top:18px;bottom:18px;width:230px;border-radius:28px!important}.hc-nav-sidebar .hc-hdr-inner{height:100%;flex-direction:column;align-items:stretch;padding:20px}.hc-nav-sidebar .hc-logo{justify-content:flex-start}.hc-nav-sidebar .hc-nav-links{flex-direction:column;align-items:stretch;justify-content:flex-start}.hc-nav-sidebar .hc-nav-cta{text-align:center}.hc-nav-sidebar + #hc-page,.hc-nav-sidebar ~ .hc-foot{margin-left:260px}
/* PHASE_HC_NAV_BUILD2/REFINE — dropdown menu presets, caret icon + polish. */
.hc-nav-menu{background:#fff;border:1px solid var(--card-border,#e6e9f0)}
.hc-nav-menu a{display:block;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
.hc-nav-menu a.hc-nav-overview:not(:only-child){color:var(--brand-ink,var(--brand));border-bottom:1px solid var(--card-border);border-radius:9px 9px 0 0;margin-bottom:3px;padding-bottom:11px}
/* Caret icon (SVG, not a text glyph) — small, muted, rotates when open. */
.hc-caret-ico{flex:0 0 auto;opacity:.6;transition:transform .2s var(--ease),opacity .2s var(--ease);margin-left:1px;position:relative;top:1px}
.hc-nav-drop>button:hover .hc-caret-ico{opacity:.95}
.hc-nav-drop:hover>button .hc-caret-ico,.hc-nav-drop.is-open>button .hc-caret-ico{transform:rotate(180deg);top:0}
.hc-caret-none .hc-nav-drop>button .hc-caret-ico{display:none}
/* MEGA (per-group via .hc-drop-mega) — solid, contained multi-column panel. */
.hc-drop-mega .hc-nav-menu{min-width:min(560px,calc(100vw - 40px));max-width:min(760px,calc(100vw - 32px))}
.hc-drop-mega:hover .hc-nav-menu,.hc-drop-mega.is-open .hc-nav-menu{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:2px 10px;padding:14px}
.hc-drop-mega .hc-nav-menu a{min-width:0}
.hc-drop-mega .hc-nav-menu a.hc-nav-overview:not(:only-child){grid-column:1;grid-row:1/-1;align-self:start;border-bottom:0;border-right:1px solid var(--card-border);border-radius:8px 0 0 8px;margin:0 8px 0 0;padding:6px 16px 6px 8px;color:var(--brand-ink,var(--brand));font-weight:850}
@media(max-width:720px){.hc-drop-mega:hover .hc-nav-menu,.hc-drop-mega:focus-within .hc-nav-menu{grid-template-columns:repeat(2,minmax(140px,1fr))}}
/* SIMPLE — flatter, tighter (already solid-white base above). */
.hc-menu-simple .hc-nav-menu{border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(15,23,42,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
.hc-menu-simple .hc-nav-menu a{border-radius:8px;padding:9px 12px;font-weight:750}

/* ═══ PHASE_HC_NAV_PREMIUM — world-class dropdown + mega menu ═══════════════ */
.hc-nav-menu{padding:8px;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.18),0 4px 14px rgba(15,23,42,.08)}
.hc-nav-drop:hover .hc-nav-menu,.hc-nav-drop.is-open .hc-nav-menu{display:block}
.hc-nav-mi-list{display:flex;flex-direction:column;gap:2px;min-width:242px}
.hc-nav-menu .hc-nav-mi{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:13px;white-space:normal;text-decoration:none;transition:background .16s var(--ease,ease)}
.hc-nav-menu .hc-nav-mi:hover{background:color-mix(in srgb,var(--brand,#6366f1) 9%,transparent)}
.hc-nav-mi-ic{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--brand-ink,var(--brand,#6366f1));background:color-mix(in srgb,var(--brand,#6366f1) 12%,transparent);transition:transform .16s var(--ease,ease),background .16s}
.hc-nav-menu .hc-nav-mi:hover .hc-nav-mi-ic{transform:translateY(-1px) scale(1.05);background:color-mix(in srgb,var(--brand,#6366f1) 18%,transparent)}
.hc-nav-mi-ic img{width:20px;height:20px;object-fit:contain;border-radius:5px}
.hc-nav-mi-emo{font-size:17px;line-height:1}
.hc-nav-mi-ltr{font-size:15px;font-weight:850;color:var(--brand-ink,var(--brand,#6366f1))}
.hc-nav-mi-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hc-nav-menu .hc-nav-mi-t{font-size:13px;font-weight:750;color:#0f172a;line-height:1.3;white-space:normal}
.hc-nav-mi-d{font-size:11.5px;font-weight:500;color:#64748b;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.hc-nav-mi-ar{flex-shrink:0;color:#cbd5e1;opacity:0;transform:translateX(-3px);transition:opacity .16s,transform .16s}
.hc-nav-menu .hc-nav-mi:hover .hc-nav-mi-ar{opacity:1;transform:none;color:var(--brand-ink,var(--brand,#6366f1))}
.hc-nav-menu .hc-nav-overview{display:block;margin:2px 4px 5px;padding:0;border:0;font-size:11px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink,var(--brand,#6366f1))}
/* MEGA — featured card on the left, a tidy two-column grid of rich items. */
/* The panel hangs a little further off the bar — it was sitting flush against it
   (owner: *"drop the menu dropdown by 4px from the nav. i dont like its touching"*).
   The hover bridge grows with it, or the pointer crosses dead space on the way down and
   the menu closes under it. The sidebar sets its own `top` at higher specificity, so its
   sideways flyout is unaffected. */
/* THE FLOATING CAPSULE WAS HALF OFF THE PAGE. `.hc-nav-floating` centred itself with
   `left:50%;transform:translateX(-50%)`, but `.hc-hdr` is position:STICKY — `left` is a
   sticky threshold there, not an offset, so it did nothing and the transform dragged the
   bar 560px to the left of the viewport. Auto margins centre a sticky element correctly.
   Removing the transform also stops the header being a containing block, which is what a
   position:fixed mega panel inside it needs. */

/* The panel hangs clear of the bar (owner: *"drop the menu dropdown by 4px from the nav.
   i dont like its touching"*). The offset is from the BUTTON, and the button sits 21px
   above the bar's own bottom edge — the header's inner padding — so 25px here is the 4px
   he asked for, measured where he sees it. Stretching the item to the bar's height was
   the tidier idea and does nothing: the links row is only as tall as its buttons, and the
   remaining height is the header's padding, outside it.
   The hover bridge spans the gap, or the pointer crosses dead space on the way down and
   the menu closes under it. */
.hc-nav-menu{top:calc(100% + 25px)}
.hc-nav-drop::after{height:30px}

/* PHASE_HC_NAV_ITEMS_2026-08-14 — THE PANEL SIZES TO ITS CONTENT, and opens CENTRED
   UNDER THE ITEM THAT OPENED IT (owner: *"MEGA MENU OPEN DIRECTLY UNDER IT AND THE MENU IN
   THE CENTER OF THE MEGA MENU, NOW IT SHIFTS TO SIDE"* / *"IT SHOULD BE IN AUTO SIZE, NOT
   OVER WIDE BUT ADJUST ACCORDINGLY TO ALLOW THE TEXT SHOW WELL"*).

   `width:max-content` is what makes it auto: the panel is exactly as wide as its columns
   need and no wider, so adding a promo column GROWS the panel instead of squeezing the
   links into two wrapped lines. The cap is the PAGE's own container — a menu wider than
   the page it belongs to is what put a mega panel past the logo and left oceans of space
   between links (owner: *"SPLIT SHOULD NOT BE WIDER THAN THE PAGE SELECT SIZE"*). */
.hc-drop-mega .hc-nav-menu{
  width:max-content;
  min-width:min(560px,calc(100vw - 40px));
  max-width:min(var(--hc-container,1080px),calc(100vw - 32px));
  padding:12px;
  left:50%;
  /* --hc-mega-shift is 0 unless the panel would leave the viewport; the script nudges it
     by the smallest amount that keeps it on screen, so it stays as centred as it can. */
  transform:translateX(calc(-50% + var(--hc-mega-shift,0px)));
  animation:hc-megamenu-in .16s ease}
/* the shared open animation ends at `transform:none`, which would throw the centring
   away — the mega panel gets its own keyframes that keep it */
@keyframes hc-megamenu-in{
  from{opacity:0;transform:translate(calc(-50% + var(--hc-mega-shift,0px)),-6px)}
  to{opacity:1;transform:translateX(calc(-50% + var(--hc-mega-shift,0px)))}}
/* an OPEN menu paints above the items after it. Without this the nav links that follow
   the open one draw straight through the panel — visible immediately in the sidebar,
   where every other link sits directly over it. */
.hc-nav-drop:hover,.hc-nav-drop.is-open,.hc-nav-drop:focus-within{z-index:60}
/* the link columns get a floor, so a two-word feature name is never wrapped to make room */
.hc-drop-mega .hc-nav-mi-list{grid-template-columns:repeat(2,minmax(196px,1fr))}
.hc-drop-mega:hover .hc-nav-menu,.hc-drop-mega.is-open .hc-nav-menu{display:flex;gap:12px;align-items:stretch}
.hc-drop-mega .hc-nav-mi-list{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;min-width:0}
.hc-nav-menu .hc-nav-feat{flex:0 0 208px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:16px;border-radius:14px;text-decoration:none;position:relative;overflow:hidden;white-space:normal;color:#fff;background:linear-gradient(150deg,var(--brand,#6366f1),color-mix(in srgb,var(--brand,#6366f1) 55%,#06b6d4))}
.hc-nav-feat-ic{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.22);color:#fff}
.hc-nav-feat-ic img{width:22px;height:22px;object-fit:contain}
.hc-nav-menu .hc-nav-feat-t{font-size:16.5px;font-weight:850;line-height:1.2;margin-top:auto;color:#fff}
.hc-nav-feat-d{font-size:12px;font-weight:500;color:rgba(255,255,255,.85);line-height:1.45}
.hc-nav-feat-go{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-size:12px;font-weight:800;color:#fff}
/* PHASE_HC_ANNOUNCE_BAR_2026-08-14 — the OVERVIEW card lost its gradient on hover.
   `.hc-nav-menu a:hover{background:…}` is a SHORTHAND at (0,2,1); this card's fill is a
   base rule at (0,2,0), so touching the card reset background-image to none and it went
   flat white. Same defect the promo cards carry, same cure: restate the fill from one
   token both states read. The arrow's gap still opens on hover — that moves an element
   INSIDE the card, never the card, so the pointer cannot fall off its own target. */
.hc-nav-menu .hc-nav-feat{--hc-feat-fill:linear-gradient(150deg,var(--brand,#6366f1),color-mix(in srgb,var(--brand,#6366f1) 55%,#06b6d4));background-image:var(--hc-feat-fill)}
.hc-nav-menu .hc-nav-feat:hover{background-color:var(--brand,#6366f1);background-image:var(--hc-feat-fill)}
.hc-nav-menu .hc-nav-feat:hover .hc-nav-feat-go{gap:9px}
.hc-nav-dark .hc-nav-mi-t,.hc-nav-dark .hc-nav-menu .hc-nav-mi-t{color:#0f172a}

/* PHASE_HC_ANNOUNCE_BAR_2026-08-14 — THE ANNOUNCEMENTS.
   The portal's `.pannounce`, converted and taken further: many announcements, five
   presentations, and a premium layer the operator configures (owner: *"SHOULD BE ABLE TO
   ADD MANY UNLIMITED NUMBERS OF ANNOUNCEMENTS, AND DIFFERENT VARIANT STYLES"* / *"ADD
   CONFIGURATION TO ADD ANIMATIONS AND DIFFERENT THINGS TO MAKE IT PREMIUM"*).

   Here rather than in a #hc-page sheet because this is CHROME — the header is outside
   #hc-page and so is this. The band sits BEFORE the sticky header, so it scrolls away and
   the nav stays behind it, which is what the portal does too. */
.hc-annbar{position:relative;background:linear-gradient(135deg,var(--brand,#6c5ce7),color-mix(in srgb,var(--brand,#6c5ce7) 60%,#06b6d4));color:#fff;font-size:13px;font-weight:600}
/* bar — one full-width band per announcement, stacked. It is the only variant that can
   have a sibling band, so the divider between them belongs to it and not to `.hc-annbar`. */
.hc-annbar-v-bar + .hc-annbar-v-bar{border-top:1px solid rgba(255,255,255,.18)}
.hc-annbar-in{max-width:var(--hc-container,1080px);margin:0 auto;padding:9px var(--hc-gutter,20px)}
.hc-annbar-item{display:flex;align-items:center;gap:8px;justify-content:center;min-width:0}
.hc-annbar-item > a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;min-width:0}
.hc-annbar-item > a .hc-annbar-tx{text-decoration:underline;text-underline-offset:2px}
.hc-annbar-item > a:hover .hc-annbar-tx{text-decoration-thickness:2px}
.hc-annbar-tx{min-width:0}
.hc-annbar-al-left .hc-annbar-item,.hc-annbar-item.hc-annbar-al-left{justify-content:flex-start}
.hc-annbar-al-center .hc-annbar-item,.hc-annbar-item.hc-annbar-al-center{justify-content:center}
.hc-annbar-al-right .hc-annbar-item,.hc-annbar-item.hc-annbar-al-right{justify-content:flex-end}
/* the badge and the icon — what turns a notice into an announcement */
.hc-annbar-badge{flex:none;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.22);color:inherit}
.hc-annbar-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hc-annbar-ico svg{width:15px;height:15px}
.hc-annbar-ico img{width:15px;height:15px;object-fit:contain}
/* `transparent` drops the fill; solid/gradient arrive as an inline style from the
   operator's colours, which out-specifies this base. */
.hc-annbar-sf-transparent{background:transparent;color:var(--text-primary,#0f172a)}
.hc-annbar-sf-transparent .hc-annbar-badge{background:color-mix(in srgb,var(--brand,#6c5ce7) 16%,transparent);color:var(--brand,#6c5ce7)}

/* ── size ──────────────────────────────────────────────────────────────── */
.hc-annbar-sz-compact .hc-annbar-in{padding-top:5px;padding-bottom:5px}
.hc-annbar-sz-compact{font-size:12px}
.hc-annbar-sz-tall .hc-annbar-in{padding-top:15px;padding-bottom:15px}
.hc-annbar-sz-tall{font-size:14.5px}

/* ── the five presentations ────────────────────────────────────────────── */
/* ribbon — ONE band, every announcement inline, separated by a divider */
.hc-annbar-v-ribbon .hc-annbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px}
.hc-annbar-v-ribbon .hc-annbar-item{position:relative}
.hc-annbar-v-ribbon .hc-annbar-item + .hc-annbar-item::before{content:'';position:absolute;left:-11px;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:currentColor;opacity:.5}
/* rotate — ONE band, one announcement at a time. Every line is stacked in the same grid
   cell so the band's height never changes as it advances: a band that resizes on a timer
   pushes the whole page down while someone is reading it. */
.hc-annbar-v-rotate .hc-annbar-in{display:grid}
.hc-annbar-v-rotate .hc-annbar-item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .45s ease}
.hc-annbar-v-rotate .hc-annbar-item.is-on{opacity:1;visibility:visible}
/* fade is opacity ALONE — stated rather than implied, so the three transitions are three
   rules and none of them is "whatever the base happens to do". */
.hc-annbar-tr-fade .hc-annbar-item{transform:none}
.hc-annbar-tr-slide .hc-annbar-item{transform:translateY(8px)}
.hc-annbar-tr-slide .hc-annbar-item.is-on{transform:none}
.hc-annbar-tr-flip .hc-annbar-item{transform:rotateX(-70deg);transform-origin:top center}
.hc-annbar-tr-flip .hc-annbar-item.is-on{transform:none}
.hc-annbar-tr-flip .hc-annbar-in{perspective:600px}
/* ticker — ONE band, everything scrolling past. The track is rendered twice so the loop
   has no seam; translating by -50% lands exactly on the second copy's start. */
.hc-annbar-v-ticker{overflow:hidden}
.hc-annbar-v-ticker .hc-annbar-in{max-width:none;overflow:hidden}
.hc-annbar-v-ticker .hc-annbar-track{display:flex;align-items:center;gap:0 44px;width:max-content;animation:hc-annbar-run var(--hc-ann-speed,24s) linear infinite}
.hc-annbar-v-ticker .hc-annbar-item{flex:none}
.hc-annbar-v-ticker:hover .hc-annbar-track{animation-play-state:paused}
@keyframes hc-annbar-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* pill — capsules on the page background instead of a full-bleed band */
.hc-annbar-v-pill{background:transparent;color:var(--text-primary,#0f172a);padding:10px 0}
.hc-annbar-v-pill .hc-annbar-in{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:0;padding-bottom:0}
.hc-annbar-v-pill .hc-annbar-item{background:linear-gradient(135deg,var(--brand,#6c5ce7),color-mix(in srgb,var(--brand,#6c5ce7) 60%,#06b6d4));color:#fff;padding:7px 15px;border-radius:999px;box-shadow:0 6px 18px rgba(15,23,42,.14)}
.hc-annbar-v-pill.hc-annbar-sf-transparent .hc-annbar-item{background:transparent;color:inherit;box-shadow:none;border:1px solid color-mix(in srgb,var(--brand,#6c5ce7) 35%,transparent)}

/* ── the premium layer ─────────────────────────────────────────────────── */
/* How the band arrives. FORWARDS, never `both`: a backwards fill holds the FROM keyframe
   before the animation starts, and every one of these starts with a transform — so a band
   whose animation clock had not begun sat 10px above where it belonged. Forwards leaves
   the element at its natural place until it runs, and at `transform:none` after. */
.hc-annbar-an-fade{animation:hc-annbar-fade .5s ease forwards}
.hc-annbar-an-slide{animation:hc-annbar-slide .5s cubic-bezier(.22,1,.36,1) forwards}
.hc-annbar-an-drop{animation:hc-annbar-drop .55s cubic-bezier(.22,1,.36,1) forwards}
.hc-annbar-an-zoom{animation:hc-annbar-zoom .45s cubic-bezier(.22,1,.36,1) forwards}
/* …and a STICKY band fades instead, whichever entrance was chosen. A transform on a
   position:sticky element moves where it sticks — the band would ride 10px off the top of
   the window for the life of the page. Opacity cannot lie about geometry. */
.hc-annbar-sticky.hc-annbar-an-slide,.hc-annbar-sticky.hc-annbar-an-drop,.hc-annbar-sticky.hc-annbar-an-zoom{animation:hc-annbar-fade .5s ease forwards}
@keyframes hc-annbar-fade{from{opacity:0}to{opacity:1}}
@keyframes hc-annbar-slide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes hc-annbar-drop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes hc-annbar-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* the band rides at the top instead of scrolling away. The header is sticky at top:0, so
   it is offset by the band's measured height — see the script in help.php. */
.hc-annbar-sticky{position:sticky;top:0;z-index:210}
/* …and the sticky header drops below it. --hc-annbar-h is measured by the script; with
   no script it is unset and 0px applies, which is the non-sticky behaviour. */
.hc-annbar-sticky ~ .hc-hdr,.hc-annbar-sticky + .hc-hdr{top:var(--hc-annbar-h,0px)}
/* the close button. It is absolutely positioned so removing it cannot reflow the line,
   and it never moves on hover — a control that shifts under the cursor is unhittable. */
.hc-annbar-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:inherit;cursor:pointer;transition:background .15s ease}
.hc-annbar-x:hover{background:rgba(255,255,255,.30)}
.hc-annbar-sf-transparent .hc-annbar-x,.hc-annbar-v-pill .hc-annbar-x{background:color-mix(in srgb,var(--text-primary,#0f172a) 10%,transparent)}
.hc-annbar-sf-transparent .hc-annbar-x:hover,.hc-annbar-v-pill .hc-annbar-x:hover{background:color-mix(in srgb,var(--text-primary,#0f172a) 18%,transparent)}
.hc-annbar:has(.hc-annbar-x) .hc-annbar-in{padding-right:44px}
/* the LEFT SIDEBAR header is position:fixed, so the band has to clear its rail */
@media(min-width:821px){.hc-annbar-nav-sidebar .hc-annbar-in{max-width:none;margin-left:260px}}
/* ── the LEFT SIDEBAR's menus fly out BESIDE the rail ──────────────────────
   The rail stacks its links in a column, so a menu opening BELOW its item opens on top of
   the rest of the rail — the links underneath showed straight through the panel, and the
   panel covered the rail it came from (owner: *"THE MENU IS ON TOP OF THE SIDE BAR, IT IS
   SUPPOSED TO OPEN AWAY FROM THE SIDE BAR JUST NEXT TO IT"*). Beside it, aligned to the
   item's own top, is the only placement that works in a vertical rail. */
@media(min-width:821px){
  /* The flyout is anchored to the RAIL, not to the item. `left:100%` of the ITEM is the
     item's own width, and the items are narrower than the rail and indented inside it —
     so a menu placed that way still started 30px INSIDE the rail it was supposed to clear.
     Making the item static hands the positioning to the rail, whose width is known. */
  .hc-nav-sidebar .hc-nav-drop{position:static}
  .hc-nav-sidebar .hc-nav-menu{top:18px;bottom:auto;left:calc(100% + 14px);right:auto;transform:none;animation:hc-navmenu-in .16s ease}
  .hc-nav-sidebar .hc-drop-mega .hc-nav-menu{left:calc(100% + 14px);transform:none;
    max-width:min(var(--hc-container,1080px),calc(100vw - 290px))}
  /* the hover bridge runs SIDEWAYS here, down the rail's edge — a bridge below the item
     would leave the pointer crossing dead space and the menu would close under it */
  .hc-nav-sidebar .hc-nav-drop::after{top:0;bottom:0;left:100%;right:auto;width:16px;height:auto}
  .hc-nav-sidebar .hc-mega-clamp .hc-nav-menu{position:fixed;left:262px;right:12px}
}
/* dark: an operator colour still wins (it is inline); only the theme's own band shifts */
html[data-theme="dark"] .hc-annbar{background-image:linear-gradient(rgba(11,18,32,.45),rgba(11,18,32,.45)),linear-gradient(135deg,var(--brand,#6c5ce7),color-mix(in srgb,var(--brand,#6c5ce7) 60%,#06b6d4))}
html[data-theme="dark"] .hc-annbar-sf-transparent{background-image:none;color:var(--hc-d-ink,#e8edf5)}
html[data-theme="dark"] .hc-annbar-v-pill{background-image:none;color:var(--hc-d-ink,#e8edf5)}
/* MOTION IS A PREFERENCE, NOT A DECORATION. Everything that moves stops here — the band
   still arrives, the ticker still reads, rotate still advances (the script swaps the
   class either way); only the movement goes. */
@media(prefers-reduced-motion:reduce){
  .hc-annbar[class*="hc-annbar-an-"]{animation:none}
  .hc-annbar-v-ticker .hc-annbar-track{animation:none}
  .hc-annbar-v-rotate .hc-annbar-item{transition:opacity .2s ease;transform:none}
  .hc-annbar-x{transition:none}
}
@media(max-width:600px){
  .hc-annbar-v-ribbon .hc-annbar-in{gap:6px 16px}
  .hc-annbar-badge{display:none}
}

/* PHASE_HC_NAV_ITEMS_2026-08-14 — the mega menu's PROMO COLUMN.
   The portal's feature cards (.pmega-feat / .pmega-feats in portal-core.css), rule for
   rule, wearing the help centre's own nav clothes.

   THE CARD IS A BRAND PANEL, not a pale tile. That is what the portal does
   (`background:var(--accent-bg,linear-gradient(150deg,…))` + white ink) AND what this
   nav already does one element away, on `.hc-nav-feat`. The first cut of this phase
   invented a third look — a white card with a faint brand tint — which matched neither.
   Owner: *"I WANT IT TO WORK LIKE PORTAL, BUT KEEPING THE STYLE FOR THE NAV MENU WE
   ALREADY HAVE, AND HOW THE ICONS ARE STYLED AND THEME AWARE."*

   Tokens: only what is DECLARED at header scope (--brand, --br, --card-bg, --card-border,
   --text-primary). The card tokens are #hc-page-only and a var() on an undeclared token is
   a hardcoded fallback wearing a token's name. */
/* PHASE_HC_NAV_COLUMNS_2026-08-14 — TITLED COLUMNS in a mega menu.
   A child with its own children becomes a column: its label is the heading, its links fill
   the column. The count comes from the content — `--hc-mega-cols` is however many columns
   the operator actually built, capped at 5 — so there is no column-count setting to keep in
   step with the menu (owner: *"or you add a child?"*).

   A menu with nothing grouped keeps `.hc-nav-mi-list`, the flat two-column list, untouched. */
.hc-nav-mcols{flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--hc-mega-cols,3),minmax(0,1fr));gap:4px 14px}
.hc-nav-mcol{min-width:0;display:flex;flex-direction:column}
.hc-nav-mcol-h{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3,#94a3b8);padding:2px 11px 7px;margin-bottom:4px;border-bottom:1px solid var(--card-border,#e2e8f0)}
/* COLLAPSE AS SPACE RUNS OUT. A 5-column menu on a small laptop either overflows or
   crushes its labels, so the count steps down rather than holding. `min()` is what keeps a
   3-column menu at 3 while a 5-column one comes down to 3 — the declared count is a
   ceiling at each step, never a target. */
@media(max-width:1180px){.hc-nav-mcols{grid-template-columns:repeat(min(var(--hc-mega-cols,3),4),minmax(0,1fr))}}
@media(max-width:1020px){.hc-nav-mcols{grid-template-columns:repeat(min(var(--hc-mega-cols,3),3),minmax(0,1fr))}}
@media(max-width:900px){.hc-nav-mcols{grid-template-columns:repeat(min(var(--hc-mega-cols,3),2),minmax(0,1fr))}}
@media(max-width:720px){.hc-nav-mcols{grid-template-columns:minmax(0,1fr)}}
html[data-theme="dark"] .hc-nav-mcol-h{color:var(--hc-d-ink-3,#71809a);border-bottom-color:var(--hc-d-line,#2b3646)}
.hc-nav-feats{flex:0 0 212px;display:flex;flex-direction:column;gap:10px;min-width:0}
/* a card can sit on EITHER side of the links. DOM order does the placing — the left
   column is emitted before the list — so nothing here has to fight the flex order. */
.hc-nav-feats-side-left{order:-1}
/* Where there is genuinely no room for two link columns, one is better than two that
   collide. */
@media(max-width:1000px){.hc-drop-mega .hc-nav-menu:has(.hc-nav-feats) .hc-nav-mi-list{grid-template-columns:minmax(0,1fr)}}
/* When even a centred panel cannot fit — a narrow window, a very wide menu — it is pinned
   across the viewport with a gutter each side rather than nudged off the edge. */
.hc-drop-mega.hc-mega-clamp .hc-nav-menu{position:fixed;left:12px;right:12px;transform:none;max-width:none;min-width:0;animation:hc-navmenu-in .16s ease}
.hc-nav-menu .hc-nav-promo{
  /* the same fill `.hc-nav-feat` carries, so the two cards in one panel are siblings */
  --hc-promo-fill:linear-gradient(150deg,var(--brand,#6366f1),color-mix(in srgb,var(--brand,#6366f1) 55%,#06b6d4));
  --hc-promo-scrim:linear-gradient(160deg,rgba(15,23,42,.05),rgba(15,23,42,.45));
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:3px;
  padding:18px;border-radius:14px;white-space:normal;text-decoration:none;color:#fff;
  background-color:var(--brand,#6366f1);background-image:var(--hc-promo-fill);
  background-size:cover;background-position:center;
  transition:box-shadow .16s ease,filter .16s ease}
/* HOVER MUST NOT MOVE THE CARD — a hover that changes geometry walks the cursor off its
   own target at the edges and the state loops.
   The fill is RESTATED here, and that is not redundancy: the menu's generic
   `.hc-nav-menu a:hover{background:…}` is a SHORTHAND, so it out-specifies the card's base
   rule and resets background-image to none — the card lost its fill the moment the pointer
   touched it. Both states read the same token so they cannot drift. */
.hc-nav-menu .hc-nav-promo:hover{
  background-color:var(--brand,#6366f1);background-image:var(--hc-promo-fill);
  filter:brightness(1.06);box-shadow:0 10px 26px rgba(15,23,42,.22)}
/* an operator BACKGROUND IMAGE is set inline and therefore wins over the fill; it gets a
   scrim under the words so their photo cannot decide whether the copy is readable */
.hc-nav-menu .hc-nav-promo-bg::before{content:'';position:absolute;inset:0;background:var(--hc-promo-scrim);pointer-events:none}
.hc-nav-menu .hc-nav-promo-bg>*{position:relative}
/* how many cards share the column — the portal's count rules */
.hc-nav-feats-1 .hc-nav-promo{min-height:150px}
.hc-nav-feats-2 .hc-nav-promo,.hc-nav-feats-3 .hc-nav-promo,.hc-nav-feats-4 .hc-nav-promo{min-height:84px;padding:14px}
.hc-nav-feats-3 .hc-nav-promo-t,.hc-nav-feats-4 .hc-nav-promo-t{font-size:15px}
/* `size` — how the height is divided. The basis is AUTO and shrinking is off, so a card
   grows into spare height but never below its own content: with `flex:1 1 0` the cards
   split a fixed height and overflow:hidden silently ate the button off the tallest one. */
.hc-nav-feats .hc-nav-promo-auto{flex:1 0 auto}
.hc-nav-feats .hc-nav-promo-full{flex:6 0 auto}
.hc-nav-feats .hc-nav-promo-slim{flex:0 0 auto;min-height:0;padding:11px 14px;gap:1px}
.hc-nav-feats .hc-nav-promo-slim .hc-nav-promo-d{display:none}
/* `align` down the card, `text_align` across it */
.hc-nav-feats .hc-nav-promo-al-top{justify-content:flex-start}
.hc-nav-feats .hc-nav-promo-al-middle{justify-content:center}
.hc-nav-feats .hc-nav-promo-al-bottom{justify-content:flex-end}
.hc-nav-feats .hc-nav-promo-tx-left{align-items:flex-start;text-align:left}
.hc-nav-feats .hc-nav-promo-tx-center{align-items:center;text-align:center}
.hc-nav-feats .hc-nav-promo-tx-right{align-items:flex-end;text-align:right}
.hc-nav-menu .hc-nav-promo-t{font-size:16px;font-weight:800;line-height:1.2;color:#fff}
.hc-nav-menu .hc-nav-promo-d{font-size:12.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.88)}
.hc-nav-menu .hc-nav-promo-go{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;font-weight:700;color:#fff}
/* THE ICON — the same chip `.hc-nav-feat-ic` wears, so every icon in this panel reads as
   one family: a translucent white tile on the brand fill, with the operator's own
   placement and size on top. */
.hc-nav-menu .hc-nav-promo-i{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:8px;border-radius:10px;flex:0 0 auto;background:rgba(255,255,255,.22);color:#fff}
.hc-nav-menu .hc-nav-promo-i svg{width:19px;height:19px}
.hc-nav-menu .hc-nav-promo-i img{width:19px;height:19px;object-fit:contain}
.hc-nav-menu .hc-nav-promo-i .hc-nav-mi-emo,.hc-nav-menu .hc-nav-promo-i .hc-nav-mi-ltr{font-size:15px;font-weight:800;line-height:1;color:#fff}
.hc-nav-feats .hc-nav-promo-i-left{align-self:flex-start}
.hc-nav-feats .hc-nav-promo-i-center{align-self:center}
.hc-nav-feats .hc-nav-promo-i-right{align-self:flex-end}
.hc-nav-menu .hc-nav-promo-i-sm{width:26px;height:26px;border-radius:8px}
.hc-nav-menu .hc-nav-promo-i-sm svg,.hc-nav-menu .hc-nav-promo-i-sm img{width:14px;height:14px}
.hc-nav-menu .hc-nav-promo-i-md{width:34px;height:34px}
.hc-nav-menu .hc-nav-promo-i-lg{width:48px;height:48px;border-radius:13px}
.hc-nav-menu .hc-nav-promo-i-lg svg,.hc-nav-menu .hc-nav-promo-i-lg img{width:26px;height:26px}
/* an explicit icon placement still wins over the text's alignment */
.hc-nav-feats .hc-nav-promo-tx-center .hc-nav-promo-i-left,.hc-nav-feats .hc-nav-promo-tx-right .hc-nav-promo-i-left{align-self:flex-start}
.hc-nav-feats .hc-nav-promo-tx-left .hc-nav-promo-i-right,.hc-nav-feats .hc-nav-promo-tx-center .hc-nav-promo-i-right{align-self:flex-end}
.hc-nav-feats .hc-nav-promo-tx-left .hc-nav-promo-i-center,.hc-nav-feats .hc-nav-promo-tx-right .hc-nav-promo-i-center{align-self:center}
/* on a SLIM STRIP the icon sits inline before the title, so placement does not apply */
.hc-nav-feats .hc-nav-promo-slim{flex-direction:row;align-items:center;gap:0}
.hc-nav-feats .hc-nav-promo-slim .hc-nav-promo-i{width:26px;height:26px;margin:0 10px 0 0;align-self:center}
.hc-nav-feats .hc-nav-promo-slim .hc-nav-promo-t{flex:1;min-width:0;font-size:14px}
.hc-nav-feats .hc-nav-promo-slim .hc-nav-promo-go{margin-top:0;margin-left:10px;white-space:nowrap}
/* DARK — the card carried the full-strength brand while the page around it went dark;
   the portal solves it by keeping the operator's colour and layering a scrim over it,
   and an operator background image (set inline) still wins, which is correct — that
   image already carries its own. Same for `.hc-nav-feat`, which had no dark scrim. */
html[data-theme="dark"] .hc-nav-menu .hc-nav-promo{
  background-image:linear-gradient(rgba(11,18,32,.5),rgba(11,18,32,.5)),var(--hc-promo-fill)}
html[data-theme="dark"] .hc-nav-menu .hc-nav-feat,
html[data-theme="dark"] .hc-nav-menu .hc-nav-feat:hover{
  background-image:linear-gradient(rgba(11,18,32,.5),rgba(11,18,32,.5)),var(--hc-feat-fill)}
html[data-theme="dark"] .hc-nav-menu .hc-nav-promo:hover{
  background-image:linear-gradient(rgba(11,18,32,.5),rgba(11,18,32,.5)),var(--hc-promo-fill)}
@media(prefers-reduced-motion:reduce){.hc-nav-menu .hc-nav-promo{transition:none}}
@media(max-width:820px){.hc-nav-feats{display:none}}
/* PHASE_HC_NAV_BUILD3 — CTA sizes, styles + nav typography. */
.hc-nav-cta{font-size:13px;padding:9px 16px;line-height:1.1;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.hc-cta-sz-small{font-size:12px;padding:7px 12px}
.hc-cta-sz-large{font-size:15px;padding:13px 24px}
.hc-nav-cta.hc-cta-outline{background:transparent!important;color:var(--btn)!important;box-shadow:none!important;border:1.6px solid var(--btn)}
.hc-nav-cta.hc-cta-ghost{background:rgba(var(--btn-rgb),.12)!important;color:var(--btn)!important;box-shadow:none!important}
.hc-nav-cta.hc-cta-outline:hover,.hc-nav-cta.hc-cta-ghost:hover{filter:brightness(.97);transform:translateY(-1px)}
.hc-nav-cta + .hc-nav-cta{margin-left:2px}
.hc-nav-links>a,.hc-nav-drop>button{position:relative;overflow:hidden}.hc-nav-links>a:after,.hc-nav-drop>button:after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:999px;background:var(--nav-custom-hover);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}.hc-nav-links>a:hover:after,.hc-nav-drop>button:hover:after{transform:scaleX(1)}