.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;
}
/* PHASE_HC_HERO_UNDER_NAV_2026-08-27 — this height is a TOKEN now, because the hero is
   pulled up by exactly it. It was 68px here while the hero-side rule was written against
   the 62px in help.php's base rule, which left a 6px band of page background above the
   picture. Measured, not theorised. One source is the only way two rules agree about a
   number neither of them owns. */
.hc-hdr-inner{height:var(--hc-hdr-inner-h,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),var(--btn-2,color-mix(in srgb,var(--btn) 82%,#0f172a)));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,var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)),#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),var(--btn-2,color-mix(in srgb,var(--btn) 82%,#0f172a)));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:var(--hc-hdr-float-top);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}
/* 2026-08-27 — THE ICON WAS SITTING ON THE TITLE.
   Owner, on the overview card: *"has another background mixing it… this auto needs to be
   better organized."* The tile was `position:absolute` at the top-left while the copy was
   bottom-aligned, so on a short card the translucent white square landed ON the heading —
   which is what read as a second background bleeding through the words.
   It is a flow item now, held at the top by an auto margin below it, so the card is a
   plain vertical stack: mark, then a gap that grows, then the copy. Nothing can collide
   with anything, at any card height or in any language. */
.hc-nav-menu .hc-nav-feat{flex:0 0 208px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px;border-radius:14px;text-decoration:none;position:relative;overflow:hidden;white-space:normal;color:#fff;min-height:158px}
.hc-nav-feat-ic{position:static;flex:none;margin:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.20);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:14px;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. */
/* ONE declaration of the fill, read by both states. It used to be declared twice — a
   `background` SHORTHAND in the base rule and a `background-image` here — which is two
   sources for one surface and the reason a hover rule had to restate it a third time. */
.hc-nav-menu .hc-nav-feat{--hc-feat-fill:linear-gradient(150deg,var(--brand,#6366f1),var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)));background-color:var(--brand,#6366f1);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),var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)));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),var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)));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),var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)))}
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),var(--brand-2,color-mix(in srgb,var(--brand) 82%,#0f172a)));
  --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}
/* ══════════════════════════════════════════════════════════════════════════════
   PHASE_HC_NAV_LINKS_ALIGN_2026-08-27 — WHERE THE MENU LINKS SIT.

   Owner: *"the nav links need settings to align the menu left right center, excluding
   CTA buttons, language and theme toggle."*

   The exclusion needs no list. `.hc-nav-links` is one element inside `.hc-nav-collapse`,
   and the language picker, the theme toggle and the CTA buttons are its SIBLINGS there,
   not its children — so moving the links cannot move them, at any setting.

   ONE ID, because this has to beat the nav styles that already set the same property:
   `.hc-nav-split .hc-nav-links{justify-content:flex-end}` and
   `.hc-logo-right .hc-nav-links{justify-content:flex-start}` are (0,2,0) and sit later in
   this file. An explicit choice by the operator outranks a side effect of the nav style.

   No `auto` rule exists on purpose: that value emits no class, so an untouched workspace
   renders the markup it always did and keeps whatever its nav style decided.

   `flex:1` stays in every case — the element still takes the free space, which is what
   gives left and right anything to move against. Only its own alignment changes. */
#hc-hdr.hc-navalign-left   .hc-nav-links{justify-content:flex-start}
#hc-hdr.hc-navalign-center .hc-nav-links{justify-content:center}
#hc-hdr.hc-navalign-right  .hc-nav-links{justify-content:flex-end}
/* The sidebar nav is a COLUMN, so justify-content is its vertical axis and these three
   would push the links up and down the rail instead of across it. There, the setting
   means the same thing on the cross axis. */
#hc-hdr.hc-nav-sidebar.hc-navalign-left   .hc-nav-links{justify-content:flex-start;align-items:flex-start}
#hc-hdr.hc-nav-sidebar.hc-navalign-center .hc-nav-links{justify-content:flex-start;align-items:center}
#hc-hdr.hc-nav-sidebar.hc-navalign-right  .hc-nav-links{justify-content:flex-start;align-items:flex-end}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE_HC_HERO_UNDER_NAV_2026-08-27 — THE HERO STARTS AT THE TOP OF THE PAGE.

   Owner: *"the hero background should not stop where the nav ends, it should go all the
   way to the top. If you don't want it to show below the nav you select solid white, and
   there are options to change the nav background, so we need it that way, because it
   makes the floating nav look terrible."*

   The header is `position:sticky`, so it took a band of flow at the top and the hero
   began under it. On a photographic hero that reads as a white shelf above the picture,
   and the FLOATING capsule — which is meant to hover ON the hero — was floating on that
   shelf instead.

   The hero is pulled up by exactly the bar's height and given it back as padding, so the
   picture reaches y=0 while the words sit where they always did. The bar keeps whatever
   background the operator configured: that IS the control. Frosted (the default) shows
   the hero through it; `hc-nav-solid` covers it completely; a colour set in the Studio
   does what it says.

   ONLY the FIRST child of #hc-page, and only when it is a hero. An article or category
   page emits a subhero or nothing there, and pulling either of those up would slide the
   page under the bar with no padding to catch it.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* The bar is its inner row plus its 1px bottom border. DERIVED, never restated: I
     wrote 63px here from help.php's base rule and measured a 6px seam, because this sheet
     overrides that height to 68px. Two places guessing the same number is exactly how
     that happens. */
  --hc-hdr-inner-h:68px;
  --hc-hdr-h:calc(var(--hc-hdr-inner-h) + 1px);
  /* HOW MUCH TRANSPARENT BORDER THE FIRST BAND ACTUALLY WEARS. It is the bar's height
     everywhere except under a FLOATING capsule, which is inset from the top and so ends
     lower than a bar of the same height. Kept separate from --hc-hdr-h because the
     negative margin must NOT grow with it: margin and border cancel exactly, so raising
     both moves the artwork up and leaves the content precisely where it was. */
  --hc-hdr-ext:var(--hc-hdr-h);
  /* The capsule's own inset, declared once and read by both the capsule and the band
     below it. Restating it in the second place is how the 6px seam happened last time. */
  --hc-hdr-float-top:18px;
  /* Deliberate air under a floating capsule, on top of the inset it costs. */
  --hc-hdr-float-gap:12px;
}
/* A TRANSPARENT TOP BORDER, not extra padding.
   Padding was the first attempt and it cannot work: the twenty hero themes set their own
   `padding` with !important at (0,2,0) — `.layout-minimal .hc-hero{padding:58px …
   !important}` and nineteen more — so a padding-top here is overridden and the heading
   lands under the bar on those themes. A border is a property none of them touch, it
   grows the box by exactly the height that was removed, and a background paints across it
   (border-box is the default clip), so the picture reaches y=0 while every theme's own
   spacing below it is untouched.

   !important on the BORDER alone: several themes reset the hero with `border:0!important`
   (.layout-minimal, .layout-aurora), and that shorthand takes this with it — measured,
   minimal computed border-top:0 and its hero stopped below the bar while the rest
   extended. The margin needs no mark; nothing else sets it. */
#hc-page > .hc-hero:first-child{
  margin-top:calc(-1 * var(--hc-hdr-h));
  border-top:var(--hc-hdr-h) solid transparent!important;
  /* THE ARTWORK HAS TO START WHERE THE BOX NOW STARTS.
     `background-clip` is border-box by default, so the fill DOES reach into the new strip
     — but `background-origin` is PADDING-box, so every layer is still positioned and sized
     against the OLD box and the strip receives a repeat of the tile instead of the top of
     the picture. On a plain 145deg wash that is invisible. On real artwork it is not: a
     workspace whose custom CSS puts `radial-gradient(720px 720px at 15% 20%, …)` on
     #hc-hero had both colour blobs pushed 69px down the page and the strip left showing
     only the near-white base layer, which read as a white band above the hero.
     Origin and clip must agree, or the box grew and the picture did not. */
  background-origin:border-box!important;
}
/* The hero's glow and grain are absolutely positioned against its PADDING box, so at
   inset:0 they would stop where the border begins and leave the top band flat. */
#hc-page > .hc-hero:first-child::before,
#hc-page > .hc-hero:first-child::after{
  top:calc(-1 * var(--hc-hdr-h))!important;
}
/* A hairline and a drop shadow drawn ACROSS a photograph is the artefact this change
   would otherwise introduce, so the bar drops both while it is overlaying a hero. A solid
   or dark nav keeps them: there it is a real edge between two surfaces, not a line on an
   image. Reinstated below the mobile step, where the bar is a menu and not a header. */
body:has(#hc-page > .hc-hero:first-child) .hc-hdr:not(.hc-nav-solid):not(.hc-nav-dark){
  border-bottom-color:transparent;
  box-shadow:none;
}
/* THE SUB-HERO IS THE HERO OF EVERY OTHER PAGE, so it runs to the top too.
   Owner: *"just use the same hero fix for it, its just a sub of main home hero."*

   Same transparent-border extension as the hero, plus three things that band needs and
   the hero does not:

   DOUBLED ID, and this is the one that bit. The per-layout subhero skins carry rules like
   `#hc-page.layout-ledger:is(.view-article,.view-category) #hc-subhero{border-color:
   #94a3b8!important}` — (2,2,0), exactly this rule's weight, and they load AFTER this
   sheet, so they won on document order and repainted the transparent strip as a 69px grey
   band. Owner: *"its not custom css, all sites are like that and obvious when you use
   floating nav."* Quite right: it is a SKIN rule, so it hits every workspace on one of
   those layouts, and only a see-through nav lets you see it. Repeating the id makes this
   (3,2,0) and settles it. Same idiom HcFx and the sidebar rule already use.

   border-top-COLOR is still named separately. `.hcsh` is a card, skins style its
   edge, and a workspace's own Custom CSS reaching it with `border-color:…!important`
   repaints the extension strip as a 69px band of that colour — measured on a real
   workspace as a hard grey line across the top of every article and category page while a
   stock workspace was perfectly continuous. `border-top` alone declares the colour once
   and loses; naming `border-top-color` again at this weight means the strip stays
   invisible whatever anyone paints the card's edge. A border is only invisible while
   nobody colours it.

   overflow. `.hcsh` carries `overflow:hidden`, whose clip region is the PADDING box, so
   the strip is outside it and anything a pseudo-element draws there is cut away. The hero
   has no equivalent problem only because its skin colour is a gradient on the ELEMENT,
   while the sub-hero's sheen and grid are on `:before` / `:after`. Safe to release: both
   are `inset:0` with only `top` moved, so nothing gains room to escape sideways or below.

   min-height. `.hcsh` sizes itself with `min-height:var(--hcsh-min)` and the page is
   border-box, so 69px of border would eat half of a 132px band and squash the title.

   (Padding was tried instead of the border and does not work here: something sets
   `.hcsh` padding at a weight this rule cannot reach, so the strip never opened and the
   title ended up under the bar.)

   FULL-BLEED ONLY. `.hcsh-w-contained` is a max-width card with an 18px radius; pulling a
   rounded card up under the bar clips its own top corners. */
#hc-page#hc-page > #hc-subhero:first-child:not(.hcsh-w-contained){
  margin-top:calc(-1 * var(--hc-hdr-h));
  border-top:var(--hc-hdr-ext) solid transparent!important;
  border-top-color:transparent!important;
  background-origin:border-box!important;
  overflow:visible!important;
  min-height:calc(var(--hcsh-min,132px) + var(--hc-hdr-ext));
}
#hc-page#hc-page > #hc-subhero:first-child:not(.hcsh-w-contained)::before,
#hc-page#hc-page > #hc-subhero:first-child:not(.hcsh-w-contained)::after{
  top:calc(-1 * var(--hc-hdr-ext))!important;
}
/* ══════════════════════════════════════════════════════════════════════════════
   2026-08-27 — A FLOATING CAPSULE SITS LOWER THAN A BAR OF THE SAME HEIGHT.

   Owner: *"when floating nav is in use on any page that has the search bar header on
   it, it should add margin, so that its not so close to the search bar."*

   MEASURED on the live category page, 1400x900, floating capsule:
     capsule            top 18px, height 70px  ->  its bottom edge is at 88px
     band border-box    top 1px
     band content       1 + 69 (border) + 24 (the band's own padding) = 94px
     CLEARANCE                                                          6px

   Six pixels. The hero never showed it because a floating capsule already gives
   `.hc-nav-floating + #hc-page .hc-hero{padding-top:120px}` — and that rule names the
   HERO only. The sub-hero is the band every search-header, category and article page
   uses, and it had no floating rule at all. The compensation everything under the bar
   wears is `--hc-hdr-h`, the bar's HEIGHT, which is correct for a bar flush to the top
   and 18px short for a capsule inset from it.

   Only the BORDER grows. Raising the negative margin with it would move the artwork up
   and leave the content exactly where it was, because the two cancel — which is the whole
   mechanism of the extension above. */
.hc-nav-floating + #hc-page > #hc-subhero:first-child:not(.hcsh-w-contained){
  --hc-hdr-ext:calc(var(--hc-hdr-h) + var(--hc-hdr-float-top) + var(--hc-hdr-float-gap));
}
/* The contained sub-hero is a rounded card that is never pulled under the bar, so it
   takes the clearance as plain top margin instead. */
.hc-nav-floating + #hc-page > #hc-subhero:first-child.hcsh-w-contained{
  margin-top:calc(var(--hc-hdr-float-top) + var(--hc-hdr-float-gap));
}
/* THE THIRD BAND. Fixing the sub-hero and stopping there would have missed the page the
   owner actually screenshotted: an article, or any page whose header is the search bar
   alone, renders `#hc-searchband` — a transparent strip that never extended under the bar
   and so was never given any clearance at all.

   MEASURED before, capsule bottom 88px:
     article  1400px   first content at  92px   ->  CLEARANCE   4px
     article   390px   first content at  84px   ->  CLEARANCE  -4px  (OVERLAPPING)

   Margin, not padding: the strip's background is transparent, so there is nothing to
   paint across, and `.hc-searchband-inner` owns the padding. */
.hc-nav-floating + #hc-page > #hc-searchband:first-child{
  margin-top:calc(var(--hc-hdr-float-top) + var(--hc-hdr-float-gap));
}
@media(max-width:820px){
  /* NARROW IS ITS OWN CASE. The extension is switched off below 820px, so the two bands
     that relied on it lose their clearance with it while the capsule still floats 18px
     down. Measured: sub-hero 23.6px on a category page and 2px on a search page.

     A transparent BORDER again rather than padding — `.hcsh` has its padding set at a
     weight these rules cannot reach, which is the same reason the extension above is a
     border. It paints the band's background across itself, so the strip is invisible. */
  /* (4,2,0). The rule it has to beat is `#hc-page#hc-page > #hc-subhero:first-child…`
     at (3,2,0), a few lines up, and BOTH are !important — which settles nothing on its
     own. Two important declarations are decided by SPECIFICITY, so the ids are doubled.
     Written once without this the border computed 0 and the band did not move at all,
     measured live at 390px: 23.6px of clearance before and 23.6px after. */
  .hc-nav-floating + #hc-page#hc-page > #hc-subhero#hc-subhero:first-child{
    border-top:calc(var(--hc-hdr-float-top) + var(--hc-hdr-float-gap)) solid transparent!important;
    border-top-color:transparent!important;
    background-origin:border-box!important;
    min-height:calc(var(--hcsh-min,132px) + var(--hc-hdr-float-top) + var(--hc-hdr-float-gap))!important;
  }
}
/* The floating capsule already pads the hero for its own offset; it now does that over
   the picture instead of over a white shelf, which is the case the owner reported. */
.hc-nav-floating + #hc-page > .hc-hero:first-child{
  margin-top:calc(-1 * var(--hc-hdr-h));
  border-top:var(--hc-hdr-h) solid transparent!important;
  background-origin:border-box!important;
}
@media(max-width:820px){
  /* Folded into the burger the bar is opaque and taller than its own token, and the
     dropdown opens over the page. Nothing is gained by running the hero behind it. */
  #hc-page > .hc-hero:first-child,
  .hc-nav-floating + #hc-page > .hc-hero:first-child{margin-top:0;border-top:0!important;background-origin:padding-box!important}
  #hc-page#hc-page > #hc-subhero:first-child:not(.hcsh-w-contained){
    margin-top:0;border-top:0!important;background-origin:padding-box!important;
    overflow:hidden!important;min-height:var(--hcsh-min,132px);
  }
  body:has(#hc-page > .hc-hero:first-child) .hc-hdr:not(.hc-nav-solid):not(.hc-nav-dark){
    border-bottom-color:var(--g200);
  }
}
/* Folded into the burger the bar is a stack and the setting has nothing to align, so it
   stands down rather than left-aligning a column of full-width rows. */
@media(max-width:820px){
  #hc-hdr[class*="hc-navalign-"] .hc-nav-links{justify-content:flex-start}
}
/* PHASE_HC_NAV_ME_2026-08-24 — the signed-in chip that replaces the CTA.
   Unprefixed on purpose: the header sits OUTSIDE #hc-page, so a scoped selector
   here would never match it. The class goes on the header, so the CTA is hidden
   only once the reader has actually been confirmed as signed in — a failed or
   slow identity call leaves the shipped CTA exactly where it was. */
.hc-nav-signedin .hc-nav-cta{display:none!important}
.hc-nav-me{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;
  text-decoration:none;color:inherit;font:inherit;font-size:13px;font-weight:850;white-space:nowrap;
  background:rgba(255,255,255,.46);border:1px solid rgba(15,23,42,.08);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.hc-nav-me:hover{background:rgba(255,255,255,.72);border-color:rgba(var(--btn-rgb),.34);transform:translateY(-1px)}
.hc-nav-me-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--btn),var(--btn-2,color-mix(in srgb,var(--btn) 82%,#0f172a)));
  color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(var(--btn-rgb),.26)}
.hc-nav-me-name{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.hc-nav-dark .hc-nav-me{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.hc-nav-dark .hc-nav-me:hover{background:rgba(255,255,255,.16)}
html[data-theme="dark"] .hc-nav-me{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hc-nav-me:hover{background:rgba(255,255,255,.15)}
@media(max-width:560px){.hc-nav-me-name{max-width:10ch}}
.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)}